/* CAS, propuesta 07: inmersiva.
   La identidad sale entera de brand.css. Aca solo hay composicion, profundidad y movimiento.
   Dos temas: claro y oscuro. Todo el color pasa por tokens, ninguna seccion se invierte sola. */

/* ============================================================
   0. Tokens. Un sistema, dos temas, los mismos nombres.
   ------------------------------------------------------------
   REGLA DEL ACENTO
   --verde (#76BC21, Pantone 368 del manual) es el unico acento saturado
   y vale igual en los dos temas. Sobre fondo claro da 2.2:1, asi que ahi
   es solo relleno, borde o pastilla: NUNCA color de texto. Para texto va
   --verde-texto, que baja en claro y sube en oscuro. Sobre fondo oscuro
   el verde pleno ya pasa AA y se puede usar suelto.

   ESCALERA DE SUPERFICIES, del fondo hacia adelante
     --papel        fondo de pagina
     --papel-hondo  seccion hundida
     --tapa         tarjeta, popup, panel
     --campo-fondo  campo de formulario dentro de una tapa

   BORDES
     --borde        separador decorativo, sin exigencia de contraste
     --borde-sutil  hairline sobre color, para vidrio y relieves
     --borde-vivo   contorno de control interactivo, 3:1 medido en las
                    cuatro superficies de la escalera

   MEDIA
     Los velos sobre foto y video no dependen del tema: la apertura y
     "Como lo hacemos" son oscuras en los dos. Sus tokens viven aparte,
     con el prefijo --media-, y no se redefinen nunca.

   Los valores del tema oscuro se escriben UNA sola vez, como --o-*.
   Los dos activadores de abajo solo los remapean.

   ESPEJO: este bloque de tokens es identico al de producto.css.
   Si tocas un valor aca, tocalo alla tambien.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- tema claro ---- */
  --papel: #FAFAF8;
  --papel-hondo: #F1F3EC;
  --tapa: #FFFFFF;
  --tinta: #222222;
  --tinta-suave: #5A605B;
  --tinta-tenue: #62685F;
  --borde: #E3E6E1;
  --borde-sutil: rgba(34, 34, 34, 0.12);
  --borde-vivo: #848A80;
  --verde-piso: #F1F8E8;
  --verde-texto: #3F6B12;
  --verde-hondo: #2E4A12;
  --verde-vivo: #83CD25;
  --verde-borde: #CFDCC3;
  --alerta: #B3261E;
  --foco: #3F6B12;

  --cab-fondo: #FFFFFF;
  --papel-nulo: rgba(250, 250, 248, 0);
  /* Velo y filtro de la foto de Compromiso: la textura se ve, el contraste no se mueve */
  --etica-velo: rgba(241, 243, 236, 0.87);
  --etica-filtro: grayscale(0.85) contrast(0.42) brightness(1.2);
  --campo-fondo: #DDE2CF;
  --campo-fondo-foco: #D3D9C2;
  --pack-fondo: radial-gradient(64% 60% at 50% 42%, #FFFFFF 0%, #EBF2E0 100%);
  /* La separacion con el fondo la da la sombra, no una linea. Tres capas:
     una de contacto, una media y una amplia. El anillo es luz, no borde. */
  /* Dos capas y no tres, y la capa larga se recorta: la pagina queda mas plana
     y la jerarquia la sigue dando la elevacion, no la mancha. */
  --sombra-baja: 0 1px 2px rgba(34, 40, 26, 0.04);
  --sombra-alta: 0 14px 32px -22px rgba(34, 40, 26, 0.34);
  --sombra-flota: 0 2px 6px -3px rgba(34, 40, 26, 0.06), 0 14px 26px -16px rgba(34, 40, 26, 0.22);
  --sombra-isla: 0 1px 3px -2px rgba(34, 40, 26, 0.05), 0 9px 20px -14px rgba(34, 40, 26, 0.16);
  --sombra-tarjeta: 0 1px 2px -1px rgba(34, 40, 26, 0.04), 0 7px 16px -12px rgba(34, 40, 26, 0.14);
  --anillo-suave: inset 0 0 0 1px rgba(34, 40, 26, 0.05);
  --anillo-verde: inset 0 0 0 1px rgba(118, 188, 33, 0.34);
  --sombra-modal: 0 26px 56px -34px rgba(6, 10, 4, 0.6);
  --sombra-panel: -18px 0 46px -32px rgba(6, 10, 4, 0.6);
  /* El pack tiene alfa: la sombra la pone el filtro, y cambia de peso por tema */
  --sombra-pack: drop-shadow(0 8px 10px rgba(20, 26, 12, 0.18));
  --sombra-pack-alta: drop-shadow(0 12px 15px rgba(20, 26, 12, 0.24));
  --sombra-pack-modal: drop-shadow(0 10px 13px rgba(20, 26, 12, 0.2));
  --velo-modal: rgba(20, 24, 16, 0.5);
  --brillo-interior: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ---- tema oscuro, definido una sola vez ----
     OLIVA DE CAMPO. El oscuro no es un negro con verde encima: la base ya es
     un color, el verde del manual llevado a su version mas honda y sin brillo.
     Tres decisiones sostienen el tema:

     1. La base tiene temperatura. --o-papel es un oliva calido, no un carbon
        neutro, y sube de L* 7 a L* 14 respecto del oscuro anterior. Deja de
        leerse como negro y empieza a leerse como campo de noche.
     2. La escalera se abre. papel 14, hondo 19, tapa 23, campo 27 en L*:
        cuatro escalones que se distinguen a simple vista, asi la pagina
        respira aunque siga siendo oscura.
     3. El blanco se tiñe. --o-tinta no es blanco puro sino un hueso con un
        susurro de verde, del mismo lado del circulo que la base. Cansa menos
        y suena a la misma familia.

     El verde de relleno sigue siendo #76BC21, Pantone 368 del manual, sin
     tocar. Lo unico que cambia es --o-verde-texto, que sube de luminancia
     para no vibrar sobre una base calida.

     Las otras dos direcciones que se probaron quedaron rotuladas al final de
     este archivo, listas para cambiar con pocas lineas. */
  --o-papel: #202619;
  --o-papel-hondo: #283020;
  --o-tapa: #313A28;
  --o-tinta: #F0F3E2;
  --o-tinta-suave: #B7BFA7;
  --o-tinta-tenue: #B4BCA4;
  --o-borde: #3F4A34;
  --o-borde-sutil: rgba(240, 243, 226, 0.13);
  --o-borde-vivo: #909A84;
  --o-verde-piso: #2C3D18;
  --o-verde-texto: #A6DD59;
  --o-verde-hondo: #C5E98F;
  --o-verde-vivo: #8ACD35;
  --o-verde-borde: #4E6A2A;
  --o-alerta: #FF9E8F;
  --o-foco: #A6DD59;

  --o-cab-fondo: #2D3625;
  --o-papel-nulo: rgba(32, 38, 25, 0);
  /* Con la base mas clara el velo puede aflojar: la hoja de maiz se ve viva
     y verde, no gris, y el texto sigue pasando AA sobre la foto compuesta */
  --o-etica-velo: rgba(40, 48, 32, 0.79);
  --o-etica-filtro: grayscale(0.42) contrast(1) brightness(0.66);
  --o-campo-fondo: #454F38;
  --o-campo-fondo-foco: #4E5940;
  --o-pack-fondo: radial-gradient(64% 60% at 50% 42%, #3D4832 0%, #283020 100%);
  /* La sombra se tiñe del mismo oliva que la base: el negro puro sobre una
     base calida ensucia en vez de separar */
  --o-sombra-baja: 0 1px 2px rgba(8, 11, 5, 0.4);
  --o-sombra-alta: 0 14px 32px -22px rgba(8, 11, 5, 0.75);
  --o-sombra-flota: 0 2px 8px -4px rgba(8, 11, 5, 0.5), 0 14px 28px -16px rgba(8, 11, 5, 0.6);
  --o-sombra-isla: 0 1px 4px -2px rgba(8, 11, 5, 0.46), 0 10px 22px -14px rgba(8, 11, 5, 0.52);
  --o-sombra-tarjeta: 0 1px 3px -2px rgba(8, 11, 5, 0.46), 0 8px 18px -12px rgba(8, 11, 5, 0.54);
  --o-anillo-suave: inset 0 0 0 1px rgba(240, 243, 226, 0.07);
  --o-anillo-verde: inset 0 0 0 1px rgba(166, 221, 89, 0.32);
  --o-sombra-modal: 0 26px 56px -34px rgba(6, 8, 4, 0.88);
  --o-sombra-panel: -18px 0 46px -32px rgba(6, 8, 4, 0.88);
  /* Sobre oscuro una sombra negra no despega el envase: se usa un halo claro */
  --o-sombra-pack: drop-shadow(0 7px 12px rgba(8, 11, 5, 0.45)) drop-shadow(0 0 18px rgba(205, 225, 180, 0.12));
  --o-sombra-pack-alta: drop-shadow(0 11px 17px rgba(8, 11, 5, 0.52)) drop-shadow(0 0 22px rgba(205, 225, 180, 0.16));
  --o-sombra-pack-modal: drop-shadow(0 9px 14px rgba(8, 11, 5, 0.48)) drop-shadow(0 0 20px rgba(205, 225, 180, 0.14));
  --o-velo-modal: rgba(11, 14, 8, 0.74);
  --o-brillo-interior: inset 0 1px 0 rgba(240, 243, 226, 0.09);

  /* ---- fijos en los dos temas ---- */
  /* El verde pleno de marca y el color que se le apoya encima */
  --sobre-verde: #14170F;
  /* Superficie de tinta plena, para el boton de cotizacion y el aviso */
  --sobre-tinta: var(--papel);
  --sobre-tinta-tenue: rgba(128, 128, 128, 0.32);
  /* El pie es siempre oscuro, en los dos temas: es el cierre de la pagina */
  --pie-fondo: #1A1E14;
  --pie-texto: #C3C7BC;
  --pie-fuerte: #F5F5F0;
  /* Texto y velos sobre foto o video */
  --media-txt: #FFFFFF;
  --media-txt-suave: rgba(255, 255, 255, 0.92);
  /* Velos de la apertura y de "Como lo hacemos": son fotograficos, no de tema */
  /* La franja de arriba pesa mas que antes: ahi flota la cabecera sin fondo y
     el blanco tiene que pasar AA sobre el cielo del atardecer. Abajo el velo
     sigue siendo minimo, el video se tiene que ver. */
  --media-velo-alto: linear-gradient(180deg, rgba(14, 18, 10, 0.66) 0%, rgba(14, 18, 10, 0.46) 8%, rgba(18, 22, 14, 0.08) 18%, rgba(18, 22, 14, 0.05) 54%, rgba(18, 22, 14, 0.26) 100%);
  --media-sombra-txt: 0 2px 30px rgba(10, 14, 6, 0.35);
  --media-sombra-txt-chica: 0 1px 20px rgba(10, 14, 6, 0.4);
  /* Halo para la cabecera sin plato: oscurece lo justo alrededor del glifo para
     que el blanco pase AA sobre cualquier cuadro del video, incluido el cielo. */
  /* Circulo del icono dentro de un boton lleno: siempre oscurece el relleno */
  --ico-en-boton: rgba(0, 0, 0, 0.12);
  --ico-en-boton-hover: rgba(0, 0, 0, 0.18);
  /* Sobre papel claro el video crudo deja las letras del troquel lavadas:
     se le baja el brillo para que la palabra pese. Sobre oscuro no hace falta. */
  --troquel-filtro: brightness(0.74) saturate(1.2) contrast(1.08);
  --o-troquel-filtro: saturate(1.12) contrast(1.04);

  /* brand.css lee estos: se redefinen para que el resto del sistema siga el tema */
  --texto: var(--tinta);
  --texto-suave: var(--tinta-suave);
  --linea: var(--borde);
  --superficie: var(--papel-hondo);

  /* ---- escala tipografica ----
     Un solo sistema para toda la pagina. La razon es 1.25 en el tramo de
     texto (t-1 a t-6) y 1.25 al cuadrado en el de display (t-6 a t-8), que
     es donde el salto tiene que sentirse. El ancla es 17px, el cuerpo.

       t-1  10.9   rotulo micro en mayusculas, contadores, fuentes
       t-2  13.6   interfaz: navegacion, botones, campos, chips, pies
       t-3  17     texto corrido, el cuerpo de la pagina
       t-4  17 a 21.3   bajadas y parrafos de entrada
       t-5  21.3 a 26.6 titulos de tarjeta y de bloque
       t-6  26.6 a 33.2 titulos medianos, nombre en la ficha
       t-7  33.2 a 51.9 titulo de seccion
       t-8  41.5 a 81.1 h1, cifras y el año de la linea de tiempo

     Los cuatro pasos fluidos tienen los dos extremos sobre la misma
     escalera: el clamp interpola, no inventa un tamaño nuevo.
     ESPEJO: identico en producto.css. */
  --t-1: 0.68rem;
  --t-2: 0.85rem;
  --t-3: 1.0625rem;
  --t-4: clamp(1.0625rem, 1.5vw, 1.328rem);
  --t-5: clamp(1.328rem, 1.9vw, 1.66rem);
  --t-6: clamp(1.66rem, 2.4vw, 2.075rem);
  --t-7: clamp(2.075rem, 3.8vw, 3.243rem);
  --t-8: clamp(2.594rem, 6vw, 5.068rem);

  --r-xl: 34px;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 12px;
  --r-pastilla: 999px;

  --sal: cubic-bezier(0.22, 1, 0.36, 1);
  --aire: clamp(4.5rem, 10vw, 9.5rem);
  --canal: max(calc((100vw - 1240px) / 2), clamp(1.25rem, 2.5vw, 3rem));

  /* La cabecera es una isla: --cab-alto es su altura propia, --cab-aire el
     aire que la separa del borde, y --h-cab lo que ocupa en total. Todo lo
     que se pega abajo de ella mide contra --h-cab. */
  --cab-alto: 58px;
  --cab-aire: 12px;
  --h-cab: 70px;
  /* Alto real de la barra del catalogo, medido en pantalla y escrito en rem
     para que acompañe si el visitante agranda la tipografia. El panel de
     filtros se pega justo debajo de ella, no debajo de la cabecera. */
  --h-barra: 4.2rem;
  --h-filtros: calc(var(--h-cab) + 0.4rem + var(--h-barra) + 0.9rem);
}

/* Los dos activadores del tema oscuro. Solo remapean: no hay valores nuevos. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --papel: var(--o-papel);
  --papel-hondo: var(--o-papel-hondo);
  --tapa: var(--o-tapa);
  --tinta: var(--o-tinta);
  --tinta-suave: var(--o-tinta-suave);
  --tinta-tenue: var(--o-tinta-tenue);
  --borde: var(--o-borde);
  --borde-sutil: var(--o-borde-sutil);
  --borde-vivo: var(--o-borde-vivo);
  --verde-piso: var(--o-verde-piso);
  --verde-texto: var(--o-verde-texto);
  --verde-hondo: var(--o-verde-hondo);
  --verde-vivo: var(--o-verde-vivo);
  --verde-borde: var(--o-verde-borde);
  --alerta: var(--o-alerta);
  --foco: var(--o-foco);
  --cab-fondo: var(--o-cab-fondo);
  --papel-nulo: var(--o-papel-nulo);
  --etica-velo: var(--o-etica-velo);
  --etica-filtro: var(--o-etica-filtro);
  --campo-fondo: var(--o-campo-fondo);
  --campo-fondo-foco: var(--o-campo-fondo-foco);
  --pack-fondo: var(--o-pack-fondo);
  --sombra-baja: var(--o-sombra-baja);
  --sombra-alta: var(--o-sombra-alta);
  --sombra-flota: var(--o-sombra-flota);
  --sombra-isla: var(--o-sombra-isla);
  --sombra-tarjeta: var(--o-sombra-tarjeta);
  --anillo-suave: var(--o-anillo-suave);
  --anillo-verde: var(--o-anillo-verde);
  --sombra-modal: var(--o-sombra-modal);
  --sombra-panel: var(--o-sombra-panel);
  --sombra-pack: var(--o-sombra-pack);
  --sombra-pack-alta: var(--o-sombra-pack-alta);
  --sombra-pack-modal: var(--o-sombra-pack-modal);
  --velo-modal: var(--o-velo-modal);
  --brillo-interior: var(--o-brillo-interior);
  --troquel-filtro: var(--o-troquel-filtro);
  --pie-fondo: #2D3625;
}

/* Sin JS el sitio queda en claro, igual que con JS: el tema no depende
   de como tenga configurada su maquina el visitante. */


/* ============================================================
   1. Base
   ============================================================ */

/* El overflow vive solo en body: puesto tambien en html, el sticky de la apertura se rompe */
/* La familia se declara tambien en html: brand.css solo la pone en body y el
   elemento raiz se quedaba en la serif del navegador. */
html { font-family: var(--fuente); }
body { background: var(--papel); color: var(--tinta); font-size: var(--t-3); overflow-x: hidden; }

/* Los controles no heredan tipografia por su cuenta: sin esto el navegador
   les mete Arial y aparecen cinco familias distintas en la misma pagina. */
button, input, select, textarea, optgroup {
  font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit;
}

/* Piso de la escala para cualquier titulo sin regla propia: si no, el
   navegador le pone su tamaño de fabrica y se cuela fuera del sistema. */
h1, h2, h3, h4, h5, h6 { font-size: var(--t-5); }

[hidden] { display: none !important; }
section[id] { scroll-margin-top: calc(var(--h-cab) + 1.5rem); }

::selection { background: var(--verde); color: var(--sobre-verde); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 4px; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--tinta); color: var(--sobre-tinta); padding: 0.8rem 1.2rem;
  border-radius: var(--r-pastilla); text-decoration: none; font-weight: 700;
  transition: top 0.25s var(--sal);
}
.saltar:focus { top: 16px; }

