/* ===================================================================
   Yo soy Elmer Jiménez, sistema de diseño
   Navy / azul pista / ámbar. Bebas Neue (titulares) + Inter (cuerpo).
=================================================================== */

:root{
  --navy:#0A1B33;
  --pista:#1E4C8C;
  --electric:#3577F0;
  --amber:#E8A33D;
  --amber-hover:#f3b658;
  --amber-muted:rgba(232,163,61,.28);
  --bg-light:#F3F6FB;
  --text:#0B1120;
  --text-secondary:#4a5670;
  --panel:#ffffff;
  --line:rgba(10,27,51,.12);
  --ease:cubic-bezier(.22,.9,.32,1);
  --ease-soft:cubic-bezier(.4,.0,.2,1);
  --tshadow:0 1px 2px rgba(5,8,15,.95),0 3px 12px rgba(5,8,15,.78),0 10px 44px rgba(5,8,15,.8);
  --font-display:'Bebas Neue',Impact,sans-serif;
  --font-body:'Inter',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg-light);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* height:auto es obligatorio ahora que los <img> declaran width/height: sin él
   el ancho se ajusta al contenedor pero el alto se queda en el valor del
   atributo y la imagen sale estirada. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:1000;
  background:var(--navy);color:#fff;padding:.7rem 1.2rem;border-radius:8px;
  text-decoration:none;font-weight:700;transition:top .25s var(--ease)
}
.skip-link:focus{top:12px}

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

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.02;
  margin:0;
}

.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
}

/* Each themed section is full-bleed (background spans the whole viewport);
   .section-inner is the ONLY thing capped to a readable width. Painting the
   background on the capped box instead of the full-width <section> is what
   made every section look like it "shrank" after the hero. */
.section-inner{
  position:relative;
  padding:clamp(4rem,9vw,7rem) 6%;
  max-width:1280px;
  margin:0 auto;
}

.section-head{max-width:62ch;margin:0 0 2.9rem}
.section-head h2{font-size:clamp(2.4rem,6vw,3.6rem);color:var(--navy);letter-spacing:.015em}
.section-head p{color:var(--text-secondary);font-size:1.05rem;margin-top:.85rem;max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:.65rem}
.eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;background:var(--amber);flex:none;
}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.7rem;border-radius:10px;
  font-weight:700;font-size:.98rem;
  text-decoration:none;border:none;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
  text-shadow:none;
}
.btn:hover{transform:translateY(-2px)}
.btn-amber{
  background:linear-gradient(135deg,#F0B457 0%,var(--amber) 55%,#d8912c 100%);
  color:var(--navy);box-shadow:0 6px 20px rgba(232,163,61,.28);
}
.btn-amber:hover{box-shadow:0 14px 34px rgba(232,163,61,.42)}
.btn-amber:active{transform:translateY(0)}
.btn.is-sending{opacity:.7;pointer-events:none}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-outline:hover{background:rgba(255,255,255,.12)}

@media (pointer:coarse){.btn{min-height:44px}}

/* ================= NAV ================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 5%;
  background:transparent;
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),box-shadow .35s var(--ease),padding .3s var(--ease);
}
.nav.scrolled{
  background:rgba(10,27,51,.78);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 10px 34px rgba(0,0,0,.24);
  border-bottom:1px solid rgba(255,255,255,.09);
  padding:.55rem 5%;
}
.nav-brand{
  font-family:var(--font-display);
  font-size:1.5rem;letter-spacing:.02em;
  color:#fff;text-decoration:none;white-space:nowrap;
}
.nav-links{
  display:flex;align-items:center;gap:1.9rem;
  list-style:none;margin:0;padding:0;
}
.nav-links a{
  color:rgba(255,255,255,.88);text-decoration:none;font-weight:600;font-size:.94rem;
  position:relative;padding-bottom:4px;white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--amber);transition:width .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}
.nav-right{display:flex;align-items:center;gap:.9rem}

/* ===== Redes sociales en la esquina superior derecha ===== */
.nav-social-row{gap:.5rem}
.nav-social-row .social-btn{--size:34px}
.nav-social-row .social-btn svg{width:16px;height:16px}
.nav-social-row .social-btn.instagram{--size:38px}
.nav-social-row .social-btn.instagram svg{width:18px;height:18px}

/* Below the nav-links breakpoint there isn't honest room for brand + 4 circles
   + burger, and the hero right underneath already repeats the same row. */
@media (max-width:760px){.nav-right .nav-social-row{display:none}}

/* Blinking "Síguenos en Instagram" callout on the nav's Instagram icon: a
   soft pulsing ring on the button plus a label that fades in and out, so the
   eye is drawn there without ever fully hiding the icon underneath. */
.ig-pulse{animation:igRingPulse 2.2s ease-out infinite}
.ig-pulse:hover,.ig-pulse:focus-visible{animation-play-state:paused;box-shadow:none}
.ig-pulse:hover .ig-follow-label,.ig-pulse:focus-visible .ig-follow-label{animation-play-state:paused;opacity:1}
.ig-pulse .ig-follow-label{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  white-space:nowrap;padding:.32rem .65rem;border-radius:999px;
  background:var(--navy);color:#fff;border:1px solid rgba(232,163,61,.5);
  font-size:.7rem;font-weight:700;letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(10,27,51,.28);
  animation:igLabelBlink 2.2s ease-in-out infinite;
}
.ig-pulse .ig-follow-label::before{
  content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--navy);
}
@keyframes igRingPulse{
  0%{box-shadow:0 0 0 0 rgba(232,163,61,.55)}
  70%{box-shadow:0 0 0 12px rgba(232,163,61,0)}
  100%{box-shadow:0 0 0 0 rgba(232,163,61,0)}
}
@keyframes igLabelBlink{
  0%,55%,100%{opacity:1}
  78%{opacity:.35}
}

