/* ============================================================
   Estudio Lanzi - Design tokens (manual cromático, sección 10)
   ============================================================ */
:root {
	--papel: #FFFFFF;
	--tinta: #15171A;
	--verde-050: #F0F6E3;
	--verde-400: #8FC71C;
	--verde-500: #6FA10A;
	--verde-700: #4E7106;
	--oliva: #26301A;
	--neutral-200: #E4E5DE;
	--neutral-300: #CFD1C8;
	--gris-cal: #9C9E96;
	--neutral-600: #7A7C74;

	--font-heading: "Outfit", sans-serif;
	--font-body: "Plus Jakarta Sans", sans-serif;

	--container: 1180px;
	--container-narrow: 760px;
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6rem;

	--radius: 6px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.6;
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--space-2);
}

h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--space-2); }

a { color: var(--verde-700); text-decoration: none; }
a:hover { color: var(--oliva); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* Las imágenes del cuerpo de un caso de portfolio deben ocupar todo el
   ancho del contenedor (igual que la imagen destacada y los botones de
   abajo) - si no, una imagen con un tamaño de origen más chico queda
   angosta y desalineada del resto. */
.entry-content img { width: 100%; }

:focus-visible {
	outline: 2px solid var(--verde-700);
	outline-offset: 2px;
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-3);
}

.container--narrow {
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding-inline: var(--space-3);
}

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }

.text-center { text-align: center; }
.eyebrow {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--verde-700);
	margin-bottom: var(--space-2);
}

/* ============================================================
   Franjas de color (Oliva / Verde 050)
   ============================================================ */
.surface-oliva { background: var(--oliva); color: var(--papel); }
.surface-oliva h1, .surface-oliva h2, .surface-oliva h3 { color: var(--papel); }
.surface-oliva a { color: var(--verde-400); }
.surface-oliva a:hover { color: var(--papel); }

.surface-verde-050 { background: var(--verde-050); }

/* ============================================================
   Botones
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
	padding: 0.85rem 1.75rem;
	border-radius: var(--radius);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
	background: var(--verde-500);
	color: var(--tinta);
}
.btn-primary:hover {
	background: var(--verde-400);
	color: var(--tinta);
	text-decoration: none;
}

.btn-secondary {
	background: transparent;
	border-color: var(--neutral-600);
	color: var(--tinta);
}
.btn-secondary:hover {
	border-color: var(--tinta);
	color: var(--tinta);
	text-decoration: none;
}

.surface-oliva .btn-secondary {
	border-color: var(--neutral-300);
	color: var(--papel);
}
.surface-oliva .btn-secondary:hover {
	border-color: var(--papel);
}

/* Sin esto, ".surface-oliva a" (más específico que ".btn-primary" solo)
   le pintaba el texto del botón verde-400 sobre fondo verde-500: casi
   sin contraste. */
.surface-oliva .btn-primary,
.surface-oliva .btn-primary:hover {
	color: var(--tinta);
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* ============================================================
   Header / navegación
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	/* Por arriba del .whatsapp-float (z-index 50): .site-header crea su
	   propio contexto de apilamiento, así que el z-index alto que le
	   pusimos a .primary-nav (60) solo ordena ADENTRO de este contexto -
	   para que el menú mobile abierto tape al botón de WhatsApp hace
	   falta que el contexto entero del header ya esté por encima. */
	z-index: 61;
	border-bottom: 1px solid var(--neutral-300);
}
/* El fondo difuminado va en un ::before propio, no directo en .site-header:
   "backdrop-filter" en un ancestro convierte a ESE ancestro en el
   "containing block" de cualquier descendiente position:fixed (regla real
   de CSS) - el panel del menú mobile y su overlay, al vivir dentro del
   header, quedaban anclados al tamaño de la barra (~78px) en vez de a la
   pantalla completa. Separar el difuminado en una capa sin hijos evita el
   problema sin mover el menú fuera del header (que rompería el layout de
   escritorio, donde el nav vive en la misma fila que el logo). */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(140%) blur(6px);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: 1rem;
}

.site-logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	line-height: 1;
	text-decoration: none;
}
.site-logo:hover { text-decoration: none; }
.site-logo__eyebrow {
	font-family: var(--font-heading);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--neutral-600);
}
.site-logo__mark { height: 34.5px; width: auto; display: block; }