.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.rubro {
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tinta-tenue); margin: 0 0 1.1rem;
}
.rubro--verde { color: var(--verde-texto); }
.rubro__num { color: var(--verde-texto); margin-right: 0.5rem; }

/* ---------- Reveladores ---------- */
html.revelar-listo .revelar { opacity: 0; transform: translateY(30px); }
html.revelar-listo .revelar.visible {
  opacity: 1; transform: none;
  transition: opacity 0.85s var(--sal), transform 0.85s var(--sal);
}
html.revelar-listo .revelar.visible[data-demora="1"] { transition-delay: 0.09s; }
html.revelar-listo .revelar.visible[data-demora="2"] { transition-delay: 0.18s; }
html.revelar-listo .revelar.visible[data-demora="3"] { transition-delay: 0.27s; }
html.simple .revelar { opacity: 1 !important; transform: none !important; }

/* Palabra a palabra: la sube una mascara, no una opacidad. Viene de la version cinetica. */
.palabra {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.14em 0.05em; margin: -0.14em -0.05em;
}
.palabra i { display: block; font-style: normal; }
html.js .palabra i { transform: translateY(140%); transition: transform 0.9s var(--sal); }
html.js [data-visto="true"] .palabra i { transform: none; }
html.simple .palabra i { transform: none !important; transition: none !important; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.85rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  border: 0; border-radius: var(--r-pastilla);
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform 0.5s var(--sal), background-color 0.4s var(--sal), color 0.4s var(--sal), box-shadow 0.5s var(--sal);
}
.boton__ico {
  display: grid; place-items: center;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: var(--ico-en-boton); font-size: var(--t-2); line-height: 1;
  transition: transform 0.5s var(--sal), background-color 0.4s var(--sal);
}
.boton--verde { background: var(--verde); color: var(--sobre-verde); box-shadow: 0 8px 16px -12px rgba(80, 130, 20, 0.65); }
.boton--verde:hover { background: var(--verde-vivo); transform: translateY(-2px); }
.boton--verde:active { transform: translateY(0) scale(0.985); }
.boton:hover .boton__ico { transform: translate(2px, -2px); background: var(--ico-en-boton-hover); }
.boton--linea {
  background: transparent; color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--borde-vivo);
  padding: 0.85rem 1.5rem; gap: 0.5rem;
}
.boton--linea:hover { box-shadow: inset 0 0 0 1px var(--verde-texto); color: var(--verde-texto); transform: translateY(-2px); }
.boton--ancho { width: 100%; }
.boton--chico { font-size: var(--t-2); padding: 0.4rem 0.4rem 0.4rem 1.1rem; }
.boton--chico.boton--linea { padding: 0.62rem 1.1rem; }
.boton--chico .boton__ico { width: 1.8rem; height: 1.8rem; font-size: var(--t-2); }
.boton:disabled { opacity: 0.4; cursor: not-allowed; }
.boton:disabled:hover { transform: none; }

.ico-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta); cursor: pointer;
  transition: background-color 0.3s var(--sal), color 0.36s var(--sal);
}
.ico-btn:hover { background: var(--borde-sutil); }

.enlace {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--verde-texto); text-decoration: underline; text-underline-offset: 3px;
}

/* ============================================================
   2. Cabecera: isla flotante de vidrio
   ============================================================ */

/* La cabecera tiene dos estados y el cambio lo decide un IntersectionObserver
   sobre el final de la apertura, nunca el evento de scroll.

   1. Sobre el video (.cab--sobre-video): no hay plato. Ni isla, ni vidrio, ni
      sombra, ni repisa. Solo el logo, la navegacion, el tema y el carrito
      flotando. La legibilidad la resuelve la sombra de texto y el velo que ya
      tiene la propia apertura, nunca una placa.
   2. Fuera del video: la isla se planta con fondo solido, blanco en claro y
      carbon en oscuro, apoyada en una repisa del color del papel que impide
      que se vea pasar contenido por arriba y por los costados.

   El estado por defecto es el solido: sin JS, sin observador o con el hero
   fuera de juego, la cabecera siempre es legible. */
.cab {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  padding-top: var(--cab-aire);
  pointer-events: none;
  transition: opacity 0.7s var(--sal);
}
.cab::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--cab-aire) + var(--cab-alto) + 16px);
  background: linear-gradient(
    to bottom,
    var(--papel) 0,
    var(--papel) calc(var(--cab-aire) + var(--cab-alto)),
    var(--papel-nulo) 100%);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  pointer-events: none;
  transition: opacity 0.36s var(--sal);
}
.cab__fila {
  position: relative;
  pointer-events: auto;
  width: min(100% - clamp(1.5rem, 4vw, 4rem), 1240px); margin-inline: auto;
  height: var(--cab-alto); display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.4rem);
  padding-inline: clamp(0.6rem, 1.2vw, 1rem);
  /* Mas radio: la isla es una pastilla, como la del detalle de producto */
  border-radius: var(--r-pastilla);
  background: var(--cab-fondo);
  /* Sin contorno duro: la separacion la da la sombra en capas */
  box-shadow: var(--anillo-suave), var(--sombra-isla), var(--brillo-interior);
  transition: background-color 0.36s var(--sal), box-shadow 0.36s var(--sal), color 0.36s var(--sal);
}

/* ---------- Estado 1: sobre el video ---------- */
/* Sobre el video no hay isla ni halo por letra: la legibilidad la resuelve una
   franja degradada en el borde superior, que es una sola pieza, no ensucia el
   dibujo de la tipografia y se apaga sola hacia abajo. */
