/* ═══════════════════════════════════════════════════════════════════
   BECUCO · sistema visual web

   3537 C  #001E02  verde oscuro    lienzo
   7596 C  #2A180E  marrón oscuro
   7600 C  #4D1C00  marrón medio    APROXIMADO del swatch — confirmar
   155  C  #E2C9AC  beige           tipografía y botón
   139  C  #965C2D  ocre            acento, bajo el 10%
   4287 C  #3C3C3B  gris medio

   Prohibidos: blanco puro, negro puro, sepia.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --green:#001E02;
  --brown:#2A180E;
  --brown-mid:#4D1C00;
  --beige:#E2C9AC;
  --ocre:#965C2D;
  --b80:rgba(226,201,172,.80);
  --b55:rgba(226,201,172,.55);
  --b34:rgba(226,201,172,.34);
  --b18:rgba(226,201,172,.18);
  --b09:rgba(226,201,172,.09);
  --display:'Bodoni Moda',Didot,'Times New Roman',serif;
  --body:'EB Garamond',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--green);
  color:var(--beige);
  font-family:var(--body);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  position:relative;overflow-x:hidden;
}

.bg{
  position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;
  background-image:url('fondo.jpg');
  background-size:cover;background-position:center;
  filter:saturate(.62) contrast(1.10) brightness(.90);
  opacity:.9;
}
.bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 58% 46% at 33% 44%,
      rgba(0,30,2,.87) 0%,
      rgba(0,30,2,.93) 46%,
      rgba(0,30,2,.975) 78%),
    linear-gradient(105deg,rgba(0,30,2,.985) 0%,rgba(0,30,2,.955) 46%,rgba(0,30,2,.98) 100%);
}

.horizon{
  position:absolute;left:0;right:0;bottom:0;height:16vh;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(77,28,0,0)    0%,
    rgba(77,28,0,.07) 55%,
    rgba(77,28,0,.16) 100%);
}

.rule-frame{
  position:absolute;top:24px;left:24px;right:24px;bottom:24px;
  height:auto;pointer-events:none;z-index:4;border:1px solid var(--b09);
}

/* Canto: el texto vertical del lomo. Densidad sin carga de lectura. */
.count{
  position:absolute;top:44px;right:52px;z-index:5;
  font-size:8.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--b34);
}
.count b{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.06em;color:var(--b55)}

/* ── Rejilla ──────────────────────────────────────────────────────── */
.stage{
  position:relative;z-index:3;
  min-height:100vh;
  min-height:100svh;
  display:grid;grid-template-columns:1fr;
  align-items:center;
  padding:56px 34px;
}

/* ── Lámina de medición ───────────────────────────────────────────
   La cifra y su unidad como una sola pieza, dentro del marco.     */
.plate{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  z-index:1;pointer-events:none;user-select:none;
  display:flex;flex-direction:column;align-items:flex-start;
  padding-left:6vw;
}
.figure{
  font-family:var(--display);font-weight:400;
  font-size:min(30vw,240px);line-height:.82;
  letter-spacing:-.02em;
  color:rgba(226,201,172,.13);
}
.tick{
  display:block;width:54px;height:1px;
  background:rgba(226,201,172,.22);
  margin:20px 0 12px;
}
.unit{
  font-size:9px;letter-spacing:.46em;text-transform:uppercase;
  color:var(--b34);
}

.col{width:100%;max-width:380px;justify-self:center}

/* ── Aparición ────────────────────────────────────────────────────── */
.r{opacity:0;transform:translateY(9px);animation:rise 1.3s cubic-bezier(.16,.72,.29,1) forwards}
.d1{animation-delay:.2s}
.d2{animation-delay:.7s}
.d3{animation-delay:1.15s}
.d4{animation-delay:1.6s}
@keyframes rise{to{opacity:1;transform:none}}

.lockup{display:block;width:100%;max-width:236px;height:auto;opacity:.94}

.draw{
  height:1.5px;background:var(--ocre);margin:26px 0 0;
  transform-origin:left center;transform:scaleX(0);
  animation:draw 1.9s cubic-bezier(.22,.68,.24,1) 1s forwards;
}
@keyframes draw{to{transform:scaleX(1)}}

.lede{
  font-family:var(--display);
  font-size:clamp(19px,2vw,22px);line-height:1.46;
  margin:34px 0 0;letter-spacing:.01em;color:var(--beige);
}
.lede span{display:block;color:var(--b55);font-family:var(--body);font-size:19px;margin-bottom:9px}

