/* ==========================================================================
   Jesús Olvera | CírculoPost — estilos compartidos
   Las medidas de escritorio se derivan de las referencias (lienzo 1536×1024)
   mediante la unidad --u, para conservar proporciones en cualquier pantalla.
   ========================================================================== */

:root{
  --black:#000;
  --white:#fff;
  --red:#f20000;          /* subrayados e indicadores */
  --orange-red:#fd2300;   /* botón principal */
  --fg-soft:rgba(255,255,255,.78);
  --fg-dim:rgba(255,255,255,.55);

  --font:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* 1 px del lienzo de referencia */
  --u:min(calc(100vw / 1536), calc(100svh / 1024));
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);-webkit-text-size-adjust:100%}
body{
  min-height:100svh;
  background:var(--black);color:var(--white);
  font-family:var(--font);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:rgba(242,0,0,.35);color:#fff}

.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}
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 16px;background:#fff;color:#000;font-size:14px;border-radius:4px;transition:top .2s}
.skip-link:focus{top:16px}

:focus-visible{outline:2px solid var(--orange-red);outline-offset:4px;border-radius:2px}

/* Mientras se aplica el idioma guardado (EN), evita el parpadeo del texto en español */
html.i18n-pending [data-i18n]{visibility:hidden}

/* ---------- Transición entre páginas (navegadores compatibles) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s var(--ease) both}
::view-transition-new(root){animation:vt-in .45s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  height:calc(108 * var(--u));min-height:76px;
  padding:0 calc(63 * var(--u)) 0 calc(70 * var(--u));
}
.brand{
  display:flex;align-items:center;
  font-weight:300;text-transform:uppercase;white-space:nowrap;
  font-size:max(14px, calc(23.5 * var(--u)));letter-spacing:.015em;line-height:1;
}
.brand__sep{
  display:block;width:2px;height:calc(46 * var(--u));min-height:30px;
  background:var(--white);margin:0 calc(20 * var(--u));
}

.nav{display:flex;align-items:center;margin-left:auto}
.nav__list{display:flex;align-items:center;list-style:none;gap:0}

/* Todos los elementos del menú comparten la caja del botón HABLEMOS aprobado
   (alto, relleno, grosor y redondez). Solo el activo muestra el contorno rojo,
   así el menú no se desplaza al cambiar de página. */
.nav__link,
.btn-pill{
  position:relative;display:inline-flex;align-items:center;gap:.75em;
  --pad:calc(24 * var(--u));
  height:max(34px, calc(40 * var(--u)));padding:0 var(--pad);
  border:1.5px solid transparent;border-radius:999px;background:transparent;
  font-size:max(12px, calc(15.5 * var(--u)));font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--white);
}
.btn-pill svg{width:1.15em;height:1.15em;color:var(--red)}

/* Página activa: contorno rojo redondeado */
.nav__link[aria-current="page"],
.btn-pill[aria-current="page"]{border-color:var(--red)}

/* Hover en elementos no activos: línea corta (≈3 letras) que crece de izquierda a derecha */
.nav__link::after,
.btn-pill::after{
  content:'';position:absolute;pointer-events:none;
  left:var(--pad);bottom:max(5px, calc(6 * var(--u)));
  width:2.1em;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.nav__link:not([aria-current="page"]):hover::after,
.btn-pill:not([aria-current="page"]):hover::after,
.nav__link:not([aria-current="page"]):focus-visible::after,
.btn-pill:not([aria-current="page"]):focus-visible::after{transform:scaleX(1)}

.nav__link:focus-visible,
.btn-pill:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:999px}

.lang{
  display:flex;align-items:center;gap:.35em;margin-left:calc(45 * var(--u));
  font-size:max(13px, calc(17 * var(--u)));font-weight:500;letter-spacing:.04em;
}
.lang__sep{color:var(--red);font-weight:300}
.lang__btn{padding:4px 2px;opacity:.85;text-underline-offset:4px;text-decoration-thickness:1.5px;transition:opacity .3s}
.lang__btn:hover{opacity:1}
.lang__btn[aria-pressed="true"]{opacity:1;text-decoration-line:underline}


/* ==========================================================================
   Indicador lateral 01–04
   ========================================================================== */