.primary-nav ul {
	list-style: none;
	display: flex;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
}
.primary-nav a {
	color: var(--tinta);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.primary-nav a:hover { color: var(--verde-700); text-decoration: none; }

.nav-toggle {
	display: none;
	position: relative;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle__icon--close { display: none; }
.nav-toggle.is-open .nav-toggle__icon--open { display: none; }
.nav-toggle.is-open .nav-toggle__icon--close { display: block; }

.nav-overlay { display: none; }

@media (max-width: 860px) {
	.primary-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(78vw, 320px);
		height: 100vh;
		background: var(--papel);
		transform: translateX(100%);
		transition: transform 0.25s ease;
		padding: 5.5rem var(--space-3) var(--space-3);
		box-shadow: -8px 0 24px rgba(0,0,0,0.08);
		overflow-y: auto;
		z-index: 60; /* por arriba del .whatsapp-float (50): si no, el botón
		                de WhatsApp quedaba flotando encima del menú abierto. */
	}
	.primary-nav.is-open { transform: translateX(0); }
	.primary-nav ul { flex-direction: column; gap: var(--space-2); }
	.nav-toggle { display: inline-flex; }

	/* Fondo oscuro detrás del panel: toca para cerrar, y evita que se
	   pueda seguir tocando el resto de la página (WhatsApp flotante
	   incluido) mientras el menú está abierto. */
	.nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 55;
		background: rgba(21, 23, 26, 0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
	}
	.nav-overlay.is-open {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Mientras el menú mobile está abierto, la página de atrás no se mueve. */
body.nav-is-locked { overflow-y: hidden; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--verde-050);
	padding-block: var(--space-6) var(--space-5);
}
/* Imagen abstracta (hero 04): a sangre, con la maraña de nodos hacia la
   derecha. El degradado deja el texto sobre color plano a la izquierda. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url("../img/hero-home-bg.jpg") right center / cover no-repeat;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		var(--verde-050) 0%,
		var(--verde-050) 30%,
		rgba(240, 246, 227, 0.72) 48%,
		rgba(240, 246, 227, 0) 72%
	);
}
.hero__inner {
	position: relative;
	z-index: 2;
}
@media (max-width: 780px) {
	.hero::after {
		background: rgba(240, 246, 227, 0.82);
	}
}
.hero__content {
	max-width: 46rem;
}
.hero__content h1 {
	font-size: clamp(1.75rem, 3.1vw, 2.1875rem);
}
.hero p.lead {
	font-size: 1.2rem;
	color: var(--neutral-600);
	max-width: 42rem;
}
/* Título un poco más grande y párrafo más marcado, solo en mobile
   (pedido explícito: en desktop quedan como estaban). Va DESPUÉS de las
   reglas base de arriba a propósito: un @media más angosto no le gana
   en especificidad a una regla sin @media, así que si queda antes en el
   archivo, la de abajo la termina pisando igual. */
@media (max-width: 780px) {
	.hero__content h1 {
		font-size: 2rem;
	}
	.hero__content h1 .hero__break {
		display: none;
	}
	.hero p.lead {
		font-weight: 600;
	}
}
.hero__note {
	margin: var(--space-2) 0 0;
	font-size: 0.88rem;
	color: var(--neutral-600);
}

/* ============================================================
   Franja social proof
   ============================================================ */
.social-proof {
	text-align: center;
	padding-block: var(--space-4);
}
.social-proof p { font-size: 1.1rem; margin: 0; }

.logo-marquee {
	margin-top: var(--space-3);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--space-3);
	animation: logo-marquee-scroll 110s linear infinite;
}
.logo-marquee:hover .logo-marquee__track {
	animation-play-state: paused;
}
.logo-marquee__item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.25rem;
	background: var(--papel);
	border-radius: var(--radius);
	padding: 0.5rem 1.25rem;
}
.logo-marquee__item img {
	height: 100%;
	width: auto;
	max-width: 8rem;
	object-fit: contain;
	opacity: 0.9;
	filter: grayscale(1) contrast(0.85);
	transition: opacity 0.2s ease, filter 0.2s ease;
}
.logo-marquee__item:hover img {
	opacity: 1;
	filter: none;
}
@keyframes logo-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track { animation: none; }
}
/* En mobile el carrusel de logos deja de autodesplazarse solo y pasa a
   deslizarse con el dedo - la segunda tanda duplicada (para el loop
   infinito de escritorio) ya no hace falta y se oculta. */
@media (max-width: 780px) {
	.logo-marquee {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}
	.logo-marquee::-webkit-scrollbar { display: none; }
	.logo-marquee__track { animation: none; }
	.logo-marquee__item { scroll-snap-align: start; }
	.logo-marquee__item--dup { display: none; }
}

