/* ==========================================================================
   Arraviva — Partner tecnológico de crecimiento
   Hoja de estilos principal.

   Organización del archivo:
   1. Tokens (variables CSS: colores, fuentes)
   2. Reset y base
   3. Utilidades (contenedor, botones, etiquetas, animaciones)
   4. Componentes por sección (nav, hero, problema, método, etc.)
   5. Responsive (media queries — mobile-first en los ajustes finales)
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Paleta sobria: crema + tinta + un solo verde profundo de acento */
  --raiz:   #1E3A31; /* verde profundo — anchor, botones, títulos, fondos oscuros */
  --acento: #2F6B4F; /* verde profundo — ÚNICO acento (enlaces, kickers, hovers) */
  /* Tokens antiguos (conservados por compatibilidad; ya no se usan como acento) */
  --savia:  #35A46A; /* (retirado) verde vivo */
  --tierra: #C16A45; /* (retirado) terracota */
  --luz:    #E6B15A; /* (retirado) ámbar */
  --arena:  #F6F1E8; /* crema — fondo de secciones cálidas */
  --blanco: #FFFFFF; /* blanco puro — fondo de secciones nítidas y tarjetas */
  --tinta:  #17201B; /* texto principal */
  --musgo:  #47544A; /* texto secundario (oscurecido para más contraste) */
  --linea:  #E2DCCF; /* bordes y divisores */
  /* Acento en su tono claro (mismo verde de la paleta) para fondos OSCUROS,
     donde --acento #2F6B4F no tendría contraste suficiente. */
  --acento-dark: #8FA396;

  /* Tonos de apoyo derivados */
  --arena-card: #FBF8F1; /* fondo de tarjetas sobre arena */
  --musgo-suave: #566158; /* texto terciario / metadatos (oscurecido para AA) */
  --raiz-borde:  #2C5445; /* borde sobre fondo raíz */
  --raiz-trama:  #24473C; /* trama sobre fondo raíz */
  --raiz-texto:  #DDE5DE; /* texto claro sobre fondo raíz */
  --raiz-texto2: #A9BAAF; /* texto secundario sobre fondo raíz (aclarado para AA) */

  /* Tipografía */
  --serif: "Fraunces", Georgia, serif;      /* títulos — cálida */
  --sans:  "Inter", system-ui, sans-serif;  /* cuerpo / UI */
  --mono:  ui-monospace, Menlo, monospace;  /* metadatos y numeración */
}

/* 2. RESET Y BASE ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--arena);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* red de seguridad: los adornos SVG nunca crean scroll lateral */
}

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

h1, h2, h3 { font-family: var(--serif); margin: 0; }

p { margin: 0; }

a { color: var(--acento); text-decoration: none; }

/* Resalte de marca: "Arra" en peso normal, "viva" en negrilla + acento.
   Codifica "raíz + VIVA" de forma sutil y consistente en toda la web. */
.viva { font-weight: 700; color: var(--acento); }
.section--dark .viva, .historia .viva { color: var(--acento-dark); }

/* 3. UTILIDADES ------------------------------------------------------------ */

/* Contenedor central con ancho máximo */
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Etiqueta pequeña en mayúsculas (kicker) sobre cada sección */
.kicker {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
}
.kicker--luz { color: var(--acento); }

/* Títulos de sección — más contundencia (Fraunces 600, un punto más grandes) */
.section-title {
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--raiz);
  text-wrap: balance;
}

/* Texto de cuerpo secundario */
.lead { font-size: 16.5px; line-height: 1.65; color: var(--musgo); text-wrap: pretty; }

/* Botones ------------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 26px;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
/* Botón principal: fondo raíz, hover a savia */
.btn--primary { background: var(--raiz); color: var(--arena); }
.btn--primary:hover { background: var(--acento); color: var(--arena); }
/* Enlace-CTA secundario: terracota */
.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--acento);
  font-weight: 600;
  padding: 16px 8px;
}
.btn--ghost:hover { color: var(--raiz); }
/* Variante compacta (usada en la barra de navegación) */
.btn--sm { font-size: 13px; padding: 10px 18px; }

