/* ═══════════════════════════════════════════════════════
   Ivo Alessandro Capezzuto — sitio personal
   Grafito monocromo. La luz es el acento.
   El único color de la página es el verde de WhatsApp.
   ═══════════════════════════════════════════════════════ */

:root{
  --void:#070810;
  --void-2:#0B0D17;
  --surface:#10131D;
  --surface-2:#161A26;
  --hair:#242A38;
  --hair-soft:#1A1F2B;
  --mist:#878FA2;
  --mist-dim:#5C6474;
  --chalk:#EDF0F6;
  --wa:#25D366;

  --pad:clamp(18px,5vw,52px);
  --rail-x:54px;
  --rail-gap:46px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --measure:34rem;
}

@media (max-width:760px){
  :root{ --rail-x:7px; --rail-gap:22px; }
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--void);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:
    radial-gradient(120% 62% at 78% -8%, rgba(126,148,196,.13), transparent 62%),
    radial-gradient(85% 48% at 5% 42%, rgba(96,116,162,.07), transparent 70%),
    var(--void);
  color:var(--chalk);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.006em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:rgba(237,240,246,.18); }

:focus-visible{
  outline:2px solid rgba(237,240,246,.75);
  outline-offset:3px;
  border-radius:3px;
}

.skip{
  position:fixed; top:-100px; left:12px; z-index:99;
  background:var(--chalk); color:var(--void);
  padding:10px 16px; border-radius:8px;
  font-size:.9rem; font-weight:600; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }

/* ─────────────── Navegación ─────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:14px var(--pad);
  background:rgba(7,8,16,.62);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid transparent;
  opacity:0; transform:translateY(-100%);
  /* visibility, no sólo opacity: si no, los enlaces siguen recibiendo el foco */
  visibility:hidden;
  transition:opacity .5s var(--ease), transform .55s var(--ease),
             border-color .5s var(--ease), visibility 0s linear .55s;
}
.nav.is-on{
  opacity:1; transform:none; visibility:visible;
  border-bottom-color:var(--hair-soft);
  transition-delay:0s;
}
.nav__mark{
  font-size:.9rem; font-weight:700; font-stretch:92%;
  letter-spacing:-.012em; text-decoration:none;
  color:var(--chalk);
}
.nav__list{
  display:flex; gap:clamp(14px,2.4vw,30px);
  margin:0; padding:0; list-style:none;
}
.nav__list a{
  font-size:.875rem; font-weight:500; font-stretch:90%;
  color:var(--mist); text-decoration:none;
  transition:color .25s var(--ease);
}
.nav__list a:hover,
.nav__list a.is-here{ color:var(--chalk); }

@media (max-width:560px){
  .nav__mark{ display:none; }
  .nav{ justify-content:center; }
}

/* ─────────────── Portada ─────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(80px,11vh,120px) 0 clamp(72px,9vh,96px);
}
.hero__inner{
  width:min(1180px, 100% - 2*var(--pad));
  margin-inline:auto;
  padding-left:calc(var(--rail-x) + var(--rail-gap));
  will-change:transform,opacity,filter;
}

.hero__kicker{
  margin:0 0 clamp(20px,3.4vh,34px);
  font-size:.875rem; font-weight:500; font-stretch:86%;
  color:var(--mist-dim);
}

.hero__name{
  margin:0;
  /* Atado al alto además del ancho: en una pantalla baja el nombre cede
     para que la frase y las credenciales entren en el primer cuadro. */
  font-size:clamp(2.55rem, min(8.2vw, 9.4vh), 6.4rem);
  font-weight:800;
  font-stretch:112%;
  line-height:.87;
  letter-spacing:-.035em;
}
.hero__name .line{
  display:block; overflow:hidden;
  padding-bottom:.04em;
}
.hero__name .line > span{ display:block; }