/* ============================================================
   Grillas / Cards de servicios
   ============================================================ */
.eco-selector {
	margin-top: var(--space-4);
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	border-radius: var(--radius);
	border: 1px solid var(--neutral-300);
	box-shadow: 0 10px 28px rgba(21, 23, 26, 0.08);
	overflow: hidden;
	min-height: 320px;
}
.eco-list {
	background: var(--oliva);
	display: flex;
	flex-direction: column;
}
.eco-item {
	all: unset;
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: rgba(242, 243, 238, 0.6);
	padding: 1.15rem 1.5rem 1.15rem 1.25rem;
	border-left: 8px solid transparent;
	border-bottom: 1px solid rgba(242, 243, 238, 0.12);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.eco-list .eco-item:last-child { border-bottom: none; }
.eco-item:hover { color: var(--papel); }
.eco-item.is-active { color: var(--papel); background: rgba(255, 255, 255, 0.08); border-left-color: var(--verde-400); }
.eco-panel {
	background: #fff;
	position: relative;
}
.eco-panel__item {
	display: none;
	position: relative;
	overflow: hidden;
	height: 100%;
	padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
	flex-direction: column;
	justify-content: center;
}
.eco-panel__item.is-active { display: flex; }
.eco-panel__ghost {
	position: absolute;
	top: -1.5rem;
	right: 1rem;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 8rem;
	line-height: 1;
	color: var(--verde-050);
	user-select: none;
}
.eco-panel__body { position: relative; z-index: 1; }
.eco-panel__body h3 { font-size: 1.6rem; margin: 0 0 0.7rem; max-width: 20ch; }
.eco-panel__body p { color: var(--neutral-600); margin: 0 0 1.3rem; max-width: 42ch; }
.eco-panel__body a {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--tinta);
	background: var(--verde-400);
	padding: 0.65rem 1.3rem;
	border-radius: var(--radius);
	text-decoration: none;
}
.eco-panel__body a:hover { background: var(--verde-500); text-decoration: none; }
/* En mobile el selector de dos paneles se reemplaza por completo por
   el acordeón de abajo (más fácil de recorrer con el dedo que unas
   pestañas horizontales escondidas). */
.eco-accordion { display: none; }
@media (max-width: 780px) {
	.eco-selector { display: none; }
	.eco-accordion { display: block; }
}

/* ============================================================
   Ecosistema Digital - acordeón mobile ("Opción 1C")
   ============================================================ */
.eco-acc__item {
	border-left: 4px solid var(--neutral-300);
	background: var(--neutral-200);
	border-radius: 0 var(--radius) var(--radius) 0;
	margin-bottom: var(--space-2);
	padding: 0.9rem 1rem;
	transition: background 0.15s ease;
}
.eco-acc__item:nth-child(1) { border-left-color: var(--verde-500); }
.eco-acc__item:nth-child(2) { border-left-color: var(--verde-700); }
.eco-acc__item:nth-child(3) { border-left-color: var(--oliva); }
.eco-acc__item:nth-child(4) { border-left-color: var(--neutral-600); }
.eco-acc__item:nth-child(5) { border-left-color: var(--verde-400); }
.eco-acc__item.is-open { background: var(--oliva); }
.eco-acc__head {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	width: 100%;
	cursor: pointer;
}
.eco-acc__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--tinta);
}
.eco-acc__item.is-open .eco-acc__title { color: var(--papel); }
.eco-acc__chev {
	flex-shrink: 0;
	width: 1.4rem;
	height: 1.4rem;
	color: var(--tinta);
	transition: transform 0.2s ease, color 0.2s ease;
}
.eco-acc__item.is-open .eco-acc__chev { transform: rotate(180deg); color: var(--verde-400); }
.eco-acc__teaser {
	margin: 0.2rem 0 0;
	font-size: 0.78rem;
	color: var(--neutral-600);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eco-acc__item.is-open .eco-acc__teaser { display: none; }
.eco-acc__body { display: none; padding-top: 0.6rem; }
.eco-acc__item.is-open .eco-acc__body { display: block; }
.eco-acc__body p {
	margin: 0 0 0.85rem;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}
.eco-acc__body a {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--tinta);
	background: var(--verde-400);
	padding: 0.55rem 1.1rem;
	border-radius: var(--radius);
	text-decoration: none;
}

