/*
Theme Name:  Astra Child – Lumina
Description: Child theme de Astra para Lumina. Estilos de la home y variables de marca.
Template:    astra
Version:     0.1.12
Text Domain: astra-child
*/

/* =========================================================
   Variables de marca
   Paleta provisoria "luminosa/cálida": cambiar acá y listo,
   todo lo demás las referencia.
   ========================================================= */
:root {
	--lumina-primary: #d4a373;   /* dorado cálido: botones y acentos */
	--lumina-primary-hover: #b8875a;
	--lumina-dark: #3f3a36;      /* marrón oscuro casi neutro: textos y fondos oscuros */
	--lumina-light: #fefae0;     /* crema muy claro: fondos de sección */
	--lumina-white: #ffffff;
	--lumina-muted: #7d7468;     /* texto secundario */
	--lumina-font-body: 'Lato', sans-serif;
	--lumina-font-display: 'Cormorant Garamond', serif;
}

/* =========================================================
   Base tipográfica
   Astra trae la fuente del sistema y un gris azulado (#334155)
   como texto base: acá se aplican la Lato que ya se encola y el
   color de la paleta. Los títulos de las secciones de la home
   van en Cormorant por sus propias clases.
   ========================================================= */
body,
button,
input,
select,
textarea {
	font-family: var(--lumina-font-body);
}

body {
	color: var(--lumina-dark);
}

/* =========================================================
   Base de marca global (todo el sitio, no solo la home)
   Astra pinta links, botones y focus con su azul default
   (#046bd2, Customizer sin configurar): acá pasa a la paleta.
   ========================================================= */

/* Títulos principales en Cormorant (h3 en adelante quedan en Lato):
   cubre títulos de página, de archivo de tienda y de producto. */
h1,
h2 {
	font-family: var(--lumina-font-display);
	color: var(--lumina-dark);
}

/* Links del contenido: tostado de marca con hover oscuro. Se excluyen
   los botones (son <a> y el color de texto les ganaría por especificidad);
   menús, footer y cards ya tienen color propio. */
.site-content a:not(.lumina-boton):not(.button):not(.wp-block-button__link) {
	color: var(--lumina-primary-hover);
}

.site-content a:not(.lumina-boton):not(.button):not(.wp-block-button__link):hover,
.site-content a:not(.lumina-boton):not(.button):not(.wp-block-button__link):focus {
	color: var(--lumina-dark);
}

/* Botones de submit genéricos (search, comentarios, forms varios):
   mismo look que .lumina-boton. Los de Woo van en assets/css/woo.css. */
input[type="submit"],
button[type="submit"],
.ast-button {
	background: var(--lumina-primary);
	color: var(--lumina-white);
	border: 0;
	border-radius: 4px;
	padding: 12px 28px;
	font-weight: 700;
	transition: background 0.2s ease;
}