.hero__claim{
  margin:clamp(22px,3.4vh,38px) 0 0;
  font-size:clamp(1.14rem, min(2.1vw, 2.7vh), 1.72rem);
  font-weight:400;
  line-height:1.34;
  letter-spacing:-.019em;
  color:var(--chalk);
  max-width:26ch;
}

/* Credenciales: el título, dónde y cuándo. El logo hace de nombre
   de la institución en el primer ítem; en los otros va el texto. */
.creds{
  display:flex; flex-wrap:wrap;
  margin:clamp(22px,3.4vh,38px) 0 0; padding:0;
  list-style:none;
}
.creds li{
  display:flex; flex-direction:column; justify-content:flex-end; gap:3px;
  padding:2px clamp(15px,1.9vw,26px);
  border-left:1px solid var(--hair);
}
.creds__logo{ margin-bottom:11px; }
.creds li:first-child{ padding-left:0; border-left:0; }

/* Los tres marcos tienen proporciones muy distintas, así que la altura
   de cada uno se elige para que pesen parecido en la fila, no para que
   midan lo mismo. Sin align-self el flex en columna los estira a lo ancho. */
.creds__logo{
  width:auto;
  align-self:flex-start;
  opacity:.95;
  transition:opacity .3s var(--ease), transform .35s var(--ease-out),
             filter .3s var(--ease);
}
.creds li:hover .creds__logo{
  opacity:1;
  transform:translateY(-2px);
  filter:drop-shadow(0 0 14px rgba(237,240,246,.28));
}
.creds__logo--itba { height:29px; }   /* 2.9 : 1 */
.creds__logo--rr   { height:22px; }   /* 6.1 : 1 */
.creds__logo--unibo{ height:42px; }   /* 4.1 : 1, con sello */

.creds__v{
  font-size:.9375rem; font-weight:600; font-stretch:96%;
  letter-spacing:-.013em; color:var(--chalk);
}
.creds__d{
  font-size:.8125rem; font-weight:500; font-stretch:86%;
  color:var(--mist-dim);
}

@media (max-width:620px){
  .creds li{
    padding:0; border-left:0;
    flex-basis:100%;
  }
  .creds li + li{
    margin-top:11px; padding-top:11px;
    border-top:1px solid var(--hair-soft);
  }
}

.hero__cue{
  position:absolute; left:0; right:0; bottom:clamp(26px,5vh,52px);
  display:flex; justify-content:center;
}
.hero__cueline{
  display:block; width:1px; height:56px;
  background:linear-gradient(to bottom, transparent, rgba(237,240,246,.55) 55%, transparent);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%,100%{ transform:scaleY(.35); transform-origin:top; opacity:.35; }
  50%    { transform:scaleY(1);   transform-origin:top; opacity:1; }
}

/* ─────────────── Riel del proceso ─────────────── */

.flow{
  position:relative;
  width:min(1180px, 100% - 2*var(--pad));
  margin-inline:auto;
  padding-bottom:clamp(80px,12vh,150px);
}

.rail{
  position:absolute;
  left:var(--rail-x); top:0; bottom:0;
  width:2px;
  transform:translateX(-1px);
  pointer-events:none;
}
.rail__track{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    transparent, var(--hair) 40px, var(--hair) calc(100% - 90px), transparent);
}
.rail__fill{
  position:absolute; left:0; top:0; width:100%;
  height:0;
  background:linear-gradient(to bottom,
    rgba(237,240,246,.06), rgba(237,240,246,.42) 60%, rgba(237,240,246,.95));
}
/* La cabeza de luz marca dónde estás leyendo. Deliberadamente difusa,
   para que no se confunda con los nodos de cada estación. */
.rail__head{
  position:absolute; left:50%; bottom:-14px;
  width:28px; height:28px; margin-left:-14px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,.9) 0%, rgba(200,216,255,.42) 26%, rgba(160,186,255,.12) 55%, transparent 72%);
  filter:blur(1px);
}