.card {
	background: #fff;
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius);
	padding: var(--space-3);
	box-shadow: 0 1px 2px rgba(21, 23, 26, 0.04);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
	border-color: var(--verde-500);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(21, 23, 26, 0.08);
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--neutral-600); margin-bottom: var(--space-2); }
.card .card-link { font-weight: 600; }

/* ============================================================
   Diferenciadores
   ============================================================ */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	align-items: center;
}
@media (max-width: 780px) {
	.split { grid-template-columns: 1fr; gap: var(--space-3); }
}
.split img { border-radius: var(--radius); }

.check-list {
	list-style: none;
	margin: var(--space-3) 0 var(--space-4);
	padding: 0;
	display: grid;
	gap: var(--space-2);
}
.check-list li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}
.check-list li::before {
	content: "";
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	border-radius: 50%;
	background: var(--verde-500);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2315171A' stroke-width='2'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}
.check-list strong { font-family: var(--font-heading); }

.honesty-note {
	margin: var(--space-3) 0 0;
	padding: var(--space-2) var(--space-3);
	border-left: 3px solid var(--oliva);
	background: var(--neutral-200);
	color: var(--neutral-600);
	font-size: 0.95rem;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-3);
	margin: var(--space-3) 0 var(--space-4);
}
.stat-tile {
	display: flex;
	flex-direction: column;
}
.stat-tile__num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--verde-700);
	font-variant-numeric: tabular-nums;
}
.stat-tile__label {
	margin-top: 0.4rem;
	font-size: 0.85rem;
	color: var(--neutral-600);
}

.proof-quote {
	margin: 0 0 var(--space-4);
	padding: var(--space-2) var(--space-3);
	border-left: 4px solid var(--verde-500);
	background: var(--verde-050);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--tinta);
}

/* "Sobre el Estudio" (page-id-6): los títulos de sección son frases largas
   ("De Buenos Aires a Concepción, hace 20 años"): bajamos el cuerpo para
   que entren en una sola línea dentro del container--narrow en escritorio. */
.page-id-6 .container--narrow h2 {
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
}

/* El H1 de esta página es una frase larga: lo acotamos para que no pase
   de dos líneas en escritorio dentro del container--narrow. */
.page-id-6 .container--narrow h1 {
	font-size: clamp(1.9rem, 3.6vw, 2.4rem);
}

/* Foto del proceso, a ancho completo de la columna de texto, suelta con
   una sombra suave (sin recuadro). */
.sobre-proceso {
	width: 100%;
	height: auto;
	margin: var(--space-4) 0 var(--space-2);
	border-radius: var(--radius);
	box-shadow: 0 8px 22px rgba(21, 23, 26, 0.12);
}

/* ============================================================
   Portfolio
   ============================================================ */
.portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--space-3) 0 var(--space-4);
}
.portfolio-filters button {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	background: var(--verde-500);
	border: none;
	color: var(--tinta);
	border-radius: var(--radius);
	padding: 0.6rem 1.15rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.portfolio-filters button:hover { background: var(--verde-400); }
.portfolio-filters button.is-active {
	background: var(--tinta);
	color: var(--papel);
}

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-3);
}

/* Diseño único de tarjeta de portfolio en todo el sitio (home, /portfolio/
   y "Ejemplos de este servicio"): se despega de cualquier fondo con una
   tira verde arriba de la imagen y el título sobre oliva, en vez de
   fundirse con la superficie que la rodea. */
.portfolio-item {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 16px rgba(21, 23, 26, 0.08);
	text-decoration: none;
	color: var(--tinta);
	display: flex;
	flex-direction: column;
}
.portfolio-item:hover { text-decoration: none; box-shadow: 0 8px 20px rgba(21, 23, 26, 0.14); }
.portfolio-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; flex-shrink: 0; border-top: 5px solid var(--verde-500); }
.portfolio-item__body { padding: var(--space-2) var(--space-3) var(--space-3); flex: 1; display: flex; flex-direction: column; justify-content: center; background: var(--oliva); }
.portfolio-item__tag {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--verde-400);
	margin-bottom: 0.35rem;
}
.portfolio-item h3 { margin-bottom: 0; font-size: 1.1rem; color: var(--papel); }
.portfolio-item.is-hidden { display: none; }

/* Home: 8 ejemplos al azar en 2 filas de 4 en desktop (en vez del
   auto-fit de .portfolio-grid, que a este ancho de contenedor sólo
   entra de a 3 columnas). Por debajo de 781px sigue una sola columna,
   igual que el resto de las grillas de portfolio. */
