/* Portada de donación — registro brand.
   Escena: alguien abre el link en el teléfono, de noche, después de ver las
   noticias. De ahí el fondo oscuro. Estrategia de color: Committed, el ámbar
   de marca toma una banda entera a sangre en vez de ser un acento del 10%. */

.public-donar-page {
    /* Neutros tibios, tintados hacia el ámbar. Nunca #000 ni #fff. */
    --tinta:    #17140F;
    --humo:     #221E18;
    --borde:    #35302A;
    --ceniza:   #B3AA9B;
    --hueso:    #F2EDE1;
    --ambar:    #FDCC3C;
    --brasa:    #E7A11A;

    /* Escala modular 1.25 */
    --t-nota:   0.8rem;
    --t-base:   1rem;
    --t-lead:   1.1rem;
    --t-sec:    1.953rem;
    --t-cifra:  3.052rem;

    --salida:   cubic-bezier(0.16, 1, 0.3, 1);

    background: var(--tinta);
    color: var(--hueso);
    font-family: Barlow, system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

.public-donar-page ::selection { background: var(--ambar); color: var(--tinta); }

/* Los márgenes por defecto de <p> a 3rem de tipo son 48px de aire muerto. */
.public-donar-page p { margin: 0; }

.limite {
    width: min(1120px, 100% - 2.5rem);
    margin-inline: auto;
}

/* ── Portada ─────────────────────────────────────────────── */
.portada {
    position: relative;
    padding: clamp(2.2rem, 7.15vw, 4.675rem) 0 clamp(1.65rem, 4.4vw, 2.75rem);
    overflow: hidden;
}

.portada-foto {
    position: absolute;
    inset: 0;
    background-image: url('../images/rescate/jaguar.jpg');
    background-size: cover;
    background-position: 62% 38%;
    opacity: 0.5;
}

/* El degradado empuja la foto a atmósfera: la tipografía manda. */
.portada-velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, var(--tinta) 32%, rgba(23, 20, 15, 0.62) 62%, rgba(23, 20, 15, 0.35) 100%),
        linear-gradient(to top, var(--tinta) 2%, transparent 45%);
}

.portada > .limite { position: relative; }

.marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;

}

.marca img { width: 30px; height: 30px; border-radius: 8px; }

.marca span {
    font-size: var(--t-nota);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ceniza);
}

.portada h1 {
    font-family: Anton, Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(2.45rem, 9vw, 4rem);
    line-height: 0.94;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    max-width: 17ch;
    margin: 1.8rem 0 1.2rem;
}

.portada h1 em {
    font-style: normal;
    color: var(--ambar);
}

.entrada {
    font-size: var(--t-lead);
    line-height: 1.2;
    color: var(--ceniza);
    max-width: 52ch;
    PADDING: 0 0 1rem;
}

.acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.boton {
    font-family: Barlow, sans-serif;
    font-size: var(--t-base);
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.85rem 1.7rem;
    border-radius: 2px;
    border: 1.5px solid transparent;
    text-decoration: none;
    display: inline-block;
    transition: background 180ms var(--salida), color 180ms var(--salida), border-color 180ms var(--salida);
}

.boton-lleno { background: var(--ambar); color: var(--tinta); }
.boton-linea { border-color: var(--borde); color: var(--hueso); }

@media (hover: hover) and (pointer: fine) {
    .boton-lleno:hover { background: var(--brasa); color: var(--tinta); }
    .boton-linea:hover { border-color: var(--ceniza); color: var(--hueso); }
}

.boton:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* ── Banda ámbar: acá el color toma la superficie ────────── */
.banda {
    background: var(--ambar);
    color: var(--tinta);
    padding: clamp(1.1rem, 2.75vw, 1.76rem) 0;
}

.banda-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
}

.banda-cifra {
    font-family: Anton, Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 7vw, var(--t-cifra));
    line-height: 0.9;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.banda-nota {
    font-size: var(--t-nota);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.72;
    margin-bottom: 0.5rem;
}

