/*
 * Portada montada con el diseñador (resources/views/v2/portada.blade.php y
 * v2/portada/bloques/*). Prefijo por- (portada; no pb-, que es una utilidad de Bootstrap).
 *
 * Colores y tipografías: alias de los tokens del tema (tokens.css). Lo que
 * falta es el ajuste fino de cada bloque contra el PDF (fase 5 / revisión del
 * diseñador); la estructura y el comportamiento móvil ya son los finales.
 * Mobile-first: lo de fuera de las media queries es el móvil.
 */

.por-portada {
	/* Alias locales de los tokens del tema (tokens.css). */
	--por-texto: var(--jo-texto);
	--por-suave: var(--jo-texto-suave);
	--por-fondo-suave: var(--jo-panel);
	--por-acento: var(--jo-texto);
	--por-sobre-acento: var(--jo-blanco);
	--por-fuente-titulos: var(--jo-fuente-titulos);
	--por-radio: var(--jo-radio);
	--por-hueco: 40px;

	color: var(--por-texto);
	padding-top: 24px;
}

.por-bloques > * + * { margin-top: var(--por-hueco); }
.por-vacia { color: var(--por-suave); text-align: center; padding: 60px 0; }

/* Aviso de vista previa del borrador */
.por-aviso-borrador {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff3cd;
	color: #664d03;
	text-align: center;
	font-size: 14px;
	padding: 8px 16px;
	border-bottom: 1px solid #ffe69c;
}

/* ---------------------------------------------------------------- Comunes */
.por-etiqueta {
	display: inline-block;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.por-seccion__cabecera { margin-bottom: 20px; }
.por-seccion__titulo { font-family: var(--por-fuente-titulos); font-size: 26px; line-height: 1.15; margin: 0 0 8px; }
.por-seccion__texto { color: var(--por-suave); margin: 0; max-width: 60ch; }
.por-seccion__pie { margin: 16px 0 0; text-align: right; }
.por-enlace { color: var(--por-texto); text-decoration: underline; text-underline-offset: 3px; }

.por-boton {
	display: inline-block;
	margin-top: 16px;
	padding: 12px 24px;
	background: var(--por-acento);
	color: var(--por-sobre-acento);
	border-radius: var(--por-radio);
	text-decoration: none;
	font-weight: 600;
}
.por-boton:hover { opacity: .9; color: var(--por-sobre-acento); }
.por-boton--claro { background: #fff; color: var(--por-texto); }
.por-boton--claro:hover { color: var(--por-texto); }

.por-rejilla { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- Productos
   La rejilla de la plantilla ([data-grid="grid-4"]) usa columnas 1fr, que no
   encogen por debajo del contenido: con nombres largos desborda la pantalla
   del móvil. Aquí, columnas minmax(0, 1fr): 2 en móvil, 3 en tablet, 4 en escritorio. */
.tema-v2 .por-productos__rejilla[data-grid] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.por-bloques, .por-bloques > * { min-width: 0; }

/* ---------------------------------------------------------------- Cabecera */
.por-cabecera {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	border-radius: var(--por-radio);
	overflow: hidden;
	background: var(--por-fondo-suave);
}
.por-cabecera__fondo, .por-cabecera__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.por-cabecera--oscura .por-cabecera__fondo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1));
}
.por-cabecera__contenido { position: relative; padding: 24px; max-width: 640px; }
.por-cabecera--oscura .por-cabecera__contenido { color: #fff; }
.por-cabecera--centro { justify-content: center; text-align: center; }
.por-cabecera__titulo { font-family: var(--por-fuente-titulos); font-size: 34px; line-height: 1.1; margin: 0 0 12px; color: inherit; }
.por-cabecera__texto { font-size: 17px; margin: 0; }

/* ---------------------------------------------------------------- Tarjetas y categorías */
.por-tarjeta { display: block; color: var(--por-texto); text-decoration: none; }
.por-tarjeta__imagen {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--por-fondo-suave);
	border-radius: var(--por-radio);
	overflow: hidden;
	margin-bottom: 10px;
}
.por-tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.por-tarjeta--categoria .por-tarjeta__imagen img { object-fit: contain; padding: 12px; }
a.por-tarjeta:hover .por-tarjeta__imagen img { transform: scale(1.03); }
.por-tarjeta__titulo { display: block; font-weight: 600; }
.por-tarjeta__texto { display: block; color: var(--por-suave); font-size: 14px; margin-top: 4px; }

