/* ==========================================================================
   PideFácil — base compartida (Figma: Principal 1 IA)
   Tokens, reset, cabecera, hero genérico, FAQs, CTA final y footer.
   Cada página añade después su propia hoja (home.css, producto.css…).

   Escala: el diseño mide 1920px con un área de contenido de 1420px
   (x 250 → 1670). Todos los `clamp()` usan por eso `vw` referidos a 1420,
   de modo que a partir de ~1420px de viewport los valores quedan fijados
   exactamente en los px del Figma y por debajo escalan de forma proporcional.
   ========================================================================== */


:root {
  /* Tinta y acentos */
  --h-ink: #2c3d18;
  --h-ink-muted: rgba(44, 61, 24, 0.75);
  --h-accent: #98b06a;
  --h-lime: #98d86b;
  --h-btn: #b0c878;
  --h-btn-ink: #06400a;

  /* Fondos */
  --h-cream: #f3efe4;
  --h-band: #f4f0e6;
  --h-paper: #fcfbf6;
  --h-footer: #07420e;
  --h-footer-ink: #e1e8d4;
  --h-hairline: #d8d8d8;

  /* Gradiente Fondos */
  --h-grad-hero: linear-gradient(139.6deg, #2c3d18 0%, #4a5f2c 48%, #223111 100%);
  /* Cabecera: los mismos verdes del hero, pero recorridos casi en
     horizontal (la franja es ancha y baja, con 139.6deg apenas se vería
     una de las paradas) y con algo de transparencia para el desenfoque. */
  --h-grad-header: linear-gradient(100deg, rgba(44, 61, 24, 0.92) 0%, rgba(74, 95, 44, 0.92) 48%, rgba(34, 49, 17, 0.92) 100%);
  --h-grad-dark: linear-gradient(135deg, #003604 0%, #004707 48%, #002b04 100%);
  --h-grad-cta: linear-gradient(135deg, #014609 0%, #064b0e 42%, #0d4f14 100%);
  /* Fondo crema */
  --h-grad-cream: linear-gradient(180deg, rgba(252, 251, 246, 0.98) 0%, rgba(242, 240, 230, 0.98) 100%);
  --h-grad-band: linear-gradient(180deg, rgba(248, 244, 232, 0.98) 0%, rgba(238, 232, 214, 0.98) 100%);

  /* Sombra de tarjeta clara del Figma */
  --h-card-shadow: 0 5px 24.3px rgba(200, 181, 181, 0.25);

  /* Tipografías */
  --h-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --h-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --h-ui: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 1420px de contenido del Figma + 24px de padding a cada lado */
  --h-container: 1468px;

  /* Escalas tipográficas del diseño (96 / 64 / 48 / 36 / 24 / 20 px sobre 1420) */
  --fs-h1: clamp(2.5rem, 6.76vw, 6rem);
  --fs-h2: clamp(2rem, 4.5vw, 4rem);
  --fs-h3: clamp(1.35rem, 2.54vw, 2.25rem);
  --fs-h4: clamp(1.6rem, 3.38vw, 3rem);
  --fs-lg: clamp(1rem, 1.69vw, 1.5rem);
  --fs-md: clamp(0.95rem, 1.41vw, 1.25rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--h-body);
  font-weight: 300;
  color: var(--h-ink);
  background: var(--h-grad-cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }

.container {
  width: 100%;
  max-width: var(--h-container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Titulares -------------------------------------------------------------- */

.h-display {
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  letter-spacing: -0.01em;
  line-height: 0.906;
}

/* Subrayado tipo rotulador para destacar un trozo del titular (nació en
   Sobre nosotros): una franja verde que asoma bajo el texto. */
.h-display mark {
  padding: 0 0.12em;
  background: none;
  background-image: linear-gradient(180deg, rgba(152, 176, 106, 0) 58%, rgba(152, 176, 106, 0.55) 58%, rgba(152, 176, 106, 0.55) 94%, rgba(152, 176, 106, 0) 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit;
}

.h-eyebrow {
  font-family: var(--h-body);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--h-accent);
  text-transform: uppercase;
}

.h-lead {
  font-family: var(--h-body);
  font-weight: 300;
  font-size: var(--fs-md);
  color: var(--h-ink-muted);
}

/* Botones ---------------------------------------------------------------- */

.h-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--h-btn);
  color: var(--h-btn-ink);
  font-family: var(--h-ui);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  filter: drop-shadow(0 22px 27px rgba(152, 176, 106, 0.28));
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.h-btn:hover { transform: translateY(-1px); background: #bcd487; }

/* ======================================================================== */
/* Cabecera                                                                 */
/* ======================================================================== */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  /* En una variable porque el puente de hover del mega menú necesita saber
     cuánto mide este relleno para cubrirlo exactamente. */
  --hdr-pad: clamp(20px, 2.3vw, 33px);
  padding-block: var(--hdr-pad);
  /* Ya no hay `background-color` que animar: el fundido del fondo lo hace
     la opacidad de .hdr::before. */
  transition: transform 0.35s ease, padding-block 0.3s ease, box-shadow 0.3s ease;
}

/* Al hacer scroll hacia abajo se oculta; al subir, o cerca del principio
   de la página, vuelve a aparecer (fijada, con fondo sólido para que el
   texto siga siendo legible sobre cualquier contenido). Lo gestiona
   main.js alternando estas dos clases. */
.hdr.is-hidden { transform: translateY(-100%); }

/* El relleno de la cabecera va en una pseudo-capa y no en `background`
   porque los degradados son background-image y no admiten transición:
   así el fondo sigue entrando y saliendo con un fundido al hacer scroll
   o al abrir el mega menú. z-index negativo para quedar por detrás del
   logo, la navegación y el propio panel, pero dentro de la cabecera. */
.hdr::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--h-grad-header);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hdr.is-scrolled::before,
.hdr.is-mega-open::before { opacity: 1; }

.hdr.is-scrolled {
  --hdr-pad: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

/* Con el mega menú abierto la cabecera se rellena aunque estemos arriba
   del todo, para que el panel no flote sobre el hero y toda la franja
   superior se lea como una sola pieza (lo marca main.js con esta clase). */
.hdr.is-mega-open {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Con fondo sólido el texto es siempre claro, tanto en páginas de hero
   oscuro como en las de hero claro (.is-light); de ahí la combinación
   .is-scrolled.is-light con más especificidad para ganarle a esa regla
   (vive en casos.css/legal.css, cargadas después de base.css). */
.hdr.is-scrolled .main-nav > ul a,
.hdr.is-scrolled.is-light .main-nav > ul a,
.hdr.is-mega-open .main-nav > ul a,
.hdr.is-mega-open.is-light .main-nav > ul a { color: #fff; }
.hdr.is-scrolled .nav-toggle,
.hdr.is-scrolled.is-light .nav-toggle,
.hdr.is-mega-open .nav-toggle,
.hdr.is-mega-open.is-light .nav-toggle { background: rgba(255, 255, 255, 0.12); }
.hdr.is-scrolled .nav-toggle span,
.hdr.is-scrolled.is-light .nav-toggle span,
.hdr.is-mega-open .nav-toggle span,
.hdr.is-mega-open.is-light .nav-toggle span { background: #fff; }

/* Sin `position: relative` a propósito (solo se le pone en móvil, para el
   cajón del menú): así el mega menú se ancla a .hdr y ocupa todo el ancho
   de la ventana, no el del contenedor centrado. */
.hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Sin encoger: el logo es un <img> con `max-width: 100%`, de modo que si
   el flex de la cabecera le quita ancho no empuja al menú, se aplasta. */
.hdr-logo { flex: 0 0 auto; }
.hdr-logo img { width: clamp(140px, 13.4vw, 190px); height: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 30px;
}

.main-nav a {
  font-family: var(--h-ui);
  font-weight: 500;
  font-size: 14.4px;
  color: #fff;
  opacity: 0.86;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.main-nav a:hover { opacity: 1; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(152, 216, 107, 0.56);
  border-radius: 999px;
  background-image:
    linear-gradient(134.6deg, rgba(152, 216, 107, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%),
    linear-gradient(134.6deg, #003604 0%, #004707 48%, #002b04 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), 0 0 24px rgba(152, 216, 107, 0.2);
}

/* Acceso a la plataforma: mismo formato de píldora que el CTA pero solo
   con contorno blanco, sin relleno, para que no compita con él. */
.nav-login {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.nav-login:hover { opacity: 1; border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* En páginas de hero claro (.is-light, en casos.css/legal.css) el contorno
   blanco desaparecería contra el fondo: pasa a tinta mientras la cabecera
   está transparente, y vuelve a blanco cuando se rellena de verde
   (scroll o mega menú abierto), igual que el resto de enlaces. */
.hdr.is-light .nav-login { border-color: rgba(44, 61, 24, 0.45); color: var(--h-ink); }
.hdr.is-scrolled .nav-login,
.hdr.is-scrolled.is-light .nav-login,
.hdr.is-mega-open .nav-login,
.hdr.is-mega-open.is-light .nav-login { border-color: rgba(255, 255, 255, 0.55); color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

/* ======================================================================== */
/* Menú desplegable al pasar el ratón (Producto, Recursos)                  */
/* ======================================================================== */

/* Los <li> quedan `static` a propósito: así el mega menú se posiciona
   respecto a la propia cabecera (que es fixed) y ocupa exactamente su
   ancho, en lugar de quedar centrado sobre el enlace de turno. */
.main-nav > ul > li { position: static; }

.has-mega > a { position: relative; display: inline-flex; align-items: center; gap: 6px; }

/* Puente invisible entre el enlace y el panel. El panel arranca en el
   borde inferior de la cabecera, pero el <li> acaba antes (donde acaba el
   texto), así que el `padding-bottom` de la cabecera es tierra de nadie:
   al bajar el ratón en línea recta se salía del :hover y el menú se
   cerraba. Este pseudo-elemento cubre esa franja, y como el panel va
   después en el DOM se pinta por encima y no le roba ni un clic. */
.has-mega > a::before {
  content: '';
  position: absolute;
  top: 100%;
  /* Sin margen lateral: si se ensancha más que el propio enlace invade el
     hueco hacia el elemento vecino del menú (con solo 30px de gap entre
     enlaces, 32px de más bastaban para que al salir de un elemento se
     tocara el de al lado y su mega menú se abriera solo). */
  left: 0;
  right: 0;
  /* El hueco es el relleno inferior de la cabecera más los ~10px que hay
     entre la base del texto del enlace y la base de la fila (que la marca
     el botón del CTA, más alto). Ni un píxel más: si sobresaliera por
     debajo de la cabecera, el menú se abriría al pasar por el hero. */
  height: calc(var(--hdr-pad) + 10px);
}

.has-mega > a::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: 2px;
  opacity: 0.75;
  transition: transform 0.2s ease;
}

.has-mega:hover > a::after,
.has-mega:focus-within > a::after { transform: rotate(225deg); margin-bottom: -2px; }

.mega-menu {
  /* Anclado a la cabecera (position: fixed), no al <li>: de ahí que ocupe
     todo el ancho con left/right:0 y arranque justo en el borde inferior
     de la cabecera (top:100%). Sin hueco entre cabecera y panel, que es
     lo que rompía el hover al bajar el ratón en línea recta. */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform: translateY(4px);
  border-top: 1px solid var(--h-hairline);
  background: var(--h-paper);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Segundo puente, este de ancho completo y solo mientras el panel está
   abierto. El de `a::before` mide lo que mide el enlace (110 px), pero el
   panel ocupa toda la cabecera (1265 px): al bajar en diagonal hacia un
   elemento de la derecha se salía de esos 110 px antes de llegar al panel,
   se perdía el :hover y el menú se cerraba a medio camino. Esta franja
   cubre la tierra de nadie de lado a lado.

   Va colgado del propio panel a propósito: hereda su `visibility: hidden` y
   su `pointer-events: none`, así que con el menú cerrado no existe. Si esta
   franja estuviera siempre activa, pasar el ratón por debajo de la cabecera
   abriría el menú solo. Y como es descendiente del <li>, tocarla mantiene
   el :hover que sostiene el panel. */
.mega-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  /* La misma altura que el puente estrecho: hasta la base de la fila de
     enlaces, sin llegar a taparlos (ni al botón del CTA, que es más alto). */
  height: calc(var(--hdr-pad) + 10px);
}

.has-mega:hover > .mega-menu,
.has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-menu-inner {
  width: 100%;
  max-width: var(--h-container);
  margin-inline: auto;
  padding: clamp(32px, 3.4vw, 48px) 24px;
}

/* Etiqueta de categoría grande a la izquierda + elementos en fila a la
   derecha, como en choco.com (Pedidos / Ventas, cada una con su fila). */
.mega-group {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

/* Los dos paneles reparten su contenido en dos grupos separados por una
   línea: arriba la vista de conjunto (y lo transversal) y abajo la familia
   —los tres agentes, los tres casos—. En una sola fila no se veía que unos
   elementos van juntos y los otros no. */
.mega-group + .mega-group {
  margin-top: clamp(24px, 2.4vw, 34px);
  padding-top: clamp(24px, 2.4vw, 34px);
  border-top: 1px solid var(--h-hairline);
}

.mega-group-label b {
  display: block;
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 32, 'wdth' 100;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--h-ink);
}

.mega-group-label span {
  display: block;
  margin-top: 8px;
  font-family: var(--h-body);
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--h-ink-muted);
  white-space: normal;
}

/* El margen negativo compensa el padding interno de cada .mega-item, de
   modo que los iconos siguen alineados con el borde del contenedor aunque
   ahora cada fila tenga su propia caja de hover. */
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: -12px;
}

/* Tres columnas para todos los grupos de los dos paneles: así las tarjetas
   caen en la misma retícula aunque un grupo tenga uno o dos elementos y el
   de debajo, tres. */
.mega-menu-grid.is-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Prefijado con .mega-menu para ganarle en especificidad a `.main-nav a`
   (opacity 0.86 + transition de opacidad), que si no deja las filas del
   panel medio apagadas y se come la transición del hover. */
.mega-menu .mega-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px;
  border-radius: 18px;
  color: var(--h-ink);
  opacity: 1;
  transition: background-color 0.15s ease;
}

/* Realce de la fila entera al pasar por encima: deja claro que todo el
   bloque (icono + título + descripción) es un único enlace clicable. */
.mega-menu .mega-item:hover,
.mega-menu .mega-item:focus-visible { background: var(--h-cream); }

/* Marcador cuadrado, color crema, a la espera de la ilustración final. */
.mega-icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--h-cream);
  transition: background-color 0.15s ease;
}
.mega-item:hover .mega-icon,
.mega-item:focus-visible .mega-icon { background: #fff; }
/* Los SVG del catálogo llevan preserveAspectRatio="none", así que si se les
   da una caja cuadrada se estiran para llenarla: los que no son cuadrados
   (la marca de comillas, el icono de ventas) salían deformados. Con
   object-fit cada uno conserva su proporción dentro del mismo hueco. */
.mega-icon img { width: 46%; height: 46%; object-fit: contain; }

/* .main-nav a hereda white-space:nowrap para los enlaces cortos del menú;
   hay que romperlo aquí explícitamente o el título y la descripción de
   cada elemento no hacen salto de línea y se salen de su columna. */
.mega-copy { min-width: 0; flex: 1 1 auto; white-space: normal; }

.mega-copy b {
  display: block;
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--h-ink);
  white-space: normal;
}

.mega-copy span {
  display: block;
  margin-top: 5px;
  font-family: var(--h-body);
  font-weight: 300;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--h-ink-muted);
  white-space: normal;
}

.mega-menu-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--h-hairline); }

.mega-menu-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--h-ui);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--h-ink);
  opacity: 1;
}
.mega-menu-footer a:hover { opacity: 0.7; }

/* ======================================================================== */
/* Hero (fondo y medidas los define cada página)                            */
/* ======================================================================== */

.hero {
  position: relative;
  background-color: #2c3d18;
  overflow: hidden;
}

.hero .container { position: relative; }

.hero-copy { max-width: 802px; }

.hero h1 {
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: var(--fs-h1);
  line-height: 0.854;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0.331px 0 0 #2c3d18;
}

.hero-sub {
  max-width: 718px;
  margin-top: clamp(0.75rem, 1.4vw, 1.25rem);
  font-size: var(--fs-lg);
  font-weight: 300;
  color: var(--h-footer-ink);
  text-shadow: 0.331px 0 0 #2c3d18;
}
.hero-sub strong { font-weight: 500; }

/* --- Collage de fotos del hero -------------------------------------------
   Patrón nacido en Sobre nosotros y compartido por el resto de páginas
   interiores: dos fotos apiladas con leve giro, como pegadas en un corcho.
   Cada página solo aporta el HTML (.hero-grid en el container + .hero-fotos
   con sus dos figuras); medidas y animación viven aquí. */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 760fr) minmax(0, 520fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 70px);
}