.banda-meta { font-size: var(--t-base); font-weight: 600; max-width: 26ch; }

/* ── Campañas: libro de registro, no tarjetas ────────────── */
.registro { padding: clamp(1.925rem, 4.95vw, 3.3rem) 0; }

.titulo-seccion {
    font-family: Anton, Impact, sans-serif;
    font-weight: 400;
    font-size: var(--t-sec);
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 2.2rem;
}

.asiento {
    padding: 2rem 0;
    border-top: 1px solid var(--borde);
}

.asiento:last-of-type { border-bottom: 1px solid var(--borde); }

.asiento-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}

.asiento h3 {
    font-size: var(--t-lead);
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.asiento-plazo {
    font-size: var(--t-nota);
    color: var(--ceniza);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.asiento p {
    color: var(--ceniza);
    margin: 0.5rem 0 1.5rem;
    max-width: 62ch;
}

.asiento-cifras {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem 1rem;
    margin-bottom: 0.7rem;
}

.asiento-monto {
    font-family: Anton, Impact, sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ambar);
    font-variant-numeric: tabular-nums;
}

.asiento-de { font-size: var(--t-nota); color: var(--ceniza); font-variant-numeric: tabular-nums; }

.regla {
    height: 3px;
    background: var(--borde);
    overflow: hidden;
}

.regla-avance {
    height: 100%;
    background: var(--ambar);
    width: var(--avance, 0%);
}

.asiento-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

.enlace-aportar {
    font-size: var(--t-base);
    font-weight: 700;
    color: var(--ambar);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 180ms var(--salida);
}

@media (hover: hover) and (pointer: fine) {
    .enlace-aportar:hover { border-bottom-color: var(--ambar); }
}

.enlace-aportar:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

.sin-campanas {
    padding: 3rem 0;
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    color: var(--ceniza);
    max-width: 52ch;
}

.sin-campanas strong { color: var(--hueso); font-weight: 600; }

/* ── Pasos ───────────────────────────────────────────────── */
.pasos-seccion {
    background: var(--humo);
    padding: clamp(1.65rem, 4.4vw, 2.75rem) 0;
}

.pasos {
    list-style: none;
    counter-reset: paso;
    margin-bottom:0.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem 2.5rem;
}

.pasos li { counter-increment: paso; }

.pasos li::before {
    content: counter(paso);
    display: block;
    font-family: Anton, Impact, sans-serif;
    font-size: 1.6rem;
    color: var(--ambar);
    line-height: 1;
    margin-bottom: 0.6rem;
}

.pasos strong { font-weight: 600; display: block; margin-bottom: 0.15rem; }
.pasos span { color: var(--ceniza); font-size: 0.9375rem }

.nota-cierre {
    padding-top: 0.5rem;
    border-top: 1px solid var(--borde);
    color: var(--ceniza);
    font-size: 0.9375rem;
    max-width: 62ch;
}

/* ── Pie ─────────────────────────────────────────────────── */
.pie { background: var(--tinta); padding: 1.1rem 0 1.375rem; border-top: 1px solid var(--borde); }
.pie-nota { margin: 0; color: var(--ceniza); font-size: var(--t-nota); }

/* ── Movimiento ──────────────────────────────────────────── */
/* La barra llena una vez al entrar: explica el avance, no decora. */
@media (prefers-reduced-motion: no-preference) {
    .regla-avance {
        width: 0;
        animation: llenar 900ms var(--salida) 200ms forwards;
    }
}

@keyframes llenar {
    to { width: var(--avance, 0%); }
}

@media (max-width: 640px) {
    .banda-fila { flex-direction: column; align-items: flex-start; }
    .acciones .boton { flex: 1 1 100%; text-align: center; }
}

/* Los accesos usan la variante --oscura compartida (public-access-links.css), igual que
   las otras siete páginas: ya vienen retintados para el fondo oscuro, con el ícono en
   ámbar para que no se pierda contra la tinta. Acá van al pie, no a la cabecera; su margen
   por defecto está pensado para el otro caso (antes de un título grande), así que se
   recorta: el padding de .pie ya separa del contenido de arriba, y abajo solo sigue
   una línea chica de texto. */
.pie .public-access-links--oscura {
    margin: 0 0 0.85rem;
}

/* ── QR: la acción más corta posible ─────────────────────── */
.qr-seccion {
    background: var(--hueso);
    color: var(--tinta);
    padding: clamp(1.375rem, 3.3vw, 2rem) 0;
}

.qr-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
}