.nav-burger{
  display:none;background:none;border:none;color:#fff;cursor:pointer;padding:.4rem;
}
.nav-burger svg{width:26px;height:26px}

/* The brand is the full "Yo soy Elmer Jiménez" and the follow-us label takes
   real width too, so the links collapse into the burger early: below 1200px
   there is no honest room for brand + 6 links + label + button. */
@media (max-width:1200px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(78vw,340px);height:100vh;
    background:var(--navy);flex-direction:column;justify-content:center;align-items:flex-start;
    padding:2rem 2.2rem;gap:1.6rem;
    transform:translateX(100%);transition:transform .4s var(--ease);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:1.15rem}
  .nav-burger{display:inline-flex}
}

/* ================= SOCIAL BUTTONS ================= */
.social-row{display:flex;align-items:center;gap:.7rem}
.social-btn{
  --size:40px;
  width:var(--size);height:var(--size);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;position:relative;flex:none;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  color:#fff;transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.social-btn svg{width:18px;height:18px;fill:currentColor}
/* outline marks (Instagram) need stroke, not fill */
.social-btn svg.stroke-icon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.social-btn svg.stroke-icon .dot{fill:currentColor;stroke:none}
.social-btn:hover{transform:translateY(-3px) scale(1.05)}

.social-btn.instagram{
  --size:46px;
  background:var(--amber);border-color:var(--amber);color:var(--navy);
}
.social-btn.instagram svg{width:21px;height:21px}
.social-btn.instagram:hover{background:var(--amber-hover);box-shadow:0 8px 22px rgba(232,163,61,.4)}

.social-btn.pending{
  border-style:dashed;opacity:.45;cursor:not-allowed;
}
.social-btn.pending:hover{transform:none;opacity:.7}
/* The label is a tooltip, not a permanent caption: two of them side by side
   collided under 40px buttons and read as a layout accident. */
.social-btn.pending .pending-tag{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;
  white-space:nowrap;padding:.25rem .5rem;border-radius:6px;
  background:rgba(10,27,51,.92);color:#fff;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.social-btn.pending:hover .pending-tag,
.social-btn.pending:focus-visible .pending-tag{opacity:1;transform:translateX(-50%) translateY(0)}

.on-light .social-btn{background:rgba(10,27,51,.06);border-color:rgba(10,27,51,.18);color:var(--navy)}
.on-light .social-btn.instagram{background:var(--amber);border-color:var(--amber);color:var(--navy)}

/* ================= HERO (video real en loop continuo) ================= */
.read-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:900;
  background:rgba(10,27,51,.18);pointer-events:none;
}
.read-progress-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--amber),#f6c877);
  box-shadow:0 0 14px rgba(232,163,61,.75);
}

