.perfil{
  padding:6rem 0 4rem; position:relative;
}
.perfil__grid{ display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:center; }
@media (max-width:820px){ .perfil__grid{ grid-template-columns:1fr; } }

.perfil__lado{ display:flex; flex-direction:column; align-items:center; gap:.55rem; }

.foto-wrap{
  position:relative; width:220px; height:220px;
  border-radius:50%; overflow:hidden;
  box-shadow:0 20px 50px color-mix(in srgb,var(--acento) 30%,transparent);
}
.perfil__foto{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  object-position:50% 18%;
  display:block;
  border:4px solid var(--papel-2);
  position:relative; z-index:1;
}
.foto-pata{
  position:absolute; top:50%; width:92px; height:148px;
  z-index:2; pointer-events:none;
  transition:transform .6s cubic-bezier(.22,1.15,.36,1);
}
.foto-pata img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));
}
.foto-pata--izq{
  left:0;
  transform:translate(-140%,-50%) rotate(90deg);
}
.foto-pata--der{
  right:0;
  transform:translate(140%,-50%) rotate(-90deg);
}
.foto-wrap.is-izq .foto-pata--izq{
  transform:translate(-14%,-50%) rotate(78deg);
}
.foto-wrap.is-der .foto-pata--der{
  transform:translate(14%,-50%) rotate(-78deg);
}
.foto-wrap.toca.is-izq .foto-pata--izq .foto-pata__in,
.foto-wrap.toca.is-der .foto-pata--der .foto-pata__in{
  animation:fotoToca .4s ease;
  transform-origin:50% 15%;
}
@keyframes fotoToca{
  0%,100%{ transform:scale(1); }
  40%{ transform:scale(.92,1.06) translateY(-8px); }
}
.foto-hit{
  position:absolute; top:0; width:50%; height:100%;
  z-index:4; cursor:pointer;
}
.foto-hit--izq{ left:0; }
.foto-hit--der{ right:0; }

@media (prefers-reduced-motion:reduce){
  .foto-pata, .foto-hit{ display:none; }
}
.perfil__ubicacion{ font-size:.78rem; color:var(--tenue); }
.perfil__saludo{
  font-family:var(--mono); color:var(--acento); font-size:.9rem;
  margin-bottom:1rem; display:inline-block;
}
.perfil__nombre{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.6rem,8vw,5.5rem); line-height:1; letter-spacing:-.03em;
}
.perfil__nombre .linea{ display:block; overflow:hidden; }
.perfil__rol{
  font-size:clamp(1.1rem,2.5vw,1.5rem); color:var(--tinta-suave);
  margin-top:1.4rem; max-width:44ch;
}
.perfil__rol b{ color:var(--tinta); font-weight:500; }
.perfil__acciones{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; }

.tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:3rem; }
.tag{
  font-family:var(--mono); font-size:.8rem; color:var(--tinta-suave);
  border:1px solid var(--linea); border-radius:999px; padding:.45rem 1rem;
  transition:var(--transicion);
}
.tag:hover{ border-color:var(--acento); color:var(--acento); transform:translateY(-3px); }

.sobre{ padding:4rem 0; border-top:1px solid var(--linea); }
.sobre__grid{ display:grid; grid-template-columns:.4fr .6fr; gap:2.5rem; }
@media (max-width:760px){ .sobre__grid{ grid-template-columns:1fr; } }
.sobre__label{ font-family:var(--mono); font-size:.8rem; color:var(--tenue); text-transform:uppercase; letter-spacing:.12em; }
.sobre__texto{ font-size:clamp(1.1rem,2.2vw,1.4rem); line-height:1.7; }
.sobre__texto b{ color:var(--acento); font-weight:500; }

.experiencia{ padding:4rem 0; }
.exp{
  display:grid; grid-template-columns:200px 1fr; gap:1.5rem;
  padding:2rem 1rem; border-top:1px solid var(--linea);
  transition:background var(--transicion), padding-left var(--transicion);
}
.exp:last-child{ border-bottom:1px solid var(--linea); }
.exp:hover{ background:color-mix(in srgb,var(--acento) 5%,transparent); padding-left:1.5rem; }
.exp__fecha{ font-size:.82rem; color:var(--acento); padding-top:.2rem; }
.exp__cargo{ font-family:var(--display); font-weight:700; font-size:1.15rem; }
.exp__empresa{ font-family:var(--mono); font-size:.8rem; color:var(--tenue); display:block; margin:.2rem 0 .6rem; }
.exp__desc{ color:var(--tinta-suave); font-size:.95rem; }
@media (max-width:640px){ .exp{ grid-template-columns:1fr; gap:.4rem; } }

