/* ============================================================
   DEL MONTE AG — PORTADA "Los 28 días que no viste"
   Solo la carga index.html (después de dm.css y form.css).
   No redefine nada de dm.css (.btn, .sec, .steps, .promesa,
   .cta, .foot, .rv, .nav, .modal…).

   Robustez sin JavaScript:
   · dm.js pone la clase .js en <html> (revelados .rv/.in)
   · portada.js pone la clase .pjs en <html> (cronómetro)
   Todo lo que un script anima se oculta SOLO bajo esas clases:
   si un script no llega, la página se ve completa igual.

   Tipografía: piso de 14px (.875rem) para frases; etiquetas
   mono cortas nunca bajo 11px (.6875rem).
   ============================================================ */

/* ---------- utilidades ---------- */
em.sol{font-style:italic;color:var(--sol)}
.n28{font-style:normal;color:var(--sol);white-space:nowrap;position:relative}
.n28::after{content:"";position:absolute;left:2%;right:2%;bottom:.05em;height:.06em;background:var(--sol);opacity:.45;border-radius:99px}
/* [hidden] tiene que ganarle al display:inline-flex, si no el enlace
   secundario se ve igual aunque el HTML lo declare oculto. */
.link-suave[hidden]{display:none}
.link-suave{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);padding:15px 6px;min-height:44px;transition:color .3s}
.link-suave:hover{color:var(--verde-hi)}

/* ============================================================
   HERO — en móvil la primera pantalla es título + promesa + botón;
   el cronómetro viene después. En escritorio, copy y aparato lado a lado.
   ============================================================ */
/* las 28 estrías de fondo: en fondo claro son líneas de papel milimetrado,
   apenas insinuadas (--line-2), nunca crema sobre negro */
.hero__regla{position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/28 - 1px),var(--line-2) calc(100%/28 - 1px),var(--line-2) calc(100%/28))}
/* La fila «more» se fue con el párrafo largo que iba debajo del
   cronómetro (23-ago-2026): repetía lo que el aparato ya cuenta solo. */
.heroC{position:relative;z-index:2;width:100%;display:grid;gap:clamp(26px,4vw,40px);grid-template-areas:"copy" "dev"}
.heroC__copy{grid-area:copy}
.heroC__dev{grid-area:dev;min-width:0}
.heroC__copy h1{margin:18px 0 0}
.heroC__promesa{margin:14px 0 2px;font-size:clamp(1.02rem,1.8vw,1.22rem);line-height:1.5;color:var(--sobre-noche-dim);max-width:40ch}
.hero--crono .hero__note{color:var(--sobre-noche-dim)}
@media(min-width:1000px){
  .heroC{grid-template-columns:1.04fr .96fr;grid-template-areas:"copy dev";
    column-gap:clamp(30px,4.5vw,60px);align-items:center}
}

/* ============================================================
   EL CRONÓMETRO DE CAMPO
   dos paneles simultáneos en escritorio · hoja que se voltea en móvil
   ============================================================ */
.crono{position:relative;width:100%;max-width:530px;margin-inline:auto;border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--tarjeta),var(--papel));
  box-shadow:var(--sombra-3);
  padding:clamp(12px,2.8vw,18px);
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pjs .crono{cursor:ew-resize}
@media(min-width:1000px){.crono{max-width:560px}}

/* esquinas de instrumento (de A) */
.crono::before,.crono::after,.crono .esq::before,.crono .esq::after{
  content:"";position:absolute;width:14px;height:14px;border-color:var(--verde);border-style:solid;opacity:.6;pointer-events:none}
.crono::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px;border-radius:18px 0 0 0}
.crono::after{top:-1px;right:-1px;border-width:1.5px 1.5px 0 0;border-radius:0 18px 0 0}
.crono .esq::before{bottom:-1px;left:-1px;border-width:0 0 1.5px 1.5px;border-radius:0 0 0 18px}
.crono .esq::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0;border-radius:0 0 18px 0}