.page-index{
  position:fixed;z-index:30;list-style:none;
  display:flex;flex-direction:column;gap:calc(1 * var(--u));
  font-size:max(13px, calc(17 * var(--u)));font-weight:500;letter-spacing:.04em;
}
/* Misma posición y escala en las cuatro páginas: lado derecho, como en Home */
.page-index{right:calc(60 * var(--u));top:calc(370 * var(--u))}
.page-index li{
  position:relative;display:block;padding:calc(2 * var(--u)) 0 calc(12 * var(--u));
  color:var(--fg-soft);font-weight:400;cursor:default;user-select:none;
}
.page-index li::after{
  content:'';position:absolute;left:0;bottom:0;width:calc(22 * var(--u));min-width:18px;height:3px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
}
.page-index li.is-current{color:var(--white);font-weight:500;margin-bottom:calc(9 * var(--u))}
.page-index li.is-current::after{transform:scaleX(1);animation:index-line .6s var(--ease-out) .5s both}
@keyframes index-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ==========================================================================
   HOME
   ========================================================================== */
.home{position:relative;height:100svh;min-height:560px;overflow:hidden}
.home__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.home__media img{
  width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  animation:media-in 1.6s var(--ease-out) both;
}
/* Oscurecimiento medido sobre la referencia: lado izquierdo y base más densos */
.home__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.25) 100%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.78) 100%);
}

.home__content{
  position:absolute;z-index:2;
  left:calc(76 * var(--u));top:calc(224 * var(--u));
}
.home__title{
  font-weight:800;text-transform:uppercase;
  font-size:calc(139 * var(--u));line-height:.81;letter-spacing:-.008em;
}
.home__title span{display:block}
.home__tagline{
  margin-top:calc(28 * var(--u)); /* +20px en escritorio (1536) */
  font-weight:500;font-size:calc(43 * var(--u));line-height:1.18;letter-spacing:-.012em;
}
.home__tagline span{display:block}
.home__lead{
  margin-top:calc(12 * var(--u));
  font-weight:300;font-size:max(14px, calc(19.5 * var(--u)));letter-spacing:-.005em;color:var(--white);
}

.explore{
  position:absolute;z-index:3;left:0;right:0;bottom:0;width:max-content;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:calc(18 * var(--u));
  padding:12px 16px 0;
  font-size:max(10px, calc(11.5 * var(--u)));font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fg-soft);transition:color .3s var(--ease);
}
.explore__line{
  position:relative;display:block;width:1px;height:calc(58 * var(--u));min-height:36px;
  background:rgba(255,255,255,.55);overflow:hidden;
}
.explore__line::after{
  content:'';position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--white);animation:explore-run 2.4s var(--ease) infinite;
}
.explore:hover{color:var(--white)}
.home.is-leaving .home__content,
.home.is-leaving .explore{opacity:0;transform:translateY(-14px);transition:opacity .35s var(--ease), transform .35s var(--ease)}