/* ---------- Línea de tiempo (se dibuja con anime.js) ---------- */
.exp-lista{ position:relative; padding-left:1.9rem; }
.exp__linea{
  position:absolute; left:.55rem; top:.6rem; bottom:.6rem; width:2px;
  border-radius:2px; transform-origin:top;
  /* Fallback: si color-mix falla, todo el gradiente se descarta y la línea
     desaparece. Con el color sólido delante siempre se ve. */
  background:var(--acento);
  background:linear-gradient(var(--acento), color-mix(in srgb,var(--acento) 12%, transparent));
}
.exp{ position:relative; }
.exp__pin{
  position:absolute; left:calc(-1.9rem + .55rem - 5px); top:2.3rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--papel); border:2px solid var(--acento); z-index:1;
  box-shadow:0 0 0 4px var(--papel);
}
@media (max-width:640px){
  .exp-lista{ padding-left:1.5rem; }
  .exp__pin{ top:1.9rem; left:calc(-1.5rem + .45rem - 5px); }
}

/* ---------- Banda de stats de impacto (contadores anime.js) ---------- */
.impacto{ padding:1rem 0 3rem; }
.impacto__grid{
  display:grid; gap:1.2rem; text-align:center;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.impacto__item{
  padding:1.4rem 1rem; border:1px solid var(--linea);
  border-radius:var(--radio); background:var(--papel-2);
}
.impacto__num{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,5vw,2.8rem); line-height:1; color:var(--acento);
  letter-spacing:-.02em;
}
.impacto__cap{
  display:block; margin-top:.5rem; font-size:.9rem; color:var(--tinta-suave);
}