.hero{position:relative}
.hero-stage{
  position:relative;height:100svh;min-height:620px;max-height:1000px;overflow:hidden;
  background:var(--navy);
}
.hero-media{position:absolute;inset:0;z-index:1}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s var(--ease);
  will-change:transform;transform:translateZ(0) scale(1.02);
}
.hero-stage.video-ready .hero-video{opacity:1}
.hero-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* the poster is the loop's own first frame, so the handover is invisible */
.hero-stage.video-ready .hero-poster{opacity:0;transition:opacity 1s var(--ease) .15s}

/* fine film grain: adds depth to flat compressed video, a premium-print feel */
.hero-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Legibility only where the text sits (left column, bottom-weighted). The
   right two-thirds of the frame stays clear so the real footage/photo reads,
   which is the whole point of using real venues instead of stock texture. */
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    /* nav band: the sky in the footage is bright, the nav text is white */
    linear-gradient(to bottom,rgba(6,10,20,.58) 0%,rgba(6,10,20,.22) 12%,rgba(6,10,20,0) 24%),
    linear-gradient(105deg,rgba(6,10,20,.82) 0%,rgba(6,10,20,.58) 24%,rgba(6,10,20,.14) 46%,rgba(6,10,20,0) 62%),
    linear-gradient(to top,rgba(6,10,20,.68) 0%,rgba(6,10,20,.06) 38%,rgba(6,10,20,0) 60%);
}

/* <picture> is only a wrapper for the WebP/PNG swap; it must not create a
   line box of its own, since the image inside is absolutely positioned. */
.hero-stage picture{display:contents}

/* Flush to the right edge of the page: no gap, ever. The parallax below only
   moves it vertically for that reason. */
/* La foto se dimensiona con el ALTO de la pantalla, así que en ventanas
   angostas y altas crecía hasta comerse la columna de texto. max-width la
   ata también al ancho, y object-position la mantiene pegada abajo cuando
   ese tope la achica. */
.hero-subject{
  position:absolute;bottom:0;right:0;z-index:3;
  height:92%;max-height:860px;width:auto;max-width:46%;
  object-fit:contain;object-position:right bottom;
  filter:drop-shadow(-30px 30px 60px rgba(0,0,0,.5));
  transition:transform .3s var(--ease-soft);
  will-change:transform;
}

.hero-content{
  position:relative;z-index:5;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 6%;color:#fff;
  /* nunca más ancho que el espacio que la foto deja libre */
  max-width:min(700px, 54%);
}
.hero-band{position:relative;text-shadow:var(--tshadow)}
.hero-band .btn,.hero-band .social-btn{text-shadow:none}
.hero-eyebrow{
  margin:0 0 1rem;font-size:.86rem;display:inline-flex;align-items:center;gap:.65rem;
}
.hero-eyebrow::before{
  content:"";width:34px;height:2px;background:var(--amber);flex:none;border-radius:2px;
}
.hero-title{
  font-size:clamp(2.7rem,7.6vw,5.4rem);
  margin:0;color:#fff;
}
.hero-title .w{display:inline-block;vertical-align:top}
.hero-title .w .c{display:inline-block}
html.js .hero-title .w .c{
  opacity:0;
  animation:charIn .8s var(--ease) forwards;
  animation-delay:calc(.28s + var(--th,0) * .6s);
}
@keyframes charIn{
  from{opacity:0;transform:translateY(22px) scale(.74)}
  to{opacity:1;transform:none}
}
.hero-subtitle{
  font-size:clamp(1.02rem,1.7vw,1.28rem);
  color:rgba(255,255,255,.92);max-width:46ch;margin:1.2rem 0 1.9rem;
}
.hero-cta-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.hero-cta-row .social-row{gap:.65rem}

.hero-stats{
  display:flex;flex-wrap:wrap;gap:2.2rem;margin:2rem 0 0;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.22);
}
.hero-stat b{
  display:block;font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.4rem);
  color:var(--amber);line-height:1;
}
.hero-stat span{display:block;font-size:.76rem;color:rgba(255,255,255,.72);margin-top:.35rem;max-width:15ch}