/* Micro-movimiento: la flecha se desliza a la derecha al pasar el cursor */
.arrow { display: inline-block; transition: transform 0.25s ease; }
.btn:hover .arrow,
.btn--ghost:hover .arrow,
.fab:hover .arrow { transform: translateX(5px); }

/* Micro-movimiento: el brote del logo hace un leve giro + escala al hover */
.brand svg { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; }
.brand:hover svg { transform: rotate(-10deg) scale(1.12); }

/* --- Ritmo por secciones: fondos alternos para dar capas y profundidad --- */
.section--white { background: var(--blanco); }
.section--cream { background: var(--arena); }
/* Secciones oscuras (hero, "qué es", historia, CTA): texto claro sobre --raiz */
.section--dark { background: var(--raiz); }

/* Grano/ruido MUY sutil solo en las secciones oscuras: da profundidad y
   evita que se vean planas. El contenido va por encima (z-index). */
.section--dark, .historia { position: relative; }
.section--dark::before, .historia::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.section--dark > *, .historia > * { position: relative; z-index: 1; }

/* Transición de entrada de las secciones oscuras: el fondo "barre" de
   izquierda a derecha al entrar en pantalla. La clase .wipe--armed la añade
   script.js solo si hay JS y no se pidió menos movimiento; sin ella, la
   sección se ve completa (fallback seguro). */
.wipe--armed { clip-path: inset(0 100% 0 0); }
.wipe--armed.wipe--in { clip-path: inset(0 0 0 0); }
.wipe--armed { transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.2, 1); }
.section--dark .kicker { color: var(--acento-dark); }
.section--dark .section-title,
.section--dark .cta__title { color: var(--arena); }
/* Cuando dos secciones del mismo color quedan seguidas, una hairline las separa */
.section--cream + .section--cream,
.section--white + .section--white { border-top: 1px solid var(--linea); }

/* --- Cinta animada (marquee) bajo el hero --- */
.marquee {
  background: var(--raiz);
  border-top: 1px solid var(--raiz-borde);
  border-bottom: 1px solid var(--raiz-borde);
  overflow: hidden;
  padding: 16px 0;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  flex-wrap: nowrap;
  /* Lento y continuo: 4 grupos idénticos; -50% desplaza exactamente 2 grupos.
     88s mantiene la MISMA velocidad visual que antes (el doble de recorrido). */
  animation: marquee 88s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  flex: none;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--raiz-texto);
  white-space: nowrap;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Animación de aparición al hacer scroll.
   El elemento arranca oculto y sube suavemente cuando entra en pantalla
   (la clase .is-visible la añade script.js con IntersectionObserver). */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  /* Curva suave y serena (arranca con algo de impulso y frena con calma) */
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  /* El acordeón sigue abriendo/cerrando, pero sin animación */
  .faq__panel, .faq__icon { transition: none; }
  /* Detenemos el movimiento continuo y las animaciones de entrada */
  .marquee__track { animation: none; }
  .hero__title::after, .hero__accent { animation: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* 4. COMPONENTES POR SECCIÓN ---------------------------------------------- */

/* --- Barra de navegación --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: rgba(246, 241, 232, 0.9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  color: var(--raiz);
  letter-spacing: -0.01em;
}
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__link { font-size: 13.5px; font-weight: 500; color: var(--tinta); }
.nav__link:hover { color: var(--acento); }

/* Selector de idioma ES / EN */
.lang {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--linea);
}
.lang__btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--musgo);
  padding: 2px 4px;
  border-radius: 4px;
}
.lang__btn.is-active { font-weight: 600; color: var(--tinta); }

/* Botón "hamburguesa" para el menú móvil (oculto en escritorio) */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--raiz);
  border-radius: 2px;
}

