/* CAS, propuesta 07: ficha ampliada de producto.
   Misma familia que la portada inmersiva y el mismo sistema de tokens:
   un solo juego de nombres, dos temas. La identidad sale entera de brand.css.
   Aca solo hay composicion. */

/* ============================================================
   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 estilos.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: rgba(255, 255, 255, 0.94);
  --papel-nulo: rgba(250, 250, 248, 0);
  --campo-fondo: #DDE2CF;
  --campo-fondo-foco: #D3D9C2;
  --pack-fondo: radial-gradient(64% 60% at 50% 42%, #FFFFFF 0%, #EBF2E0 100%);
  /* ESPEJO de estilos.css: dos capas y no tres, y la capa larga recortada */
  --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.

     ESPEJO: este bloque es identico al de estilos.css, que ademas guarda al
     final las otras dos direcciones de oscuro que se probaron. */
  --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);
  --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 */
  --media-velo-alto: linear-gradient(180deg, rgba(18, 22, 14, 0.34) 0%, rgba(18, 22, 14, 0.05) 26%, 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);
  /* 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: ESPEJO exacto del bloque de estilos.css ----
     Razon 1.25 en el tramo de texto y 1.25 al cuadrado en el de display,
     anclada en 17px. Si toca cambiar un valor, se cambia en los dos archivos. */
  --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: 5.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);
  --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. */


/* ============================================================
   0b. Tokens propios de la ficha.
   Mismos nombres del sistema, mas lo que esta pagina necesita
   y la portada no tiene. Los valores oscuros se escriben una
   sola vez como --o-*, igual que arriba.
   ============================================================ */

:root {
  /* La ficha respira menos que la portada: es lectura, no recorrido */
  --aire: clamp(3.5rem, 7vw, 6.5rem);
  --alto-barra: 92px;

  /* Lo unico que el sistema no tiene: el hover del boton de tinta plena.
     En claro la tinta se aclara, en oscuro se blanquea, y en los dos casos
     el texto sigue siendo --sobre-tinta. */
  --tinta-hover: #33372F;
  --o-tinta-hover: #FBFCF3;
}

:root[data-tema="oscuro"] { --tinta-hover: var(--o-tinta-hover); }



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

/* La familia tambien en html: brand.css solo la declara en body */
html { font-family: var(--fuente); }
body { background: var(--papel); color: var(--tinta); font-size: var(--t-3); overflow-x: hidden; }

/* Sin esto el navegador le mete Arial a los controles y aparecen varias familias */
button, input, select, textarea, optgroup {
  font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit;
}
h1, h2, h3, h4, h5, h6 { font-size: var(--t-5); }

::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;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: 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; 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;
}
.boton--linea:hover { box-shadow: inset 0 0 0 1px var(--verde-texto); color: var(--verde-texto); transform: translateY(-2px); }
.boton--ancho { width: 100%; justify-content: center; }
.boton[aria-disabled="true"] { opacity: 0.55; pointer-events: 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);
}
.ico-btn:hover { background: var(--borde-sutil); }

/* El icono muestra el tema al que se va, no el que esta puesto */
/* Control secundario: circulo chico, area de toque de 44px por el pseudo */
.ico-btn--tema { width: 30px; height: 30px; position: relative; color: var(--tinta-suave); margin-right: 0.15rem; }
.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); }

#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; }


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

/* ---------- Cabecera ---------- */
/* Misma solucion que en la portada: la pastilla se apoya sobre una repisa del
   color del papel, asi el contenido no se ve pasar por el aire de arriba. */
.barra {
  position: sticky; top: 0; z-index: 60;
  --barra-aire: 14px;
  --barra-alto: 64px;
  padding: var(--barra-aire) var(--canal) 0;
}
.barra::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--barra-aire) + var(--barra-alto) + 16px);
  background: linear-gradient(
    to bottom,
    var(--papel) 0,
    var(--papel) calc(var(--barra-aire) + var(--barra-alto)),
    var(--papel-nulo) 100%);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  pointer-events: none;
}
.barra__pastilla { position: relative; }
.barra__pastilla {
  display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem);
  max-width: 1240px; margin-inline: auto; height: var(--barra-alto);
  padding: 0 0.5rem 0 1rem;
  border-radius: var(--r-pastilla);
  background: var(--cab-fondo);
  /* Fondo solido, como la isla de la portada fuera del video: el vidrio ya no
     tenia nada que difuminar y sumaba trabajo de GPU en un elemento pegado. */
  box-shadow: var(--anillo-suave), var(--sombra-isla), var(--brillo-interior);
}