input[type="submit"]:hover,
input[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
.ast-button:hover,
.ast-button:focus {
	background: var(--lumina-primary-hover);
	color: var(--lumina-white);
}

/* Focus de campos: dorado en vez del azul de Astra. */
input:focus,
textarea:focus,
select:focus {
	border-color: var(--lumina-primary);
	outline-color: var(--lumina-primary);
}

/* Fondo del sitio: Astra trae un celeste grisáceo default que se ve
   en la 404 y en cualquier página sin contenedor propio; blanco de marca. */
body {
	background-color: var(--lumina-white);
}

/* =========================================================
   Base de las secciones de la home (mobile-first)
   ========================================================= */
.lumina-seccion {
	padding: 56px 20px;
}

.lumina-contenedor {
	max-width: 1160px;
	margin: 0 auto;
}

.lumina-titulo-seccion {
	font-family: var(--lumina-font-display);
	font-size: 2rem;
	color: var(--lumina-dark);
	text-align: center;
	margin: 0 0 32px;
}

/* Botón genérico de marca */
.lumina-boton {
	display: inline-block;
	background: var(--lumina-primary);
	color: var(--lumina-white);
	padding: 12px 28px;
	border-radius: 4px;
	font-family: var(--lumina-font-body);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease;
}

.lumina-boton:hover,
.lumina-boton:focus {
	background: var(--lumina-primary-hover);
	color: var(--lumina-white);
}

/* =========================================================
   Navbar tipo Catarain
   Menú uppercase con tracking en todo el sitio; en la home el
   header va transparente total sobre el hero (Astra transparent
   header, forzado por filtro en functions.php) y al scrollear
   queda fijo con fondo sólido (clase que pone home.js, como el
   .stuck de Flatsome en Catarain).
   ========================================================= */
.main-header-menu .menu-link {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 600;
}

/* Color del menú en TODO el sitio (no solo la home): Astra pinta la
   base con su gris azulado y el item activo/hover con su azul default
   vía dynamic CSS sobre .ast-builder-menu-1; mismos selectores acá,
   el child carga después y gana. En la home los estados del header
   transparente/fijo tienen reglas más específicas y no se ven afectados. */
.ast-builder-menu-1 .menu-item > .menu-link {
	color: var(--lumina-dark);
}

.ast-builder-menu-1 .menu-item:hover > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link {
	color: var(--lumina-primary);
}

/* Solo logo en el navbar: el título se apaga por filtro en functions.php;
   esto es respaldo por si algún estado lo imprime igual. */
.site-header .site-title {
	display: none;
}

/* El logo se sube a resolución completa: acá se limita el tamaño de
   render para no depender del ancho del Customizer de cada entorno
   (en producción salía a tamaño natural y empujaba el menú a dos
   líneas). 180px en mobile; en desktop sube a 220px (media query). */
.site-header .custom-logo-link img,
.site-header img.custom-logo {
	/* width auto pisa el "width: 240px" fijo que imprime Astra: ese
	   valor inflaba la columna del logo en la grilla del header mobile
	   y empujaba el carrito y la hamburguesa fuera de pantalla. */
	width: auto;
	height: auto;
	max-width: 180px;
	height: auto;
}

/* Respaldo por si el transparent header de Astra no cargara. */
.page-template-template-home .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Arriba de todo: transparente total. Las imágenes de los slides son
   claras (como en Catarain), así que los links van en oscuro. */
.page-template-template-home:not(.lumina-header-fija) .site-header .main-header-bar,
.page-template-template-home:not(.lumina-header-fija) .site-header .ast-above-header-bar,
.page-template-template-home:not(.lumina-header-fija) .site-header .ast-below-header-bar {
	background: transparent;
}

.page-template-template-home:not(.lumina-header-fija) .site-header a,
.page-template-template-home:not(.lumina-header-fija) .site-header .site-title a,
.page-template-template-home:not(.lumina-header-fija) .site-header .main-header-menu .menu-item > .menu-link {
	color: var(--lumina-dark);
}

.lumina-header-fija .site-header .main-header-menu .menu-item > .menu-link {
	color: var(--lumina-dark);
}

/* Al scrollear: header fijo con fondo sólido y texto oscuro.
   Ojo especificidad: el transparent header de Astra posiciona con
   '.ast-theme-transparent-header #masthead' (lleva ID), así que
   estas reglas también usan #masthead para poder ganarle. */
.page-template-template-home.lumina-header-fija #masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: var(--lumina-white);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	animation: lumina-header-entrada 0.25s ease;
}

/* Entra deslizándose desde arriba, como el sticky de Catarain. */
@keyframes lumina-header-entrada {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

.lumina-header-fija #masthead .main-header-bar,
.lumina-header-fija #masthead .ast-above-header-bar,
.lumina-header-fija #masthead .ast-below-header-bar {
	background: var(--lumina-white);
}

/* Con la barra de admin logueado, el header fijo arranca debajo. */
.admin-bar.page-template-template-home.lumina-header-fija #masthead {
	top: 32px;
}

/* Hamburguesa y menú mobile: Astra pinta el trigger, los links y los
   toggles de submenú con su acento azul default (#046bd2, option
   theme-color) vía dynamic CSS, y el Customizer nunca se configuró;
   el child define la marca por código. Se usan los mismos selectores
   que la dynamic CSS de Astra (incluida la variante del transparent
   header, que suma especificidad) para ganarle por orden de carga. */
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg,
.ast-theme-transparent-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
	fill: var(--lumina-dark);
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,
.ast-theme-transparent-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal {
	color: var(--lumina-dark);
	background: transparent;
}

/* Estado activo (menú abierto) y hover del trigger: el CSS global de
   botones de Astra le mete el fondo azul al .menu-toggle en hover. */
