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


/*
 * style.css — LNG
 * Orden: 1) variables · 2) base/generales · 3) botones · 4) componentes.
 * Los componentes van DESPUÉS de las reglas generales (para que no las pisen) y
 * se anidan dentro de su padre con sintaxis CSS nativa (header { .brand { … } }).
 * Las reglas responsive y la barra fija móvil viven en responsive.css.
 */


/* ===========================================================================
 * 1 · VARIABLES (DESIGN.md §1 — paleta validada + tokens de tema)
 * ======================================================================== */
:root {
	/* Paleta base */
	--lng-brasa:        #D34E24; /* acento / CTA "Llamar ahora" */
	--lng-madera:       #6B3F25; /* titulares, header (primario) */
	--lng-carbon:       #211A15; /* cuerpo de texto */
	--lng-encina:       #5A6B3B; /* detalles, iconos (secundario) */
	--lng-crema:        #F7F1E6; /* fondo cálido */
	--lng-gris-calido:  #8A7E70; /* bordes, texto secundario (UI) */

	/* Brasa oscurecida para texto/enlace pequeño sobre fondo claro
	   (--lng-brasa da 4.3:1; esta ≈4.9:1, cumple AA normal). */
	--lng-brasa-strong: #C44921;

	/* Aliases semánticos */
	--lng-color-text:     var(--lng-carbon);
	--lng-color-heading:  var(--lng-madera);
	--lng-color-bg:       var(--lng-crema);
	--lng-color-accent:   var(--lng-brasa);
	--lng-color-cta:      var(--lng-brasa);
	--lng-color-cta-text: #ffffff;
	--lng-color-border:   var(--lng-gris-calido);
	--lng-color-muted:    var(--lng-gris-calido);

	/* Tipografía */
	--lng-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--lng-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Cremas cálidos para las bandas (separación sin perder calidez; nada de
	   blanco de fondo). El blanco se reserva para tarjetas. */
	--lng-crema-dark: #EFE3CC; /* "crema oscurito" para bandas alternas */

	/* Tintes translúcidos para medallones de icono */
	--lng-brasa-tint:  rgba(211, 78, 36, .12);
	--lng-encina-tint: rgba(90, 107, 59, .14);

	/* Otros tokens */
	--lng-radius:      .9rem;
	--lng-radius-sm:   .45rem;
	--lng-radius-pill: 999px;
	--lng-shadow:      0 .35rem 1.5rem rgba(33, 26, 21, .10);
	--lng-shadow-warm: 0 .8rem 2.2rem rgba(107, 63, 37, .16);
	--lng-maxw:        1200px;
	--lng-header-h:    72px;
}


/* ===========================================================================
 * 2 · BASE / GENERALES
 * ======================================================================== */
html { scroll-behavior: smooth; }

body.front-end {
	font-family: var(--lng-font-body);
	color: var(--lng-color-text);
	background: var(--lng-color-bg);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lng-font-heading);
	color: var(--lng-color-heading);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.015em;
	margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1rem; }

a {
	color: var(--lng-brasa-strong);
	text-decoration: none;

	&:hover { text-decoration: underline; }
}

/* Utilidades */
.section { padding: clamp(2.5rem, 6vw, 5rem) 0; }

/* Bandas alternas de las secciones de contenido del <main>, para que se vea la
   separación entre franjas: impares = crema, pares = blanco. Es automático
   (independiente del orden de cada página). hero conserva su degradado y
   cta-band su fondo madera (overrides más específicos, más abajo). */
main > section { background: var(--lng-crema); }
main > section:nth-of-type(even) { background: var(--lng-crema-dark); }

.lead { font-size: 1.15rem; color: var(--lng-carbon); }

.text-muted-warm { color: var(--lng-color-muted); }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--lng-font-body);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .8rem;
	font-weight: 600;
	color: var(--lng-encina);

	&::before {
		content: "";
		width: 1.75rem;
		height: 2px;
		background: var(--lng-brasa);
		border-radius: 2px;
	}
}


/* ===========================================================================
 * 3 · BOTONES
 * ======================================================================== */