/* Categorías con la foto a un lado (pág. 1 del PDF): recorte sin fondo, título
   en serif, texto corto e icono de línea. En móvil, la foto encima.
   Móvil según la maqueta del diseñador («home page app.pdf», 27-10-2026): más
   margen a los lados y entre columnas, y más aire encima. Solo este bloque: la
   cabecera y los demás bloques siguen con --jo-margen. */
.por-categorias--lateral { padding: 16px 20px 0; }
.por-categorias--lateral .por-rejilla { gap: 40px 36px; }
.por-categoria { display: grid; gap: 10px; align-items: start; color: var(--por-texto); text-decoration: none; }
.por-categoria:hover { color: var(--por-texto); }
.por-categoria__imagen { display: block; aspect-ratio: 1; }
.por-categoria__imagen img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.por-categoria:hover .por-categoria__imagen img { transform: scale(1.04); }
.por-categoria__titulo { display: block; font-family: var(--por-fuente-titulos); font-size: 20px; line-height: 1.15; }
.por-categoria:hover .por-categoria__titulo { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.por-categoria__texto { display: block; margin-top: 8px; font-size: var(--jo-texto-xs); line-height: 1.5; }
.por-categoria__icono { display: block; width: 22px; height: 22px; margin-top: 12px; }
/* Encabezado del bloque como en el diseño: frase corta en gris, sin tamaño de titular. */
.por-categorias--lateral .por-seccion__titulo { font-size: 22px; color: var(--jo-texto-suave); }
.por-categorias--lateral .por-seccion__cabecera { margin-bottom: 32px; }
.por-categoria__icono svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------------- Texto */
.por-texto--estrecho { max-width: 70ch; }
.por-texto--centro { text-align: center; margin-left: auto; margin-right: auto; }
.por-texto__cuerpo > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Banner */
.por-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	border-radius: var(--por-radio);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var(--por-fondo-suave);
}
.por-banner--alta { min-height: 460px; }
.por-banner__fondo, .por-banner__fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.por-banner__fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent 60%); }
.por-banner__contenido { position: relative; display: block; padding: 24px; }
.por-banner--centro { justify-content: center; text-align: center; }
.por-banner--derecha { justify-content: flex-end; text-align: right; }
.por-banner__titulo { display: block; font-family: var(--por-fuente-titulos); font-size: 30px; line-height: 1.1; }
.por-banner__texto { display: block; margin-top: 8px; }
a.por-banner:hover { color: #fff; }

/* Sin ningún texto: la foto sola, sin el degradado que da contraste al texto. */
.por-banner--sin-texto .por-banner__fondo::after { content: none; }

/* Altura «la de la imagen»: la foto entera, sin recortar (los banners de
   promoción del diseñador llevan el texto dentro). Doble clase para ganar al
   min-height de .por-banner en tablet. */
.por-banner.por-banner--imagen:not(.por-banner--lateral) { display: block; min-height: 0; }
.por-banner--imagen:not(.por-banner--lateral) .por-banner__fondo { position: relative; display: block; }
.por-banner--imagen:not(.por-banner--lateral) .por-banner__fondo img { position: static; height: auto; }
.por-banner--imagen:not(.por-banner--lateral) .por-banner__contenido { position: absolute; left: 0; right: 0; bottom: 0; }

/* Estilo «lateral» (los «Inspiración» de las págs. 16 y 21-22): imagen y, al
   lado, el título en un panel. La posición dice en qué lado va el texto. */
.por-banner--lateral {
	display: grid;
	/* Una columna a todo el ancho en móvil: sin esto, el justify-content de
	   .por-banner--derecha/--centro encoge la rejilla. */
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
	align-items: stretch;
	min-height: 0;
	background: var(--jo-panel-medio);
	color: var(--jo-texto-serif);
	text-align: left;
}
.por-banner--lateral .por-banner__fondo { position: relative; aspect-ratio: 16 / 10; }
.por-banner--lateral .por-banner__fondo::after { content: none; }
.por-banner--lateral .por-banner__contenido {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	padding: 28px 24px;
}
.por-banner--lateral .por-banner__titulo { font-size: 28px; }
.por-banner__fondo--vacio { background: var(--jo-panel); }
/* Color del panel */
.por-banner--fondo-arena { background: var(--jo-panel-arena); color: var(--jo-blanco); }
.por-banner--fondo-blanco { background: var(--jo-blanco); color: var(--jo-texto); }
.por-banner--fondo-rojo { background: var(--jo-rojo); color: var(--jo-blanco); }
/* Al pasar el ratón el texto no cambia de color (la plantilla tiñe los a:hover). */
a.por-banner--lateral:hover { color: var(--jo-texto-serif); }
a.por-banner--fondo-arena:hover, a.por-banner--fondo-rojo:hover { color: var(--jo-blanco); }
a.por-banner--fondo-blanco:hover { color: var(--jo-texto); }

/* La palabra entre asteriscos de los títulos (HtmlSeguro::cursivas). */
.por-cabecera__titulo em, .por-seccion__titulo em, .por-banner__titulo em { font-style: italic; }

/* ---------------------------------------------------------------- Titular con palabras que cambian
   «Alquiler de mobiliario y menaje para *eventos*. Bodas»: la última palabra
   va cambiando (assets/v2/js/portada.js). Solo la palabra visible ocupa sitio,
   así las cortas caben en la línea de la frase y las largas («Actos
   institucionales») bajan a la siguiente. La que sale se superpone mientras se
   desvanece. El JS reserva el alto de la palabra más alta para que la página
   no salte al cambiar de línea. */
.por-titular--linea { border-top: 1px solid var(--jo-linea); padding-top: 36px; }
.por-titular__frase {
	margin: 0;
	font-family: var(--por-fuente-titulos);
	font-size: 30px;
	line-height: 1.12;
	color: var(--jo-texto-tenue);
}
.por-titular__rotativo { position: relative; display: inline-block; white-space: nowrap; color: var(--jo-texto-serif); }
.por-titular__palabra {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transform: translateY(.3em);
	transition: opacity .6s ease, transform .6s ease;
}
.por-titular__palabra.is-visible { position: relative; opacity: 1; transform: none; }
.por-titular__palabra.is-saliendo { opacity: 0; transform: translateY(-.3em); transition-duration: .35s; }
.por-titular__rotativo.is-midiendo .por-titular__palabra { transition: none; }
@media (prefers-reduced-motion: reduce) {
	.por-titular__palabra { transform: none !important; transition-duration: .01s; }
}

/* ---------------------------------------------------------------- Ventajas
   Icono blanco en un círculo de color y el texto debajo, alineado a la
   izquierda. Sin color elegido, los del diseño en su orden. */
.por-ventajas__lista, .por-contadores__lista {
	display: grid;
	gap: 28px 20px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	padding: 0;
	margin: 0;
}
.por-ventaja { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.por-ventaja__circulo {
	display: grid; place-items: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--por-color, var(--jo-circulo));
	color: var(--jo-blanco);
}
.por-ventaja__circulo svg { width: 56%; height: 56%; }
.por-ventaja__icono { width: 56%; height: 56%; object-fit: contain; filter: brightness(0) invert(1); }
.por-ventaja__texto { font-size: var(--jo-texto-m); line-height: 1.3; }
.por-ventaja:nth-child(6n+1) .por-ventaja__circulo { --por-color: var(--jo-ventaja-salvia); }
.por-ventaja:nth-child(6n+2) .por-ventaja__circulo { --por-color: var(--jo-ventaja-pizarra); }
.por-ventaja:nth-child(6n+3) .por-ventaja__circulo { --por-color: var(--jo-ventaja-mostaza); }
.por-ventaja:nth-child(6n+4) .por-ventaja__circulo { --por-color: var(--jo-ventaja-teja); }
.por-ventaja:nth-child(6n+5) .por-ventaja__circulo { --por-color: var(--jo-ventaja-rosa); }
.por-ventaja:nth-child(6n+6) .por-ventaja__circulo { --por-color: var(--jo-ventaja-malva); }
.por-ventaja .por-ventaja__circulo--salvia { --por-color: var(--jo-ventaja-salvia); }
.por-ventaja .por-ventaja__circulo--pizarra { --por-color: var(--jo-ventaja-pizarra); }
.por-ventaja .por-ventaja__circulo--mostaza { --por-color: var(--jo-ventaja-mostaza); }
.por-ventaja .por-ventaja__circulo--teja { --por-color: var(--jo-ventaja-teja); }
.por-ventaja .por-ventaja__circulo--rosa { --por-color: var(--jo-ventaja-rosa); }
.por-ventaja .por-ventaja__circulo--malva { --por-color: var(--jo-ventaja-malva); }

/* ---------------------------------------------------------------- Contadores */
.por-contador { text-align: center; }
.por-contador__cifra {
	display: block;
	font-family: var(--por-fuente-titulos);
	font-size: 42px;
	line-height: 1;
	color: var(--jo-texto-tenue);
	font-variant-numeric: lining-nums tabular-nums;
}
.por-contador__etiqueta { display: block; color: var(--por-suave); font-size: var(--jo-texto-m); margin-top: 8px; }

/* ---------------------------------------------------------------- Configurador
   Foto a todo el ancho con el logotipo encima y, debajo, panel con el título
   grande, el texto y el botón redondo (revisión del diseñador). */
.por-cta { background: var(--jo-panel-configurador); }
.por-cta__foto { position: relative; }
.por-cta__imagen { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.por-cta__logo { position: absolute; left: 5%; top: 8%; width: 90px; height: auto; }
.por-cta__panel { display: grid; gap: 28px; padding: 32px 24px 36px; }
.por-cta__titulo { margin: 0 0 24px; font-family: var(--por-fuente-titulos); font-size: 34px; line-height: 1.08; color: var(--jo-texto); }
.por-cta__titulo em { font-style: italic; }
.por-cta__texto { font-size: var(--jo-texto-l); line-height: 1.4; max-width: 34ch; }
.por-cta__texto p { margin: 0 0 14px; }
.por-cta__texto p:last-child { margin-bottom: 0; }
.por-cta__texto strong { font-weight: 600; }
.por-cta__boton {
	display: inline-flex; align-items: center; gap: 20px; justify-self: start;
	color: var(--jo-texto); font-weight: 500; text-decoration: none;
}
.por-cta__boton:hover { color: var(--jo-texto); }
.por-cta__boton:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.por-cta__circulo {
	display: grid; place-items: center; flex: none;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--jo-acento); color: var(--jo-blanco);
	transition: transform .3s;
}
.por-cta__circulo svg { width: 70%; height: 70%; }
.por-cta__boton:hover .por-cta__circulo { transform: rotate(45deg); }

/* ---------------------------------------------------------------- Reseñas («Tu opinión cuenta.») */
.por-resenas__titulo { margin-bottom: 16px; }
.por-resenas__panel { display: grid; gap: 24px; background: var(--jo-panel-resenas); padding: 24px 20px; }
.por-resenas__resumen { color: var(--jo-texto); }
.por-resenas__sello { display: block; width: 78px; height: 78px; }
.por-resenas__media { display: flex; align-items: center; gap: 8px; margin: 18px 0 2px; color: var(--jo-azul); }
.por-resenas__nota { font-size: var(--jo-texto-l); font-weight: 500; }
.por-resenas__total { margin: 0; font-size: var(--jo-texto-xs); font-weight: 500; }
.por-resenas__enlace { display: inline-block; margin-top: 18px; color: var(--jo-texto); text-decoration: none; }
.por-resenas__enlace:hover { color: var(--jo-texto); text-decoration: underline; text-underline-offset: 3px; }

/* Estrellas: cinco huecas y, encima, cinco llenas recortadas a la nota
   (--por-nota, de 0 a 5; admite medias). */
.por-estrellas { position: relative; display: inline-block; font-size: 18px; line-height: 1; color: var(--jo-azul); white-space: nowrap; }
.por-estrellas::before { content: '\2606\2606\2606\2606\2606'; }
.por-estrellas::after {
	content: '\2605\2605\2605\2605\2605';
	position: absolute; left: 0; top: 0;
	width: calc(var(--por-nota, 5) / 5 * 100%);
	overflow: hidden;
}

.por-resenas__carrusel { min-width: 0; }
.por-resenas__lista {
	display: flex; gap: 16px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none;
}
.por-resenas__lista::-webkit-scrollbar { display: none; }
.por-resenas__lista:focus-visible { outline: 1px solid var(--jo-texto); outline-offset: 4px; }
.por-resena { flex: 0 0 85%; scroll-snap-align: start; margin: 0; padding: 20px; background: var(--jo-tarjeta-resena); }
.por-resena__autor { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; font-size: var(--jo-texto-xs); line-height: 1.3; }
.por-resena__autor strong { display: block; font-weight: 500; }
.por-resena__autor small { display: block; font-size: var(--jo-texto-xs); color: var(--jo-texto-tenue); }
.por-resena__inicial {
	display: grid; place-items: center; flex: none;
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--jo-avatar-resena); color: var(--jo-blanco);
	font-size: 20px; font-weight: 300;
}
.por-resena__estrellas { font-size: 17px; }
.por-resena blockquote { margin: 14px 0 0; padding: 0; border: 0; font-style: normal; font-size: 12px; line-height: 1.55; color: var(--jo-texto); }
.por-resenas__vacio { margin: 0; font-family: var(--por-fuente-titulos); font-size: 22px; line-height: 1.25; color: var(--jo-texto-suave); max-width: 30ch; }
.por-resenas__flechas { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.por-resenas__flechas[hidden] { display: none; }
.por-resenas__flecha {
	width: 32px; height: 32px; padding: 0; border-radius: 50%;
	border: 1px solid var(--jo-texto-tenue); background: transparent; color: var(--jo-texto);
	font-size: 20px; line-height: 1;
}
.por-resenas__flecha:hover:not(:disabled) { background: var(--jo-tarjeta-resena); }
.por-resenas__flecha:disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------- Newsletter
   Como el banner del diseñador: recuadro arena con filete blanco, título a la
   izquierda y logotipo a la derecha. */
.por-newsletter { padding: 12px; background: var(--jo-panel-newsletter); color: var(--jo-blanco); }
.por-newsletter__marco { display: grid; gap: 28px; align-items: center; padding: 32px 24px; border: 1px solid var(--jo-blanco); }
.por-newsletter__titulo { margin: 0; font-family: var(--por-fuente-titulos); font-size: 24px; line-height: 1.05; color: var(--jo-blanco); }
.por-newsletter__titulo em { display: block; font-size: 1.6em; font-style: italic; }
.por-newsletter__texto { margin: 12px 0 0; max-width: 46ch; }
.por-newsletter__boton {
	display: inline-block; margin-top: 20px; padding: 10px 22px;
	border: 1px solid var(--jo-blanco); color: var(--jo-blanco);
	font-size: var(--jo-texto-s); letter-spacing: .04em; text-decoration: none;
	transition: background .2s, color .2s;
}
.por-newsletter__boton:hover { background: var(--jo-blanco); color: var(--jo-texto); }
.por-newsletter__marca { text-align: center; }
.por-newsletter__marca img { display: block; width: min(100%, 300px); height: auto; margin: 0 auto; }

/* ================================================================ Tablet */
@media (min-width: 768px) {
	.por-portada { --por-hueco: 56px; }
	.por-seccion__titulo { font-size: 32px; }
	.por-cabecera { min-height: 520px; }
	.por-cabecera__contenido { padding: 48px; }
	.por-cabecera__titulo { font-size: 48px; }
	.por-banner { min-height: 380px; }
	.por-banner--alta { min-height: 560px; }
	.por-banner__contenido { padding: 40px; max-width: 60%; }
	.por-banner__titulo { font-size: 40px; }
	.por-banner--lateral { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); min-height: 300px; }
	.por-banner--lateral.por-banner--izquierda { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
	.por-banner--lateral.por-banner--reparto-1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 360px; }
	.por-banner--lateral.por-banner--izquierda .por-banner__contenido { order: -1; }
	.por-banner--lateral .por-banner__fondo { aspect-ratio: auto; }
	.por-banner--lateral .por-banner__contenido { max-width: none; padding: 40px 48px; }
	.por-banner--lateral .por-banner__titulo { font-size: 32px; }
	.por-banner--reparto-1-1 .por-banner__titulo { font-size: 40px; }
	.por-rejilla--3, .por-rejilla--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.por-categorias--lateral { padding: 12px 0 0; } /* más aire bajo la cabecera (diseñador, 27-10-2026) */
	.por-categorias--lateral .por-rejilla { gap: 56px 40px; }
	.por-categoria { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; }
	.por-categoria__titulo { font-size: 22px; }
	.por-categorias--lateral .por-seccion__titulo { font-size: 21px; } /* 24 px antes: el diseñador lo quiso algo más pequeño (28-10-2026) */
	.tema-v2 .por-productos__rejilla[data-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.por-titular--linea { padding-top: 56px; }
	.por-titular__frase { font-size: 40px; }
	.por-ventajas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.por-contadores__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.por-contador__cifra { font-size: 54px; }
	.por-cta__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 64px 56px 56px; }
	.por-cta__titulo { font-size: 48px; margin-bottom: 40px; }
	.por-cta__logo { width: 110px; }
	.por-resenas__panel { grid-template-columns: 200px minmax(0, 1fr); align-items: center; padding: 32px; }
	.por-resena { flex-basis: calc((100% - 16px) / 2); }
	.por-newsletter { padding: 16px; }
	.por-newsletter__marco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 48px 40px; }
	.por-newsletter__titulo { font-size: 30px; }
}

