/* ═══════════════════════════════════════════════════════════════════
   adrianheredia.es · SOBRE MÍ (BRIEF §5.4)
   Portado 1:1 de maquetas/sobre-mi.html (v6, cerrada). Solo lo propio:
   el sistema común está en base.css.

   Nota: esta maqueta define h2 y .kicker distintos de los de El Cuaderno
   (h2 a 3.6vw y sin margen inferior), así que van aquí y no en base.css.
   Puntos de corte propios: 900, 520 y 380 (§4.4).
   ═══════════════════════════════════════════════════════════════════ */

  /* Las orejas son más altas en el héroe de esta página */
  .hero .ears{height:min(80vh,700px)}

  /* Firma: el muro del nombre al entrar (no bloquea; < 1 s; respeta reduced-motion) */
  .wall-in{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}

  .kicker{font-size:13px;font-weight:700;color:var(--rufus);margin:0}
  h2{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.6vw,44px);line-height:1;letter-spacing:-.01em;margin:0}

  /* ── Héroe: el retrato delante y tu nombre en contorno corriendo por detrás al bajar (como la lata de Red Bull) ── */
  /* ── Apertura (patrón Red Bull A): tu retrato en grande con el nombre corriendo por detrás.
        Al bajar, el retrato pasa de grande a pequeño y entonces aparece el resto. ── */
  .hero{position:relative;text-align:center}
  .hero-pin{position:relative;padding:100px 0 28px;overflow:hidden}
  .stage{position:relative;display:flex;justify-content:center;padding:18px 0}
  .hero-txt{position:relative;z-index:1}
  .hero.zoom{height:calc(100vh + var(--D,0px))}
  .hero.zoom .hero-pin{position:sticky;top:0;height:100vh;padding:0}
  .hero.zoom .stage{position:absolute;inset:0;padding:0;display:block}
  .hero.zoom .marquee{top:var(--mt,46%)}
  .hero.zoom .portrait{position:absolute;left:50%;top:var(--pt);width:var(--bw);transform-origin:50% 0;transform:translateX(-50%) scale(var(--s,1));will-change:transform}
  .hero.zoom .hero-txt{position:absolute;left:0;right:0;top:var(--tt);opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 18px))}
  .marquee{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);overflow:hidden;pointer-events:none;z-index:0}
  .mq{display:flex;width:max-content;will-change:transform}
  .mq span{font-family:var(--f-titular);font-weight:400;text-transform:uppercase;white-space:nowrap;font-size:clamp(76px,12.5vw,196px);line-height:1;letter-spacing:-.01em;
    padding-right:.4em;color:transparent;-webkit-text-stroke:1.6px rgba(30,25,19,.5)}
  .portrait{position:relative;z-index:1;width:min(310px,62vw);aspect-ratio:4/5}
  .portrait .frame{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:#141210;box-shadow:0 34px 60px -30px rgba(30,25,19,.6)}
  .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
  .sun{position:absolute;left:50%;top:27%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible;z-index:2;pointer-events:none}
  .sun path{fill:none;stroke:var(--naranja);stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .hero .kicker{margin-top:26px}
  .claim{font-size:clamp(17px,1.6vw,20px);line-height:1.55;font-weight:500;margin:10px auto 0;max-width:44ch;padding:0 var(--pad-x)}

  /* ── Mi camino (v5 · currículum): cuatro capítulos a la vista, en orden, unidos por el cauce.
        Se lee de arriba abajo como un CV: hito → título → texto → datos, y la foto al lado. ── */
  .rio{padding:12px var(--pad-x) 96px}
  .camino{position:relative;max-width:1100px;margin:0 auto;--rail:64px;--ph:300px}

  /* El cauce: recto, a la izquierda, une los hitos. El agua lo llena al bajar; lo que queda por recorrer, en discontinua */
  .c-rail{position:absolute;left:calc(var(--rail) / 2);top:var(--r0,0px);height:var(--rh,0px);width:2px;margin-left:-1px;background:#DCCDB0;border-radius:2px}
  .c-rail i{position:absolute;left:-.5px;top:0;width:3px;height:var(--fill,0px);background:var(--agua);border-radius:2px}
  .c-rail b{position:absolute;left:50%;top:var(--fill,0px);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--agua);border:2px solid var(--base);opacity:0;transition:opacity .3s ease}
  .c-rail b.on{opacity:1}
  .c-tail{position:absolute;left:calc(var(--rail) / 2);top:var(--t0,0px);height:var(--th,0px);width:2px;margin-left:-1px;
    background:repeating-linear-gradient(to bottom,var(--agua) 0 2px,transparent 2px 10px);clip-path:inset(0 0 calc((1 - var(--t,0)) * 100%) 0)}

  .cap{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--ph);column-gap:0;align-items:start}
  .cap + .cap{margin-top:56px}
  .cap-body{grid-column:2;grid-row:1;padding-right:48px}
  .cap-media{grid-column:3;grid-row:1}

  .head{position:relative}
  .st h2,.cap h2{margin:0 0 14px}
  .cap-body > p{font-size:17px;line-height:1.7;margin:0;max-width:60ch}
  .cap-body > p.lead{font-size:clamp(18px,1.6vw,20px);line-height:1.6}

  .mk{position:absolute;left:calc(var(--rail) / -2 - 22px);top:50%;margin-top:-22px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--f-titular);font-size:15px;color:var(--tierra);background:var(--base);border:1.5px solid #CDBB9A;
    transition:background .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease}
  .mk.on{background:var(--naranja);border-color:var(--naranja);color:var(--tinta);box-shadow:0 0 0 6px rgba(242,99,34,.12),0 0 24px rgba(242,99,34,.35)}
  .mk::before,.mk::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--agua);opacity:0;pointer-events:none}
  .mk.on::before{animation:ring 1.4s ease-out .05s 1 both}
  .mk.on::after{animation:ring 1.4s ease-out .35s 1 both}
  @keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(2.6);opacity:0}}

  /* Datos: todos a la vista, como en un CV */
  .facts{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
  .fact{background:#FFFDF8;border:1px solid var(--papel);border-radius:10px;padding:12px 14px 13px;box-shadow:0 14px 22px -18px rgba(30,25,19,.45)}
  .fact small{display:block;font-size:11.5px;font-weight:700;color:var(--rufus);margin-bottom:3px}
  .fact b{display:block;font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:14.5px;line-height:1.2;color:var(--tinta)}

  /* Foto de cada capítulo */
  .cap{align-items:stretch}
  .cap-media{display:flex}
  .foto{position:relative;margin:0;width:100%;min-height:250px;border-radius:12px;overflow:hidden;background:#141210;box-shadow:0 30px 50px -30px rgba(30,25,19,.55)}
  .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .statement{margin:26px 0 0;padding:4px 0 4px 24px;border-left:3px solid var(--naranja);max-width:36em;color:var(--tinta);font-family:var(--f-titulo);font-weight:800;font-size:clamp(22px,2.3vw,29px);line-height:1.25;letter-spacing:-.005em}


  /* Cierre: el quinto hito es lo que queda por recorrer */
  .cap--wide .cap-body{grid-column:2 / 4;padding-right:0}
  .cap-body > div > p{font-size:17px;line-height:1.7;margin:0;max-width:60ch}
  .cap-body > div > p.lead{font-size:clamp(18px,1.6vw,20px);line-height:1.6}
  .cap--end{margin-top:72px!important}
  .cap--end .cap-body{grid-column:2 / 4;padding-right:0}
  .cap--end h2{margin-bottom:22px}
  .mk-open{position:absolute;left:calc(var(--rail) / -2);top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed var(--agua);background:var(--base);z-index:2;
    transition:border-color .5s ease,box-shadow .5s ease,background .5s ease}
  .mk-open.on{border:2px solid var(--naranja);background:radial-gradient(circle,var(--naranja) 0 4px,var(--base) 5px);box-shadow:0 0 0 8px rgba(242,99,34,.12),0 0 22px rgba(242,99,34,.4)}
  .mk-open::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--agua);opacity:0}
  .mk-open.on::after{animation:ring 1.6s ease-out 1 both}
  .exit h3 .el{color:var(--naranja)}
  .cycle{color:var(--rufus);font-weight:700;display:inline-block;transition:opacity .25s ease,transform .25s ease}
  .exits{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;text-align:left}
  .exit{border-radius:18px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
  .exit h3{font-family:var(--f-titulo);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,26px);line-height:1.05;margin:0}
  .exit p{margin:0;font-size:16px;line-height:1.55}
  .exit--main p{min-height:3.1em}
  .exit .btn{margin-top:auto}
  .exit--main{background:rgba(243,234,218,.9);border:1px solid var(--papel)}
  .exit--alt{background:rgba(255,255,255,.7);border:1px solid var(--papel)}
  .exit--alt p{color:var(--tierra)}


  @media (max-width:900px){
    .hero-pin{padding-top:88px}
    .mq span{font-size:22vw;-webkit-text-stroke-width:1.2px}
    .portrait{width:min(280px,66vw)}
    .rio{padding:8px 16px 72px}
    .camino{--rail:46px}
    .cap{grid-template-columns:var(--rail) minmax(0,1fr)}
    .cap + .cap{margin-top:52px}
    .cap-body{padding-right:0}
    .cap-media{grid-column:2;grid-row:2;margin-top:20px}
    .cap-media .foto{aspect-ratio:4/3;min-height:0}
    .statement{font-size:21px;padding-left:18px}
    .cap--wide .cap-body{grid-column:2}
    .mk{width:38px;height:38px;margin-top:-19px;left:calc(var(--rail) / -2 - 19px);font-size:13px}
    .facts{grid-template-columns:1fr 1fr;gap:8px}
    .fact{padding:10px 12px 11px}
    .fact b{font-size:13px}
    .cap--end{margin-top:60px!important}
    .cap--end .cap-body{grid-column:2}
    .exits{grid-template-columns:1fr}
  }
  @media (max-width:380px){ .facts{grid-template-columns:1fr} }