.btn-lng {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--lng-font-body);
	font-weight: 600;
	line-height: 1;
	padding: .85rem 1.5rem;
	border-radius: var(--lng-radius-sm);
	border: 2px solid transparent;
	transition: background-color .15s ease, color .15s ease, transform .05s ease;
	text-decoration: none;
	cursor: pointer;

	&:hover  { text-decoration: none; }
	&:active { transform: translateY(1px); }

	& i { font-size: 1.15em; }
}

/* CTA primario: tel: — texto blanco grande/negrita sobre brasa (AA grande/UI). */
.btn-brasa {
	background: var(--lng-brasa);
	color: var(--lng-color-cta-text);
	font-size: 1.05rem;

	&:hover { background: var(--lng-brasa-strong); color: #fff; }
}

.btn-outline-madera {
	background: transparent;
	color: var(--lng-madera);
	border-color: var(--lng-madera);

	&:hover { background: var(--lng-madera); color: #fff; }
}

.btn-block { width: 100%; justify-content: center; }


/* ===========================================================================
 * 4 · COMPONENTES
 * ======================================================================== */

/* Header + wordmark + nav ------------------------------------------------- */
.header {
	background: var(--lng-crema);
	border-bottom: 1px solid rgba(138, 126, 112, .25);
	position: sticky;
	top: 0;
	z-index: 1030;

	& > .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		min-height: var(--lng-header-h);
	}

	/* Wordmark de marca (placeholder, NO es <h1> — regla SEO §7).
	   Preparado para sustituir el texto por <img> sin remaquetar. */
	.brand {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		text-decoration: none;
		color: var(--lng-color-heading);
		line-height: 1;

		&:hover { text-decoration: none; }
	}

	.brand__isotipo {
		color: var(--lng-brasa);
		font-size: 1.5rem;
	}

	.brand__wordmark {
		font-family: var(--lng-font-heading);
		font-weight: 700;
		font-size: 1.25rem;
		letter-spacing: -.01em;
	}

	.nav-main {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		list-style: none;
		margin: 0;
		padding: 0;

		& a {
			color: var(--lng-carbon);
			font-weight: 600;
			font-size: .85rem;
			text-transform: uppercase;

			&:hover { color: var(--lng-brasa-strong); text-decoration: none; }
		}

		/* Desplegable "Productos" (hover en escritorio; en línea en móvil) */
		.nav-dropdown { position: relative; }

		.nav-toggle {
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			gap: .3rem;
			color: var(--lng-carbon);
			font-weight: 600;
			font-size: .85rem;
			text-transform: uppercase;

			& i { font-size: 1.05em; transition: transform .15s ease; }
		}

		.nav-dropdown:hover > .nav-toggle,
		.nav-dropdown:focus-within > .nav-toggle { color: var(--lng-brasa-strong); }
		.nav-dropdown:hover > .nav-toggle i,
		.nav-dropdown:focus-within > .nav-toggle i { transform: rotate(180deg); }

		.nav-submenu {
			position: absolute;
			top: 100%;
			left: -.75rem;
			min-width: 220px;
			margin: 0;
			padding: .4rem 0;
			list-style: none;
			background: var(--lng-crema);
			border: 1px solid rgba(138, 126, 112, .25);
			border-radius: var(--lng-radius-sm);
			box-shadow: var(--lng-shadow);
			display: none;
			z-index: 1031;
		}
		.nav-dropdown:hover .nav-submenu,
		.nav-dropdown:focus-within .nav-submenu { display: block; }

		.nav-submenu a {
			display: block;
			padding: .55rem 1.1rem;
			color: var(--lng-carbon);
			font-weight: 500;
			font-size: .92rem;
			text-transform: none;

			&:hover { background: rgba(211, 78, 36, .08); color: var(--lng-brasa-strong); text-decoration: none; }
		}
	}

	.header__actions {
		display: flex;
		align-items: center;
		gap: .75rem;
	}

	.header__toggle {
		display: none;
		background: none;
		border: 0;
		color: var(--lng-madera);
		font-size: 1.6rem;
		line-height: 1;
		padding: .25rem;
	}
}

/* Footer ------------------------------------------------------------------ */
.footer {
	background: var(--lng-carbon);
	color: #d8cfc4;
	padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;

	& h2, & h3 { color: #fff; font-size: 1.1rem; }

	& a {
		color: #d8cfc4;

		&:hover { color: #fff; }
	}

	.footer__nap address { font-style: normal; line-height: 1.8; }

	.footer__links { list-style: none; padding: 0; margin: 0; line-height: 2; }

	.footer__bottom {
		border-top: 1px solid rgba(255, 255, 255, .12);
		margin-top: 2rem;
		padding-top: 1.25rem;
		font-size: .85rem;
		color: var(--lng-gris-calido);
	}
}

/* Hero -------------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	/* Degradado cálido + brillo brasa sutil arriba a la derecha. Termina en crema
	   claro para contrastar con la banda de productos (crema oscuro). */
	background:
		radial-gradient(120% 85% at 88% -10%, rgba(211, 78, 36, .12) 0%, transparent 55%),
		linear-gradient(180deg, #FBF6EC 0%, var(--lng-crema) 100%);
	padding: clamp(2.5rem, 7vw, 5.5rem) 0;

	/* Dos columnas (texto + media) solo si hay media; si no, una sola. */
	.hero__inner {
		display: grid;
		gap: clamp(1.5rem, 4vw, 3rem);
		align-items: center;
	}
	.hero__inner:has(.hero__media) { grid-template-columns: 1.05fr .95fr; }

	.hero__media img,
	.hero__media .media-placeholder {
		width: 100%;
		aspect-ratio: 4 / 3;
		border-radius: var(--lng-radius);
		object-fit: cover;
		box-shadow: var(--lng-shadow-warm);
	}

	.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
	.hero__subtitle { font-size: 1.2rem; max-width: 42ch; }

	.hero__trust {
		list-style: none;
		padding: 0;
		margin: 1.75rem 0 0;
		display: flex;
		flex-wrap: wrap;
		gap: .75rem 1.75rem;

		& li {
			display: inline-flex;
			align-items: center;
			gap: .5rem;
			font-weight: 500;
			color: var(--lng-carbon);
		}
		& i { color: var(--lng-encina); font-size: 1.15rem; }
	}
}

/* Placeholder de imagen (mientras llegan las fotos reales). Degradado madera→
   carbón con icono; se sustituye por <img> sin tocar CSS. Reutilizable. */
.media-placeholder {
	display: grid;
	place-items: center;
	position: relative;
	background:
		radial-gradient(120% 120% at 30% 15%, rgba(211, 78, 36, .18), transparent 60%),
		linear-gradient(140deg, var(--lng-madera) 0%, var(--lng-carbon) 100%);
	color: rgba(255, 255, 255, .9);

	& i { font-size: 2.4rem; opacity: .85; }
	& span {
		position: absolute;
		right: .8rem;
		bottom: .6rem;
		font-size: .68rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		opacity: .55;
	}
}

/* Tarjetas de producto ---------------------------------------------------- */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.product-card {
	background: #fff;
	border: 1px solid rgba(138, 126, 112, .18);
	border-radius: var(--lng-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--lng-shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;

	&:hover {
		transform: translateY(-4px);
		box-shadow: var(--lng-shadow-warm);
		border-color: rgba(211, 78, 36, .35);
	}

	.product-card__media { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

	.product-card__body {
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		gap: .7rem;
		flex: 1;
	}

	.product-card__icon {
		display: grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		background: var(--lng-brasa-tint);
		color: var(--lng-brasa);
		font-size: 1.5rem;
	}
	.product-card__title { margin: 0; font-size: 1.25rem; }
	.product-card__link {
		margin-top: auto;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: .4rem;

		& i { transition: transform .15s ease; }
		&:hover { text-decoration: none; }
		&:hover i { transform: translateX(3px); }
	}
}

/* Zonas de reparto -------------------------------------------------------- */
.zona-coverage__list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;

	& a {
		display: inline-flex;
		align-items: center;
		gap: .45rem;
		color: var(--lng-carbon);
		background: #fff;
		border: 1px solid rgba(138, 126, 112, .3);
		border-radius: var(--lng-radius-pill);
		padding: .5rem .95rem;
		font-weight: 500;
		transition: background-color .15s ease, color .15s ease, border-color .15s ease;

		& i { color: var(--lng-encina); font-size: 1rem; transition: color .15s ease; }

		&:hover {
			background: var(--lng-brasa);
			color: #fff;
			border-color: var(--lng-brasa);
			text-decoration: none;
		}
		&:hover i { color: #fff; }
	}
}

/* Galería ----------------------------------------------------------------- */
.gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	gap: 1rem;
}

.gallery__item {
	margin: 0;
	border-radius: var(--lng-radius);
	overflow: hidden;
	box-shadow: var(--lng-shadow);
	aspect-ratio: 4 / 3;
}

.gallery__item img,
.gallery__item .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Por qué nosotros -------------------------------------------------------- */
.why-us__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.why-us__item { text-align: center; }

.why-us__icon {
	display: inline-grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--lng-encina-tint);
	color: var(--lng-encina);
	font-size: 1.9rem;
	margin-bottom: .85rem;
}

/* FAQ --------------------------------------------------------------------- */
.faq.accordion {
	--bs-accordion-bg: transparent;
	--bs-accordion-active-bg: transparent;
	--bs-accordion-active-color: var(--lng-madera);
	--bs-accordion-btn-color: var(--lng-madera);
	--bs-accordion-btn-bg: transparent;
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-border-color: rgba(138, 126, 112, .25);

	.accordion-item {
		background: transparent;
		border: 0;
		border-bottom: 1px solid rgba(138, 126, 112, .25);
	}

	.faq__question {
		font-family: var(--lng-font-heading);
		font-weight: 600;
		font-size: 1.1rem;
		padding-left: 0;
		padding-right: 0;
		box-shadow: none;

		/* Sustituye el chevron de Bootstrap por un +/− brasa */
		&::after {
			background-image: none;
			content: "+";
			width: auto;
			height: auto;
			color: var(--lng-brasa);
			font-size: 1.5rem;
			line-height: 1;
			transform: none;
		}
		&:not(.collapsed)::after { content: "−"; }
	}

	.accordion-body { padding: 0 0 1.1rem; }
}

/* Breadcrumbs ------------------------------------------------------------- */
.breadcrumbs {
	font-size: .9rem;
	padding: 1rem 0;

	& ol {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		gap: .4rem;
		padding: 0;
		margin: 0;
	}

	& li {
		&::after { content: "/"; margin-left: .4rem; color: var(--lng-gris-calido); }
		&:last-child::after { content: ""; }
		&:last-child span { color: var(--lng-carbon); font-weight: 600; }
	}

	& a { color: var(--lng-gris-calido); }
}

/* Contenido de página/artículo (cuerpo largo: productos, landings, blog) --- */
.content {
	& h2 { margin-top: 2rem; }
	& h3 { margin-top: 1.5rem; }
	& ul, & ol { margin: 0 0 1rem; padding-left: 1.25rem; }
	& li { margin-bottom: .35rem; }
	& a { font-weight: 600; }
	& img { max-width: 100%; height: auto; border-radius: var(--lng-radius-sm); }
}

/* Blog -------------------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.blog-card {
	background: #fff;
	border-radius: var(--lng-radius);
	overflow: hidden;
	border: 1px solid rgba(138, 126, 112, .2);
	display: flex;
	flex-direction: column;

	.blog-card__media { aspect-ratio: 16 / 9; background: var(--lng-crema); object-fit: cover; width: 100%; }
	.blog-card__body  { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
	.blog-card__date  { font-size: .82rem; color: var(--lng-gris-calido); }
}

/* Banda CTA --------------------------------------------------------------- */
/* main > section.cta-band para que su fondo gane a la banda alterna par (misma
   especificidad, gana por orden) y a la base. */
main > section.cta-band {
	background: var(--lng-madera);
	color: #fff;
	text-align: center;

	& h2 { color: #fff; }
	& .btn-brasa:hover { background: var(--lng-brasa-strong); }
}

/* Barra fija móvil (oculta en escritorio; se activa en responsive.css). */
.callbar-mobile { display: none; }