/* El isotipo es el mismo objeto en los dos temas: cambia la version, no el tamaño */
.barra__marca { flex: 0 0 auto; display: block; text-decoration: none; }
.barra__isotipo {
  position: relative; display: block; width: 32px; aspect-ratio: 117.261 / 125;
  transition: transform 0.5s var(--sal);
}
.barra__marca:hover .barra__isotipo { transform: scale(1.06); }
.barra__logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.barra__logo--blanco { opacity: 0; }
:root[data-tema="oscuro"] .barra__logo--color { opacity: 0; }
:root[data-tema="oscuro"] .barra__logo--blanco { opacity: 1; }


.barra__nav { display: flex; gap: clamp(1rem, 2vw, 1.9rem); margin-left: auto; }
.barra__nav a {
  text-decoration: none; font-size: var(--t-2); font-weight: 500; color: var(--tinta);
  transition: color 0.3s var(--sal);
}
.barra__nav a:hover { color: var(--verde-texto); }
.barra__acciones { display: flex; align-items: center; gap: 0.3rem; }
.barra__cotizar {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 0; border-radius: var(--r-pastilla); cursor: pointer;
  background: var(--tinta); color: var(--sobre-tinta);
  font: inherit; font-weight: 700; font-size: var(--t-2);
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  transition: background-color 0.35s var(--sal);
}
.barra__cotizar:hover { background: var(--tinta-hover); }
.barra__cuenta {
  display: grid; place-items: center; min-width: 1.65rem; height: 1.65rem;
  border-radius: var(--r-pastilla); padding: 0 0.4rem;
  background: var(--verde); color: var(--sobre-verde); font-size: var(--t-1);
}
.barra__cuenta[data-vacio="si"] { background: var(--sobre-tinta-tenue); color: var(--sobre-tinta); }

/* ---------- Miga ---------- */
.miga {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  font-size: var(--t-2); color: var(--tinta-suave);
}
.miga a { color: var(--tinta-suave); text-decoration: none; }
.miga a:hover { color: var(--verde-texto); text-decoration: underline; text-underline-offset: 3px; }
.miga__sep { color: var(--tinta-tenue); }
.miga #miga-actual { color: var(--tinta); font-weight: 700; }

/* ---------- Rescate sin JS ---------- */
.rescate { padding-block: clamp(3rem, 8vw, 6rem); display: none; }
.rescate h1 { font-size: var(--t-7); max-width: 18ch; }
.rescate p { margin: 1.1rem 0 0; color: var(--tinta-suave); }
.rescate__salidas { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
html.no-js .rescate, html.sin-armar .rescate { display: block; }
html.listo .rescate { display: none; }

/* ---------- Reveladores ---------- */
html.js .revelar { opacity: 0; transform: translateY(24px); }
html.js .revelar.visible {
  opacity: 1; transform: none;
  transition: opacity 0.8s var(--sal), transform 0.8s var(--sal);
}
html.simple .revelar { opacity: 1 !important; transform: none !important; }

/* ---------- Ficha ---------- */
.ficha { padding-block: clamp(1.6rem, 3vw, 2.6rem) var(--aire); }
.ficha__grilla {
  display: grid; gap: clamp(1.8rem, 4vw, 3.6rem) clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-areas:
    "carril cabeza"
    "carril cuerpo";
  align-items: start;
}
.ficha__carril { grid-area: carril; position: sticky; top: calc(var(--alto-barra) + 8px); }
.ficha__cabeza { grid-area: cabeza; }
.ficha__cuerpo { grid-area: cuerpo; }

/* Pack */
.pack {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 5 / 4; border-radius: var(--r-xl);
  background: var(--pack-fondo);
  box-shadow: var(--anillo-suave), var(--sombra-tarjeta);
}
/* El envase tiene alfa: la sombra la pone el filtro, que cambia de peso por tema.
   Con multiply el envase desaparecia sobre oscuro. */
.pack img {
  position: relative; z-index: 1;
  width: auto; height: 86%; max-width: 80%;
  object-fit: contain; filter: var(--sombra-pack-modal);
}
.pack__sello {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: var(--verde); color: var(--sobre-verde);
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.35rem 0.85rem; border-radius: var(--r-pastilla);
}

/* Modulo de cotizacion */
.compra {
  margin-top: 0.9rem; padding: 1.2rem 1.3rem 1.35rem;
  background: var(--tapa); border-radius: var(--r-lg);
  box-shadow: var(--anillo-suave), var(--sombra-tarjeta);
}
.compra__titulo {
  margin: 0 0 0.9rem; font-size: var(--t-1); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave);
}
/* ---------- 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; }
.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; }
}

/* Fuera del espejo: la ficha ampliada es ancha y el módulo respira un poco más */
.compra .pedido { gap: 0.6rem; }
.compra .pedido__equivale { max-width: 52ch; }

