/* =====================================================================
   MUCCA 360 — Landing page
   Hoja de estilos única. Sin frameworks, sin build.

   Índice
   01  Fuentes
   02  Tokens (colores, tipografía, espaciado)
   03  Reset y base
   04  Utilidades de layout
   05  Componentes (botones, chips, tarjetas, mockups)
   06  Encabezado y navegación
   07  Hero
   08  Paneo de la web
   09  Nosotros
   10  Funcionalidades
   11  Módulo veterinario
   12  Trazabilidad y SENASA
   13  Precios
   14  Fundadores y contacto
   15  Preguntas frecuentes
   16  Pie de página
   17  WhatsApp flotante
   18  Animaciones y accesibilidad
   ===================================================================== */


/* 01 · FUENTES ======================================================= */
/* Ubuntu es la tipografía secundaria del manual de marca (pág. 7).
   Se autohospeda para no depender de Google Fonts: carga más rápido
   con señal mala y no filtra visitas a terceros.
   Reross Quadratic (tipografía principal) vive sólo dentro del logo. */

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ubuntu-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ubuntu-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ubuntu-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ubuntu-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ubuntu-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 02 · TOKENS ======================================================== */

:root {
  /* --- Color de marca (Manual de identidad, pág. 9) --- */
  --verde-marca:  #5F9322;   /* Pantone 370C. Superficies grandes y texto grande.
                                Sobre blanco da 3.7:1 — NO usar en texto corrido. */
  --verde-accion: #4A7519;   /* Botones, links y texto sobre blanco. 5.5:1 = AA. */
  --verde-hover:  #3D6114;
  --verde-claro:  #EDF3E3;   /* Tinte para fondos suaves */
  --verde-borde:  #CFE0B4;

  --grafito:      #4E4545;   /* Warm Grey 11C. Texto principal. */
  --grafito-900:  #2A2424;   /* Fondos oscuros */
  --grafito-800:  #3A3232;
  --grafito-600:  #6B6060;   /* Texto secundario. 5.4:1 sobre blanco. */

  --papel:        #FAF8F4;   /* Fondo base de la página. Un paso más claro que
                                la crema, que queda para las secciones alternas. */
  --crema:        #F5F3EF;
  --crema-hondo:  #EBE7E0;
  --blanco:       #FFFFFF;

  --alerta:       #A93B22;   /* Sólo columna "Antes". 5.6:1 sobre blanco. */
  --ambar:        #C98A1E;

  --linea:        rgba(78, 69, 69, .16);
  --linea-clara:  rgba(255, 255, 255, .18);

  --sombra-sm: 0 1px 2px rgba(42, 36, 36, .06), 0 2px 8px rgba(42, 36, 36, .05);
  --sombra-md: 0 2px 4px rgba(42, 36, 36, .05), 0 12px 32px rgba(42, 36, 36, .09);
  --sombra-lg: 0 4px 8px rgba(42, 36, 36, .06), 0 24px 64px rgba(42, 36, 36, .16);

  /* --- Tipografía --- */
  --fuente: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-display: clamp(2.4rem, 1.55rem + 3.9vw, 4.4rem);
  --fs-h2:      clamp(1.85rem, 1.35rem + 2.1vw, 3rem);
  --fs-h3:      clamp(1.2rem, 1.08rem + .6vw, 1.55rem);
  --fs-h4:      clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --fs-lead:    clamp(1.06rem, 1rem + .45vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px — un punto más grande de lo habitual:
                                el lector promedio de esta página pasa los 45. */
  --fs-small:   .9375rem;
  --fs-mini:    .8125rem;

  /* --- Espaciado (base 8) --- */
  --sp-1: .5rem;   --sp-2: 1rem;    --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 2.5rem;  --sp-6: 3rem;    --sp-8: 4rem;    --sp-10: 5rem;

  --seccion-y: clamp(4rem, 9vw, 8rem);
  --ancho:     1200px;
  --radio:     14px;
  --radio-sm:  10px;

  --alto-encabezado: 76px;
}


/* 03 · RESET Y BASE ================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-encabezado) + 12px);
  -webkit-text-size-adjust: 100%;
  /* El menú móvil cerrado vive fuera de pantalla, a la derecha.
     Sin esto, aparece scroll horizontal en el celular. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--grafito);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--grafito-900);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

p { margin: 0 0 var(--sp-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--verde-accion); text-underline-offset: .18em; }
a:hover { color: var(--verde-hover); }

img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; color: var(--grafito-900); }

:focus-visible {
  outline: 3px solid var(--verde-accion);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salto al contenido, para teclado y lectores de pantalla */
.saltar {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--grafito-900); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  font-weight: 500; text-decoration: none;
  transition: transform .2s;
}
.saltar:focus { transform: translate(-50%, 0); color: #fff; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* 04 · UTILIDADES DE LAYOUT ========================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.seccion { padding-block: var(--seccion-y); }
/* Con el fondo del body en --papel, la crema quedaba a un pelo de
   distancia y la alternancia de secciones desaparecía. Va la crema honda,
   que ya existe como token y se despega sin ensuciar. Las tarjetas de
   adentro siguen en blanco, así que igual resaltan. */
.seccion--crema { background: var(--crema-hondo); }
/* Antes era --grafito-900 con texto blanco. En el tema claro la sección
   destacada se marca con el tinte verde, no con negro. El nombre de la
   clase se mantiene para no tocar el HTML de la sección que la usa
   (Programa de Fundadores). */
.seccion--oscura { background: var(--verde-claro); color: var(--grafito); }
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4 { color: var(--grafito-900); }

/* El isotipo como marca de agua sobre el borde derecho de una sección.
   Se combina con --oscura: el tinte verde solo es una superficie plana, y
   el isotipo al 7% le da profundidad sin competir con el contenido.
   La sección recorta el desborde; el contenedor sube por encima, porque
   un pseudo-elemento absoluto pinta arriba del contenido en flujo. */
.marca-agua { position: relative; overflow: hidden; }
.marca-agua::before {
  content: '';
  position: absolute; right: -14%; top: 50%;
  transform: translateY(-50%);
  width: min(560px, 46vw); aspect-ratio: 1/1;
  background: url('../img/isotipo-positivo.png') center/contain no-repeat;
  opacity: .07;
  z-index: 0;
  pointer-events: none;
}
.marca-agua > .contenedor { position: relative; z-index: 1; }

/* Cabecera de sección: volanta + título + bajada */
.cabecera-seccion { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cabecera-seccion--centrada { margin-inline: auto; text-align: center; }

.volanta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-mini); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--verde-accion);
  margin-bottom: var(--sp-2);
}
.volanta::before {
  content: ''; width: 22px; height: 2px; background: var(--verde-marca); border-radius: 2px;
}
.cabecera-seccion--centrada .volanta { justify-content: center; }

.bajada {
  font-size: var(--fs-lead);
  color: var(--grafito-600);
  margin-top: var(--sp-2);
  max-width: 40rem;
}
.cabecera-seccion--centrada .bajada { margin-inline: auto; }