.hero-fotos {
  position: relative;
  aspect-ratio: 5 / 4;
}

.hero-foto {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 6px solid rgba(252, 251, 246, 0.92);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-foto.is-a {
  inset: 0 22% 12% 0;
  transform: rotate(-3deg);
}

.hero-foto.is-b {
  right: 0;
  bottom: 0;
  width: 52%;
  height: 56%;
  transform: rotate(4deg);
}

/* Entrada: cada foto cae y se asienta en su giro definitivo, escalonadas.
   El disparo lo da el reveal de main.js sobre .hero-fotos (.is-revealed);
   los selectores llevan .hero-fotos delante para ganar en especificidad a
   las copias históricas de nosotros.css. */
@media (prefers-reduced-motion: no-preference) {
  .hero-fotos .hero-foto {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero-fotos .hero-foto.is-a { transform: translateY(30px) rotate(-8deg); }

  .hero-fotos .hero-foto.is-b {
    transform: translateY(38px) rotate(11deg);
    transition-delay: 0.15s;
  }

  .hero-fotos.is-revealed .hero-foto { opacity: 1; }
  .hero-fotos.is-revealed .hero-foto.is-a { transform: rotate(-3deg); }
  .hero-fotos.is-revealed .hero-foto.is-b { transform: rotate(4deg); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }

  /* Una sola foto a lo ancho: el collage de dos se queda para escritorio. */
  .hero-fotos { max-width: 460px; aspect-ratio: 16 / 10; }
  .hero-fotos .hero-foto.is-a { inset: 0; }
  .hero-fotos .hero-foto.is-b { display: none; }
}

/* ======================================================================== */
/* FAQs                                                                     */
/* ======================================================================== */

.faqs { padding-block: clamp(3.5rem, 12vw, 171px) clamp(3.5rem, 12.5vw, 178px); }

.faqs .container {
  display: grid;
  grid-template-columns: minmax(0, 430fr) minmax(0, 976fr);
  gap: clamp(1.5rem, 3vw, 43px);
}

.faqs h2 {
  font-size: var(--fs-h2);
  color: var(--h-ink);
  text-shadow: 0.331px 0 0 #2c3d18;
}

.faq-item { border-bottom: 1px solid rgba(44, 61, 24, 0.14); }

.faq-question {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: var(--fs-lg);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--h-ink);
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease;
}

.faq-question::before {
  content: '+';
  flex: 0 0 auto;
  width: 18px;
}

.faq-item.is-open .faq-question { color: var(--h-accent); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

/* Fallback sin JS: main.js sobrescribe este max-height en línea al cargar. */
.faq-item.is-open .faq-answer { max-height: 30rem; }

.faq-answer-inner {
  padding: 0 0 24px 42px;
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--h-ink-muted);
  text-shadow: 0.331px 0 0 #2c3d18;
}

/* ======================================================================== */
/* Banda "Distribuidoras que ya han dado el paso" (Home e Integraciones)    */
/* ======================================================================== */

.clientes {
  padding-block: clamp(2.5rem, 6.16vw, 87px);
  background-color: #f3ecd9;
  background-image:
    radial-gradient(1614px 1062px at 18% 18%, rgba(255, 221, 154, 0.24) 0%, rgba(255, 221, 154, 0) 10%),
    radial-gradient(1602px 1054px at 82% 68%, rgba(223, 255, 122, 0.16) 0%, rgba(223, 255, 122, 0) 11%),
    var(--h-grad-band);
}

.clientes .container {
  display: grid;
  grid-template-columns: minmax(0, 320fr) minmax(0, 1013fr);
  align-items: center;
  gap: clamp(1.5rem, 6.5vw, 92px);
}

.clientes h2 {
  font-size: var(--fs-h3);
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  line-height: 1.083;
  color: var(--h-ink);
  text-transform: uppercase;
}

.logos-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.logos-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: logos-scroll 34s linear infinite;
}