.station{
  position:relative;
  padding-block:clamp(88px,15vh,190px);
  scroll-margin-top:84px;
}
.station--last{ padding-bottom:clamp(60px,9vh,110px); }

.node{
  position:absolute;
  left:var(--rail-x); top:clamp(92px,15.4vh,196px);
  width:11px; height:11px; margin:0 0 0 -5.5px;
  border-radius:50%;
  background:var(--void);
  border:1.5px solid var(--hair);
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.station.is-live .node{
  background:var(--chalk);
  border-color:var(--chalk);
  box-shadow:0 0 0 5px rgba(237,240,246,.08), 0 0 22px 5px rgba(180,200,255,.32);
}

.station__body{ padding-left:calc(var(--rail-x) + var(--rail-gap)); }

/* ─────────────── Tipografía de sección ─────────────── */

.h2{
  margin:0 0 clamp(22px,3.4vh,38px);
  font-size:clamp(1.95rem,4.4vw,3.5rem);
  font-weight:700; font-stretch:104%;
  line-height:1.02; letter-spacing:-.029em;
}

.lede{
  margin:0 0 20px;
  font-size:clamp(1.12rem,1.9vw,1.5rem);
  font-weight:400; line-height:1.42; letter-spacing:-.016em;
  color:var(--chalk);
  max-width:30ch;
}
.lede--wide{ max-width:46ch; margin-bottom:clamp(34px,5vh,58px); }

/* ─────────────── Perfil ─────────────── */

.profile{
  display:grid;
  grid-template-columns:196px minmax(0,1fr);
  gap:clamp(26px,3.4vw,52px);
  align-items:start;
  margin-bottom:clamp(56px,8vh,100px);
}
@media (max-width:720px){
  .profile{ grid-template-columns:1fr; gap:30px; }
}

.portrait{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--hair);
  background:var(--surface);
  max-width:196px;
}
.portrait img{
  width:100%; height:auto;
  filter:grayscale(1) contrast(1.04) brightness(.97);
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.18));
  mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.18));
}

.profile__text p{ max-width:var(--measure); color:var(--mist); }
.profile__text .lede{ color:var(--chalk); max-width:32ch; }

/* Dos grupos, no una lista sola: la ingeniería industrial y lo técnico
   pesan igual, y se ve que son dos cosas distintas. */
.skills{
  display:flex; flex-wrap:wrap; gap:clamp(22px,3vw,40px);
  margin-top:30px;
}
.skills__group{ flex:1 1 260px; min-width:0; }
.skills__k{
  margin:0;
  font-size:.8125rem; font-weight:500; font-stretch:86%;
  color:var(--mist-dim);
}
.skills .chips{ margin-top:11px; }

.chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:28px 0 0; padding:0; list-style:none;
}
.chips li{
  padding:6px 13px;
  border:1px solid var(--hair);
  border-radius:999px;
  font-size:.8125rem; font-weight:500; font-stretch:88%;
  color:var(--mist);
  letter-spacing:0;
  transition:border-color .25s var(--ease), color .25s var(--ease),
             background .25s var(--ease), transform .3s var(--ease-out);
}
.chips li:hover{
  border-color:rgba(237,240,246,.4);
  color:var(--chalk);
  background:rgba(237,240,246,.05);
  transform:translateY(-2px);
}

/* Herramientas: logos reales en vez de texto, mismo peso que un chip
   pero con lugar para el ícono. */