[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:hover,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle:focus,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .menu-toggle.toggled {
	background: transparent;
	color: var(--lumina-dark);
}

/* Links y toggles de submenú del menú mobile desplegado: oscuro de
   marca, con hover/activo en dorado (Astra los deja en su azul). */
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .ast-menu-toggle {
	color: var(--lumina-dark);
}

.ast-builder-menu-mobile .main-navigation .menu-link:hover,
.ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item:hover > .menu-link,
.ast-builder-menu-mobile .main-navigation .ast-menu-toggle:hover,
.ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item:hover > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-ancestor > .ast-menu-toggle {
	color: var(--lumina-primary);
	background: transparent;
}

/* Botón de cerrar (X) del panel off-canvas mobile. */
.ast-mobile-popup-drawer.active .menu-toggle-close {
	color: var(--lumina-dark);
}

/* Carrito del navbar (elemento woo-cart, se suma por filtro en
   functions.php): ícono marrón con hover dorado y globito contador
   dorado; Astra los pinta con su azul default vía dynamic CSS
   (mismos selectores, el child gana por orden de carga). */
.ast-site-header-cart a,
.ast-site-header-cart i.astra-icon {
	color: var(--lumina-dark);
}

.ast-site-header-cart a:focus,
.ast-site-header-cart a:hover,
.ast-site-header-cart .current-menu-item a {
	color: var(--lumina-primary);
}

/* Sin el recuadro del estilo "outline" de Astra (borde azul): queda
   la bolsita sola, minimal como la referencia. El padding extra del
   recuadro era además lo que desbordaba la fila del header en mobile
   y empujaba la hamburguesa fuera de pantalla. */
.ast-site-header-cart.ast-menu-cart-outline .ast-addon-cart-wrap,
.ast-site-header-cart.ast-menu-cart-fill .ast-addon-cart-wrap {
	border: 0;
	background: transparent;
	padding: 0 4px;
	color: var(--lumina-dark);
}

/* Globito contador del ícono. Astra lo pinta con selectores de 3 y
   4 clases (la variante del transparent header de la home incluida):
   calcamos los suyos para ganarle en todos los contextos. */
.ast-site-header-cart i.astra-icon:after,
.ast-site-header-cart .ast-addon-cart-wrap i.astra-icon:after,
body.ast-theme-transparent-header .ast-site-header-cart .ast-addon-cart-wrap i.astra-icon:after {
	background: var(--lumina-primary);
	color: var(--lumina-white);
	border: 0;
}

/* Flyout del mini-carrito (hover del ícono): total y botones de marca. */
.ast-site-header-cart .widget_shopping_cart .total .woocommerce-Price-amount {
	color: var(--lumina-dark);
}

.ast-site-header-cart .widget_shopping_cart .buttons .button,
.ast-site-header-cart .widget_shopping_cart .buttons .button.checkout {
	background: var(--lumina-primary);
	color: var(--lumina-white);
}

.ast-site-header-cart .widget_shopping_cart .buttons .button:hover,
.ast-site-header-cart .widget_shopping_cart .buttons .button.checkout:hover {
	background: var(--lumina-primary-hover);
	color: var(--lumina-white);
}

/* Focus rings: la accesibilidad de Astra resalta con su azul; se
   unifican en el dorado de marca. */
.menu-toggle:focus-visible,
.ast-menu-toggle:focus-visible,
.ast-mobile-popup-drawer.active .menu-toggle-close:focus-visible,
#ast-scroll-top:focus-visible {
	outline-color: var(--lumina-primary);
}

/* =========================================================
   Footer tipo Catarain: barra oscura, links uppercase, centrado
   (la estructura la arma el child por filtros del builder de
   Astra en functions.php; acá va el look & feel)
   ========================================================= */
.site-footer,
.site-footer .ast-builder-grid-row-container {
	background: var(--lumina-dark);
	color: var(--lumina-light);
}

.site-footer a {
	color: var(--lumina-white);
}

.site-footer a:hover {
	color: var(--lumina-primary);
}

.site-footer .menu-link {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
}

.site-footer .ast-footer-copyright {
	font-size: 13px;
	color: var(--lumina-light);
	text-align: center;
	opacity: 0.75;
}

/* El render del builder mete el texto en un <p> (wpautop). */
.site-footer .ast-footer-copyright p {
	margin: 0;
}