.proyectos{ padding:4rem 0; }
.proyecto__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.proyecto__tags i{
  display:inline-flex; align-items:center; justify-content:center;
  font-style:normal; font-family:var(--mono); font-size:.7rem; line-height:1;
  color:var(--tinta-suave);
  border:1px solid var(--linea); border-radius:999px; padding:.28rem .65rem .24rem;
}
.proyecto__tags i.tag-device{
  color: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 45%, var(--linea));
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  font-weight: 700;
}
.proyecto{
  display:grid; grid-template-columns:80px 1fr auto; gap:1.5rem 1.75rem; align-items:center;
  padding:2rem 1rem; border-top:1px solid var(--linea);
  transition:background var(--transicion), padding-left var(--transicion);
}
.proyecto:last-child{ border-bottom:1px solid var(--linea); }
.proyecto:hover{ background:color-mix(in srgb,var(--acento) 6%,transparent); padding-left:1.6rem; }
.proyecto__num{ font-family:var(--mono); color:var(--tenue); font-size:.85rem; padding-top:.35rem; align-self:start; }
.proyecto__body{ min-width:0; }
.proyecto__nombre{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,3vw,2rem); display:block; }
.proyecto__nombre a{ transition:color .25s; }
.proyecto__nombre a:hover{ color:var(--acento); }
.proyecto__desc{ color:var(--tinta-suave); font-size:.95rem; margin-top:.3rem; }
.proyecto__impacto{
  list-style:none; margin:.85rem 0 0; padding:0; display:flex; flex-direction:column; gap:.35rem;
}
.proyecto__impacto li{ font-size:.9rem; color:var(--tinta-suave); line-height:1.45; }
.proyecto__impacto b{ color:var(--tinta); font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-right:.45rem; }
.proyecto__links{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
.proyecto__links a{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  padding:.35rem .75rem; border-radius:999px; border:1px solid var(--linea);
  color:var(--tinta-suave); transition:var(--transicion);
}
.proyecto__links a:hover{ color:var(--papel); background:var(--acento); border-color:var(--acento); }
.proyecto__links a:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.proyecto__cta{
  --cta-from: var(--acento);
  --cta-to: var(--coral);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .35rem .35rem .35rem .15rem;
  border: none;
  background: transparent;
  color: var(--tinta);
  text-decoration: none;
  transition: color .3s;
}
[data-lp="graf"]{ --cta-from:#17a2b8; --cta-to:#fecb68; }
[data-lp="lab"]{ --cta-from:#6a5cff; --cta-to:#17a2b8; }
[data-lp="mov"]{ --cta-from:#37b47e; --cta-to:#f0662f; }
[data-lp="micvia"]{ --cta-from:#4f7cff; --cta-to:#17a2b8; }
[data-lp="game"]{ --cta-from:#a855f7; --cta-to:#f0662f; }
[data-lp="music"]{ --cta-from:#f0662f; --cta-to:#fecb68; }
[data-lp="consult"]{ --cta-from:#0d9488; --cta-to:#17a2b8; }

.proyecto__cta-eyebrow{
  display: block;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: .2rem;
  transition: color .3s;
}
.proyecto__cta-label{
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.03em;
  line-height: 1;
  color: inherit;
  transition: letter-spacing .35s, filter .35s;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}
.proyecto__cta-text{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.proyecto__cta-arrow{
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--tinta);
  background: transparent;
  border: none;
  z-index: 0;
  transition: color .3s, transform .4s cubic-bezier(.22,1.15,.36,1);
}
.proyecto__cta-arrow::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--linea);
  background: var(--papel-2);
  z-index: -1;
  transition:
    border-color .3s,
    background .35s,
    box-shadow .35s,
    transform .4s cubic-bezier(.22,1.15,.36,1);
}
.proyecto__cta-arrow::after{
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--cta-from) 55%, transparent);
  opacity: 0;
  transform: rotate(-25deg) scale(.92);
  transition: opacity .35s, transform .5s cubic-bezier(.22,1.15,.36,1), border-color .3s;
  pointer-events: none;
}

/* hover: colores de la landing destino */
.proyecto__cta:hover,
.proyecto__cta:focus-visible,
.proyecto:hover .proyecto__cta{
  color: var(--cta-from);
}
.proyecto__cta:hover .proyecto__cta-eyebrow,
.proyecto__cta:focus-visible .proyecto__cta-eyebrow,
.proyecto:hover .proyecto__cta-eyebrow{
  color: var(--cta-from);
}
.proyecto__cta:hover .proyecto__cta-label,
.proyecto__cta:focus-visible .proyecto__cta-label,
.proyecto:hover .proyecto__cta-label{
  letter-spacing: -.01em;
  color: transparent;
  background: linear-gradient(110deg, var(--cta-from), var(--cta-to));
  -webkit-background-clip: text;
  background-clip: text;
}
.proyecto__cta:hover .proyecto__cta-arrow,
.proyecto__cta:focus-visible .proyecto__cta-arrow,
.proyecto:hover .proyecto__cta-arrow{
  color: #fff;
  transform: translateX(2px);
}
.proyecto__cta:hover .proyecto__cta-arrow::before,
.proyecto__cta:focus-visible .proyecto__cta-arrow::before,
.proyecto:hover .proyecto__cta-arrow::before{
  background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
  border-color: transparent;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--cta-from) 35%, transparent);
  transform: scale(1.06);
}
.proyecto__cta:hover .proyecto__cta-arrow::after,
.proyecto__cta:focus-visible .proyecto__cta-arrow::after,
.proyecto:hover .proyecto__cta-arrow::after{
  opacity: 1;
  transform: rotate(12deg) scale(1);
  border-color: color-mix(in srgb, var(--cta-to) 65%, transparent);
}
.proyecto__cta:focus-visible{
  outline: 2px solid var(--cta-from);
  outline-offset: 6px;
  border-radius: 8px;
}
@media (max-width:800px){
  .proyecto{ grid-template-columns:60px 1fr; }
  .proyecto__cta{
    grid-column: 2;
    justify-self: start;
    margin-top: .35rem;
  }
  .proyecto__cta-text{ align-items: flex-start; text-align: left; }
}
@media (max-width:600px){
  .proyecto{ grid-template-columns:1fr; padding:1.35rem 0; }
  .proyecto__num{ display:none; }
  .proyecto__cta{
    grid-column: 1;
    width: 100%;
    justify-content: space-between;
    padding: .85rem 1rem;
    border-radius: var(--radio);
    border: 1px solid var(--linea);
    background: var(--papel-2);
  }
  .proyecto:hover{ padding-left:0; }
  .perfil{ padding:4.5rem 0 2.5rem; overflow-x:clip; }
  .foto-pata, .foto-hit{ display:none; }
  .perfil__acciones{
    flex-direction:column;
    align-items:stretch;
    gap:.65rem;
  }
  .perfil__acciones .boton{ width:100%; justify-content:center; }
  .tags{ margin-top:2rem; gap:.45rem; }
  .proyectos{ padding:2.5rem 0; }
}

.perfil__chip{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  padding:.35rem .75rem; border-radius:999px;
  background:color-mix(in srgb,var(--lima) 16%,transparent);
  color:var(--lima); border:1px solid color-mix(in srgb,var(--lima) 40%,transparent);
  margin-bottom:.55rem;
}
.perfil__chip::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--lima);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lima) 25%,transparent);
}
.contacto__mail{
  display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem;
  margin-top:.4rem;
}
.contacto__copiar{
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  padding:.45rem .9rem; border-radius:999px;
  border:1.5px solid var(--linea); color:var(--tinta);
  transition:var(--transicion);
}
.contacto__copiar:hover, .contacto__copiar.ok{
  background:var(--acento); color:#fff; border-color:var(--acento);
}
.contacto__copiar:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