/* Cita destacada (las "frases destacadas" del documento de contenido) */
.cita {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 500; line-height: 1.3;
  color: var(--verde-accion);
  letter-spacing: -.015em;
  border-left: 4px solid var(--verde-marca);
  padding-left: clamp(1rem, 2vw, 1.75rem);
  margin: var(--sp-4) 0;
  text-wrap: balance;
}


/* 05 · COMPONENTES =================================================== */

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 52px;                 /* área táctil generosa: se usa con guantes */
  padding: .8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex-shrink: 0; }
/* .btn define display:inline-flex y pisa el [hidden] del UA. */
.btn[hidden] { display: none !important; }

.btn--primario { background: var(--verde-accion); color: #fff; }
.btn--primario:hover { background: var(--verde-hover); color: #fff; }

.btn--secundario {
  background: transparent; color: var(--grafito-900); border-color: var(--linea);
}
.btn--secundario:hover { border-color: var(--grafito-900); color: var(--grafito-900); }

.btn--claro { background: #fff; color: var(--grafito-900); }
.btn--claro:hover { background: var(--crema); color: var(--grafito-900); }

.btn--fantasma-claro {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.45);
}
.btn--fantasma-claro:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

.btn--ancho { width: 100%; }

/* Botón de cierre de sección: más alto, más ancho y un punto de tipografía
   arriba del resto. La sombra teñida de verde lo despega del fondo sin
   agrandarlo más; con una sombra gris plana quedaba sucio sobre el papel. */
.btn--grande {
  min-height: 62px;
  /* En 390px el ancho fijo llegaba abajo del botón flotante de WhatsApp
     (.wa-flotante, fixed abajo a la derecha) y se pisaban por 3px. */
  padding: 1.05rem clamp(1.75rem, 6vw, 2.5rem);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  transition: background-color .18s, border-color .18s, color .18s,
              transform .18s, box-shadow .18s;
  box-shadow:
    0 2px 6px rgba(74,117,25,.16),
    0 10px 24px rgba(74,117,25,.18);
}
.btn--grande:hover {
  box-shadow:
    0 2px 6px rgba(74,117,25,.20),
    0 14px 32px rgba(74,117,25,.24);
}

.grupo-botones {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* --- Chips --- */
.chips { display: flex; flex-wrap: wrap; gap: .625rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.1rem;
  background: var(--verde-claro);
  border: 1px solid var(--verde-borde);
  border-radius: 999px;
  font-size: var(--fs-small); font-weight: 500;
  color: var(--verde-hover);
}
.chip strong { color: var(--verde-hover); }
.chip span { color: var(--grafito-600); font-weight: 400; }

/* --- Rejillas --- */
/* Columnas explícitas en vez de auto-fit: con auto-fit, seis tarjetas caían
   en 4 + 2 en pantallas anchas. Se busca siempre 3 + 3 y 2 + 2. */
.rejilla { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Tarjetas --- */
.tarjeta {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tarjeta:hover { border-color: var(--verde-borde); box-shadow: var(--sombra-md); }
.seccion--oscura .tarjeta { border-color: var(--verde-borde); }
.tarjeta h4 { margin-bottom: .5rem; }
.tarjeta p { color: var(--grafito-600); font-size: var(--fs-small); }

.tarjeta__icono {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--verde-claro);
  border-radius: 12px;
  margin-bottom: var(--sp-2);
  color: var(--verde-hover);
}
.seccion--crema .tarjeta { background: #fff; }

/* --- Tarjetas que cambian la captura de arriba (Funcionalidades) --- */
/* El botón vive dentro del h4 para no romper la jerarquía de encabezados;
   el ::after lo estira sobre toda la tarjeta para que el área de clic sea
   la tarjeta entera y no sólo el título. */
.tarjeta--seleccionable { position: relative; }

.tarjeta__disparador {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  transition: color .2s;
}
.tarjeta__disparador::after {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--radio);
}
.tarjeta--seleccionable:hover .tarjeta__disparador { color: var(--verde-hover); }

/* Estado activo: la tarjeta cuya captura se está mostrando */
.tarjeta--seleccionable:has(.tarjeta__disparador[aria-pressed="true"]) {
  border-color: var(--verde-accion);
  background: var(--verde-claro);
  box-shadow: var(--sombra-md);
}
.tarjeta--seleccionable:has(.tarjeta__disparador[aria-pressed="true"]) .tarjeta__icono {
  background: #fff;
}

/* El anillo de foco rodea la tarjeta entera, no el texto del botón */
.tarjeta__disparador:focus-visible { outline: none; }
.tarjeta--seleccionable:has(.tarjeta__disparador:focus-visible) {
  outline: 3px solid var(--verde-accion);
  outline-offset: 3px;
}
.tarjeta--seleccionable:active { transform: scale(.985); }

/* Pista de uso, debajo de la captura */
.pista-capturas {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--grafito-600);
  margin: calc(var(--sp-3) * -1) 0 var(--sp-4);
}

/* --- Marcos de dispositivo (mockups del sistema) --- */
.marco-notebook {
  background: var(--grafito-900);
  border-radius: 14px 14px 6px 6px;
  padding: 12px 12px 0;
  box-shadow: var(--sombra-lg);
  max-width: 900px;
  margin-inline: auto;
}
.marco-notebook__barra {
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px 10px;
}
.marco-notebook__barra i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.26);
}
.marco-notebook__pantalla {
  background: #fff;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.marco-notebook__base {
  height: 12px;
  background: linear-gradient(180deg, #3A3232, #201B1B);
  border-radius: 0 0 14px 14px;
  max-width: 940px; margin: 0 auto;
  box-shadow: var(--sombra-md);
}

.marco-celular {
  width: 244px;
  background: var(--grafito-900);
  border-radius: 30px;
  padding: 10px;
  box-shadow: var(--sombra-lg);
  flex-shrink: 0;
}
.marco-celular__pantalla {
  background: #fff; border-radius: 22px; overflow: hidden;
}


/* 06 · ENCABEZADO ==================================================== */

.encabezado {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--alto-encabezado);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
/* Arranca transparente sobre la foto del hero y toma fondo sólido al
   hacer scroll. También con el menú móvil abierto, para que la franja no
   deje ver la foto por detrás del panel del menú. */
.encabezado--fijado,
.encabezado--menu-abierto {
  background: rgba(250,248,244,.96);
  border-bottom-color: var(--linea);
  box-shadow: 0 1px 12px rgba(42,36,36,.06);
}
/* El blur sólo con el menú cerrado: backdrop-filter convierte al encabezado en
   containing block del .nav (position: fixed) y el panel del menú móvil se
   colapsa a la altura de la franja en vez de ocupar la pantalla. */
.encabezado--fijado:not(.encabezado--menu-abierto) {
  backdrop-filter: blur(10px);
}

.encabezado__interior {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* El hero es claro, así que el logotipo va en positivo desde el arranque.
   En la versión oscura arrancaba en negativo y cambiaba al hacer scroll:
   había dos <img> y reglas para alternarlos. Acá alcanza con uno. */
.encabezado__logo { display: block; flex-shrink: 0; }
.encabezado__logo img { width: 132px; }

.nav { margin-left: auto; }
.nav__lista { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.4rem); }
.nav__lista a {
  color: var(--grafito); text-decoration: none;
  font-size: var(--fs-small); font-weight: 500;
  padding: .5rem .25rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__lista a:hover { color: var(--verde-accion); border-bottom-color: currentColor; }

.encabezado__acciones { display: flex; align-items: center; gap: .625rem; }
.encabezado__acciones .btn {
  min-height: 44px; padding: .5rem 1.1rem;
  font-size: var(--fs-small); white-space: nowrap;
}
.encabezado__acciones .btn--secundario { color: var(--grafito-900); border-color: var(--linea); }
.encabezado__acciones .btn--secundario:hover { border-color: var(--grafito-900); }

/* Botón hamburguesa */
.hamburguesa {
  display: none;
  width: 48px; height: 48px;
  margin-left: auto;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  color: var(--grafito-900);
}
.hamburguesa span {
  display: block; width: 24px; height: 2px;
  background: currentColor; border-radius: 2px;
  margin: 5px auto;
  transition: transform .25s, opacity .2s;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1020px) {
  .hamburguesa { display: block; }
  .nav {
    position: fixed; inset: var(--alto-encabezado) 0 0 0;
    background: var(--blanco);
    padding: var(--sp-4) clamp(1.25rem, 5vw, 2.5rem) var(--sp-8);
    overflow-y: auto;
    transform: translateX(100%);
    /* visibility saca los enlaces del recorrido con Tab mientras está cerrado.
       Al abrir se hace visible al instante; al cerrar, recién cuando
       terminó de deslizarse hacia afuera. */
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
    margin-left: 0;
  }
  .nav[data-abierto="true"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease, visibility 0s linear 0s;
  }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista a {
    display: block;                      /* la línea divisoria ocupa todo el ancho */
    color: var(--grafito-900); font-size: 1.15rem; font-weight: 500;
    padding: 1rem 0; border-bottom: 1px solid var(--linea);
  }
  .nav__acciones-movil { display: grid; gap: .75rem; margin-top: var(--sp-4); }
  .encabezado__acciones { display: none; }
}
@media (min-width: 1021px) {
  .nav__acciones-movil { display: none; }
}


/* 07 · HERO ========================================================== */
/* Foto real del campo con velo de papel.
   La versión anterior era un atardecer hecho con degradados y un velo
   oscuro para que se leyera el texto blanco. Acá el velo va hacia el
   papel: el cielo de la foto ocupa la mitad de arriba y es casi blanco,
   así que el texto puede ir en grafito y la página se mantiene clara. */

.hero {
  position: relative;
  padding-top: calc(var(--alto-encabezado) + clamp(2.5rem, 5vw, 4.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--papel);
  overflow: hidden;
}

/* La foto. Original 6000x4000 y 11 MB; se sirven dos versiones web.
   El 24% baja el horizonte y deja más cielo arriba, que es donde va el
   texto. Ese número es la manija para reencuadrar. */
.hero__foto {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/hero-campo-1200.jpg');
  background-size: cover;
  background-position: center 24%;
}
@media (min-width: 900px) {
  .hero__foto { background-image: url('../img/hero-campo-2000.jpg'); }
}

/* Velo claro. Fuerte a la izquierda, donde va el texto, y se abre a la
   derecha para que la hacienda se vea. Garantiza el contraste AA sin
   oscurecer la página. */
.hero__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg,
      rgba(250,248,244,.97) 0%,
      rgba(250,248,244,.92) 34%,
      rgba(250,248,244,.55) 62%,
      rgba(250,248,244,.14) 100%),
    linear-gradient(180deg, rgba(250,248,244,.88) 0%, transparent 24%);
}
/* En celular el texto ocupa todo el ancho: el velo pasa a ser vertical y
   la foto queda como pie de la sección. */
@media (max-width: 899px) {
  .hero__velo {
    background: linear-gradient(180deg,
      rgba(250,248,244,.97) 0%,
      rgba(250,248,244,.94) 62%,
      rgba(250,248,244,.55) 100%);
  }
}

.hero > .contenedor { position: relative; z-index: 2; }

/* La volanta se prolonga en una regla que cruza las dos columnas: es la
   que ata el bloque de texto con la pantalla del sistema. */
.hero__cabecera {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.hero__cabecera .volanta { margin: 0; flex-shrink: 0; }
.hero__cabecera::after { content: ''; flex: 1; height: 1px; background: var(--linea); }

.hero__grilla {
  position: relative;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__grilla { grid-template-columns: 1.05fr 1fr; }
}

.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 3.1vw, 3.6rem);
  letter-spacing: -.035em;
  color: var(--grafito-900);
  text-wrap: balance;   /* sin esto queda "vos." solo en la última línea */
}
.hero h1 em { font-style: normal; color: var(--verde-accion); }

.hero__bajada {
  font-size: var(--fs-lead);
  color: var(--grafito-600);
  margin-top: var(--sp-3);
  max-width: 32rem;
}

/* La cadena. Es la misma secuencia de la sección Trazabilidad y SENASA,
   comprimida: acá el orden carga información, por eso se justifica. */
.hero__cadena {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: 1rem 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.hero__paso {
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: var(--fs-mini); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafito-600);
}
.hero__paso::after { content: ''; width: 18px; height: 1px; background: var(--verde-borde); }
.hero__paso:last-child { color: var(--verde-accion); }
.hero__paso:last-child::after { content: none; }

.hero .grupo-botones { margin-top: clamp(1.75rem, 3.5vw, 2.25rem); }

/* En celular el CTA es hijo único: en su ancho natural (253px) deja media fila
   vacía a la derecha y se lee como un botón que perdió al de al lado. A lo
   ancho cierra el bloque, igual que el «Quiero sumarme» del formulario. */
@media (max-width: 640px) {
  .hero .grupo-botones .btn { width: 100%; }
}

/* La línea que sigue al CTA. Se quedó con lo que tranquilizaba el botón
   «Escribinos por WhatsApp» que iba al lado: que del otro lado hay alguien y
   que dejar los datos no compromete a nada. */
.hero__respaldo {
  margin: .85rem 0 0;
  max-width: 30rem;
  font-size: var(--fs-small);
  color: var(--grafito-600);
  /* Son dos líneas en desktop: sin balance queda «ni compromiso.» colgando.
     El pretty global de <p> no lo agarra porque la huérfana son dos palabras. */
  text-wrap: balance;
}

/* Las tres pruebas que sostienen la promesa.
   No se llama .credenciales: esa clase ya existe en la sección Nosotros
   (línea ~800) con otra maqueta, y la de abajo ganaría por orden. */
.hero__pruebas {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  /* Menos aire que antes: .hero__respaldo ya separa el botón de acá. Con el
     clamp viejo el bloque caía ~10px más abajo que el resto de la columna. */
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--fs-small); color: var(--grafito-600);
}
.hero__pruebas li { display: inline-flex; align-items: center; gap: .5rem; }
.hero__pruebas svg { color: var(--verde-marca); flex-shrink: 0; }