.logos-mask:hover .logos-track { animation-play-state: paused; }

@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-5 * (220px + 16px))); }
}

.logo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 220px;
  width: 220px;
  min-height: 110px;
  padding: 24px;
  border: 1px solid rgba(44, 61, 24, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 40px rgba(44, 61, 24, 0.08);
}

.logo-card img {
  width: 100%;
  max-width: 170px;
  max-height: 60px;
  height: auto;
  object-fit: contain;
  /* Apagados en blanco y negro; recuperan el color al pasar el ratón.
     Funciona porque el hover sobre la banda pausa el desplazamiento. */
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-card:hover img {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}

/* En pantallas estrechas main.js activa .is-swipe: el avance pasa de la
   animación CSS (que mueve el track con transform y no se puede arrastrar)
   a scroll nativo del propio mask, movido por rAF y por el dedo. */
.logos-mask.is-swipe {
  overflow-x: auto;
  scrollbar-width: none;
}
.logos-mask.is-swipe::-webkit-scrollbar { display: none; }
.logos-mask.is-swipe .logos-track { animation: none; }

@media (max-width: 900px) {
  .logo-card {
    flex: 0 0 148px;
    width: 148px;
    min-height: 76px;
    padding: 14px 16px;
    border-radius: 14px;
  }

  .logo-card img {
    max-width: 116px;
    max-height: 42px;
  }
}

/* ======================================================================== */
/* Tarjeta con icono en círculo (Agente, Planes e Integraciones)            */
/* ======================================================================== */

.funcion {
  padding: 28px;
  border: 1px solid var(--h-hairline);
  border-radius: 26px;
  background: var(--h-paper);
  box-shadow: var(--h-card-shadow);
}

.funcion-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #3b4e23;
}