.cab--sobre-video::before {
  opacity: 1;
  /* Mas alta que la isla para que el corte no se note: la franja se apaga
     mucho despues de que termina el texto. */
  height: calc(var(--cab-aire) + var(--cab-alto) + 64px);
  background: linear-gradient(
    to bottom,
    rgba(6, 10, 3, 0.5) 0%,
    rgba(6, 10, 3, 0.4) 42%,
    rgba(6, 10, 3, 0.22) 68%,
    rgba(6, 10, 3, 0) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.cab--sobre-video .cab__fila {
  background: transparent;
  box-shadow: none;
}
/* Sin plato, la fila no debe seguir tapando el video: el clic pasa por el
   hueco y solo lo reciben los elementos que de verdad hay. */
.cab--sobre-video .cab__fila { pointer-events: none; }
.cab--sobre-video .cab__fila > * { pointer-events: auto; }
.cab--sobre-video .cab__nav a,
.cab--sobre-video .ico-btn { color: var(--media-txt); }
.cab--sobre-video .cab__nav a:hover { color: var(--media-txt); }
.cab--sobre-video .cab__nav a::after { background: var(--media-txt); }
.cab--sobre-video .ico-btn:hover { background: rgba(255, 255, 255, 0.16); }
/* El carrito deja de ser una placa negra y pasa a ser un contorno de luz */
.cab--sobre-video .cab__cotizar {
  background: transparent; color: var(--media-txt);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.cab--sobre-video .cab__cotizar:hover { background: rgba(255, 255, 255, 0.14); opacity: 1; }
.cab--sobre-video .cab__cuenta[data-vacio="si"] { background: rgba(6, 10, 3, 0.62); color: var(--media-txt); }
.cab--sobre-video .cab__trazo { background: var(--media-txt); }
.cab--sobre-video .cab__hamburguesa:hover { background: rgba(255, 255, 255, 0.16); }
/* Sobre el video manda la version blanca del isotipo, sea cual sea el tema */
.cab--sobre-video .cab__logo--color { opacity: 0; }
.cab--sobre-video .cab__logo--blanco { opacity: 1; }
.cab__logo { transition: opacity 0.36s var(--sal); }
/* Solo con JS y con movimiento pleno la cabecera espera al aterrizaje del logo */
html.js:not(.simple) .cab { opacity: 0; }
html.js:not(.simple) .cab .cab__fila { pointer-events: none; }
html.js:not(.simple) .cab--visible { opacity: 1; }
html.js:not(.simple) .cab--visible .cab__fila { pointer-events: auto; }
/* El logo completo con las hojas. El hueco es el destino de las letras que aterrizan. */
.cab__marca { display: block; flex: 0 0 auto; text-decoration: none; }
.cab__isotipo {
  position: relative; display: block; width: 38px; aspect-ratio: 117.261 / 125;
  transition: transform 0.5s var(--sal), opacity 0.4s var(--sal);
}
.cab__marca:hover .cab__isotipo { transform: scale(1.06); }
.cab__logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cab__logo--blanco { opacity: 0; }
:root[data-tema="oscuro"] .cab__logo--color { opacity: 0; }
:root[data-tema="oscuro"] .cab__logo--blanco { opacity: 1; }
:root[data-tema="oscuro"] #cas-letras path { fill: var(--tinta); }

/* Apenas entra la foto del campo las letras que vuelan pasan a blanco: aterrizan
   sobre el video, no sobre una isla clara, y en tema claro quedarian ilegibles. */
#cas-letras path { transition: fill 0.6s var(--sal); }
:root.marca-sobre-foto #cas-letras path { fill: var(--media-txt); }
/* Mientras corre la apertura el logo de la cabecera no esta: lo trae el aterrizaje */
html.apertura-lista .cab__isotipo { opacity: 0; }
.cab__hueco { position: absolute; display: block; pointer-events: none; }

.busca label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.cab__nav { display: none; gap: clamp(1.1rem, 2.1vw, 2rem); margin-left: auto; margin-right: clamp(1.1rem, 2.4vw, 2.2rem); }
/* Mas cuerpo y menos peso: se lee mejor sin necesidad de engordar la letra */
.cab__nav a {
  position: relative; text-decoration: none; font-size: var(--t-3); font-weight: 400;
  color: var(--tinta-suave); padding: 0.4rem 0; transition: color 0.35s var(--sal);
}
.cab__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--verde); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--sal);
}
.cab__nav a:hover { color: var(--verde-texto); }
.cab__nav a:hover::after { transform: scaleX(1); }

.cab__acciones { display: flex; align-items: center; gap: 0.25rem; }
.cab__cotizar {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: inherit; font-weight: 700; font-size: var(--t-2); cursor: pointer;
  border: 0; border-radius: var(--r-pastilla);
  background: var(--tinta); color: var(--sobre-tinta);
  padding: 0.55rem 0.55rem 0.55rem 1rem; margin-left: 0.3rem;
  transition: transform 0.5s var(--sal), opacity 0.4s var(--sal),
              background-color 0.36s var(--sal), color 0.36s var(--sal), box-shadow 0.36s var(--sal);
}
.cab__cotizar:hover { transform: translateY(-1px); opacity: 0.88; }
.cab__cotizar .ico { width: 18px; height: 18px; }
.cab__cotizar-txt { display: none; }
.cab__cuenta {
  display: grid; place-items: center; min-width: 1.55rem; height: 1.55rem;
  padding: 0 0.4rem; border-radius: var(--r-pastilla);
  background: var(--verde); color: var(--sobre-verde); font-size: var(--t-1);
  transition: background-color 0.36s var(--sal), color 0.36s var(--sal);
}
.cab__cuenta[data-vacio="si"] { background: var(--sobre-tinta-tenue); color: var(--sobre-tinta); }

/* Control secundario: pesa menos que el boton de cotizacion, pero conserva
   los 44px de area de toque con un area invisible alrededor del circulo. */
.ico-btn--tema { width: 30px; height: 30px; color: var(--tinta-suave); }
.ico-btn--tema .ico { width: 17px; height: 17px; }
.ico-btn--tema::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.ico-btn--tema:hover { color: var(--tinta); }
.cab__acciones .ico-btn--tema { position: relative; margin-right: 0.15rem; }

/* El icono anuncia la accion, no el estado: en claro se ve la luna */
#cambiar-tema .ico--sol { display: none; }
:root[data-tema="oscuro"] #cambiar-tema .ico--luna { display: none; }
:root[data-tema="oscuro"] #cambiar-tema .ico--sol { display: block; }


.cab__hamburguesa {
  display: block; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; position: relative;
}
.cab__hamburguesa:hover { background: var(--borde-sutil); }
.cab__trazo {
  position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 2px;
  background: var(--tinta);
  transition: transform 0.45s var(--sal), background-color 0.36s var(--sal);
}
.cab__trazo--uno { top: 17px; }
.cab__trazo--dos { top: 23px; }
.cab__hamburguesa[aria-expanded="true"] .cab__trazo--uno { transform: translateY(3px) rotate(45deg); }
.cab__hamburguesa[aria-expanded="true"] .cab__trazo--dos { transform: translateY(-3px) rotate(-45deg); }

@media (min-width: 1024px) {
  .cab__nav { display: flex; }
  .cab__cotizar-txt { display: inline; }
  .cab__hamburguesa { display: none; }
}

.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: center; gap: 0.5rem;
  padding: 6rem var(--canal) 3rem;
  background: var(--papel);
  opacity: 0; transition: opacity 0.5s var(--sal);
}
.menu[hidden] { display: none; }
.menu--abierto { opacity: 1; }
.menu__lista { display: flex; flex-direction: column; }
.menu__lista a {
  font-size: var(--t-7); font-weight: 700; letter-spacing: -0.03em;
  text-decoration: none; color: var(--tinta); padding: 0.3rem 0;
  opacity: 0; transform: translateY(24px);
}
.menu--abierto .menu__lista a {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--sal), transform 0.6s var(--sal);
}
.menu--abierto .menu__lista a:nth-child(1) { transition-delay: 0.06s; }
.menu--abierto .menu__lista a:nth-child(2) { transition-delay: 0.11s; }
.menu--abierto .menu__lista a:nth-child(3) { transition-delay: 0.16s; }
.menu--abierto .menu__lista a:nth-child(4) { transition-delay: 0.21s; }
.menu--abierto .menu__lista a:nth-child(5) { transition-delay: 0.26s; }
.menu--abierto .menu__lista a:nth-child(6) { transition-delay: 0.31s; }
.menu__wa {
  margin-top: 2rem; align-self: flex-start;
  background: var(--verde); color: var(--sobre-verde); font-weight: 700;
  padding: 0.9rem 1.6rem; border-radius: var(--r-pastilla); text-decoration: none;
}

/* ============================================================
   3. El logo que se abre
   ============================================================ */

.marca {
  position: fixed; inset: 0; z-index: 65;
  /* La fila fija en 100%: sin esto la grilla crece hasta el alto del logo,
     centrar no surte efecto y el excedente se va todo para abajo. */
  display: grid; grid-template-rows: 100%; grid-template-columns: 100%;
  place-items: center;
  overflow: hidden; pointer-events: none;
}
/* Sin JS o sin movimiento no hay apertura: el logo suelto no debe tapar nada */
html:not(.js) .marca, html.simple .marca { display: none; }
.marca__svg { width: min(116vmin, 168vw); height: auto; overflow: visible; }
.marca .hoja { will-change: transform, opacity; }
/* Las texturas del SVG original son bitmaps chicos: a pantalla completa se pixelan */
.marca__svg .hoja--tex { display: none; }
/* ============================================================
   4. Apertura
   ============================================================ */

.apertura { position: relative; }
.cab-centinela { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; pointer-events: none; }
.apertura__escena {
  position: relative; min-height: 100dvh; overflow: hidden;
  background: var(--papel);
}
/* El tramo largo y el arranque en cero valen solo cuando el JS los va a animar */
html.js:not(.simple) .apertura { height: 320vh; }
html.js:not(.simple) .apertura__escena { position: sticky; top: 0; min-height: 0; height: 100dvh; }
html.js:not(.simple) .apertura__fondo,
html.js:not(.simple) .apertura__velo,
html.js:not(.simple) .apertura__copy { opacity: 0; }
.apertura__fondo { position: absolute; inset: 0; will-change: transform, opacity; }
.apertura__foto, .apertura__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Velo global minimo: el video se tiene que ver. Nada de lineas ni tramas encima. */
.apertura__velo {
  position: absolute; inset: 0;
  background: var(--media-velo-alto);
}
/* Foco local: solo detras del texto. El sol del atardecer deja el blanco en 1.9:1 sin esto. */
.apertura__velo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(6, 10, 3, 0.86) 0%, rgba(6, 10, 3, 0.80) 20%, rgba(6, 10, 3, 0.72) 38%,
    rgba(6, 10, 3, 0.58) 52%, rgba(6, 10, 3, 0.3) 66%, rgba(6, 10, 3, 0.08) 80%, rgba(6, 10, 3, 0) 90%);
}
/* Desde 768px la mascara recorta el foco a la mitad izquierda, donde vive el texto */
@media (min-width: 768px) {
  .apertura__velo::after {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 46%, rgba(0, 0, 0, 0.5) 62%, transparent 78%);
            mask-image: linear-gradient(to right, #000 0%, #000 46%, rgba(0, 0, 0, 0.5) 62%, transparent 78%);
  }
}
.apertura__copy {
  position: absolute; left: var(--canal); right: var(--canal); bottom: clamp(3.5rem, 9vh, 7rem);
  max-width: 1240px; margin-inline: auto;
  color: var(--media-txt); will-change: transform, opacity;
}
.apertura__copy h1 {
  font-size: var(--t-8); line-height: 0.95; letter-spacing: -0.035em;
  max-width: 13ch; text-shadow: var(--media-sombra-txt);
}
.apertura__copy p {
  margin: 1.2rem 0 2rem; max-width: 44ch;
  font-size: var(--t-4); color: var(--media-txt-suave);
  text-shadow: var(--media-sombra-txt-chica);
}


/* ============================================================
   5. Catalogo
   ============================================================ */

.catalogo { padding-block: var(--aire) clamp(4rem, 8vw, 7rem); }
.catalogo__cabeza { max-width: 62ch; }
.catalogo h2 { font-size: var(--t-7); max-width: 18ch; }
.catalogo__intro { margin: 1.3rem 0 0; color: var(--tinta-suave); font-size: var(--t-4); }
@media (min-width: 1024px) {
  .catalogo__cabeza {
    max-width: none; display: grid; align-items: end; gap: 0.5rem 3.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .catalogo__cabeza .rubro { grid-column: 1 / -1; margin-bottom: 0.3rem; }
  .catalogo__intro { max-width: 56ch; }
}

/* El titulo comparte renglon con el buscador: sin margen y sin escalon intermedio */
.catalogo__titulo {
  font-size: var(--t-6); letter-spacing: -0.025em;
  margin: 0 auto 0 0; line-height: 1;
}

.catalogo__barra {
  position: sticky; top: calc(var(--h-cab) + 0.4rem); z-index: 40;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 1.4rem; padding: 0.85rem 0;
  background: var(--papel);
  box-shadow: inset 0 -1px 0 var(--borde-sutil);
}
.busca { position: relative; flex: 1 1 240px; }
.busca .ico { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tinta-tenue); }
.busca input {
  width: 100%; font: inherit; font-size: var(--t-2); color: var(--tinta);
  padding: 0.62rem 2.4rem 0.62rem 2.4rem;
  border: 0; border-radius: var(--r-pastilla); background: var(--campo-fondo);
  transition: background-color 0.3s var(--sal), box-shadow 0.3s var(--sal);
}
.busca input::placeholder { color: var(--tinta-tenue); }
.busca input:focus { background: var(--campo-fondo-foco); box-shadow: inset 0 0 0 2px var(--verde-texto); outline-offset: 0; }
.busca input::-webkit-search-cancel-button { display: none; }
/* Sin reset el navegador le pone su propio borde y fondo gris */
.busca__x {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinta-suave); cursor: pointer;
  transition: background-color 0.3s var(--sal), color 0.3s var(--sal);
}
.busca__x:hover { background: var(--borde-sutil); color: var(--tinta); }