.compra__estado {
  margin: 0.9rem 0 0; min-height: 1.3rem;
  font-size: var(--t-2); font-weight: 700; color: var(--verde-texto);
}
.compra__estado:empty { min-height: 0; }
.compra__ver {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: var(--t-2); color: var(--verde-texto);
  text-decoration: underline; text-underline-offset: 3px;
}
.compra__legal { margin: 1rem 0 0; font-size: var(--t-2); line-height: 1.5; color: var(--tinta-suave); }

/* Cabeza de la ficha */
.ficha__tipo {
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.1rem; padding: 0; list-style: none;
}
.ficha__tipo li {
  font-size: var(--t-1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--verde-hondo); background: var(--verde-piso);
  padding: 0.35rem 0.8rem; border-radius: var(--r-pastilla);
}
.ficha__cabeza h1 {
  font-size: var(--t-7); letter-spacing: -0.035em; line-height: 1;
  max-width: 14ch;
}
.ficha__activo {
  margin: 0.9rem 0 0; font-size: var(--t-4);
  font-weight: 700; color: var(--verde-texto);
}
.ficha__resumen {
  margin: 1.1rem 0 0; font-size: var(--t-4); line-height: 1.45;
  color: var(--tinta); max-width: 32ch;
}

/* Cuerpo */
.bloque + .bloque { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.bloque h2 {
  font-size: var(--t-5); letter-spacing: -0.02em; margin-bottom: 1.1rem;
}
.bloque p { color: var(--tinta); font-size: var(--t-3); max-width: 62ch; margin: 0; }

.datos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--borde);
}
.datos > div { background: var(--tapa); padding: 1rem 1.1rem; }
.datos dt {
  margin: 0; font-size: var(--t-1); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.datos dd { margin: 0.35rem 0 0; font-weight: 700; font-size: var(--t-3); }

.pastillas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.pastillas li {
  padding: 0.5rem 1rem; border-radius: var(--r-pastilla);
  background: var(--tapa); font-size: var(--t-2); font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--borde-sutil);
}
.bloque__nota { margin-top: 0.9rem; font-size: var(--t-2); color: var(--tinta-suave); }

/* Lo que el marbete declara y no es una ficha de datos: se lee como lista corta */
.marbete { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; }
.marbete li { font-size: var(--t-3); line-height: 1.55; color: var(--tinta-suave); }

/* Treinta malezas en pastillas llenas pesan demasiado: van como una lista
   corrida, separadas por un punto, que se recorre con la vista y no se toca. */
.pastillas--sueltas {
  /* Corren como texto, no como fichas: asi el punto separador queda pegado a
     la palabra que termina y ningun renglon arranca con un punto suelto. */
  display: block; max-width: 62ch; line-height: 1.9;
}
.pastillas--sueltas li {
  display: inline; background: transparent; box-shadow: none; border-radius: 0;
  padding: 0; font-size: var(--t-3); color: var(--tinta-suave);
}
.pastillas--sueltas li:not(:last-child)::after {
  /* El espacio duro pega el punto a la palabra que termina: el renglon
     nunca arranca con un separador suelto. */
  content: '\00a0· '; color: var(--borde-vivo);
}