/* --- La pieza: el marco de la captura, y mañana el del video --- */
/* Hoy adentro va la captura del sistema. Cuando exista el video se
   reemplaza el <img> por un <video class="pieza__video"> y se le saca
   el modificador --captura: el 16:9 vuelve solo. */
.pieza {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(74,117,25,.07), 0 26px 60px rgba(74,117,25,.13);
}
.pieza__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La captura entra entera: sin relación fija no hay recorte. La pantalla
   del sistema es 1,85:1, no 16:9, y forzarla cortaría el borde derecho. */
.pieza--captura { aspect-ratio: auto; }
.pieza__captura,
.captura-sistema { display: block; width: 100%; height: auto; }

/* Captura intercambiable de Funcionalidades. Las pantallas no comparten
   exactamente la misma relación (1,85:1 el dashboard, 1,78:1 finanzas), así
   que el marco fija la relación y la imagen se ancla arriba: sin esto la
   página pega un salto de alto cada vez que se cambia de tarjeta. */
#captura-funcionalidades { aspect-ratio: 1800 / 972; }
#captura-funcionalidades .captura-sistema {
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity .28s cubic-bezier(.22, 1, .36, 1);
}
#captura-funcionalidades .captura-sistema[data-cargando] { opacity: 0; }

/* El pie cae del lado donde el velo se abre y la foto queda a la vista:
   sobre el pasto no se leía, así que va sobre papel. */