.ask{
  margin-top:38px;
  font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--b34);
}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pot{display:none}

.field input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--b34);
  color:var(--beige);font-family:var(--body);font-size:17px;
  padding:12px 2px;margin-top:12px;transition:border-color .5s ease;
}
.field input::placeholder{color:var(--b34);font-size:15px;letter-spacing:.01em;text-transform:none}
.field input:focus{outline:none;border-bottom-color:var(--beige)}
.field input:focus-visible{outline:1px solid var(--ocre);outline-offset:5px}

button{
  width:100%;margin-top:24px;
  background:var(--beige);color:var(--green);border:0;
  font-family:var(--body);font-size:10.5px;
  letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;
  padding:18px;cursor:pointer;transition:opacity .4s ease;
}
button:hover{opacity:.86}
button:focus-visible{outline:2px solid var(--ocre);outline-offset:4px}
button[disabled]{opacity:.5;cursor:default}

.err{display:none;margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--b80)}
.err.on{display:block}

.foot{
  margin-top:34px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--b34);
}
.foot a{color:var(--b34);text-decoration:none;border-bottom:1px solid var(--b09)}
.foot a:hover{color:var(--b80)}
.foot a:focus-visible{outline:1px solid var(--ocre);outline-offset:3px}

/* ── Escritorio: la cifra a un lado, la acción al otro ────────────── */
@media (min-width:880px){
  .stage{grid-template-columns:1.05fr .95fr;padding:56px 88px}
  .plate{padding-left:8vw}
  .figure{font-size:min(20vw,260px)}
  .col{grid-column:2;justify-self:start;max-width:400px}
}

/* Contador: días hasta el 29 de septiembre */
.count{
  position:absolute;top:44px;right:52px;z-index:5;
  font-size:8.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--b34);
}
.count b{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.06em;color:var(--b55)}

@media (max-width:879px){
  /* En una sola columna la lámina se cruza con el texto: se retira. */
  .plate{display:none}
  .count{top:34px;right:34px}
  /* Vertical y estrecho: se corre el encuadre para que entre la luz.
     Mismo tratamiento de color que en escritorio: la foto conserva
     parte de su saturación, que es lo que da el verde profundo.        */
  .bg{
    background-position:27% center;
    filter:saturate(.62) contrast(1.10) brightness(.90);
  }
  .bg::after{
    background:
      radial-gradient(ellipse 74% 34% at 46% 40%,
        rgba(0,30,2,.86) 0%,
        rgba(0,30,2,.93) 48%,
        rgba(0,30,2,.975) 80%),
      linear-gradient(160deg,rgba(0,30,2,.985) 0%,rgba(0,30,2,.955) 46%,rgba(0,30,2,.98) 100%);
  }
  .horizon{
    height:13vh;
    background:linear-gradient(to bottom,
      rgba(77,28,0,0)    0%,
      rgba(77,28,0,.06) 55%,
      rgba(77,28,0,.14) 100%);
  }

  /* Una sola pantalla: sin desplazamiento, sin fondo asomando */
  .stage{min-height:100svh;padding:44px 30px}

  /* La etiqueta se pega al campo: son una sola unidad */
  .ask{margin-top:28px;margin-bottom:-4px}
  .field input{margin-top:6px;padding:10px 2px}
  .foot{margin-top:26px}
}

@media (max-width:400px){
  .rule-frame{inset:20px}
  .count{top:26px;right:26px}
  .stage{padding:56px 26px}
}

/* ── Confirmación y texto largo ───────────────────────────────────── */
.done h1{font-family:var(--display);font-weight:400;font-size:29px;letter-spacing:.02em;line-height:1.3;margin:40px 0 20px}
.done p{font-size:16.5px;line-height:1.7;color:var(--b80)}

.prose{padding-bottom:24px}
.prose h1{font-family:var(--display);font-weight:400;font-size:27px;letter-spacing:.03em;margin:40px 0 34px}
.prose h2{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ocre);margin:32px 0 10px;font-weight:400}
.prose p{font-size:15px;line-height:1.78;color:var(--b80)}
.prose a{color:var(--beige);text-decoration:none;border-bottom:1px solid var(--b18)}

@media (prefers-reduced-motion:reduce){
  .r{opacity:1;transform:none;animation:none}
  .draw{transform:none;animation:none}
}