/* one entrance system for every hero element, staggered by its own --d */
html.js .ha{opacity:0;animation:heroIn 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes heroIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

.hero-scrollcue{
  position:absolute;left:6%;bottom:2.4rem;z-index:5;color:rgba(255,255,255,.78);
  display:flex;align-items:center;gap:.6rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;
}
.hero-scrollcue svg{width:14px;height:20px;animation:cuebob 1.8s ease-in-out infinite;animation-delay:-.6s}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Debajo de 1024px no hay ancho honesto para texto y foto lado a lado: la
   columna se estrangula, las cifras se parten en dos filas y chocan con el
   indicador de scroll. Ahí el texto pasa arriba y Elmer sostiene la esquina
   inferior derecha. */
@media (max-width:1024px){
  .hero-stage{min-height:640px}
  .hero-subject{height:44%;opacity:.95;filter:drop-shadow(-14px 16px 34px rgba(0,0,0,.55))}
  .hero-content{
    max-width:100%;justify-content:flex-start;
    padding-top:5.6rem;padding-bottom:0;
  }
  .hero-scrim{
    background:
      linear-gradient(to bottom,rgba(6,10,20,.72) 0%,rgba(6,10,20,.5) 30%,rgba(6,10,20,.34) 55%,rgba(6,10,20,.62) 100%),
      linear-gradient(100deg,rgba(6,10,20,.5) 0%,rgba(6,10,20,.1) 55%,rgba(6,10,20,0) 80%);
  }
  .hero-eyebrow{font-size:.76rem}
  .hero-title{font-size:clamp(2.1rem,9vw,3rem)}
  .hero-subtitle{font-size:.97rem;margin:.9rem 0 1.4rem;max-width:34ch}
  .hero-stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;
    margin-top:1.3rem;padding-top:1.1rem;
  }
  .hero-stat b{font-size:1.45rem}
  .hero-stat span{font-size:.64rem;line-height:1.25;max-width:none}
  .hero-scrollcue{display:none}
}
/* Pantalla apilada pero apaisada (tablet horizontal, ventana baja y ancha):
   ahí la foto queda angosta y alta, el contenido alcanza a llegarle por el
   costado y la tercera cifra se le monta encima. Se baja la foto y se limita
   el ancho de las cifras para que ninguna de las dos invada a la otra. */
@media (max-width:1024px) and (min-aspect-ratio:1/1){
  .hero-subject{height:38%}
  .hero-stats{max-width:58%}
  .hero-content{padding-top:4.6rem}
}

@media (max-width:400px){
  .hero-subject{height:38%}
  .hero-subtitle{font-size:.92rem}
}
@media (max-height:620px){.hero-scrollcue{display:none}}

/* Reduced motion: no video at all, the poster carries the hero, everything settled. */
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero-poster{opacity:1 !important}
  .ha{opacity:1 !important;animation:none !important;transform:none !important}
  .hero-title .w .c{opacity:1 !important;animation:none !important;transform:none !important}
}

/* ================= QUIEN ES (perfil, azul claro de marca) =================
   Iba en azul oscuro terminando en #0A1B33, exactamente el mismo color con
   el que abre Trayectoria, así que las dos secciones se leían como un solo
   bloque. En claro se distinguen sin discusión, se recupera la alternancia
   claro/oscuro de toda la página, y el texto en primera persona (cinco
   párrafos, el bloque más largo del sitio) se lee mejor en oscuro sobre claro. */