.pieza__pie {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .75rem;
  padding: .3rem .75rem .3rem .6rem;
  border-radius: 999px;
  background: rgba(250,248,244,.92);
  font-size: var(--fs-mini); color: var(--grafito-600);
}
.pieza__pie i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--verde-marca); flex-shrink: 0;
}


/* 08 · NOSOTROS ====================================================== */

.nosotros__grilla {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) { .nosotros__grilla { grid-template-columns: 1.1fr .9fr; } }

/* Slot de foto: ver README-entrega.md para reemplazar por la foto real.
   Era un degradado marrón oscuro, que sobre la página oscura pasaba
   desapercibido. Sobre claro se leía como una imagen rota, así que ahora
   es una superficie de papel con borde punteado: se entiende que falta
   una foto, no que algo se rompió. */
.foto-slot {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--verde-claro);
  border: 2px dashed var(--verde-borde);
  min-height: 300px;
  display: grid; place-items: center;
  padding: var(--sp-4);
  text-align: center;
  color: var(--grafito-600);
}
.foto-slot img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
/* Con la foto real puesta, el borde punteado del marcador sobra: quedaría un
   recuadro cortado alrededor de la imagen. */
.foto-slot:has(img) { border: 0; }
.foto-slot__aviso { font-size: var(--fs-small); max-width: 20rem; color: var(--grafito-600); }
.foto-slot__aviso strong { color: var(--verde-hover); display: block; margin-bottom: .35rem; }
.foto-slot--alta { min-height: 420px; }

.credenciales {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linea);
}
.credencial b {
  display: block;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  font-weight: 700; color: var(--verde-accion);
  line-height: 1.05; letter-spacing: -.03em;
}
.credencial span { font-size: var(--fs-small); color: var(--grafito-600); }

.equipo { margin-top: clamp(2.5rem, 5vw, 4rem); }
.equipo__tarjeta { text-align: left; }

/* Foto del equipo: proporción fija para que las dos tarjetas queden parejas
   aunque una tenga foto real y la otra el marcador de pendiente. */
.equipo__foto {
  aspect-ratio: 16 / 10;
  border-radius: var(--radio-sm);
  overflow: hidden;
  margin-bottom: var(--sp-2);
  background: var(--crema-hondo);
}
.equipo__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
/* Las dos fotos del equipo son verticales y entran a un recorte apaisado, así
   que el foco se baja para que nadie quede cortado por el borde de abajo. A
   Francisco le alcanza con bajar un poco; en la de Trebius los dos socios están
   bastante abajo en la toma y hay que bajar mucho más. */
.equipo__foto--francisco img { object-position: center 55%; }
.equipo__foto--trebius img { object-position: center 75%; }
.equipo__foto--vacia {
  display: grid; place-items: center;
  padding: var(--sp-3); text-align: center;
  background: var(--verde-claro);
  border: 2px dashed var(--verde-borde);
}
.equipo__foto--vacia .foto-slot__aviso { max-width: 14rem; }

.equipo__tarjeta h4 { margin-bottom: .1rem; }
.equipo__rol { color: var(--verde-accion); font-size: var(--fs-small); font-weight: 500; }
.equipo__bio { color: var(--grafito-600); font-size: var(--fs-small); margin-top: .5rem; }


/* 09 · FUNCIONALIDADES =============================================== */

/* Bloque de bastones. Antes era una banda verde plana que se leía como nota
   al pie. Ahora va en claro con borde y sombra verdes: en una sección que es
   toda tarjetas blancas, el que destaca es el bloque que se afirma, no el que
   grita. El peso lo hace el color del titular y el sello, no el tamaño. */
.destacado-bastones {
  position: relative;
  background: var(--blanco);
  border: 2px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  /* Sombra en capas y teñida de verde. Un gris plano acá lo hundía. */
  box-shadow:
    0 1px 2px rgba(74,117,25,.08),
    0 8px 20px rgba(74,117,25,.10),
    0 28px 56px rgba(74,117,25,.12);
}
/* Filete superior: marca el bloque sin sumar altura. Se desvanece antes de
   llegar al sello; si cruzaba entero, quedaba un muñón de línea a la derecha
   del sello que parecía un error de render. */
.destacado-bastones::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
  border-radius: calc(var(--radio) - 2px) calc(var(--radio) - 2px) 0 0;
  background: linear-gradient(90deg,
    var(--verde-marca), var(--verde-accion) 45%, transparent 72%);
}

/* El argumento económico, arriba a la derecha. */
.destacado-bastones__sello {
  position: absolute; top: -16px; right: clamp(1.25rem, 4vw, 2.5rem);
  transform: rotate(-2deg);
  background: var(--verde-accion); color: #fff;
  font-size: var(--fs-mini); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: 999px;
  /* Aro del color del fondo de sección: sin esto el sello se pega al filete
     verde y la esquina derecha queda como una mancha sin forma. */
  border: 3px solid var(--papel);
  box-shadow: 0 4px 12px rgba(74,117,25,.28);
}

