/* ═══════════════════════════════════════════════════════════════════════════
   HAZLO SOLO · hoja compartida del directorio
   ───────────────────────────────────────────────────────────────────────────
   DERIVADA de manifiesto/index.html en producción (16 jul 2026). El apex sigue
   llevando su CSS en línea, página por página: eso NO se toca (límite GROWTH
   16 jul — generador para el directorio, sin refactor del apex).

   CONSECUENCIA QUE HAY QUE SABER: esto es una copia. Si el apex cambia su nav,
   su footer o sus tokens, esta hoja NO se entera y el directorio deriva. Es una
   copia en vez de setenta, pero copia. Al tocar el apex, re-derivar esta hoja.

   NO EDITAR A MANO lo que venga del apex. Lo propio del directorio va al final,
   bajo la marca HAZLO SOLO · molde de ficha.
   ═══════════════════════════════════════════════════════════════════════════ */

    /* ═══════════════════════════════════════════════════
       :ROOT — SISTEMA UNENTE v20
       ═══════════════════════════════════════════════════ */
    :root {
      --bg:       #F6F7F9;
      --bg-alt:   #EDEFF2;
      --bg-mid:   #E6E9ED;
      --bg-w:     #FBFCFE;
      --text:     #25282F;
      --muted:    rgba(37,40,47,0.66);
      --cta:      #2EE59D;
      --cta-txt:  #2A2A2A;
      --acc2:     #2EE59D;
      --acc2-soft: rgba(46,229,157,0.14);
      --acc2-head: #009A5D;
      --paper:    #FAFAFA;
      --rule:     rgba(37,40,47,0.13);
      --border:   rgba(37,40,47,0.10);
      --fh: 'Space Grotesk', sans-serif;
      --fb: 'Inter', sans-serif;
      --fd: 'Space Grotesk', sans-serif;
      --fm: 'Inter', sans-serif;
      --pad:  clamp(18px, 5vw, 48px);
      --wide: 1200px;
      --wrap: 720px;
      --prose: 680px;
      --r: 14px;
      --ease: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      --mark-height:    32px;
      --mark-bar-width: 4px;
    }

    /* RESET */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body { background: var(--bg); color: var(--text); font-family: var(--fb); line-height: 1.6; overflow-x: hidden; }
    img  { display: block; max-width: 100%; height: auto; }
    a    { color: inherit; text-decoration: none; }
    ul   { list-style: none; }

    /* Solo lector de pantalla — oculto a la vista, leído por accesibilidad */
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* SKIP LINK */
    .skip-link {
      position: absolute; top: -100%; left: 16px;
      background: var(--text); color: #ffffff;
      padding: 8px 18px; border-radius: 0 0 var(--r) var(--r);
      font-family: var(--fh); font-size: .875rem; font-weight: 700;
      z-index: 9999; text-decoration: none;
      transition: top .15s ease;
    }
    .skip-link:focus { top: 0; }

    :focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 3px; }
    button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
    input:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
    .prefooter :focus-visible, .stat :focus-visible { outline-color: var(--bg); }

    /* ═══════════════════════════════════════════════════
       NAV
       ═══════════════════════════════════════════════════ */
    .nav {
      position: sticky; top: 0; z-index: 200;
      background: rgba(248,248,247,0.94);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-bottom: 2px solid var(--text);
    }
    .nav-in {
      display: flex; align-items: center; justify-content: space-between;
      height: 88px; max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad);
    }
    .logo { font-family: var(--fh); font-size: 1.8rem; letter-spacing: -0.03em; color: var(--text); }
    .logo b { font-weight: 700; }
    .logo span { font-weight: 400; }
    .logo-type { letter-spacing: -0.03em; }
    .logo-type b { font-weight: 700; }
    .logo-type span { font-weight: 400; }

    .nav-list { display: flex; align-items: center; gap: 4px; }
    .nav-item { position: relative; }
    .nav-item a {
      display: block; font-family: var(--fh); font-size: .95rem; font-weight: 600;
      letter-spacing: -0.01em; color: var(--text); padding: 6px 14px;
      border-radius: 6px; transition: color var(--ease);
    }
    .nav-item a:hover { color: var(--text); }
    .nav-item a:not(.btn-pill):not(.active):hover::after,
    .nav-item a.active::after {
      content: ''; position: absolute; bottom: -1px; left: 14px; right: 14px;
      height: 2px; background: var(--cta); border-radius: 2px 2px 0 0;
    }

    .btn-pill {
      background: transparent !important; color: var(--text) !important;
      padding: 10px 24px !important; border-radius: 100px !important;
      font-family: var(--fh) !important; font-size: .875rem !important; font-weight: 600;
      border: 1.5px solid var(--text) !important;
      transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
      margin-left: 8px; display: inline-flex !important; align-items: center; gap: 8px;
    }
    .btn-pill:hover {
      background: var(--text) !important; color: var(--bg) !important;
      border-color: var(--text) !important; transform: translateY(-1px);
    }
    .nav-item .btn-pill::after { display: none !important; }

    .btn-pill__mark {
      --mark-height: 13px; --mark-bar-width: 2px;
      display: inline-flex; align-items: center; gap: 2px; height: var(--mark-height);
      flex-shrink: 0; transition: transform 0.2s ease;
    }
    .btn-pill__mark-bar { display: block; width: var(--mark-bar-width); height: 100%; background: currentColor; }
    .btn-pill__mark-chevron {
      font-family: var(--fm); font-weight: 700; color: currentColor; font-size: var(--mark-height);
      line-height: 1; display: inline-flex; align-items: center; height: 100%; margin-top: -1px;
    }
    .btn-pill:hover .btn-pill__mark { transform: translateX(3px); }

    .nav-soon span {
      display: block; font-family: var(--fh); font-size: .95rem; font-weight: 600;
      letter-spacing: -0.01em; color: var(--muted); padding: 6px 14px;
      opacity: .4; cursor: default; user-select: none;
    }

    .hbg { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
    .hbg span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

    /* ═══════════════════════════════════════════════════
       ANN-BAR (TICKER)
       ═══════════════════════════════════════════════════ */
    .ann-bar {
      width: 100%; height: 38px; background: var(--bg); border-bottom: 2px solid var(--text);
      display: flex; align-items: center; overflow: hidden;
    }
    .ann-wrap { width: 100%; overflow: hidden; display: flex; align-items: center; }
    .ann-track {
      display: flex; align-items: center; white-space: nowrap;
      animation: ticker-scroll 28s linear infinite; will-change: transform;
    }
    .ann-track:hover { animation-play-state: paused; }
    .ann-block {
      display: inline-flex; align-items: center; gap: 0; font-family: var(--fh);
      font-size: .82rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text);
    }
    .ann-sep {
      display: inline-block; width: 3px; height: 16px; background: var(--acc2);
      margin: 0 20px; flex-shrink: 0; vertical-align: middle;
    }
    @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @media (max-width: 768px) {
      .ann-track {
        animation-duration: 40s;
      }
    }

    @media (max-width: 480px) {
      .ann-track {
        animation-duration: 44s;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .ann-track {
        animation: none;
      }
    }

    /* ═══════════════════════════════════════════════════
       MARCADORES GLOBALES (Escalables con EM)
       ═══════════════════════════════════════════════════ */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 12px; font-family: var(--fm);
      font-weight: 600; font-size: clamp(16px, 1.9vw, 18px); letter-spacing: -0.01em;
      line-height: 1.3; color: var(--text); margin-bottom: 16px;
    }
    .eyebrow__mark {
      display: inline-flex; align-items: center; gap: 5px; height: 1.25em; flex-shrink: 0;
    }
    .eyebrow__bar { display: block; width: 3px; height: 100%; background: var(--cta); }
    .eyebrow__chevron {
      font-family: var(--fm); font-weight: 700; color: var(--cta); font-size: 1.2em;
      line-height: 1; display: inline-flex; align-items: center; margin-top: -1px;
    }
    
    .eyebrow__mark--inline { height: 1em; gap: 3px; margin-right: 0;}
    .eyebrow__mark--inline .eyebrow__bar { width: 2px; }
    .eyebrow__mark--inline .eyebrow__chevron { font-size: 1.1em; margin-top: 0; }

    /* Enlaces secundarios (inline) */
    .hero__secondary {
      font-family: var(--fm); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--acc2);
      text-decoration: none; border-bottom: 1px solid var(--acc2); padding-bottom: 1px;
      display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease, border-color 0.2s ease;
    }
    .hero__secondary .eyebrow__bar { background: var(--acc2); }
    .hero__secondary .eyebrow__chevron { color: var(--acc2); }
    .hero__secondary:hover { color: var(--text); border-bottom-color: var(--text); opacity: 0.7; }

    /* Enlaces canónicos — texto base + subrayado coral (WCAG AA) */
    .link-body, .link-ext { color: var(--text); text-decoration: underline; text-decoration-color: var(--acc2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness var(--ease), color var(--ease); }
    .link-body:hover, .link-ext:hover { text-decoration-thickness: 2px; }
    .link-ext::after { content: "↗"; display: inline-block; margin-left: .15em; font-size: .85em; text-decoration: none; }

    /* ═══════════════════════════════════════════════════
       HERO MANIFIESTO
       ═══════════════════════════════════════════════════ */
    .m-hero {
      padding: clamp(64px,10vh,120px) 0 clamp(52px,8vh,96px);
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      position: relative;
    }
    .m-hero-content {
      max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1;
    }
    .m-h1 {
      font-family: var(--fh); font-weight: 500; font-size: clamp(2.6rem, 8.5vw, 4.6rem);
      line-height: 1.04; letter-spacing: -0.03em; color: var(--text); margin-bottom: 32px; text-wrap: balance;
    }
    .m-h1 em { font-style: normal; font-weight: 700; color: var(--acc2-head); }
    .m-statement {
      font-family: var(--fh); font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 500;
      letter-spacing: -0.02em; line-height: 1.25; color: var(--text); max-width: 600px; margin-bottom: 16px;
    }
    .m-intro {
      font-family: var(--fb); font-size: clamp(1rem, 1.4vw, 1.0625rem); line-height: 1.6;
      color: var(--muted); max-width: 560px; margin-bottom: 0;
    }

    /* ═══════════════════════════════════════════════════
       IMÁGENES FULL WIDTH (EDGE TO EDGE)
       ═══════════════════════════════════════════════════ */
    .hero__visual {
      width: 100%; margin: 0; background: var(--bg-mid); aspect-ratio: 21 / 9; overflow: hidden;
      min-height: 220px; max-height: 560px; border-bottom: 1px solid var(--border);
    }
    .hero__visual img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center;}
    
    .editorial-visual {
      width: 100%; margin: 0; background: var(--bg-mid); aspect-ratio: 21 / 9; overflow: hidden;
      min-height: 220px; max-height: 560px; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border);
    }
    .editorial-visual img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: center;}


    /* ═══════════════════════════════════════════════════
       DECLARACIÓN EDITORIAL
       ═══════════════════════════════════════════════════ */
    .s-decl { padding: clamp(72px,11vw,128px) 0; background: var(--bg); }
    .decl-prose { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
    .decl-prose p {
      font-family: var(--fb); font-size: clamp(1rem, 1.4vw, 1.0625rem); line-height: 1.78;
      color: var(--text); margin-bottom: 28px;
    }
    .decl-prose p:last-child { margin-bottom: 0; }

    /* Pull Quote V20 */
    .pull-quote {
      border-left: 4px solid var(--cta); /* Barrita esmeralda restaurada */
      padding: 4px 0 4px 24px; margin: 48px 0;
    }
    .pull-quote p {
      font-family: var(--fh); font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 500;
      letter-spacing: -0.02em; line-height: 1.15; color: var(--text); margin-bottom: 0; text-wrap: balance;
    }

    /* ═══════════════════════════════════════════════════
       PRINCIPIOS GRID (2x2)
       ═══════════════════════════════════════════════════ */
    .s-principios { padding: clamp(72px,11vw,128px) 0; background: var(--bg-alt); border-top: 1px solid var(--border);}
    .principios-head { max-width: var(--wrap); margin: 0 auto clamp(48px,6vw,72px); padding: 0 var(--pad); }
    .principios-head h2 {
      font-family: var(--fh); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.4rem);
      line-height: 1.15; letter-spacing: -0.025em; color: var(--text); margin-bottom: 10px; text-wrap: balance;
    }

    .principios-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
    .principio {
      background: var(--bg-w); border: 1px solid var(--border); border-radius: var(--r);
      padding: clamp(28px, 3.5vw, 36px) clamp(24px, 3vw, 28px);
      transition: transform 0.25s ease, border-color 0.2s ease;
    }
    .principio:hover { transform: translateY(-4px); border-color: var(--text); }
    
    .principio-num {
      font-family: var(--fm); font-size: 1.4rem; font-weight: 700; color: var(--acc2-head);
      display: block; margin-bottom: 14px; line-height: 1;
    }
    .principio h3 { font-family: var(--fh); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--text); margin-bottom: 12px; line-height: 1.2;}
    .principio p  { font-family: var(--fb); font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-bottom: 0;}

    /* ═══════════════════════════════════════════════════
       FAQ — AEO
       ═══════════════════════════════════════════════════ */
    .s-faq { padding: clamp(72px,11vw,128px) 0; background: var(--bg); border-top: 1px solid var(--rule); }
    .faq-head { max-width: var(--wrap); margin: 0 auto clamp(44px,5vw,64px); padding: 0 var(--pad); }
    .faq-head h2 { margin-bottom: 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-family: var(--fh); font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; color: var(--text); }
    .faq-list { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); display: flex; flex-direction: column; gap: 12px; }
    .faq-item { background: var(--bg-w); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
    .faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; font-family: var(--fh); font-size: 1.05rem; font-weight: 600; letter-spacing:-0.01em; color: var(--text); cursor: pointer; list-style: none; gap: 16px; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; font-family: var(--fm); font-size: 1.3rem; font-weight: 400; color: var(--acc2); flex-shrink: 0; transition: transform var(--ease); }
    .faq-item details[open] summary::after { transform: rotate(45deg); }
    .faq-answer { padding: 0 24px 22px; border-top: 1px solid var(--border); }
    .faq-answer p { font-size: 1rem; line-height: 1.72; padding-top: 20px; font-family: var(--fb); color: var(--muted); }


    /* ═══════════════════════════════════════════════════
       PREFOOTER
       ═══════════════════════════════════════════════════ */
    .prefooter { background: var(--text); padding: clamp(80px,12vw,140px) 0; }
    .prefooter__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); text-align: left; }
    
    .eyebrow--light { color: var(--bg); margin-bottom: 24px; }
    .eyebrow--light .eyebrow__bar { background: var(--cta); }
    .eyebrow--light .eyebrow__chevron { color: var(--cta); }
    /* Modificador para que el marcador del prefooter sea blanco puro */
    .pre-eyebrow .eyebrow__bar { background: var(--bg); }
    .pre-eyebrow .eyebrow__chevron { color: var(--bg); }
    
    .prefooter__h2 { font-family: var(--fh); font-weight: 500; font-size: clamp(2rem, 4.5vw, 2.8rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--bg); margin-bottom: 14px; text-wrap: balance; }
    .prefooter__h2 em { font-style: normal; font-weight: 700; color: var(--acc2); } /* Palabra elección en Naranja */
    .prefooter__lead { font-family: var(--fb); font-size: 1.0625rem; line-height: 1.55; color: rgba(248,248,247,0.75); margin-bottom: 40px; max-width: 55ch; }
    
    .prefooter__form { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; }
    .prefooter__form input {
      flex: 1; min-width: 220px; max-width: 320px; padding: 16px 22px;
      border: 1px solid rgba(255,255,255,0.4); background: var(--text); font-family: var(--fb);
      font-size: 15px; color: var(--bg); border-radius: 100px;
      transition: border-color 0.2s ease;
    }
    .prefooter__form input::placeholder { color: rgba(248,248,247,0.6); }
    .prefooter__form input:focus { background: var(--text); border-color: var(--bg); outline: none; }
    
    .btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--cta); color: var(--cta-txt); padding: 18px 32px; font-family: var(--fh); font-weight: 600; font-size: 16px; border: none; border-radius: 100px; cursor: pointer; text-decoration: none; transition: transform 0.2s ease; }
    .btn-cta:hover { transform: translateY(-2px); background: #25d48e; }
    .btn-cta[aria-busy="true"] { opacity: .7; cursor: wait; }
    .btn-cta:hover .btn-cta__mark { transform: translateX(3px); }
    .btn-cta-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: var(--cta); border: 2px solid var(--cta); border-radius: 100px; padding: 16px 32px; font-family: var(--fh); font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
    .btn-cta-outline:hover { background: var(--cta); color: var(--cta-txt); }
    .btn-cta__mark { display: inline-flex; align-items: center; gap: 3px; height: 1em; flex-shrink: 0; margin-left: 2px; transition: transform 0.2s ease; }
    .btn-cta__mark-bar { display: block; width: 2px; height: 100%; background: currentColor; }
    .btn-cta__mark-chevron { font-family: var(--fm); font-weight: 700; color: currentColor; font-size: 1.1em; line-height: 1; display: inline-flex; align-items: center; margin-top: -1px; }
    .btn-cta-outline:hover .btn-cta__mark { transform: translateX(3px); }

    .microcopy--light { color: rgba(248,248,247,0.7); margin-top: 24px;}
    .microcopy .eyebrow__mark--inline { display: inline-flex; vertical-align: middle; margin-right: 6px; }
    /* Prefooter oscuro: microcopy legal en blanco roto, no en verde (no desviar de la conversión) */
    .prefooter .microcopy, .prefooter .microcopy a, .prefooter .microcopy .eyebrow__chevron { color: rgba(248,248,247,.7) !important; }
    .prefooter .microcopy .eyebrow__bar { background: rgba(248,248,247,.7) !important; }
    .prefooter .microcopy { flex-wrap: wrap; }   /* móvil: salta a 2 líneas limpias, nunca columna partida */
    .ok-cta { display:none; padding:16px 24px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); font-family:var(--fh); font-size:1rem; font-weight:600; color:var(--bg); margin-top:16px; }

    /* ═══════════════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════════════ */
    .footer { background: var(--bg); border-top: 1px solid var(--border); }
    .footer-main { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; max-width: var(--wide); margin: 0 auto; min-height: 88px; padding: 16px var(--pad); }
    .footer-brand { display: flex; align-items: center; gap: 12px; }
    .footer-logo { font-family: var(--fh); font-size: 1.35rem; letter-spacing: -0.02em; color: var(--text); }
    .footer-logo span { font-weight: 400; }
    .footer-logo b { font-weight: 700; }
    .footer-sep { width: 2px; height: 18px; background: var(--text); flex-shrink: 0; }
    .footer-tagline { font-family: var(--fh); font-size: .8125rem; font-weight: 500; color: var(--muted); }
    .social-links { display: flex; align-items: center; gap: 6px; }
    .social-link { display: flex; align-items: center; font-family: var(--fh); font-size: .8125rem; font-weight: 600; color: var(--muted); transition: color var(--ease); }
    .social-link:hover { color: var(--text); }
    .social-link svg { width: 18px; height: 18px; flex-shrink: 0; }
    .social-username { font-family: var(--fh); font-size: .8125rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
    .footer-nav { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; list-style: none; }
    .footer-nav a { font-family: var(--fh); font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); transition: color var(--ease); position: relative; padding-bottom: 8px; }
    .footer-nav a:hover { color: var(--text); }
    .footer-nav a.active { color: var(--text); }
    .footer-nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cta); border-radius: 2px; }
    
    .footer-copy { 
      border-top: 2px solid var(--text); max-width: var(--wide); margin: 0 auto; 
      padding: 14px var(--pad); display: flex; align-items: center; 
      justify-content: space-between; flex-wrap: wrap; gap: 16px; 
    }
    .footer-copy p { font-family: var(--fh); font-size: .72rem; font-weight: 500; color: var(--text); line-height: 1.5; margin: 0;}
    .footer-legal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .footer-legal a { font-family: var(--fh); font-size: .72rem; font-weight: 500; color: var(--text); text-decoration: underline; text-decoration-color: var(--acc2); text-underline-offset: 2px; transition: text-decoration-thickness var(--ease);}
    .footer-legal a:hover { text-decoration-thickness: 2px; }

    /* ═══════════════════════════════════════════════════
       STICKY NL — desktop
       ═══════════════════════════════════════════════════ */
    .sticky { display: none; }
    @media (min-width: 768px) {
      .sticky { display: block; position: fixed; right: 28px; bottom: 28px; z-index: 150; background: var(--bg); border: 2px solid var(--text); border-radius: 16px; padding: 26px 24px 24px; width: 300px; box-shadow: 0 12px 36px rgba(0,0,0,.15); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
      .sticky.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
      .sticky-title { font-family: var(--fh); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-bottom: 16px; padding-right: 22px; }
      .sticky form { display: flex; flex-direction: column; gap: 10px;}
      .sticky form input { width: 100%; min-width: unset; padding: 14px 18px; font-size: 14px; border: 1.5px solid var(--border); background: var(--bg-w); font-family: var(--fb); color: var(--text); border-radius: 100px; transition: border-color 0.2s ease;}
      .sticky form input:focus { border-color: var(--text); outline: none; }
      .sticky .btn-cta { width: 100%; padding: 14px; font-size: 14px; justify-content: center; background: var(--cta); color: var(--cta-txt); border: none; font-family: var(--fh); font-weight: 600; border-radius: 100px; cursor: pointer; transition: transform 0.2s ease;}
      .sticky .btn-cta:hover { transform: translateY(-2px); background: #25d48e;}
      .sticky-x { position: absolute; top: 16px; right: 18px; background: none; border: none; color: var(--muted); font-size: 1.4rem; font-family: var(--fm); line-height: 1; cursor: pointer; transition: color var(--ease); padding: 0; }
      .sticky-x:hover { color: var(--text); }
    }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .principios-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 600px) {
      .hbg { display: flex; }
      .nav-list { display: none; }
      .nav-list.open {
        display: flex; flex-direction: column; align-items: flex-start;
        position: fixed; top: 88px; left: 0; right: 0;
        background: var(--bg); border-bottom: 1px solid var(--border);
        padding: 20px var(--pad) 28px; gap: 4px; z-index: 199;
        box-shadow: 0 8px 24px rgba(0,0,0,.05);
      }
      .nav-list.open .nav-item a.active::after { display: none; }
      .nav-list.open .nav-item:last-child { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
      
      .prefooter__form { flex-direction: column; }
      .prefooter__form input, .prefooter__form .btn-cta { width: 100%; min-width: unset; max-width: 100%; justify-content: center;}

      .footer-main { flex-direction: column; align-items: flex-start; gap: 20px; }
    }
    
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

/* BOCETO MANIFIESTO v6 */
/* ============ SISTEMA SUPERNOVA · KIT COMPARTIDO (apex) ============ */
/* logo sagrado (Familjen) */
.logo,.logo b,.logo span,.logo-type,.logo-type b,.logo-type span,.footer-logo,.footer-logo b,.footer-logo span{ font-family:'Familjen Grotesk',sans-serif !important; }
/* titulares display (Space Grotesk) */
main h1, main h2, main h3, .prefooter__h2{ font-family:var(--fd) !important; font-weight:700; letter-spacing:-.025em; line-height:1.06; }

/* NAV (Inter, producción) */
.nav{ background:rgba(246,247,249,.94) !important; backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); border-bottom:2px solid var(--text) !important; }
.nav-in{ height:88px !important; }
.logo{ font-size:1.8rem !important; }
/* ===== HEADER · línea centrada + logo más grande (desktop ≥601px) · móvil intacto — WEB 2026-07-01 ===== */
@media (min-width:601px){
  .nav-in{ justify-content:center !important; gap:clamp(28px,4vw,48px) !important; }
  .logo{ font-size:2.2rem !important; display:inline-flex; align-items:center; line-height:1; transform:translate(16px,-4px); }
}
.nav-item a:not(.btn-pill){ font-family:var(--fb) !important; font-size:.95rem !important; font-weight:600 !important; letter-spacing:-.01em !important; text-transform:none !important; }
.nav-soon span{ font-family:var(--fb) !important; font-size:.95rem !important; text-transform:none !important; }
.nav-item a.active::after, .nav-item a:not(.btn-pill):hover::after{ background:var(--cta) !important; }
.btn-pill{ font-family:var(--fb) !important; font-size:.875rem !important; letter-spacing:normal !important; text-transform:none !important; border:1.5px solid var(--text) !important; border-radius:100px !important; }
.btn-pill__mark-chevron{ font-family:var(--fb) !important; }

/* TICKER */
.ann-bar{ background:var(--bg) !important; border-bottom:2px solid var(--text) !important; height:38px !important; }
.ann-block{ font-family:var(--fb) !important; font-size:.82rem !important; font-weight:500 !important; text-transform:none !important; }
.ann-sep{ background:#FF6B35 !important; opacity:1 !important; }

/* EYEBROW + ticks */
.eyebrow{ font-family:var(--fb) !important; text-transform:uppercase; font-weight:600; font-size:.72rem; letter-spacing:.14em; color:var(--muted); gap:10px; }
.eyebrow__bar{ background:var(--cta); }
.eyebrow__chevron,.brk,.btn-cta__mark-chevron{ font-family:var(--fb) !important; }

/* ENLACES editoriales: subrayado esmeralda */
.link-body{ color:var(--text) !important; text-decoration:underline !important; text-decoration-color:var(--cta) !important; text-underline-offset:3px; text-decoration-thickness:1px; }
.link-body:hover{ text-decoration-thickness:2px; }

/* BOTONES pill */
.btn-cta{ border-radius:999px !important; background:var(--cta) !important; color:var(--text) !important; font-family:var(--fb) !important; font-weight:600 !important; }
.btn-cta:hover{ transform:none !important; background:#25d48e !important; }

/* IMÁGENES a sangre */
.hero__visual, .editorial-visual{ width:100% !important; max-width:none !important; margin:0 !important; border-radius:0 !important;
  background:transparent !important; aspect-ratio:auto !important; min-height:0 !important; max-height:none !important; height:auto !important; border:none !important; font-size:0; line-height:0; }
.hero__visual img, .editorial-visual img{ width:100% !important; height:clamp(360px,58vh,620px) !important; object-fit:cover !important; display:block; border-radius:0 !important; }

/* FAQ banda compacta plegable */
.s-faq{ background:var(--bg) !important; border-top:1px solid var(--border) !important; padding:clamp(40px,6vw,72px) 0 !important; }
.faq-head{ text-align:center !important; margin-bottom:0 !important; max-width:var(--wrap); margin-left:auto; margin-right:auto; padding:0 24px; }
.faq-head h2{ font-size:clamp(1.45rem,2.6vw,1.9rem) !important; display:inline-flex !important; align-items:center; gap:16px; }
.s-faq.js-faq .faq-head h2{ cursor:pointer; }
.s-faq.js-faq .faq-head h2::after{ content:'+'; color:var(--text); font-size:1.7rem; font-weight:300; line-height:1; transition:transform .25s ease; }
.s-faq.js-faq .faq-head h2:hover::after{ color:var(--cta); }
.s-faq.js-faq.faq-open .faq-head h2::after{ transform:rotate(45deg); }
.s-faq.js-faq .faq-list{ max-height:0; overflow:hidden; opacity:0; margin-top:0 !important; transition:max-height .5s ease,opacity .3s ease,margin .3s ease; }
.s-faq.js-faq.faq-open .faq-list{ max-height:4000px; opacity:1; margin-top:clamp(24px,3vw,36px) !important; }
.faq-item{ border:none !important; border-bottom:1px solid var(--border) !important; border-radius:0 !important; background:transparent !important; }
.faq-item summary{ font-family:var(--fd) !important; font-weight:600 !important; padding:24px 4px !important; }
.faq-item summary::after{ font-family:var(--fb) !important; color:var(--cta) !important; }

/* PREFOOTER pastilla con foto a sangre (la imagen la pone cada página) */
.prefooter{ padding:0 !important; background:transparent !important; }
.prefooter__inner{ position:relative; overflow:hidden; border:none !important; border-radius:0 !important; max-width:none !important; width:100% !important; margin:0 !important; text-align:center !important;
  padding:clamp(84px,12vw,160px) 24px clamp(72px,9vw,135px) !important; background-color:#25282F !important; background-size:cover !important; background-position:center !important; }
.prefooter__h2, .prefooter__h2 em{ color:#fff !important; }
.prefooter__lead{ color:rgba(255,255,255,.9) !important; text-align:center !important; margin:0 auto 36px !important; max-width:60ch; }
.prefooter__form{ justify-content:center !important; }
.prefooter__form input{ background:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.45) !important; color:#fff !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:999px !important; }
.prefooter__form input::placeholder{ color:rgba(255,255,255,.8) !important; }
.prefooter__form .btn-cta{ background:#fff !important; color:var(--text) !important; }
.prefooter__form .btn-cta:hover{ background:var(--cta) !important; color:var(--text) !important; }
.prefooter .microcopy, .prefooter .microcopy a{ color:rgba(255,255,255,.85) !important; text-align:center !important; }

/* FOOTER (Inter; redes negras; activo esmeralda; legales coral) */
.footer{ background:var(--bg) !important; border-top:2px solid var(--text) !important; }
.footer-tagline{ color:var(--text) !important; }
.footer-tagline,.footer-nav a,.social-link,.social-username,.footer-copy p,.footer-legal a{ font-family:var(--fb) !important; text-transform:none !important; }
.social-username{ display:none !important; }
.social-link svg[fill="var(--acc2)"], .social-link [fill="var(--acc2)"]{ fill:var(--text) !important; }
.social-link svg[stroke="var(--acc2)"], .social-link [stroke="var(--acc2)"]{ stroke:var(--text) !important; }
.footer-nav a{ position:relative; }
.footer-nav a.active::after, .footer-nav a:hover::after{ content:'' !important; position:absolute !important; left:0; right:0; bottom:-1px; height:2px; background:var(--cta) !important; }
.footer-legal a{ text-decoration:none !important; position:relative; padding-bottom:4px; }
.footer-legal a.active::after, .footer-legal a:hover::after{ content:'' !important; position:absolute !important; left:0; right:0; bottom:0; height:2px; background:#FF6B35 !important; }

/* ===== ESCALA TIPOGRÁFICA FIJA (de la home) ===== */
:root{
  --fs-h1: clamp(2.6rem,6vw,4.6rem);
  --fs-h2: clamp(1.9rem,3.4vw,2.4rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.1rem,1.3vw,1.2rem);
  --fs-body: clamp(1rem,1.05vw,1.0625rem);
}
.prefooter__h2{ font-size:var(--fs-h2) !important; }
/* eyebrow: fuera el símbolo viejo, kerning elegante */
.eyebrow__mark{ display:none !important; }
.eyebrow{ letter-spacing:.3em !important; font-weight:600 !important; }
/* FAQ: titular en una línea (más ancho, tamaño H2 contenido) */
.faq-head{ max-width:1180px !important; }
.faq-head h2{ font-size:clamp(1.35rem,2.3vw,1.8rem) !important; white-space:nowrap; }
@media (max-width:900px){ .faq-head h2{ white-space:normal; } }
/* regla: fondo light = SIEMPRE blanco roto (fuera grises) */
.s-decl, .s-principios, .s-faq{ background:var(--bg) !important; }

/* ============ MANIFIESTO · específico (escala de la home) ============ */
.m-hero{ max-width:1080px !important; margin:0 auto !important; padding:clamp(64px,10vw,120px) 24px clamp(36px,5vw,56px) !important; text-align:center !important; }
.m-hero-content{ display:flex; flex-direction:column; align-items:center; max-width:1000px !important; margin:0 auto !important; }
.m-hero .eyebrow{ display:inline-flex; justify-content:center; margin:0 auto 24px !important; }
.m-h1{ font-family:var(--fd) !important; font-weight:700 !important; font-size:clamp(2.2rem,4.2vw,3.4rem) !important; line-height:1.08 !important; text-wrap:normal !important !important; letter-spacing:-.03em !important; max-width:none !important; margin:0 auto !important; color:var(--text) !important; }
.m-h1 em{ font-style:normal !important; font-weight:700 !important; color:var(--text) !important; }
.m-statement{ font-family:var(--fd) !important; font-weight:500 !important; font-size:var(--fs-lead) !important; line-height:1.35 !important; letter-spacing:-.01em !important; color:var(--muted) !important; max-width:62ch; margin:clamp(22px,3vw,34px) auto 0 !important; }
.m-intro{ font-family:var(--fb) !important; font-size:var(--fs-body) !important; color:var(--muted) !important; max-width:52ch; margin:clamp(18px,2vw,26px) auto 0 !important; }

.s-decl{ background:var(--bg) !important; padding:clamp(64px,9vw,120px) 24px !important; }
.decl-prose{ max-width:720px !important; margin:0 auto !important; padding:0 !important; }
.decl-prose p{ font-family:var(--fb) !important; font-size:var(--fs-body) !important; line-height:1.7 !important; color:var(--text) !important; margin-bottom:24px; }
.pull-quote{ margin:clamp(36px,5vw,56px) 0 !important; padding:4px 0 4px 24px !important; border-left:3px solid var(--cta) !important; background:transparent !important; }
.pull-quote p{ font-family:var(--fd) !important; font-weight:700 !important; font-size:var(--fs-h2) !important; line-height:1.25 !important; letter-spacing:-.02em !important; color:var(--text) !important; margin:0 !important; }

.s-principios{ background:var(--bg) !important; padding:clamp(64px,9vw,120px) 24px !important; }
.principios-head{ max-width:1080px !important; margin:0 auto clamp(40px,5vw,64px) !important; text-align:center; }
.principios-head h2{ font-family:var(--fd) !important; font-weight:700 !important; font-size:var(--fs-h2) !important; letter-spacing:-.025em !important; }
.principios-grid{ max-width:1080px !important; margin:0 auto !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:clamp(40px,5vw,72px) !important; }
.principio{ display:block; background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }
.principio-num{ display:none !important; }
.principio::before{ content:""; display:block; width:32px; height:3px; background:var(--cta); margin-bottom:20px; }
.principio h3{ font-family:var(--fd) !important; font-weight:700 !important; font-size:var(--fs-h3) !important; letter-spacing:-.02em !important; line-height:1.15 !important; margin-bottom:12px; color:var(--text); }
.principio p{ font-family:var(--fb) !important; font-size:var(--fs-body) !important; color:var(--muted) !important; line-height:1.65 !important; }
@media (max-width:760px){ .principios-grid{ grid-template-columns:1fr !important; } }

.prefooter__inner{ background-image:linear-gradient(rgba(37,40,47,.70),rgba(37,40,47,.70)), url(/assets/vivir-solo-por-eleccion-manifiesto.webp) !important; }
.prefooter__h2{ max-width:none !important; margin-left:auto !important; margin-right:auto !important; }

.decl-prose p[style*="14px"]{ font-size:.875rem !important; color:var(--muted) !important; }
.pull-quote p{ font-size:clamp(1.5rem,2.2vw,1.85rem) !important; }
.m-hero .eyebrow{ display:none !important; }

/* ===== móvil: todo el MAIN alineado a la izquierda ===== */
@media (max-width:600px){
  .m-hero, .m-hero *, .s-decl, .s-decl *, .editorial-visual, .editorial-visual *,
  .s-principios, .s-principios *, .s-faq, .s-faq *, .prefooter, .prefooter *,
  .prefooter .microcopy, .prefooter .microcopy a, .microcopy--light{ text-align:left !important; }
  .btn-cta, .btn-cta *, .btn-cta-outline, .btn-pill{ text-align:center !important; }
  .m-h1,.m-statement,.m-intro{ margin-left:0 !important; margin-right:0 !important; }
  .prefooter__form{ justify-content:flex-start !important; }
  .faq-item summary{ justify-content:flex-start !important; }
  .m-hero{ padding-top:62px !important; }  /* mitad del 124px del manifiesto en móvil */
  .prefooter .microcopy{ text-align:center !important; }
}
/* FAQ H unificado con la home (fuente, tamaño y peso) */
.faq-head h2{ font-size:clamp(1.45rem,2.6vw,1.9rem) !important; font-weight:700 !important; white-space:normal !important; }

/* móvil: footer nav en una línea (sin huérfano) */
@media (max-width:600px){ .footer-nav{ gap:10px !important; } .footer-nav a{ font-size:0.85rem !important; } }

/* ============ HAZLO SOLO · molde de ficha (boceto v22 · aire de apertura a la mitad) ============ */
/* Cabecera: clases vivas .m-hero/.m-h1/.m-statement. Botón: .btn-cta del apex.
   Rejilla: patrón vivo .pillars__grid — sin bordes, solo gap. Una sola línea
   en toda la página: la que separa la autoría (igual que .s-faq en el apex).
   ALTO: align-items:start. Cada ficha mide lo que mide; ninguna se estira.
   Masonry nativo (grid-template-rows:masonry) NO se usa: en jul 2026 solo Safari 26,
   Chrome/Firefox tras flag. Con 3 fichas por sección el hueco que ahorraría es mínimo;
   la pregunta se reabre en el hub de ciudad, que agrega 18. */


.hs-list{ max-width:var(--wide); margin:0 auto; padding:clamp(12px,2vw,24px) 24px clamp(56px,7vw,88px);
          display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(32px,4vw,56px) clamp(40px,5vw,72px);
          align-items:stretch; }
/* stretch = los contornos de una fila igualan. El hueco de la ficha corta queda DENTRO de su
   contorno (aire), no fuera (agujero). Nada aprieta el contenido: lo que apretujaba era el
   margin-top:auto del botón, que ya no está — el texto sigue arrancando arriba.
   Masonry de verdad (empaquetar la 3ª bajo la 1ª) pediría JS: nativo solo va en Safari 26. */

.hs-ficha{ display:flex; flex-direction:column; scroll-margin-top:110px;
           border:1px solid var(--text); border-radius:var(--r); overflow:hidden;
           background:transparent; }  /* contorno sin relleno. Línea en --text: es como delimita el apex (nav/ticker/footer).
              --border (10%) era invisible: sirve de pelo interno, no de rectángulo. --r = 14px, token del sistema. */
.hs-ficha:target .hs-ficha__title{ text-decoration:underline; text-decoration-color:var(--cta); text-decoration-thickness:3px; text-underline-offset:6px; }

.hs-ficha__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt); }
.hs-ficha__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.hs-ficha:hover .hs-ficha__media img{ transform:scale(1.04); }

.hs-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
        background:repeating-linear-gradient(135deg, var(--bg-alt) 0 10px, var(--bg-mid) 10px 20px); }
.hs-ph b{ font-family:var(--fb); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text); background:var(--bg-w); padding:7px 13px; }
.hs-ph span{ font-family:var(--fb); font-size:.68rem; color:var(--muted); }

.hs-estrella{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:7px; background:var(--cta); color:var(--text);
              font-family:var(--fb); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:8px 13px;
              border-radius:999px; }  /* separada de la esquina: el radio del contorno se la comía */

.hs-ficha__body{ padding:clamp(30px,3.2vw,38px) clamp(28px,3vw,36px) clamp(32px,3.4vw,40px); }
/* aire dentro del contorno; referencia viva: .pillar__body pre-Supernova iba a 32px 28px con borde */
.hs-ficha__title{ font-family:var(--fd) !important; font-weight:700 !important; font-size:var(--fs-h3) !important;
                  letter-spacing:-.02em !important; line-height:1.25 !important; color:var(--text); margin:0 0 12px; }
.hs-ficha__text{ font-family:var(--fb); font-size:.92rem; line-height:1.65; color:var(--muted); margin:0; }

.hs-saber{ margin:20px 0 0; }
.hs-saber__h{ font-family:var(--fb); font-size:.68rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.hs-saber ul{ margin:0; padding:0; list-style:none; }
.hs-saber li{ font-family:var(--fb); font-size:.86rem; line-height:1.5; color:var(--text); padding:9px 0 9px 18px; position:relative; border-top:1px solid var(--border); }
.hs-saber li:first-child{ border-top:none; padding-top:0; }
.hs-saber li::before{ content:''; position:absolute; left:0; top:.95em; width:7px; height:2px; background:var(--cta); }
.hs-saber li:first-child::before{ top:.5em; }

.hs-ficha .btn-cta{ margin-top:20px; padding:12px 22px !important; font-size:.88rem !important; }
.hs-ficha__foot{ margin-top:20px; }

.hs-pie{ font-family:var(--fb); margin:0; font-size:.76rem; line-height:1.5; font-style:italic; color:var(--muted); }

.hs-share{ margin-top:16px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.hs-share__l{ font-family:var(--fb); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-right:2px; }
.hs-share a, .hs-share button{ display:inline-flex; align-items:center; gap:6px; font-family:var(--fb); font-size:.76rem; font-weight:500;
    color:var(--text); text-decoration:none; background:transparent; border:1.5px solid var(--border); border-radius:999px;
    padding:7px 12px; cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.hs-share a:hover, .hs-share button:hover{ border-color:var(--text); }
.hs-share svg{ width:12px; height:12px; flex:none; }
.hs-share .ok{ border-color:var(--cta) !important; background:var(--cta); }

/* ============ TARJETA COMPUESTA · escalón 2 de la cascada §8 ============
   Va donde iría la foto, cuando no hay foto libre honesta del sitio. NO es imagen:
   es HTML+CSS del sistema, así que no pesa, no se pixela, y si cambia el verde de
   la marca cambia sola en las diez. La señal es el protagonista visual. */
.hs-tc{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
        padding:clamp(20px,2.4vw,28px); background:var(--text); overflow:hidden; z-index:1; }
.hs-tc::after{ content:''; position:absolute; right:-14%; bottom:-42%; width:72%; aspect-ratio:1;
               border-radius:50%; background:var(--cta); opacity:.13; }
.hs-tc__k{ position:relative; z-index:2; font-family:var(--fb); font-size:.62rem; font-weight:600;
           letter-spacing:.22em; text-transform:uppercase; color:var(--cta); margin:0; }
.hs-tc__s{ position:relative; z-index:2; font-family:var(--fd); font-weight:700; letter-spacing:-.025em;
           line-height:1.12; font-size:clamp(1.15rem,1.9vw,1.5rem); color:var(--bg); margin:0; text-wrap:balance; }
.hs-tc__s em{ font-style:normal; color:var(--cta); }
.hs-tc__f{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; font-family:var(--fb);
           font-size:.62rem; font-weight:500; letter-spacing:.04em; color:rgba(246,247,249,.5); margin:0; }
.hs-tc__f i{ width:16px; height:2px; background:var(--cta); flex:none; font-style:normal; }
/* la estrella, siempre por encima */
.hs-estrella{ z-index:3; }

/* ---- navegación del directorio (GROWTH 16 jul: miga + selector de secciones + enlace al hub) ---- */
/* Píldoras con el idioma vivo: .btn-pill = 1.5px solid var(--text), radio 100px.
   La activa va rellena en --cta, como .btn-cta. Sin selector de ciudad: Madrid es la
   única viva y un desplegable de una opción es promesa de función (regla de la poda, 30 jun). */

/* Aire de apertura a la MITAD del manifiesto (decisión Silvana 16 jul): el manifiesto abre con
   clamp(64px,10vw,120px) porque su titular es lo primero; aquí la miga ya ocupa parte de ese hueco.
   El nav es sticky (no fixed): ocupa su sitio, así que este padding es estético, no holgura. */
.m-hero{ padding-top:clamp(32px,5vw,60px) !important; }

/* La miga vive DENTRO de .m-hero-content, hermana del H1 y del lead. Así se alinea con ellos por
   construcción (misma caja, mismo flex) en vez de por parches, y el aire bajo el ticker vuelve a
   ser el del manifiesto, porque lo pone .m-hero y no ella. */
.hs-miga{ width:100%; margin:0 0 clamp(18px,2.2vw,26px); }
.hs-miga ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
             font-family:var(--fb); font-size:.78rem; color:var(--muted); }
.hs-miga li{ display:flex; align-items:center; gap:8px; }
.hs-miga li::after{ content:'›'; color:var(--muted); opacity:.6; }
.hs-miga li:last-child::after{ content:none; }
.hs-miga a{ color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .2s ease, color .2s ease; }
.hs-miga a:hover{ color:var(--text); border-bottom-color:var(--cta); }
.hs-miga [aria-current]{ color:var(--text); font-weight:600; }

/* Píldoras = .pillar-chip de la home del blog, extraído de producción (16 jul):
   bg --bg-w · borde 1.5px --border · radio 100px · padding 8px 15px · Inter .82rem/600
   activa: fondo --text + texto --bg-w (negro sobre blanco roto). */
.hs-secciones{ max-width:var(--wide); margin:0 auto; padding:clamp(24px,3vw,32px) 24px 0; }
.hs-secciones ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.hs-secciones a{ display:inline-block; font-family:var(--fb); font-size:.82rem; font-weight:600; letter-spacing:normal;
                 background:var(--bg-w); color:var(--text); text-decoration:none;
                 border:1.5px solid var(--border); border-radius:100px; padding:8px 15px;
                 transition:border-color .2s ease, background .2s ease, color .2s ease; }
.hs-secciones a:hover{ border-color:var(--text); }
.hs-secciones [aria-current]{ background:var(--text); color:var(--bg-w); border-color:var(--text); cursor:default; }
.hs-secciones [aria-current]:hover{ border-color:var(--text); }

.hs-hub{ max-width:var(--wide); margin:0 auto; padding:0 24px clamp(40px,5vw,56px); text-align:center; }
/* Botón del hub: en reposo, línea + texto; al pasar, se rellena en oscuro unente con texto blanco.
   Es el mismo par de estados que la píldora del blog (reposo con borde / activa --text sobre --bg-w).
   El chevron y la barra van en currentColor, así que viran solos. */
.hs-hub .btn-cta{ background:transparent !important; color:var(--text) !important;
                  border:1.5px solid var(--text); transition:background .2s ease, color .2s ease; }
.hs-hub .btn-cta:hover{ background:var(--text) !important; color:var(--bg-w) !important; }

/* <=600px · el apex alinea TODO el main a la izquierda (regla viva de arriba), pero solo a los
   elementos que nombra. La miga no estaba en esa lista y se quedaba centrada sobre un titular
   a la izquierda. Se suma aquí. */
@media (max-width:600px){
  /* además, .m-hero-content es flex con align-items:center: a <=600 el apex pone el texto a la
     izquierda pero los hijos siguen encogidos a su contenido y centrados. margin-left:0 no gana
     a align-items:center — hay que atacar el flex. */
  .m-hero-content{ align-items:flex-start !important; }
  .m-h1, .m-statement, .m-intro, .hs-miga{ width:100%; }

  .hs-miga ol{ font-size:.74rem; gap:6px; justify-content:flex-start; }
  .hs-miga li{ gap:6px; }
  .hs-secciones ul{ justify-content:flex-start; }
  .hs-hub{ text-align:left; }
  .hs-by p{ text-align:left; margin-left:0; }
}

/* ============ VIUDAS (§4) ============
   El §4 pide "mínimo dos palabras en la última línea" y propone &nbsp; entre las dos
   últimas. text-wrap:pretty cumple la MISMA regla por CSS y mejor: se recalcula a
   cualquier ancho (el &nbsp; se ata a uno solo y en móvil puede colar otra viuda o
   desbordar) y no hay que tocar cada texto a mano en cada ciudad.
   Medido en el hub con las 18 fichas: 11 viudas → 0.
   Método distinto al que dice el §4; regla, la misma. Enrutado a GROWTH.
   En navegadores sin soporte no hace nada: vuelve la viuda, no se rompe nada. */
.m-h1, .m-statement,
.hs-intro p, .hs-card__t, .hs-card__l, .hs-grupo__l, .hs-puerta__l,
.hs-tc__s, .hs-ficha__title, .hs-pie, .hs-by p, .prefooter__lead{
  text-wrap: pretty;
}

/* Segundo párrafo del índice: la verificación y la línea de captura de EDITORIAL, juntas en UNO
   solo y a menos tamaño que el lead (Silvana, 17 jul). El lead lleva el argumento; esto es la
   letra pequeña honesta. La captura no promete geografía: engancha al form del prefooter. */
.hs-nota{ font-family:var(--fb); font-size:var(--fs-body); line-height:1.6; color:var(--muted);
          max-width:62ch; margin:1.1em auto 0; text-align:center; text-wrap:pretty; }
.hs-nota a{ color:inherit; }
@media (max-width:600px){ .hs-nota{ text-align:left; margin-left:0; } }
.hs-captura a{ color:inherit; }

/* ============ HUB E ÍNDICE ============
   El hub INDEXA sus fichas (foto + título + una línea → ancla de la ficha en su sección).
   No las repite: repetirlas duplicaría contenido dentro del dominio y el hub canibalizaría
   a sus propias secciones (decisión GROWTH 17 jul). */

.hs-intro{ max-width:var(--wide); margin:0 auto; padding:clamp(36px,4.5vw,56px) 24px clamp(40px,5vw,60px); }
/* el padding-top no es opcional: .m-hero trae border-bottom del apex, y sin aire el párrafo
   se pega a esa línea. Iba a 0 y el hero acababa en el mismo píxel en que empezaba el texto. */
.hs-intro p{ font-family:var(--fb); font-size:var(--fs-body); line-height:1.7; color:var(--muted);
             max-width:62ch; margin:0 auto; text-align:center; }

/* rótulo de temática dentro del hub */
.hs-grupo{ max-width:var(--wide); margin:0 auto; padding:clamp(36px,4.5vw,56px) 24px 0; }
.hs-grupo__h{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
              padding-bottom:16px; border-bottom:1px solid var(--rule); }
.hs-grupo__t{ font-family:var(--fd) !important; font-weight:700 !important; font-size:var(--fs-h3) !important;
              letter-spacing:-.02em !important; color:var(--text); margin:0; }
.hs-grupo__l{ font-family:var(--fb); font-size:.86rem; line-height:1.5; color:var(--muted); margin:0; }
.hs-grupo__v{ font-family:var(--fb); font-size:.8rem; font-weight:600; color:var(--text); text-decoration:none;
              border-bottom:1.5px solid var(--cta); padding-bottom:1px; white-space:nowrap; }
.hs-grupo__v:hover{ border-bottom-width:3px; }

/* rejilla de tarjetas-enlace */
.hs-mini{ max-width:var(--wide); margin:0 auto; padding:clamp(20px,2.4vw,28px) 24px 0;
          display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); align-items:start; }
.hs-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--text);
          border:1px solid var(--text); border-radius:var(--r); overflow:hidden; transition:transform .25s ease; }
.hs-card:hover{ transform:translateY(-3px); }
.hs-card__m{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt); }
.hs-card__m img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.hs-card:hover .hs-card__m img{ transform:scale(1.04); }
.hs-card__b{ padding:clamp(18px,2vw,22px); }
.hs-card__t{ font-family:var(--fd) !important; font-weight:700 !important; font-size:1rem !important;
             letter-spacing:-.015em !important; line-height:1.25 !important; margin:0 0 8px; }
.hs-card__l{ font-family:var(--fb); font-size:.85rem; line-height:1.55; color:var(--muted); margin:0; }
.hs-card__e{ position:absolute; top:10px; left:10px; z-index:3; display:inline-flex; align-items:center; gap:5px;
             background:var(--cta); color:var(--text); font-family:var(--fb); font-size:.58rem; font-weight:700;
             letter-spacing:.12em; text-transform:uppercase; padding:6px 10px; border-radius:999px; }
/* la tarjeta compuesta, en versión mini */
.hs-card__m .hs-tc{ padding:16px; }
.hs-card__m .hs-tc__s{ font-size:.92rem !important; }
.hs-card__m .hs-tc__k, .hs-card__m .hs-tc__f{ font-size:.55rem; }

/* índice: 6 puertas */
/* padding-top propio: el aire lo ponía .hs-intro, y EDITORIAL fusiona intro y lead, así que
   ese bloque ya no existe. Sin esto, las puertas se pegan al border-bottom de .m-hero. */
.hs-puertas{ max-width:var(--wide); margin:0 auto; padding:clamp(36px,4.5vw,56px) 24px clamp(56px,7vw,88px);
             display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); }