/* Entrada */
.reveal{animation:rise 1s var(--ease-out) both;animation-delay:calc(var(--d,0) * 1ms + 200ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes media-in{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes explore-run{0%{top:-40%}70%,100%{top:100%}}
.site-header,.page-index{animation:fade 1s var(--ease) .1s both}
@keyframes fade{from{opacity:0}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1024px) and (min-width:901px){
  :root{--u:calc(100vw / 1280)}
  .home__content{top:auto;bottom:24%}
}

@media (max-width:900px){
  :root{--u:calc(100vw / 768)}
  /* Menú siempre visible: marca + idioma arriba, navegación debajo */
  .site-header{
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand lang" "nav nav";
    align-items:center;row-gap:6px;height:auto;min-height:0;width:100%;max-width:100vw;
    padding:max(12px, env(safe-area-inset-top)) 16px 10px;
    background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 100%);
  }
  .brand{grid-area:brand;font-size:clamp(12.5px, 3.6vw, 14px);min-width:0}
  .brand__sep{height:24px;min-height:0;margin:0 11px;width:1.5px}
  .lang{grid-area:lang;margin-left:0;margin-right:-10px;font-size:14px;gap:0}
  .lang__btn{padding:12px 10px;min-width:44px;min-height:44px}
  .lang__sep{margin:0 -4px}

  .nav{grid-area:nav;min-width:0;margin-left:-4px;margin-right:-16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav__list{flex-wrap:nowrap;padding-right:16px}
  .nav__link,.btn-pill{
    --pad:clamp(7px, 2.4vw, 18px);
    height:clamp(32px, 8.6vw, 40px);
    font-size:clamp(11.5px, 3.1vw, 14px);white-space:nowrap;
  }
  .nav__link::after,.btn-pill::after{bottom:5px}
  .page-index{display:none}

  .home{min-height:520px}
  .home__media img{object-position:70% 50%}
  .home__media::after{
    background:
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.88) 100%);
  }
  .home__content{left:16px;right:16px;top:auto;bottom:max(118px, 16svh)}
  .home__title{font-size:clamp(52px, 17vw, 104px)}
  .home__tagline{margin-top:28px;font-size:clamp(22px, 6.4vw, 34px)}
  .home__lead{margin-top:12px;font-size:15px}
  .explore{gap:12px;font-size:11px}
  .explore__line{height:44px}
}

@media (max-height:520px) and (orientation:landscape){
  .home{min-height:0}
  .home__content{top:auto;bottom:64px;right:auto}
  .home__lead{margin-top:8px;font-size:14px}
  .explore{gap:8px}
  .explore__line{height:28px;min-height:0}
  .home__title{font-size:clamp(40px, 10svh, 80px)}
  .home__tagline{font-size:clamp(18px, 5svh, 28px);margin-top:14px}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;animation-delay:0ms !important}
  .explore__line::after{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ==========================================================================
   Títulos de página (Proyectos, Sobre mí, Hablemos)
   Misma tipografía que el nombre en Home: Poppins ExtraBold
   ========================================================================== */
.page-head{padding-left:calc(168 * var(--u))}
.page-title{
  font-weight:800;text-transform:uppercase;
  font-size:calc(104 * var(--u));line-height:.86;letter-spacing:-.005em;
}
.page-sub{
  margin-top:calc(5 * var(--u));
  font-weight:400;font-size:max(15px, calc(29 * var(--u)));letter-spacing:.005em;line-height:1.25;
}

/* ==========================================================================
   PROYECTOS
   ========================================================================== */
.projects{
  min-height:100svh;background:var(--black);
  padding:calc(218 * var(--u)) 0 calc(80 * var(--u));
}
/* El borde derecho deja libre la numeración fija de la derecha */
.cards{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(44 * var(--u));
  margin-top:calc(72 * var(--u));
  padding:0 calc(122 * var(--u)) 0 calc(77 * var(--u));
}
.card{min-width:0}
.card__media{
  position:relative;display:block;width:100%;aspect-ratio:431 / 230;overflow:hidden;
  border-radius:calc(10 * var(--u));
  background:radial-gradient(120% 120% at 70% 30%, #1d1d1d 0%, #0b0b0b 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  cursor:pointer;
}
.card__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out), opacity .6s var(--ease);
}
.card__media::after{ /* filo de 1px + degradado inferior suave para que la duración se lea en miniaturas claras */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(0,0,0,0) 62%, rgba(0,0,0,.42) 100%);
}
.card__time{z-index:1}
.card__play{
  position:absolute;left:50%;top:50%;
  width:calc(62 * var(--u));height:calc(62 * var(--u));min-width:44px;min-height:44px;
  margin:calc(-31 * var(--u)) 0 0 calc(-31 * var(--u));
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;border-radius:50%;background:rgba(0,0,0,.28);color:#fff;
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.card__play svg{width:46%;height:46%;margin-left:6%}
.card__time{
  position:absolute;right:calc(12 * var(--u));bottom:calc(10 * var(--u));
  font-weight:500;font-size:max(12px, calc(18.5 * var(--u)));letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.card__media:hover img,.card__media:focus-visible img{transform:scale(1.035)}
.card__media:hover .card__play,.card__media:focus-visible .card__play{background:rgba(253,35,0,.85);border-color:rgba(253,35,0,.85)}
.card__media:focus-visible{outline:2px solid #fff;outline-offset:4px}

.card__meta{
  display:grid;grid-template-columns:calc(79 * var(--u)) 1fr;
  margin-top:calc(34 * var(--u));
}
.card__num{
  position:relative;align-self:start;justify-self:start;
  padding:0 calc(4 * var(--u)) calc(14 * var(--u));
  font-weight:600;font-size:max(13px, calc(19 * var(--u)));letter-spacing:.08em;line-height:1.3;
}
.card__num::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);
  transform-origin:left;animation:index-line .6s var(--ease-out) both;animation-delay:calc(var(--d,0) * 1ms + 600ms);
}
.card__title{
  font-weight:500;font-size:max(13px, calc(19 * var(--u)));letter-spacing:.2em;line-height:1.3;text-transform:uppercase;
}
.card__desc{
  margin-top:calc(5 * var(--u));
  font-weight:400;font-size:max(14px, calc(17.5 * var(--u)));line-height:1.45;color:var(--white);
}
.card__desc span{display:block}
/* Flechas alineadas entre tarjetas: cada tarjeta ocupa el alto de la fila
   y la flecha se coloca al final de su bloque de texto */
.card{display:flex;flex-direction:column}
.card__meta{flex:1 1 auto}
.card__meta > div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.card__arrow{margin-top:auto !important}
.card__desc{margin-bottom:calc(14 * var(--u))}
.card__arrow{
  display:inline-flex;margin-top:calc(14 * var(--u));padding:calc(6 * var(--u)) 0;
  width:calc(28 * var(--u));min-width:24px;color:#fff;
}
.card__arrow svg{width:100%;height:auto;transition:transform .35s var(--ease-out)}
.card__arrow:hover svg,.card__arrow:focus-visible svg{transform:translateX(6px)}
.card:target .card__media{outline:2px solid var(--red);outline-offset:4px}

/* ---------- Modal de reel ---------- */
.reel-modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(0,0,0,.92);
  opacity:0;transition:opacity .3s var(--ease);
}
.reel-modal[hidden]{display:none}
.reel-modal.is-open{opacity:1}
.reel-modal__inner{position:relative;width:100%;max-width:1100px}
.reel-modal video{display:block;width:100%;max-height:80svh;background:#000;border-radius:6px}
.reel-close{
  position:absolute;top:-52px;right:0;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;
  transition:color .3s var(--ease);
}
.reel-close svg{width:24px;height:24px}
.reel-close:hover{color:var(--orange-red)}
.reel-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.modal-open{overflow:hidden}

/* ---------- Responsive Proyectos ---------- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .page-head{padding:0 16px}
  .page-title{font-size:clamp(44px, 12.5vw, 96px)}
  .page-sub{margin-top:10px;font-size:clamp(16px, 4.3vw, 24px)}
  .projects{padding:132px 0 56px}
  .cards{gap:40px 24px;margin-top:40px;padding:0 16px}
  .card__media{border-radius:10px}
  .card__meta{grid-template-columns:56px 1fr;margin-top:16px}
  .card__num{font-size:15px;padding-bottom:10px}
  .card__title{font-size:15px}
  .card__desc{font-size:15px;margin-top:8px}
  .card__desc span{display:inline}
  .card__desc{margin-bottom:0}
  .card__arrow{width:44px;height:44px;padding:10px 16px 10px 0;margin-top:0;margin-bottom:-10px;box-sizing:border-box}
  .card__time{right:10px;bottom:8px;font-size:14px}
  .card__play{margin:-24px 0 0 -24px;width:48px;height:48px}
  .reel-close{top:-50px;right:-4px}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
}

/* Header con fondo solo cuando la página se desplaza (Home no tiene scroll) */
.site-header{transition:background-color .35s var(--ease)}
.site-header.is-scrolled{background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ==========================================================================
   SOBRE MÍ
   ========================================================================== */
.about{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--black)}
.about__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.about__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  animation:media-in 1.6s var(--ease-out) both;
}
/* Oscurecimiento medido sobre la referencia: lado del texto muy denso, rostro intacto */
.about__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.82) 14%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.18) 46%, rgba(0,0,0,.1) 70%, rgba(0,0,0,.12) 100%);
}
.about__content{
  position:absolute;z-index:2;left:calc(173 * var(--u));top:calc(218 * var(--u));
}
.about__text{margin-top:calc(46 * var(--u))}
.about__text p{
  font-weight:300;font-size:max(14px, calc(21.6 * var(--u)));line-height:1.48;letter-spacing:.004em;
}
.about__text p + p{margin-top:calc(31 * var(--u))}
.about__text span{display:block}