/* =========================================================
   Botón "volver arriba" (módulo scroll-to-top de Astra)
   Astra le pone de fondo su link-color azul default vía dynamic
   CSS sobre #ast-scroll-top (el Customizer nunca se configuró);
   mismo ID acá, el child carga después y gana por orden.
   El ícono es svg con currentColor: hereda el blanco de color.
   ========================================================= */
#ast-scroll-top {
	background-color: var(--lumina-primary);
	color: var(--lumina-white);
}

#ast-scroll-top:hover,
#ast-scroll-top:focus {
	background-color: var(--lumina-primary-hover);
	color: var(--lumina-white);
}

/* Aire de las filas: la principal con padding generoso y la del
   copyright angosta, separadas por un filete sutil. */
.site-footer .site-primary-footer-wrap {
	padding: 48px 24px 40px;
}

.site-footer .site-below-footer-wrap {
	padding: 18px 24px;
	border-top: 1px solid rgba(254, 250, 224, 0.12);
}

/* Fila principal del builder: 1 columna en mobile, 3 en desktop
   (media query de abajo). OJO: las columnas viven en el
   .ast-builder-grid-row INTERNO; el wrapper -3-equal de afuera tiene
   un solo hijo (ponerle la grilla ahí aplasta todo el footer en 1/3
   del ancho). Tres clases de especificidad para ganarle también a la
   dynamic CSS tablet de Astra, que apila con .ast-builder-grid-row-
   container.ast-builder-grid-row-tablet-*. */
.site-footer .site-primary-footer-wrap .ast-builder-grid-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

/* Fila del copyright siempre a 1 columna centrada. */
.site-footer .site-below-footer-wrap .ast-builder-grid-row {
	display: grid;
	grid-template-columns: 1fr;
}

/* Cada columna apila su contenido centrado ("Seguinos" arriba
   de los íconos, logo y menú centrados). Tres clases para ganarle
   al display:block de la dynamic CSS tablet de Astra (que usa
   .site-primary-footer-wrap.ast-footer-row-tablet-stack …). */
.site-footer .ast-builder-grid-row .site-footer-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 0;
	text-align: center;
}

/* Logo del footer acotado (mismo criterio que el cap del header).
   .lumina-footer-logo es el alternativo claro de Lumina → Ajustes. */
.site-footer .custom-logo-link img,
.site-footer .lumina-footer-logo {
	max-width: 160px;
	height: auto;
}

/* Menú de footer en columna, tipo Catarain (Astra lo trae inline). */
.site-footer #astra-footer-menu {
	flex-direction: column;
	gap: 6px;
}

.site-footer #astra-footer-menu .menu-link {
	padding: 0;
}

/* Marca de respaldo cuando no hay logo cargado. */
.lumina-footer-marca {
	font-family: var(--lumina-font-display);
	font-size: 1.6rem;
	color: var(--lumina-light);
}

/* Título "Seguinos" de la columna de redes. */
.lumina-footer-titulo {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	font-weight: 700;
	color: var(--lumina-light);
}

/* Íconos de redes: blancos, dorado de marca al hover. */
.site-footer .ast-footer-social-wrap svg {
	width: 22px;
	height: 22px;
	fill: var(--lumina-light);
	transition: fill 0.2s ease;
}

.site-footer .ast-footer-social-wrap a:hover svg,
.site-footer .ast-footer-social-wrap a:focus svg {
	fill: var(--lumina-primary);
}

/* La .site-content de Astra es flex y nuestro <main> (sin la clase
   site-main de Astra, que trae su width) se encogía dejando un borde
   blanco alrededor: le damos el ancho completo. */
.page-template-template-home main.lumina-home {
	width: 100%;
}

/* =========================================================
   Hero slider (full-viewport, imagen detrás del header)
   ========================================================= */
.lumina-hero {
	width: 100%;
	padding: 0;
}

.lumina-hero .splide__slide {
	position: relative;
	/* Alto completo del viewport; svh evita el salto de la barra en mobile */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-size: cover;
	background-position: center;
	background-color: var(--lumina-light); /* fallback si la slide no tiene imagen */
}

/* Las imágenes de los slides son claras y el texto va oscuro (como
   Catarain): apenas un velo blanco sutil para emparejar la foto. */
.lumina-hero .splide__slide::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.2);
}