.tools{ margin-top:34px; }
.tools__grid{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:11px 0 0; padding:0; list-style:none;
}
.tools__grid li{
  display:flex; align-items:center; gap:9px;
  padding:9px 15px 9px 13px;
  border:1px solid var(--hair);
  border-radius:999px;
  font-size:.8125rem; font-weight:500; font-stretch:88%;
  color:var(--mist);
  cursor:default;
  transition:border-color .25s var(--ease), color .25s var(--ease),
             background .25s var(--ease), transform .3s var(--ease-out);
}
.tools__grid li:hover{
  border-color:rgba(237,240,246,.4);
  color:var(--chalk);
  background:rgba(237,240,246,.05);
  transform:translateY(-2px);
}
.tools__grid img,
.tools__sql{
  width:19px; height:19px; flex:none;
  opacity:.85;
  transition:opacity .25s var(--ease), transform .3s var(--ease-out);
}
.tools__sql{ color:var(--mist); }
.tools__grid li:hover img,
.tools__grid li:hover .tools__sql{
  opacity:1;
  transform:scale(1.14);
}
.tools__grid li:hover .tools__sql{ color:var(--chalk); }
.tools__wide{ width:auto !important; height:15px !important; }

/* Trayectoria */

.track{ margin:0; padding:0; list-style:none; }
.track li{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:clamp(16px,2.6vw,40px);
  padding:28px 0;
  border-top:1px solid var(--hair-soft);
  transition:background .35s var(--ease);
}
.track li:last-child{ border-bottom:1px solid var(--hair-soft); }
.track li:hover{
  background:rgba(237,240,246,.028);
  box-shadow:16px 0 0 rgba(237,240,246,.028), -16px 0 0 rgba(237,240,246,.028);
}

/* Columna izquierda: el año y, debajo, la marca de la institución.
   El logo acompaña, nunca reemplaza el nombre, que va en el título. */
.track__when{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding-top:.24em;
}
.track__year{
  font-size:.875rem; font-weight:500; font-stretch:86%;
  color:var(--mist-dim);
}
.track__what{
  max-width:var(--measure);
  color:var(--mist);
  font-size:.9825rem; line-height:1.58;
}
.track__what b{
  display:block;
  color:var(--chalk);
  font-weight:600; font-stretch:98%;
  font-size:1.0625rem;
  letter-spacing:-.012em;
  margin-bottom:5px;
}
/* Cada marca tiene su propio ancho: lo que se iguala es el peso óptico
   en la columna, no la altura ni el ancho. */
.track__logo{
  display:block;
  height:auto;
  opacity:.95;
  transition:opacity .3s var(--ease), transform .35s var(--ease-out),
             filter .3s var(--ease);
}
.track li:hover .track__logo{
  opacity:1;
  transform:translateY(-2px);
  filter:drop-shadow(0 0 14px rgba(237,240,246,.26));
}
.track__logo--ceven{ width:106px; }
.track__logo--hw   { width:126px; }
.track__logo--itba { width:112px; }
.track__logo--unibo{ width:160px; }
.track__logo--rr   { width:160px; }
.track__logo--mbnb { width:56px; }
/* El sello del IAA es circular y a color: recolorearlo a blanco lo destruye,
   así que va tal cual, con el tamaño que necesita para leerse. */
.track__logo--iaa  { width:62px; opacity:1; }

@media (max-width:640px){
  .track__logo--ceven{ width:88px; }
  .track__logo--hw   { width:104px; }
  .track__logo--itba { width:92px; }
  .track__logo--unibo{ width:132px; }
  .track__logo--rr   { width:132px; }
  .track__logo--iaa  { width:52px; }
  .track__logo--mbnb { width:46px; }
}
@media (max-width:640px){
  .track li{ grid-template-columns:1fr; gap:16px; }
  .track__when{ padding-top:0; gap:12px; }
}

/* Prensa: foto de contexto y notas publicadas */