/* cabecera: rótulo + contador */
.crono__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.crono__tit{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);line-height:1.6;max-width:56%;padding-top:8px}
.crono__tit::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--verde);margin-right:8px;vertical-align:middle;animation:pfpulso 2.4s infinite}
@keyframes pfpulso{0%{box-shadow:0 0 0 0 rgba(128,188,0,.55)}70%{box-shadow:0 0 0 10px rgba(128,188,0,0)}100%{box-shadow:0 0 0 0 rgba(128,188,0,0)}}
.crono__dia{text-align:right;pointer-events:none}
.crono__dia small{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:2px}
.crono__dia b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,10vw,4.2rem);line-height:.9;letter-spacing:-.04em;color:var(--cream);font-variant-numeric:tabular-nums;transition:color .4s}
.crono.rojo .crono__dia b{color:var(--sol)}
.crono__dia b.salta{animation:pfpop .28s cubic-bezier(.2,.9,.3,1)}
@keyframes pfpop{40%{transform:scale(1.05)}}
.crono__dia i{display:block;font-style:normal;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim);margin-top:4px}

/* escena */
.crono__escena{position:relative}
.crono__carta{position:relative;width:100%}
/* el panel del instrumento: papel milimetrado hundido dentro de la tarjeta */
.pane{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0;
  display:flex;flex-direction:column;
  background:
    repeating-linear-gradient(0deg,var(--line-2) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 22px),
    var(--hundido)}
/* la cabecera del panel va en flujo (flex:none): nunca se monta sobre el dibujo */
/* Rótulo arriba y chip debajo: en dos columnas el título "Lo que ve el
   ingeniero" se partía en tres líneas y chocaba con el chip de estado. */
.pane__cab{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:9px 10px 0;position:relative;z-index:3;flex:none}
.pane__rotulo{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);line-height:1.4}
.pane__rotulo em{display:block;font-style:normal;font-size:.6875rem;letter-spacing:.06em;color:var(--sol);margin-top:2px}
@media(min-width:1000px){
  .pane__cab{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:8px}
  .pane__rotulo{max-width:11ch}
}
.pane__chip{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:99px;border:1px solid;white-space:nowrap;flex:none;transition:color .3s,border-color .3s,background .3s}
.pane__chip i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;font-style:normal}
/* chips de estado: relleno suave + letra oscura. El verde y el naranja de la
   marca no se pueden leer como letra sobre fondo claro. */
.pane__chip--ok{color:var(--verde-hi);border-color:var(--verde);background:var(--verde-suave)}
.pane__chip--det{color:var(--sol-hi);border-color:var(--sol);background:var(--sol-suave)}
.pane__chip--mal{color:var(--alerta-txt);border-color:var(--alerta);background:var(--alerta-suave)}
.pane svg{width:100%;height:auto;padding:6px 8% 10px;flex:1 1 0%;min-height:0}
.pane__nota{position:absolute;left:8%;bottom:7%;max-width:72%;z-index:4;pointer-events:none;
  font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.15;color:var(--sol-hi);
  text-shadow:0 1px 6px rgba(255,255,255,.95),0 0 2px rgba(255,255,255,.95);transform:rotate(-2deg);transition:opacity .5s ease .15s}
/* sin portada.js la nota se ve siempre; con él, aparece con las estrías */
.pjs .pane__nota{opacity:0}
.pjs .crono.marcado .pane__nota{opacity:1}

/* estados que anima portada.js: solo se ocultan si portada.js llegó.
   (el JS escribe style.opacity en línea, que gana sobre estas reglas) */
.pjs .crono .mark,.pjs .crono .les,.pjs .crono .trazo{opacity:0}