.funcion-icon img { width: 30px; height: 30px; }

.funcion h3 {
  margin-top: 20px;
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  font-size: clamp(1.05rem, 1.69vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--h-ink);
}

.funcion p {
  margin-top: 8px;
  font-size: clamp(0.9rem, 1.27vw, 1.125rem);
  font-weight: 300;
  color: var(--h-ink-muted);
  text-shadow: 0.331px 0 0 #2c3d18;
}

/* ======================================================================== */
/* Trío de agentes con foto                                                 */
/* Hoy no lo usa ninguna vista: la sección que lo montaba en Producto se     */
/* quitó y sus enlaces «Ver agente» se mudaron dentro de cada panel de «La   */
/* respuesta». Se conserva porque es un componente cerrado y reutilizable;   */
/* cada página que lo monte define el padding y el margen de la retícula.    */
/* ======================================================================== */

.agentes-3 {
  --col-gap: clamp(1.5rem, 9vw, 128px);
  text-align: center;
}

.agentes-3 h2 {
  max-width: 844px;
  margin: 0.2em auto 0;
  font-size: var(--fs-h2);
  color: var(--h-ink);
  text-shadow: 0.331px 0 0 #2c3d18;
}

.agentes-3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 3rem;
}

.agente-3 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Separador vertical del Figma (línea #939393 al 72%), centrado en el hueco. */
.agente-3 + .agente-3::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-0.5 * var(--col-gap));
  border-left: 1px solid rgba(147, 147, 147, 0.72);
}