.catalogo__abrefiltros { flex: none; }
.pastilla {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 0.3rem;
  border-radius: var(--r-pastilla); background: var(--verde); color: var(--sobre-verde);
  font-size: var(--t-1); font-weight: 700;
}
.catalogo__res { flex: none; margin: 0; font-size: var(--t-2); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
/* En escritorio el bloque de busqueda cierra a la derecha, sobre la grilla de
   productos: el ancho de la columna de filtros queda libre a la izquierda y
   el campo deja de ser una barra que cruza la pantalla entera. El contador va
   pegado a su izquierda con ancho fijo, asi el campo no se mueve al filtrar. */
@media (min-width: 1024px) {
  .catalogo__barra { justify-content: flex-end; gap: 1.1rem; }
  .catalogo__abrefiltros { display: none; }
  .busca { flex: 0 1 340px; }
  /* El titulo abre el renglon: el contador tiene orden -1 y sin esto se le pone delante */
  .catalogo__titulo { order: -2; }
  .catalogo__res { order: -1; min-width: 7rem; text-align: right; }
}

/* Sin JS el buscador y los filtros no hacen nada: se retiran y manda el respaldo */
html:not(.js) .catalogo__barra,
html:not(.js) .filtros,
html:not(.js) #cambiar-tema,
html:not(.js) .cab__cotizar { display: none; }

.catalogo__cuerpo { display: block; }
@media (min-width: 1024px) {
  html.js .catalogo__cuerpo { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(2rem, 3vw, 3rem); align-items: start; }
}

/* ---------- Filtros ---------- */
.filtros__velo { position: fixed; inset: 0; z-index: 95; background: var(--velo-modal); }
.filtros {
  position: fixed; inset: 0 auto 0 0; z-index: 96; width: min(88vw, 340px);
  background: var(--tapa); display: flex; flex-direction: column;
  transform: translateX(-101%); transition: transform 0.5s var(--sal);
  box-shadow: var(--sombra-alta);
}
.filtros[data-abierto="si"] { transform: none; }
.filtros__cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.1rem 0.6rem;
}
.filtros__cabeza h3 { font-size: var(--t-4); }
.filtros__scroll { flex: 1; overflow-y: auto; padding: 1.1rem; }
/* Los dos botones no entran de a uno al lado del otro: la columna de filtros
   mide 244px y las dos etiquetas se partian en dos renglones. Van apilados,
   cada uno con el ancho entero, y sin partir nunca la etiqueta. El primario
   arriba, el de limpiar debajo y mas callado. */
.filtros__pie { display: grid; gap: 0.55rem; padding: 1.1rem; }
.filtros__pie .boton {
  width: 100%; justify-content: center; white-space: nowrap;
  padding-inline: 1.2rem;
}
.filtros__pie #ver-res { order: -1; }
/* Sin icono al final, el relleno asimetrico del boton chico descentra el texto */
.filtros__pie .boton--verde { padding-block: 0.62rem; }

@media (min-width: 1024px) {
  .filtros__velo { display: none !important; }
  /* Pegado, pero por debajo de la cabecera. El z-index alto es del panel
     deslizante de mobile: pegado aca lo unico que hacia era montarse sobre
     la isla cuando el catalogo terminaba y el panel subia con la pagina. */
  .filtros {
    position: sticky; top: var(--h-filtros); inset-inline: auto; bottom: auto;
    z-index: 1;
    width: auto; transform: none; max-height: calc(100dvh - var(--h-filtros) - 2rem);
    border: 0; border-radius: var(--r-lg);
    background: var(--tapa); box-shadow: var(--sombra-tarjeta);
  }
  .filtros__cabeza { display: none; }
}

.grupo { border: 0; padding: 0; margin: 0 0 1.6rem; }
.grupo:last-child { margin-bottom: 0; }
.grupo legend {
  padding: 0; margin-bottom: 0.7rem; font-size: var(--t-1); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--tinta-tenue);
}
.grupo__ops { display: flex; flex-direction: column; gap: 0.1rem; }
/* La lista de cultivos es larga: se acota para que momento y maleza queden a la vista */
#ops-cultivos { max-height: 258px; overflow-y: auto; }

.op {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.45rem; border-radius: var(--r-sm); cursor: pointer; font-size: var(--t-2);
  transition: background-color 0.2s var(--sal);
}
.op:hover { background: var(--campo-fondo); }
.op input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 17px; height: 17px; border: 0; border-radius: 4px;
  background: var(--campo-fondo) no-repeat center / 11px; cursor: pointer;
  transition: background-color 0.15s;
}
.op input:checked {
  background-color: var(--verde);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317240A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.op input:checked ~ .op__txt { font-weight: 700; }
.op__txt { flex: 1; }
.op__n { font-size: var(--t-1); color: var(--tinta-tenue); font-variant-numeric: tabular-nums; }
.op[data-cero="si"] { opacity: 0.4; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.2rem; }
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.34rem 0.6rem 0.34rem 0.8rem; font: inherit; font-size: var(--t-2); font-weight: 500;
  background: var(--verde-piso); color: var(--verde-texto);
  border: 0; border-radius: var(--r-pastilla); cursor: pointer;
  transition: transform 0.3s var(--sal);
}
.chip:hover { transform: translateY(-1px); }
.chip .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.chip--limpiar { background: transparent; color: var(--tinta-suave); }

/* ---------- Tarjetas ----------
   Base tomada de la version industrial: cascara de 8px, el pack flotando
   sobre un pedestal, y la ficha tecnica plegada dentro de un details. */

.productos__grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: clamp(1rem, 1.6vw, 1.4rem);
  align-items: stretch;
}

/* Sin contorno: la tarjeta se despega del papel por sombra y por superficie,
   no por una linea. El anillo interior es un reflejo de luz, no un borde. */
.tarjeta {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; text-align: left;
  border: 0; border-radius: var(--r-lg); padding: 1.1rem 1.35rem 1.5rem;
  background: var(--tapa); color: inherit; font: inherit;
  box-shadow: var(--sombra-tarjeta);
  transition: transform 0.6s var(--sal), box-shadow 0.6s var(--sal);
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-flota); }

/* El pack tiene alfa: pedestal suave y sombra propia, sin caja dura */
.tarjeta__medio {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden;
  background: var(--pack-fondo);
}
.tarjeta__medio img {
  width: auto; max-width: 72%; max-height: 88%; object-fit: contain;
  filter: var(--sombra-pack);
  transition: transform 0.7s var(--sal), filter 0.7s var(--sal);
}
.tarjeta:hover .tarjeta__medio img {
  transform: translateY(-4px) scale(1.03);
  filter: var(--sombra-pack-alta);
}
.tarjeta__sello {
  position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; margin: 0;
  background: var(--verde); color: var(--sobre-verde); font-size: var(--t-1); font-weight: 700;
  padding: 0.28rem 0.7rem; border-radius: var(--r-pastilla); letter-spacing: 0.12em; text-transform: uppercase;
}

.tarjeta__cuerpo {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(0.9rem, 1.1vw, 1.15rem) clamp(0.5rem, 0.8vw, 0.85rem) clamp(0.5rem, 0.7vw, 0.75rem);
}
.tarjeta__tipo {
  margin: 0 0 0.5rem; font-size: var(--t-1); font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--tinta-tenue);
}
.tarjeta h3 { font-size: var(--t-5); letter-spacing: -0.025em; }

/* El disparador de la ficha es el boton del nombre, pero su area se estira
   sobre la tarjeta entera con un pseudo-elemento. Sin botones anidados: el
   unico control real que queda adentro es la ficha tecnica plegable.

   El apilado es un contrato de tres capas y hay que respetarlo al agregar
   cosas nuevas a la tarjeta, porque cualquier descendiente posicionado que
   quede por encima de la capa 2 abre un agujero muerto:
     capa 1  contenido de la tarjeta (foto, textos, pastillas)
     capa 2  la capa de clic que abre la ficha
     capa 3  la ficha tecnica plegable, el unico control que no se atrapa */
.tarjeta__btn {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 700;
  font-size: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer;
}
.tarjeta__btn::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  border-radius: var(--r-lg); cursor: pointer;
}
.tarjeta__btn:focus-visible { outline: none; }
/* El foco se dibuja sobre la tarjeta entera, que es el area que se activa */
.tarjeta:has(.tarjeta__btn:focus-visible) { outline: 2px solid var(--foco); outline-offset: 3px; }
/* Puntero en toda la superficie, tambien sobre los huecos sin texto */
.tarjeta { cursor: pointer; }
/* El sello es decoracion: si recibe el clic deja un punto muerto arriba a la izquierda */
.tarjeta__sello { pointer-events: none; }
.tarjeta__activo { margin: 0.3rem 0 0; font-size: var(--t-2); font-weight: 700; color: var(--verde-texto); }
.tarjeta__resumen { margin: 0.75rem 0 0; font-size: var(--t-3); line-height: 1.5; color: var(--tinta-suave); }
.tarjeta__detalle { margin: 0.85rem 0 0; font-size: var(--t-3); line-height: 1.55; color: var(--tinta-suave); }

/* El argumento del destacado sale de su propio resumen, no de texto suelto */
.ventajas { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.ventajas li { position: relative; padding-left: 1.5rem; font-size: var(--t-3); line-height: 1.45; color: var(--tinta-suave); }
/* Estan posicionadas por su vineta y sin esto se montarian sobre la capa de clic */
.tarjeta .ventajas li { z-index: 0; }
.ventajas li::before {
  content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px;
  border-radius: var(--r-pastilla); background: var(--verde);
}

.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.9rem 0 0; padding: 0; }
.etiquetas li {
  font-size: var(--t-1); padding: 0.22rem 0.62rem; border-radius: var(--r-pastilla);
  border: 0; color: var(--tinta-suave); background: var(--papel-hondo);
}

/* Ficha tecnica plegada. Va por encima de la capa que abre el popup:
   si no, el resumen se lleva el clic y el details nunca abre. */
/* Sin una linea por renglon: la columna fija ya alinea la lectura */
.tabla { margin: 0.9rem 0 0; display: grid; gap: 0.5rem; }
.tabla div { display: grid; grid-template-columns: 40% 1fr; gap: 0.6rem; }
.tabla dt { font-size: var(--t-1); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-tenue); }
.tabla dd { margin: 0; font-size: var(--t-2); font-weight: 500; }

.tarjeta__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.1rem; }
.tarjeta__ver { font-size: var(--t-2); font-weight: 700; color: var(--verde-texto); }
.tarjeta__mas {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--verde-piso); color: var(--verde-texto); font-size: var(--t-4);
  transition: transform 0.5s var(--sal), background-color 0.4s var(--sal), color 0.4s var(--sal);
}
.tarjeta:hover .tarjeta__mas { background: var(--verde); color: var(--sobre-verde); transform: translate(2px, -2px); }
.tarjeta--encot { box-shadow: var(--sombra-tarjeta); background: var(--verde-piso); }

/* La destacada cruza dos columnas y cambia de ritmo, no de lenguaje */
@media (min-width: 680px) {
  .tarjeta--destacada {
    grid-column: span 2;
    display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 8px; align-items: stretch;
    background: linear-gradient(180deg, var(--verde-piso) 0%, var(--tapa) 58%);
  }
  .tarjeta--destacada .tarjeta__medio { aspect-ratio: auto; height: 100%; min-height: 300px; }
  .tarjeta--destacada .tarjeta__medio img { max-width: 72%; max-height: 84%; }
  .tarjeta--destacada .tarjeta__cuerpo { justify-content: center; padding: clamp(1.1rem, 1.7vw, 1.7rem) clamp(0.9rem, 1.4vw, 1.4rem); }
  .tarjeta--destacada h3 { font-size: var(--t-6); }
  .tarjeta--destacada .tarjeta__activo { font-size: var(--t-3); }
  .tarjeta--destacada .ventajas li { font-size: var(--t-3); color: var(--tinta); }
  .tarjeta--destacada .tarjeta__detalle { margin: 0.9rem 0 0; font-size: var(--t-3); line-height: 1.6; color: var(--tinta-suave); max-width: 46ch; }
  .tarjeta--destacada .tarjeta__pie { margin-top: 1.2rem; padding-top: 0; }
}