/* móvil: una sola hoja que se voltea (gesto de C) — solo con JS */
@media(max-width:759px){
  .pjs .crono__escena{perspective:1200px}
  .pjs .crono__carta{height:clamp(230px,64vw,310px);transform-style:preserve-3d;transform:rotateY(var(--ry,0deg));
    transition:transform .65s cubic-bezier(.22,1.05,.3,1)}
  .pjs .pane{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .pjs .pane--ing{transform:rotateY(180deg)}
  /* sin JS: los dos paneles apilados, visibles */
  html:not(.pjs) .crono__carta{display:grid;gap:10px}
}
/* escritorio: los dos paneles a la vez (argumento de A) */
@media(min-width:760px){
  .crono__carta{display:grid;grid-template-columns:1fr 1fr;gap:12px;transform:none!important}
}

/* botón de voltear (solo móvil, solo con JS) — 44px de alto mínimo */
.crono__voltear{display:none;margin-top:10px;width:100%;align-items:center;justify-content:center;gap:9px;
  background:var(--tarjeta);border:1px solid var(--line);border-radius:99px;padding:12px 16px;min-height:44px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);
  cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.crono__voltear[aria-pressed="true"]{border-color:var(--sol);color:var(--sol-hi);background:var(--sol-suave)}
.crono__voltear svg{width:18px;height:10px;flex:none}
@media(max-width:759px){.pjs .crono__voltear{display:inline-flex}}

/* pista de días: verde (llegas) → sol (se te va) → alerta (ya fue) */
.crono__pista{position:relative;height:38px;border-radius:12px;margin-top:12px;overflow:hidden;
  background:var(--hundido);border:1px solid var(--line)}
.pista__ticks{position:absolute;inset:0 12px;display:flex;justify-content:space-between;align-items:center}
/* sobre fondo claro las marcas se dibujan con tinta, no con crema */
.pista__ticks i{width:1px;height:9px;background:var(--line);font-style:normal}
.pista__ticks i:nth-child(15){height:15px;background:var(--sol)}        /* día 14: ya podría asomar */
.pista__ticks i:nth-child(25){height:15px;background:var(--alerta-txt)} /* día 24: recién la ves */
.pista__ticks i:first-child,.pista__ticks i:last-child{height:15px;background:var(--tinta-3)}
.pista__gastado{position:absolute;left:12px;top:0;bottom:0;pointer-events:none;opacity:.95;max-width:calc(100% - 24px);
  background-image:linear-gradient(90deg,rgba(128,188,0,0),rgba(128,188,0,.38) 45%,rgba(246,163,40,.45) 78%,rgba(228,87,46,.5) 100%);
  background-repeat:no-repeat;border-right:1px solid var(--verde)}
/* la aguja: perilla verde con centro blanco. En negro era crema con halo;
   en claro el halo sería suciedad, así que la elevación va con --sombra-1. */
.pista__aguja{position:absolute;top:50%;left:12px;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:var(--verde);box-shadow:var(--sombra-1),0 0 0 4px rgba(76,112,0,.14);pointer-events:none}
.pista__aguja::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--tarjeta)}
.crono__marcas{display:flex;justify-content:space-between;gap:8px;margin-top:7px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim)}
.crono__marcas b{color:var(--sol);font-weight:500}
.crono__marcas i{font-style:normal;color:var(--alerta-txt);text-align:right}

/* lectura: la frase que remata el argumento — 14px mínimo, sin mayúsculas corridas */
.crono__read{margin-top:12px;border:1px solid var(--line-2);border-left:2px solid var(--verde);border-radius:10px;
  background:var(--hundido);padding:11px 14px;min-height:64px;
  font-family:var(--mono);font-size:.875rem;letter-spacing:.01em;color:var(--cream-dim);line-height:1.6;
  transition:border-color .3s}
.crono__read b{display:block;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-hi);margin-bottom:3px;transition:color .3s}
.crono.rojo .crono__read{border-left-color:var(--alerta)}
.crono.rojo .crono__read b{color:var(--alerta-txt)}

/* pista de uso: envuelve en dos líneas si hace falta, nunca se sale de la tarjeta */
/* La píldora de instrucción se sienta abajo, fuera de las hojas: en el centro
   tapaba justo lo que hay que mirar y en 375px se partía en cuatro líneas. */
.crono__hint{position:absolute;left:50%;bottom:14px;top:auto;transform:translateX(-50%);z-index:7;pointer-events:none;
  display:none;white-space:nowrap;max-width:calc(100% - 24px);text-align:center;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim);line-height:1.4;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--line);box-shadow:var(--sombra-1);border-radius:99px;padding:8px 14px;transition:opacity .5s}
@media(max-width:420px){.crono__hint{font-size:.625rem;letter-spacing:.05em;padding:7px 11px}}
.pjs .crono__hint{display:block}
.crono.tocado .crono__hint{opacity:0}
.crono__hint .hint-desk{display:none}
@media(min-width:760px){.crono__hint .hint-desk{display:inline}.crono__hint .hint-mov{display:none}}

/* ============================================================
   CINTA DE HECHOS VERIFICADOS (de A) — estática, legible a pleno sol
   ============================================================ */
.cinta{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--ink-2);padding:14px 0}
.cinta ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.cinta b{color:var(--verde-hi);font-weight:500}

/* ============================================================
   CALENDARIO DE LOS 28 DÍAS — celdas estáticas en el HTML
   ============================================================ */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