.quien-es{
  position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 78% 6%,rgba(53,119,240,.13) 0%,rgba(53,119,240,0) 60%),
    linear-gradient(168deg,#EDF3FC 0%,#DFE9F7 55%,#E9F0FA 100%);
  color:var(--text);
}
.quien-es .section-head h2,.quien-es h2.section-head{color:var(--navy)}
/* el ámbar puro no alcanza contraste sobre fondo claro */
.quien-es .eyebrow{color:#8a5a12}

.quien-grid{
  display:grid;grid-template-columns:1.1fr 1.4fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.quien-aside{position:sticky;top:110px}
.quien-head{margin:0 0 1.4rem}
.quien-photo{
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 56px rgba(10,27,51,.18);
  border:1px solid rgba(10,27,51,.1);
}
.quien-photo img{transition:transform .8s var(--ease)}
.quien-photo:hover img{transform:scale(1.04)}
.formacion{
  margin:1.6rem 0 0;padding:1.5rem 1.7rem;border-radius:14px;
  background:rgba(255,255,255,.72);border:1px solid rgba(10,27,51,.1);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.formacion h3{
  font-family:var(--font-body);font-weight:800;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pista);margin:0 0 .9rem;
}
.formacion ul{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.formacion li{
  padding-left:1.4rem;position:relative;font-size:.96rem;color:var(--text);
}
.formacion li::before{
  content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;
  background:var(--amber);transform:rotate(45deg);
}
.bio-lead{font-size:1.14rem;color:var(--text);margin:0 0 1.6rem;max-width:60ch}
.quote-block{
  position:relative;margin:2.2rem 0 0;padding:1.9rem 2.1rem;
  border-left:3px solid var(--amber);border-radius:0 16px 16px 0;
  background:rgba(255,255,255,.78);
  border-top:1px solid rgba(10,27,51,.08);
  border-right:1px solid rgba(10,27,51,.08);
  border-bottom:1px solid rgba(10,27,51,.08);
  box-shadow:0 12px 32px rgba(10,27,51,.07);
}
.quote-block p{margin:0 0 1.1rem;color:var(--text);font-size:1.02rem}
.quote-block p:last-child{margin-bottom:0}
.quote-block p::before{content:"\201C"}
.quote-block p::after{content:"\201D"}

/* En móvil el título llegaba a 1.192px de altura, después de la foto y del
   recuadro de estudios. display:contents disuelve las dos columnas para que
   cada pieza se pueda ordenar por separado: título, foto, biografía, cita y
   al final los datos de apoyo. */
@media (max-width:860px){
  .quien-grid{display:flex;flex-direction:column;gap:0}
  .quien-aside,.quien-main{display:contents}
  .quien-head  {order:1;margin-bottom:1.5rem}
  .quien-photo {order:2;max-width:340px;width:100%;margin:0 auto 1.8rem}
  .bio-lead    {order:3}
  .quote-block {order:4;margin-top:0}
  .formacion   {order:5;margin-top:2rem}
}

/* ================= TRAYECTORIA ================= */
.trayectoria{background:var(--navy);color:#fff;position:relative;overflow:hidden}
/* The section is much taller than the photo is, so cover crops the sides:
   the horizontal anchor is what decides whether you see roof beams or the
   archers and the targets. 68% lands on the shooting line. */
.trayectoria-bg{
  position:absolute;inset:0;background-size:cover;background-position:68% 50%;
  opacity:.32;filter:saturate(1.15);pointer-events:none;
}
/* the image reads clearly now, so the copy gets its own veil to stay legible */
.trayectoria-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,27,51,.86) 0%,rgba(10,27,51,.62) 45%,rgba(10,27,51,.3) 75%,rgba(10,27,51,.18) 100%);
}
.trayectoria .section-head h2{color:#fff}
.trayectoria .section-head p{color:rgba(255,255,255,.7)}

.timeline{position:relative;margin-top:1rem}
.timeline::before{
  content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(to bottom,var(--amber),rgba(232,163,61,.15));
}
@media (min-width:760px){.timeline::before{left:29px}}

.tl-item{
  position:relative;padding:0 0 3rem 3.4rem;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
html.js .tl-item{opacity:0;transform:translateY(28px)}
html.js .tl-item.in{opacity:1;transform:translateY(0)}
.tl-item:last-child{padding-bottom:0}
@media (min-width:760px){.tl-item{padding-left:5rem}}

.tl-dot{
  position:absolute;left:11px;top:2px;width:18px;height:18px;border-radius:50%;
  background:var(--navy);border:3px solid var(--amber);
  box-shadow:0 0 0 5px rgba(232,163,61,.14),0 0 18px rgba(232,163,61,.5);
}
@media (min-width:760px){.tl-dot{left:21px;width:20px;height:20px}}

.tl-year{
  display:inline-block;font-family:var(--font-display);font-size:1.5rem;color:var(--amber);
  letter-spacing:.03em;margin-bottom:.35rem;
}
.tl-role{font-weight:800;font-size:1.18rem;margin:0 0 .7rem;color:#fff}
.tl-body{color:rgba(255,255,255,.82);font-size:.98rem;max-width:64ch}
.tl-stats{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.1rem}
.tl-stat b{
  display:block;font-family:var(--font-display);font-size:1.9rem;color:var(--amber);line-height:1;
}
.tl-stat span{display:block;font-size:.78rem;color:rgba(255,255,255,.65);margin-top:.3rem;max-width:16ch}
.tl-media{
  margin-top:1.3rem;border-radius:14px;overflow:hidden;max-width:480px;
  border:1px solid rgba(255,255,255,.15);
}

.tl-note{
  margin-top:2.6rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.15);
  display:grid;gap:1.2rem;
}
@media (min-width:700px){.tl-note{grid-template-columns:1fr 1fr}}
.tl-note-block b{display:block;color:var(--amber);font-weight:800;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem}
.tl-note-block p{margin:0;color:rgba(255,255,255,.78);font-size:.94rem}

/* ================= PROYECTOS ================= */
.proyectos{background:var(--bg-light)}
.proy-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.proy-row{
  background:var(--panel);padding:1.35rem 1.6rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transition:background .3s var(--ease),padding-left .3s var(--ease);
}
.proy-row:hover{background:#fbfcfe;padding-left:1.9rem}
.proy-row .name{font-style:italic;color:#8a93a6;font-size:1.15rem;font-weight:600}
.proy-row .status{
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9aa2b3;
  border:1px dashed #c3c9d6;padding:.3rem .7rem;border-radius:20px;flex:none;
}

/* ================= LEGADOS ================= */
.legados{background:var(--panel)}
.legado-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
@media (max-width:980px){.legado-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.legado-grid{grid-template-columns:1fr}}
.legado-card{
  position:relative;overflow:hidden;
  padding:2.1rem 1.7rem;border-radius:16px;background:var(--bg-light);border:1px solid var(--line);
  transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
html.js .legado-card{opacity:0;transform:translateY(24px)}
html.js .legado-card.in{opacity:1;transform:translateY(0)}
.legado-card::before{ /* accent rule that draws itself in on hover */
  content:"";position:absolute;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--amber),#f6c877);
  transition:width .45s var(--ease);
}
.legado-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 46px rgba(10,27,51,.14);
  border-color:rgba(232,163,61,.4);
}
.legado-card:hover::before{width:100%}
.legado-num{
  font-family:var(--font-display);font-size:2.7rem;line-height:1;margin-bottom:.9rem;
  background:linear-gradient(135deg,var(--amber),#c9822a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.legado-card h3{
  font-family:var(--font-body);font-weight:800;font-size:1.05rem;color:var(--navy);margin:0 0 .6rem;
}
.legado-card p{margin:0;color:var(--text-secondary);font-size:.93rem}

/* the fifth legado is a different kind of thing, so it gets a wider,
   photo-led card of its own instead of being a lone card with an image */
.legado-feature{
  grid-column:1 / -1;
  display:grid;grid-template-columns:1.6fr 1fr;gap:2rem;align-items:center;
  padding:2.1rem;
  background:linear-gradient(120deg,#F4F7FC 0%,#E9F0FA 100%);
  border-color:rgba(30,76,140,.22);
}
.legado-feature .legado-num{margin-bottom:.7rem}
.legado-feature p{font-size:1rem;max-width:46ch}
.legado-feature-media{
  border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);
}
.legado-feature-media img{
  width:100%;height:230px;object-fit:cover;object-position:center 35%;
  transition:transform .6s var(--ease);
}
.legado-feature:hover .legado-feature-media img{transform:scale(1.04)}
@media (max-width:760px){
  .legado-feature{grid-template-columns:1fr;gap:1.4rem}
  .legado-feature-media img{height:200px}
}

/* ================= GALERIA ================= */
.galeria{background:var(--navy);color:#fff}
.galeria .section-head h2{color:#fff}
.galeria .section-head p{color:rgba(255,255,255,.7)}
.gal-track{
  display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1.2rem;margin:0 -6% 0;padding-left:6%;padding-right:6%;
  scrollbar-width:thin;scrollbar-color:var(--amber) rgba(255,255,255,.1);
}
.gal-track::-webkit-scrollbar{height:8px}
.gal-track::-webkit-scrollbar-thumb{background:var(--amber);border-radius:8px}
.gal-track::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.gal-item{
  flex:none;width:min(78vw,430px);scroll-snap-align:start;
  border-radius:18px;overflow:hidden;position:relative;
  background:#08152b;border:1px solid rgba(255,255,255,.12);
  transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .4s var(--ease);
}
html.js .gal-item{opacity:0;transform:translateY(22px)}
html.js .gal-item.in{opacity:1;transform:translateY(0)}
.gal-item:hover{border-color:rgba(232,163,61,.45)}
.gal-item img{
  width:100%;height:360px;object-fit:cover;object-position:center 45%;
  transition:transform .7s var(--ease);
}
/* Vertical shots get a narrower card so the crop stays gentle instead of
   slicing a standing figure across the chest. Each one sets its own focal
   point inline, on the face. */
.gal-item.portrait{width:min(60vw,300px)}
.gal-item:hover img{transform:scale(1.06)}
/* caption rides on the image over its own gradient, so the card reads as one piece */
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.6rem 1.2rem 1.1rem;font-size:.92rem;color:#fff;
  background:linear-gradient(to top,rgba(4,10,20,.92) 0%,rgba(4,10,20,.65) 45%,rgba(4,10,20,0) 100%);
}
.gal-nav{display:flex;gap:.8rem;margin-top:1.5rem}
.gal-arrow{
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.06);color:#fff;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .25s var(--ease),transform .25s var(--ease),opacity .25s var(--ease);
}
.gal-arrow:hover:not(:disabled){background:var(--amber);border-color:var(--amber);color:var(--navy);transform:translateY(-2px)}
.gal-arrow:disabled{opacity:.3;cursor:default}
.gal-arrow svg{width:18px;height:18px}

/* ================= CONTACTO ================= */
.contacto{background:var(--bg-light)}
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
@media (max-width:860px){.contacto-grid{grid-template-columns:1fr}}
.form-card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 20px 50px rgba(10,27,51,.08);
}
/* ===== Formulario temporalmente desactivado ===== */
.form-card fieldset{border:0;margin:0;padding:0;min-width:0}
.form-badge{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.4rem;
  padding:.4rem .85rem;border-radius:999px;
  background:rgba(232,163,61,.14);border:1px solid rgba(232,163,61,.5);
  color:#8a5a12;font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
.form-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none;
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.3}}
.form-card.is-disabled .field label{color:#7c8598}
.form-card.is-disabled .field input{
  background:#f5f7fb;color:#9aa2b3;border-color:rgba(10,27,51,.09);cursor:not-allowed;
}
.form-card.is-disabled .form-submit{
  background:#e6e9f0;color:#9aa2b3;box-shadow:none;cursor:not-allowed;
}
.form-card.is-disabled .form-submit:hover{transform:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.form-badge::before{animation:none}}

.field{margin-bottom:1.2rem}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.field input,.field select{
  width:100%;padding:.85rem 1rem;border-radius:9px;border:1.5px solid var(--line);
  font-family:var(--font-body);font-size:.98rem;background:#fff;color:var(--text);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:focus,.field select:focus{border-color:var(--electric);box-shadow:0 0 0 4px rgba(53,119,240,.14)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-submit{width:100%;justify-content:center;margin-top:.4rem}
.form-note{font-size:.82rem;color:var(--text-secondary);margin-top:.9rem}
.form-status{margin-top:1rem;font-size:.92rem;font-weight:600;display:none}
.form-status.show{display:block}
.form-status.ok{color:#1a7a4c}
.form-status.err{color:#b03434}

.contacto-info h3{color:var(--navy);font-size:1.4rem;margin-bottom:.9rem}
.contacto-info p{color:var(--text-secondary);margin-bottom:1.6rem}
.contacto-fallback{
  padding:1.4rem 1.6rem;border-radius:14px;background:#fff;border:1px solid var(--line);margin-top:1.4rem;
}
.contacto-fallback b{display:block;color:var(--navy);margin-bottom:.7rem;font-size:.9rem}

/* ================= FOOTER ================= */
.footer{
  background:var(--navy);color:rgba(255,255,255,.8);padding:3.2rem 6% 2.2rem;
}
.footer-top{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start;
  max-width:1280px;margin:0 auto;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-brand .nav-brand{font-size:1.7rem}
.footer-location{margin-top:.5rem;font-size:.92rem;color:rgba(255,255,255,.6)}
.footer-bottom{
  max-width:1280px;margin:1.6rem auto 0;font-size:.8rem;color:rgba(255,255,255,.45);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
}

/* ================= SHARED ENTRANCE / MOTION ================= */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal{opacity:0;transform:translateY(26px)}
html.js .reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger.in .r-child{transition-delay:calc(var(--i,0)*90ms)}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* the fixed nav must never sit on top of the heading an anchor link jumped to */
section[id],div[id]{scroll-margin-top:88px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal,.tl-item,.legado-card,.gal-item,.ha{opacity:1 !important;transform:none !important}
  .hero-title .w .c{opacity:1 !important;transform:none !important}
  .hero-subtitle,.hero-cta-row,.hero-stats{opacity:1 !important;transform:none !important}
}