/*
 * EENDA
 * Marketing, Desarrollo & Consulting
 * www.eenda.com
 * © 2026
 */


/*
 * responsive.css — LNG · mobile-first.
 * Bloques de producto en columna en móvil, 3 por fila en escritorio.
 * Nav colapsable + barra fija "Llamar ahora" siempre visible en móvil.
 */


/* ===========================================================================
 * Tablet y abajo (≤ 991.98px)
 * ======================================================================== */
@media (max-width: 991.98px) {

	/* Grids a 2 columnas */
	.products-grid,
	.blog-grid,
	.why-us__grid { grid-template-columns: repeat(2, 1fr); }

	.zona-coverage__list { grid-template-columns: repeat(3, 1fr); }

	/* Nav colapsable: se oculta y se despliega con .is-open (toggled por JS).
	   Especificidad .header .header__toggle (0,2,0) para igualar la base anidada
	   de style.css (si no, su display:none ganaría y el botón no aparecería). */
	.header .header__toggle { display: inline-block; }

	.header .nav-main {
		position: fixed;
		inset: var(--lng-header-h) 0 auto 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: var(--lng-crema);
		border-bottom: 1px solid rgba(138, 126, 112, .25);
		padding: .5rem 1.25rem 1rem;
		box-shadow: var(--lng-shadow);
		z-index: 1029;
		/* Oculto por completo cuando está cerrado (sin asomar bajo el header).
		   No usamos translateY(-100%) porque el panel arranca en top:72px y no
		   se ocultaría del todo; visibility+opacity es robusto sea cual sea su alto. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	}
	.header .nav-main.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.header .nav-main li { width: 100%; }
	.header .nav-main a { display: block; width: 100%; padding: .8rem 0; }

	/* Desplegable de productos: en móvil va en línea (siempre desplegado) */
	.header .nav-main .nav-toggle { display: block; width: 100%; padding: .8rem 0; }
	.header .nav-main .nav-toggle i { display: none; }
	.header .nav-main .nav-submenu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 .5rem .9rem;
		background: transparent;
		border: 0;
		box-shadow: none;
	}
	.header .nav-main .nav-submenu a { padding: .5rem 0; text-transform: none; font-size: .95rem; }

	/* En el header móvil dejamos solo el botón Llamar (la barra fija refuerza) */
	.header__actions .btn-outline-madera { display: none; }
}


/* ===========================================================================
 * Móvil (≤ 767.98px)
 * ======================================================================== */
@media (max-width: 767.98px) {

	/* Una sola columna */
	.products-grid,
	.blog-grid,
	.why-us__grid { grid-template-columns: 1fr; }

	.zona-coverage__list { grid-template-columns: repeat(2, 1fr); }

	/* Hero a una columna (foto debajo del texto). Especificidad .hero ... (0,3,0)
	   para ganar a la regla anidada de escritorio de style.css; si no, seguiría
	   a dos columnas y se apelmaza. */
	.hero .hero__inner:has(.hero__media) { grid-template-columns: 1fr; }

	.hero__cta { flex-direction: column; }
	.hero__cta .btn-lng { width: 100%; justify-content: center; }

	/* -------------------------------------------------------------------
	 * Barra fija "Llamar ahora" — conversión principal (DESIGN.md §6).
	 * Siempre visible en la parte inferior en móvil.
	 * ------------------------------------------------------------------ */
	.callbar-mobile {
		display: flex;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 1040;
		gap: .5rem;
		padding: .5rem;
		background: var(--lng-crema);
		border-top: 1px solid rgba(138, 126, 112, .35);
		box-shadow: 0 -.25rem 1rem rgba(33, 26, 21, .12);
	}
	.callbar-mobile .btn-lng { flex: 1; justify-content: center; padding: .85rem 1rem; }

	/* Aire inferior para que la barra no tape contenido/footer */
	body.front-end { padding-bottom: 4.5rem; }
}