.habilidades{ padding:4rem 0; border-top:1px solid var(--linea); }
.skills{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.skill{
  border:1px solid var(--linea); border-radius:var(--radio);
  padding:1.4rem; background:var(--papel-2); transition:var(--transicion);
}
.skill:hover{ border-color:color-mix(in srgb,var(--acento) 40%,var(--linea)); transform:translateY(-4px); }
.skill__cat{ font-size:.75rem; color:var(--acento); text-transform:uppercase; letter-spacing:.1em; }
.skill p{ margin-top:.6rem; color:var(--tinta-suave); font-size:.95rem; }

.destacado{ padding:4rem 0; }
.destacado__caja{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
  border:1px solid var(--linea); border-radius:var(--radio);
  background:var(--papel-2); padding:2.5rem;
}
@media (max-width:700px){ .destacado__caja{ grid-template-columns:1fr; } }
.destacado__label{ font-size:.75rem; color:var(--acento); text-transform:uppercase; letter-spacing:.1em; display:block; margin-bottom:.7rem; }
.destacado__col p{ color:var(--tinta-suave); line-height:1.7; }
.destacado__col b{ color:var(--tinta); font-weight:500; }
.destacado__tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.destacado__tags i{
  display:inline-flex; align-items:center; justify-content:center;
  font-style:normal; font-family:var(--mono); font-size:.75rem; line-height:1;
  color:var(--acento);
  border:1px solid color-mix(in srgb,var(--acento) 35%,var(--linea)); border-radius:999px;
  padding:.36rem .8rem .32rem;
}
.destacado__tags i.tag-device{
  font-weight:700;
  border-color:color-mix(in srgb,var(--acento) 45%,var(--linea));
  background:color-mix(in srgb,var(--acento) 10%,transparent);
}

.certificaciones{ padding:4rem 0; border-top:1px solid var(--linea); }
.certs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.cert{
  border:1px solid var(--linea); border-radius:var(--radio); padding:1.3rem;
  background:var(--papel-2); transition:var(--transicion);
}
.cert:hover{ border-color:color-mix(in srgb,var(--acento) 40%,var(--linea)); transform:translateY(-4px); }
.cert__nombre{ font-family:var(--display); font-weight:500; font-size:1rem; line-height:1.3; }
.cert__org{ font-size:.75rem; color:var(--tenue); display:block; margin-top:.5rem; }

.estudios{ padding:4rem 0; border-top:1px solid var(--linea); }
.estudios__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; }
@media (max-width:760px){ .estudios__grid{ grid-template-columns:1fr; } }
.edu{ padding:1.2rem 0; border-top:1px solid var(--linea); }
.edu:first-of-type{ border-top:none; }
.edu__titulo{ font-family:var(--display); font-weight:700; font-size:1.15rem; }
.edu__meta{ font-size:.8rem; color:var(--tenue); display:block; margin-top:.3rem; }
.idiomas{ display:flex; flex-direction:column; gap:.8rem; }
.idioma{
  display:flex; justify-content:space-between; align-items:center;
  padding:.9rem 1.1rem; border:1px solid var(--linea); border-radius:var(--radio-sm);
  background:var(--papel-2); transition:var(--transicion);
}
.idioma:hover{ border-color:var(--acento); }
.idioma span:last-child{ color:var(--acento); font-size:.82rem; }

