/*
Theme Name:   Grupo Salas
Theme URI:    https://gruposalas.com.pe
Description:  Tema hijo de GeneratePress para el sitio de Grupo Salas. Todas las personalizaciones visuales del proyecto viven aquí, nunca en el tema padre — así una actualización de GeneratePress no borra el trabajo (regla 5 de la Sección 0b del plan).
Author:       Grupo Salas
Template:     generatepress
Version:      1.0.0
Text Domain:  gruposalas
*/

/* ==========================================================================
   Paleta del proyecto — definida en la Fase 2 del plan.
   Se declara una sola vez acá y se reutiliza en todo el sitio, para que
   cambiar un color de marca sea editar una línea y no buscar por archivos.
   ========================================================================== */

:root {
	/* --- Colores de marca -------------------------------------------------
	   Extraídos del logo real de gpo SALAS Stores con Just Color Picker.
	   Estos son los colores oficiales: no cambiarlos sin que cambie el logo.

	     Azul marino   #001F4E  (0, 31, 78)     — "SALAS" del logo
	     Dorado medio  #C98937  (201, 137, 55)  — "gpo" y "Stores"
	     Dorado claro  #F8AF63  (248, 175, 99)  — extremo claro de la onda
	     Dorado oscuro #846309  (132, 99, 9)    — extremo oscuro de la onda
	   -------------------------------------------------------------------- */

	--gs-principal: #001F4E;
	--gs-principal-oscuro: #001536;
	/* Azul intermedio derivado, solo para degradados: no está en el logo */
	--gs-principal-medio: #0A3A6E;
	--gs-principal-claro: #E9EDF4;

	--gs-acento: #C98937;
	--gs-acento-claro: #F8AF63;
	--gs-acento-oscuro: #846309;

	/* El fondo del sitio NO es blanco puro.
	   Es un gris muy tenue con un matiz azulado: así la cabecera blanca y las
	   tarjetas de producto se despegan del fondo por diferencia de tono, sin
	   necesidad de bordes ni sombras marcadas. Es el recurso que usa Apple y
	   la razón por la que su interfaz se ve ordenada sin líneas divisorias. */
	--gs-fondo: #F5F6F8;
	--gs-fondo-elevado: #FFFFFF;

	--gs-texto: #1F2937;
	--gs-texto-suave: #6B7280;
	--gs-borde: #E5E7EB;
	--gs-gris-fondo: #EEF0F4;

	/* Ritmo vertical y radios, para que el sitio se sienta consistente */
	/* Altura real de la cabecera, medida en el navegador.
	   La usa la portada para ocupar exactamente una pantalla: si el valor no
	   coincide con la cabecera real, sobra o falta espacio y aparece un scroll
	   de unos pocos píxeles que se siente descuidado.
	   Si cambia el alto del logo, hay que volver a medirla. */
	--gs-header-alto: 79px;
	--gs-header-alto-movil: 63px;

	--gs-radio: 10px;
	--gs-radio-chico: 6px;
	--gs-sombra: 0 1px 3px rgba(31, 41, 55, .08), 0 4px 16px rgba(31, 41, 55, .06);
	--gs-sombra-fuerte: 0 6px 24px rgba(31, 41, 55, .12);
	--gs-transicion: 180ms ease;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	color: var(--gs-texto);
	background-color: var(--gs-fondo);
}

a {
	color: var(--gs-principal);
}

a:hover,
a:focus {
	color: var(--gs-principal-oscuro);
}

/* Accesibilidad: foco siempre visible al navegar con teclado.
   GeneratePress lo deja muy sutil; acá se refuerza. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--gs-acento);
	outline-offset: 2px;
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

/* La cabecera es blanca sobre el fondo gris del sitio. El escalón de tono
   basta para separarlas: la línea inferior es apenas un apoyo, no el
   protagonista. */
.site-header {
	background-color: var(--gs-fondo-elevado);
	border-bottom: 1px solid rgba(0, 31, 78, .07);
}

/* Cabecera compacta.
   Antes medía 132px de alto, que es mucho espacio permanente robado al
   contenido en cada página. El logo tiene tres líneas de texto apiladas
   ("gpo", "SALAS", "Stores") y por eso necesita más altura que un logo de una
   sola línea, pero 58px alcanzan para leerlo. */