.destacado-bastones__grilla { display: grid; gap: var(--sp-3); align-items: start; }
@media (min-width: 820px) {
  .destacado-bastones__grilla { grid-template-columns: auto 1fr; gap: var(--sp-4); }
}
.destacado-bastones__icono {
  width: 60px; height: 60px; border-radius: 16px;
  background: var(--verde-claro);
  border: 1px solid var(--verde-borde);
  display: grid; place-items: center; color: var(--verde-accion);
}

/* Un escalón por debajo de --fs-h2: a 48px el bloque se comía la sección
   entera y el titular caía en 3 líneas partiendo "bastón lector". */
.destacado-bastones h3 {
  font-size: clamp(1.45rem, 1.1rem + 1.45vw, 2.25rem);
  letter-spacing: -.03em;
  max-width: 27ch;
}
.destacado-bastones h3 em { font-style: normal; color: var(--verde-accion); }

.destacado-bastones__bajada {
  color: var(--grafito-600);
  font-size: var(--fs-lead); line-height: 1.55;
  max-width: 56rem;              /* ancho para que entre en 2 líneas */
  margin: .75rem 0 0;
}

.destacado-bastones__stats {
  list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--linea);
  display: grid; gap: var(--sp-3);
}
@media (min-width: 820px) {
  .destacado-bastones__stats { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .destacado-bastones__stats li + li {
    border-left: 1px solid var(--linea); padding-left: var(--sp-3);
  }
  .destacado-bastones__stats li { padding-right: var(--sp-3); }
}
.destacado-bastones__stats b {
  display: block; color: var(--verde-accion);
  font-size: var(--fs-h4); letter-spacing: -.01em;
}
.destacado-bastones__stats span {
  display: block; color: var(--grafito-600);
  font-size: var(--fs-small); margin-top: .15rem;
}

/* El CTA cierra la sección. Con el margen global (2rem) quedaba pegado al
   bloque de bastones y se leía como pie de esa tarjeta, no como cierre. */
#funcionalidades .grupo-botones { margin-top: clamp(2.5rem, 5vw, 4rem); }


/* 10 · MÓDULO VETERINARIO ============================================ */

.vet__grilla { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .vet__grilla { grid-template-columns: 1fr 1fr; } }

/* Panel dirigido al veterinario: se lee como una puerta distinta.
   Es el ancla de color saturado de la página: sin al menos una superficie
   verde llena, el tema claro queda lavado.
   Va en --verde-accion y no en el 370C: con blanco encima el 370C da
   3.5:1 y no pasa AA; --verde-accion da 5.7:1. */
.panel-vet {
  background: var(--verde-accion);
  color: rgba(255,255,255,.90);
  border-radius: var(--radio);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.panel-vet h3 { color: #fff; }
.panel-vet .volanta { color: #fff; }
.panel-vet .volanta::before { background: rgba(255,255,255,.7); }
.panel-vet__grilla { display: grid; gap: var(--sp-4); }
@media (min-width: 940px) { .panel-vet__grilla { grid-template-columns: 1fr 1fr; align-items: start; } }

.lista-check li {
  display: grid; grid-template-columns: 22px 1fr; gap: .75rem;
  align-items: start;
  padding: .55rem 0;
  font-size: var(--fs-small);
}
.lista-check svg { color: var(--verde-marca); margin-top: .18em; flex-shrink: 0; }
.panel-vet .lista-check svg { color: #fff; }


/* 11 · PRECIOS ======================================================= */

/* La tarjeta se parte en dos zonas: el selector arriba y la banda del precio
   por cabeza abajo. El padding vive en cada zona, no en la tarjeta, para que
   la banda llegue de borde a borde. */
.selector-cabezas {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 3rem);
  box-shadow: var(--sombra-sm);
}
.selector-cabezas__top {
  display: grid; gap: var(--sp-2);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
@media (min-width: 620px) {
  .selector-cabezas__top { grid-template-columns: 1fr auto; align-items: center; }
}
.selector-cabezas label { font-weight: 700; color: var(--grafito-900); }
.selector-cabezas p { font-size: var(--fs-small); color: var(--grafito-600); margin: .25rem 0 0; }
.selector-cabezas select {
  font-family: inherit; font-size: 1.05rem; font-weight: 500;
  color: var(--grafito-900);
  padding: .85rem 2.6rem .85rem 1.1rem;
  min-height: 52px;
  border: 2px solid var(--linea);
  border-radius: 999px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234E4545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  width: 100%;
}
@media (min-width: 620px) { .selector-cabezas select { width: auto; min-width: 15rem; } }
.selector-cabezas select:hover { border-color: var(--verde-borde); }


/* Precio por cabeza --------------------------------------------------
   El monto de los planes es el total del rodeo. Este es el mismo precio
   dividido por animal, que es la unidad con la que el productor compara
   contra lo que gana una cabeza por mes. */

.por-cabeza {
  background: var(--verde-claro);
  border-top: 1px solid var(--verde-borde);
  padding: clamp(.85rem, 2vw, 1.1rem) clamp(1.25rem, 3vw, 1.75rem) clamp(.95rem, 2vw, 1.2rem);
}
.selector-cabezas .por-cabeza__volanta {
  margin: 0 0 .25rem;
  font-size: var(--fs-mini); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--grafito-600);
}

.por-cabeza__fila { display: flex; align-items: baseline; gap: clamp(.75rem, 2vw, 1.15rem); }
/* Apilado en angosto: al lado del número no queda ancho útil para la unidad
   y la aclaración. */
@media (max-width: 560px) {
  .por-cabeza__fila { display: block; }
  .selector-cabezas .por-cabeza__monto { margin-bottom: .3rem; }
}

/* Tope 2.25rem, bastante por debajo de los 3.4rem de .plan__monto: este número
   es el dato de apoyo, no el precio. El peso 700 y el verde le alcanzan para
   resaltar sin competirle al "USD 18" de las tarjetas de abajo. */
/* Flex con línea de base compartida, igual que .plan__precio: el número usa el
   mismo carrete de dígitos que las tarjetas y eso lo vuelve un bloque, que
   inline se caería a su propio renglón y dejaría el "USD" solo arriba. */
.selector-cabezas .por-cabeza__monto {
  display: flex; align-items: baseline;   /* leer el ::before de abajo antes de tocarlo */
  margin: 0;
  font-size: clamp(1.85rem, 1.5rem + 1.3vw, 2.25rem);
  font-weight: 700; line-height: .95;
  letter-spacing: -.04em;
  color: var(--verde-accion);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Ancla tipográfica. Los dos hijos del flex tienen la línea de base rota para
   este uso: el carrete la sintetiza porque lleva overflow:hidden, y el "USD"
   la tiene 20px más arriba porque mide 0.45em. Con cualquiera de los dos, el
   contenedor le publica a .por-cabeza__fila una base equivocada y "por cabeza
   por mes" deja de apoyarse en el número — la banda perdía 8px de alto.

   Un primer ítem de ancho cero con un cero invisible resuelve el problema sin
   números mágicos: el navegador calcula su base con las métricas reales de
   Ubuntu al tamaño del monto, que es exactamente la que tenía el texto plano. */
.selector-cabezas .por-cabeza__monto::before {
  content: '0';
  width: 0;
  visibility: hidden;
}

/* El carrete tiene que ocupar lo mismo que ocupaba el texto plano, y acá el
   line-height es .95, no 1 como en las tarjetas.

   Y no se alinea por línea de base sino por centro, porque la suya está
   sintetizada y caía 7px abajo del glifo. Centrar es exacto y no depende de
   las métricas de la fuente: el dígito está centrado en su caja de --nf-paso,
   los márgenes negativos son simétricos, así que el centro de la caja del
   carrete es el centro del glifo. Del otro lado pasa lo mismo — el ancla
   centra su glifo en su propia caja por el medio interlineado. Centros
   juntos, glifos juntos. */
.por-cabeza .nf {
  --nf-alto: .95em;
  align-self: center;
}
/* "USD" a 0.45x y casi pegado: moneda y cifra leen como una sola pieza
   tipográfica. Se vacía en el tramo gratuito, donde no hay moneda que poner. */
.por-cabeza__usd { font-size: .45em; color: var(--verde-marca); margin-right: .2em; }
.por-cabeza__usd:empty { display: none; }

.por-cabeza__txt { min-width: 0; }
.selector-cabezas .por-cabeza__unidad {
  margin: 0; font-size: var(--fs-small); font-weight: 500;
  color: var(--grafito-900); line-height: 1.35;
}
.por-cabeza__nota {
  display: block; margin-top: .2rem;
  font-size: var(--fs-mini); color: var(--grafito-600); line-height: 1.45;
}
/* Abajo de 360px la aclaración del último tramo ocupa tres líneas y las demás
   dos. Reservarlas evita que la tarjeta salte de alto al cambiar de rango. */
@media (max-width: 360px) { .por-cabeza__nota { min-height: 4.4em; } }

/* El monto no entra acá: sus dígitos ruedan solos con .nf. Si además se fundiera
   el bloque entero, serían dos animaciones para el mismo dato. Misma división
   que en las tarjetas de plan: los números ruedan, los textos suben. */
@media (prefers-reduced-motion: no-preference) {
  .por-cabeza.is-swap .por-cabeza__unidad,
  .por-cabeza.is-swap .por-cabeza__nota { animation: por-cabeza-subir 200ms cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes por-cabeza-subir {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}


.planes { display: grid; gap: var(--sp-3); align-items: stretch; }
@media (min-width: 900px) { .planes { grid-template-columns: repeat(3, 1fr); } }

.plan {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.plan--destacado {
  border: 2px solid var(--verde-marca);
  box-shadow: var(--sombra-md);
  position: relative;
}
.plan__sello {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  background: var(--verde-accion); color: #fff;
  font-size: var(--fs-mini); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem 1rem; border-radius: 999px;
  white-space: nowrap;
}
.plan__nombre { font-size: var(--fs-h4); font-weight: 700; color: var(--grafito-900); }
.plan__desc { font-size: var(--fs-small); color: var(--grafito-600); margin-top: .25rem; }

.plan__precio {
  display: flex; align-items: baseline; gap: .35rem;
  margin: var(--sp-3) 0 .25rem;
  color: var(--grafito-900);
}
.plan__monto {
  font-size: clamp(2.4rem, 1.9rem + 2vw, 3.4rem);
  font-weight: 700; line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

/* Rodaje del monto ---------------------------------------------------
   Cada dígito es una columna con un carrete del 0 al 9 apilado. Mostrar el 7
   es correr el carrete siete escalones hacia arriba. Al cambiar de tramo cada
   columna viaja su propia distancia: de USD 18 a USD 27 el 1 sube uno y el 8
   baja uno, y se cruzan a mitad de camino.

   La clase .nf la pone JS al construir los carretes. Sin JS el monto queda
   como texto plano, que es exactamente lo que se ve hoy. */

/* Un solo recorte para todas las columnas. Recortar columna por columna
   obligaría a poner overflow:hidden en un inline-block, y eso le cambia la
   línea de base al elemento: el "/ mes" de al lado se iría abajo.

   --nf-paso es el alto de cada dígito y, por lo tanto, cuánto viaja el carrete
   por escalón. No puede ser 1em: con line-height 1 o menos el glifo de Ubuntu
   se sale de su caja por arriba y por abajo, y una banda de 1em exacto le come
   la punta a cada número — el 8 se lee como un 7. Se pinta 1.35em y el margen
   negativo devuelve el alto ocupado al que tenía el texto plano.

   --nf-alto es ese alto: el line-height del elemento. Va por variable porque
   los dos lugares donde se usa el carrete no coinciden — .plan__monto usa 1 y
   .por-cabeza__monto usa .95. */
.nf {
  --nf-paso: 1.35em;
  --nf-alto: 1em;
  display: block;
  overflow: hidden;
  height: var(--nf-paso);
  margin-block: calc((var(--nf-alto) - var(--nf-paso)) / 2);
  white-space: nowrap;
}
.nf__col, .nf__fijo {
  display: inline-block;
  vertical-align: top;
  height: var(--nf-paso);
  line-height: var(--nf-paso);
}
/* El carrete sobresale nueve escalones para cada lado; lo recorta .nf */
.nf__reel { display: block; }
.nf__d { display: block; height: var(--nf-paso); line-height: var(--nf-paso); }

@media (prefers-reduced-motion: no-preference) {
  .nf__reel { transition: transform .52s cubic-bezier(.2, .7, .3, 1); }
  /* Entran los caracteres que antes no existían: USD 99 → USD 155 estrena una
     columna, y USD 990 → USD 1.550 estrena una más el separador de miles. */
  .nf__col--nuevo, .nf__fijo--nuevo {
    animation: nf-entrar .38s cubic-bezier(.2, .7, .3, 1) both;
  }
}
@keyframes nf-entrar {
  from { opacity: 0; transform: translateY(.4em); }
  to   { opacity: 1; transform: none; }
}
.plan__periodo { font-size: var(--fs-small); color: var(--grafito-600); font-weight: 500; }
.plan__detalle { font-size: var(--fs-small); color: var(--grafito-600); min-height: 2.6em; }
.plan__ahorro {
  display: inline-block; margin-top: .5rem;
  background: var(--verde-claro); color: var(--verde-hover);
  font-size: var(--fs-small); font-weight: 700;
  padding: .3rem .85rem; border-radius: 999px;
}
.plan .lista-check { margin: var(--sp-3) 0; }
.plan .btn { margin-top: auto; }

.precios__cta {
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.precios__cta-nota {
  max-width: 36rem; margin: 0;
  text-align: center;
  font-size: var(--fs-small); color: var(--grafito-600);
}
.precios__nota {
  max-width: 46rem; margin: clamp(1.25rem, 2.5vw, 2rem) auto 0;
  text-align: center;
  font-size: var(--fs-small); color: var(--grafito-600);
}
.precios__nota strong { color: var(--grafito-900); }


/* 12 · FUNDADORES Y CONTACTO ========================================= */

.fundadores__beneficios { margin-bottom: var(--sp-3); }
.fundadores__cupo {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--grafito-600);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.beneficio {
  background: #fff;
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: var(--sp-3);
}
.beneficio b {
  display: block; color: var(--grafito-900); font-size: var(--fs-h4);
  margin-bottom: .3rem; line-height: 1.2;
}
.beneficio span { font-size: var(--fs-small); color: var(--grafito-600); }

/* --- Puesta en marcha: lo que hacemos nosotros antes de que entre ------
   Mismo peso visual que .destacado-bastones (línea ~871): tarjeta blanca,
   filete arriba, sello rotado, tres pasos separados por línea. No reusa esas
   clases porque aquel bloque se apoya sobre --papel y este sobre --verde-claro. */
.arranque {
  position: relative;
  background: var(--blanco);
  border: 2px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  box-shadow:
    0 1px 2px rgba(74,117,25,.08),
    0 8px 20px rgba(74,117,25,.10),
    0 28px 56px rgba(74,117,25,.12);
}
.arranque::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
  border-radius: calc(var(--radio) - 2px) calc(var(--radio) - 2px) 0 0;
  background: linear-gradient(90deg,
    var(--verde-marca), var(--verde-accion) 45%, transparent 72%);
}

/* El aro va del color del fondo de .seccion--oscura (--verde-claro), no de
   --papel como en bastones: sin eso el sello queda con un halo crema. */
.arranque__sello {
  position: absolute; top: -16px; right: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--verde-accion); color: #fff;
  font-size: var(--fs-mini); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: 999px;
  border: 3px solid var(--verde-claro);
  box-shadow: 0 4px 12px rgba(74,117,25,.28);
}

.arranque__grilla { display: grid; gap: var(--sp-3); align-items: start; }
@media (min-width: 820px) {
  .arranque__grilla { grid-template-columns: auto 1fr; gap: var(--sp-4); }
}
.arranque__icono {
  width: 60px; height: 60px; border-radius: 16px;
  background: var(--verde-claro);
  border: 1px solid var(--verde-borde);
  display: grid; place-items: center; color: var(--verde-accion);
}

.arranque h3 {
  font-size: clamp(1.45rem, 1.1rem + 1.45vw, 2.25rem);
  letter-spacing: -.03em;
  max-width: 30ch;
}
/* Bloque, no inline: el quiebre natural caía en "planilla. Del / resto" y
   dejaba "Del" colgando. text-wrap: balance no lo arregla porque esas dos
   líneas ya son las más parejas. Con block, cada oración va en su renglón. */
.arranque h3 em {
  display: block;
  font-style: normal; color: var(--verde-accion);
}

.arranque__bajada {
  color: var(--grafito-600);
  font-size: var(--fs-lead); line-height: 1.55;
  max-width: 56rem;
  margin: .75rem 0 0;
}

.arranque__pasos {
  list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--linea);
  display: grid; gap: var(--sp-3);
}
@media (min-width: 820px) {
  .arranque__pasos { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .arranque__pasos li + li {
    border-left: 1px solid var(--linea); padding-left: var(--sp-3);
  }
  .arranque__pasos li { padding-right: var(--sp-3); }
}
.arranque__pasos b {
  display: block; color: var(--verde-accion);
  font-size: var(--fs-h4); letter-spacing: -.01em;
}
.arranque__pasos span {
  display: block; color: var(--grafito-600);
  font-size: var(--fs-small); margin-top: .15rem;
}

/* Tarjeta blanca sobre --papel, en la sección Contacto: el fondo está a un
   pelo del blanco, así que sin borde la tarjeta se desdibuja. Va en --linea,
   como .plan y .tarjeta, que también se apoyan sobre papel; --verde-borde
   queda reservado para las tarjetas dentro de .seccion--oscura. */
.formulario {
  background: #fff;
  color: var(--grafito);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--sombra-md);
  max-width: 44rem; margin-inline: auto;
}
.formulario h3, .formulario h4 { color: var(--grafito-900); }
.formulario h3 { margin-bottom: .4rem; }
.formulario__bajada { color: var(--grafito-600); font-size: var(--fs-small); margin-bottom: var(--sp-3); }

.campos { display: grid; gap: var(--sp-2); }
@media (min-width: 640px) { .campos { grid-template-columns: 1fr 1fr; } }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  display: block; font-weight: 700; font-size: var(--fs-small);
  color: var(--grafito-900); margin-bottom: .4rem;
}
.campo label .opcional { font-weight: 400; color: var(--grafito-600); }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font-family: inherit; font-size: 1rem;
  color: var(--grafito-900);
  padding: .8rem 1rem;
  min-height: 52px;
  border: 2px solid var(--linea);
  border-radius: var(--radio-sm);
  background: #fff;
  transition: border-color .18s;
}
.campo select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234E4545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}
.campo textarea { min-height: 104px; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--verde-borde); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--verde-accion); outline: none;
  box-shadow: 0 0 0 3px rgba(74,117,25,.18);
}
.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-color: var(--alerta); }

.campo__error {
  display: none;
  margin-top: .35rem;
  font-size: var(--fs-small); font-weight: 500; color: var(--alerta);
}
.campo__error::before { content: '⚠ '; }
.campo__error[data-visible="true"] { display: block; }

.formulario__pie {
  margin-top: var(--sp-3);
  display: grid; gap: var(--sp-2);
}
.formulario__aclaracion {
  font-size: var(--fs-mini); color: var(--grafito-600); text-align: center;
}
.formulario__exito {
  display: none;
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  background: var(--verde-claro);
  border: 1px solid var(--verde-borde);
  border-radius: var(--radio-sm);
  color: var(--verde-hover);
  font-size: var(--fs-small); font-weight: 500;
  text-align: center;
}
.formulario__exito[data-visible="true"] { display: block; }


/* 13 · PREGUNTAS FRECUENTES ========================================== */

.faq { max-width: 52rem; margin-inline: auto; }
.faq__item {
  border-bottom: 1px solid var(--linea);
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: 1.25rem 0;
  font-size: var(--fs-h4); font-weight: 700; color: var(--grafito-900);
  cursor: pointer;
  list-style: none;
  min-height: 56px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2px solid var(--verde-accion);
  border-bottom: 2px solid var(--verde-accion);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__item summary:hover { color: var(--verde-accion); }
.faq__respuesta { padding: 0 0 1.5rem; color: var(--grafito-600); max-width: 46rem; }


/* 14 · PIE DE PÁGINA ================================================= */

/* Verde sólido, no negro: cierra la página con el color de marca.
   --verde-accion y no el 370C, por el mismo motivo que el panel del
   veterinario: con blanco encima el 370C no llega a AA. */
.pie { background: var(--verde-accion); color: rgba(255,255,255,.82); padding-block: var(--sp-8) var(--sp-4); }
.pie__grilla {
  display: grid; gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--linea-clara);
}
@media (min-width: 820px) { .pie__grilla { grid-template-columns: 1.4fr 1fr 1fr; } }

/* El PNG del lockup va recortado al ras de la tinta, sin el padding transparente
   que traía el logo anterior. El aire debajo lo pone el margen, no el archivo. */
.pie__logo img { width: 148px; margin-bottom: var(--sp-3); }
.pie__lema { font-size: var(--fs-small); max-width: 22rem; }

.pie h4 {
  font-size: var(--fs-mini); letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: var(--sp-2);
}
.pie ul li { margin-bottom: .55rem; }
.pie a { color: rgba(255,255,255,.88); text-decoration: none; font-size: var(--fs-small); }
.pie a:hover { color: #fff; text-decoration: underline; }

.pie__legal {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  padding-top: var(--sp-3);
  font-size: var(--fs-mini); color: rgba(255,255,255,.7);
}


/* 15 · WHATSAPP FLOTANTE ============================================= */

.wa-flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: var(--verde-accion);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(42,36,36,.3);
  text-decoration: none;
  transition: transform .2s, background-color .2s;
}
.wa-flotante:hover { background: var(--verde-hover); color: #fff; transform: scale(1.06); }
@media (min-width: 1021px) { .wa-flotante { right: 1.75rem; bottom: 1.75rem; } }


/* 16 · POPUP DEL PROGRAMA DE FUNDADORES ============================== */

/* Aparece a los 2,5 s y una sola vez por pestaña. Ver iniciarPopup() en
   main.js. La landing tenía un solo camino de conversión visible (el
   formulario del final): el que no scrollea se iba sin enterarse del
   programa.

   Flex + margin:auto y no place-items:center: con grid centrado, un panel
   más alto que la ventana se recorta por arriba y el título queda fuera
   de alcance. Así no. */
.popup {
  position: fixed; inset: 0; z-index: 300;
  display: flex; overflow-y: auto;
  padding: var(--sp-3);
  visibility: hidden; opacity: 0;
  /* visibility con retardo y no interpolada: al cerrar espera a que termine
     el fundido, y al abrir cambia en el acto. Con "visibility .24s" el valor
     computado en t=0 seguía siendo hidden y el navegador rechazaba el
     focus() del primer botón sin avisar. */
  transition: opacity .24s ease, visibility 0s linear .24s;
}
.popup[data-abierto="true"] {
  visibility: visible; opacity: 1;
  transition: opacity .24s ease, visibility 0s linear 0s;
}

.popup__velo {
  position: absolute; inset: 0;
  background: rgba(42, 36, 36, .55);
  backdrop-filter: blur(2px);
}

/* Mismo lenguaje que .arranque (línea ~1289): tarjeta blanca, borde verde,
   filete arriba y sombra teñida de verde en tres capas. El popup es su
   hermano flotante, no un componente de otro sistema. */
.popup__panel {
  position: relative; z-index: 310;
  margin: auto;
  width: 100%; max-width: 33rem;
  background: var(--blanco);
  border: 2px solid var(--verde-borde);
  border-radius: var(--radio);
  padding: clamp(1.6rem, 4vw, 2.25rem);
  box-shadow:
    0 1px 2px rgba(74,117,25,.08),
    0 8px 20px rgba(74,117,25,.10),
    0 28px 56px rgba(74,117,25,.12);
  transform: translateY(14px) scale(.98);
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.popup[data-abierto="true"] .popup__panel { transform: none; }

.popup__panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
  border-radius: calc(var(--radio) - 2px) calc(var(--radio) - 2px) 0 0;
  background: linear-gradient(90deg,
    var(--verde-marca), var(--verde-accion) 45%, transparent 72%);
}

/* El sello va a la izquierda: a la derecha choca con el botón de cerrar.
   El aro es del color de lo que hay atrás, que acá es la foto del hero,
   así que va blanco y no --verde-claro como en .arranque__sello. */
.popup__sello {
  position: absolute; top: -15px; left: clamp(1.25rem, 5vw, 2rem);
  background: var(--verde-accion); color: #fff;
  font-size: var(--fs-mini); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .95rem; border-radius: 999px;
  border: 3px solid var(--blanco);
  box-shadow: 0 4px 12px rgba(74,117,25,.28);
}

/* 44px de lado: el mínimo táctil. Queda a la altura de la volanta, dos
   renglones arriba del título, así que el título no necesita reservarle
   ancho (reservarlo sólo partía el titular de más). */
.popup__cerrar {
  position: absolute; top: .7rem; right: .7rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--grafito-600); cursor: pointer;
  transition: background-color .18s, color .18s;
}
.popup__cerrar:hover { background: var(--crema-hondo); color: var(--grafito-900); }

.popup__titulo {
  font-size: clamp(1.5rem, 1.2rem + .9vw, 1.85rem);
  letter-spacing: -.03em;
  margin: 0;
}

.popup__bajada {
  color: var(--grafito-600);
  font-size: var(--fs-small); line-height: 1.6;
  margin: .7rem 0 0;
}

.popup .lista-check {
  margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--linea);
}
.popup .lista-check strong { color: var(--grafito-900); }
/* .55rem en la página, .38rem acá: en un panel flotante cada renglón de
   más empuja los botones abajo del pliegue en una laptop de 900px. */