.press{
  display:block;
  margin:20px 0 0;
  max-width:340px;
}
.press img{
  width:100%; height:auto;
  border-radius:12px;
  border:1px solid var(--hair);
  filter:saturate(.82) brightness(.92);
}
.press figcaption{
  margin-top:9px;
  font-size:.75rem; font-stretch:88%; line-height:1.45;
  color:var(--mist-dim);
}
.press figcaption a{
  color:var(--mist);
  text-decoration:underline;
  text-decoration-color:var(--hair);
  text-underline-offset:2px;
  transition:color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.press figcaption a:hover{ color:var(--chalk); text-decoration-color:var(--mist); }

.refs{
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  margin-top:18px;
}
.refs a{
  font-size:.875rem; font-weight:500; font-stretch:90%;
  color:var(--mist);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid var(--hair);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.refs a:hover{ color:var(--chalk); border-bottom-color:var(--mist); }

/* ─────────────── Sistemas ─────────────── */

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.2vw,26px);
  margin-top:clamp(16px,2.2vw,26px);
}
@media (max-width:840px){
  .grid{ grid-template-columns:1fr; }
}

.work{
  display:block;
  background:var(--surface);
  border:1px solid var(--hair-soft);
  border-radius:20px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color .45s var(--ease), background .45s var(--ease), transform .5s var(--ease-out);
}
a.work:hover{
  border-color:var(--hair);
  background:var(--surface-2);
  transform:translateY(-4px);
}

.work__shot{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--void-2);
  border-bottom:1px solid var(--hair-soft);
}
.work__shot img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .7s var(--ease-out), filter .5s var(--ease);
  filter:saturate(.88) brightness(.95);
}
a.work:hover .work__shot img{
  transform:scale(1.028);
  filter:saturate(1) brightness(1);
}

.work__meta{ padding:clamp(22px,2.6vw,34px); }

.work__name{
  margin:0 0 10px;
  font-size:clamp(1.2rem,1.8vw,1.6rem);
  font-weight:700; font-stretch:100%;
  letter-spacing:-.021em; line-height:1.16;
}
.work__desc{
  margin:0;
  color:var(--mist);
  font-size:.9825rem; line-height:1.58;
  max-width:var(--measure);
}
.chips--work{ margin-top:18px; }

.work__url{
  display:block;
  margin-top:18px;
  font-size:.8125rem; font-weight:500; font-stretch:86%;
  color:var(--mist-dim);
  transition:color .3s var(--ease);
  overflow-wrap:anywhere;
}
a.work:hover .work__url{ color:var(--chalk); }
.work__url--none{ color:var(--mist-dim); font-style:italic; }

/* El primero manda: horizontal en escritorio */
.work--lead{ display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr); align-items:stretch; }
.work--lead .work__shot{
  aspect-ratio:auto; height:100%; min-height:340px;
  border-bottom:0; border-right:1px solid var(--hair-soft);
}
.work--lead .work__meta{
  align-self:center;
  padding:clamp(28px,3.4vw,52px);
}
.work--lead .work__name{ font-size:clamp(1.5rem,2.7vw,2.3rem); }
@media (max-width:840px){
  .work--lead{ grid-template-columns:1fr; }
  .work--lead .work__shot{
    aspect-ratio:16/10; min-height:0;
    border-right:0; border-bottom:1px solid var(--hair-soft);
  }
}

.work--quiet{
  margin-top:clamp(16px,2.2vw,26px);
  background:transparent;
  border-style:dashed;
}

/* ─────────────── Curriculum ─────────────── */

.cv{
  display:grid;
  grid-template-columns:minmax(0,520px) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);
  align-items:center;
}
@media (max-width:880px){
  .cv{ grid-template-columns:1fr; gap:34px; align-items:start; }
}

/* La tarjeta es más chica en el teléfono: el mismo desenfoque taparía demasiado */
@media (max-width:880px){
  .cvcard__page{ filter:blur(4.5px) grayscale(.18) brightness(.94); }
}

.cv__side p{ color:var(--mist); max-width:32ch; }
.cv__side .lede{ color:var(--chalk); max-width:24ch; }