.agente-3 img {
  width: 100%;
  aspect-ratio: 387 / 204;
  object-fit: cover;
  border: 1px solid #adc27b;
  border-radius: 18px;
}

.agente-3.is-ventas img,
.agente-3.is-cobros img { object-position: center bottom; }

.agente-3 h3 {
  margin-top: clamp(1.25rem, 2vw, 28px);
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(1.05rem, 1.69vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--h-ink);
}

.agente-3 p {
  margin-top: 8px;
  margin-bottom: clamp(1.25rem, 2.2vw, 32px);
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--h-ink-muted);
  text-shadow: 0.331px 0 0 #2c3d18;
}

/* Los tres botones quedan alineados aunque los textos midan distinto. */
.agente-3 .h-btn { margin-top: auto; }

/* ======================================================================== */
/* Racimo de logos de ERP (Home y Planes)                                   */
/* ======================================================================== */

.erp-cluster {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 520 / 188;
}

.erp-card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid rgba(152, 176, 106, 0.28);
  border-radius: 8px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 247, 234, 0.95) 100%);
  box-shadow: 0 14px 32px rgba(44, 61, 24, 0.1);
}

.erp-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Pie del racimo. Vive aquí, con el componente, porque lo usan la Home y
   Planes. */
.erp-claim {
  margin-top: clamp(1rem, 1.8vw, 26px);
  text-align: center;
  font-family: var(--h-display);
  font-weight: 700;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: -0.02em;
  color: var(--h-ink);
}

/* Posiciones del racimo: tres arriba, dos abajo (el c4 es el ancho). */
.erp-c1 { left: 4.84%;  top: 0;      width: 28.85%; height: 35.11%; }
.erp-c2 { left: 35.61%; top: 0;      width: 28.85%; height: 35.11%; }
.erp-c3 { left: 66.38%; top: 0;      width: 28.85%; height: 35.49%; }
.erp-c4 { left: 15.61%; top: 40.43%; width: 38.08%; height: 59.57%; padding: 14px 22px 12px; }
.erp-c5 { left: 55.61%; top: 40.43%; width: 28.85%; height: 35.11%; }

/* ======================================================================== */
/* Banda de logos de ERP en marquee (Producto y Agente)                     */
/* Cada página define el padding y el fondo de su sección.                  */
/* ======================================================================== */

.erps-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.erps h2 {
  max-width: 616px;
  margin-top: 0.1em;
  font-size: var(--fs-h2);
  color: var(--h-ink);
  text-shadow: 0.331px 0 0 #2c3d18;
}

.erps-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}

.erps-track {
  display: flex;
  width: max-content;
  gap: 15px;
  animation: erps-scroll 30s linear infinite;
}

.erps-mask:hover .erps-track { animation-play-state: paused; }