/* --- Hero --- */
.hero { position: relative; overflow: hidden; }
/* Hero editorial sin foto: una sola columna, texto ancho con aire */
.hero__grid { display: block; }
.hero__copy {
  max-width: 960px;
  padding: 120px 24px 128px 132px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__title {
  font-weight: 500;
  /* Claim más largo: grande pero un punto más contenido para que respire */
  font-size: clamp(40px, 6.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--arena);           /* crema sobre el fondo oscuro */
  text-wrap: balance;
}
/* Punto final del titular en el acento (su tono claro para el fondo oscuro) */
/* El punto final del titular aparece con un pop sutil al cargar */
.hero__accent { color: var(--acento-dark); display: inline-block; transform-origin: bottom center; animation: dotPop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.65s both; }
/* Subrayado fino de acento que se dibuja bajo el titular al cargar */
.hero__title::after {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin-top: 28px;
  border-radius: 3px;
  background: var(--acento-dark);
  transform-origin: left center;
  animation: drawLine 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
}
@keyframes dotPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__sub { margin-top: 28px; font-size: 20px; line-height: 1.65; color: var(--raiz-texto); max-width: 46ch; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; }
.hero__media { position: relative; padding: 72px 48px 0 0; display: flex; align-items: flex-end; }
/* (Hero sin decoración: la metáfora vive en el copy, no en gráficos) */

/* Marco de imagen "placeholder" (se reemplaza por fotos reales) */
.photo {
  flex: 1;
  border: 1px solid var(--linea);
  border-radius: 16px;
  aspect-ratio: 4 / 5;
  overflow: hidden;                 /* recorta la imagen a las esquinas redondeadas */
  background: var(--arena-card);    /* crema cálido de respaldo mientras carga */
}
/* La foto real llena el recuadro recortando por el centro */
.photo picture { display: block; width: 100%; height: 100%; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo__note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--musgo);
  background: var(--arena);
  padding: 6px 10px;
  border: 1px dashed var(--linea);
  border-radius: 6px;
  text-align: center;
}
/* --- Sección: el problema --- */
.section { padding: 88px 0; }
.problema__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
.problema__list { display: flex; flex-direction: column; justify-content: center; }
.problema__item { display: flex; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--linea); }
.problema__item:last-child { border-bottom: none; }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; }
.dot--tierra { background: var(--acento); }
.dot--luz { background: var(--acento); }
.dot--savia { background: var(--acento); }
.problema__item h3 { font-weight: 600; font-size: 20px; color: var(--tinta); }
.problema__item p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--musgo); text-wrap: pretty; }
/* Mini-escena ilustrativa: recuadro sutil, en cursiva (no es un testimonio) */
.problema__example { max-width: 780px; margin: 56px 0 0; padding: 28px 32px; background: var(--arena-card); border: 1px solid var(--linea); border-left: 3px solid var(--acento); border-radius: 12px; }
.problema__example-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento); margin-bottom: 12px; }
.problema__example p { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--tinta); text-wrap: pretty; }

/* --- Sección: qué es Arraviva (frase grande centrada) --- */
.quote { padding: 96px 0; text-align: center; }
.quote__big {
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 5.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--arena);           /* crema bien legible sobre el fondo oscuro */
  max-width: 20ch;
  text-wrap: balance;
}
.quote__big em { font-style: italic; }
.quote__cols { display: flex; justify-content: center; gap: 56px; margin: 56px auto 0; max-width: 880px; }
.quote__col { flex: 1; text-align: left; padding-top: 22px; border-top: 2px solid var(--acento-dark); }
.quote__col h3 { font-weight: 600; font-size: 19px; color: var(--arena); }
.quote__col p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--raiz-texto); text-wrap: pretty; }

/* --- Sección: método (Raíz → Arraigar → Crecer) --- */
.metodo__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.metodo__head p { margin-bottom: 6px; font-size: 16px; line-height: 1.6; color: var(--musgo); max-width: 38ch; text-wrap: pretty; }
.metodo__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: end;
  margin-top: 64px;
  position: relative;
}
.step {
  position: relative;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 34px 30px 38px;
  box-shadow: 0 1px 2px rgba(23, 32, 27, 0.04), 0 12px 28px -16px rgba(23, 32, 27, 0.20);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Número gigante fantasma detrás de cada paso (profundidad editorial) */
.step__ghost {
  position: absolute;
  top: -18px;
  right: 10px;
  z-index: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 150px;
  line-height: 1;
  color: var(--raiz);
  opacity: 0.05;
  pointer-events: none;
}
/* El contenido real siempre por encima del número fantasma */
.step > *:not(.step__ghost) { position: relative; z-index: 1; }
/* Hover idéntico al de las tarjetas de Servicios */
.step:hover {
  border-color: var(--acento);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(23, 32, 27, 0.05), 0 20px 40px -18px rgba(23, 32, 27, 0.30);
}
/* Tarjetas del método alineadas (sin escalonado) */
.step--1 { margin-top: 0; }
.step--2 { margin-top: 0; }
.step__icon { display: block; margin-bottom: 16px; }
/* Número de paso: acento con presencia (más grande y en verde acento) */
.step__num { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--acento); }
.step__name { margin-top: 12px; font-weight: 600; font-size: 26px; color: var(--raiz); }
.step__tag { margin-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.step__tag--tierra { color: var(--acento); }
.step__tag--luz { color: var(--acento); }
.step__tag--savia { color: var(--acento); }
.step p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--musgo); text-wrap: pretty; }

