/* =========================================================
   Ronnie Alexander — Marca personal
   Paleta monocroma, tipografía Inter Tight, tarjetas glass.
   ========================================================= */

/* ---------- fuentes ----------
   Alojadas en el propio sitio en vez de Google Fonts, para que la visita no
   le pase la IP del visitante a un tercero. Son las fuentes variables de
   Google, subconjunto "latin" (cubre tildes, ñ y comillas tipograficas): un
   solo archivo por familia sirve todos los pesos. Licencia SIL OFL. */
@font-face{
  font-family:"Inter Tight";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/inter-tight-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
}

:root{
  --bg:            #000000;
  --bg-soft:       #0a0a0a;
  --ink:           #ffffff;
  --ink-70:        rgba(255,255,255,.70);
  --ink-50:        rgba(255,255,255,.50);
  --ink-35:        rgba(255,255,255,.35);

  --glass:         rgba(255,255,255,.055);
  --glass-strong:  rgba(255,255,255,.09);
  --line:          rgba(255,255,255,.10);
  --line-soft:     rgba(255,255,255,.06);

  --r-card:        28px;
  --r-pill:        999px;

  /* Punto focal del retrato. Medido sobre hero.jpg (1600x2700):
     el rostro ocupa el 28-57% del ancho y el 17-48% del alto.
     X = 42% lo deja claramente a la izquierda del centro en movil.
     Y = 22% deja el pelo justo bajo la barra en escritorio.
     Para reencuadrar toca SOLO esta linea:
       subir la X mueve la foto a la IZQUIERDA, bajarla a la derecha;
       subir la Y la mueve hacia ARRIBA, bajarla hacia abajo.
     Ojo: en movil la foto no se recorta a lo alto, asi que la Y no hace
     nada ahi. Para subir o bajar la figura en movil hay que cambiar las
     bandas del lienzo de hero.jpg (ver README). */
  --hero-focus:    42% 22%;

  --gut:           20px;          /* margen lateral móvil */
  --maxw:          1120px;
  --nav-h:         64px;

  /* Zonas seguras: la camara/isla arriba, la barra de inicio abajo y, con el
     telefono acostado, el notch a un costado. En el navegador de escritorio
     valen 0. Se leen por estos tokens y no por env() directo porque el visor
     de mockup (preview.html) los redefine para simular cada telefono. */
  --safe-arriba:    env(safe-area-inset-top, 0px);
  --safe-abajo:     env(safe-area-inset-bottom, 0px);
  --safe-izquierda: env(safe-area-inset-left, 0px);
  --safe-derecha:   env(safe-area-inset-right, 0px);

  /* Margen lateral de la columna: el gutter, o lo que pida el notch acostado.
     El 100% se resuelve en cada elemento que lo usa, no aqui. */
  --pad-izq: max(calc(var(--gut) + var(--safe-izquierda)), calc((100% - var(--maxw)) / 2));
  --pad-der: max(calc(var(--gut) + var(--safe-derecha)),   calc((100% - var(--maxw)) / 2));

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

  --f-display:     "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:        "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + var(--safe-arriba) + 16px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ font-family:var(--f-display); font-weight:600; margin:0; letter-spacing:-.03em; line-height:1.05; }
p{ margin:0; }
::selection{ background:#fff; color:#000; }

:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:6px; }