/* =====================================================================
   CIERRE CINEMÁTICO — igual que Kristopher:
   1) Un pin de 100vh recorta un footer FIXED a pantalla completa
      (el bloque se “abre” al scrollear, no aparece pegado abajo).
   2) pabloaravena.com gigante (cabe entero), stroke + degradado, scrub de scroll.
   ===================================================================== */
.contacto{ position:relative; overflow:visible; text-align:center; padding:2.25rem 0 0; }
.contacto__frente{ position:relative; z-index:1; padding-bottom:5rem; }

.cierre-pin{
  position:relative;
  height:100vh;
  height:100dvh;
  clip-path:inset(0);
}
.cierre-fixed{
  --cierre-bg: var(--papel);
  --cierre-ink: var(--tinta);
  --cierre-muted: var(--tinta-suave);
  --cierre-pill: var(--tinta);
  --cierre-pill-bd: var(--linea);
  --cierre-pill-bg: color-mix(in srgb, var(--papel-2) 88%, transparent);
  --cierre-wm-stroke: color-mix(in srgb, var(--tinta) 32%, transparent);
  --cierre-wm-a: color-mix(in srgb, var(--tinta) 55%, transparent);
  --cierre-wm-b: color-mix(in srgb, var(--tinta) 22%, transparent);
  --cierre-grid: color-mix(in srgb, var(--tinta) 10%, transparent);
  --cierre-glow: color-mix(in srgb, var(--acento) 20%, transparent);
  --cierre-title-from: var(--tinta);
  --cierre-title-to: color-mix(in srgb, var(--tinta) 48%, var(--papel));
  --cierre-bar: var(--tenue);
  --cierre-link: var(--tinta-suave);
  position:fixed; left:0; bottom:0; z-index:4;
  width:100%; height:100vh; height:100dvh;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  background:var(--cierre-bg);
  color:var(--cierre-ink);
  padding-top:env(safe-area-inset-top);
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cierre-fixed{
    --cierre-bg:#0a0a0a; --cierre-ink:#fff; --cierre-muted:#a3a3a3;
    --cierre-pill:#e5e5e5; --cierre-pill-bd:rgba(255,255,255,.08);
    --cierre-pill-bg:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
    --cierre-wm-stroke:rgba(255,255,255,.28);
    --cierre-wm-a:rgba(255,255,255,.55); --cierre-wm-b:rgba(255,255,255,.22);
    --cierre-grid:rgba(255,255,255,.035); --cierre-glow:rgba(23,162,184,.2);
    --cierre-title-from:#fff; --cierre-title-to:rgba(255,255,255,.4);
    --cierre-bar:#737373; --cierre-link:#a3a3a3;
  }
}
:root[data-theme="dark"] .cierre-fixed{
  --cierre-bg:#0a0a0a; --cierre-ink:#fff; --cierre-muted:#a3a3a3;
  --cierre-pill:#e5e5e5; --cierre-pill-bd:rgba(255,255,255,.08);
  --cierre-pill-bg:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  --cierre-wm-stroke:rgba(255,255,255,.28);
  --cierre-wm-a:rgba(255,255,255,.55); --cierre-wm-b:rgba(255,255,255,.22);
  --cierre-grid:rgba(255,255,255,.035); --cierre-glow:rgba(23,162,184,.2);
  --cierre-title-from:#fff; --cierre-title-to:rgba(255,255,255,.4);
  --cierre-bar:#737373; --cierre-link:#a3a3a3;
}
.cierre-aurora{
  position:absolute; left:50%; top:50%; z-index:0;
  width:80vw; height:60vh;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--cierre-glow) 0%, transparent 70%);
  filter:blur(80px);
  animation:cierreRespira 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes cierreRespira{ 50%{ transform:translate(-50%,-50%) scale(1.08); opacity:.85; } }
/* En móvil / gama baja: sin animación y con menos desenfoque. El blur grande
   ANIMADO es lo que más puede tironear en celulares modestos; el efecto se ve
   casi igual con menos blur. En desktop se mantiene completo. */