.cv__dl{ margin-top:26px; }
.cv__dl a{
  display:inline-block;
  padding-bottom:3px;
  border-bottom:1px solid var(--hair);
  color:var(--chalk);
  font-weight:500; font-stretch:94%;
  text-decoration:none;
  transition:border-color .3s var(--ease);
}
.cv__dl a:hover{ border-bottom-color:var(--chalk); }

.cvcard{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1/1.15;
  padding:0;
  border:1px solid var(--hair);
  border-radius:22px;
  background:var(--surface);
  overflow:hidden;
  cursor:pointer;
  font:inherit; color:inherit;
  transition:border-color .5s var(--ease), transform .6s var(--ease-out);
}
.cvcard:hover{ border-color:rgba(237,240,246,.34); transform:translateY(-4px); }

.cvcard__page{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transform:scale(1.07);
  /* Se reconoce que es un CV, no se puede leer. Ese es el punto. */
  filter:blur(7px) grayscale(.22) brightness(.92);
  transition:filter .65s var(--ease), transform .8s var(--ease-out);
}
.cvcard:hover .cvcard__page,
.cvcard:focus-visible .cvcard__page{
  filter:blur(3px) grayscale(.05) brightness(1);
  transform:scale(1.03);
}

.cvcard__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(7,8,16,.2), rgba(7,8,16,.62));
  transition:opacity .6s var(--ease);
}
.cvcard:hover .cvcard__veil{ opacity:.7; }

.cvcard__cta{
  position:absolute; inset:auto 0 0 0;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:0 24px 34px;
  transition:transform .6s var(--ease-out);
}
.cvcard:hover .cvcard__cta{ transform:translateY(-5px); }

.cvcard__label{
  padding:13px 26px;
  border-radius:999px;
  background:var(--chalk);
  color:var(--void);
  font-size:.9375rem; font-weight:600; font-stretch:96%;
  letter-spacing:-.01em;
}
.cvcard__hint{
  font-size:.8125rem; font-weight:500; font-stretch:86%;
  color:var(--mist);
}

/* ─────────────── Contacto ─────────────── */

