/* =============================================================================
   AN ELEMENTS · an.css  (Etapa D1–D5 · 2026-11-02)
   Un solo archivo para el sistema nuevo de estilos y elements:
     1. Fuentes            5. Botones (verde · amarillo · rojo · a mano)
     2. Tokens (3 capas)   6. Cortes y formas de bloque
     3. Estilos de página  7. Movimiento
     4. Base del scope .an 8. Elements: sign-form, recent-signers, event, donate
   Todo vive bajo la clase .an (la pone AnHelper en #landing-page), así no
   pisa nada de lo que ya existe. Los Themes y el JSON solo tocan la capa 2.
   ============================================================================= */

/* ── 1. FUENTES ─────────────────────────────────────────────────────────────
   D-DIN (libre, ya está en el servidor) como sustituta de DIN Next. Para usar
   DIN Next con licencia: declarar su @font-face y cambiar --an-font-* en el
   JSON (design.fonts). */
@font-face{font-family:'D-DIN';src:url('../../font/D-DIN.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'D-DIN';src:url('../../font/D-DIN-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'D-DIN';src:url('../../font/D-DIN-Italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'D-DIN Condensed';src:url('../../font/D-DINCondensed.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'D-DIN Condensed';src:url('../../font/D-DINCondensed-Bold.woff') format('woff');font-weight:700;font-display:swap}

/* ── 2. TOKENS ──────────────────────────────────────────────────────────────
   Capa 1 · marca (Guía de Identidad 2020). No se tocan por campaña.
   Capa 2 · semánticos (--an-*). Los cambia cada estilo, Theme o JSON.
   Capa 3 · estilo de página (.an-style-*), más abajo. */
.an{
  /* capa 1 · marca */
  --an-brand-green:#159A48; --an-brand-green-d:#0F7A38;
  --an-brand-yellow:#F2B705; --an-brand-yellow-d:#D9A300;
  --an-brand-red:#D7372B;    --an-brand-red-d:#B22A20;
  --an-brand-blue:#336699;   --an-brand-aqua:#8BD1CB;

  /* capa 2 · semánticos (por defecto: neutro claro, apagado) */
  --an-font-display:'D-DIN Condensed','D-DIN','Roboto Condensed','Arial Narrow',sans-serif;
  --an-font-ui:'D-DIN',Roboto,Arial,sans-serif;
  --an-font-text:Georgia,'Times New Roman',serif;

  --an-bg:#f1efea;          /* fondo de página / bloques claros */
  --an-surface:#ffffff;     /* tarjetas, formularios */
  --an-surface-2:#f7f5f1;   /* campos, zonas secundarias */
  --an-ink:#1d2023;         /* texto principal */
  --an-ink-2:#3c4044;       /* texto largo */
  --an-muted:#6b6963;       /* metadatos (AA sobre --an-bg y --an-surface) */
  --an-line:#d6d2ca;        /* bordes y filetes */
  --an-dark:#16181a;        /* bloques oscuros */
  --an-on-dark:#f1efea;
  --an-on-dark-muted:#b3afa7;
  --an-fill:var(--an-ink);  /* barras de progreso, selección */
  --an-focus:#336699;

  --an-action:var(--an-brand-green);
  --an-action-h:var(--an-brand-green-d);
  --an-on-action:#ffffff;

  --an-radius:3px; --an-radius-lg:6px; --an-radius-pill:999px;
  --an-shadow:0 18px 40px -22px rgba(0,0,0,.45);
  --an-gap:clamp(16px,2.4vw,28px);
  --an-section-y:clamp(48px,7vw,104px);
  --an-ease:cubic-bezier(.16,1,.3,1);   /* expo-out */
  --an-dur:.7s;
}

/* ── 3. ESTILOS DE PÁGINA (design.style) ─────────────────────────────────── */
.an-style-cartel{
  --an-bg:#eceae5; --an-surface:#f1efea; --an-surface-2:#ffffff; --an-dark:#16181a;
  --an-radius:2px; --an-radius-lg:2px; --an-shadow:0 22px 50px -26px rgba(0,0,0,.6);
}
.an-style-testigo{
  --an-bg:#2a2e32; --an-surface:#f4f2ee; --an-surface-2:#ffffff; --an-dark:#202326;
  --an-ink-page:#eceae5; --an-radius:4px; --an-radius-lg:6px;
}
.an-style-esperanza{
  --an-bg:#f3efe7; --an-surface:#ffffff; --an-surface-2:#f8f6f1; --an-ink:#22303a; --an-ink-2:#3b4852;
  --an-muted:#5f6a73; --an-line:#ddd7cb; --an-fill:var(--an-brand-blue); --an-dark:#22303a;
  --an-radius:6px; --an-radius-lg:12px; --an-shadow:0 18px 40px -22px rgba(34,48,58,.35);
}
.an-style-investigacion{
  --an-bg:#eceae5; --an-surface:#f4f2ee; --an-surface-2:#ffffff; --an-dark:#141618;
  --an-radius:3px; --an-radius-lg:3px;
}

/* ── 4. BASE DEL SCOPE ───────────────────────────────────────────────────── */
.an{font-family:var(--an-font-ui);color:var(--an-ink);-webkit-font-smoothing:antialiased}
.an ::selection{background:var(--an-ink);color:var(--an-surface)}
.an :focus-visible{outline:3px solid var(--an-focus);outline-offset:2px}
.an .an-display{font-family:var(--an-font-display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.005em;text-wrap:balance}
.an .an-text{font-family:var(--an-font-text);line-height:1.6;color:var(--an-ink-2);text-wrap:pretty}
.an .an-meta{font:700 12px/1.2 var(--an-font-ui);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,currentColor 66%,transparent)}
.an .an-num{font-variant-numeric:tabular-nums}
/* títulos de los bloques existentes con la fuente de display, sin tocar tamaños */
.an .landing-section-title,.an .stage-hero-title{font-family:var(--an-font-display)}
.an .stage-hero-subtitle{font-family:var(--an-font-ui)}

/* ── 5. BOTONES ──────────────────────────────────────────────────────────────
   .an-btn + color (--green | --yellow | --red | --custom) + forma.
   Color a mano: style="--an-btn-bg:#…;--an-btn-ink:#…" con .an-btn--custom. */
.an-btn{
  --an-btn-bg:var(--an-action); --an-btn-bg-h:var(--an-action-h); --an-btn-ink:var(--an-on-action);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:.95em 1.4em;border:0;border-radius:var(--an-radius);
  background:var(--an-btn-bg);color:var(--an-btn-ink);
  font:700 clamp(16px,1.15vw,19px)/1 var(--an-font-ui);letter-spacing:.045em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:background-color .2s,transform .2s var(--an-ease),box-shadow .2s;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.55);
}
.an-btn:hover{background:var(--an-btn-bg-h);color:var(--an-btn-ink)}
.an-btn:active{transform:translateY(1px)}
.an-btn[disabled],.an-btn.is-loading{opacity:.75;cursor:progress}
.an-btn svg{width:1.05em;height:1.05em;flex:none}
.an-btn--block{display:flex;width:100%}
.an-btn--green{--an-btn-bg:var(--an-brand-green);--an-btn-bg-h:var(--an-brand-green-d);--an-btn-ink:#fff}
.an-btn--yellow{--an-btn-bg:var(--an-brand-yellow);--an-btn-bg-h:var(--an-brand-yellow-d);--an-btn-ink:#1d2023}
.an-btn--red{--an-btn-bg:var(--an-brand-red);--an-btn-bg-h:var(--an-brand-red-d);--an-btn-ink:#fff}
.an-btn--dark{--an-btn-bg:var(--an-ink);--an-btn-bg-h:#000;--an-btn-ink:var(--an-surface)}
.an-btn--custom{--an-btn-bg-h:color-mix(in srgb,var(--an-btn-bg) 82%,#000)}
.an-btn--soft{border-radius:8px}
.an-btn--pill{border-radius:var(--an-radius-pill)}
.an-btn--slant{border-radius:0;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);padding-right:2em}
.an-btn .an-btn-spin{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:an-spin .7s linear infinite;display:none}
.an-btn.is-loading .an-btn-spin{display:inline-block}
.an-btn.is-loading .an-btn-icon{display:none}
@keyframes an-spin{to{transform:rotate(360deg)}}

/* ── 6. CORTES Y FORMAS DE BLOQUE ────────────────────────────────────────────
   block.cut = { "type": "diagonal|diagonal-left|chevron|curve|torn|step",
                 "depth": "subtle|medium|strong" }
   El bloque se recorta con mask (sirve sobre fotos y vídeos) y el siguiente
   sube por debajo para rellenar el hueco. Sutil por defecto. */
.an .an-cut{--an-cut:clamp(16px,2.6vw,38px);position:relative;z-index:2;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--an-cut) + 1px) no-repeat,var(--an-cut-shape) bottom/100% var(--an-cut) no-repeat;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--an-cut) + 1px) no-repeat,var(--an-cut-shape) bottom/100% var(--an-cut) no-repeat}
.an .an-cut + *{margin-top:calc(-1 * var(--an-cut-prev, clamp(16px,2.6vw,38px)))!important;border-top:var(--an-cut-prev, clamp(16px,2.6vw,38px)) solid transparent;background-clip:border-box}
.an .an-cut--medium{--an-cut:clamp(26px,4.2vw,64px)}
.an .an-cut--medium + *{--an-cut-prev:clamp(26px,4.2vw,64px)}
.an .an-cut--strong{--an-cut:clamp(40px,6.5vw,100px)}
.an .an-cut--strong + *{--an-cut-prev:clamp(40px,6.5vw,100px)}
/* formas (zona visible del bloque dentro de la franja de corte) */
.an .an-cut--diagonal{--an-cut-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V0L0 10Z'/%3E%3C/svg%3E")}
.an .an-cut--diagonal-left{--an-cut-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V10L0 0Z'/%3E%3C/svg%3E")}
.an .an-cut--chevron{--an-cut-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V0L50 10Z'/%3E%3C/svg%3E")}
.an .an-cut--curve{--an-cut-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V0C70 13 30 13 0 0Z'/%3E%3C/svg%3E")}
.an .an-cut--torn{--an-cut:clamp(12px,1.6vw,22px);--an-cut-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V6L97 4L94 7L90 3L87 6L83 4L80 8L76 3L73 6L69 4L66 7L62 3L59 6L55 4L52 8L48 3L45 6L41 4L38 7L34 3L31 6L27 4L24 8L20 3L17 6L13 4L10 7L6 3L3 6L0 4Z'/%3E%3C/svg%3E")}
.an .an-cut--torn + *{--an-cut-prev:clamp(12px,1.6vw,22px)}
.an .an-cut--step{--an-cut-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V10H62V0Z'/%3E%3C/svg%3E")}
/* bloque inclinado entero (banda de urgencia) */
.an .an-skew{transform:skewY(-2.2deg);transform-origin:0 0;margin-block:clamp(24px,3vw,44px)}
.an .an-skew > *{transform:skewY(2.2deg)}
/* imagen o tarjeta que invade el bloque siguiente */
.an .an-overlap{position:relative;z-index:3;margin-bottom:calc(-1 * var(--an-overlap,96px))}
.an .an-overlap + *{border-top:var(--an-overlap,96px) solid transparent}
/* tratamiento de foto (design / block.media.treatment) */
.an .an-media--mute img,.an .an-media--mute .stage-bg,.an.an-media-mute .stage-bg{filter:saturate(.78) contrast(1.02)}
.an .an-media--duotone img{filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply}
.an .an-media--grain{position:relative}
.an .an-media--grain::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* cortes en el stage (stage.cut) */
.an .landing-stage.an-cut + .stage-divider-wrap,.an .landing-stage.an-cut + .stage-cols-wrapper{margin-top:0!important;padding-top:0}

/* ── 7. MOVIMIENTO ───────────────────────────────────────────────────────────
   data-an="reveal|wipe|rise|stagger" en cualquier elemento. an.js añade
   .is-in al entrar en pantalla (una sola vez). Con «reducir movimiento» o
   design.motion = "none" no se anima nada: el contenido se ve desde el
   principio (nunca queda oculto si el JS falla: .an-js lo activa). */
.an-js .an [data-an]{transition:opacity var(--an-dur) var(--an-ease),transform var(--an-dur) var(--an-ease),clip-path calc(var(--an-dur)*1.4) var(--an-ease),filter var(--an-dur) var(--an-ease)}
.an-js .an [data-an="reveal"]:not(.is-in){opacity:0;transform:translateY(22px)}
.an-js .an [data-an="rise"]:not(.is-in){opacity:0;transform:translateY(40px)}
.an-js .an [data-an="wipe"]:not(.is-in){clip-path:inset(0 0 100% 0);filter:saturate(.4)}
.an-js .an [data-an="wipe"].is-in{clip-path:inset(0 0 0 0)}
.an-js .an [data-an="stagger"] > *{transition:opacity var(--an-dur) var(--an-ease),transform var(--an-dur) var(--an-ease)}
.an-js .an [data-an="stagger"]:not(.is-in) > *{opacity:0;transform:translateY(16px)}
.an-js .an [data-an="stagger"].is-in > *:nth-child(2){transition-delay:.08s}
.an-js .an [data-an="stagger"].is-in > *:nth-child(3){transition-delay:.16s}
.an-js .an [data-an="stagger"].is-in > *:nth-child(4){transition-delay:.24s}
.an-js .an [data-an="stagger"].is-in > *:nth-child(n+5){transition-delay:.32s}
.an.an-motion-calm{--an-dur:.5s}
.an.an-motion-none [data-an],.an.an-motion-none [data-an] > *{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .an [data-an],.an [data-an] > *{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}
  .an *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ── 8a. SIGN-FORM ─────────────────────────────────────────────────────────── */
.an-sign,.an-sign *,.an-sign *::before,.an-sign *::after,.an-donate,.an-donate *,.an-signers,.an-signers *{box-sizing:border-box}
.an-sign{--sf-pad:clamp(18px,2vw,28px);background:var(--an-surface);color:var(--an-ink);border-radius:var(--an-radius-lg);padding:var(--sf-pad);box-shadow:var(--an-shadow);position:relative;text-align:left}
.an-sign--flat{box-shadow:none;border:1px solid var(--an-line)}
.an-sign--transparent{background:transparent;box-shadow:none;padding:0}
:is(.an-sign,.an-donate) .an-sign__title{font:700 clamp(24px,2.2vw,30px)/1.02 var(--an-font-display);text-transform:uppercase;margin:0 0 .25em;text-wrap:balance}
:is(.an-sign,.an-donate) p.an-sign__descr{font:400 15px/1.45 var(--an-font-ui);color:var(--an-muted);margin:0 0 1em;max-width:none}
.an-sign__progress{margin:0 0 1.1em}
.an-sign__nums{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 14px/1.2 var(--an-font-ui);color:var(--an-muted);margin-bottom:8px}
.an-sign__nums b{font:700 clamp(20px,1.8vw,24px)/1 var(--an-font-ui);color:var(--an-ink);font-variant-numeric:tabular-nums}
.an-bar{height:6px;background:color-mix(in srgb,var(--an-line) 70%,transparent);border-radius:3px;overflow:hidden}
.an-bar > i{display:block;height:100%;width:var(--an-bar,0%);background:var(--an-fill);border-radius:inherit;transition:width 1.4s var(--an-ease)}
.an-js .an-bar:not(.is-in) > i{width:0}
.an-sign__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.an-sign__grid > .is-full{grid-column:1/-1}
.an-field{display:block;margin:0}
.an-field > span:not(.an-field__err){display:block;font:700 11.5px/1 var(--an-font-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--an-muted);margin:0 0 6px}
.an-field input,.an-field select,.an-field textarea{display:block;width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--an-line);border-radius:var(--an-radius);background:var(--an-surface-2);color:var(--an-ink);font:400 17px/1.3 var(--an-font-ui);transition:border-color .15s,box-shadow .15s}
.an-field textarea{min-height:180px;font:400 16px/1.55 var(--an-font-text)}
.an-field input::placeholder{color:color-mix(in srgb,var(--an-muted) 75%,transparent)}
.an-field input:focus,.an-field select:focus,.an-field textarea:focus{outline:0;border-color:var(--an-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--an-focus) 25%,transparent)}
.an-field.is-invalid input,.an-field.is-invalid select{border-color:var(--an-brand-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--an-brand-red) 18%,transparent)}
.an-field > .an-field__err{display:none;font:400 13px/1.3 var(--an-font-ui);color:var(--an-brand-red-d);margin-top:5px}
.an-field.is-invalid > .an-field__err{display:block}
.an-loc{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-block:1px solid var(--an-line);font:400 14px/1.3 var(--an-font-ui);color:var(--an-muted)}
.an-loc b{color:var(--an-ink)}
.an-loc button{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.an-loc-edit{grid-column:1/-1;display:none;grid-template-columns:1fr 1fr;gap:10px}
.an-sign.is-loc-open .an-loc-edit{display:grid}
.an-sign.is-loc-open .an-loc{display:none}
.an-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.an-chip{position:relative}
.an-chip input{position:absolute;opacity:0;pointer-events:none}
.an-chip span{display:inline-flex;align-items:center;min-height:40px;padding:8px 15px;border:1px solid var(--an-line);border-radius:var(--an-radius-pill);background:var(--an-surface-2);font:400 15px/1.2 var(--an-font-ui);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.an-chip input:checked + span{background:var(--an-ink);border-color:var(--an-ink);color:var(--an-surface)}
.an-chip input:focus-visible + span{outline:3px solid var(--an-focus);outline-offset:2px}
.an-seg{grid-column:1/-1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--an-line);border-radius:var(--an-radius);overflow:hidden}
.an-seg label{position:relative;margin:0}
.an-seg input{position:absolute;opacity:0}
.an-seg span{display:block;padding:12px 6px;text-align:center;font:400 15px/1.2 var(--an-font-ui);cursor:pointer;background:var(--an-surface-2)}
.an-seg input:checked + span{background:var(--an-ink);color:var(--an-surface)}
.an-check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font:400 14px/1.4 var(--an-font-ui);color:var(--an-ink-2);cursor:pointer}
.an-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--an-ink);flex:none}
:is(.an-sign,.an-donate) p.an-sign__legal{font:400 12.5px/1.45 var(--an-font-ui);color:var(--an-muted);margin:.9em 0 0;max-width:none}
.an-sign__legal a{color:inherit}
.an-sign__submit{grid-column:1/-1;margin-top:6px}
.an-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* carta como papel */
.an-letter{grid-column:1/-1;background:#fbfaf6;border:1px solid #e3dfd6;border-radius:var(--an-radius);padding:16px 18px;box-shadow:0 12px 26px -20px rgba(0,0,0,.4);position:relative}
.an-letter__to{font:400 13px/1.4 var(--an-font-ui);color:var(--an-muted);border-bottom:1px solid #e8e4dc;padding-bottom:8px;margin-bottom:8px}
.an-sign p.an-letter__subject{font:700 16px/1.3 var(--an-font-ui);margin:0 0 8px;color:var(--an-ink)}
.an-letter__body{font:400 15px/1.6 var(--an-font-text);color:#2d3034;white-space:pre-line;max-height:240px;overflow:auto}
.an-letter__body mark{background:color-mix(in srgb,var(--an-brand-green) 14%,#fff);color:#0f5e2f;border-radius:3px;padding:0 3px;font:700 .92em var(--an-font-ui)}
.an-letter__edit{position:absolute;top:12px;right:14px;all:unset;cursor:pointer;font:700 12px var(--an-font-ui);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.an-letter__edit{position:absolute;top:12px;right:14px}
.an-letter__fields{display:none;gap:10px}
.an-sign.is-letter-edit .an-letter__fields{display:grid}
.an-sign.is-letter-edit .an-letter__preview{display:none}
/* evento */
.an-event{grid-column:1/-1;display:grid;grid-template-columns:84px 1fr;border:1px solid var(--an-line);border-radius:var(--an-radius-lg);overflow:hidden;margin-bottom:4px}
.an-event__date{background:var(--an-dark);color:var(--an-on-dark);text-align:center;padding:12px 0}
.an-event__date small{display:block;font:700 12px/1 var(--an-font-ui);letter-spacing:.14em}
.an-event__date b{display:block;font:700 42px/1 var(--an-font-display);margin:4px 0}
.an-event__info{padding:12px 14px;font:400 15px/1.45 var(--an-font-ui)}
.an-event__info a{color:var(--an-ink);font-weight:700;text-underline-offset:3px}
.an-seats{display:flex;gap:3px;margin-top:8px}
.an-seats i{flex:1;height:8px;border-radius:2px;background:var(--an-fill)}
.an-seats i.is-free{background:color-mix(in srgb,var(--an-line) 80%,transparent)}
.an-full{grid-column:1/-1;background:var(--an-dark);color:var(--an-on-dark);border-radius:var(--an-radius-lg);padding:14px 16px;font:400 14px/1.45 var(--an-font-ui)}
.an-full b{display:block;font:700 22px/1.1 var(--an-font-display);text-transform:uppercase;margin-bottom:2px}
/* estados: enviado → segunda pantalla */
.an-sign__done{display:none}
.an-sign.is-done .an-sign__form{display:none}
.an-sign.is-done .an-sign__done{display:block;animation:an-pop .6s var(--an-ease) both}
@keyframes an-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.an-sign .an-done__title{font:700 clamp(26px,2.4vw,34px)/1 var(--an-font-display);text-transform:uppercase;margin:0 0 .3em}
.an-sign p.an-done__text{font:400 16px/1.5 var(--an-font-ui);color:var(--an-ink-2);margin:0 0 1em;max-width:none}
.an-done__tick{width:52px;height:52px;border-radius:50%;background:var(--an-brand-green);color:#fff;display:grid;place-items:center;margin-bottom:14px}
.an-done__tick svg{width:26px;height:26px;stroke-dasharray:30;stroke-dashoffset:30;animation:an-draw .6s .2s var(--an-ease) forwards}
@keyframes an-draw{to{stroke-dashoffset:0}}
.an-share{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.an-share a,.an-share button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:1px solid var(--an-line);border-radius:var(--an-radius);font:700 14px var(--an-font-ui);color:var(--an-ink);background:var(--an-surface-2)}
.an-share a:hover,.an-share button:hover{border-color:var(--an-ink)}
.an-pref{border-top:1px solid var(--an-line);padding-top:12px;margin-top:14px}
.an-pref summary{cursor:pointer;font:400 13.5px/1.4 var(--an-font-ui);color:var(--an-muted);list-style:none}
.an-pref summary::-webkit-details-marker{display:none}
.an-pref summary::before{content:'›';display:inline-block;margin-right:6px;transition:transform .2s}
.an-pref[open] summary::before{transform:rotate(90deg)}
.an-pref__opts{display:grid;gap:6px;margin-top:10px}
.an-pref__opts label{display:flex;gap:8px;align-items:center;font:400 14px var(--an-font-ui);cursor:pointer}
.an-pref__ok{font:400 13px var(--an-font-ui);color:var(--an-brand-green-d);margin-top:6px;display:none}
.an-pref.is-saved .an-pref__ok{display:block}
.an-sign__error{display:none;margin-top:10px;padding:10px 12px;border-radius:var(--an-radius);background:color-mix(in srgb,var(--an-brand-red) 10%,#fff);color:var(--an-brand-red-d);font:400 14px/1.4 var(--an-font-ui)}
.an-sign.is-error .an-sign__error{display:block}
/* hoja en móvil (form.mobile = "sheet") */
.an-sheet-bar{display:none}
@media (max-width:767.98px){
  .an-sign__grid{grid-template-columns:1fr}
  .an-sign--sheet{position:fixed;left:0;right:0;bottom:0;z-index:1060;border-radius:16px 16px 0 0;max-height:88vh;overflow:auto;transform:translateY(105%);transition:transform .45s var(--an-ease)}
  .an-sign--sheet.is-open{transform:none}
  .an-sign--sheet::before{content:'';display:block;width:40px;height:4px;border-radius:2px;background:var(--an-line);margin:-6px auto 12px}
  .an-sheet-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1055;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--an-dark);color:var(--an-on-dark);transform:translateY(110%);transition:transform .4s var(--an-ease)}
  .an-sheet-bar.is-visible{transform:none}
  .an-sheet-bar .an-btn{min-height:44px;padding:.8em 1.2em}
  .an-sheet-shade{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1058;opacity:0;pointer-events:none;transition:opacity .3s}
  .an-sheet-shade.is-open{opacity:1;pointer-events:auto}
}

/* ── 8b. RECENT-SIGNERS ──────────────────────────────────────────────────── */
.an-signers{list-style:none;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--an-line);display:grid;gap:2px;align-content:start;min-height:var(--an-signers-h,auto)}
.an-signer{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:6px 0;font:400 14px/1.25 var(--an-font-ui);color:var(--an-muted)}
.an-signer b{color:var(--an-ink);font-weight:700}
.an-signer img,.an-signer .an-avatar{width:34px;height:34px;border-radius:50%;background:var(--an-surface-2);border:1px solid var(--an-line);object-fit:cover}
.an-signer time{font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.an-signer.is-new{animation:an-signer-in .7s var(--an-ease) both}
.an-signer.is-me b{color:var(--an-brand-green-d)}
@keyframes an-signer-in{from{opacity:0;transform:translateY(-10px);background:color-mix(in srgb,var(--an-brand-green) 10%,transparent)}to{opacity:1;transform:none;background:transparent}}
.an-signers--dark{border-color:rgba(255,255,255,.18)}
.an-signers--dark .an-signer{color:var(--an-on-dark-muted)}
.an-signers--dark .an-signer b{color:var(--an-on-dark)}
.an-signers--ticker{grid-auto-flow:column;grid-auto-columns:max-content;overflow:hidden;border-top:0;gap:22px;mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.an-signers--ticker .an-signer{grid-template-columns:28px auto auto}
.an-signers--ticker .an-signer img,.an-signers--ticker .an-signer .an-avatar{width:28px;height:28px}
/* avatares apilados (landing de registro) */
.an-faces{display:flex;align-items:center}
.an-faces img{width:34px;height:34px;border-radius:50%;border:2px solid var(--an-surface);background:var(--an-surface-2);margin-left:-9px}
.an-faces img:first-child{margin-left:0}
.an-countbump{animation:an-bump .5s var(--an-ease)}
@keyframes an-bump{40%{transform:scale(1.12);color:var(--an-brand-green-d)}}

/* ── 8c. COUNTDOWN · GOAL · DONATE (D7) ──────────────────────────────────── */
.an-countdown{display:flex;gap:10px;justify-content:center}
.an-countdown div{min-width:78px;padding:10px 0;text-align:center;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:color-mix(in srgb,currentColor 7%,transparent);border-radius:var(--an-radius-lg)}
.an-countdown b{display:block;font:700 40px/1 var(--an-font-display);font-variant-numeric:tabular-nums}
.an-countdown span{font:400 12px var(--an-font-ui);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.an-donate{background:var(--an-surface);border-radius:var(--an-radius-lg);padding:clamp(18px,2vw,28px);box-shadow:var(--an-shadow)}
.an-steps{display:flex;gap:6px;margin-bottom:16px}
.an-steps i{flex:1;height:4px;border-radius:2px;background:var(--an-line)}
.an-steps i.is-on{background:var(--an-ink)}
.an-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.an-amount{position:relative}
.an-amount input{position:absolute;opacity:0}
.an-amount span{display:block;height:100%;padding:12px;border:1px solid var(--an-line);border-radius:var(--an-radius);background:var(--an-surface-2);cursor:pointer;font:400 12.5px/1.3 var(--an-font-ui);color:var(--an-muted)}
.an-amount span b{display:block;font:700 22px/1.1 var(--an-font-ui);color:var(--an-ink);margin-bottom:2px}
.an-amount input:checked + span{border:2px solid var(--an-ink);padding:11px}
.an-goal .an-sign__nums b{font-size:22px}
.an-impact input[type=range]{width:100%;accent-color:var(--an-ink)}
.an-impact output{display:block;font:700 56px/1 var(--an-font-display);margin:4px 0 14px;font-variant-numeric:tabular-nums}
.an-impact input[type=range]{height:28px}
.an-donate .an-seg{margin-bottom:12px}
.an-donate p.an-sign__legal svg{width:14px;height:14px}
.an-amounts[hidden]{display:none}
.an-proof{display:grid;gap:8px}
.an-proof li{list-style:none;display:flex;gap:10px;align-items:center;border:1px solid var(--an-line);border-radius:var(--an-radius-pill);padding:6px 14px 6px 6px;background:var(--an-surface);font:400 14px var(--an-font-ui)}
.an-proof img{width:30px;height:30px;border-radius:50%}
.an-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:1050;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--an-radius-lg);background:var(--an-dark);color:var(--an-on-dark);box-shadow:var(--an-shadow);transform:translateY(140%);transition:transform .45s var(--an-ease)}
.an-sticky.is-visible{transform:none}
@media (min-width:992px){.an-sticky{left:auto;right:24px;bottom:24px;width:420px}}