/* --- Sección: servicios --- */
.servicios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.card {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 36px 34px;
  /* Sombra real: se despega del fondo con capas suaves */
  box-shadow: 0 1px 2px rgba(23, 32, 27, 0.04), 0 12px 28px -16px rgba(23, 32, 27, 0.20);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
/* Elevación al pasar el cursor: sube 3px + sombra más marcada */
.card:hover {
  border-color: var(--acento);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(23, 32, 27, 0.05), 0 20px 40px -18px rgba(23, 32, 27, 0.30);
}
.card h3 { margin-top: 22px; font-weight: 600; font-size: 23px; line-height: 1.25; color: var(--raiz); text-wrap: balance; }
.card p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--musgo); text-wrap: pretty; }
.card__tag { margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--musgo-suave); }

/* --- Sección: por qué Arraviva --- */
.porque__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
.porque__item { padding-top: 24px; border-top: 2px solid var(--linea); }
.porque__item--tierra { border-top-color: var(--linea); }
.porque__item--luz { border-top-color: var(--linea); }
.porque__item--savia { border-top-color: var(--linea); }
.porque__item h3 { font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--tinta); text-wrap: balance; }
.porque__item p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--musgo); text-wrap: pretty; }

/* Bloque de prueba social (placeholder hasta tener clientes reales) */
.social {
  margin-top: 72px;
  border: 1.5px dashed var(--linea);
  border-radius: 14px;
  padding: 40px;
  position: relative;
}
.social__label {
  position: absolute;
  top: -11px;
  left: 32px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--musgo);
  background: var(--arena);
  padding: 2px 10px;
}
.social__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; opacity: 0.6; }
.testimonial { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 26px; box-shadow: 0 1px 2px rgba(23, 32, 27, 0.04), 0 12px 28px -16px rgba(23, 32, 27, 0.20); }
.testimonial p { font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--musgo); }
.testimonial__author { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: repeating-linear-gradient(-45deg, #EFE9DC 0 6px, var(--arena) 6px 12px);
  border: 1px dashed var(--linea);
  flex: none;
}
.testimonial__author strong { font-size: 13.5px; font-weight: 600; color: var(--tinta); display: block; }
.testimonial__author span { font-size: 12.5px; color: var(--musgo-suave); }
.social__logos { display: flex; gap: 20px; margin-top: 24px; opacity: 0.6; }
.logo-slot {
  flex: 1; height: 44px; border-radius: 8px; border: 1px dashed var(--linea);
  background: repeating-linear-gradient(-45deg, #EFE9DC 0 8px, var(--arena) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--musgo-suave);
}

/* --- Sección: preguntas frecuentes (acordeón) --- */
.faq { max-width: 820px; margin: 48px 0 0; }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item:first-child { border-top: 1px solid var(--linea); }
/* El <h3> solo aporta semántica; el estilo vive en el botón */
.faq__q { margin: 0; font-size: inherit; font-weight: inherit; }
/* Pregunta: botón a todo el ancho, tipografía de título (Fraunces) */
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  color: var(--raiz);
  transition: color 0.2s ease;
}
.faq__btn:hover { color: var(--acento); }
/* Foco visible para navegación con teclado (accesibilidad) */
.faq__btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 4px; }
/* Flecha que gira al abrir */
.faq__icon { flex: none; transition: transform 0.35s ease; }
.faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
/* Panel de respuesta: cerrado por defecto, se despliega con altura animada */
.faq__panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.42s ease, opacity 0.32s ease;
}
.faq__panel.is-open { opacity: 1; }
.faq__panel p {
  padding: 0 40px 26px 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--musgo);
  max-width: 68ch;
  text-wrap: pretty;
}