.popup .lista-check li { padding: .38rem 0; }

.popup__pregunta {
  margin: var(--sp-3) 0 .75rem;
  font-size: var(--fs-small); font-weight: 700; color: var(--grafito-900);
}

/* Botones alineados a la izquierda: son tres opciones para elegir, no tres
   llamados a la acción compitiendo. Centrados leían como un muro. */
.popup__acciones { display: grid; gap: .6rem; }
.popup__acciones .btn { justify-content: flex-start; padding-inline: 1.25rem; }

.popup__pie {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-2);
  border-top: 1px solid var(--linea);
  text-align: center;
  font-size: var(--fs-mini); color: var(--grafito-600); line-height: 1.6;
}
.popup__ahora-no {
  display: inline-block; margin-top: .5rem;
  color: var(--grafito-600); font-size: var(--fs-mini);
  font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer;
}
.popup__ahora-no:hover { color: var(--grafito-900); }

/* Con el popup abierto el botón flotante se va: dos entradas a WhatsApp
   a la vez, en 390px y a 3px de distancia, es una sola cosa dos veces. */
[data-popup="abierto"] .wa-flotante { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .popup__panel { transform: none; }
}


/* 17 · ANIMACIONES Y ACCESIBILIDAD =================================== */

.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.revelar[data-visible="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revelar { opacity: 1; transform: none; }
  /* El cambio de captura es instantáneo, sin fundido */
  #captura-funcionalidades .captura-sistema[data-cargando] { opacity: 1; }
  .tarjeta--seleccionable:active { transform: none; }
}

@media print {
  .encabezado, .wa-flotante, .popup { display: none !important; }
  .hero__foto, .hero__velo { display: none !important; }
  body { color: #000; }
}