/* ---------- Asesoramiento: la tarjeta que cierra la grilla ----------
   Ocupa las celdas que sobran, medidas en JS: sin ella queda un hueco
   blanco al final, y el hueco se mueve cada vez que el productor filtra. */
.consulta {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 0.5rem; padding: clamp(1.5rem, 2.4vw, 2.2rem);
  min-height: 230px; border-radius: var(--r-lg);
  background: var(--verde-piso);
  box-shadow: var(--sombra-tarjeta);
}
.consulta__ojo {
  margin: 0; font-size: var(--t-1); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--verde-texto);
}
.consulta__titulo { margin: 0.2rem 0 0; font-size: var(--t-5); letter-spacing: -0.025em; max-width: 16ch; color: var(--tinta); }
.consulta__texto { margin: 0.6rem 0 1.4rem; font-size: var(--t-3); line-height: 1.55; color: var(--tinta-suave); max-width: 42ch; }
.consulta[hidden] { display: none; }

/* Ancha: el texto solo no llena una fila entera, asi que se lee de izquierda a
   derecha y el boton se planta al final. Sin esto queda medio metro de verde vacio. */
@media (min-width: 760px) {
  .consulta[data-ancha="si"] {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: clamp(2rem, 5vw, 5rem); min-height: 0;
    padding-block: clamp(1.8rem, 3vw, 2.6rem);
  }
  .consulta[data-ancha="si"] .consulta__dicho { display: grid; gap: 0.2rem; }
  .consulta[data-ancha="si"] .consulta__titulo { max-width: 22ch; }
  .consulta[data-ancha="si"] .consulta__texto { margin-bottom: 0; max-width: 56ch; }
  .consulta[data-ancha="si"] .boton { flex: none; }
}

.vacio {
  text-align: center; padding: 3rem 1.2rem;
  border-radius: var(--r-lg); background: var(--papel-hondo);
}
.vacio__ico { width: 34px; height: 34px; fill: none; stroke: var(--tinta-tenue); stroke-width: 1.5; margin: 0 auto 1rem; }
.vacio h3 { font-size: var(--t-5); margin-bottom: 0.7rem; }
.vacio p { margin: 0 auto 1.5rem; color: var(--tinta-suave); max-width: 46ch; }
.vacio__acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }

.respaldo { border-radius: var(--r-lg); padding: 1.6rem; background: var(--papel-hondo); }
.respaldo__aviso { font-weight: 700; margin-bottom: 1rem; }
.respaldo__lista { margin: 0 0 1.4rem; padding-left: 1.1rem; }
.respaldo__lista li { margin-bottom: 0.35rem; font-size: var(--t-3); }

.productos__legal {
  margin-top: clamp(2.2rem, 4vw, 3rem); font-size: var(--t-2); color: var(--tinta-suave); max-width: 60ch;
}

/* ============================================================
   6. Historia
   ============================================================ */

.linea { padding-block: var(--aire); background: var(--papel-hondo); }
.linea__caja {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
.linea__pegado { position: sticky; top: calc(var(--h-cab) + 2.5rem); }
.linea__titulo {
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--t-7); letter-spacing: -0.035em; line-height: 0.98; max-width: 12ch;
}

/* Reloj: la cinta de años se desplaza, no aparece y desaparece */
.linea__reloj {
  margin: 0; height: 1em; overflow: hidden;
  font-size: var(--t-8); font-weight: 700;
  line-height: 1; letter-spacing: -0.05em; color: var(--verde-texto);
}
.linea__cinta { display: block; transition: transform 0.75s var(--sal); will-change: transform; }
.linea__cinta span { display: block; height: 1em; }

.linea__pista {
  position: relative; height: 3px; margin: 1.75rem 0 0.9rem;
  background: var(--borde-sutil); border-radius: 3px; overflow: hidden;
}
.linea__pista span {
  position: absolute; inset: 0; background: var(--verde); border-radius: 3px;
  transform: scaleX(var(--avance, 0)); transform-origin: left; will-change: transform;
}
.linea__cuenta { margin: 0; font-size: var(--t-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-tenue); }
.linea__cuenta b { color: var(--tinta); }

.hitos { position: relative; list-style: none; margin: 0; padding: 0 0 0 clamp(1.5rem, 3vw, 2.5rem); display: grid; }
.hitos::before, .hitos::after {
  content: ''; position: absolute; left: 0; top: 0; width: 2px; border-radius: 2px;
}
.hitos::before { bottom: 0; background: var(--borde-sutil); }
.hitos::after {
  height: 100%; background: var(--verde);
  transform: scaleY(var(--avance, 0)); transform-origin: top; will-change: transform;
}
.hito {
  position: relative;
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.15rem, 2.4vw, 1.85rem) 0;
}
.hito__anio {
  font-size: var(--t-2); font-weight: 700; letter-spacing: 0.02em;
  color: var(--tinta-tenue); padding-top: 0.35em;
  transition: color 0.5s var(--sal);
}
.hito[data-activo="true"] .hito__anio { color: var(--verde-texto); }
.hito__texto {
  margin: 0; max-width: 46ch; font-size: var(--t-4); line-height: 1.58;
  color: var(--tinta-suave); transition: color 0.5s var(--sal);
}
.hito[data-activo="true"] .hito__texto, .hito[data-pasado="true"] .hito__texto { color: var(--tinta); }

/* ============================================================
   7. Rumbo: troquel arriba, mision y vision abajo
   ============================================================ */

/* El troquel entra a sangre arriba: el aire de arriba lo pone el, no la seccion */
.rumbo { position: relative; padding-block: clamp(3rem, 6vw, 5rem) var(--aire); background: var(--verde-piso); overflow: hidden; }
.rumbo .contenedor { position: relative; z-index: 1; }
.rumbo__cuerpo { position: relative; z-index: 1; }
.rumbo__par { display: grid; gap: 0 clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rumbo__bloque {
  display: grid; gap: 0.8rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(8rem, 0.32fr) minmax(0, 1fr);
  padding-block: clamp(1.6rem, 2.6vw, 2.3rem);
}
.rumbo__par .rumbo__bloque { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; align-content: start; }
.rumbo__par .rumbo__rotulo { padding-top: 0; }
.rumbo__bloque--valores {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
}
.rumbo__bloque--valores .rumbo__rotulo { padding-top: 0; }
.rumbo__rotulo {
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--verde-texto); padding-top: 0.55rem;
}
.rumbo__texto {
  margin: 0; max-width: 40ch;
  font-size: var(--t-5); line-height: 1.42; letter-spacing: -0.01em;
}
/* Seis valores: tres por fila en escritorio, dos en tablet, uno en telefono.
   Con auto-fit caian cuatro arriba y dos abajo, y quedaban dos celdas huerfanas. */
.valores {
  margin: 0; padding: 0; list-style: none; counter-reset: v;
  display: grid; gap: 0 clamp(1.8rem, 3.5vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.valores li {
  counter-increment: v; position: relative; max-width: none;
  padding-left: 3rem; padding-block: 0.75rem; text-wrap: balance;
  font-size: var(--t-4);
}
.valores li::before {
  content: "0" counter(v);
  position: absolute; left: 0; top: 0.9rem;
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.06em; color: var(--verde-texto);
}

/* ============================================================
   8. El troquel de la seccion Rumbo
   ============================================================ */

/* La tapa se pinta del mismo color que la seccion, asi la palabra queda
   troquelada sobre el papel y no impresa encima de un rectangulo. */
.troquel {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; max-width: 100%;
  aspect-ratio: 1200 / 250; min-height: 116px; max-height: 44vh;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
  background: var(--verde-piso);
}
@media (max-width: 760px) {
  /* proporcion menos extrema para que la altura pase el minimo sin forzar el ancho */
  .troquel { aspect-ratio: 5 / 2; }
}
.troquel__poster, .troquel__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08) translate3d(0, var(--troquel-y, 0px), 0);
  filter: var(--troquel-filtro);
  will-change: transform;
}
.troquel__poster { transition: opacity 0.9s var(--sal); }
.troquel__video { opacity: 0; transition: opacity 0.9s var(--sal); }
.troquel__video[data-listo="true"] { opacity: 1; }
.troquel__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.troquel__tapa { fill: var(--verde-piso); transition: fill 0.4s var(--sal); }
.troquel__palabra {
  font-family: var(--fuente); font-weight: 900; font-size: 176px;
  dominant-baseline: middle;
}

/* ============================================================
   10. Compromiso
   ============================================================ */

/* La seccion toma el tratamiento de la propuesta oscura: una foto de campo
   entra y sale por mascara, y encima va un velo del color de la seccion que
   deja el fondo como textura y no como imagen. El velo cambia por tema, la
   foto no: asi la misma pieza funciona en claro y en oscuro sin invertir nada
   y el texto sigue midiendo contra un fondo casi plano. */
.etica { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--aire); background: var(--papel-hondo); }
.etica__fondo {
  position: absolute; inset: -8% 0; z-index: 0; pointer-events: none;
  background: url('/shared/media/fondo3.webp') center / cover no-repeat;
  filter: var(--etica-filtro);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
}
/* El velo va aparte de la foto, no adentro: si vive dentro de .etica__fondo le
   entra el mismo filter y deja de valer lo que dice el token. */