@media (max-width:900px){
  /* Foto arriba (rostro visible), texto debajo sobre negro */
  .about{height:auto;min-height:100svh;overflow:visible}
  .about__media{position:relative;height:min(64svh, 118vw);inset:auto;overflow:hidden}
  .about__media img{object-position:64% 30%}
  .about__media::after{
    background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, #000 100%);
  }
  .about__content{position:relative;left:auto;top:auto;margin-top:-56px;padding:0 16px 56px}
  .about__text{margin-top:20px}
  .about__text p{font-size:16px;line-height:1.6}
  .about__text p + p{margin-top:16px}
  .about__text span{display:inline}
}

/* ==========================================================================
   HABLEMOS
   ========================================================================== */
.contact{position:relative;min-height:100svh;background:var(--black);overflow:hidden;display:flex;flex-direction:column}
.contact__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.contact__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  animation:media-in 1.6s var(--ease-out) both;
}
.contact__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.8) 16%, rgba(0,0,0,.5) 34%, rgba(0,0,0,.16) 52%, rgba(0,0,0,.08) 75%, rgba(0,0,0,.12) 100%);
}
.contact__content{
  position:relative;z-index:2;
  padding:calc(218 * var(--u)) 0 0 calc(156 * var(--u));
  width:calc(156 * var(--u) + 562 * var(--u));
  box-sizing:content-box;
}
.contact__bar{
  display:block;width:calc(34 * var(--u));min-width:24px;height:4px;
  margin:calc(24 * var(--u)) 0 0 calc(4 * var(--u));background:var(--orange-red);
}
.contact__kicker{
  margin:calc(20 * var(--u)) 0 0 calc(5 * var(--u));
  font-weight:600;font-size:max(13px, calc(22 * var(--u)));letter-spacing:.24em;text-transform:uppercase;line-height:1.2;
}
.contact__lead{
  margin:calc(8 * var(--u)) 0 0 calc(5 * var(--u));
  font-weight:400;font-size:max(14px, calc(22 * var(--u)));letter-spacing:.14em;line-height:1.3;
}