.site-header .inside-header {
	padding-top: 10px;
	padding-bottom: 10px;
}

.site-logo img {
	height: auto;
	max-height: 58px;
	width: auto;
}

/* El menú acompaña la cabecera compacta */
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
	line-height: 1;
	padding-top: 14px;
	padding-bottom: 14px;
}

@media (max-width: 768px) {
	.site-logo img {
		max-height: 46px;
	}

	.site-header .inside-header {
		padding-top: 8px;
		padding-bottom: 8px;
	}
}

/* ==========================================================================
   Lienzo del contenido
   ========================================================================== */

/* GeneratePress envuelve el contenido en una tarjeta blanca (.inside-article).
   Se deja transparente para que el gris del sitio llegue hasta el contenido:
   de lo contrario las tarjetas de producto quedarían blancas sobre blanco y
   el efecto de separación por tono no se vería.
   Las tarjetas, la barra de filtros y el formulario son los que van en blanco.

   Se excluye la portada porque ahí el contenido es la imagen a pantalla
   completa y no debe tener ni relleno ni fondo. */
body:not(.home) .inside-article {
	background-color: transparent;
	padding: 0;
}

/* El aire lo aporta el contenedor de la página, no la tarjeta blanca.
   El relleno lateral es imprescindible: al quitar el de la tarjeta blanca, el
   contenido quedaba pegado a los bordes de la pantalla en cuanto la ventana
   bajaba del ancho del contenedor. Con clamp crece de 20px en un móvil a 40px
   en escritorio, sin escribir un corte por cada tamaño. */