.etica::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--etica-velo);
}
.etica__caja { position: relative; z-index: 2; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

/* El fondo respira con el scroll. Sin JS, y solo si el visitante acepta movimiento. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .etica__fondo { animation: eticaSube linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes eticaSube {
  from { transform: translate3d(0, 3.5%, 0) scale(1.06); }
  to   { transform: translate3d(0, -3.5%, 0) scale(1.06); }
}
/* La cabecera y el dato comparten renglon: el hueco que quedaba a la derecha
   del titulo ahora lo ocupa la cifra de la ONU. */
.etica__intro {
  display: grid; align-items: start;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.etica__cabeza { display: grid; gap: 1.2rem; max-width: 62ch; }
.etica__titulo { margin: 0; font-size: var(--t-7); letter-spacing: -0.035em; max-width: 16ch; }
.etica__definicion {
  margin: 0; padding-left: clamp(1rem, 2vw, 1.5rem);
  box-shadow: inset 3px 0 0 var(--verde);
  font-size: var(--t-4); line-height: 1.5; color: var(--tinta);
}
.etica__bajada { margin: 0; color: var(--tinta-suave); font-size: var(--t-3); }

/* Dos bandas anchas, una debajo de la otra: el estado del sector y las buenas
   practicas cruzan la pagina entera. El dato de la ONU ya no vive aca abajo,
   subio a la cabecera. */
.etica__cuerpo { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

/* Los rotulos de esta seccion apoyan sobre la textura de la foto, no sobre un
   plano liso: van un punto mas firmes que el resto de los rotulos del sitio. */
.indice__rotulo, .practicas__rotulo { color: var(--tinta-suave); }
.etica .rubro { color: var(--tinta-suave); }
.indice__rotulo, .practicas__rotulo {
  margin: 0 0 1.5rem; font-size: var(--t-1); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.indice__lista {
  list-style: none; margin: 0; padding: 0; counter-reset: r;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem) clamp(1.5rem, 3vw, 2.6rem);
}
.indice__lista li { counter-increment: r; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.indice__lista li::before {
  content: counter(r, decimal-leading-zero);
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.1em; color: var(--verde-texto);
}
.indice__lista span { font-size: var(--t-3); line-height: 1.45; text-wrap: balance; }

/* El dato no va en tarjeta: la cifra sola pesa lo suficiente. Toma el peso 900
   del troquel de SUSTENTABLE, el tope de la escala y una interlinea cerrada,
   asi el numero lee como pieza grafica y no como un titulo mas. */
.dato { padding-top: clamp(0.4rem, 1vw, 0.8rem); }
.dato__cifra {
  /* Un unico paso de display sobre el tope de la escala, no un tamano suelto:
     asi la cifra crece y se achica con los mismos topes que el resto. */
  margin: 0; font-size: calc(var(--t-8) * 1.55); font-weight: 900;
  line-height: 0.76; letter-spacing: -0.06em; color: var(--verde-texto);
}
.dato__texto {
  margin: clamp(1.1rem, 2vw, 1.6rem) 0 0; max-width: 30ch;
  font-size: var(--t-4); line-height: 1.4; color: var(--tinta); text-wrap: balance;
}
.dato__fuente {
  margin: 1rem 0 0; font-size: var(--t-1); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-suave);
}

/* Las practicas ya no son pastillas. El criterio sale de la propuesta
   industrial, que el cliente aprobo: sin caja y sin circulo, numero, una regla
   verde corta debajo y aire. La estructura la da la alineacion, no el encierro. */
.practicas__lista {
  list-style: none; margin: 0; padding: 0; counter-reset: bp;
  /* Ahora la banda es ancha: las cuatro entran en un renglon sin partirse */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.5rem, 3vw, 2.6rem);
}
.practicas__lista li {
  counter-increment: bp; margin: 0;
  font-size: var(--t-3); font-weight: 700; line-height: 1.3; color: var(--tinta);
  text-wrap: balance;
}
.practicas__lista li::before {
  content: counter(bp, decimal-leading-zero);
  display: block; width: 26px; margin-bottom: 0.7rem; padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--verde);
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.16em; color: var(--verde-texto);
}

/* ============================================================
   11. Carta
   ============================================================ */

.carta { padding-block: var(--aire); }
.carta__grilla { display: grid; grid-template-columns: 250px 1fr; gap: clamp(2rem, 5vw, 5rem); }
.carta__firma { position: sticky; top: calc(var(--h-cab) + 2.5rem); align-self: start; }
.carta__retrato {
  width: 160px; height: 160px; border-radius: 50%; object-fit: cover;
  box-shadow: var(--sombra-alta);
}
.carta__nombre { margin: 1.4rem 0 0.2rem; font-weight: 700; font-size: var(--t-4); }
.carta__cargo { margin: 0; color: var(--tinta-suave); font-size: var(--t-2); }
.carta h2 { font-size: var(--t-7); max-width: 24ch; margin-bottom: 1.8rem; }
.carta__texto p { font-size: var(--t-3); line-height: 1.65; margin: 0 0 1.35rem; max-width: 62ch; }
.carta__texto p:first-child { font-size: var(--t-4); line-height: 1.45; color: var(--tinta); }

/* ============================================================
   12. Cierre: contacto
   ------------------------------------------------------------
   El cierre se lee de arriba a abajo en cuatro pasos y no compite
   consigo mismo: titular de campaña, formulario, canales directos,
   y despues las sedes con el mapa a lo ancho.

   Una sola accion dominante en todo el bloque: el boton verde que
   manda el formulario a WhatsApp. Los tres canales quedan como
   atajo, en peso tipografico, sin boton propio.
   ============================================================ */

.contacto { padding-block: var(--aire) 0; background: var(--papel-hondo); }
.contacto__cabeza { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.contacto h2 { font-size: var(--t-7); max-width: 14ch; }
.contacto__bajada { margin: 1.3rem 0 0; color: var(--tinta-suave); font-size: var(--t-4); max-width: 44ch; }

/* La cabecera se abre a lo ancho en vez de apilarse: ocupa menos alto */
@media (min-width: 900px) {
  .contacto__cabeza {
    display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    gap: clamp(3rem, 5vw, 4.5rem); align-items: end;
  }
  .contacto__cabeza .rubro { grid-column: 1; }
  .contacto h2 { grid-column: 1; max-width: 18ch; }
  .contacto__bajada { grid-column: 2; grid-row: 2; margin: 0 0 0.4rem; }
}

.contacto__grilla { display: grid; gap: clamp(2.6rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
  .contacto__grilla {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    gap: clamp(3rem, 5vw, 4.5rem);
    align-items: start;
  }
  /* El formulario tiene relleno propio: sin esto la columna de al lado
     arranca en su borde y queda mas alta que el primer campo. */
  .canales { padding-top: clamp(1.5rem, 3vw, 2.4rem); }
}

/* ---------- el formulario: la unica superficie elevada del cierre ---------- */
.escribir {
  background: var(--tapa); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--sombra-baja), var(--sombra-alta);
}
.escribir__titulo { font-size: var(--t-5); }
.escribir__campos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.05rem 1.1rem;
  margin: clamp(1.5rem, 2.6vw, 2rem) 0 1.4rem;
}
.escribir__error { margin: 0 0 1rem; font-size: var(--t-2); font-weight: 500; color: var(--alerta); }
.escribir .boton { justify-content: center; }
.escribir__pie { margin: 0.95rem 0 0; font-size: var(--t-2); color: var(--tinta-suave); text-align: center; }

/* ---------- los campos ----------
   El contorno de 1px vive solo aca: en un control es la unica pista de
   donde se puede escribir, y por eso la regla de "sin bordes" no lo alcanza.
   Las tarjetas y los paneles siguen separandose con sombra y con fondo. */
.campo { grid-column: 1 / -1; display: grid; gap: 0.4rem; margin: 0; max-width: none; }
.campo--medio { grid-column: span 1; }
.campo label {
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: var(--t-2); font-weight: 700; color: var(--tinta);
}
.campo__opcional {
  font-size: var(--t-1); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-tenue);
}
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: var(--t-3); color: var(--tinta);
  background: var(--campo-fondo); border: 0;
  border-radius: var(--r-sm); padding: 0.72rem 0.95rem; width: 100%;
  transition: background-color 0.3s var(--sal), box-shadow 0.3s var(--sal);
}
.campo textarea { resize: vertical; min-height: 116px; line-height: 1.5; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-suave); opacity: 1; }
.campo input:hover, .campo select:hover, .campo textarea:hover { box-shadow: inset 0 0 0 1px var(--borde-vivo); }
/* El campo se enciende al enfocarse. El anillo del sistema se saca SOLO con el
   mouse: con teclado tiene que verse, es la unica pista de donde esta el foco. */
.campo input:focus, .campo select:focus, .campo textarea:focus {
  background: var(--campo-fondo-foco);
  box-shadow: inset 0 0 0 2px var(--verde-texto);
}
.campo input:focus:not(:focus-visible),
.campo select:focus:not(:focus-visible),
.campo textarea:focus:not(:focus-visible) { outline: none; }

.campo--lista { position: relative; }
.campo--lista select { appearance: none; -webkit-appearance: none; padding-right: 2.7rem; cursor: pointer; }
.campo__flecha {
  position: absolute; right: 0.95rem; bottom: 0.95rem;
  width: 20px; height: 20px; pointer-events: none;
  fill: none; stroke: var(--tinta-suave); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.campo__pista { font-size: var(--t-2); color: var(--tinta-suave); }
.campo__mal { font-size: var(--t-2); font-weight: 500; color: var(--alerta); }
.campo--mal input, .campo--mal textarea {
  box-shadow: inset 0 0 0 2px var(--alerta);
}
.campo--mal input:focus, .campo--mal textarea:focus {
  box-shadow: inset 0 0 0 2px var(--alerta);
}

@media (max-width: 560px) {
  .escribir__campos { grid-template-columns: minmax(0, 1fr); }
  .campo--medio { grid-column: 1 / -1; }
}

/* ---------- los tres canales: sin tarjeta, puro peso tipografico ---------- */
.canales { display: grid; gap: clamp(1.7rem, 3vw, 2.3rem); align-content: start; }

.canales__persona { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.canales__inicial {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--verde); color: var(--sobre-verde);
  font-size: var(--t-3); font-weight: 700; letter-spacing: 0.04em;
}
.canales__marca { width: 2.1rem; height: auto; }
.canales__quien { display: grid; gap: 0.12rem; }
.canales__rotulo {
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tinta-tenue);
}
.canales__nombre { font-size: var(--t-5); line-height: 1.1; letter-spacing: -0.02em; }
.canales__cargo { font-size: var(--t-2); color: var(--tinta-suave); }

.canales__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.canal {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico rotulo" "ico valores" "ico nota";
  column-gap: 0.95rem; row-gap: 0.12rem;
}
.canal__ico { grid-area: ico; align-self: start; margin-top: 0.3rem; width: 22px; height: 22px; color: var(--verde-texto); }
.canal__rotulo {
  grid-area: rotulo; font-size: var(--t-1); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tinta-tenue);
}
.canal__valores { grid-area: valores; display: flex; flex-wrap: wrap; column-gap: 1.1rem; row-gap: 0.2rem; }
.canal__valor {
  font-size: var(--t-4); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--borde-vivo);
  transition: border-color 0.3s var(--sal), color 0.3s var(--sal);
}
.canal__valor:hover { color: var(--verde-texto); border-color: var(--verde); }
.canal__nota { grid-area: nota; margin-top: 0.2rem; font-size: var(--t-2); color: var(--tinta-suave); }

.nota { font-size: var(--t-2); color: var(--tinta-suave); margin: 0; max-width: 46ch; }

/* ============================================================
   13. Cierre: las dos sedes y el mapa a lo ancho
   ------------------------------------------------------------
   Las sedes son el rotulo del mapa, no un canal mas: por eso viven
   en su propio bloque, como par, y el mapa cierra la pagina debajo.
   ============================================================ */

.sedes { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); background: var(--papel-hondo); }
.sedes__cabeza { display: grid; gap: clamp(1.8rem, 3vw, 2.6rem); align-items: start; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .sedes__cabeza { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.sedes h2 { font-size: var(--t-6); max-width: 16ch; }

.sedes__par { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.7rem, 3vw, 2.6rem); }
@media (min-width: 680px) { .sedes__par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sede__tipo {
  margin: 0 0 0.5rem; font-size: var(--t-1); font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--verde-texto);
}
.sede__nombre { margin: 0 0 0.55rem; font-size: var(--t-5); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.sede__donde { margin: 0; color: var(--tinta-suave); max-width: 32ch; }

/* El mapa pisa un poco mas ancho que el texto: es la ultima placa de la
   pagina y se tiene que leer sola. Sin borde: lo separa la sombra. */
.sedes__mapa { width: min(100% - clamp(2.5rem, 5vw, 6rem), 1400px); margin-inline: auto; }
.sedes .mapa-cas {
  --m-radio: var(--r-xl);
  --m-sombra: var(--sombra-baja), var(--sombra-alta);
  margin: 0; border: 0;
}
.sedes .mapa-cas .mapa-boton { font-size: var(--t-2); }

/* En el telefono el mapa se come los margenes: cada pixel de ancho que gana
   es tipografia mas grande dentro del dibujo, y ahi es donde menos sobra. */
@media (max-width: 620px) {
  .sedes__mapa { width: 100%; }
  .sedes .mapa-cas { --m-radio: 0; }
}

/* El mapa compartido trae su propio oscuro, hecho para un fondo casi negro:
   ahi el dibujo quedaba mas hundido que la pagina que lo contiene y abria un
   pozo. Se lo sube a la familia oliva, un escalon por debajo del papel, y se
   le devuelven a los rotulos el contraste que la subida les come. La pastilla
   de cada sede se da vuelta: sobre un mapa oscuro va clara, como manda el
   tema oscuro del propio modulo. El verde de los pines no se toca: es del manual. */
:root[data-tema="oscuro"] .mapa-cas {
  --m-fondo: #1B2116;
  --m-curva: #5F9134;
  --m-curva-suave: #406324;
  --m-ruta: #3A462D;
  --m-ruta-linea: #8D9B83;
  --m-zona: #B0BBA9;        /* 8.3:1 sobre el fondo */
  --m-zona-chica: #99A592;  /* 6.4:1 sobre el fondo */
  --m-ruta-txt: #B9C4B1;    /* 9.1:1 sobre el fondo */
  --m-pin-borde: none;
  --m-pin-aro: var(--verde);
  --m-caja: #EFF2E4;
  --m-caja-txt: #1E2A14;    /* 13.4:1 sobre la pastilla */
  --m-caja-sub: #4B5842;    /* 5.9:1 sobre la pastilla */
  --m-boton: #EFF2E4;
  --m-boton-hover: #FFFFFF;
  --m-boton-txt: #1E2A14;
  --m-boton-sombra: 0 8px 24px rgba(6, 8, 4, 0.5);
}


/* ============================================================
   13 bis. Volver al catalogo
   ------------------------------------------------------------
   Misma isla que la cabecera: fondo, radio y sombra salen de los
   mismos tokens, asi no aparece un objeto nuevo en la pagina.
   ============================================================ */

.volver {
  position: fixed; z-index: 50;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 1rem 0.6rem 0.75rem;
  border-radius: var(--r-pastilla);
  background: var(--cab-fondo); color: var(--texto);
  box-shadow: var(--anillo-suave), var(--sombra-isla), var(--brillo-interior);
  font-size: var(--t-2); font-weight: 700; text-decoration: none;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 0.35s var(--sal), transform 0.35s var(--sal),
              background-color 0.36s var(--sal), box-shadow 0.36s var(--sal);
}
.volver[data-visible="true"] { opacity: 1; transform: none; pointer-events: auto; }
.volver:hover { transform: translateY(-2px); box-shadow: var(--anillo-suave), var(--sombra-flota), var(--brillo-interior); }
.volver:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.volver .ico { width: 1.05rem; height: 1.05rem; stroke-width: 2.1; }

/* Sin movimiento: aparece y desaparece, sin deslizarse */
html.simple .volver { transform: none; transition: opacity 0.2s linear; }
html.simple .volver:hover { transform: none; }

/* ============================================================
   14. Pie
   ============================================================ */

.pie {
  background: var(--pie-fondo); color: var(--pie-texto);
  padding-block: clamp(3rem, 7vw, 5rem);
  box-shadow: inset 0 1px 0 var(--borde-sutil);
}
.pie__grilla {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2.2rem, 5vw, 4rem); align-items: start;
}
.pie__logo { width: 74px; height: auto; opacity: 0.52; }
.pie__razon { margin: 1.2rem 0 0; color: var(--pie-fuerte); font-weight: 700; max-width: 22ch; }

/* El mapa del sitio: las mismas salidas que arriba, para quien llego hasta el final */
.pie__nav { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: clamp(1.8rem, 4vw, 4rem); }
.pie__rotulo {
  margin: 0 0 1rem; font-size: var(--t-1); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--pie-fuerte); opacity: 0.65;
}
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: var(--t-3); }
.pie__lista a { color: var(--pie-texto); text-decoration: none; }
.pie__lista a:hover { color: var(--pie-fuerte); text-decoration: underline; text-underline-offset: 0.28em; }
.pie__lista a:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }

.pie__cierre {
  margin-top: clamp(2rem, 4vw, 2.8rem); padding-top: clamp(1.4rem, 3vw, 2rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem clamp(2rem, 5vw, 4rem); align-items: start;
}
.pie__firma { text-align: right; }
@media (max-width: 900px) { .pie__firma { text-align: left; } }
.pie__legal { margin: 0; font-size: var(--t-2); max-width: 62ch; }
.pie__firma { margin: 0; font-size: var(--t-2); }

@media (max-width: 900px) {
  .pie__grilla { grid-template-columns: minmax(0, 1fr); }
  .pie__cierre { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pie__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }
}

/* ============================================================
   15. Ficha de producto, en popup
   ============================================================ */

.ficha { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.5rem); }
.ficha__fondo { position: absolute; inset: 0; background: var(--velo-modal); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.4s var(--sal); }

/* Dos columnas: envase y compra a la izquierda, lectura a la derecha.
   El objetivo es que en escritorio no haya que scrollear en ningun producto. */
.ficha__caja {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  /* Las dos columnas cierran a la misma altura: con la ficha corta la de la
     derecha quedaba a media asta y dejaba un hueco abajo. */
  gap: clamp(1.5rem, 3vw, 2.6rem); align-items: stretch;
  width: min(880px, 100%); max-height: min(90dvh, 780px); overflow: auto;
  background: var(--tapa); border-radius: var(--r-xl); padding: clamp(1.5rem, 2.6vw, 2.3rem);
  box-shadow: var(--anillo-suave), var(--sombra-modal);
  opacity: 0; transform: translateY(24px) scale(0.98);
  transition: opacity 0.5s var(--sal), transform 0.5s var(--sal);
}
.ficha--abierta .ficha__fondo { opacity: 1; }
.ficha--abierta .ficha__caja { opacity: 1; transform: none; }
.ficha__cerrar {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%;
  background: var(--campo-fondo); color: var(--tinta); cursor: pointer; font-size: var(--t-3);
  transition: background-color 0.3s var(--sal);
}
.ficha__cerrar:hover { background: var(--borde); }

.ficha__carril { display: grid; gap: clamp(1rem, 1.8vw, 1.4rem); align-content: start; }
.ficha__pack {
  position: relative; display: grid; place-items: center;
  border-radius: var(--r-lg); background: var(--pack-fondo); aspect-ratio: 4 / 3;
}
.ficha__pack img { width: auto; max-width: 60%; max-height: 84%; object-fit: contain; filter: var(--sombra-pack-modal); }

.ficha__datos { display: flex; flex-direction: column; min-width: 0; }
.ficha__caja h3 { font-size: var(--t-6); letter-spacing: -0.03em; padding-right: 2.5rem; }
.ficha__resumen { margin: 1rem 0 0; font-size: var(--t-4); line-height: 1.5; color: var(--tinta); }
.ficha__resumen:empty { display: none; }
/* Solo el texto largo cede: si un producto no entra, scrollea aca dentro y
   el modulo de cotizacion sigue siempre a la vista. */
.ficha__texto {
  margin: 0.8rem 0 0; color: var(--tinta-suave); font-size: var(--t-3); line-height: 1.55;
  max-height: 11.5em; overflow-y: auto; overscroll-behavior: contain;
}
.ficha__texto:empty { display: none; }

.ficha__compra { padding-top: 0.4rem; }

.ficha__completa {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: auto; padding-top: 1.6rem; align-self: flex-start;
  font-size: var(--t-2); font-weight: 700; color: var(--verde-texto); text-decoration: none;
  border-bottom: 1px solid var(--borde-vivo); padding-bottom: 0.2rem;
  transition: border-color 0.3s var(--sal), gap 0.3s var(--sal);
}
.ficha__completa:hover { border-color: var(--verde); gap: 0.75rem; }

/* En mobile el popup si scrollea: ahi es inevitable y esta bien */
@media (max-width: 767px) {
  .ficha__caja { grid-template-columns: minmax(0, 1fr); max-height: 92dvh; }
  .ficha__pack { aspect-ratio: 5 / 4; }
  .ficha__texto { max-height: none; overflow: visible; }
  .ficha__compra { padding-top: 0; }
  /* El orden de lectura en una sola columna: envase, nombre, texto, compra */
  .ficha__carril { display: contents; }
  .ficha__pack { order: 1; }
  .ficha__datos { order: 2; }
  .ficha__compra { order: 3; padding-top: 0.6rem; }
  /* El popup scrollea: el cierre se queda fijo, si no se va de pantalla */
  .ficha__cerrar { position: fixed; top: 1.6rem; right: 1.6rem; z-index: 3; box-shadow: var(--sombra-alta); }
}

/* ---------- Pedido: cuánto y en qué unidad ----------
   El campo y el botón son una pareja de hardware: misma altura, mismo
   radio, un solo renglón. Antes el botón ocupaba el ancho entero y el
   contador flotaba al costado, con otra altura y otro peso.
   ESPEJO: idéntico en producto.css. */

.pedido { display: grid; gap: 0.5rem; align-content: start; }

/* Mitades iguales, con tope: en la ficha ampliada el modulo es ancho y un
   boton de 500 px para una palabra vuelve a ser desproporcionado. */
.pedido__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; max-width: 22rem; }
.pedido__paso {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.1rem;
  min-height: 3rem; padding: 0.3rem;
  background: var(--campo-fondo); border-radius: var(--r-pastilla);
  transition: box-shadow 0.3s var(--sal);
}
.pedido__paso:has(.pedido__num:focus-visible) { box-shadow: inset 0 0 0 2px var(--foco); }
.pedido__flecha {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: var(--tapa); color: var(--tinta); cursor: pointer;
  font: inherit; font-size: var(--t-3); line-height: 1;
  box-shadow: var(--sombra-baja), inset 0 0 0 1px var(--borde-sutil);
  transition: background-color 0.3s var(--sal), transform 0.35s var(--sal);
}
.pedido__flecha:hover { background: var(--verde-piso); }
.pedido__flecha:active { transform: scale(0.92); }

.pedido__campo { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: baseline; justify-content: center; gap: 0.14rem; padding-inline: 0.1rem; }
.pedido__num {
  width: 4ch; min-width: 4ch; border: 0; background: none; padding: 0 0.15rem;
  font: inherit; font-weight: 700; font-size: var(--t-3); line-height: 1.15; color: var(--tinta);
  font-variant-numeric: tabular-nums; text-align: right; appearance: textfield;
}
/* El anillo lo dibuja la pastilla entera, no el campo suelto */
.pedido__num { cursor: text; border-radius: 6px; transition: background-color 0.25s var(--sal); }
.pedido__num:hover { background: var(--tapa); }
.pedido__num:focus, .pedido__num:focus-visible { outline: none; background: var(--tapa); }
.pedido__unidad {
  flex: 0 0 auto; font-size: var(--t-2); font-weight: 700;
  line-height: 1; color: var(--tinta-suave);
}

.pedido__sumar {
  min-width: 0; min-height: 3rem;
  padding: 0.35rem 1.35rem; justify-content: center;
}

/* Los volúmenes con los que se compra y, debajo, a cuántos envases equivale
   lo pedido. Van pegados al control: antes el renglón se centraba dentro de
   una caja de 1,9rem y esa media altura sobraba de los dos lados. */
.pedido__pie { display: grid; justify-items: start; gap: 0.45rem; }
/* La equivalencia acompania al texto del producto, no al control */
.ficha__equivale { margin: clamp(1rem, 2vw, 1.6rem) 0 0.6rem; }
.ficha__equivale .pedido__equivale { margin: 0; }

.pedido__equivale {
  margin: 0; font-size: var(--t-2); line-height: 1.45; color: var(--tinta-suave);
  max-width: 44ch; text-wrap: pretty;
}
.pedido__equivale:empty { display: none; }
/* El atajo activo se marca, pero no compite con la pastilla de unidad:
   un solo verde pleno por módulo, el de la decisión que manda. */

/* Versión compacta, para cada renglón del panel de cotización */
.pedido__paso--chico { min-height: 0; padding: 0.22rem; gap: 0; background: none; }
.pedido__paso--chico .pedido__flecha { width: 1.85rem; height: 1.85rem; font-size: var(--t-2); }
.pedido__paso--chico .pedido__num { font-size: var(--t-2); }
.pedido__paso--chico .pedido__unidad { font-size: var(--t-1); }

/* En pantallas angostas la pareja se apila, pero sigue siendo pareja:
   mismo ancho, misma altura, uno arriba del otro. */
@media (max-width: 420px) {
  .pedido__fila { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .pedido__flecha { width: 2.4rem; height: 2.4rem; }
  .pedido__sumar { justify-content: center; }
}

/* ============================================================
   16. Panel de cotizacion
   ============================================================ */

.panel-fondo { position: fixed; inset: 0; z-index: 95; background: var(--velo-modal); opacity: 0; transition: opacity 0.45s var(--sal); }
.panel-fondo--visible { opacity: 1; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(432px, 100%); pointer-events: none; }
.panel__caja {
  display: flex; flex-direction: column; height: 100%;
  background: var(--tapa); border-radius: var(--r-xl) 0 0 var(--r-xl);
  box-shadow: var(--sombra-panel);
  transform: translateX(103%); transition: transform 0.6s var(--sal);
}
.panel--abierto { pointer-events: auto; }
.panel--abierto .panel__caja { transform: none; }
.panel__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.6rem 1.6rem 1.1rem; }
.panel__cabeza h2 { font-size: var(--t-5); }
.panel__cabeza p { margin: 0.35rem 0 0; font-size: var(--t-2); color: var(--tinta-suave); }
.panel__cerrar { width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: var(--campo-fondo); color: var(--tinta); cursor: pointer; flex: 0 0 auto; }
.panel__cerrar:hover { background: var(--verde-piso); }
.panel__cuerpo { flex: 1; overflow-y: auto; padding: 0 1.6rem 1.5rem; }
.linea-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 0.9rem; align-items: center; padding-block: 0.95rem; }
.linea-item + .linea-item { margin-top: 0.2rem; }
.linea-item__pack { border-radius: 12px; background: var(--campo-fondo); display: grid; place-items: center; aspect-ratio: 1; }
.linea-item__pack img { width: 78%; }
.linea-item b { display: block; font-size: var(--t-3); }
.linea-item small { display: block; color: var(--tinta-suave); font-size: var(--t-2); }
.linea-item .pedido__paso { margin-top: 0.5rem; margin-left: -0.22rem; }
.linea-item__quitar { border: 0; background: none; cursor: pointer; color: var(--tinta-suave); font-size: var(--t-2); padding: 0.3rem; }
.linea-item__quitar:hover { color: var(--alerta); }
.panel__vacio { padding: 2.5rem 0; color: var(--tinta-suave); }
.panel__etiqueta { margin: 1.6rem 0 0.9rem; font-size: var(--t-1); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tinta-tenue); }
.panel__form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.campo-form { grid-column: 1 / -1; display: grid; gap: 0.35rem; }
.campo-form--medio { grid-column: span 1; }
.campo-form label { font-size: var(--t-2); font-weight: 700; color: var(--tinta); }
/* Mismo tratamiento que los campos del cierre: una sola forma de campo en la pagina */
.campo-form input, .campo-form textarea {
  font: inherit; font-size: var(--t-3); color: var(--tinta);
  background: var(--campo-fondo); border: 0; border-radius: var(--r-sm);
  padding: 0.72rem 0.9rem; width: 100%;
  transition: background-color 0.3s var(--sal), box-shadow 0.3s var(--sal);
}
/* El campo se enciende al enfocarse, pero el anillo se saca SOLO con el mouse:
   con teclado tiene que verse, es la unica pista de donde esta el foco. */