.skip{
  position:fixed; top:8px; left:8px; z-index:200;
  padding:10px 16px; background:#fff; color:#000; border-radius:var(--r-pill);
  transform:translateY(-200%); transition:transform .2s var(--ease);
}
.skip:focus{ transform:translateY(0); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  height:calc(var(--nav-h) + var(--safe-arriba));
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  /* Alinea los extremos de la nav con la columna de contenido (--maxw),
     no con el borde de la ventana. */
  padding:var(--safe-arriba) var(--pad-der) 0 var(--pad-izq);
  /* Sin backdrop-filter en la transicion: animarlo es caro y parpadea. */
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
/* La barra lleva solo el usuario a la izquierda y los enlaces a la derecha
   (ocultos en movil), asi que ahi arriba solo se ve "ronnderr". */
.nav__brand{
  font-family:var(--f-display); font-weight:500; font-size:.95rem;
  letter-spacing:-.01em; color:var(--ink-70);
  transition:color .2s var(--ease);
}
.nav__brand:hover{ color:var(--ink); }
.nav__links{ display:none; gap:30px; font-size:.86rem; color:var(--ink-50); }
.nav__links a{ transition:color .2s var(--ease); }
.nav__links a:hover{ color:var(--ink); }

/* Boton de compartir, a la derecha de la barra. */
.nav__share{
  width:36px; height:36px; flex-shrink:0;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  background:rgba(255,255,255,.06);
  color:var(--ink-70);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav__share svg{
  width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.nav__share:hover{ background:#fff; color:#000; border-color:#fff; }

/* =========================================================
   HOJA DE COMPARTIR
   ========================================================= */
/* Sube desde abajo, como una hoja del sistema. El panel NO usa
   backdrop-filter: se anima con transform, y las dos cosas juntas hacen
   parpadear el desenfoque (mismo motivo por el que la tarjeta del hero no
   tiene animacion de entrada). */
.sheet{ position:fixed; inset:0; z-index:200; }
.sheet[hidden]{ display:none; }

.sheet__scrim{
  position:absolute; inset:0;
  /* Mas suave que un velo opaco a proposito: el panel es cristal y necesita
     algo que reflejar detras. Con el scrim casi negro, el backdrop-filter
     solo devuelve negro y la tarjeta se lee como un panel plano. */
  background:rgba(0,0,0,.38);
  opacity:0; transition:opacity .3s var(--ease);
}
.sheet.is-open .sheet__scrim{ opacity:1; }

/* El panel es la misma tarjeta de cristal que el resto del sitio: lleva la
   clase .card y de ahi hereda el fondo, el filo claro del canto y el
   desenfoque. Aqui solo va lo que cambia — de donde entra y como se recorta
   contra el borde de pantalla.
   Selector de dos clases (.sheet .sheet__panel) porque .card se declara mas
   abajo en la hoja: con una sola clase ganaria ella y se llevaria por delante
   el radio y la posicion. */
.sheet .sheet__panel{
  position:absolute; left:50%;
  /* Flota despegado del borde, no pegado a top:0. Pegado, el titulo cae justo
     debajo de la isla dinamica y queda tapado.
     52px es el suelo minimo; si el telefono reporta una zona segura mayor,
     manda ella. */
  top:max(52px, calc(var(--safe-arriba) + 12px));
  display:flex; flex-direction:column;
  width:min(calc(100% - 28px), 420px);
  /* Fuera de pantalla con holgura: el -120px cubre el desplazamiento del top
     para que ni un pixel del panel asome por arriba estando cerrado. */
  transform:translate(-50%, calc(-100% - 120px));
  transition:transform .38s var(--ease);
  padding:22px 26px;
  text-align:center;
  border-radius:var(--r-card);
  /* Los insets son los de .card; la sombra exterior sube de 60/.30 a 70/.55
     porque esto es un modal y tiene que despegarse mas del fondo. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 26px 70px rgba(0,0,0,.55);
}
.sheet.is-open .sheet__panel{ transform:translate(-50%, 0); }

.sheet__grip{
  /* El asa se va al final: el panel cuelga de arriba, y el borde por el que
     se tira es el de abajo. */
  order:99;
  display:block; width:38px; height:4px; margin:22px auto 0;
  border-radius:999px; background:rgba(255,255,255,.22);
}
.sheet__x{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:50%; color:var(--ink-50);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.sheet__x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.sheet__x:hover{ background:rgba(255,255,255,.1); color:#fff; }

.sheet__title{ font-size:1.4rem; letter-spacing:-.03em; }
.sheet__text{ margin-top:8px; font-size:.88rem; color:var(--ink-50); }

/* El QR necesita fondo claro y un margen blanco alrededor: sobre oscuro,
   muchos lectores no lo reconocen. */
.sheet__qr{
  width:200px; height:200px; margin:22px auto 0;
  padding:10px; border-radius:18px; background:#fff;
}
.sheet__qr svg{ width:100%; height:100%; display:block; }

.sheet__url{
  margin-top:14px;
  font-size:.78rem; color:var(--ink-50);
  word-break:break-all;
}

.sheet__actions{ display:grid; gap:10px; margin-top:20px; }
.sheet__actions .btn{ width:100%; min-height:50px; }
.btn--soft{
  border:1px solid var(--line);
  background:rgba(255,255,255,.07);
  color:var(--ink);
}
.btn--soft:hover{ background:rgba(255,255,255,.14); }
.btn[hidden]{ display:none; }

@media (prefers-reduced-motion:reduce){
  /* Dos clases para igualar la especificidad de .sheet .sheet__panel; con una
     sola, la transicion de ahi arriba ganaria y esto no haria nada. */
  .sheet .sheet__panel{ transition:none; }
}

/* =========================================================
   TARJETA GLASS (base compartida)
   ========================================================= */
.card{
  position:relative;
  /* Capa 1: brillo sutil que cae desde el borde superior.
     Capa 2 (color): el cristal. Va como fondo, no como ::before,
     para que nunca lave el texto que tiene encima.
     El brillo baja en varios pasos hasta cero: si corta de golpe,
     el ojo ve una banda horizontal sobre una superficie tan grande. */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.090) 0%,
      rgba(255,255,255,.055) 16%,
      rgba(255,255,255,.026) 38%,
      rgba(255,255,255,.010) 62%,
      rgba(255,255,255,0)    88%),
    var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  /* El filo claro de arriba es lo que hace que se lea como cristal y no como
     un rectangulo translucido: simula la luz rebotando en el canto del panel.
     La sombra exterior lo despega de la foto. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 24px 60px rgba(0,0,0,.30);
  backdrop-filter:blur(26px) saturate(140%) brightness(1.12);
  -webkit-backdrop-filter:blur(26px) saturate(140%) brightness(1.12);
}

/* =========================================================
   HERO
   ========================================================= */
/* ---------- fondo fijo ----------
   El retrato no vive dentro del <section>: es una capa fija a pantalla
   completa. Asi se queda quieto mientras el contenido sube por encima.
   Va en z-index negativo para que se pinte por debajo del contenido en flujo,
   y las secciones siguientes, que son opacas, lo tapan al llegar. */
.hero-bg{
  position:fixed; inset:0; z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + var(--safe-arriba) + 24px) calc(var(--gut) + var(--safe-derecha)) 40px calc(var(--gut) + var(--safe-izquierda));
}
.hero__media{
  position:absolute; inset:0;
  /* El retrato vive en assets/img/hero.jpg (1600x2700: la foto con bandas
     de cielo y de chaqueta añadidas arriba y abajo para alejar el plano).
     El degradado de debajo solo se ve si la foto falta o tarda en cargar.
     Encuadre: --hero-focus, un solo valor para todos los tamaños.
     Funciona porque los dos ejes nunca recortan a la vez: en móvil la foto
     se recorta a lo ancho (manda la X) y en escritorio llena el ancho y
     se recorta a lo alto (manda la Y). */
  background-image:
    url("../img/hero.jpg"),
    radial-gradient(90% 70% at 74% 26%, #5a5a5a 0%, #2b2b2b 38%, #101010 68%, #000 100%);
  background-size:cover;
  background-position:var(--hero-focus);
  background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.04);
  /* Un pelo por encima de 1 para que la animacion de entrada nunca
     descubra los bordes. Cuanto mas bajo, mas alejado se ve el plano. */
  transform:scale(1.03);
  animation:heroIn 1.6s var(--ease) both;
}
@keyframes heroIn{ from{ transform:scale(1.10); opacity:0; } to{ transform:scale(1.03); opacity:1; } }

/* El retrato tiene cielo claro de fondo, así que el velo es quien crea el
   contraste. La tarjeta se queda transparente a propósito: el trabajo de
   legibilidad lo hace esta capa, no la opacidad de la tarjeta.
   En móvil solo hace falta el degradado vertical: la tarjeta ocupa todo el
   ancho abajo, y oscurecer un lateral solo apagaría el rostro. */
.hero__veil{
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg,
      rgba(0,0,0,.60) 0%,
      rgba(0,0,0,.12) 20%,
      rgba(0,0,0,.38) 45%,
      rgba(0,0,0,.78) 70%,
      #000 100%);
}

.hero__inner{ position:relative; width:100%; max-width:var(--maxw); margin:0 auto; }

.hero__eyebrow{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-50); margin-bottom:14px; padding-left:4px;
}

/* La tarjeta es transparente a proposito: el desenfoque ES el efecto.
   Dos cosas que importan aqui:
   - El blur baja a 20px. Un radio muy alto (estaba en 34) hace que Chrome
     trocee la superficie en mosaicos y deje costuras horizontales visibles,
     y ademas aplana tanto el fondo que el cristal parece un panel opaco.
     Con 20px se intuye lo que hay detras, que es lo que se busca.
   - brightness levanta el fondo que atraviesa el panel: junto al filo claro
     del borde es lo que da la sensacion de espejo o burbuja.
   No lleva animacion de entrada: cualquier transform o opacity sobre un
   elemento con backdrop-filter hace que el navegador rehaga la capa y el
   desenfoque parpadee. */
.hero__card{
  /* El padding se mantiene ajustado a proposito: en movil la tarjeta esta
     anclada abajo, asi que cada pixel que baja de alto es un pixel mas de
     retrato visible arriba. */
  padding:22px 24px 22px; max-width:520px;
  border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(145%) brightness(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(145%) brightness(1.15);
}

.hero__name{
  font-size:clamp(2.9rem, 12vw, 4.4rem);
  line-height:.9;
  letter-spacing:-.045em;
  font-weight:600;
}
.hero__quote{
  margin:16px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-size:.95rem; line-height:1.55; color:rgba(255,255,255,.82);
  font-style:normal;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* ---------- stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin:18px 0 18px;
}
.stat{ display:flex; flex-direction:column; gap:3px; }
.stat__num{
  font-family:var(--f-display); font-size:1.45rem; font-weight:600;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
/* Ajustado para que la etiqueta mas larga ("Anos en el camino") quepa en una
   sola linea en movil: si parte en dos, desalinea toda la fila. */
.stat__label{
  font-size:.6rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-35); white-space:nowrap;
}

/* ---------- tarjeta del hero en telefono ----------
   Medido en un iPhone real con Safari (2026-10-21): la pagina visible mide
   ~705px y el rostro va de 129 a 302px (19-44% del alto de hero.jpg). La
   tarjeta empezaba en 312 y el "Documentando el camino" caia sobre la boca.
   Bajarla y compactarla ~45px la deja arrancando en el cuello, sin mover la
   foto. En el visor no se veia porque ahi el telefono no tiene barras del
   navegador y la pantalla mide 852. */
@media (max-width:639px){
  .hero{ padding-bottom:16px; }
  .hero__quote{ margin-top:12px; padding-top:12px; }
  .stats{ margin:14px 0; }
  .hero__card .btn{ min-height:48px; }
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:0 30px;
  border-radius:var(--r-pill);
  font-family:var(--f-display); font-size:.95rem; font-weight:500; letter-spacing:-.01em;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary{ width:100%; background:#fff; color:#000; }
.btn--primary:hover{ transform:translateY(-2px); background:#e9e9e9; }
.btn:active{ transform:translateY(0); }
.btn--icon{ gap:10px; }
.btn--icon svg{
  width:19px; height:19px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* =========================================================
   SECCIONES
   ========================================================= */
/* Sin fondo: la pagina entera deja ver el retrato fijo de detras. Lo que da
   contraste al texto no es un bloque opaco, es el propio cristal de cada
   tarjeta: cristal claro, con filo de luz y desenfoque. */
.section{
  padding:16px var(--pad-der) 16px var(--pad-izq);   /* 32px entre tarjetas */
}

/* ---------- tarjeta de contenido ---------- */
.panel{ padding:30px 26px; }
/* Mas claro que --ink-35 y con sombra: el texto pequeño se perdia sobre los
   tramos de cielo claro del retrato. */
.panel__kicker{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.58); margin-bottom:12px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.panel__title{
  font-size:clamp(1.7rem, 7vw, 2.3rem);
  letter-spacing:-.035em; line-height:1.04;
  margin-bottom:16px;
}
.panel__title--xl{ font-size:clamp(2.4rem, 11vw, 3.6rem); letter-spacing:-.045em; }
/* Sombra minima en el texto: como el retrato no se oscurece al bajar, hay
   tramos de cielo claro detras de las tarjetas. Esto despega las letras sin
   tener que apagar la foto ni subir la opacidad del cristal. */
.panel__text{
  color:rgba(255,255,255,.82); font-size:.98rem; line-height:1.68; max-width:52ch;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.panel--morion .panel__text{ margin-top:4px; }

/* La tarjeta entera es el enlace a morionos.com. En hover no se mueve: un
   transform sobre un elemento con backdrop-filter hace que el navegador
   rehaga la capa y el desenfoque parpadee. La respuesta la dan el borde, el
   filo de luz y la flecha, que si pueden moverse porque van dentro. */
.panel--morion{
  display:block;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.panel--morion:hover{
  border-color:rgba(255,255,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 30px 70px rgba(0,0,0,.40);
}
.panel__go{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:24px;
  font-size:.86rem; letter-spacing:.01em; color:rgba(255,255,255,.66);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  transition:color .25s var(--ease);
}
.panel__go svg{
  width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--ease);
}
.panel--morion:hover .panel__go{ color:var(--ink); }
.panel--morion:hover .panel__go svg{ transform:translate(3px, -3px); }

/* ---------- tarjeta bloqueada (Palladio, proximamente) ----------
   El desenfoque va en el CONTENIDO, no en la tarjeta: un filter sobre la
   .card anularia su backdrop-filter y dejaria de verse como cristal. */
.panel--locked{ overflow:hidden; }
.panel__blur{
  filter:blur(9px);
  opacity:.75;
  user-select:none; -webkit-user-select:none;
  pointer-events:none;
}
.panel__lock{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
}
.panel__lock-icon{
  width:56px; height:56px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 10px 30px rgba(0,0,0,.30);
  color:var(--ink);
}
.panel__lock-label{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

/* Solo para lectores de pantalla. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- el año, a tamaño grande y sin caja ---------- */
/* Va suelto sobre la foto a proposito: sin tarjeta ni fondo. */
.bigyear{
  font-family:var(--f-display); font-weight:600;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
  font-size:clamp(5.5rem, 34vw, 15rem);
  line-height:.82; letter-spacing:-.06em;
  margin:52px 0 0;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.bigyear__label{
  margin-top:14px; text-align:center;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}

/* ---------- lista de redes dentro de la tarjeta ---------- */
.links{ display:grid; }
.links li + li{ border-top:1px solid var(--line-soft); }
.links a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 2px;
  transition:padding-left .25s var(--ease), color .2s var(--ease);
}
.links a:hover{ padding-left:10px; }
.links__name{ font-family:var(--f-display); font-size:1.12rem; letter-spacing:-.02em; }
.links__at{ font-size:.82rem; color:rgba(255,255,255,.5); text-shadow:0 1px 3px rgba(0,0,0,.5); }
.links a:hover .links__at{ color:var(--ink-50); }

/* =========================================================
   CONTACTO
   ========================================================= */
.section--contact{ padding-bottom:64px; }
.contact{ padding:40px 26px; text-align:center; }
.contact__title{ font-size:clamp(2rem, 8vw, 3rem); letter-spacing:-.04em; }
.contact__copy{
  max-width:42ch; margin:18px auto 30px;
  color:rgba(255,255,255,.78); font-size:.98rem; line-height:1.7;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.socials{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:26px;
}
.socials a{
  display:inline-block;
  font-size:.82rem; color:var(--ink-50);
  padding:9px 18px; border-radius:var(--r-pill);
  border:1px solid var(--line-soft); background:rgba(255,255,255,.04);
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.socials a:hover{ background:#fff; color:#000; border-color:#fff; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  padding:26px var(--pad-der) calc(40px + var(--safe-abajo)) var(--pad-izq);
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  font-size:.76rem; color:var(--ink-35); letter-spacing:.02em;
}

/* =========================================================
   REVEAL AL HACER SCROLL
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (min-width:640px){
  :root{ --gut:32px; }
  .hero__card{ padding:34px 32px 30px; }
  .stat__num{ font-size:1.7rem; }
  .stat__label{ font-size:.66rem; letter-spacing:.1em; }
  .btn--primary{ width:auto; min-width:260px; }
  .contact{ padding:56px 40px; }
}

@media (min-width:960px){
  :root{ --gut:48px; --nav-h:76px; }
  .nav__links{ display:flex; }
  .hero{ padding-bottom:64px; }
  /* ---------- Encuadre en escritorio ----------
     Se usa otra imagen, apaisada (art direction por breakpoint): el navegador
     solo descarga la que corresponde al tamano de pantalla.
     hero-wide.jpg lleva el retrato a la izquierda y el fondo de la propia
     foto extendido hacia la derecha, en vez de fundirse a negro. Eso importa
     para la tarjeta: sobre negro puro el backdrop-filter no tiene nada que
     desenfocar y el cristal se ve como un rectangulo plano.
     `left` mantiene el retrato pegado al borde izquierdo aunque la ventana
     sea mas alta que ancha y la imagen se recorte por los lados. */
  .hero__media{
    background-image:url("../img/hero-wide.jpg");
    background-size:cover;
    background-position:left center;
    background-color:#000;
  }

  /* La tarjeta pasa a la derecha, sobre el fondo extendido. */
  .hero__inner{ display:flex; flex-direction:column; align-items:flex-end; }
  .hero__eyebrow{ width:560px; max-width:100%; }

  /* El fondo fijo no se mueve, pero la tarjeta si: al subir recorre toda la
     columna derecha. Si esa columna es cielo claro, el texto blanco
     desaparece a mitad del scroll. Por eso el velo la oscurece de arriba
     abajo, no solo por abajo.
     Se queda en .72, no en negro: a ~#383838 el texto tiene contraste de
     sobra y el degradado del cielo se sigue viendo a traves del cristal,
     que es lo que hace que la tarjeta parezca cristal y no un panel. */
  .hero__veil{
    background-image:
      linear-gradient(to right,
        rgba(0,0,0,0)   0%,
        rgba(0,0,0,0)   36%,
        rgba(0,0,0,.42) 50%,
        rgba(0,0,0,.66) 62%,
        rgba(0,0,0,.72) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.40) 0%,
        rgba(0,0,0,.05) 16%,
        rgba(0,0,0,.05) 68%,
        rgba(0,0,0,.34) 88%,
        rgba(0,0,0,.55) 100%);
  }
  .hero__name{ font-size:4.6rem; }
  .hero__card{ max-width:560px; padding:38px 36px 32px; }
  .section{ padding:28px var(--pad-der) 28px var(--pad-izq); }
  .panel{ padding:44px 40px; }
}

/* =========================================================
   ACCESIBILIDAD: movimiento reducido
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__media{ transform:scale(1.03); }
}

/* Este sitio es intencionalmente oscuro: no invertimos en modo claro,
   pero fijamos color-scheme para que los controles nativos coincidan. */
:root{ color-scheme:dark; }