@media(min-width:760px){.cal{gap:10px}}
.cal__c{position:relative;aspect-ratio:1/1;border-radius:10px;border:1px solid var(--line-2);background:var(--ink-2);overflow:hidden;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);transition-delay:var(--rz,0s)}
/* solo se ocultan si dm.js llegó (él agrega .in al revelar) */
.js .cal__c{opacity:0;transform:translateY(14px)}
.js .cal.in .cal__c{opacity:1;transform:none}
/* el relleno naranja es RELLENO de marca: sobre blanco necesita algo más de
   cuerpo que sobre negro para seguir leyéndose como "lo que avanza por dentro" */
.cal__c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--p)*100%);
  background:linear-gradient(180deg,rgba(246,163,40,.12),rgba(246,163,40,.45));border-top:1px solid rgba(246,163,40,.7)}
.cal__c b{position:absolute;top:6px;left:8px;font-family:var(--mono);font-weight:500;font-size:clamp(.75rem,1.9vw,.85rem);color:var(--cream-dim);z-index:2}
.cal__c span{position:absolute;left:8px;right:6px;bottom:6px;z-index:2;display:none;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--cream-dim);line-height:1.4}
@media(min-width:600px){.cal__c span{display:block}}
/* días 14-27: ya podría asomar */
.cal__c--pos{border-color:var(--sol-marca)}
.cal__c--pos b{color:var(--sol)}
@media(min-width:600px){.cal__c--pos span{color:var(--sol)}}
/* día 28: mancha declarada */
.cal__c--vis{border-color:var(--alerta);background:var(--alerta-suave)}
.cal__c--vis b{color:var(--alerta-txt)}
.cal__c--vis::after{background:linear-gradient(180deg,rgba(228,87,46,.14),rgba(228,87,46,.45));border-top-color:rgba(228,87,46,.75)}
@media(min-width:600px){.cal__c--vis span{color:var(--alerta-txt)}}
.cal__leyenda{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:22px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-dim)}
.cal__leyenda span{display:inline-flex;align-items:center;gap:8px}
.cal__leyenda i{width:12px;height:12px;border-radius:3px;font-style:normal;flex:none}
.cal__leyenda .l1{background:linear-gradient(180deg,rgba(246,163,40,.14),rgba(246,163,40,.5));border:1px solid var(--sol-marca)}
.cal__leyenda .l2{background:var(--sol-suave);border:1px solid var(--sol-marca)}
.cal__leyenda .l3{background:rgba(228,87,46,.3);border:1px solid var(--alerta)}
.cal__cierre{margin-top:26px;font-family:var(--serif);font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.15;letter-spacing:-.02em;max-width:24ch}
.cal__cierre em{font-style:italic;color:var(--sol)}

/* ============================================================
   LOS 7 CULTIVOS — misma barra para todos (sin porcentajes inventados)
   ============================================================ */
.cults{display:grid;gap:2px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--line)}
.cult{background:var(--ink-2);padding:clamp(20px,3vw,30px);display:grid;gap:14px;grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.cult{grid-template-columns:200px 1fr auto;gap:26px}}
.cult__quien h3{font-family:var(--sans);font-weight:700;font-size:1.08rem;letter-spacing:-.02em}
.cult__quien h3 a{transition:color .3s}
.cult__quien h3 a:hover{color:var(--verde-hi)}
.cult__quien>span{display:block;margin-top:3px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sol)}
.cult__linea{padding-top:4px}
.cult__barra{position:relative;height:6px;border-radius:99px;background:var(--hundido)}
/* la barra es visual, no una medición: mismo largo para los siete cultivos */
.cult__oculto{position:absolute;left:0;top:0;bottom:0;right:14px;border-radius:99px;overflow:hidden;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1) .15s;transform-origin:left}
.js .cult .cult__oculto{transform:scaleX(0)}
.js .cult.in .cult__oculto{transform:scaleX(1)}
.cult__oculto::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(246,163,40,.9) 0 7px,rgba(246,163,40,.3) 7px 14px)}
/* el punto rojo pierde el glow: sobre fondo claro un halo de color es suciedad */
.cult__punto{position:absolute;top:50%;right:2px;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;
  background:var(--alerta);box-shadow:0 0 0 4px rgba(228,87,46,.18)}