body:not(.home) .site-content .content-area {
	/* El espacio superior se controla solo desde acá.
	   Empezó en 62px sumando dos fuentes distintas y quedaba demasiado alto:
	   se comía parte de la primera pantalla sin aportar nada. */
	padding-block: 24px 56px;
	padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

/* GeneratePress agrega un margen superior de 20px a .site-main que se sumaba
   al relleno de arriba sin que se viera de dónde salía. Se anula para que el
   espacio quede definido en un solo lugar y sea previsible. */
body:not(.home) .site-main {
	margin-top: 0;
}

@media (max-width: 600px) {
	body:not(.home) .site-content .content-area {
		padding-block: 18px 44px;
	}
}

/* ==========================================================================
   Botones
   ========================================================================== */

.gs-boton {
	display: inline-block;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: var(--gs-radio-chico);
	background-color: var(--gs-principal);
	color: #FFFFFF;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--gs-transicion), border-color var(--gs-transicion), color var(--gs-transicion), transform var(--gs-transicion);
}

.gs-boton:hover,
.gs-boton:focus {
	background-color: var(--gs-principal-oscuro);
	color: #FFFFFF;
	transform: translateY(-1px);
}

.gs-boton--secundario {
	background-color: transparent;
	border-color: currentColor;
	color: #FFFFFF;
}

.gs-boton--secundario:hover,
.gs-boton--secundario:focus {
	background-color: rgba(255, 255, 255, .14);
	color: #FFFFFF;
}

/* ==========================================================================
   PORTADA — Hero a pantalla completa
   ========================================================================== */

/* La página de Inicio usa "ancho completo" de GeneratePress, así que se
   anula el relleno del contenedor para que el hero llegue a los bordes. */
.home.full-width-content .site-content,
.home.full-width-content .content-area,
.home.full-width-content .site-main,
.home.full-width-content .entry-content {
	padding: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Portada: una sola imagen a pantalla completa.

   Se usa el bloque "Portada" nativo de WordPress y no un fondo por CSS, para
   que la imagen se pueda cambiar desde el editor sin tocar código y para que
   WordPress la sirva optimizada (WebP y tamaños según la pantalla).
   -------------------------------------------------------------------------- */

/* --- Cabecera transparente, por delante de la imagen -------------------- */

/* Solo en la portada: la cabecera se saca del flujo y flota sobre la imagen.
   Así la foto ocupa la pantalla completa de verdad, sin una banda blanca que
   le robe altura. En el resto del sitio la cabecera sigue siendo normal. */
.home .site-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: transparent;
	box-shadow: none;
	/* Se anula el borde inferior de la cabecera normal: sobre la imagen
	   quedaría como una raya suelta atravesando la foto. */
	border-bottom: 0;
	z-index: 20;
}

.home .main-navigation,
.home .main-navigation .inside-navigation,
.home .main-navigation ul ul {
	background-color: transparent;
}

/* El menú va en blanco para leerse sobre la imagen oscura.
   OJO CON LA ESPECIFICIDAD: GeneratePress colorea el menú con
   ".main-navigation .main-nav ul li a" (0,2,3) y el ítem activo con
   ".main-navigation .main-nav ul li[class*='current-menu-'] > a" (0,3,3).
   Hay que replicar esa estructura y sumarle ".home" para ganar; con un
   selector más corto, el ítem activo se quedaba con el azul del tema, que
   sobre el fondo azul oscuro es casi ilegible. */
.home .main-navigation .main-nav ul li a,
.home .main-navigation .menu-bar-items {
	color: #FFFFFF;
}

.home .main-navigation .main-nav ul li[class*="current-menu-"] > a,
.home .main-navigation .main-nav ul li a:hover,
.home .main-navigation .main-nav ul li a:focus {
	color: var(--gs-acento-claro);
}

/* Sombra suave detrás del texto del menú: garantiza legibilidad si la foto
   que se ponga tiene zonas claras justo debajo de la navegación. */
.home .main-navigation .main-nav ul li a,
.home .site-logo img {
	text-shadow: 0 1px 12px rgba(0, 21, 54, .55);
	filter: drop-shadow(0 1px 10px rgba(0, 21, 54, .45));
}

/* El botón del menú móvil también tiene que verse */
.home .menu-toggle,
.home .menu-toggle:hover,
.home .menu-toggle:focus {
	background-color: transparent;
	color: #FFFFFF;
}

.gs-portada {
	/* 100svh = "small viewport height": evita el salto que provocan las barras
	   del navegador móvil al aparecer y desaparecer al desplazarse.
	   Acá se usa la pantalla completa, sin descontar la cabecera, porque la
	   cabecera está superpuesta y no ocupa espacio propio. */
	min-height: 100svh !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
}

/* La imagen o el video cubren todo el espacio sin deformarse */
.gs-portada .wp-block-cover__image-background,
.gs-portada .wp-block-cover__video-background {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

/* --- Fondo en video ------------------------------------------------------
   Dos cuidados que un video de fondo necesita y que no son evidentes:

   1. Quien activó "reducir movimiento" en su sistema operativo no debería
      recibir un video en bucle. Suele ser una preferencia médica: hay
      personas a las que el movimiento repetitivo les provoca mareo o
      migraña. Para ellas se detiene el video y queda la imagen del póster.

   2. El póster es la primera cosa que se ve mientras el video carga. Sin él,
      la portada arranca en negro. Se define en el atributo poster del video
      y se repite como fondo del contenedor, para cubrir también el caso de
      un navegador que no reproduzca el archivo.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gs-portada .wp-block-cover__video-background {
		display: none;
	}
}

/* Respaldo detrás del video: el azul de la marca.
   Cubre tres casos sin depender de ninguna URL fija (que quedaría obsoleta al
   cambiar el video): mientras el archivo carga, si el navegador no lo
   reproduce, y cuando se oculta por "reducir movimiento". */
.gs-portada {
	background-color: var(--gs-principal);
}

/* Velo oscuro sobre la foto.
   No es decorativo: sin él, el botón puede caer sobre una zona clara de la
   imagen y volverse ilegible. Con el velo, el contraste está garantizado
   cualquiera sea la fotografía que se ponga después. */
.gs-portada .wp-block-cover__background {
	background-color: var(--gs-principal);
	opacity: .42;
}

/* ==========================================================================
   PORTADA CON IMAGEN CLARA
   ==========================================================================
   Todo lo de arriba está pensado para una imagen oscura: menú blanco, logo en
   su versión clara y velo azul encima. Con una imagen clara ese esquema se da
   vuelta por completo, porque el blanco sobre fondo claro no se lee.

   Se activa agregando la clase .gs-portada--clara al bloque de portada.
   -------------------------------------------------------------------------- */

/* Sin velo: la imagen ya es clara y trae su propia composición.
   Oscurecerla solo la ensuciaría. */
.gs-portada--clara .wp-block-cover__background {
	opacity: 0;
}

.gs-portada--clara {
	background-color: var(--gs-fondo);
	/* El contenido va arriba: la imagen deja libre justo esa franja, y los
	   productos ocupan los laterales y la base. */
	align-items: flex-start;
	padding-top: 15vh;
	padding-bottom: 4vh;
}

/* --------------------------------------------------------------------------
   Botón destacado dentro del menú.

   Se marca un ítem del menú con la clase 'gs-menu-cta' desde wp-admin
   (Apariencia → Menús → Opciones avanzadas → Clases CSS) y se convierte en
   una pastilla dorada. Así la acción principal viaja en la navegación y no
   ocupa espacio en la imagen.
   -------------------------------------------------------------------------- */

.main-navigation .main-nav ul li.gs-menu-cta > a {
	margin-left: .4rem;
	padding: .7rem 1.15rem;
	border-radius: 999px;
	background-color: var(--gs-acento);
	color: #FFFFFF;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(201, 137, 55, .3);
	text-shadow: none;
	transition: background-color 160ms ease, transform 160ms ease;
}

.main-navigation .main-nav ul li.gs-menu-cta > a:hover,
.main-navigation .main-nav ul li.gs-menu-cta > a:focus {
	background-color: var(--gs-acento-oscuro);
	color: #FFFFFF;
	transform: translateY(-1px);
}

/* En la portada clara el botón mantiene el dorado: sobre el fondo crema
   funciona, y es el único elemento que debe llamar la atención. */
.home:has(.gs-portada--clara) .main-navigation .main-nav ul li.gs-menu-cta > a {
	color: #FFFFFF;
}

@media (max-width: 768px) {
	.main-navigation .main-nav ul li.gs-menu-cta > a {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.main-navigation .main-nav ul li.gs-menu-cta > a:hover {
		transform: none;
	}
}

/* Menú y logo vuelven a sus colores oscuros sobre la imagen clara */
.home:has(.gs-portada--clara) .main-navigation .main-nav ul li a,
.home:has(.gs-portada--clara) .main-navigation .menu-bar-items {
	color: var(--gs-principal);
}

.home:has(.gs-portada--clara) .main-navigation .main-nav ul li[class*="current-menu-"] > a,
.home:has(.gs-portada--clara) .main-navigation .main-nav ul li a:hover,
.home:has(.gs-portada--clara) .main-navigation .main-nav ul li a:focus {
	color: var(--gs-acento-oscuro);
}

/* Se quitan las sombras pensadas para fondo oscuro: sobre claro se ven como
   una mancha sucia detrás del texto. */
.home:has(.gs-portada--clara) .main-navigation .main-nav ul li a,
.home:has(.gs-portada--clara) .site-logo img {
	text-shadow: none;
	filter: none;
}

.home:has(.gs-portada--clara) .menu-toggle,
.home:has(.gs-portada--clara) .menu-toggle:hover,
.home:has(.gs-portada--clara) .menu-toggle:focus {
	color: var(--gs-principal);
}

/* --------------------------------------------------------------------------
   Mensaje de la portada, en HTML sobre la imagen.

   Va en texto real y no dentro de la imagen por tres motivos concretos:
   se reacomoda solo en cualquier pantalla (con el texto incrustado, en móvil
   se perdía el 75% del ancho y "MAYORISTAS" quedaba sin la S), Google puede
   leerlo, y se edita desde wp-admin sin regenerar ninguna imagen.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Bloque de texto de la portada.

   Reproduce la jerarquía de la maqueta que armó Moshé:

     Importadores          ← espaciado amplio entre letras, mayúsculas
     MAYORISTAS            ← peso 800, muy junto, protagonista
     de juguetes, peluches y artículos
     para el hogar y la oficina   ← manuscrita en dorado
     ─────────────
     A LOS MEJORES PRECIOS

   El texto va arriba porque es donde la imagen deja el espacio libre.
   -------------------------------------------------------------------------- */

.gs-portada__texto {
	width: min(38rem, 92%);
	margin-inline: auto;
	text-align: center;
	color: var(--gs-principal);
	font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

/* "Importadores" */
.gs-portada__antetitulo {
	margin: 0;
	font-size: clamp(1.05rem, 1.85vw, 1.95rem);
	line-height: 1;
	font-weight: 500;
	letter-spacing: .285em;
	text-transform: uppercase;
	/* Compensa el espaciado de la última letra, que descentra el bloque */
	transform: translateX(.14em);
}

/* "MAYORISTAS" */
.gs-portada__titulo {
	margin: .5rem 0 0;
	font-size: clamp(2.9rem, 5.05vw, 5.25rem);
	line-height: .9;
	font-weight: 800;
	letter-spacing: -.045em;
	text-transform: uppercase;
	color: var(--gs-principal);
}

.gs-portada__bajada {
	margin: .85rem 0 0;
	font-size: clamp(1.05rem, 1.55vw, 1.6rem);
	line-height: 1.05;
	font-weight: 400;
	color: var(--gs-principal);
}

/* "para el hogar y la oficina", manuscrita en dorado */
.gs-portada__manuscrita {
	margin: 0;
	font-family: 'Allura', 'Segoe Script', cursive;
	font-size: clamp(2rem, 3.25vw, 3.4rem);
	line-height: .98;
	font-weight: 400;
	color: var(--gs-acento);
}

/* Línea divisoria que se desvanece en los extremos */
.gs-portada__linea {
	width: 63%;
	height: 1px;
	margin: .9rem auto 1rem;
	border: 0;
	background-image: linear-gradient(90deg, transparent, #DEC7AA 12%, #DEC7AA 88%, transparent);
}

.gs-portada__apoyo {
	margin: 0;
	font-size: clamp(.8rem, 1.32vw, 1.35rem);
	line-height: 1;
	font-weight: 600;
	letter-spacing: .285em;
	text-transform: uppercase;
	color: var(--gs-principal);
	transform: translateX(.14em);
}

/* --------------------------------------------------------------------------
   Tira de categorías con iconos.

   En la imagen original eran decoración. Acá cada una es un enlace al
   catálogo ya filtrado: el mismo espacio visual pasa de adorno a navegación.
   -------------------------------------------------------------------------- */

/* Los iconos van juntos y el bloque centrado.

   Se usan columnas del ancho de su contenido (max-content) en lugar de seis
   columnas iguales: con columnas iguales, un nombre largo estira su columna y
   desbalancea toda la tira, que es lo que pasaba con "PORTARRETRATOS".
   Con max-content cada categoría ocupa lo que necesita y el conjunto queda
   realmente centrado.

   width:fit-content + margin-inline:auto es lo que garantiza el centrado:
   la caja mide lo que miden los iconos, no el ancho disponible. */
.gs-cats {
	width: fit-content;
	max-width: 100%;
	margin: 1.75rem auto 0;
	display: grid;
	grid-template-columns: repeat(6, max-content);
	column-gap: 1.5rem;
	align-items: start;
	justify-items: center;
}

.gs-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .45rem;
	min-width: 0;
	text-decoration: none;
	color: var(--gs-principal);
	transition: transform 160ms ease;
}

.gs-cat__icono {
	width: 2.6rem;
	height: 2.6rem;
	stroke: var(--gs-acento);
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 160ms ease;
}

.gs-cat__nombre {
	font-size: .69rem;
	line-height: 1;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.gs-cat:hover,
.gs-cat:focus {
	transform: translateY(-3px);
	color: var(--gs-acento-oscuro);
}

.gs-cat:hover .gs-cat__icono,
.gs-cat:focus .gs-cat__icono {
	stroke: var(--gs-principal);
}

/* --- Pantallas medianas y chicas --- */

@media (max-width: 1000px) {
	.gs-portada__texto {
		width: min(34rem, 94%);
	}
}

@media (max-width: 768px) {
	/* Seis columnas en 390px darían iconos diminutos con el nombre cortado.
	   En dos filas de tres, cada categoría conserva su tamaño y se lee. */
	.gs-cats {
		grid-template-columns: repeat(3, max-content);
		column-gap: 1.1rem;
		row-gap: 1.1rem;
		margin-top: 1.4rem;
	}

	.gs-cat__icono {
		width: 2.1rem;
		height: 2.1rem;
	}

	.gs-cat__nombre {
		font-size: .58rem;
	}

	.gs-portada__linea {
		width: 68%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-cat:hover,
	.gs-cat:focus {
		transform: none;
	}
}

/* El botón pasa a azul marino: el dorado sobre un fondo crema claro pierde
   contraste, y este botón es la única acción de la pantalla. */
.gs-portada--clara .wp-block-button.gs-boton-portada a.wp-block-button__link {
	background-color: var(--gs-principal);
	border-color: var(--gs-principal);
	color: #FFFFFF;
	box-shadow: 0 6px 24px rgba(0, 21, 54, .22);
}

.gs-portada--clara .wp-block-button.gs-boton-portada a.wp-block-button__link:hover,
.gs-portada--clara .wp-block-button.gs-boton-portada a.wp-block-button__link:focus {
	background-color: var(--gs-principal-oscuro);
	border-color: var(--gs-principal-oscuro);
	color: #FFFFFF;
}

.gs-portada__acciones {
	justify-content: center;
}

/* El botón de la portada es más grande que el resto: es la única acción de
   la primera pantalla, así que tiene que verse desde lejos. */
.wp-block-button.gs-boton-portada a.wp-block-button__link {
	padding: 19px 58px;
	font-size: 1.1rem;
	letter-spacing: .03em;
	box-shadow: 0 6px 24px rgba(0, 21, 54, .28);
}

@media (max-width: 768px) {
	.wp-block-button.gs-boton-portada a.wp-block-button__link {
		padding: 17px 44px;
		font-size: 1.05rem;
	}
}

/* --------------------------------------------------------------------------
   Botones del hero.

   OJO CON LA ESPECIFICIDAD: GeneratePress define el color de los botones con
       a.wp-block-button__link:not(.has-background) { background-color:#55555e }
   que suma (0,2,1) — dos clases más un elemento. Un selector como
   ".gs-boton-hero .wp-block-button__link" solo llega a (0,2,0) y PIERDE por
   un elemento de diferencia, dejando los botones grises.
   Por eso acá se usa ".wp-block-button.gs-boton-hero a.wp-block-button__link",
   que suma (0,3,1) y gana sin necesidad de !important.
   -------------------------------------------------------------------------- */

/* Botón principal: dorado de la marca sobre el azul.
   El texto va en azul marino y no en blanco por una razón medible: blanco
   sobre este dorado da un contraste de ~3:1, por debajo del 4,5:1 que exigen
   las pautas de accesibilidad. Con el azul marino sube a ~5:1. */
.wp-block-button.gs-boton-hero a.wp-block-button__link {
	background-color: var(--gs-acento);
	background-image: none;
	color: var(--gs-principal);
	border: 2px solid var(--gs-acento);
	border-radius: var(--gs-radio-chico);
	padding: 15px 34px;
	font-size: 1rem;
	font-weight: 600;
	transition: background-color var(--gs-transicion), color var(--gs-transicion), transform var(--gs-transicion);
}

.wp-block-button.gs-boton-hero a.wp-block-button__link:hover,
.wp-block-button.gs-boton-hero a.wp-block-button__link:focus {
	background-color: var(--gs-acento-claro);
	color: var(--gs-principal);
	border-color: var(--gs-acento-claro);
	transform: translateY(-2px);
}

/* Botón secundario: contorno sobre el degradado */
.wp-block-button.gs-boton-hero-alt a.wp-block-button__link {
	background-color: transparent;
	background-image: none;
	color: #FFFFFF;
	border: 2px solid rgba(255, 255, 255, .75);
	border-radius: var(--gs-radio-chico);
	padding: 15px 34px;
	font-size: 1rem;
	font-weight: 600;
	transition: background-color var(--gs-transicion), border-color var(--gs-transicion), transform var(--gs-transicion);
}

.wp-block-button.gs-boton-hero-alt a.wp-block-button__link:hover,
.wp-block-button.gs-boton-hero-alt a.wp-block-button__link:focus {
	background-color: rgba(255, 255, 255, .16);
	border-color: #FFFFFF;
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* ==========================================================================
   PORTADA — Secciones de contenido
   ========================================================================== */

.gs-seccion {
	padding: 76px 24px;
}

/* Cuando dos secciones van seguidas, la de abajo recorta su espacio superior:
   sumar los dos rellenos deja un hueco enorme entre bloques de contenido. */
.gs-seccion + .gs-seccion {
	padding-top: 8px;
}

.gs-seccion--destacados {
	padding-bottom: 84px;
}

.gs-seccion__titulo {
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	margin: 0 0 52px;
	color: var(--gs-texto);
	text-wrap: balance;
}

.gs-pilares {
	gap: 28px;
}

.gs-pilar {
	padding: 32px 26px;
	background-color: var(--gs-fondo-elevado);
	border: 1px solid rgba(0, 31, 78, .06);
	border-radius: var(--gs-radio);
	transition: box-shadow var(--gs-transicion), transform var(--gs-transicion);
}

.gs-pilar:hover {
	box-shadow: var(--gs-sombra);
	transform: translateY(-3px);
}

.gs-pilar__titulo {
	font-size: 1.2rem;
	margin: 0 0 12px;
	color: var(--gs-principal);
}

.gs-pilar p {
	margin: 0;
	color: var(--gs-texto-suave);
	line-height: 1.65;
}

/* Franja de llamada a la acción */
.gs-cta {
	padding: 76px 24px;
	background-color: var(--gs-principal-claro);
	text-align: center;
}

.gs-cta__titulo {
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	margin: 0 0 12px;
	color: var(--gs-principal-oscuro);
}

.gs-cta p {
	color: var(--gs-texto);
	margin: 0 0 30px;
}

/* Mismo criterio de especificidad que los botones del hero: hace falta
   (0,3,1) para superar la regla de GeneratePress. */
.wp-block-button.gs-boton-cta a.wp-block-button__link {
	background-color: var(--gs-principal);
	background-image: none;
	color: #FFFFFF;
	border: 2px solid var(--gs-principal);
	border-radius: var(--gs-radio-chico);
	padding: 15px 34px;
	font-size: 1rem;
	font-weight: 600;
	transition: background-color var(--gs-transicion), border-color var(--gs-transicion), transform var(--gs-transicion);
}

.wp-block-button.gs-boton-cta a.wp-block-button__link:hover,
.wp-block-button.gs-boton-cta a.wp-block-button__link:focus {
	background-color: var(--gs-principal-oscuro);
	border-color: var(--gs-principal-oscuro);
	color: #FFFFFF;
	transform: translateY(-2px);
}

/* En pantallas chicas las columnas de GeneratePress ya se apilan;
   solo se ajusta el aire vertical. */
@media (max-width: 768px) {
	.gs-seccion,
	.gs-cta {
		padding: 56px 20px;
	}
}

/* ==========================================================================
   ANCHO DE LECTURA
   ========================================================================== */

/* El contenedor del sitio es de 1500px para que las cuadrículas de productos
   aprovechen las pantallas grandes (5 columnas en vez de 4). Pero un párrafo
   de 1400px de ancho es incómodo de leer: el ojo pierde el renglón al volver.
   Por eso el texto corrido se limita a unos 80 caracteres, que es el ancho de
   lectura cómodo, mientras las cuadrículas siguen usando todo el espacio. */
body:not(.home) .entry-content > p,
body:not(.home) .entry-content > ul,
body:not(.home) .entry-content > ol {
	max-width: 80ch;
}

/* La ficha de producto: misma lógica para su descripción larga. */
.gs-ficha__descripcion > p,
.gs-ficha__descripcion > ul,
.gs-ficha__descripcion > ol {
	max-width: 80ch;
}

/* ==========================================================================
   PÁGINA DE CONTACTO
   ========================================================================== */

.gs-contacto-cols {
	gap: 48px;
	margin-top: 34px;
}

.gs-datos-contacto {
	padding: 30px 28px;
	background-color: var(--gs-fondo-elevado);
	border: 1px solid rgba(0, 31, 78, .06);
	border-radius: var(--gs-radio);
	align-self: flex-start;
}

.gs-datos-contacto h3 {
	margin: 0 0 20px;
	font-size: 1.2rem;
	color: var(--gs-principal);
}

.gs-datos-contacto p {
	margin: 0 0 18px;
	line-height: 1.6;
	color: var(--gs-texto-suave);
}

.gs-datos-contacto strong {
	color: var(--gs-texto);
}

/* Aviso de contenido provisional: se ve distinto a propósito, para que
   nadie lo confunda con información real ni se olvide de reemplazarlo. */
.gs-aviso-placeholder {
	margin: 24px 0 0 !important;
	padding: 11px 14px;
	background-color: #FFFBEB;
	border: 1px dashed #D6A419;
	border-radius: var(--gs-radio-chico);
	font-size: .82rem;
	line-height: 1.5;
	color: #92400E !important;
}

@media (max-width: 768px) {
	.gs-contacto-cols {
		gap: 32px;
	}
}

/* Respeta a quien pidió menos movimiento en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.gs-boton:hover {
		transform: none;
	}
}