/* ---------- Formulario ---------- */
.form{
  display:flex;flex-direction:column;gap:calc(7 * var(--u));
  width:calc(558 * var(--u));margin:calc(32 * var(--u)) 0 0 calc(4 * var(--u));
}
.form__row--2{display:grid;grid-template-columns:1fr 1fr;gap:calc(13 * var(--u))}
.form__honey{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0}
.field{position:relative}
.field input,.field select,.field textarea{
  display:block;width:100%;
  height:max(44px, calc(54 * var(--u)));padding:0 calc(22 * var(--u));
  background:rgba(18,18,18,.88);color:#fff;
  border:1px solid rgba(255,255,255,.14);border-radius:calc(4 * var(--u));
  font:inherit;font-weight:400;font-size:max(15px, calc(15.5 * var(--u)));
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{height:max(110px, calc(131 * var(--u)));padding-top:calc(18 * var(--u));padding-bottom:calc(14 * var(--u));resize:vertical;line-height:1.5}
.field ::placeholder{color:#fff;opacity:.92}
.field select{cursor:pointer;padding-right:calc(56 * var(--u))}
.field select:invalid{color:rgba(255,255,255,.92)}
.field select option{background:#121212;color:#fff}
.field__chevron{
  position:absolute;right:calc(22 * var(--u));top:calc(max(44px, calc(54 * var(--u))) / 2);
  width:max(16px, calc(20 * var(--u)));height:max(16px, calc(20 * var(--u)));transform:translateY(-50%);
  pointer-events:none;color:#fff;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(255,255,255,.28)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange-red);background:rgba(18,18,18,.95)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{box-shadow:0 0 0 1px var(--orange-red)}
.field [aria-invalid="true"]{border-color:var(--red)}
.field__error{display:block;font-size:12.5px;line-height:1.3;color:#ff6a55;min-height:0;margin-top:4px}
.field__error:empty{display:none}

.form__actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:calc(11 * var(--u))}
.btn-send{
  display:inline-flex;align-items:center;justify-content:center;gap:calc(12 * var(--u));
  width:calc(264 * var(--u));min-width:220px;height:max(52px, calc(68 * var(--u)));
  border-radius:999px;background:var(--orange-red);color:#fff;
  font-weight:500;font-size:max(14px, calc(17 * var(--u)));letter-spacing:.02em;text-transform:uppercase;
  transition:background-color .3s var(--ease), opacity .3s var(--ease);
}
.btn-send svg{width:1.3em;height:1.3em;transition:transform .35s var(--ease-out)}
.btn-send:hover{background:#ff3a1a}
.btn-send:hover svg{transform:translateX(5px)}
.btn-send:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px}
.btn-send[disabled]{opacity:.6;cursor:progress}
.form__status{font-size:max(13px, calc(15 * var(--u)));line-height:1.4;max-width:calc(260 * var(--u));min-width:200px}
.form__status:empty{display:none}
.form__status.is-ok{color:#fff}
.form__status.is-error{color:#ff8a75}

.contact__ig{
  display:inline-flex;margin:calc(30 * var(--u)) 0 0 calc(2 * var(--u));padding:calc(6 * var(--u));
  width:calc(42 * var(--u));min-width:40px;color:#fff;transition:color .3s var(--ease);
}
.contact__ig svg{width:100%;height:auto}
.contact__ig:hover{color:var(--orange-red)}
.contact__footer{
  /* Centrado respecto a toda la página, al final del flujo:
     margin-top:auto lo lleva al borde inferior cuando sobra espacio */
  position:relative;z-index:2;margin-top:auto;
  padding:32px 16px 28px;text-align:center;
  font-weight:400;font-size:max(12px, calc(13 * var(--u)));line-height:1.4;letter-spacing:.01em;
  color:#a8a8a8;
}

@media (max-width:900px){
  .contact__media{position:fixed}
  .contact__media::after{background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.82) 100%)}
  .contact__media img{object-position:72% 50%}
  .contact__content{width:auto;padding:132px 16px 48px}
  .contact__bar{margin-top:16px;margin-left:2px}
  .contact__kicker{margin:16px 0 0 2px;font-size:clamp(13px, 3.7vw, 18px);letter-spacing:.18em}
  .contact__lead{margin:6px 0 0 2px;font-size:clamp(14px, 3.9vw, 18px);letter-spacing:.08em}
  .form{width:100%;max-width:560px;margin:24px 0 0;gap:8px}
  .form__row--2{gap:8px}
  .field input,.field select,.field textarea{padding:0 16px;border-radius:4px;font-size:16px} /* 16px evita el zoom automático de iPhone */
  .field textarea{padding-top:14px}
  .field__chevron{right:16px}
  .btn-send{width:auto;padding:0 32px}
  .contact__ig{margin-top:24px}
  .contact__footer{padding:36px 16px max(24px, env(safe-area-inset-bottom));font-size:12px}
  .contact__content{padding-bottom:0}
}
@media (max-width:420px){
  .form__row--2{grid-template-columns:1fr}
}

/* ---------- Gracias (confirmación sin JavaScript) ---------- */
.thanks{min-height:100svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;padding:0 calc(168 * var(--u))}
@media (max-width:900px){.thanks{padding:0 16px}}

/* Zonas seguras (muesca / isla) en iPhone horizontal */
@media (max-width:900px){
  .site-header{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
  .home__content{left:max(16px, env(safe-area-inset-left))}
  .page-head,.cards{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
  .about__content,.contact__content{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}
}

/* ==========================================================================
   Descargar CV (Sobre mí y Hablemos) — estilo de los enlaces del sitio,
   con línea roja fija bajo el texto (no es un botón relleno)
   ========================================================================== */
.cv-link{
  position:relative;display:inline-flex;align-items:baseline;gap:.5em;
  margin-top:calc(34 * var(--u));padding-bottom:calc(7 * var(--u));
  font-weight:500;font-size:max(12px, calc(15.5 * var(--u)));letter-spacing:.06em;text-transform:uppercase;
  color:var(--white);
}
.cv-link span{display:inline}
.cv-link::after{ /* misma animación que el menú */
  content:'';position:absolute;left:0;bottom:0;width:2.1em;height:2px;background:#F20000;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.cv-link:hover::after,.cv-link:focus-visible::after{transform:scaleX(1)}
.cv-link__arrow{transition:transform .3s var(--ease-out)}
.cv-link:hover .cv-link__arrow,.cv-link:focus-visible .cv-link__arrow{transform:translateY(2px)}
.cv-link:focus-visible{outline:2px solid var(--white);outline-offset:4px;border-radius:2px}


@media (max-width:900px){
  .cv-link{margin-top:24px;padding-bottom:6px;font-size:14px}
}