@media (min-width: 760px) {
    .qr-fila { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 3rem; }
}

.qr-marco { margin: 0; justify-self: center; text-align: center; }

.qr-marco img,
.qr-pendiente {
    display: block;
    width: min(320px, 78vw);
    aspect-ratio: 1;
    height: auto;
    border-radius: 6px;
    background: #FFFDF7;
    box-shadow: 0 1px 0 rgba(23, 20, 15, 0.08), 0 18px 40px rgba(23, 20, 15, 0.14);
}

.qr-pendiente {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 1.5px dashed rgba(23, 20, 15, 0.25);
    color: rgba(23, 20, 15, 0.55);
    font-size: 0.9375rem;
    font-weight: 600;
}

.qr-pendiente i { font-size: 3.5rem; }

.qr-marco figcaption {
    margin-top: 0.8rem;
    font-size: var(--t-nota);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(23, 20, 15, 0.6);
}

.qr-nota {
    font-size: var(--t-nota);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brasa);
    margin-bottom: 0.4rem;
}

.qr-texto h2 {
    font-family: Anton, Impact, sans-serif;
    font-weight: 400;
    font-size: var(--t-sec);
    text-transform: uppercase;
    line-height: 1;
    margin: 0 0 1rem;
}

.qr-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.2rem;
}

.qr-datos dt {
    font-size: var(--t-nota);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(23, 20, 15, 0.55);
}

.qr-datos dd { margin: 0.15rem 0 0; font-weight: 600; }
.qr-datos code { font-family: ui-monospace, Menlo, monospace; font-size: 1rem; letter-spacing: 0.04em; }

.qr-aclaracion { font-size: 0.9375rem; color: rgba(23, 20, 15, 0.7); max-width: 60ch; }

.amigos {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(23, 20, 15, 0.14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.5rem;
}

.amigos-pregunta { font-weight: 600; max-width: 40ch; font-size: 0.9375rem;}

.qr-seccion .boton-linea { border-color: var(--tinta); color: var(--tinta); }

@media (hover: hover) and (pointer: fine) {
    .qr-seccion .boton-linea:hover { background: var(--tinta); color: var(--hueso); }
}

/* ── Acopio y contacto ───────────────────────────────────── */
.acopio-seccion { padding: clamp(1.65rem, 4.4vw, 2.75rem) 0; border-top: 1px solid var(--borde); }

.acopio-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem 4rem;
}

.acopio-fila .titulo-seccion { margin-bottom: 0.3rem; }

.acopio-lead { color: var(--ceniza); max-width: 48ch; padding-bottom: 1rem; }

.acopio-datos {
    font-style: normal;
    display: grid;
    gap: 0.1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--ambar);
}

.acopio-datos strong { font-size: var(--t-lead); font-weight: 600; }
.acopio-datos span { color: var(--ceniza); }
.acopio-datos a { color: var(--ambar); font-weight: 600; text-decoration: none; margin-top: 0.3rem; }
.acopio-datos a i { font-size: 0.75em; margin-left: 0.25rem; }

.contacto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }

.contacto-lista li { display: flex; align-items: baseline; gap: 0.8rem; }

.contacto-lista i { color: var(--ambar); width: 1.1rem; text-align: center; flex-shrink: 0; position: relative; top: 1px; }

.contacto-lista a { color: var(--hueso); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borde); }
.contacto-lista a:hover { text-decoration-color: var(--ambar); }
.contacto-lista span { color: var(--ceniza); }
.contacto-lista span a { color: var(--hueso); }