@keyframes erps-scroll {
  from { transform: translateX(0); }
  /* El -16 es el número de logos únicos del carrusel (los ERP ya
     integrados); tras ellos va una copia oculta para el bucle. */
  to   { transform: translateX(calc(-16 * (190px + 15px))); }
}

.erp-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 190px;
  width: 190px;
  height: 108px;
  padding: 14px 22px 12px;
  border: 1px solid rgba(152, 176, 106, 0.28);
  border-radius: 8px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 247, 234, 0.95) 100%);
  box-shadow: 0 14px 32px rgba(44, 61, 24, 0.1);
}

.erp-logo img {
  /* Tamaño de caja fijo y contain: los SVG declaran tamaños intrínsecos
     dispares (Velneo, 96×25) y sin esto unos salen enanos y otros no. */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .erps-track { animation: none; }
}

/* Mismo tratamiento que la banda de distribuidoras: en pantallas estrechas
   main.js activa .is-swipe y el avance pasa a scroll nativo arrastrable. */
.erps-mask.is-swipe {
  overflow-x: auto;
  scrollbar-width: none;
}
.erps-mask.is-swipe::-webkit-scrollbar { display: none; }
.erps-mask.is-swipe .erps-track { animation: none; }

@media (max-width: 900px) {
  .erp-logo {
    flex: 0 0 150px;
    width: 150px;
    height: 86px;
    padding: 12px 16px;
  }

  .erp-logo img {
    max-width: 120px;
    max-height: 64px;
  }
}

/* ======================================================================== */
/* CTA final                                                                */
/* ======================================================================== */

.cta-final {
  padding: clamp(2.5rem, 3.66vw, 52px) clamp(1rem, 4.5vw, 64px);
  background-color: #014609;
  background-image:
    radial-gradient(1573px 1574px at 78% 24%, rgba(152, 176, 106, 0.18) 0%, rgba(152, 176, 106, 0) 15%),
    var(--h-grad-cta);
}

.cta-final-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: clamp(3rem, 5.9vw, 84px) clamp(1.5rem, 4.4vw, 62px);
  border-radius: 18px;
}