/* etiquetas en flujo normal, debajo de la barra: nunca se montan sobre la nota */
.cult__tags{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
/* estas dos etiquetas SON texto: van en los tonos legibles, no en el de relleno */
.cult__tags .a{color:var(--sol)}
.cult__tags .b{color:var(--alerta-txt);text-align:right}
.cult__nota{font-size:.88rem;color:var(--cream-dim);line-height:1.5;margin-top:8px}
.cult__acc{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
@media(min-width:960px){.cult__acc{flex-direction:column;align-items:flex-end;gap:8px}}
.cult .btn--sm{min-height:44px}
.cult__ver{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);padding:10px 6px;transition:color .3s;white-space:nowrap}
.cult__ver:hover{color:var(--verde-hi)}

/* ============================================================
   BITÁCORA del paso 2 — el método, sin horas inventadas
   ============================================================ */
.bitac{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.bitac li{position:relative;padding-left:20px;font-size:.88rem;color:var(--cream-dim);line-height:1.55}
.bitac li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;
  background:var(--sol);opacity:.8}

/* ============================================================
   EL PAPEL — programa por escrito (de C) + sello de A
   ============================================================ */
.papelgrid{display:grid;gap:clamp(34px,5vw,64px);align-items:center;grid-template-columns:1fr}
@media(min-width:980px){.papelgrid{grid-template-columns:1.02fr .98fr}}
.programa{--mg:clamp(34px,6vw,50px);
  position:relative;overflow:hidden;background:linear-gradient(175deg,#F7F4EA,#EDE8D8);color:#232B18;border-radius:6px 14px 14px 6px;
  padding:clamp(22px,4vw,34px) clamp(18px,3.6vw,30px) clamp(24px,4vw,34px) var(--mg);
  box-shadow:var(--sombra-3);transform:rotate(-.7deg);
  max-width:520px;width:100%;margin-inline:auto}
.programa::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,transparent 0 31px,rgba(35,43,24,.08) 31px 32px),
    linear-gradient(90deg,transparent calc(var(--mg) - 14px),rgba(226,106,60,.35) calc(var(--mg) - 14px),rgba(226,106,60,.35) calc(var(--mg) - 13px),transparent calc(var(--mg) - 13px))}
.programa::after{content:"";position:absolute;left:9px;top:26px;bottom:26px;width:8px;pointer-events:none;
  background-image:radial-gradient(circle 4px,rgba(20,26,16,.26) 0 3.4px,transparent 4px);
  background-size:8px 44px;background-repeat:repeat-y}
.programa h3{font-family:var(--mono);font-weight:700;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(35,43,24,.72);margin-bottom:16px;position:relative}
.prow{position:relative;display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px dotted rgba(35,43,24,.28)}
.prow b{font-family:var(--mono);font-weight:500;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(35,43,24,.72);flex:none;width:46%}
.prow span{font-family:var(--serif);font-style:italic;font-size:1.04rem;color:rgba(35,43,24,.78);transform:rotate(-.8deg);display:inline-block}
.programa__nota{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.25;color:var(--verde-deep);transform:rotate(-1deg);position:relative}
.programa__firma{margin-top:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;position:relative}
/* .62 daba 4,19:1 sobre el papel: la firma es texto y tiene que leerse.
   .72 es la misma tinta que usan las etiquetas del programa (5,2:1). */
.programa__firma .mono{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(35,43,24,.72)}
.sello-prog{position:absolute;right:6px;bottom:30px;width:clamp(96px,22vw,140px);transform:rotate(-12deg);
  mix-blend-mode:multiply;opacity:.92;pointer-events:none;z-index:2}
.motivos{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.motivos li{display:flex;gap:12px;align-items:flex-start;color:var(--cream-dim);font-size:.96rem;line-height:1.5}
.motivos svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--verde-hi)}
.papeltxt .hero__cta{margin-top:28px}

/* ============================================================
   BARRA CTA FIJA EN MÓVIL — el único botón flotante de la portada
   ============================================================ */
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:9200;display:none;
  padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.3);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px -10px rgba(20,26,16,.22);
  transform:translateY(105%);transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.ctabar .btn{width:100%}
.ctabar.on{transform:none}
@media(max-width:759px){
  .ctabar{display:block}
  body.con-barra .foot{padding-bottom:108px}
}
/* con el formulario abierto la barra no estorba (cubre el form.js actual
   y el nuevo, que usa body.fx-bloqueado) */