.contact{ margin:0; padding:0; list-style:none; max-width:620px; }
.contact li{ border-top:1px solid var(--hair-soft); }
.contact li:last-child{ border-bottom:1px solid var(--hair-soft); }
.contact li > *{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:clamp(16px,2.6vw,40px);
  align-items:baseline;
  padding:20px 0;
  text-decoration:none;
  transition:padding-left .4s var(--ease);
}
.contact a:hover{ padding-left:9px; }
.contact__k{
  font-size:.875rem; font-weight:500; font-stretch:86%;
  color:var(--mist-dim);
}
.contact__v{
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  font-weight:500; font-stretch:96%;
  letter-spacing:-.016em;
  color:var(--chalk);
  overflow-wrap:anywhere;
  transition:color .3s var(--ease);
}
.contact a:hover .contact__v{ color:#fff; }
.contact__v--plain{ color:var(--mist); font-weight:400; }
@media (max-width:560px){
  .contact li > *{ grid-template-columns:1fr; gap:3px; }
}

/* ─────────────── Pie ─────────────── */

.foot{
  border-top:1px solid var(--hair-soft);
  padding:30px var(--pad) calc(30px + env(safe-area-inset-bottom));
}
.foot p{
  margin:0;
  width:min(1180px,100%);
  margin-inline:auto;
  font-size:.8125rem; font-stretch:86%;
  color:var(--mist-dim);
}

/* ─────────────── Botones flotantes ─────────────── */
/* WhatsApp es el principal (más grande, abajo); LinkedIn e Instagram
   flotan del mismo modo pero más chicos, apilados arriba de él. */

.floaters{
  position:fixed; z-index:45;
  right:clamp(16px,3vw,30px);
  bottom:calc(clamp(16px,3vw,30px) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center;
  gap:14px;
}

.fab{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.09) inset;
  transform:scale(0); opacity:0; visibility:hidden;
  transition:transform .5s var(--ease-out), opacity .4s var(--ease),
             box-shadow .4s var(--ease), visibility 0s linear .5s;
}
.floaters.is-on .fab{ transform:scale(1); opacity:1; visibility:visible; transition-delay:0s; }
.floaters.is-on .fab:hover{ transform:scale(1.1); }
.fab svg{ pointer-events:none; }

.fab--wa{ width:60px; height:60px; background:var(--wa); }
.floaters.is-on .fab--wa:hover{
  transform:scale(1.07);
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 34px rgba(37,211,102,.42);
}

.fab--li{ width:44px; height:44px; background:#0A66C2; }
.floaters.is-on .fab--li:hover{
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 30px rgba(10,102,194,.5);
}
.fab--li svg{ width:18px; height:18px; }

.fab--ig{
  width:44px; height:44px;
  background:radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.floaters.is-on .fab--ig:hover{
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 30px rgba(214,36,159,.45);
}
.fab--ig svg{ width:18px; height:18px; }

.fab__tip{
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(6px);
  padding:7px 13px;
  border-radius:8px;
  background:var(--surface-2);
  border:1px solid var(--hair);
  color:var(--chalk);
  font-size:.8125rem; font-weight:500; font-stretch:88%;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease-out);
}
.fab:hover .fab__tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:600px){ .fab__tip{ display:none; } }

/* ─────────────── Visor del CV ─────────────── */

.sheet{
  width:min(1000px, 100% - 2*clamp(12px,4vw,40px));
  max-width:none;
  height:min(92svh, 100% - 2*clamp(12px,4vw,40px));
  max-height:none;
  padding:0;
  border:1px solid var(--hair);
  border-radius:20px;
  background:var(--surface);
  color:var(--chalk);
  overflow:hidden;
}
.sheet::backdrop{
  background:rgba(4,5,11,.76);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.sheet[open]{ animation:sheetIn .45s var(--ease-out); }
@keyframes sheetIn{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to  { opacity:1; transform:none; }
}

.sheet__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:14px 18px;
  border-bottom:1px solid var(--hair-soft);
  background:var(--surface);
}
.sheet__title{
  margin:0;
  font-size:.9375rem; font-weight:600; font-stretch:94%;
  letter-spacing:-.012em;
}
.sheet__acts{ display:flex; gap:8px; }

.btn{
  display:inline-flex; align-items:center;
  padding:9px 17px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--chalk); color:var(--void);
  font:inherit; font-size:.875rem; font-weight:600; font-stretch:92%;
  text-decoration:none; cursor:pointer;
  transition:opacity .25s var(--ease), background .25s var(--ease);
}
.btn:hover{ opacity:.86; }
.btn--ghost{
  background:transparent; color:var(--chalk);
  border-color:var(--hair);
}
.btn--ghost:hover{ background:var(--surface-2); opacity:1; }

.sheet__body{
  height:calc(100% - 61px);
  overflow:auto;
  background:var(--void-2);
  -webkit-overflow-scrolling:touch;
}
.sheet__pdf{ width:100%; height:100%; border:0; display:block; background:var(--void-2); }
.sheet__img{ display:none; width:100%; height:auto; }

/* En pantallas chicas el PDF embebido no es confiable: mostramos la imagen */
@media (max-width:760px), (hover:none){
  .sheet__pdf{ display:none; }
  .sheet__img{ display:block; }
}

/* ─────────────── Motor de animación ─────────────── */

/* Estado inicial sólo cuando el script está vivo */
.anim [data-rise]{ opacity:0; }
.anim [data-load]{ opacity:0; }

.anim [data-load]{
  animation:loadIn .95s var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 90ms + 120ms);
}
@keyframes loadIn{
  from{ opacity:0; transform:translateY(38px); filter:blur(9px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .anim [data-rise],
  .anim [data-load]{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
  .hero__cueline{ animation:none; }
  .sheet[open]{ animation:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}