/* La tabla de dosis: cultivo a la izquierda, numero a la derecha, sin lineas */
.dosis { margin: 0; display: grid; gap: 1px; background: var(--borde); border-radius: var(--r-md); overflow: hidden; }
.dosis > div {
  background: var(--tapa); padding: 0.85rem 1.1rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem 1.5rem; align-items: baseline;
}
.dosis dt { margin: 0; font-size: var(--t-3); color: var(--tinta-suave); }
.dosis dd { margin: 0; font-weight: 700; font-size: var(--t-3); white-space: nowrap; }


.legal-ficha {
  margin-top: clamp(2.4rem, 5vw, 3.6rem); padding-top: 1.4rem;
  font-size: var(--t-2); line-height: 1.55; color: var(--tinta-suave); max-width: 62ch;
}

/* ---------- Otros productos ---------- */
.otros { padding-block: var(--aire); background: linear-gradient(180deg, var(--papel) 0%, var(--papel-hondo) 100%); }
/* Título y enlace comparten el primer renglón, la bajada corre debajo a todo
   el ancho. Antes el título vivía en una columna de 20ch y el enlace quedaba
   contra el margen derecho, con medio ancho vacío entre los dos. */
.otros__cabeza {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  column-gap: clamp(1.2rem, 3vw, 2.5rem); row-gap: 0.75rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
/* El orden del HTML es título, bajada, enlace. La grilla sube el enlace al
   primer renglón sin romper la lectura cuando la cabeza se apila. */
.otros h2 { grid-area: 1 / 1; font-size: var(--t-6); letter-spacing: -0.03em; }
.otros__todos {
  grid-area: 1 / 2; justify-self: end; white-space: nowrap;
  font-weight: 700; font-size: var(--t-2); color: var(--verde-texto);
  text-decoration: underline; text-underline-offset: 4px;
}
.otros__intro {
  grid-area: 2 / 1 / 3 / -1; margin: 0; color: var(--tinta-suave);
  font-size: var(--t-4); line-height: 1.5; max-width: 62ch; text-wrap: pretty;
}
.otros__grilla {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.4rem);
}
.tarjeta {
  display: flex; flex-direction: column; text-align: left; text-decoration: none;
  border: 0; border-radius: var(--r-lg); padding: 1.1rem 1.35rem 1.5rem;
  background: var(--tapa); color: inherit;
  box-shadow: var(--anillo-suave), var(--sombra-tarjeta);
  transition: transform 0.6s var(--sal), box-shadow 0.6s var(--sal), border-color 0.4s var(--sal);
}
.tarjeta:hover { transform: translateY(-6px); box-shadow: var(--anillo-verde), var(--sombra-flota); }
.tarjeta__pack {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 5 / 4; margin-bottom: 1.1rem; border-radius: var(--r-md);
  background: var(--pack-fondo);
}
.tarjeta__pack img {
  position: relative; z-index: 1; width: 62%; max-height: 80%;
  object-fit: contain; filter: var(--sombra-pack);
  /* La sombra no se anima: al cambiar de tema el filtro queda rasterizado a medias */
  transition: transform 0.7s var(--sal);
}
.tarjeta:hover .tarjeta__pack img { transform: translateY(-7px) scale(1.03); filter: var(--sombra-pack-alta); }
.tarjeta__motivo {
  margin: 0 0 0.5rem; font-size: var(--t-1); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.tarjeta h3 { font-size: var(--t-5); letter-spacing: -0.025em; }
.tarjeta__activo { margin: 0.35rem 0 0; font-size: var(--t-2); color: var(--verde-texto); font-weight: 700; }
.tarjeta__resumen { margin: 0.8rem 0 1.2rem; font-size: var(--t-3); color: var(--tinta-suave); flex: 1; }
.tarjeta__pie { display: flex; align-items: center; justify-content: space-between; gap: 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-hondo); 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); }