body.bloqueado .ctabar,body.fx-bloqueado .ctabar{display:none}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .crono__carta{transition:none}
  .crono__dia b.salta{animation:none}
  .crono__tit::before{animation:none}
  .crono__hint{transition:none}
  .js .cal__c{opacity:1;transform:none;transition:none}
  .js .cult .cult__oculto{transform:scaleX(1);transition:none}
  .ctabar{transition:none}
  .pane__nota{transition:none}
}


/* ============================================================
   UNA SOLA LETRA, TAMBIÉN EN LA PORTADA — 23 de agosto de 2026
   ------------------------------------------------------------
   Adentro del sistema la monoespaciada quedó reservada para código.
   Acá pasaba lo mismo que allá: la usaban los rótulos chicos, los
   números del cronómetro y los títulos del pie, y a ojo se lee como
   «hay otra fuente en esta página» aunque nadie sepa nombrarla.

   Los números no la necesitan: tabular-nums hace que las cifras midan
   lo mismo en la letra del sistema, que es justo lo que se quería de
   la mono, y en cuerpo chico se lee mejor. Lo que sí se conserva es el
   interletrado ABIERTO de los rótulos en mayúscula: sin eso, una
   mayúscula chica no se lee, se adivina.
   ============================================================ */
.cal__c b,
.cal__c span,
.cal__leyenda,
.cinta ul,
.crono__dia i,
.crono__dia small,
.crono__hint,
.crono__marcas,
.crono__read,
.crono__tit,
.crono__voltear,
.cult__quien>span,
.cult__tags,
.cult__ver,
.link-suave,
.pane__chip,
.pane__rotulo,
.programa h3,
.prow b{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}


/* ============================================================
   LA PREGUNTA CON LA QUE ARRANCA TODO — 23 de agosto de 2026
   ------------------------------------------------------------
   «La landing principal no debe ser solo de banano: debe preguntar qué
   plantación tienen y de ahí empezar todo.»

   Hasta hoy la portada abría con Sigatoka y banano, y el que siembra
   cacao o arroz tenía que deducir que también era para él. Los siete
   cultivos estaban, pero abajo del todo. Ahora la primera decisión de
   la página es suya, y al tocarla el titular, la amenaza, el reloj, el
   botón y el formulario pasan a hablar de lo suyo.

   Sin JavaScript cada botón es un enlace a su página de cultivo: la
   pregunta funciona igual, navegando. Nunca queda una pregunta muerta.
   ============================================================ */
.elige{margin:26px 0 24px}
.elige__q{
  font-family:var(--sans);font-size:.8125rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);
  margin:0 0 12px;
}
.elige__ops{display:flex;flex-wrap:wrap;gap:9px}
.elige__b{
  display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:0 16px 0 13px;
  border:1px solid var(--line);border-radius:980px;
  background:var(--tarjeta);color:var(--tinta-2);
  font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease;
}
.elige__b:hover{
  border-color:var(--verde);background:var(--verde-suave);color:var(--verde-hi);
  transform:translateY(-1px);text-decoration:none;
}
.elige__ico{width:22px;height:22px;flex:none;color:var(--verde)}
.elige__b:hover .elige__ico{color:var(--verde-hi)}
/* El elegido: relleno con el verde del logo y la letra casi negra encima
   (9,2:1). El verde de marca nunca va como letra sobre blanco. */
.elige__b[aria-current]{
  background:var(--verde-marca);border-color:var(--verde-marca);color:var(--sobre-verde);
}
.elige__b[aria-current] .elige__ico{color:var(--sobre-verde)}
.elige__b:focus-visible{outline:2px solid var(--verde-hi);outline-offset:2px}

/* Cuando ya eligió, la pregunta cambia de tono: deja de ser la orden
   principal de la pantalla y pasa a ser el rótulo de lo que eligió. */
.elige--hecho .elige__q{color:var(--verde)}

@media (max-width:640px){
  .elige{margin:22px 0 20px}
  .elige__ops{gap:7px}
  .elige__b{min-height:46px;padding:0 13px 0 11px;font-size:.875rem}
  .elige__ico{width:20px;height:20px}
}