@media (min-width: 781px) {
	.portfolio-grid--home {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ============================================================
   Testimonios - cita destacada con navegación
   ============================================================ */
.reviews {
	margin-top: var(--space-3);
}
.reviews__stage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3) var(--space-4);
	align-items: stretch;
	min-height: 9rem;
}
.review {
	margin: 0;
	display: flex;
	flex-direction: column;
}
.review[hidden] { display: none; }
.review blockquote {
	position: relative;
	margin: 0 0 var(--space-3);
	padding-top: 1.9rem;
	font-family: var(--font-body);
	font-style: italic;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--tinta);
}
.review blockquote::before {
	content: "\201C";
	position: absolute;
	top: -0.15em;
	left: -0.03em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3rem;
	line-height: 1;
	color: var(--verde-400);
}
.review__by {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: var(--space-2);
}
.review__logo {
	height: 24px;
	width: auto;
	max-width: 100px;
	object-fit: contain;
	filter: grayscale(1) contrast(0.85);
	opacity: 0.8;
}
.review__who {
	display: flex;
	flex-direction: column;
	font-family: var(--font-heading);
}
.review__who strong { font-weight: 600; font-size: 0.88rem; }
.review__who span { font-size: 0.78rem; color: var(--neutral-600); }

.reviews__nav {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
}
@media (max-width: 640px) {
	.reviews__stage { grid-template-columns: 1fr; min-height: 14rem; }
}
.reviews__arrow {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius);
	background: var(--papel);
	color: var(--tinta);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.reviews__arrow:hover {
	background: var(--verde-500);
	border-color: var(--verde-500);
	color: var(--papel);
}
.reviews__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 auto 0 0.25rem;
}
.reviews__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--neutral-300);
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}
.reviews__dot:hover { background: var(--neutral-600); }
.reviews__dot.is-active {
	width: 24px;
	background: var(--verde-500);
}
@media (max-width: 560px) {
	.review blockquote { font-size: 1.15rem; }
	.reviews__stage { min-height: 20rem; }
}

/* ============================================================
   Preguntas Frecuentes
   ============================================================ */
.faq-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--space-3) 0 var(--space-4);
}
.faq-jump a {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--tinta);
	background: var(--verde-500);
	border: none;
	border-radius: var(--radius);
	padding: 0.6rem 1.15rem;
	text-decoration: none;
	transition: background 0.15s ease;
}
.faq-jump a:hover { background: var(--verde-400); text-decoration: none; }

.faq-section-title {
	margin-top: var(--space-6);
	scroll-margin-top: var(--space-4);
}

.faq-list {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-4);
}
.faq-item {
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius);
	background: #fff;
}
.faq-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	background: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--tinta);
}
.faq-item__icon {
	position: relative;
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
}
.faq-item__icon::before,
.faq-item__icon::after {
	content: "";
	position: absolute;
	background: var(--verde-700);
	border-radius: 2px;
}
.faq-item__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-item__icon::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); transition: transform 0.2s ease; }
.faq-item__question[aria-expanded="true"] .faq-item__icon::after { transform: translateX(-50%) scaleY(0); }
.faq-item__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease;
}
.faq-item__answer > p {
	overflow: hidden;
	margin: 0;
	padding: 0 var(--space-3);
	font-size: 0.95rem;
	color: var(--neutral-600);
}
.faq-item__question[aria-expanded="true"] + .faq-item__answer {
	grid-template-rows: 1fr;
}
.faq-item__question[aria-expanded="true"] + .faq-item__answer > p {
	padding: 0 var(--space-3) var(--space-3);
}

/* ============================================================
   Proceso (páginas de servicio)
   ============================================================ */
.process-steps {
	list-style: none;
	margin: var(--space-3) 0 var(--space-4);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	counter-reset: step;
}
.process-steps li:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
@media (max-width: 600px) {
	.process-steps { grid-template-columns: 1fr; }
	.process-steps li:last-child:nth-child(odd) { grid-column: auto; }
}
.process-steps li {
	counter-increment: step;
	background: #fff;
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius);
	padding: var(--space-3);
	box-shadow: 0 1px 2px rgba(21, 23, 26, 0.04);
}
.process-steps li::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--verde-500);
	margin-bottom: 0.5rem;
}

/* ============================================================
   Fichas de planes (hosting)
   ============================================================ */