/* Cada puerta lleva el visual de su estrella (foto o tarjeta), derivado por el generador.
   El índice era la página menos visual del directorio y es la que se pisa desde el nav. */
.hs-puerta{ display:flex; flex-direction:column; text-decoration:none; color:var(--text);
            border:1px solid var(--text); border-radius:var(--r); overflow:hidden;
            transition:transform .25s ease; }
.hs-puerta:hover{ transform:translateY(-3px); }
.hs-puerta__m{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt); }
.hs-puerta__m img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.hs-puerta:hover .hs-puerta__m img{ transform:scale(1.04); }
.hs-puerta__m .hs-tc{ padding:16px; }
.hs-puerta__m .hs-tc__s{ font-size:.92rem !important; }
.hs-puerta__m .hs-tc__k, .hs-puerta__m .hs-tc__f{ font-size:.55rem; }
.hs-puerta__b{ display:flex; flex-direction:column; gap:10px; padding:clamp(22px,2.6vw,28px); }
.hs-puerta__b::before{ content:''; width:28px; height:3px; background:var(--cta); }
.hs-puerta__t{ font-family:var(--fd) !important; font-weight:700 !important; font-size:var(--fs-h3) !important;
               letter-spacing:-.02em !important; margin:2px 0 0; }
.hs-puerta__l{ font-family:var(--fb); font-size:.88rem; line-height:1.55; color:var(--muted); margin:0; }
.hs-puerta__n{ font-family:var(--fb); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
               color:var(--muted); margin:4px 0 0; }

@media (max-width:900px){ .hs-mini, .hs-puertas{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .hs-mini, .hs-puertas{ grid-template-columns:1fr; }
  .hs-intro p{ text-align:left; margin-left:0; }
  .hs-grupo__h{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Autoría (Sistema v1 §3) — la ÚNICA línea de la página, como .s-faq en el apex */
.hs-by{ max-width:var(--wide); margin:0 auto; padding:0 24px clamp(56px,7vw,88px); }
.hs-by p{ font-family:var(--fb); font-size:.88rem; line-height:1.6; color:var(--muted); max-width:62ch; margin:0 auto; text-align:center;
          padding-top:clamp(28px,4vw,40px); border-top:1px solid var(--rule); }

@media (max-width:900px){
  .hs-list{ grid-template-columns:1fr; gap:32px; }
  /* sin línea separadora: el contorno de cada ficha ya la delimita */
}
/* coherencia con la regla viva "móvil: todo el MAIN a la izquierda" (<=600px) */