/* ---------- Producto inexistente ---------- */
.vacio { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--aire); }
.vacio h1 { font-size: var(--t-7); max-width: 16ch; }
.vacio__bajada { margin: 1.2rem 0 0; font-size: var(--t-4); color: var(--tinta-suave); max-width: 52ch; }
.vacio__acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.8rem 0 clamp(2.5rem, 5vw, 3.5rem); }
.vacio__rubro { margin-bottom: 1.1rem; }
.indice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; padding: 0; margin: 0; list-style: none; }
.indice a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.15rem; border-radius: var(--r-md); background: var(--tapa);
  text-decoration: none; color: inherit;
  box-shadow: var(--anillo-suave), var(--sombra-tarjeta);
  transition: transform 0.4s var(--sal), box-shadow 0.4s var(--sal);
}
.indice a:hover { transform: translateY(-3px); box-shadow: var(--anillo-verde), var(--sombra-flota); }
.indice b { font-size: var(--t-3); }
.indice small { display: block; color: var(--tinta-suave); font-size: var(--t-2); font-weight: 400; }
.indice span[aria-hidden] { color: var(--verde-texto); font-weight: 700; }

/* ---------- Pie ---------- */
/* El pie es oscuro en los dos temas: es el cierre de la pagina, no una seccion mas */
.pie { background: var(--pie-fondo); color: var(--pie-texto); padding-block: clamp(3rem, 7vw, 5rem); }
.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; }
}
.pie a { color: var(--pie-fuerte); }

/* ---------- 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[hidden] { display: none; }
.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.16em; text-transform: uppercase; color: var(--tinta-suave); }
.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); color: var(--tinta-suave); }
.campo-form input, .campo-form textarea {
  font: inherit; font-size: var(--t-3); color: var(--tinta);
  background: var(--campo-fondo); border: 0; border-radius: 12px;
  padding: 0.72rem 0.9rem; width: 100%;
  transition: border-color 0.3s var(--sal), background-color 0.3s var(--sal);
}
.campo-form input:focus, .campo-form textarea:focus { outline: none; background: var(--campo-fondo-foco); box-shadow: inset 0 0 0 2px var(--verde-texto); }
.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; }
.panel__aviso { margin: 1rem 0 0; font-size: var(--t-2); color: var(--tinta-suave); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .ficha__grilla {
    grid-template-columns: 1fr;
    grid-template-areas: "cabeza" "carril" "cuerpo";
  }
  .ficha__carril { position: static; }
  .ficha__cabeza h1 { max-width: 18ch; }
  .ficha__resumen { max-width: 46ch; }
  .pack { aspect-ratio: 4 / 3; }
  .pie__grilla { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Tres columnas siguen entrando, pero la tarjeta necesita menos aire para respirar */
  .tarjeta { padding: 0.9rem 1rem 1.2rem; }
  .barra__nav { display: none; }
  .barra__acciones { margin-left: auto; }
}

@media (max-width: 560px) {
  .barra { --barra-aire: 10px; --barra-alto: 58px; }
  .barra__pastilla { padding-left: 0.8rem; gap: 0.6rem; }
  .barra__isotipo { width: 27px; }
  .barra__cotizar { padding: 0.45rem 0.45rem 0.45rem 0.85rem; }
  .pack { aspect-ratio: 1 / 1; }
  .otros__grilla { grid-template-columns: 1fr; }
  /* Apilado, el enlace baja al final: primero el título, después la bajada */
  .otros__cabeza { grid-template-columns: minmax(0, 1fr); }
  .otros h2, .otros__intro, .otros__todos { grid-area: auto; }
  .otros__todos { justify-self: start; }
  .indice { grid-template-columns: 1fr; }
  .panel__caja { border-radius: 0; }
  /* A dos columnas el ultimo dato ocupa la fila entera: nunca queda una celda vacia */
  .datos { grid-template-columns: 1fr 1fr; }
  .datos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (prefers-reduced-transparency: reduce) {
  .barra::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- 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); }