/**
 * Ávila Monserrate — sistema de diseño del tema.
 * Portado del prototipo aprobado. Claro por defecto; [data-theme="dark"] activa el modo oscuro.
 * Las @font-face viven en fonts.css (encolado aparte).
 */
/* ============ TOKENS ============ */
  :root {
    --cordillera: #123B28;
    --avila: #1B7A3D;
    --paramo: #F8F9F6;
    --tinta: #16201A;
    --piedra: #6B7169;
    --senal: #E3A008;
    --base: #FFFFFF;
    --line: rgba(18, 59, 40, 0.12);
    --shadow: 0 1px 0 rgba(18,59,40,0.05), 0 18px 40px -28px rgba(18,59,40,0.45);

    --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --wrap: 1180px;
    --gap: clamp(1rem, 0.6rem + 1.6vw, 1.6rem);
    --step--1: 0.82rem;
    --step-0: 1.06rem;
    --step-1: 1.32rem;
    --step-2: 1.72rem;
    --step-3: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
    --step-4: clamp(2.4rem, 1.7rem + 3.2vw, 4.1rem);

    /* Rampa del coroplético (Observatorio). Cuantiles, 6 clases. */
    --mig-c0: #EFF1EE; --mig-c1: #E4EEE6; --mig-c2: #C4DCCB; --mig-c3: #99C2A6;
    --mig-c4: #66A67F; --mig-c5: #3A8759; --mig-c6: #123B28;
    --mig-ida: #1B7A3D; --mig-vuelta: #E3A008; --mig-borde: rgba(18,59,40,0.22);
    --mig-p1: #1B7A3D; --mig-p2: #E3A008; --mig-p3: #B9BFB7; --mig-p4: #7D8A80; --mig-f: #2A7247; --mig-m: #9DC6A6;
  }
  :root[data-theme="dark"] {
    --cordillera: #2E8A52; --avila: #3FA35F; --paramo: #0E1511; --tinta: #E9F0E8;
    --piedra: #9AA69B; --senal: #F0B429; --base: #16201A; --line: rgba(233,240,233,0.15);
    --shadow: 0 1px 0 rgba(0,0,0,0.4), 0 20px 44px -30px rgba(0,0,0,0.8);
    --mig-c0: #1C241E; --mig-c1: #22322A; --mig-c2: #2A5039; --mig-c3: #33704A;
    --mig-c4: #43955F; --mig-c5: #5FB87E; --mig-c6: #93DAA9;
    --mig-ida: #3FA35F; --mig-vuelta: #F0B429; --mig-borde: rgba(233,240,233,0.28);
    --mig-p1: #4EAE72; --mig-p2: #F0B429; --mig-p3: #4A544C; --mig-p4: #6E7B70; --mig-f: #5FB87E; --mig-m: #2E5B41;
  }
  :root[data-theme="light"] {
    --cordillera: #123B28; --avila: #1B7A3D; --paramo: #F8F9F6; --tinta: #16201A;
    --piedra: #6B7169; --senal: #E3A008; --base: #FFFFFF; --line: rgba(18,59,40,0.12);
    --shadow: 0 1px 0 rgba(18,59,40,0.05), 0 18px 40px -28px rgba(18,59,40,0.45);
    --mig-c0: #EFF1EE; --mig-c1: #E4EEE6; --mig-c2: #C4DCCB; --mig-c3: #99C2A6;
    --mig-c4: #66A67F; --mig-c5: #3A8759; --mig-c6: #123B28;
    --mig-ida: #1B7A3D; --mig-vuelta: #E3A008; --mig-borde: rgba(18,59,40,0.22);
    --mig-p1: #1B7A3D; --mig-p2: #E3A008; --mig-p3: #B9BFB7; --mig-p4: #7D8A80; --mig-f: #2A7247; --mig-m: #9DC6A6;
  }

  /* ============ BASE ============ */
  * { box-sizing: border-box; }
  html { overflow-x: clip; }
  body {
    margin: 0; background: var(--paramo); color: var(--tinta);
    font-family: var(--serif); font-size: var(--step-0); line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 0.4rem + 2vw, 2rem); }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  .eyebrow {
    font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--avila); margin: 0;
  }
  .label {
    font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600;
  }
  h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; text-wrap: balance; margin: 0; }
  .sans { font-family: var(--sans); }

  /* ============ RIDGELINE (firma) ============ */
  .ridge { display: block; width: 100%; height: auto; }
  .ridge--divider { max-width: 240px; opacity: 0.5; margin: 0 auto; }

  /* ============ UTILITY BAR ============ */
  .util {
    font-family: var(--sans); font-size: 0.78rem; background: var(--base); color: var(--piedra);
    border-bottom: 1px solid var(--line);
  }
  .util__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 0.5rem; flex-wrap: wrap; }
  .util a { text-decoration: none; color: var(--tinta); opacity: 0.9; }
  .util a:hover { opacity: 1; color: var(--avila); }
  .util__right { display: flex; gap: 1.2rem; align-items: center; }
  .btn-theme {
    font: inherit; color: inherit; background: transparent; border: 1px solid var(--line);
    border-radius: 999px; padding: 0.15rem 0.7rem; cursor: pointer;
  }
  .btn-theme:hover { border-color: var(--avila); color: var(--avila); }

  /* ============ MASTHEAD ============ */
  .masthead { background: var(--base); border-bottom: 1px solid var(--line); }
  .masthead__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
  .brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
  .brand img { height: 5rem; width: auto; }
  .issue { text-align: right; font-family: var(--mono); font-size: var(--step--1); color: var(--piedra); line-height: 1.35; }
  .issue b { color: var(--tinta); }

  /* ============ NAV + MEGAMENU ============ */
  nav.primary { background: var(--base); border-bottom: 1px solid var(--line); position: -webkit-sticky; position: sticky; top: 0; z-index: 100; transition: box-shadow .2s ease; }
  nav.primary.is-stuck { box-shadow: 0 6px 20px -12px rgba(18,59,40,0.5); }
  .nav__row { display: flex; align-items: stretch; gap: 0.2rem; }
  .nav__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.1rem; flex-wrap: wrap; }
  .nav__item { position: relative; }
  .nav__link {
    font-family: var(--sans); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em;
    text-decoration: none; color: var(--tinta); padding: 0.95rem 0.95rem; display: inline-flex;
    align-items: center; gap: 0.35rem; border-bottom: 2px solid transparent;
  }
  .nav__link:hover, .nav__item:focus-within .nav__link { color: var(--avila); border-bottom-color: var(--avila); }
  .nav__link .caret { font-size: 0.6rem; opacity: 0.6; }

  .mega {
    position: absolute; top: 100%; left: 0; min-width: 640px; background: var(--base);
    border: 1px solid var(--line); border-top: 3px solid var(--senal); box-shadow: var(--shadow);
    padding: 1.4rem; display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1.4rem;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
  .mega h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--piedra); margin: 0 0 0.7rem; }
  .mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
  .mega a { font-family: var(--sans); font-size: 0.92rem; text-decoration: none; color: var(--tinta); }
  .mega a:hover { color: var(--avila); }
  .mega__feature { background: var(--paramo); border-radius: 4px; overflow: hidden; }
  .mega__feature img { aspect-ratio: 16/10; object-fit: cover; }
  .mega__feature .pad { padding: 0.7rem 0.8rem; }
  .mega__feature .t { font-family: var(--serif); font-size: 1rem; line-height: 1.2; }

  .nav__spacer { margin-left: auto; }
  .nav__cta {
    align-self: center; font-family: var(--sans); font-weight: 700; font-size: 0.85rem;
    background: var(--senal); color: #2A1D00; text-decoration: none; padding: 0.5rem 1rem; border-radius: 3px;
    margin-left: 0.6rem;
  }
  .nav__cta:hover { filter: brightness(1.05); }
  .burger { display: none; }

  /* ============ HERO ============ */
  .hero { background: var(--base); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
  .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 1rem + 3vw, 3.6rem); }
  .hero__kicker { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
  .hero__kicker .chip { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--avila); color: #fff; padding: 0.2rem 0.55rem; border-radius: 2px; }
  .hero h1 { font-size: clamp(2.1rem, 1.6rem + 2.6vw, 3.5rem); letter-spacing: -0.01em; margin-bottom: 0.9rem; }
  .hero__stand { font-size: var(--step-1); color: var(--piedra); max-width: 34ch; margin-bottom: 1.6rem; line-height: 1.4; }
  .hero__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }
  .btn {
    font-family: var(--sans); font-weight: 700; font-size: 0.92rem; text-decoration: none;
    padding: 0.72rem 1.25rem; border-radius: 3px; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; border: 0;
  }
  .btn--primary { background: var(--cordillera); color: #fff; }
  :root[data-theme="dark"] .btn--primary, .btn--primary { }
  :root[data-theme="dark"] .btn--primary { color: #06120B; }
  :root[data-theme="light"] .btn--primary { color: #fff; }
  .btn--primary:hover { filter: brightness(1.08); }
  .btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--tinta); }
  .btn--ghost:hover { border-color: var(--avila); color: var(--avila); }

  .hero__cover { position: relative; max-width: 430px; margin-left: auto; }
  .hero__cover .frame { border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--paramo); border-radius: 4px; overflow: hidden; }
  .hero__cover img { width: 100%; }
  .hero__cover .tag { position: absolute; top: -12px; left: -12px; font-family: var(--mono); font-size: 0.72rem; background: var(--senal); color: #2A1D00; padding: 0.3rem 0.6rem; border-radius: 2px; transform: rotate(-2deg); }
  /* La cordillera del hero. Va más ancha que el contenedor y desplazada a la
     izquierda para que main.js pueda moverla de lado al hacer scroll sin que
     asome ningún borde; .hero ya recorta con overflow:hidden. */
  .hero__horizon {
    position: absolute; left: -6%; right: -6%; bottom: -1px; width: 112%;
    /* Alto explícito, y esto NO es opcional: .ridge trae height:auto, así que
       sin esta línea el alto lo decide el ancho (viewBox 1200x120 ⇒ ancho/10) y
       en una pantalla de 1440px la cordillera medía 161px, no los 70 del
       atributo del SVG. De ahí que se comiera la portada. */
    height: clamp(48px, 5.5vw, 78px);
    z-index: 0; pointer-events: none; will-change: transform;
  }
  /* Opacidades bajas: la cordillera es fondo, no ilustración.

     OJO con animarlas: una animación con fill-mode `both` o `forwards` pesa MÁS
     que una declaración normal, así que el `opacity: 1` con el que termina
     avila-sube pisaba estos valores y las siluetas acababan a plena intensidad
     (--cordillera es #123B28, casi negro). Por eso la opacidad de destino vive
     en --op y el keyframe termina en var(--op): un único sitio donde tocarla,
     y el valor sobrevive tanto a la animación como a prefers-reduced-motion. */
  .hero__ridge-a { --op: 0.13; }
  .hero__ridge-b { --op: 0.2; }
  .hero__ridge-a, .hero__ridge-b {
    opacity: var(--op);
    animation: avila-emerge .9s cubic-bezier(.22,.9,.3,1) both;
  }
  .hero__ridge-b { animation-delay: .12s; }
  @keyframes avila-emerge {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: var(--op); transform: none; }
  }
  .hero__ridge-linea { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.42; }
  .hero__ridge-linea { animation: avila-traza 2s ease-out .5s forwards; }

  /* El chip del hero respira, igual que el de la página de donaciones. */
  .hero__kicker .chip { position: relative; }
  .hero__kicker .chip::after {
    content: ''; position: absolute; top: -3px; right: -3px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--senal);
    animation: don-punto 2.4s ease-in-out infinite;
  }
  .hero__cover .frame { transition: transform .3s ease, box-shadow .3s ease; }
  .hero__cover:hover .frame { transform: translateY(-4px); box-shadow: 0 24px 46px -26px rgba(18,59,40,.65); }

  /* ============ SECTION SCAFFOLD ============ */
  section { padding-block: clamp(2.2rem, 1.4rem + 2vw, 3.4rem); }
  .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; border-bottom: 2px solid var(--tinta); padding-bottom: 0.5rem; }
  .sec-head h2 { font-size: var(--step-2); }
  .sec-head a { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; text-decoration: none; color: var(--avila); white-space: nowrap; }
  .sec-head a:hover { text-decoration: underline; }

  /* ============ NEWS GRID ============ */
  .news { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
  .news--feat { grid-template-columns: 1.6fr 1fr 1fr; }
  .card { display: flex; flex-direction: column; gap: 0.55rem; text-decoration: none; color: inherit; }
  .card__media { aspect-ratio: 16/10; background: linear-gradient(135deg, color-mix(in srgb, var(--cordillera) 10%, var(--base)), color-mix(in srgb, var(--avila) 6%, var(--base))); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; position: relative; }
  .card--lead .card__media { aspect-ratio: 16/11; }
  .card__cat { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--avila); }
  .card__title { font-family: var(--serif); font-size: var(--step-1); line-height: 1.14; }
  .card--lead .card__title { font-size: var(--step-3); }
  .card__meta { font-family: var(--mono); font-size: 0.72rem; color: var(--piedra); }
  .card__dek { color: var(--piedra); font-size: 0.98rem; }
  .card:hover .card__title { color: var(--avila); }
  .divider-strip { height: 1px; background: var(--line); margin-block: 0; }

  /* ============ INFORMES (documentos) ============ */
  .docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
  .doc {
    display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start;
    background: var(--base); border: 1px solid var(--line); border-radius: 4px; padding: 1.1rem; text-decoration: none; color: inherit;
    transition: border-color .15s ease, transform .15s ease;
  }
  .doc:hover { border-color: var(--avila); transform: translateY(-2px); }
  .doc__icon { width: 40px; height: 50px; border-radius: 2px; background: var(--paramo); border: 1px solid var(--line); position: relative; }
  .doc__icon::after { content: "PDF"; position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-family: var(--sans); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em; color: var(--senal); }
  .doc__t { font-family: var(--serif); font-size: 1.08rem; line-height: 1.2; margin-bottom: 0.3rem; }
  .doc__m { font-family: var(--mono); font-size: 0.7rem; color: var(--piedra); }

  /* ============ OPINION + HISTORIAS ============ */
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3rem); }
  .op { display: grid; gap: 1.1rem; }
  .op__item { display: grid; grid-template-columns: 44px 1fr; gap: 0.9rem; align-items: start; text-decoration: none; color: inherit; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
  .op__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--avila), var(--cordillera)); }
  .op__t { font-family: var(--serif); font-size: 1.12rem; line-height: 1.18; font-style: italic; }
  .op__who { font-family: var(--sans); font-size: 0.76rem; color: var(--piedra); margin-top: 0.3rem; }
  .story { position: relative; border-radius: 4px; overflow: hidden; background: var(--base); border: 1px solid var(--line); border-left: 3px solid var(--senal); color: var(--tinta); min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; }
  .story__q { font-family: var(--serif); font-size: var(--step-2); font-style: italic; line-height: 1.2; text-wrap: balance; }
  .story__by { font-family: var(--mono); font-size: 0.74rem; margin-top: 0.8rem; color: var(--piedra); }
  .story__mark { position: absolute; top: 0.4rem; left: 1.2rem; font-family: var(--serif); font-size: 5rem; color: var(--avila); opacity: 0.22; }

  /* ============ ALIADOS ============ */
  /* Tarjeta compartida por el carrusel de portada y la página /aliados/. */
  .aliados-sec { background: var(--base); border-block: 1px solid var(--line); }
  .aliado-card { display: flex; flex-direction: column; gap: 0.6rem; }
  .aliado-card__logo { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 1.1rem; background: var(--paramo); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
  a.aliado-card__logo:hover { border-color: var(--avila); transform: translateY(-2px); }
  .aliado-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .aliado-card__placeholder { font-family: var(--sans); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--piedra); opacity: 0.55; }
  .aliado-card__t { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; line-height: 1.25; margin: 0; }
  .aliado-card__d { font-family: var(--sans); font-size: 0.86rem; line-height: 1.5; color: var(--piedra); margin: 0; }
  .aliado-card__link { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; color: var(--avila); text-decoration: none; margin-top: auto; padding-top: 0.2rem; }
  .aliado-card__link:hover { text-decoration: underline; }

  /* Rejilla de la página /aliados/ */
  .aliados-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 0.8rem + 1.6vw, 2.2rem); }
  @media (max-width: 1000px) { .aliados-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 760px) { .aliados-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 460px) { .aliados-grid { grid-template-columns: 1fr; } }

  /* ---- Carrusel (scroll-snap; sin librerías) ---- */
  .carrusel { position: relative; }
  .carrusel__pista {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--gap)) / 4);
    gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; scrollbar-width: none; padding-block: 0.3rem;
  }
  .carrusel__pista::-webkit-scrollbar { display: none; }
  .carrusel__pista > * { scroll-snap-align: start; }
  .carrusel__pista:focus-visible { outline: 2px solid var(--avila); outline-offset: 4px; border-radius: 4px; }
  .carrusel__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 999px; background: var(--base);
    color: var(--tinta); font-size: 1.4rem; line-height: 1; cursor: pointer;
    box-shadow: var(--shadow); transition: opacity .2s ease, border-color .2s ease;
  }
  .carrusel__nav:hover { border-color: var(--avila); color: var(--avila); }
  .carrusel__nav--prev { left: -18px; }
  .carrusel__nav--next { right: -18px; }
  .carrusel__nav[hidden] { opacity: 0; pointer-events: none; }
  @media (max-width: 1240px) { .carrusel__nav--prev { left: 4px; } .carrusel__nav--next { right: 4px; } }
  @media (max-width: 1000px) { .carrusel__pista { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); } }
  @media (max-width: 760px) { .carrusel__pista { grid-auto-columns: calc((100% - var(--gap)) / 2); } }
  @media (max-width: 460px) { .carrusel__pista { grid-auto-columns: 78%; } .carrusel__nav { display: none; } }

  /* ============ AGENDA ============ */
  .agenda { display: grid; gap: 0; }
  .ev { display: grid; grid-template-columns: 92px 1fr auto; gap: 1.2rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
  .ev__date { text-align: center; border-right: 2px solid var(--senal); padding-right: 0.8rem; }
  .ev__day { font-family: var(--serif); font-size: 1.9rem; line-height: 1; }
  .ev__mon { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--piedra); }
  .ev__t { font-family: var(--serif); font-size: 1.15rem; }
  .ev__meta { font-family: var(--sans); font-size: 0.8rem; color: var(--piedra); }
  .ev__type { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--avila); }

  /* ============ SUBSCRIBE ============ */
  .subscribe { background: var(--cordillera); color: #EAF3EC; border-radius: 6px; padding: clamp(1.8rem, 1rem + 3vw, 3rem); position: relative; overflow: hidden; }
  .subscribe h2 { font-size: var(--step-3); color: #fff; max-width: 20ch; }
  .subscribe p { color: rgba(234,243,236,0.82); max-width: 44ch; }
  /* Nombre + correo + botón. Los campos ocultos (action, nonce) no ocupan
     celda porque el navegador les aplica display:none, y la trampa antispam
     va fuera de flujo. */
  .subform { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.6rem; margin-top: 1.4rem; max-width: 640px; }
  .subform input { min-width: 0; font: inherit; font-family: var(--sans); padding: 0.8rem 1rem; border-radius: 3px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; }
  .subform input:focus-visible { outline: 2px solid var(--senal); outline-offset: 1px; }
  .subform input::placeholder { color: rgba(234,243,236,0.6); }
  .subform button { background: var(--senal); color: #2A1D00; justify-content: center; white-space: nowrap; }
  @media (max-width: 760px) { .subform { grid-template-columns: 1fr; } }
  .subform__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .subform__nota { font-family: var(--sans); font-size: 0.72rem; color: rgba(234,243,236,0.6); margin-top: 0.6rem; max-width: 44ch; }
  .subform__aviso { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; margin-top: 0.9rem; padding: 0.6rem 0.9rem; border-radius: 3px; max-width: 480px; }
  .subform__aviso.is-ok { background: rgba(255,255,255,0.14); color: #fff; border-left: 3px solid var(--senal); }
  .subform__aviso.is-err { background: rgba(255,255,255,0.08); color: rgba(234,243,236,0.92); border-left: 3px solid #E86A5B; }
  .subform.is-sending button { opacity: 0.6; pointer-events: none; }
  /* La banda de suscripción es objetivo de anclas (#suscribir) desde el menú y
     la barra superior: dejamos aire para que la nav fija no la tape. */
  #suscribir { scroll-margin-top: 90px; }
  .subscribe__ridge { position: absolute; right: -40px; bottom: -30px; width: 420px; opacity: 0.16; pointer-events: none; }

  /* ============ FOOTER ============ */
  footer.site { background: var(--base); border-top: 1px solid var(--line); margin-top: 1rem; }
  .foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-block: 2.6rem; }
  .foot h5 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--piedra); margin: 0 0 0.9rem; }
  .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
  .foot a { font-family: var(--sans); font-size: 0.9rem; text-decoration: none; color: var(--tinta); }
  .foot a:hover { color: var(--avila); }
  .foot__mission { font-size: 0.98rem; color: var(--piedra); max-width: 34ch; }
  .foot__brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
  .foot__addr { font-family: var(--mono); font-size: 0.74rem; color: var(--piedra); margin-top: 1rem; line-height: 1.6; }
  .foot__legal { border-top: 1px solid var(--line); padding-block: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--sans); font-size: 0.78rem; color: var(--piedra); }

  /* ============ REVEAL ============ */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* Entrada compartida por todo el tema (portada, donaciones, boletines). */
  @keyframes avila-sube {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes avila-traza { to { stroke-dashoffset: 0; } }

  /* Cuando una sección asoma, sus piezas entran escalonadas en vez de aparecer
     todas de golpe. Vale para cualquier rejilla del tema, no solo la portada. */
  .reveal.in .news > *,
  .reveal.in .docs > *,
  .reveal.in .op__item,
  .reveal.in .agenda > *,
  .reveal.in .bol-grid > .bol-card { animation: avila-sube .55s cubic-bezier(.22,.9,.3,1) both; }
  .reveal.in :where(.news, .docs, .op, .agenda, .bol-grid) > *:nth-child(2) { animation-delay: .08s; }
  .reveal.in :where(.news, .docs, .op, .agenda, .bol-grid) > *:nth-child(3) { animation-delay: .16s; }
  .reveal.in :where(.news, .docs, .op, .agenda, .bol-grid) > *:nth-child(4) { animation-delay: .24s; }
  .reveal.in :where(.news, .docs, .op, .agenda, .bol-grid) > *:nth-child(n+5) { animation-delay: .3s; }

  /* Filete dorado que recorre el titular de sección al entrar. */
  .sec-head { position: relative; }
  .sec-head::after {
    content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
    background: var(--senal); transition: width .7s cubic-bezier(.22,.9,.3,1) .15s;
  }
  .reveal.in .sec-head::after { width: 3.5rem; }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__cover { order: -1; max-width: 420px; margin-inline: auto; }
    .news, .news--feat, .docs { grid-template-columns: 1fr 1fr; }
    .two { grid-template-columns: 1fr; }
    .foot__grid { grid-template-columns: 1fr 1fr; }
    .mega { grid-template-columns: 1fr 1fr; min-width: min(92vw, 520px); }
  }
  @media (max-width: 620px) {
    .news, .news--feat, .docs { grid-template-columns: 1fr; }
    .foot__grid { grid-template-columns: 1fr; }
    .issue { display: none; }
    .nav__list { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--base); border-bottom: 1px solid var(--line); padding: 0.5rem 0; }
    .nav__list.open { display: flex; }
    .nav__item { width: 100%; }
    .mega { position: static; min-width: 0; grid-template-columns: 1fr; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-top: 1px solid var(--line); display: none; }
    .nav__item.open .mega { display: grid; }
    .burger { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-weight: 700; font-size: 0.85rem; background: transparent; border: 1px solid var(--line); border-radius: 3px; padding: 0.5rem 0.8rem; margin: 0.5rem 0; cursor: pointer; color: inherit; }
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; opacity: 1; transform: none; }
    .reveal.in .news > *, .reveal.in .docs > *, .reveal.in .op__item,
    .reveal.in .agenda > *, .reveal.in .bol-grid > .bol-card,
    .hero__ridge-a, .hero__ridge-b, .hero__ridge-linea,
    .hero__kicker .chip::after,
    .type-avila_boletin .article__cat, .type-avila_boletin .article__title,
    .type-avila_boletin .article__stand, .type-avila_boletin .article__meta,
    .type-avila_boletin .article__meta::before, .bol-portada { animation: none; }
    .type-avila_boletin .article__meta::before { width: 4.5rem; }
    .hero__ridge-linea { stroke-dashoffset: 0; }
    .sec-head::after { transition: none; width: 3.5rem; }
    .hero__cover:hover .frame { transform: none; }
    * { scroll-behavior: auto !important; }
  }

  /* ============ ARTÍCULO (single) ============ */
  .article { background: var(--base); border-bottom: 1px solid var(--line); }
  .article__head { padding-block: clamp(2rem,1.2rem + 3vw,3.4rem) 1.6rem; max-width: 760px; margin-inline: auto; }
  .article__cat { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--avila); }
  /* Solo el titular se sale de la medida de la cabecera (unos 120px por lado)
     para que los nombres largos de boletín caigan en menos líneas. El margen
     negativo se va cerrando solo hasta 0 en pantallas de menos de 1000px, así
     que no hay salto ni desbordes. La entradilla, la firma, la portada y el
     cuerpo conservan su medida de lectura. */
  .article__title { font-size: var(--step-4); letter-spacing: -0.01em; margin-block: 0.6rem 0.9rem; margin-inline: clamp(-120px, (1000px - 100vw) / 2, 0px); }
  .article__stand { font-family: var(--serif); font-size: var(--step-1); color: var(--piedra); line-height: 1.4; }
  .article__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; align-items: center; font-family: var(--mono); font-size: 0.76rem; color: var(--piedra); margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
  .article__meta b { color: var(--tinta); font-weight: 700; }
  /* La portada acompaña al texto: se alinea con la medida de lectura del
     titular (760px) y se limita en alto, para que no domine el artículo. */
  .article__cover { max-width: 760px; margin: 0 auto; padding-inline: clamp(1rem,0.4rem + 2vw,2rem); }
  .article__cover img { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 4px; margin-top: 0.4rem; display: block; }
  .article__cover figcaption { font-family: var(--sans); font-size: 0.78rem; color: var(--piedra); margin-top: 0.5rem; }
  @media (max-width: 620px) { .article__cover img { max-height: 260px; } }

  .prose { max-width: 680px; margin: clamp(1.6rem,1rem + 2vw,2.6rem) auto 0; font-size: 1.14rem; line-height: 1.72; }
  .prose > * + * { margin-top: 1.15em; }
  .prose :where(h2) { font-size: var(--step-2); margin-top: 2em; }
  .prose :where(h3) { font-size: var(--step-1); margin-top: 1.6em; }
  .prose :where(a) { color: var(--avila); text-underline-offset: 3px; }
  .prose :where(img, figure) { border-radius: 4px; }
  .prose :where(figcaption) { font-family: var(--sans); font-size: 0.8rem; color: var(--piedra); text-align: center; margin-top: 0.5rem; }
  .prose :where(blockquote) { margin: 1.6em 0; padding: 0.4em 0 0.4em 1.3em; border-left: 3px solid var(--senal); font-style: italic; font-size: 1.28rem; color: var(--tinta); }
  .prose :where(ul, ol) { padding-left: 1.3em; }
  .prose :where(li + li) { margin-top: 0.4em; }
  .prose :where(code) { font-family: var(--mono); font-size: 0.9em; background: var(--paramo); padding: 0.1em 0.35em; border-radius: 3px; }
  .prose :where(hr) { border: 0; height: 1px; background: var(--line); margin: 2em 0; }

  .article__foot { max-width: 680px; margin: 2rem auto 0; padding-block: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; }
  .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .tags a { font-family: var(--sans); font-size: 0.76rem; text-decoration: none; color: var(--piedra); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.7rem; }
  .tags a:hover { border-color: var(--avila); color: var(--avila); }
  .share { display: flex; gap: 0.6rem; font-family: var(--sans); font-size: 0.82rem; align-items: center; }
  .share a { text-decoration: none; color: var(--avila); }

  /* ============ LISTADOS (archive / index / search) ============ */
  .page-hero { background: var(--base); border-bottom: 1px solid var(--line); padding-block: clamp(1.8rem,1.2rem + 2vw,2.8rem); }
  .page-hero .eyebrow { margin-bottom: 0.5rem; }
  .page-hero h1 { font-size: var(--step-3); }
  .page-hero p { color: var(--piedra); max-width: 60ch; margin-top: 0.6rem; }
  .list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap) clamp(1rem,0.6rem + 1.5vw,2rem); }
  .pagination { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 2.4rem; font-family: var(--sans); }
  .pagination .page-numbers { display: inline-flex; min-width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 3px; text-decoration: none; color: var(--tinta); font-size: 0.9rem; }
  .pagination .page-numbers.current { background: var(--cordillera); color: #fff; border-color: var(--cordillera); }
  .pagination .page-numbers:hover:not(.current) { border-color: var(--avila); color: var(--avila); }
  .empty { padding-block: 3rem; text-align: center; color: var(--piedra); }
  .empty h2 { font-size: var(--step-2); color: var(--tinta); margin-bottom: 0.6rem; }
  @media (max-width: 900px) { .list-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) { .list-grid { grid-template-columns: 1fr; } }

  /* ============ QUIÉNES SOMOS (page-nosotros) ============ */
  .about-intro { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem,1rem + 3vw,3.5rem); align-items: start; }
  .about-intro .prose { margin-top: 0; max-width: none; font-size: 1.12rem; }
  .facts { background: var(--base); border: 1px solid var(--line); border-top: 3px solid var(--senal); border-radius: 4px; padding: 1.4rem 1.5rem; display: grid; gap: 1.1rem; position: sticky; top: 84px; }
  .fact { display: grid; gap: 0.15rem; }
  .fact__k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--piedra); }
  .fact__v { font-family: var(--serif); font-size: 1.1rem; color: var(--tinta); line-height: 1.25; }
  .values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
  .value { background: var(--base); border: 1px solid var(--line); border-radius: 4px; padding: 1.5rem; display: grid; gap: 0.6rem; align-content: start; }
  .value__mark { width: 40px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--cordillera), var(--avila)); }
  .value__t { font-family: var(--serif); font-size: var(--step-1); }
  .value__d { color: var(--piedra); font-size: 0.98rem; line-height: 1.5; }
  .bridge { position: relative; background: var(--base); border: 1px solid var(--line); border-radius: 6px; padding: clamp(1.8rem,1rem + 3vw,3.2rem); overflow: hidden; text-align: center; }
  .bridge h2 { font-size: var(--step-3); max-width: 22ch; margin-inline: auto; }
  .bridge p { color: var(--piedra); max-width: 58ch; margin: 0.9rem auto 0; font-size: 1.06rem; line-height: 1.55; }
  .bridge__peaks { display: flex; justify-content: space-between; gap: 1rem; max-width: 620px; margin: 1.6rem auto 0.4rem; font-family: var(--mono); font-size: 0.8rem; color: var(--avila); }
  .bridge__ridge { max-width: 720px; margin: 0 auto; opacity: 0.85; }
  @media (max-width: 900px) { .about-intro { grid-template-columns: 1fr; } .facts { position: static; } .values { grid-template-columns: 1fr; } }

  /* ============ SUBMENÚ desplegable (ítems con hijos) ============ */
  .nav__item .submenu {
    position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--base);
    border: 1px solid var(--line); border-top: 3px solid var(--senal); box-shadow: var(--shadow);
    padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 101;
  }
  .nav__item:hover .submenu, .nav__item:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .submenu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
  .submenu a { display: block; font-family: var(--sans); font-size: 0.9rem; text-decoration: none; color: var(--tinta); padding: 0.5rem 0.7rem; border-radius: 3px; }
  .submenu a:hover { background: var(--paramo); color: var(--avila); }
  @media (max-width: 620px) {
    .nav__item .submenu { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-top: 1px solid var(--line); display: none; }
    .nav__item.open .submenu { display: block; }
  }

  /* ============ BOLETINES (category-boletin) ============ */
  .bol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 0.8rem + 2vw, 2.4rem); }
  .bol-card { display: flex; flex-direction: column; gap: 0.6rem; }
  .bol-card__cover { display: block; aspect-ratio: 3 / 4; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--paramo); box-shadow: var(--shadow); }
  .bol-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
  .bol-card__cover:hover img { transform: scale(1.03); }
  .bol-card__num { font-family: var(--mono); font-size: 0.72rem; color: var(--avila); text-transform: uppercase; letter-spacing: 0.05em; }
  .bol-card__title { font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; font-weight: 600; }
  .bol-card__title a { text-decoration: none; }
  .bol-card__title a:hover { color: var(--avila); }
  .bol-card__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 0.4rem; }
  .bol-download { font-family: var(--sans); font-weight: 700; font-size: 0.82rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--cordillera); color: #fff; padding: 0.5rem 0.9rem; border-radius: 3px; }
  :root[data-theme="dark"] .bol-download { color: #06120B; }
  .bol-download:hover { filter: brightness(1.1); }
  .bol-read { font-family: var(--sans); font-weight: 600; font-size: 0.82rem; text-decoration: none; color: var(--avila); }
  @media (max-width: 900px) { .bol-grid { grid-template-columns: 1fr 1fr; } }


  /* ============ DONACIONES (page-donaciones) ============ */
  /* Blanco dominante y verde de acento, como el resto del sitio. La novedad
     aquí es el dorado (--senal): en el tema es el color de "esto es lo que
     tienes que pulsar" —lo lleva el botón de suscripción— así que los botones
     de donar son dorados, no verdes. El verde queda de fondo, en la cordillera.

     Todo lo que se mueve vive detrás de prefers-reduced-motion (al final de la
     sección): sin él la página se ve igual, solo que quieta. Las entradas al
     hacer scroll se enganchan al .reveal → .in que ya monta assets/js/main.js;
     no hace falta JavaScript nuevo. */

  /* avila-sube y avila-traza viven en la sección REVEAL: son de todo el tema. */
  /* Dos latidos distintos: el del botón conserva su sombra de relieve, el del
     punto de la cabecera no tiene ninguna que conservar. */
  @keyframes don-latido {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px -12px rgba(227,160,8,.9), 0 0 0 0 rgba(227,160,8,.55); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px -12px rgba(227,160,8,.9), 0 0 0 12px rgba(227,160,8,0); }
  }
  @keyframes don-punto {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--senal) 65%, transparent); }
    70%      { box-shadow: 0 0 0 7px transparent; }
  }

  /* ---- Botón de donar: dorado, con relieve ---- */
  .btn--donar {
    background: var(--senal); color: #2A1D00;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px -12px rgba(227,160,8,.9);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    position: relative; overflow: hidden;
  }
  /* Destello que cruza el botón al pasar el cursor. */
  .btn--donar::after {
    content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg); pointer-events: none;
  }
  .btn--donar:hover {
    filter: brightness(1.05); transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 26px -12px rgba(227,160,8,1);
  }
  .btn--donar:hover::after { animation: don-brillo .75s ease; }
  @keyframes don-brillo { from { left: -60%; } to { left: 115%; } }
  .btn--donar:active { transform: translateY(0); }
  .btn--donar:focus-visible { outline: 2px solid var(--cordillera); outline-offset: 2px; }

  /* ---- Cabecera ---- */
  .don-hero { position: relative; overflow: hidden; padding-bottom: clamp(3.4rem, 2rem + 6vw, 6rem); }
  .don-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--senal) 9%, transparent), transparent 60%);
  }
  .don-hero__wrap { position: relative; z-index: 2; }
  .don-hero .don-hero__eyebrow { color: var(--avila); display: inline-flex; align-items: center; gap: 0.5rem; }
  /* Punto que respira: dice "esto está vivo" sin gritar. */
  .don-hero__eyebrow::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--senal);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--senal) 70%, transparent);
    animation: don-punto 2.4s ease-in-out infinite;
  }
  .don-hero .don-hero__titulo { font-size: var(--step-4); letter-spacing: -0.01em; }
  .don-hero .don-hero__dek { font-size: var(--step-1); line-height: 1.45; max-width: 42ch; margin-top: 0.8rem; }

  .don-hero__vias { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.7rem; }
  .don-hero__via {
    display: grid; gap: 0.15rem; min-width: 15rem; text-decoration: none; color: inherit;
    background: var(--base); border: 1px solid var(--line); border-left: 3px solid var(--avila);
    border-radius: 5px; padding: 0.85rem 2.6rem 0.9rem 1.1rem; position: relative;
    box-shadow: var(--shadow);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .don-hero__via:nth-child(2) { border-left-color: var(--senal); }
  .don-hero__via-lema { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--piedra); }
  .don-hero__via-nombre { font-family: var(--serif); font-weight: 600; font-size: var(--step-1); line-height: 1.15; }
  .don-hero__via-flecha {
    position: absolute; right: 1rem; top: 50%; translate: 0 -50%;
    font-family: var(--sans); color: var(--avila); transition: translate .18s ease;
  }
  .don-hero__via:hover { transform: translateY(-3px); border-color: var(--avila); box-shadow: 0 16px 32px -20px rgba(18,59,40,.65); }
  .don-hero__via:hover .don-hero__via-flecha { translate: 4px -50%; }
  .don-hero__via:focus-visible { outline: 2px solid var(--avila); outline-offset: 3px; }

  .don-hero__ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 96px; z-index: 1; pointer-events: none; }
  .don-hero__ridge-a { opacity: 0.16; }
  .don-hero__ridge-b { opacity: 0.26; }
  /* La línea de cumbres se dibuja sola al cargar. pathLength="1" en el SVG
     normaliza el largo de la ruta, así que el dash va de 1 a 0 sin medir nada. */
  .don-hero__ridge-linea { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.75; }

  /* Entrada escalonada de la cabecera. */
  .don-hero__eyebrow, .don-hero__titulo, .don-hero .don-hero__dek, .don-hero__vias, .don-hero__ridge { animation: avila-sube .75s cubic-bezier(.22,.9,.3,1) both; }
  .don-hero .don-hero__titulo { animation-delay: .07s; }
  .don-hero .don-hero__dek { animation-delay: .14s; }
  .don-hero__vias { animation-delay: .21s; }
  .don-hero__ridge { animation-delay: .18s; animation-duration: 1s; }
  .don-hero__ridge-linea { animation: avila-traza 1.6s ease-out .6s forwards; }

  /* ---- Apertura ---- */
  .don-intro { background: var(--base); border-bottom: 1px solid var(--line); }
  .don-intro__titulo { font-size: var(--step-3); max-width: 18ch; position: relative; padding-bottom: 0.7rem; }
  /* Filete dorado que crece cuando la sección entra en pantalla. */
  .don-intro__titulo::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
    background: var(--senal); border-radius: 2px; transition: width .8s cubic-bezier(.22,.9,.3,1) .2s;
  }
  .don-intro.in .don-intro__titulo::after { width: 4.5rem; }
  .don-intro__texto { max-width: 680px; margin-top: 1rem; font-size: 1.14rem; line-height: 1.72; }
  .don-intro__texto p { margin: 0; }
  .don-intro__texto p + p { margin-top: 1.05em; }
  .don-intro__texto p:first-child { font-size: 1.24rem; color: var(--tinta); }
  .don-intro .prose { margin-top: 1.6rem; }

  /* ---- Transparencia: caja sobre papel, no banda a sangre ---- */
  .don-transp__caja {
    position: relative; overflow: hidden;
    background: var(--base); border: 1px solid var(--line); border-top: 3px solid var(--senal);
    border-radius: 6px; padding: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  }
  .don-transp__titulo { font-size: var(--step-2); }
  .don-transp__dek { color: var(--piedra); max-width: 56ch; margin-top: 0.6rem; }
  .don-transp__lista {
    list-style: none; margin: 1.6rem 0 0; padding: 0; position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
  }
  .don-transp__item { border-top: 2px solid var(--cordillera); padding-top: 0.8rem; }
  .don-transp.in .don-transp__item { animation: avila-sube .6s cubic-bezier(.22,.9,.3,1) both; }
  .don-transp.in .don-transp__item:nth-child(2) { animation-delay: .1s; }
  .don-transp.in .don-transp__item:nth-child(3) { animation-delay: .2s; }
  .don-transp.in .don-transp__item:nth-child(n+4) { animation-delay: .3s; }
  .don-transp__cifra { font-family: var(--serif); font-weight: 600; font-size: var(--step-3); line-height: 1; color: var(--cordillera); margin: 0; }
  .don-transp__concepto { font-family: var(--sans); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em; margin: 0.45rem 0 0; }
  .don-transp__texto { font-size: 0.96rem; color: var(--piedra); margin: 0.35rem 0 0; }
  .don-transp__ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; opacity: 0.07; pointer-events: none; }

  /* ---- Las dos vías ---- */
  .don-via__lema { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--piedra); white-space: nowrap; }
  .don-via__texto { max-width: 62ch; color: var(--piedra); font-size: 1.06rem; margin: 0 0 1.5rem; }
  .don-via--mes { background: var(--base); border-block: 1px solid var(--line); }
  #aporte-unico, #aporte-mensual { scroll-margin-top: 90px; }

  .don-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: var(--gap); align-items: stretch; }

  .don-card {
    position: relative; display: flex; flex-direction: column; gap: 0.35rem;
    background: var(--base); border: 1px solid var(--line); border-radius: 5px;
    padding: 1.4rem 1.3rem 1.3rem;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .don-via--mes .don-card { background: var(--paramo); }
  /* Filete dorado que aparece arriba al pasar el cursor. */
  .don-card::before {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 3px;
    background: var(--senal); border-radius: 5px 5px 0 0;
    transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.22,.9,.3,1);
  }
  .don-card:hover::before { transform: scaleX(1); }
  .don-card:hover { border-color: var(--avila); transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(18,59,40,.6); }
  .don-card--destacada { border-color: var(--avila); }
  .don-card--destacada::before { transform: scaleX(1); }
  .don-card__sello {
    position: absolute; top: -0.7rem; left: 1.2rem;
    font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--senal); color: #2A1D00; padding: 0.2rem 0.55rem; border-radius: 2px;
  }
  /* Entrada escalonada de las tarjetas cuando su sección asoma. */
  .don-via.in .don-card { animation: avila-sube .6s cubic-bezier(.22,.9,.3,1) both; }
  .don-via.in .don-card:nth-child(2) { animation-delay: .09s; }
  .don-via.in .don-card:nth-child(3) { animation-delay: .18s; }
  .don-via.in .don-card:nth-child(n+4) { animation-delay: .27s; }
  /* La tarjeta destacada pega un latido, UNA vez, al entrar. */
  .don-via.in .don-card--destacada .btn--donar { animation: don-latido 1.5s ease-out .8s 2; }

  .don-card__nombre { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--avila); margin: 0 0 0.2rem; }
  .don-card__cop { font-family: var(--serif); font-weight: 600; font-size: var(--step-2); line-height: 1.1; margin: 0; }
  /* La divisa, en cuerpo pequeño: acompaña a la cifra sin competir con ella. */
  .don-card__moneda { font-family: var(--sans); font-size: 0.5em; font-weight: 700; letter-spacing: 0.07em; color: var(--piedra); margin-left: 0.15em; }
  .don-card__periodo { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--piedra); letter-spacing: 0.01em; }
  .don-card__usd { font-family: var(--mono); font-size: 0.76rem; color: var(--piedra); margin: 0.15rem 0 0; }
  .don-card__texto { font-size: 0.96rem; line-height: 1.5; color: var(--piedra); margin: 0.7rem 0 0; }
  .don-card__btn { margin-top: auto; justify-content: center; }
  /* margin-top:auto empuja el botón al fondo, pero solo reparte el hueco que
     sobra: en la tarjeta más alta no sobra nada y el botón quedaría pegado al
     texto. El aire mínimo se pone en el elemento de arriba. */
  .don-card > :has(+ .don-card__btn) { margin-bottom: 0.9rem; }
  /* Sin enlace de pago no ponemos un botón muerto: se anuncia y punto. */
  .don-card__pronto {
    margin: 1.1rem 0 0; margin-top: auto; padding-top: 1.1rem;
    font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
    color: var(--piedra); border-top: 1px dashed var(--line);
  }

  .don-via__pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; margin: 1.2rem 0 0; }
  .don-via__otro {
    font-family: var(--sans); font-size: 0.86rem; font-weight: 700; color: var(--avila); text-decoration: none;
    border-bottom: 2px solid color-mix(in srgb, var(--senal) 55%, transparent); padding-bottom: 1px;
    transition: border-color .18s ease, color .18s ease;
  }
  .don-via__otro:hover { color: var(--cordillera); border-bottom-color: var(--senal); }
  .don-via__pasarela { font-family: var(--sans); font-size: 0.76rem; color: var(--piedra); }

  /* ---- Transferencia directa ---- */
  .don-banco__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.4rem, 1rem + 2vw, 2.8rem); align-items: start; }
  .don-banco__titulo { font-size: var(--step-2); }
  .don-banco__intro p { color: var(--piedra); margin-top: 0.7rem; max-width: 46ch; }
  .don-banco__datos { margin: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--base); overflow: hidden; }
  .don-banco__fila { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; padding: 0.85rem 1.2rem; transition: background-color .18s ease; }
  .don-banco__fila:hover { background: color-mix(in srgb, var(--senal) 7%, transparent); }
  .don-banco__fila + .don-banco__fila { border-top: 1px solid var(--line); }
  .don-banco__fila dt { font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--piedra); }
  .don-banco__fila dd { margin: 0; font-family: var(--mono); font-size: 0.94rem; color: var(--tinta); word-break: break-word; }
  .don-banco__nota { font-family: var(--sans); font-size: 0.86rem; color: var(--piedra); margin-top: 1rem; max-width: 62ch; }

  @media (max-width: 900px) {
    .don-transp__lista { grid-template-columns: 1fr; gap: 1.1rem; }
    .don-banco__grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 620px) {
    .don-banco__fila { grid-template-columns: 1fr; gap: 0.25rem; }
    /* En móvil las dos vías van una debajo de otra y a todo el ancho. */
    .don-hero__vias { flex-direction: column; }
    .don-hero__via { min-width: 0; width: 100%; }
    .don-hero { padding-bottom: clamp(2.6rem, 2rem + 5vw, 3.6rem); }
    .don-hero__ridge { height: 62px; }
  }

  /* Sin movimiento: la página queda idéntica, solo que quieta. */
  @media (prefers-reduced-motion: reduce) {
    .don-hero__eyebrow, .don-hero__titulo, .don-hero .don-hero__dek, .don-hero__vias, .don-hero__ridge,
    .don-hero__eyebrow::before, .don-hero__ridge-linea,
    .don-transp.in .don-transp__item, .don-via.in .don-card,
    .don-via.in .don-card--destacada .btn--donar, .btn--donar:hover::after {
      animation: none;
    }
    .don-hero__ridge-linea { stroke-dashoffset: 0; }
    .don-intro__titulo::after { transition: none; width: 4.5rem; }
    .don-card:hover, .don-hero__via:hover, .btn--donar:hover { transform: none; }
    .don-card::before, .don-hero__via-flecha { transition: none; }
  }

  /* ---- Titular de una edición ---- */
  /* Un poco más pequeño que el de una entrada: el nombre de un boletín suele
     ser una frase larga y con --step-4 se comía la pantalla. post_class() pone
     `type-avila_boletin` en el <article>, así que esto solo toca a las
     ediciones; los artículos conservan su tamaño. */
  /* La cabecera de una edición va centrada, no alineada a la izquierda como la
     de un artículo. El motivo es el titular: se sale de la columna de lectura
     para caber en menos líneas, y alineado a la izquierda arrancaba 210px por
     delante del antetítulo y de la firma, que sí se quedan en la columna — se
     leía como un bloque descuadrado. Centrado, el desborde deja de notarse y
     además rima con la tapa, que ya iba centrada debajo. */
  .type-avila_boletin .article__head { text-align: center; }
  .type-avila_boletin .article__stand { max-width: 56ch; margin-inline: auto; }
  .type-avila_boletin .article__meta { justify-content: center; border-top: 0; position: relative; }
  /* Filete dorado centrado en lugar de la línea gris de los artículos: se abre
     al cargar, desde el centro hacia los lados. */
  .type-avila_boletin .article__meta::before {
    content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0;
    height: 2px; width: 0; background: var(--senal);
    animation: avila-abre .9s cubic-bezier(.22,.9,.3,1) .25s forwards;
  }
  @keyframes avila-abre { to { width: 4.5rem; } }

  /* Entrada escalonada de la cabecera, como en la portada y en donaciones. */
  .type-avila_boletin .article__cat,
  .type-avila_boletin .article__title,
  .type-avila_boletin .article__stand,
  .type-avila_boletin .article__meta,
  .bol-portada { animation: avila-sube .7s cubic-bezier(.22,.9,.3,1) both; }
  .type-avila_boletin .article__title { animation-delay: .07s; }
  .type-avila_boletin .article__stand { animation-delay: .14s; }
  .type-avila_boletin .article__meta { animation-delay: .2s; }
  .bol-portada { animation-delay: .28s; }

  .type-avila_boletin .article__title {
    font-size: clamp(2.05rem, 1.55rem + 2.5vw, 3.3rem);
    /* El titular se sale de la columna de lectura para caber en menos líneas.
       La rampa arranca en 800px de pantalla (no en 1000, que dejaba sin efecto
       casi todo el rango de portátil) y el tope se calcula solo: sale justo el
       necesario para que el titular llegue al ancho de rejilla del sitio
       (--wrap), alineado con la barra, la portada y el pie. 760px es el
       max-width de .article__head; si cambia, cambia el tope con él. */
    margin-inline: clamp(calc((760px - var(--wrap)) / 2), (800px - 100vw) / 2, 0px);
  }

  /* ---- Portada de una edición (single-avila_boletin) ---- */
  /* La tapa del boletín es vertical y hay que verla entera: .article__cover
     recorta a 420px de alto (object-fit:cover) porque está pensado para fotos
     apaisadas, y a una tapa le cortaba el pie. Aquí mandamos por ALTO, no por
     ancho, así que la misma regla vale para una tapa vertical y para una
     imagen apaisada: ninguna de las dos se recorta ni se come la pantalla. */
  .bol-portada { max-width: 760px; margin: 0.6rem auto 0; padding-inline: clamp(1rem,0.4rem + 2vw,2rem); text-align: center; }
  .bol-portada__marco {
    display: inline-block; position: relative; max-width: 100%;
    border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
    background: var(--paramo); box-shadow: var(--shadow); line-height: 0;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .bol-portada__marco img {
    width: auto; max-width: 100%; height: auto;
    max-height: min(72vh, 620px); /* Manda el alto: la tapa no se sale de pantalla. */
    object-fit: contain;          /* Nunca recorta, sea vertical o apaisada. */
  }
  a.bol-portada__marco:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(18,59,40,.6); }
  .bol-portada__lupa {
    position: absolute; left: 50%; bottom: 0.9rem; translate: -50% 0;
    font-family: var(--sans); font-size: 0.76rem; font-weight: 700; line-height: 1;
    background: var(--senal); color: #2A1D00; padding: 0.5rem 0.9rem; border-radius: 3px;
    opacity: 0; transition: opacity .2s ease, translate .2s ease; pointer-events: none;
  }
  a.bol-portada__marco:hover .bol-portada__lupa,
  a.bol-portada__marco:focus-visible .bol-portada__lupa { opacity: 1; translate: -50% -4px; }
  .bol-portada figcaption { font-family: var(--sans); font-size: 0.78rem; color: var(--piedra); margin-top: 0.6rem; }

  /* ---- Atajos por año en el archivo ---- */
  .bol-anios { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }
  .bol-anios__chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--sans); font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--tinta);
    border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.85rem;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
  }
  .bol-anios__chip:hover { border-color: var(--avila); color: var(--avila); }
  .bol-anios__chip.is-activo { background: var(--cordillera); border-color: var(--cordillera); color: #fff; }
  :root[data-theme="dark"] .bol-anios__chip.is-activo { color: #06120B; }
  .bol-anios__n { font-family: var(--mono); font-size: 0.68rem; opacity: 0.65; }
  .bol-anios__chip.is-activo .bol-anios__n { opacity: 0.8; }

  /* Encabezado de año dentro de la cuadrícula: ocupa la fila entera para no
     colarse como una tarjeta más. */
  .bol-anio {
    grid-column: 1 / -1; font-family: var(--mono); font-size: 0.8rem; font-weight: 400;
    letter-spacing: 0.14em; color: var(--piedra);
    margin: 0.6rem 0 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
  }
  .bol-anio:first-child { margin-top: 0; }
  .bol-anio a { text-decoration: none; }
  .bol-anio a:hover { color: var(--avila); }

  /* ============ ZONAS PUBLICITARIAS (Ad Inserter) ============ */
  .avila-ad { margin: 2.2rem auto; max-width: 728px; text-align: center; }
  .avila-ad__label { display: block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--piedra); margin-bottom: 0.45rem; opacity: 0.8; }
  .avila-ad img, .avila-ad iframe, .avila-ad ins { max-width: 100%; margin-inline: auto; }


  /* ============ FLOTANTES (popup del boletín + WhatsApp) ============ */
  /* El popup vive abajo a la izquierda y WhatsApp abajo a la derecha: nunca
     se pisan. Los dos respetan el área segura del iPhone (safe-area-inset). */

  .avila-popup {
    position: fixed; z-index: 60;
    left: max(1rem, env(safe-area-inset-left));
    bottom: max(1rem, env(safe-area-inset-bottom));
    width: min(340px, calc(100vw - 2rem));
  }
  .avila-popup[hidden] { display: none; }
  .avila-popup__caja {
    position: relative; background: var(--base); color: var(--tinta);
    border: 1px solid var(--line); border-top: 3px solid var(--senal);
    border-radius: 5px; box-shadow: 0 18px 44px -18px rgba(18,59,40,0.5);
    padding: 1.25rem 1.25rem 1.15rem;
    opacity: 0; transform: translateY(14px);
    transition: opacity .35s ease, transform .35s ease;
  }
  .avila-popup.is-open .avila-popup__caja { opacity: 1; transform: none; }
  .avila-popup__cerrar {
    position: absolute; top: 0.55rem; right: 0.55rem;
    display: grid; place-items: center; width: 28px; height: 28px;
    background: none; border: 0; border-radius: 50%; padding: 0;
    color: var(--piedra); cursor: pointer;
  }
  .avila-popup__cerrar:hover { background: var(--paramo); color: var(--tinta); }
  .avila-popup__eyebrow { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--avila); margin: 0 0 0.45rem; }
  .avila-popup__titulo { font-family: var(--serif); font-size: 1.28rem; line-height: 1.22; font-weight: 600; margin: 0 0 0.4rem; padding-right: 1.4rem; }
  .avila-popup__texto { font-family: var(--sans); font-size: 0.84rem; line-height: 1.5; color: var(--piedra); margin: 0; }

  /* El formulario del popup es el mismo shortcode, pero sobre fondo claro y
     en una sola columna: aquí no hay sitio para los tres campos en fila. */
  .subform--popup { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.9rem; }
  .subform--popup input { background: var(--base); border-color: var(--line); color: var(--tinta); padding: 0.65rem 0.8rem; font-size: 0.9rem; }
  .subform--popup input::placeholder { color: var(--piedra); }
  .subform--popup button { background: var(--cordillera); color: #fff; padding: 0.7rem 1rem; font-size: 0.9rem; }
  :root[data-theme="dark"] .subform--popup button { color: #06120B; }
  .avila-popup .subform__nota { color: var(--piedra); font-size: 0.68rem; margin-top: 0.55rem; }
  .avila-popup .subform__aviso { font-size: 0.82rem; margin-top: 0.7rem; padding: 0.5rem 0.7rem; }
  .avila-popup .subform__aviso.is-ok { background: color-mix(in srgb, var(--avila) 12%, var(--base)); color: var(--tinta); border-left: 3px solid var(--avila); }
  .avila-popup .subform__aviso.is-err { background: var(--paramo); color: var(--tinta); border-left: 3px solid #E86A5B; }

  /* --- Botón de WhatsApp --- */
  .avila-wapp {
    position: fixed; z-index: 60;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: grid; place-items: center; width: 56px; height: 56px;
    border-radius: 50%; background: #25D366; color: #fff; overflow: hidden;
    box-shadow: 0 10px 26px -10px rgba(0,0,0,0.55);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .avila-wapp:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.6); }
  .avila-wapp:focus-visible { outline: 2px solid var(--senal); outline-offset: 3px; }
  .avila-wapp__img { width: 100%; height: 100%; object-fit: cover; display: block; }

  @media (max-width: 620px) {
    /* En móvil el popup ocupa el ancho y deja libre la esquina del botón. */
    .avila-popup { left: 0.75rem; right: calc(56px + 1.4rem); width: auto; }
    .avila-popup__caja { padding: 1.05rem 1.05rem 1rem; }
    .avila-popup__titulo { font-size: 1.12rem; }
    .avila-wapp { width: 50px; height: 50px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .avila-popup__caja, .avila-wapp { transition: none; }
    .avila-popup__caja { transform: none; }
  }

  /* ============ OBSERVATORIO (plugin avila-observatorio) ============ */
  /* La página puede montarse con el shortcode dentro de .prose, que tiene
     max-width de lectura (680px) y comprimiría el mapa. Cuando .prose contiene
     el observatorio, se suelta a todo el ancho de .wrap; el texto que la
     acompañe conserva su medida de lectura. */
  /* Relleno en vez de margen: .article no tiene borde ni relleno superior, así
     que un margin-top aquí se escaparía por colapso y dejaría ver el fondo del
     tema padre como una banda gris. Abajo, aire para que las tarjetas no queden
     pegadas a la sección siguiente. */
  .prose:has(> .avila-obs) { max-width: none; margin-top: 0; padding-top: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); padding-bottom: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
  .prose:has(> .avila-obs) > :not(.avila-obs) { max-width: 680px; margin-inline: auto; }
  .prose > .avila-obs { max-width: none; font-size: 1rem; line-height: 1.5; }

  /* El plugin solo emite estructura y clases; la apariencia se define aquí
     para que herede los tokens y el modo oscuro. */
  .avila-obs { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }

  /* --- Navegación por fuente --- */
  .avila-obs-fuentes { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; border-bottom: 2px solid var(--line); padding-bottom: 0; }
  .avila-obs-fuente { font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; color: var(--piedra); padding: 0.6rem 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s ease, border-color .15s ease; }
  .avila-obs-fuente:hover { color: var(--avila); }
  .avila-obs-fuente.is-activa { color: var(--cordillera); border-bottom-color: var(--cordillera); }
  .avila-obs-fuente.is-inactiva { color: var(--piedra); opacity: 0.55; cursor: default; display: inline-flex; align-items: center; gap: 0.4rem; }
  .avila-obs-fuente.is-inactiva em { font-family: var(--mono); font-style: normal; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 2px; padding: 0.05rem 0.3rem; }

  /* --- Subnavegación de paneles --- */
  .avila-obs-paneles { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .avila-obs-panel { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; text-decoration: none; color: var(--piedra); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.85rem; transition: all .15s ease; }
  .avila-obs-panel:hover { color: var(--avila); border-color: var(--avila); }
  .avila-obs-panel.is-activo { background: var(--cordillera); border-color: var(--cordillera); color: var(--base); }
  :root[data-theme="dark"] .avila-obs-panel.is-activo { color: #06120B; }

  /* --- Índice de fuentes --- */
  .avila-obs-indice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--gap); }
  .avila-obs-tarjeta { border: 1px solid var(--line); border-radius: 4px; padding: 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; background: var(--base); }
  .avila-obs-tarjeta.is-inactiva { opacity: 0.7; background: var(--paramo); }
  .avila-obs-tarjeta__t { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; margin: 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
  .avila-obs-tarjeta__t a { text-decoration: none; }
  .avila-obs-tarjeta__t a:hover { color: var(--avila); }
  .avila-obs-pronto { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--piedra); border: 1px solid var(--line); border-radius: 2px; padding: 0.1rem 0.35rem; }
  .avila-obs-tarjeta__l { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--piedra); margin: 0; }
  .avila-obs-tarjeta__d { font-family: var(--sans); font-size: 0.84rem; line-height: 1.5; color: var(--tinta); margin: 0; }
  .avila-obs-tarjeta__p { list-style: none; margin: auto 0 0; padding: 0.6rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 0.3rem; }
  .avila-obs-tarjeta__p a { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--avila); text-decoration: none; }
  .avila-obs-tarjeta__p a:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* --- Panel --- */
  .avila-mig { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 0.8rem + 1.6vw, 2rem); }
  .avila-mig > * { min-width: 0; }
  .avila-mig-aviso { font-family: var(--sans); font-size: 0.9rem; color: var(--piedra); border: 1px dashed var(--line); border-radius: 4px; padding: 1.2rem; text-align: center; }
  .avila-mig-h { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--piedra); margin: 0 0 0.6rem; }
  .avila-mig-intro { display: grid; gap: 0.3rem; }
  .avila-mig-titulo { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; line-height: 1.1; margin: 0; }
  .avila-mig-bajada { font-family: var(--sans); font-size: 0.9rem; color: var(--piedra); max-width: 68ch; margin: 0; }

  /* --- Selector de indicador --- */
  .avila-mig-capas { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .avila-mig-capa { font-family: var(--sans); font-size: 0.74rem; font-weight: 600; background: none; border: 1px solid var(--line); border-radius: 3px; padding: 0.35rem 0.7rem; color: var(--piedra); cursor: pointer; transition: all .15s ease; }
  .avila-mig-capa:hover { color: var(--avila); border-color: var(--avila); }
  .avila-mig-capa.is-activa { background: var(--paramo); border-color: var(--cordillera); color: var(--cordillera); }

  /* --- Indicadores clave --- */
  .avila-mig-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
  .avila-mig-kpi { background: var(--base); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
  .avila-mig-kpi__v { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; line-height: 1.05; color: var(--cordillera); font-variant-numeric: tabular-nums; }
  .avila-mig-kpi__v.is-baja { color: var(--senal); }
  .avila-mig-kpi__k { font-family: var(--sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--piedra); }

  /* --- Mapa + panel lateral --- */
  .avila-mig-lienzo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
  .avila-mig-mapa-caja { position: relative; border: 1px solid var(--line); border-radius: 4px; background: var(--base); padding: 0.6rem; }
  /* Altura fija: así cambiar el encuadre (mundo/América) no descoloca la maqueta. */
  .avila-mig-mapa { width: 100%; height: clamp(320px, 48vh, 540px); display: block; }
  .avila-mig-pais { fill: var(--mig-c0); stroke: var(--mig-borde); stroke-width: 0.7; stroke-linejoin: round; cursor: pointer; transition: fill .18s ease; }
  .avila-mig-pais:hover { stroke: var(--tinta); stroke-width: 1.6; }
  .avila-mig-pais:focus-visible { outline: none; stroke: var(--tinta); stroke-width: 2; }
  .avila-mig-pais.is-elegido { stroke: var(--tinta); stroke-width: 2.2; }
  .avila-mig-c0 { fill: var(--mig-c0); background: var(--mig-c0); }
  .avila-mig-c1 { fill: var(--mig-c1); background: var(--mig-c1); }
  .avila-mig-c2 { fill: var(--mig-c2); background: var(--mig-c2); }
  .avila-mig-c3 { fill: var(--mig-c3); background: var(--mig-c3); }
  .avila-mig-c4 { fill: var(--mig-c4); background: var(--mig-c4); }
  .avila-mig-c5 { fill: var(--mig-c5); background: var(--mig-c5); }
  .avila-mig-c6 { fill: var(--mig-c6); background: var(--mig-c6); }

  /* --- Leyenda --- */
  .avila-mig-leyenda { position: absolute; right: 0.9rem; bottom: 0.9rem; background: color-mix(in srgb, var(--base) 88%, transparent); border: 1px solid var(--line); border-radius: 3px; padding: 0.5rem 0.6rem; font-family: var(--sans); }
  .avila-mig-leyenda__t { display: block; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--piedra); margin-bottom: 0.35rem; }
  .avila-mig-leyenda__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.18rem; }
  .avila-mig-leyenda__i { display: flex; align-items: center; gap: 0.4rem; }
  .avila-mig-muestra { width: 15px; height: 10px; border-radius: 2px; border: 1px solid var(--mig-borde); flex: none; display: inline-block; }
  .avila-mig-leyenda__n { font-size: 0.64rem; color: var(--piedra); font-variant-numeric: tabular-nums; }

  /* --- Lateral: ficha de país y ranking --- */
  .avila-mig-aside { position: sticky; top: 1rem; display: grid; gap: 1rem; }
  .avila-mig-pista { font-family: var(--sans); font-size: 0.72rem; color: var(--piedra); margin: -0.3rem 0 0.7rem; }
  .avila-mig.has-detalle .avila-mig-pista { display: none; }
  .avila-mig-detalle { position: relative; border: 1px solid var(--cordillera); border-radius: 4px; padding: 1rem; background: var(--paramo); }
  .avila-mig-detalle__x { position: absolute; top: 0.4rem; right: 0.5rem; background: none; border: 0; font-size: 1.2rem; line-height: 1; color: var(--piedra); cursor: pointer; padding: 0.2rem 0.35rem; }
  .avila-mig-detalle__x:hover { color: var(--avila); }
  .avila-mig-detalle__n { font-family: var(--serif); font-size: var(--step-1); font-weight: 600; margin: 0 1.4rem 0.3rem 0; }
  .avila-mig-detalle__v { margin: 0 0 0.7rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
  .avila-mig-detalle__v span { font-family: var(--serif); font-size: var(--step-2); font-weight: 600; color: var(--cordillera); font-variant-numeric: tabular-nums; }
  .avila-mig-detalle__v em { font-family: var(--sans); font-style: normal; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--piedra); }
  .avila-mig-detalle__d { display: grid; gap: 0.25rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
  .avila-mig-detalle__f { display: flex; justify-content: space-between; gap: 0.6rem; font-family: var(--sans); font-size: 0.78rem; color: var(--piedra); }
  .avila-mig-detalle__f b { color: var(--tinta); font-variant-numeric: tabular-nums; }
  .avila-mig-chispa { margin: 0.7rem 0 0.3rem; height: 34px; }
  .avila-mig-chispa__s { width: 100%; height: 34px; display: block; }
  .avila-mig-chispa__s polyline { fill: none; stroke: var(--avila); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
  .avila-mig-detalle__s { font-family: var(--sans); font-size: 0.7rem; color: var(--piedra); margin: 0; }

  /* --- Ranking --- */
  .avila-mig-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
  .avila-mig-barra__b { width: 100%; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 5rem; gap: 0.6rem; align-items: center; background: none; border: 0; padding: 0.22rem 0.3rem; border-radius: 3px; cursor: pointer; font-family: var(--sans); font-size: 0.78rem; text-align: left; color: inherit; }
  .avila-mig-barra__b:hover { background: var(--paramo); }
  .avila-mig-barra.is-elegido .avila-mig-barra__b { background: var(--paramo); box-shadow: inset 2px 0 0 var(--cordillera); }
  .avila-mig-barra__n { color: var(--tinta); overflow-wrap: anywhere; }
  .avila-mig-barra__p { background: var(--paramo); border-radius: 2px; height: 11px; overflow: hidden; }
  .avila-mig-barra.is-elegido .avila-mig-barra__p { background: var(--base); }
  .avila-mig-barra__f { display: block; height: 100%; width: var(--avila-mig-pct, 0%); background: linear-gradient(90deg, var(--avila), var(--cordillera)); border-radius: 2px; }
  .avila-mig-barra__v { text-align: right; font-family: var(--mono); font-size: 0.72rem; color: var(--piedra); font-variant-numeric: tabular-nums; }

  /* --- Línea de tiempo --- */
  .avila-mig-tiempo { display: flex; align-items: center; gap: 0.8rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.7rem 0; }
  .avila-mig-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--base); color: var(--cordillera); cursor: pointer; font-size: 0.72rem; display: grid; place-items: center; transition: all .15s ease; }
  .avila-mig-play:hover { border-color: var(--avila); color: var(--avila); }
  .avila-mig-play.is-activo { background: var(--cordillera); color: var(--base); border-color: var(--cordillera); }
  .avila-mig-tiempo__l { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--piedra); }
  .avila-mig-rango { flex: 1; accent-color: var(--cordillera); min-width: 0; }
  .avila-mig-anio-actual { font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--cordillera); min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }

  /* --- Barras apiladas y perfil --- */
  .avila-mig-clave { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0.7rem; }
  .avila-mig-clave__i { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.72rem; color: var(--piedra); }
  .avila-mig-p1 { background: var(--mig-p1); }
  .avila-mig-p2 { background: var(--mig-p2); }
  .avila-mig-p3 { background: var(--mig-p3); }
  .avila-mig-p4 { background: var(--mig-p4); }
  .avila-mig-marca { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--senal); border: 1px solid var(--senal); border-radius: 2px; padding: 0 0.22rem; margin-left: 0.3rem; text-decoration: none; cursor: help; vertical-align: 1px; }
  .avila-mig-f { background: var(--mig-f); }
  .avila-mig-m { background: var(--mig-m); }
  .avila-mig-pilas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
  .avila-mig-pila { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 3.2rem 5rem; gap: 0.7rem; align-items: center; font-family: var(--sans); font-size: 0.78rem; }
  .avila-mig-pila__n { color: var(--tinta); overflow-wrap: anywhere; }
  .avila-mig-pila__b { display: flex; height: 15px; width: var(--avila-mig-ancho, 100%); border-radius: 2px; overflow: hidden; background: var(--paramo); }
  .avila-mig-pila__b > span { width: var(--avila-mig-pct, 0%); height: 100%; }
  .avila-mig-pila__t { font-family: var(--mono); font-size: 0.74rem; color: var(--cordillera); text-align: right; font-variant-numeric: tabular-nums; }
  .avila-mig-pila__t em { font-style: normal; color: var(--piedra); }
  .avila-mig-pila__v { font-family: var(--mono); font-size: 0.72rem; color: var(--piedra); text-align: right; font-variant-numeric: tabular-nums; }
  .avila-mig-pie { font-family: var(--sans); font-size: 0.74rem; line-height: 1.5; color: var(--piedra); max-width: 78ch; margin: 0.9rem 0 0; }

  /* --- Cuánto se espera --- */
  .avila-mig-pila--espera { grid-template-columns: 9.5rem minmax(0, 1fr) 5.4rem 8rem; }
  .avila-mig-espera__b { display: block; height: 100%; width: var(--avila-mig-pct, 0%); background: linear-gradient(90deg, var(--senal), var(--mig-p3)); border-radius: 2px; }
  .avila-mig-pila--espera.is-sin .avila-mig-espera__b { background: repeating-linear-gradient(45deg, var(--senal) 0 6px, transparent 6px 12px); }
  .avila-mig-pila--espera .avila-mig-pila__t { color: var(--tinta); font-weight: 700; }
  .avila-mig-pila--espera.is-sin .avila-mig-pila__t { color: var(--senal); font-weight: 400; font-size: 0.68rem; }
  .avila-mig-pila--espera .avila-mig-pila__t em { font-style: normal; font-weight: 400; color: var(--piedra); font-size: 0.64rem; margin-left: 0.2rem; }
  .avila-mig-pila--espera .avila-mig-pila__v em { font-style: normal; color: var(--piedra); opacity: 0.75; }

  /* --- El puente: gráfico divergente --- */
  .avila-mig-puente__d { font-family: var(--sans); font-size: 0.84rem; color: var(--piedra); max-width: 68ch; margin: 0 0 0.9rem; }
  .avila-mig-divergente { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
  .avila-mig-div { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 3rem minmax(0, 1fr) 5rem; gap: 0.5rem; align-items: center; font-family: var(--mono); font-size: 0.72rem; color: var(--piedra); font-variant-numeric: tabular-nums; }
  .avila-mig-div__v2 { text-align: right; }
  .avila-mig-div__a { text-align: center; color: var(--tinta); font-weight: 700; }
  .avila-mig-div__i1, .avila-mig-div__i2 { height: 12px; display: flex; }
  .avila-mig-div__i2 { justify-content: flex-end; }
  .avila-mig-div__b { display: block; height: 100%; width: var(--avila-mig-pct, 0%); border-radius: 2px; }
  .avila-mig-div__b--ida { background: var(--mig-ida); }
  .avila-mig-div__b--vuelta { background: var(--mig-vuelta); }
  .avila-mig-div__leyenda { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--piedra); margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid var(--line); }

  /* --- Ficha de fuente --- */
  .avila-mig-ficha { border-top: 2px solid var(--cordillera); padding-top: 0.9rem; }
  .avila-mig-ficha__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 0 0.8rem; }
  .avila-mig-ficha__l dt { font-family: var(--sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--piedra); margin-bottom: 0.2rem; }
  .avila-mig-ficha__l dd { margin: 0; font-family: var(--sans); font-size: 0.8rem; color: var(--tinta); }
  .avila-mig-ficha__l dd a { color: var(--avila); text-underline-offset: 3px; }
  .avila-mig-ficha__aviso { font-family: var(--sans); font-size: 0.78rem; line-height: 1.55; color: var(--tinta); background: var(--paramo); border-left: 3px solid var(--senal); border-radius: 0 3px 3px 0; padding: 0.7rem 0.9rem; max-width: 82ch; margin: 0 0 0.7rem; }
  .avila-mig-ficha__n { font-family: var(--sans); font-size: 0.74rem; line-height: 1.55; color: var(--piedra); max-width: 82ch; margin: 0 0 0.35rem; }

  /* --- Móvil --- */
  @media (max-width: 1000px) {
    .avila-mig-lienzo { grid-template-columns: minmax(0, 1fr); }
    .avila-mig-aside { position: static; }
  }
  @media (max-width: 760px) {
    .avila-mig-kpis { grid-template-columns: 1fr 1fr; }
    .avila-mig-ficha__l { grid-template-columns: 1fr 1fr; }
    .avila-mig-leyenda { position: static; margin-top: 0.6rem; border: 0; padding: 0; background: none; }
    .avila-mig-leyenda__l { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .avila-mig-leyenda__i { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
    .avila-mig-barra__b { grid-template-columns: 6.5rem minmax(0, 1fr) 4.2rem; gap: 0.4rem; font-size: 0.74rem; }
    .avila-mig-pila { grid-template-columns: 6.5rem minmax(0, 1fr) 2.8rem 4.2rem; gap: 0.4rem; font-size: 0.72rem; }
    .avila-mig-pila--espera { grid-template-columns: 6rem minmax(0, 1fr) 4rem 5.4rem; }
    .avila-mig-div { grid-template-columns: 3.8rem minmax(0, 1fr) 2.6rem minmax(0, 1fr) 3.8rem; gap: 0.3rem; font-size: 0.62rem; }
    .avila-obs-fuente { padding: 0.5rem 0.6rem; font-size: 0.74rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .avila-mig-pais { transition: none; }
  }

  /* --- Encuadre del mapa --- */
  .avila-mig-zoom { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; display: flex; gap: 0.2rem; background: color-mix(in srgb, var(--base) 88%, transparent); border: 1px solid var(--line); border-radius: 3px; padding: 0.15rem; }
  .avila-mig-zoom__b { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; background: none; border: 0; border-radius: 2px; padding: 0.25rem 0.55rem; color: var(--piedra); cursor: pointer; }
  .avila-mig-zoom__b:hover { color: var(--avila); }
  .avila-mig-zoom__b.is-activo { background: var(--cordillera); color: var(--base); }
  :root[data-theme="dark"] .avila-mig-zoom__b.is-activo { color: #06120B; }