@media (max-width:760px){
  .cierre-aurora{ filter:blur(48px); animation:none; }
}
@media (prefers-reduced-motion:reduce){
  .cierre-aurora{ animation:none; }
}
.cierre-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--cierre-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cierre-grid) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.contacto__wm{
  position:absolute; z-index:0; left:50%; top:76%;
  width:max-content;
  max-width:none;
  margin:0;
  padding:0 .28em 0 .12em;
  text-align:center;
  font-family:"Archivo Black", Impact, "Arial Black", sans-serif;
  font-weight:400;
  font-size:clamp(1.7rem, 8.2vw, 9.4rem);
  line-height:.9;
  letter-spacing:-.07em;
  text-transform:uppercase;
  white-space:nowrap; user-select:none; pointer-events:none;
  color:transparent;
  -webkit-text-stroke:1px var(--cierre-wm-stroke);
  background:linear-gradient(180deg, var(--cierre-wm-a) 0%, var(--cierre-wm-b) 62%, transparent 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  transform:translate3d(-50%, calc(-50% + 6vh), 0) scale(.88);
  opacity:0;
  will-change:transform, opacity;
}
/* Respaldo: si el navegador no soporta recortar el degradado al texto
   (background-clip:text), con color:transparent el nombre quedaría INVISIBLE.
   Aquí le damos un color sólido visible para ese caso. */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .contacto__wm{
    color:rgba(255,255,255,.30);
    -webkit-text-fill-color:rgba(255,255,255,.30);
    background:none;
  }
}
.cierre-cta{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  flex:0 0 auto;
  text-align:center;
  width:min(40rem, calc(100% - 2rem));
  max-width:100%;
  margin:0 auto;
  padding:clamp(4.2rem, 11vh, 7rem) 1.1rem 0;
  overflow:visible;
  opacity:0; transform:translateY(50px);
  will-change:transform, opacity;
}
.cierre-cta .contacto__redes{ margin-top:1.2rem; flex-wrap:wrap; justify-content:center; }
.cierre-fixed .contacto__titulo{
  max-width:100%;
  line-height:1.22;
  overflow-wrap:break-word;
  word-wrap:break-word;
  text-wrap:balance;
  padding-block:.2em;
  overflow:visible;
}
.cierre-fixed .contacto__titulo--cta{
  font-size:clamp(1.55rem, 5.2vw, 3.4rem);
  color:var(--cierre-ink);
  background:linear-gradient(180deg, var(--cierre-title-from) 0%, var(--cierre-title-to) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px color-mix(in srgb, var(--cierre-ink) 12%, transparent));
}
.cierre-fixed .contacto__sub{ color:var(--cierre-muted); }
.cierre-fixed .boton--fantasma{
  color:var(--cierre-pill);
  border-color:var(--cierre-pill-bd);
  background:var(--cierre-pill-bg);
  backdrop-filter:blur(16px);
}
.cierre-fixed .boton--fantasma:hover{
  border-color:color-mix(in srgb, var(--acento) 55%, var(--cierre-pill-bd));
  color:var(--cierre-ink);
}
.cierre-bar{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:.8rem 1.4rem;
  justify-content:space-between; align-items:center;
  width:100%;
  padding:1.4rem 5.6rem 1.6rem 1.6rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cierre-bar);
}
.cierre-bar .nav__link{ color:var(--cierre-link); }
.cierre-bar .nav__link:hover{ color:var(--cierre-ink); }
/* Badge "disponible" con puntito que late */
.contacto__badge{
  display:flex; width:max-content; max-width:100%; margin:.9rem auto 1.1rem;
  align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--acento);
}
.contacto__dot{
  width:9px; height:9px; border-radius:50%; background:var(--acento);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent);
  animation:latido 2s ease-in-out infinite;
}
@keyframes latido{ 50%{ box-shadow:0 0 0 10px transparent; } }
.contacto__titulo{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,6vw,4rem); letter-spacing:-.02em; line-height:1.05;
}
.contacto__titulo--cta{ font-size:clamp(1.55rem, 5.2vw, 3.4rem); }
/* separación entre el botón "Enviar mensaje" (fin del formulario) y el título */
.contacto__titulo--sep{ margin-top:clamp(2.5rem, 6vh, 4.5rem); }
.contacto__sub{ margin:.7rem auto 0; max-width:44ch; color:var(--tinta-suave); font-size:clamp(1rem,2vw,1.15rem); }
@media (prefers-reduced-motion:reduce){
  .contacto__dot{ animation:none; }
  /* sin animación de scroll: el nombre queda visible y quieto (el telón sigue
     revelándose por estructura, solo que sin el movimiento de subida). */
  .contacto__wm{ opacity:1; transform:translate3d(-50%, -50%, 0); }
  .cierre-cta{ opacity:1; transform:none; }
  .cierre-aurora{ animation:none; }
}
@media (max-width:700px){
  .contacto__wm{ font-size:clamp(1.35rem, 7.8vw, 3.6rem); letter-spacing:-.03em; top:74%; }
  .cierre-cta{ padding-top:clamp(4.4rem, 12vh, 6rem); width:calc(100% - 1.6rem); }
  .cierre-fixed .contacto__titulo--cta{ font-size:clamp(1.45rem, 7.6vw, 2.4rem); }
  .cierre-bar{ padding:1.2rem 4.6rem 1.4rem 1.2rem; }
}
@media (max-height:560px){
  .cierre-cta{ padding-top:clamp(2.2rem, 8vh, 3.4rem); }
  .cierre-fixed .contacto__titulo--cta{ font-size:clamp(1.25rem, 4.4vw, 2.1rem); }
  .contacto__wm{ top:68%; font-size:clamp(1.2rem, 6vw, 4.2rem); }
  .cierre-bar{ padding:.8rem 4.8rem 1rem 1.2rem; }
}
@media (prefers-reduced-motion:reduce){
  .cierre-pin{ height:auto; clip-path:none; }
  .cierre-fixed{ position:relative; height:auto; min-height:100vh; }
}
.contacto__titulo a,
.contacto__mail a{ color:var(--acento); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; font-size:clamp(1.2rem,3.5vw,2rem); font-family:var(--display); font-weight:700; }
.contacto__redes{ margin-top:2.5rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- proyecto "Próximamente" (no clickeable) ---------- */
.proyecto--wip{ cursor:default; }
.proyecto--wip:hover{ transform:none; }
.proyecto__badge{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tenue); border:1px solid var(--linea); border-radius:999px;
  padding:.28rem .6rem; white-space:nowrap; align-self:center;
}