/* ================================================================ Escritorio */
@media (min-width: 1100px) {
	/* Barra lateral fija a la izquierda, como en la pág. 16 */
	.por-portada--con-barra { display: grid; grid-template-columns: var(--jo-ancho-barra) minmax(0, 1fr); gap: 40px; align-items: start; }

	.por-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tema-v2 .por-productos__rejilla[data-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.por-titular__frase { font-size: 44px; }
	.por-categorias--lateral .por-rejilla { gap: 80px 96px; }
	.por-categoria { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
	.por-categoria__titulo { font-size: 25px; }
	.por-ventajas__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.por-contador__cifra { font-size: 64px; }
	.por-cta__panel { padding: 88px 96px 72px; }
	.por-cta__titulo { font-size: 62px; }
	.por-cta__circulo { width: 64px; height: 64px; }
	.por-resenas__panel { grid-template-columns: 290px minmax(0, 1fr); padding: 34px 44px 34px 56px; }
	.por-resenas__lista { gap: 36px; }
	.por-resena { flex-basis: calc((100% - 72px) / 3); }
	.por-newsletter { padding: 28px; }
	.por-newsletter__marco { padding: 56px 48px; }
	.por-newsletter__titulo { font-size: 34px; }
	.por-newsletter__marca img { width: min(100%, 390px); }
}