.cta-final h2 {
  max-width: 980px;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  font-size: clamp(1.85rem, 4.39vw, 3.9rem);
  line-height: 1.08;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

/* ======================================================================== */
/* Footer                                                                   */
/* ======================================================================== */

.site-footer {
  background: var(--h-footer);
  color: var(--h-footer-ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 308fr) repeat(4, minmax(0, 288fr));
  gap: clamp(1.5rem, 2vw, 2rem);
  padding-block: clamp(2.5rem, 4.2vw, 60px);
}

.footer-brand img {
  width: 152px;
  height: 107px;
  object-fit: cover;
}

.footer-brand p {
  max-width: 248px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.16px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(225, 232, 212, 0.12);
  color: var(--h-footer-ink);
  transition: background 0.2s ease;
}

.footer-social a:hover {
  background: rgba(225, 232, 212, 0.26);
}

.footer-social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-col h3 {
  margin-bottom: 22px;
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  font-size: 16px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
}

.footer-col li + li { margin-top: 14px; }

.footer-col a {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.16px;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
.footer-col a:hover { opacity: 1; text-decoration: underline; }

.footer-bottom {
  padding-block: 18px 24px;
  border-top: 1px solid rgba(225, 232, 212, 0.18);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.13px;
  text-align: center;
}

/* ======================================================================== */
/* Responsive compartido                                                    */
/* ======================================================================== */

/* Entre el cajón móvil (900px) y ~1080px la barra va justa: con «La
   herramienta» y los dos botones no caben los 30px de separación, y el flex
   acababa comiéndose el logo (es un <img> con max-width:100%, así que
   encoge en lugar de empujar). Se aprietan separaciones y botones; el
   ancho del logo lo garantiza el `flex: 0 0 auto` de .hdr-logo. */
@media (min-width: 901px) and (max-width: 1080px) {
  .hdr-inner { gap: 20px; }
  .main-nav,
  .main-nav > ul { gap: 18px; }
  .nav-cta,
  .nav-login { padding-inline: 14px; }
}

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* ---------------------------------------------------------------- */
  /* Cajón móvil: panel claro, plegable, a pantalla completa           */
  /*                                                                   */
  /* Mismos colores que el mega menú de escritorio (papel + tinta), no */
  /* los verdes de la franja: al abrirlo, cabecera y panel forman una  */
  /* sola superficie clara con el logo arriba a la izquierda y el aspa */
  /* a la derecha.                                                     */
  /* ---------------------------------------------------------------- */

  .hdr.is-nav-open::before {
    opacity: 1;
    background-image: none;
    background-color: var(--h-paper);
  }

  /* Sobre el panel claro todo va en tinta. Hay que ganarle a las reglas
     de más arriba (.is-scrolled) y a las de casos.css/legal.css
     (.is-light), que fuerzan blanco o tinta según el hero; de ahí las
     combinaciones con más clases. */
  .hdr.is-nav-open .main-nav > ul a,
  .hdr.is-nav-open.is-scrolled .main-nav > ul a,
  .hdr.is-nav-open.is-light .main-nav > ul a { color: var(--h-ink); }

  /* La hamburguesa se convierte en aspa dentro de un círculo crema,
     como en las referencias. */
  .nav-toggle span { transition: transform 0.2s ease, opacity 0.2s ease; }

  .hdr.is-nav-open .nav-toggle,
  .hdr.is-nav-open.is-scrolled .nav-toggle,
  .hdr.is-nav-open.is-light .nav-toggle {
    border-radius: 999px;
    background: var(--h-cream);
  }
  .hdr.is-nav-open .nav-toggle span,
  .hdr.is-nav-open.is-scrolled .nav-toggle span,
  .hdr.is-nav-open.is-light .nav-toggle span { background: var(--h-ink); }

  /* Las barras miden 2px con 5px de separación: 7px hasta el centro. */
  .hdr.is-nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr.is-nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .hdr.is-nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* El panel cuelga del borde inferior de la cabecera (anclado a .hdr,
     que es fixed) y llega hasta abajo de la pantalla, a ancho completo y
     con las esquinas rectas: una pieza con la cabecera, no una tarjeta
     flotante encima del hero. */
  .main-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 28px;
    border: 0;
    border-radius: 0;
    background: var(--h-paper);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    display: none;
    /* Con una sección desplegada el contenido no cabe en una pantalla de
       812px, y al ser hijo de una cabecera `fixed` no se desplaza con la
       página: sin esto el CTA del final queda fuera y no hay manera de
       llegar a él. El 100% es el alto de la cabecera. */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.is-open { display: flex; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }

  /* Cada apartado es una fila con su línea de separación. */
  .main-nav > ul > li { border-bottom: 1px solid var(--h-hairline); }

  .main-nav > ul a { display: block; font-size: 1rem; }

  .main-nav > ul > li > a {
    display: flex;
    align-items: center;
    padding: 18px 0;
    font-family: var(--h-ui);
    font-weight: 600;
    font-size: 1.05rem;
    transition: opacity 0.15s ease;
  }
  .main-nav > ul > li > a:active { opacity: 0.5; }

  /* El signo de desplegar se va al extremo derecho de la fila. */
  .has-mega > a::after {
    display: block;
    width: 8px;
    height: 8px;
    border-width: 2px;
    margin-left: auto;
    margin-bottom: 3px;
    opacity: 0.55;
    transition: transform 0.28s ease, margin-bottom 0.28s ease;
  }

  /* En táctil el :hover se queda pegado tras el toque, así que aquí manda
     la clase .is-open que pone main.js, no el hover. */
  .has-mega:hover > a::after,
  .has-mega:focus-within > a::after { transform: rotate(45deg); margin-bottom: 3px; }
  .has-mega.is-open > a::after,
  .has-mega.is-open:hover > a::after { transform: rotate(225deg); margin-bottom: -4px; }

  /* Los dos puentes de hover no pintan nada aquí y taparían la primera fila
     (el del panel, además, con el menú desplegado y a todo lo ancho). */
  .has-mega > a::before,
  .mega-menu::before { display: none; }

  /* Plegado de partida: cada sección se abre al tocar su fila, desplegando
     la altura en lugar de aparecer de golpe. El `max-height` en píxeles lo
     pone main.js midiendo el contenido, igual que las FAQ: no se puede
     animar hacia `auto`. */
  .mega-menu {
    position: static;
    display: block;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    width: auto;
    border: 0;
    background: none;
    box-shadow: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.32s ease, opacity 0.28s ease;
  }
  .has-mega.is-open > .mega-menu { opacity: 1; }

  .mega-menu-inner { max-width: none; margin: 0; padding: 0 0 14px; }

  .mega-group { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mega-group-label { display: none; }

  /* La etiqueta del primer grupo repetiría el nombre de la fila que acabas
     de tocar («Producto» dentro de «Producto»). La de los grupos siguientes
     sí aporta —marca dónde empiezan los agentes—, pero en versión compacta:
     aquí no hay dos columnas donde lucir el titular grande. */
  .mega-group + .mega-group { margin-top: 16px; padding-top: 16px; }

  .mega-group + .mega-group > .mega-group-label { display: block; padding: 0 10px 8px; }
  .mega-group + .mega-group > .mega-group-label b {
    font-family: var(--h-ui);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--h-ink-muted);
  }
  .mega-group + .mega-group > .mega-group-label span { display: none; }

  /* Una tarjeta por fila, como en las referencias. */
  .mega-menu-grid,
  .mega-menu-grid.is-trio {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    gap: 2px;
    margin: -10px;
  }

  .mega-menu .mega-item { gap: 14px; padding: 10px; border-radius: 14px; }
  .mega-menu .mega-item:hover { background: none; }
  .mega-menu .mega-item:active { background: var(--h-cream); }
  .mega-icon { width: 46px; height: 46px; }

  .mega-menu-footer { margin-top: 8px; padding-top: 14px; }
  .mega-menu-footer a:active { opacity: 0.5; }

  .nav-cta { justify-content: center; margin-top: 22px; }

  /* El cajón siempre es claro, así que el contorno y el texto van en tinta
     pase lo que pase con .is-scrolled/.is-light; de ahí las combinaciones,
     para ganarles en especificidad a las reglas de escritorio. */
  .nav-login,
  .hdr .nav-login,
  .hdr.is-light .nav-login,
  .hdr.is-scrolled .nav-login,
  .hdr.is-scrolled.is-light .nav-login {
    justify-content: center;
    margin-top: 12px;
    border-color: rgba(44, 61, 24, 0.45);
    color: var(--h-ink);
  }

  .faqs .container { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  /* En columna única el pie va centrado entero: marca, redes y columnas. */
  .footer-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .footer-brand img { margin-inline: auto; }
  .footer-brand p { margin-inline: auto; }
  .footer-social { justify-content: center; }

  .faq-question { gap: 14px; }
  .faq-answer-inner { padding-left: 32px; }
}

/* ======================================================================== */
/* Aire vertical en móvil                                                   */
/*                                                                          */
/* Los clamp() de escritorio tocan suelo en torno a 2.5-3.5rem y las        */
/* secciones quedaban pegadas. Se sube el colchón de toda sección que no    */
/* sea el hero (nth-child(n+2) salta al primer hijo de main, que gestiona   */
/* su propio hueco bajo la cabecera fija). El nth-child también aporta la   */
/* especificidad (0,1,2) necesaria para ganar a los clamp() de clase de     */
/* cada página; un ajuste puntual por página necesita superarla.            */
/* ======================================================================== */

@media (max-width: 700px) {
  main > section:nth-child(n+2),
  main > article:nth-child(n+2) {
    padding-block: 4.5rem;
  }
}

/* ======================================================================== */
/* Aparición al hacer scroll                                                */
/*                                                                          */
/* Cada bloque entra una sola vez; después no vuelve a animarse (main.js    */
/* deja de observarlo). La lista de selectores está repetida en main.js:    */
/* si tocas una, toca la otra.                                              */
/*                                                                          */
/* .cifras-grid se revela entera en vez de tarjeta a tarjeta: .cifra ya     */
/* tiene animación (el brillo) y transición (el hover) propias, y la del    */
/* reveal se las pisaría.                                                   */
/* ======================================================================== */

@media (prefers-reduced-motion: no-preference) {
  main :is(section, article) > .container > *:not(.panel, .ayuda-body, .problema-list, .funciones-grid, .incluye-grid, .agentes-3-grid, .principio-grid, .reparto-grid, .steps, .fases, .faq-list),
  main :is(section, article) > .agentes-media,
  main :is(section, article) > .cta-final-inner,
  .problema-list > *,
  .funciones-grid > *,
  .incluye-grid > *,
  .agentes-3-grid > *,
  .principio-grid > *,
  .reparto-grid > *,
  .como .steps > *,
  .fases > *,
  .faq-list > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Lleva !important porque la lista de arriba es mucho más específica. */
  .is-revealed {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------------------ */
/* Botón que baja en móvil                                                  */
/*                                                                          */
/* En las secciones con texto, imagen o animación y botón, el botón va en   */
/* móvil debajo del visual, al final de la sección. Como el original vive   */
/* dentro del bloque de texto, la vista lo pinta dos veces: el de siempre   */
/* lleva .is-solo-escritorio y el duplicado, colgado del contenedor de la   */
/* sección, lleva .is-solo-movil y se manda al final con order (todos       */
/* estos contenedores son grid también en columna).                         */
/* ------------------------------------------------------------------------ */
/* Con !important a propósito: son utilidades de visibilidad y las hojas de
   página (que cargan después) no deben poder reactivarlas con su display. */
.is-solo-movil { display: none !important; }

/* ------------------------------------------------------------------------ */
/* Alineación en móvil (referencia: la versión móvil de choco.com)          */
/*                                                                          */
/* Regla por tipo de elemento: heros, cabeceras de sección (sobretítulo,    */
/* título y entradilla) y cifras van centrados; el contenido — prosa,       */
/* tarjetas, listas, formularios y páginas-documento — sigue a la           */
/* izquierda mediante las excepciones del final. Las cifras se centran en   */
/* la hoja de cada página, que es donde viven sus estilos.                  */
/* ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero-copy,
  .h-eyebrow,
  .h-display,
  .h-lead { text-align: center; }

  /* Las entradillas llevan max-width: centrada también la caja. */
  .hero-sub,
  .h-lead { margin-inline: auto; }

  .h-acciones { justify-content: center; }

  /* El botón duplicado toma el relevo: el original se esconde y la copia
     aparece centrada al final de la sección, tras la imagen o animación. */
  .is-solo-escritorio { display: none !important; }

  .h-btn.is-solo-movil {
    display: flex !important;
    width: fit-content;
    margin-top: 1.25rem;
    margin-inline: auto;
    order: 99;
    justify-self: center;
  }

  .h-acciones.is-solo-movil {
    display: flex !important;
    margin-top: 1.25rem;
    order: 99;
  }

  /* Bloques de sección con botón suelto: se centra el contenedor entero
     para que el botón (inline-flex) acompañe al texto centrado. */
  .copiloto-copy,
  .planes-copy,
  .integracion-copy { text-align: center; }

  /* La cabecera de los carruseles de ERP es flex: en columna y centrada. */
  .erps-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* La banda de clientes apila el titular sobre el carrusel. Vivía solo en
     home.css y las demás páginas (Casos, Nosotros, Integraciones) mostraban
     el titular estrujado en su columna de escritorio. */
  .clientes .container { grid-template-columns: minmax(0, 1fr); }

  /* Contenido que se queda a la izquierda. */
  .panel-copy .h-eyebrow,
  .panel-copy .h-lead,
  .testimonio-texto .h-eyebrow,
  .contacto-form .h-lead,
  .caso-prosa .h-display,
  .legal-hero .h-display,
  .sitemap-intro .h-eyebrow,
  .sitemap-intro .h-display,
  .sitemap-intro .h-lead {
    text-align: left;
    margin-inline: 0;
  }
}