/* ---------- formulario de contacto (Formspree) ---------- */
.form{ max-width:620px; margin:2rem auto 0; text-align:left; display:flex; flex-direction:column; gap:1rem; }
.form__fila{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .form__fila{ grid-template-columns:1fr; } }
.form__campo{ display:flex; flex-direction:column; gap:.4rem; }
.form__campo > span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); }
.form input, .form textarea{
  font:inherit; color:var(--tinta); background:var(--papel-2);
  border:1px solid var(--linea); border-radius:var(--radio-sm);
  padding:.8rem .9rem; width:100%; transition:border-color var(--transicion);
}
.form textarea{ resize:vertical; min-height:120px; }
.form input:focus, .form textarea:focus{ outline:none; border-color:var(--acento); }
.form input::placeholder, .form textarea::placeholder{ color:var(--tenue); }
.form .boton{ align-self:flex-start; border:none; }
.form__miel{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form__estado{ font-size:.9rem; min-height:1.2em; margin:0; }
.form__estado--ok{ color:var(--lima); }
.form__estado--error{ color:var(--coral); }
.contacto__o{ margin-top:2rem; font-family:var(--mono); font-size:.78rem; color:var(--tenue); }

/* ---------- Tira de logos del stack (tinta monocromo, brillan al hover) ---------- */
.tech-strip{
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:center;
  margin:0 0 2.2rem; padding:1.4rem 1.5rem;
  border:1px solid var(--linea); border-radius:var(--radio); background:var(--papel-2);
}
.tech-logo{
  width:30px; height:30px; flex:0 0 auto; display:block;
  color:var(--tinta-suave);
  transition:color .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.tech-logo:hover{
  color:var(--acento);
  transform:translateY(-4px) scale(1.14);
}
@media (max-width:600px){
  .tech-strip{ gap:1.2rem; padding:1.1rem; }
  .tech-logo{ width:26px; height:26px; }
}
@media (prefers-reduced-motion:reduce){ .tech-logo{ transition:none; } }

/* El fondo aurora ahora vive en base.css (compartido por home y portafolio). */