.campo-form input:hover, .campo-form textarea:hover { box-shadow: inset 0 0 0 1px var(--borde-vivo); }
.campo-form input:focus, .campo-form textarea:focus {
  background: var(--campo-fondo-foco);
  box-shadow: inset 0 0 0 2px var(--verde-texto);
}
.campo-form input:focus:not(:focus-visible), .campo-form textarea:focus:not(:focus-visible) { outline: none; }
.campo-form textarea { resize: vertical; min-height: 88px; }
.panel__etiqueta, .panel__error { grid-column: 1 / -1; }
.panel__error { margin: 0; color: var(--alerta); font-size: var(--t-2); }
.envio { padding: 1.2rem 1.6rem 1.6rem; background: var(--tapa); }
.envio__botones { display: grid; gap: 0.6rem; }
.envio .boton--ancho { justify-content: center; }
.panel__aviso { margin: 1rem 0 0; font-size: var(--t-2); color: var(--tinta-suave); }

/* ============================================================
   17. Aviso vivo
   ============================================================ */

.aviso-vivo {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 150;
  transform: translate(-50%, 200%);
  background: var(--tinta); color: var(--sobre-tinta);
  padding: 0.8rem 1.35rem; border-radius: var(--r-pastilla);
  font-size: var(--t-2); font-weight: 500; pointer-events: none;
  max-width: calc(100vw - 2rem);
  transition: transform 0.5s var(--sal);
}
.aviso-vivo[data-ver="si"] { transform: translate(-50%, 0); }


/* ---------- Selector de propuestas ----------
   Es una herramienta de presentacion y trae su propio estilo inyectado por JS.
   No se toca el modulo compartido: desde aca solo se lo alinea a la escala,
   para que la pagina no muestre cinco tamaños que no son de nadie. */
body .cas-nav,
body .cas-nav .cas-nav__boton,
body .cas-nav .cas-nav__pie { font-size: var(--t-2); }
body .cas-nav .cas-nav__num,
body .cas-nav .cas-nav__flecha,
body .cas-nav .cas-nav__titulo,
body .cas-nav .cas-nav__elegida,
body .cas-nav .cas-nav__lista span:first-child { font-size: var(--t-1); }

/* ============================================================
   18. Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .linea__caja, .carta__grilla { grid-template-columns: minmax(0, 1fr); }
  .linea__pegado { position: static; }
  .etica__intro { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); }
  .indice__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carta__firma { position: static; display: flex; align-items: center; gap: 1.2rem; }
  .carta__retrato { width: 96px; height: 96px; }
  .carta__nombre { margin-top: 0; }
  .pie__grilla { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .rumbo__par { grid-template-columns: minmax(0, 1fr); }
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha__caja { grid-template-columns: 1fr; }
  .ficha__pack { aspect-ratio: 3 / 2; }
  .practicas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .rumbo__bloque { grid-template-columns: minmax(0, 1fr); }
  .rumbo__rotulo { padding-top: 0; }
  .hito { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .hito__anio { padding-top: 0; }
}

@media (max-width: 620px) {
  :root { --h-cab: 60px; }
  .cab__isotipo { width: 32px; }
  .cab__cotizar { padding: 0.45rem 0.45rem 0.45rem 0.75rem; gap: 0.4rem; }
  .cab__cuenta { min-width: 1.4rem; height: 1.4rem; }
  .marca__svg { width: 132vmin; }
  .apertura { height: 260vh; }
  .valores { grid-template-columns: minmax(0, 1fr); }
  .indice__lista, .practicas__lista { grid-template-columns: minmax(0, 1fr); }
  /* El titulo de la carta es largo: a este ancho, en el paso de arriba entra en
     tres renglones y el ultimo queda con una sola palabra. Baja un paso. */
  .carta h2 { font-size: var(--t-6); }
  .productos__grilla { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .tarjeta { padding: 0.9rem 1rem 1.2rem; }
  .tarjeta__resumen, .etiquetas { display: none; }
  /* A dos columnas angostas el texto largo del destacado estiraba su tarjeta a
     mil pixeles y arrastraba a la vecina, que quedaba con medio metro en blanco. */
  .tarjeta--destacada .ventajas, .tarjeta--destacada .tarjeta__detalle { display: none; }
  .panel__caja { border-radius: 0; }
}

@media (max-width: 400px) {
  .productos__grilla { grid-template-columns: 1fr; }
  .tarjeta__resumen, .etiquetas { display: flex; }
  .tarjeta__resumen { display: block; }
}

@media (prefers-reduced-transparency: reduce) {
  .menu { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--papel); }
  .cab::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .linea__cinta { transition: none; }
  .troquel__poster, .troquel__video { transform: scale(1.04) !important; }
}

/* ============================================================
   APENDICE. Las otras dos direcciones de oscuro
   ------------------------------------------------------------
   Se probaron tres bases calidas para el tema oscuro y quedo aplicada la
   primera, OLIVA DE CAMPO, arriba en el bloque de tokens. Las otras dos
   quedan aca enteras, con los mismos nombres: para probar una, se descomenta
   su bloque y listo, gana por venir despues en el archivo. No hace falta
   tocar nada mas.

   Por que gano el oliva
     Es la unica base que sube y calienta la pagina sin pelearse con la marca.
     La foto de la hoja de maiz sigue verde y viva en vez de secarse, el mapa,
     las tarjetas y los envases caen todos en la misma familia, y el verde del
     manual apoya sobre un pariente suyo en lugar de sobre un negro.

   Las tres, medidas contra el fondo compuesto real, pasan AA en las cuatro
   secciones. Si se cambia de direccion, hay que volver a medir: los numeros
   de abajo son de la maqueta, no una promesa.

   TIERRA DE LABRANZA
     Base marron umbra, la mas calida de las tres. El verde deja de ser
     pariente del fondo y pasa a ser el acento vivo sobre el suelo. Se
     descarto porque el filtro que hace falta para que la foto de la hoja
     acompañe al marron la termina secando: el maiz lee a sequia, no a
     cultivo. Peor contraste medido de la maqueta: 4.6:1.

     :root {
       --o-papel: #241F19;
       --o-papel-hondo: #2C271F;
       --o-tapa: #352F26;
       --o-tinta: #F4EFE3;
       --o-tinta-suave: #C0B6A5;
       --o-tinta-tenue: #BDB3A2;
       --o-borde: #443C31;
       --o-borde-sutil: rgba(244, 239, 227, 0.13);
       --o-borde-vivo: #988E81;
       --o-verde-piso: #313A1B;
       --o-verde-texto: #A9DC5E;
       --o-verde-hondo: #C6E993;
       --o-verde-vivo: #8ACD35;
       --o-verde-borde: #52632D;
       --o-alerta: #FFA08D;
       --o-foco: #A9DC5E;
       --o-cab-fondo: #322B23;
       --o-papel-nulo: rgba(36, 31, 25, 0);
       --o-etica-velo: rgba(44, 39, 31, 0.80);
       --o-etica-filtro: grayscale(0.5) sepia(0.06) contrast(1) brightness(0.64);
       --o-campo-fondo: #3D362C;
       --o-campo-fondo-foco: #413931;
       --o-pack-fondo: radial-gradient(64% 60% at 50% 42%, #413A30 0%, #2C271F 100%);
       --o-anillo-suave: inset 0 0 0 1px rgba(244, 239, 227, 0.07);
       --o-anillo-verde: inset 0 0 0 1px rgba(169, 220, 94, 0.32);
       --o-velo-modal: rgba(14, 11, 8, 0.74);
       --o-brillo-interior: inset 0 1px 0 rgba(244, 239, 227, 0.09);
       --o-sombra-pack: drop-shadow(0 7px 12px rgba(14, 11, 8, 0.45)) drop-shadow(0 0 18px rgba(230, 215, 185, 0.12));
       --o-sombra-pack-alta: drop-shadow(0 11px 17px rgba(14, 11, 8, 0.52)) drop-shadow(0 0 22px rgba(230, 215, 185, 0.16));
       --o-sombra-pack-modal: drop-shadow(0 9px 14px rgba(14, 11, 8, 0.48)) drop-shadow(0 0 20px rgba(230, 215, 185, 0.14));
     }
     :root[data-tema="oscuro"] { --pie-fondo: #322B23; }
     :root[data-tema="oscuro"] .mapa-cas {
       --m-fondo: #201C16;
       --m-curva: #5E8B35;
       --m-curva-suave: #41551F;
       --m-ruta: #3E362C;
       --m-ruta-linea: #968B7D;
       --m-zona: #BAB0A0;
       --m-zona-chica: #A39889;
       --m-ruta-txt: #C3B9A9;
     }

   GRAFITO CALIDO
     Base gris calido de muy poca saturacion: el verde del manual queda como
     el unico color de toda la pagina y por eso suena mas fuerte. Es la mas
     sobria y la mas segura, y se descarto justamente por eso: sigue siendo
     un carbon, y lo que el cliente pidio fue salir del carbon. Peor
     contraste medido de la maqueta: 4.5:1.

     :root {
       --o-papel: #201F1B;
       --o-papel-hondo: #282722;
       --o-tapa: #302F29;
       --o-tinta: #F2F0E9;
       --o-tinta-suave: #B8B5AC;
       --o-tinta-tenue: #B5B2A9;
       --o-borde: #3F3E37;
       --o-borde-sutil: rgba(242, 240, 233, 0.13);
       --o-borde-vivo: #949189;
       --o-verde-piso: #2C3520;
       --o-verde-texto: #A2D855;
       --o-verde-hondo: #C2E88C;
       --o-verde-vivo: #8ACD35;
       --o-verde-borde: #47592F;
       --o-alerta: #FF9E8C;
       --o-foco: #A2D855;
       --o-cab-fondo: #2D2C26;
       --o-papel-nulo: rgba(32, 31, 27, 0);
       --o-etica-velo: rgba(40, 39, 34, 0.80);
       --o-etica-filtro: grayscale(0.6) contrast(1) brightness(0.64);
       --o-campo-fondo: #383731;
       --o-campo-fondo-foco: #3D3C35;
       --o-pack-fondo: radial-gradient(64% 60% at 50% 42%, #3C3B34 0%, #282722 100%);
       --o-anillo-suave: inset 0 0 0 1px rgba(242, 240, 233, 0.07);
       --o-anillo-verde: inset 0 0 0 1px rgba(162, 216, 85, 0.32);
       --o-velo-modal: rgba(12, 11, 9, 0.74);
       --o-brillo-interior: inset 0 1px 0 rgba(242, 240, 233, 0.09);
       --o-sombra-pack: drop-shadow(0 7px 12px rgba(12, 11, 9, 0.45)) drop-shadow(0 0 18px rgba(220, 218, 205, 0.12));
       --o-sombra-pack-alta: drop-shadow(0 11px 17px rgba(12, 11, 9, 0.52)) drop-shadow(0 0 22px rgba(220, 218, 205, 0.16));
       --o-sombra-pack-modal: drop-shadow(0 9px 14px rgba(12, 11, 9, 0.48)) drop-shadow(0 0 20px rgba(220, 218, 205, 0.14));
     }
     :root[data-tema="oscuro"] { --pie-fondo: #2D2C26; }
     :root[data-tema="oscuro"] .mapa-cas {
       --m-fondo: #1C1B18;
       --m-curva: #5A7F35;
       --m-curva-suave: #3F4F2A;
       --m-ruta: #3A3931;
       --m-ruta-linea: #918E85;
       --m-zona: #B4B1A8;
       --m-zona-chica: #9E9B92;
       --m-ruta-txt: #BDBAB1;
     }

   Si se cambia de direccion, hay que llevar los mismos valores al bloque
   espejo de producto.css y volver a medir el contraste.
   ============================================================ */