/* --- Sección: historia (fondo raíz, oscura) --- */
.historia { background: var(--raiz); padding: 112px 0; position: relative; overflow: hidden; }
.historia__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.historia__title { font-weight: 600; font-size: clamp(36px, 5.2vw, 50px); line-height: 1.08; letter-spacing: -0.018em; color: var(--arena); text-wrap: balance; }
.historia .kicker { color: var(--acento-dark); }
.historia__title em { font-style: italic; color: var(--acento-dark); }
.historia__intro { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--raiz-texto2); }
.historia__body { margin-top: 36px; padding-left: 24px; border-left: 2px solid var(--acento-dark); }
.historia__body p { font-size: 16.5px; line-height: 1.75; color: var(--raiz-texto); text-wrap: pretty; }
.historia__body p + p { margin-top: 18px; }
.historia__author { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.historia__author .avatar { background: repeating-linear-gradient(-45deg, var(--raiz-trama) 0 6px, var(--raiz) 6px 12px); border-color: var(--acento-dark); width: 44px; height: 44px; }
.historia__author strong { font-size: 14px; font-weight: 600; color: var(--arena); display: block; }
.historia__author span { font-size: 13px; color: var(--raiz-texto2); }
.historia__photo {
  aspect-ratio: 4 / 5;                 /* recuadro vertical fijo */
  border-radius: 14px;
  border: 1px solid var(--raiz-borde);
  overflow: hidden;                    /* recorta la imagen a las esquinas */
  background: var(--raiz-trama);       /* respaldo sobrio mientras carga */
}
.historia__photo picture { display: block; width: 100%; height: 100%; }
.historia__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.historia__photo .photo__note { background: var(--raiz); color: var(--raiz-texto2); border-color: var(--raiz-borde); }

/* --- Sección: CTA final + formulario de contacto --- */
.cta { padding: 110px 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.cta__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(38px, 6.2vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--raiz);
  max-width: 16ch;
  text-wrap: balance;
}
.cta__sub { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--raiz-texto); max-width: 42ch; text-wrap: pretty; }
/* Pincelada del "después": línea corta y destacada sobre el formulario */
.contact__after { margin: 22px 0 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--acento-dark); max-width: 40ch; text-wrap: pretty; }
.contact__reassure { margin: 22px 0 0; font-size: 14px; font-weight: 600; color: var(--acento-dark); }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }

/* Formulario (estilo oscuro, minimal) */
.contact__form { display: flex; flex-direction: column; gap: 18px; }
.contact__hp { display: none; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--raiz-texto2); }
.field .req { color: var(--acento-dark); }
.field input,
.field textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--arena);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--raiz-borde);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--acento-dark);
  background: rgba(255, 255, 255, 0.07);
}
/* Casilla de consentimiento (obligatoria) */
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--raiz-texto2); cursor: pointer; }
.check input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--acento);
  cursor: pointer;
}
.check a { color: var(--raiz-texto); text-decoration: underline; }
.check a:hover { color: var(--arena); }
.contact__submit { align-self: flex-start; margin-top: 6px; font-size: 16px; padding: 16px 30px; }
/* WhatsApp como enlace de texto pequeño bajo el formulario (no botón) */
.contact__wa { margin: 4px 0 0; font-size: 13.5px; }
.contact__wa a { color: var(--raiz-texto2); font-weight: 600; }
.contact__wa a:hover { color: var(--arena); }
.contact__wa a:hover .arrow { transform: translateX(5px); }

/* Botones sobre secciones oscuras: claros (crema) para contraste */
.section--dark .btn--primary { background: var(--arena); color: var(--raiz); }
.section--dark .btn--primary:hover { background: var(--acento); color: var(--arena); }
.section--dark .btn--ghost { color: var(--raiz-texto); }
.section--dark .btn--ghost:hover { color: var(--arena); }