.plan-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	margin-top: var(--space-5);
	align-items: stretch;
}
@media (max-width: 860px) {
	.plan-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.plan-grid { grid-template-columns: 1fr; }
}
.plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius);
	text-align: center;
}
.plan-card--featured {
	border-color: var(--verde-500);
	border-width: 2px;
	box-shadow: 0 8px 24px rgba(111, 161, 10, 0.16);
}
/* Etiqueta "Más elegido": afuera del rectángulo, flotando sobre el borde superior */
.plan-card__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--verde-500);
	color: var(--tinta);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.4rem 0.95rem;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(21, 23, 26, 0.18);
}
.plan-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
	padding: var(--space-4) var(--space-3) var(--space-3);
}
/* Jerarquía: nombre del plan es lo más destacado */
.plan-card__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--verde-700);
	margin-bottom: 0.35rem;
}
/* Descripción: jerarquía menor, texto de apoyo */
.plan-card__desc {
	color: var(--neutral-600);
	font-size: 0.85rem;
	margin-bottom: var(--space-3);
	min-height: 2.6em;
}
/* Características: jerarquía intermedia, entre el nombre y la descripción */
.plan-card__features {
	list-style: none;
	margin: 0 0 var(--space-3);
	padding: var(--space-3) 0 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex-grow: 1;
	border-top: 1px solid var(--neutral-200);
}
.plan-card__features li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--neutral-200);
}
.plan-card__features li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.plan-card__feature-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--neutral-600);
	font-weight: 600;
}
.plan-card__feature-value {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--tinta);
}
.plan-card__cta {
	text-align: center;
	width: auto;
	align-self: center;
	font-size: 0.9rem;
	padding: 0.6rem 1.5rem;
	margin-top: auto;
}
.hosting-table-note {
	margin-top: var(--space-4);
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
	font-size: 1rem;
	font-weight: 600;
	color: var(--tinta);
}

/* ============================================================
   CTA final / footer
   ============================================================ */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 34rem; margin-inline: auto; }
.cta-final p { max-width: 34rem; margin-inline: auto; margin-block-end: var(--space-3); }
.cta-final .btn-group { justify-content: center; }

.site-footer {
	background: var(--oliva);
	color: var(--neutral-300);
	padding-block: var(--space-4);
	font-size: 0.9rem;
}
.site-footer a { color: var(--papel); }
.site-footer__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-1);
}

/* ============================================================
   WhatsApp flotante
   ============================================================ */
.whatsapp-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--verde-500);
	color: var(--tinta);
	box-shadow: 0 6px 18px rgba(21, 23, 26, 0.25);
}
.whatsapp-float:hover { background: var(--verde-400); color: var(--tinta); }
.whatsapp-float svg { width: 28px; height: 28px; }

/* ============================================================
   Contacto (sin formulario - generador de mensaje)
   ============================================================ */
.madlib {
	background: #fff;
	border: 1px solid var(--neutral-300);
	border-radius: var(--radius);
	padding: var(--space-4) clamp(1.25rem, 4vw, var(--space-5));
	margin-top: var(--space-4);
}
.madlib__sentence {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.6vw, 1.75rem);
	line-height: 1.5;
	color: var(--tinta);
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}
.madlib__sentence .blank {
	color: var(--verde-700);
	border-bottom: 2px solid var(--verde-500);
	padding-bottom: 1px;
}
.madlib__choices {
	display: grid;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}
.madlib__group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.madlib__group .label {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--neutral-600);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	width: 100%;
	margin-bottom: 0.15rem;
}
.chip {
	all: unset;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 0.9rem;
	color: var(--tinta);
	background: var(--verde-050);
	border: 1.5px solid transparent;
	border-radius: 999px;
	padding: 0.45rem 1rem;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.chip:hover { border-color: var(--verde-500); }
.chip.is-selected { background: var(--verde-500); color: var(--tinta); font-weight: 600; }
.madlib__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
	background: var(--tinta);
	color: var(--papel);
	padding: 0.85rem 1.6rem;
	border-radius: var(--radius);
	border: none;
	cursor: pointer;
}
.madlib__cta svg { width: 1.1rem; height: 1.1rem; }
.madlib__cta:hover { background: var(--oliva); }

.contact-alt {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--neutral-300);
}
.contact-info-list {
	list-style: none;
	margin: var(--space-2) 0 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	font-weight: 500;
}

/* ============================================================
   Reveal on scroll (interactividad sutil)
   ============================================================ */
.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Utilidades responsive generales
   ============================================================ */
@media (max-width: 600px) {
	.section { padding-block: var(--space-4); }
	.hero { padding-block: var(--space-5) var(--space-4); }
}