.lumina-hero__contenido {
	position: relative; /* por encima del velo */
	text-align: left;
	color: var(--lumina-dark);
	padding: 0 24px;
	max-width: 640px;
}

.lumina-hero__titulo {
	font-family: var(--lumina-font-display);
	font-size: 2.2rem;
	line-height: 1.2;
	margin: 0 0 12px;
	color: var(--lumina-dark);
}

.lumina-hero__bajada {
	font-size: 1.1rem;
	margin: 0 0 24px;
}

/* Flechas y dots de Splide en tono de marca */
.lumina-hero .splide__arrow {
	background: var(--lumina-primary);
	opacity: 0.9;
}

.lumina-hero .splide__arrow svg {
	fill: var(--lumina-white);
}

/* Dots abajo al centro, visibles sobre fondo claro */
.lumina-hero .splide__pagination {
	bottom: 28px;
}

.lumina-hero .splide__pagination__page {
	/* Más grandes y en el marrón de la paleta: el gris que había
	   desaparecía sobre el fondo crema y las fotos claras. */
	width: 10px;
	height: 10px;
	background: rgba(63, 58, 54, 0.35);
	opacity: 1;
}

.lumina-hero .splide__pagination__page.is-active {
	background: var(--lumina-primary);
}

/* =========================================================
   Manifiesto (texto oscuro alineado a la izquierda en ambas
   variantes: fondo plano o imagen aclarada con velo blanco)
   ========================================================= */
.lumina-manifiesto {
	background: var(--lumina-light);
	text-align: left;
}

.lumina-manifiesto .lumina-titulo-seccion {
	text-align: left;
}

/* Con imagen de fondo: velo blanco tenue que deja ver la foto y
   mantiene el texto oscuro legible. Sin parallax, la imagen scrollea.
   En desktop el contenido va a 2 columnas: texto en la primera,
   la segunda vacía para que la foto respire (media query). */
.lumina-manifiesto--con-imagen {
	position: relative;
	min-height: 500px;
	display: flex;
	align-items: center; /* centrado vertical del bloque */
	justify-content: center;
	background-size: cover;
	background-position: center;
}

.lumina-manifiesto--con-imagen::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.35);
}

.lumina-manifiesto--con-imagen .lumina-contenedor {
	position: relative; /* por encima del velo */
}

.lumina-manifiesto__texto {
	max-width: 720px;
	margin: 0; /* bloque a la izquierda dentro del contenedor */
	color: var(--lumina-dark);
	font-size: 1.05rem;
	line-height: 1.8;
}

.lumina-manifiesto__texto p {
	margin: 0 0 20px;
}

.lumina-manifiesto__destacado {
	font-family: var(--lumina-font-display);
	font-size: 1.4rem;
	font-style: italic;
}

/* =========================================================
   Beneficios (4 columnas, apilan en mobile)
   ========================================================= */
.lumina-beneficios__grilla {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	text-align: center;
}

.lumina-beneficio__icono {
	color: var(--lumina-primary);
	margin-bottom: 12px;
}

.lumina-beneficio__icono svg {
	width: 44px;
	height: 44px;
	stroke: currentColor;
}

.lumina-beneficio__titulo {
	font-family: var(--lumina-font-body);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--lumina-dark);
	margin: 0 0 8px;
}

.lumina-beneficio__texto {
	color: var(--lumina-muted);
	font-size: 0.95rem;
	margin: 0;
}

/* =========================================================
   CTA mayoristas
   ========================================================= */
.lumina-cta-mayoristas {
	background: var(--lumina-dark);
	text-align: center;
}

.lumina-cta-mayoristas__titulo {
	font-family: var(--lumina-font-display);
	font-size: 1.9rem;
	color: var(--lumina-white);
	margin: 0 0 12px;
}

.lumina-cta-mayoristas__texto {
	color: var(--lumina-light);
	max-width: 640px;
	margin: 0 auto 24px;
}

/* =========================================================
   Destacados
   La grilla la define el child y no depende del CSS de Woo/Astra:
   en producción ese CSS no se encolaba en la plantilla y los
   productos salían apilados con la imagen a ancho completo.
   ========================================================= */
.lumina-destacados ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lumina-destacados ul.products li.product {
	width: 100%;
	margin: 0;
	text-align: center;
}