/* --- Footer --- */
.footer { border-top: 1px solid var(--linea); padding: 48px 0 40px; }
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__tagline { margin-top: 10px; font-size: 13.5px; color: var(--musgo); max-width: 30ch; }
.footer__nav { display: flex; gap: 32px; }
.footer__nav a { font-size: 13.5px; font-weight: 500; color: var(--tinta); }
.footer__nav a:hover { color: var(--acento); }
.footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.footer__social { font-size: 13.5px; font-weight: 500; color: var(--acento); }
.footer__social:hover { color: var(--raiz); }
.footer__legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linea); font-size: 12.5px; color: var(--musgo-suave); }
.footer__legal a { color: var(--musgo); text-decoration: underline; }
.footer__legal a:hover { color: var(--acento); }

/* --- Páginas legales (privacidad / aviso legal) --- */
.legal-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; border-bottom: 1px solid var(--linea);
  background: rgba(246, 241, 232, 0.9); backdrop-filter: saturate(140%) blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.legal-nav__right { display: flex; align-items: center; gap: 20px; }
.legal-back { font-size: 13.5px; font-weight: 600; color: var(--acento); }
.legal-back:hover { color: var(--raiz); }
.legal-main { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; }
.legal-doc h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.018em; color: var(--raiz); }
.legal-updated { margin-top: 10px; font-size: 13.5px; color: var(--musgo); }
.legal-doc h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--raiz); margin-top: 40px; }
.legal-doc p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--tinta); }
.legal-doc ul { margin-top: 14px; padding-left: 20px; }
.legal-doc li { margin-top: 6px; font-size: 15.5px; line-height: 1.7; color: var(--tinta); }
.legal-doc a { color: var(--acento); text-decoration: underline; }
.legal-note { margin: 28px 0 8px; padding: 16px 18px; border: 1px dashed var(--linea); border-radius: 10px; background: var(--arena-card); font-size: 13.5px; line-height: 1.6; color: var(--musgo); }

/* 5. RESPONSIVE ------------------------------------------------------------ */

/* Tablet: reducimos separaciones y algunos grids de 3 → ajustados */
@media (max-width: 1000px) {
  .hero__copy { padding: 72px 24px 56px; }
  .problema__grid { gap: 48px; }
  .quote__cols { gap: 32px; }
  .porque__grid { gap: 32px; }
  .historia__grid { gap: 48px; }
}

/* Móvil: todo pasa a una sola columna (mobile-first real) */
@media (max-width: 760px) {
  .section { padding: 64px 0; }

  /* Nav: ocultamos enlaces de escritorio y mostramos hamburguesa */
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  /* Menú desplegable cuando está abierto (lo activa script.js) */
  .nav__links.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background: var(--arena);
    border-bottom: 1px solid var(--linea);
    padding: 20px 24px 24px;
  }
  .nav__links.is-open .lang { border-left: none; padding-left: 0; }

  /* Hero apilado */
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 40px 20px 8px 24px; }
  .hero__sub { font-size: 15.5px; margin-top: 16px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { text-align: center; }

  /* Grids a una columna */
  .problema__grid,
  .metodo__head,
  .metodo__steps,
  .servicios__grid,
  .porque__grid,
  .historia__grid,
  .social__grid,
  .contact__grid,
  .quote__cols { grid-template-columns: 1fr; display: grid; }
  .contact__grid { gap: 40px; }
  .contact__actions { flex-direction: column; align-items: stretch; }
  .quote__cols,
  .metodo__head { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }

  /* CTA: menos aire arriba en móvil */
  .cta { padding: 72px 0; }

  /* FAQ: pregunta algo más compacta y respuesta a todo el ancho */
  .faq { margin-top: 36px; }
  .faq__btn { font-size: 17px; padding: 20px 0; gap: 16px; }
  .faq__panel p { padding: 0 0 22px; font-size: 15.5px; }

  .social__logos { flex-wrap: wrap; }
  .logo-slot { flex: 1 1 40%; }

  .footer__top { gap: 28px; }
  .footer__right { align-items: flex-start; }
}