/* ============================================================
   LA PREGUNTA, SOBRE EL HERO OSCURO — 23 de agosto de 2026
   ------------------------------------------------------------
   Los siete botones son ahora lo más importante de la primera
   pantalla, así que se ven como botones y no como etiquetas:
   borde de luz sobre la noche, y el elegido con el verde del
   logotipo relleno —que sobre este fondo por fin se puede usar
   en grande— y la letra casi negra encima (9,2:1).
   ============================================================ */
.hero--oscuro .elige{margin:24px 0 26px}
.hero--oscuro .elige__q{color:var(--sobre-noche-dim)}
.hero--oscuro .elige--hecho .elige__q{color:var(--verde-barra)}
.hero--oscuro .elige__b{
  border-color:var(--linea-noche);background:rgba(244,241,232,.055);
  color:var(--sobre-barra);
  backdrop-filter:blur(6px);
}
.hero--oscuro .elige__ico{color:var(--verde-barra)}
.hero--oscuro .elige__b:hover{
  border-color:var(--verde-barra);background:rgba(157,219,27,.14);color:var(--sobre-barra);
}
.hero--oscuro .elige__b:hover .elige__ico{color:var(--verde-barra)}
.hero--oscuro .elige__b[aria-current]{
  background:var(--verde-marca);border-color:var(--verde-marca);color:var(--sobre-verde);
  box-shadow:0 8px 26px -10px rgba(128,188,0,.8);
}
.hero--oscuro .elige__b[aria-current] .elige__ico{color:var(--sobre-verde)}
.hero--oscuro .elige__b:focus-visible{outline-color:var(--verde-barra)}

/* QUE SE NOTE QUE LA PÁGINA CONTESTÓ. Al elegir, portada.js le pone
   .cambia al bloque de texto durante medio segundo: el titular, la
   etiqueta y la frase entran de nuevo. Sin eso el cambio es tan
   instantáneo que la mitad de la gente no se da cuenta de que la
   página se reescribió para su cultivo. */
@keyframes dmEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.heroC__copy.cambia [data-hero-tag],
.heroC__copy.cambia [data-hero-h],
.heroC__copy.cambia [data-hero-p]{animation:dmEntra .42s cubic-bezier(.2,.9,.3,1) both}
.heroC__copy.cambia [data-hero-h]{animation-delay:.04s}
.heroC__copy.cambia [data-hero-p]{animation-delay:.08s}
@media(prefers-reduced-motion:reduce){
  .heroC__copy.cambia [data-hero-tag],
  .heroC__copy.cambia [data-hero-h],
  .heroC__copy.cambia [data-hero-p]{animation:none}
}

/* ============================================================
   LOS SIETE RELOJES — una lista, no siete tarjetas
   ------------------------------------------------------------
   Mismo texto que tenían las tarjetas, una quinta parte del alto.
   Cada fila entera es el enlace (nunca un «ver más» de 12 px),
   y mide 44 px de alto como todo lo que se toca en este sitio.
   ============================================================ */
.relojes{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line-2)}
.reloj{border-bottom:1px solid var(--line-2)}
.reloj>a{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ico n v" "ico a v" "ico d v";
  align-items:center;gap:2px 14px;
  padding:16px 4px;min-height:var(--tap);
  transition:background .25s,padding .25s;
}
.reloj>a:hover{background:var(--verde-suave);padding-left:12px;padding-right:12px}
.reloj__ico{grid-area:ico;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:var(--hundido);color:var(--verde);flex:none}
.reloj>a:hover .reloj__ico{background:#FFF;color:var(--verde-hi)}
.reloj__ico .elige__ico{width:24px;height:24px}
.reloj__n{grid-area:n;font-weight:600;font-size:1.06rem;letter-spacing:-.015em;color:var(--tinta)}
.reloj__a{grid-area:a;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--sol)}
.reloj__d{grid-area:d;font-size:var(--fs-min);line-height:1.5;color:var(--tinta-2);margin-top:3px}
.reloj__v{grid-area:v;color:var(--verde);font-size:1.1rem;opacity:0;transition:opacity .25s,transform .25s;transform:translateX(-6px)}
.reloj>a:hover .reloj__v{opacity:1;transform:none}
@media(min-width:860px){
  .reloj>a{grid-template-columns:auto 15rem 1fr auto;grid-template-areas:"ico n d v" "ico a d v";
    gap:0 20px;padding:18px 4px}
  .reloj__d{margin-top:0}
  .reloj__v{opacity:.35;transform:none}
}