.lumina-destacados ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 14px;
}

/* El look de las cards (precio, botón, sin label de categoría) vive
   en assets/css/woo.css, compartido con la tienda: acá queda solo el
   layout de la grilla propio de la home. */

.lumina-destacados__pie {
	text-align: center;
	margin-top: 24px;
}

/* =========================================================
   Contacto WhatsApp
   El botón de la sección va en el dorado de marca (.lumina-boton
   a secas); el verde de WhatsApp es solo del botón flotante.
   ========================================================= */
.lumina-contacto {
	background: var(--lumina-light);
	text-align: center;
}

.lumina-contacto__texto {
	max-width: 640px;
	margin: 0 auto 24px;
	color: var(--lumina-muted);
}

/* Con imagen de fondo (estilo Catarain): foto oscurecida con velo
   y textos claros encima. */
.lumina-contacto--con-imagen {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
}

.lumina-contacto--con-imagen::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(30, 27, 24, 0.55);
}

.lumina-contacto--con-imagen .lumina-contenedor {
	position: relative; /* por encima del velo */
}

.lumina-contacto--con-imagen .lumina-titulo-seccion {
	color: var(--lumina-white);
}

.lumina-contacto--con-imagen .lumina-contacto__texto {
	color: var(--lumina-light);
}

/* =========================================================
   Botón flotante de WhatsApp (wp_footer, todo el sitio)
   ========================================================= */
.lumina-whatsapp-flotante {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366; /* verde oficial de WhatsApp */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, background 0.2s ease;
}

.lumina-whatsapp-flotante:hover,
.lumina-whatsapp-flotante:focus {
	background: #1ebe5b;
	transform: scale(1.06);
}

.lumina-whatsapp-flotante svg {
	width: 30px;
	height: 30px;
	fill: var(--lumina-white);
}

/* =========================================================
   Form de registro profesional (shortcode del plugin)
   La lógica vive en el plugin; la presentación acá. El submit
   ya lo cubre el estilo global de botones.
   ========================================================= */
.lumina-registro-pro {
	max-width: 560px;
}

.lumina-registro-pro input[type="text"],
.lumina-registro-pro input[type="email"],
.lumina-registro-pro input[type="password"],
.lumina-registro-pro input[type="tel"],
.lumina-registro-pro select,
.lumina-registro-pro textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d9d2c7;
	border-radius: 4px;
}

/* Las cajas del plugin traen colores inline (azul WP / rojo #c00):
   se pisan con !important para llevarlas a la paleta sin tocar el
   markup del plugin. */
.lumina-box {
	border-left-color: var(--lumina-primary) !important;
	background: var(--lumina-light) !important;
}

.lumina-form-errores {
	border-color: #b3564d !important;
}

/* =========================================================
   Desktop (>= 768px)
   ========================================================= */
@media (min-width: 768px) {
	.lumina-seccion {
		padding: 80px 32px;
	}

	.site-header .custom-logo-link img,
	.site-header img.custom-logo {
		max-width: 220px;
	}

	/* Texto del slide a la izquierda con aire, como Catarain */
	.lumina-hero__contenido {
		padding: 0 0 0 8%;
	}

	.lumina-hero__titulo {
		font-size: 3.2rem;
	}

	.lumina-hero__bajada {
		font-size: 1.25rem;
	}

	.lumina-beneficios__grilla {
		grid-template-columns: repeat(4, 1fr);
	}

	.lumina-destacados ul.products {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Manifiesto con imagen: más alto en desktop y a 2 columnas,
	   con el texto en la primera y la segunda vacía (la foto se ve
	   entera de ese lado, sin texto encima). */
	.lumina-manifiesto--con-imagen {
		min-height: 700px;
	}

	.lumina-manifiesto--con-imagen .lumina-contenedor {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 48px;
		width: 100%;
	}

	.lumina-manifiesto--con-imagen .lumina-titulo-seccion,
	.lumina-manifiesto--con-imagen .lumina-manifiesto__texto {
		grid-column: 1;
	}

	/* Footer: fila principal a 3 columnas (mismo selector interno
	   que arriba; centrado vertical entre columnas de distinta altura) */
	.site-footer .site-primary-footer-wrap .ast-builder-grid-row {
		grid-template-columns: repeat(3, 1fr);
		align-items: center;
	}
}