/* ==========================================================
   JORGE RODRIGUEZ PALACIOS · Portfolio
   Sistema: papel frío + tinta + un azul #0E90D8.
   Tipografía: Plus Jakarta Sans (variable, archivo local).
   ========================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #e8e9ef;
  --bg-2: #dcdde6;
  --ink: #000;
  --mute: #55565f;
  --accent: #0e90d8;
  --line: rgba(0, 0, 0, .2);

  --pad: clamp(20px, 4vw, 56px);
  --nav-h: 68px;

  --f-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", system-ui, sans-serif;

  --ease: cubic-bezier(.7, 0, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Cursor personalizado (flecha pixel-art, img/cursor.svg). Los enlaces, botones y campos de
   texto conservan su cursor nativo para que se entienda dónde se puede hacer clic. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='35.438 24.812 425.182 744.098' shape-rendering='crispEdges'%3E%3Cpath style='fill-rule:evenodd;fill:%23000000' d='m35.438 24.812v602.35h35.437v-35.44h35.435v-35.41h-35.435v-460.65l35.435-0.004v-35.406h-35.435v-35.438h-35.437zm70.872 70.844v35.434h35.41v-35.434h-35.41zm35.41 35.434v35.44h35.44v-35.44h-35.44zm35.44 35.44v35.44h35.43v-35.44h-35.43zm35.43 35.44v35.44h35.44v-35.44h-35.44zm35.44 35.44v35.43h35.44v-35.43h-35.44zm35.44 35.43v35.44h35.44v-35.44h-35.44zm35.44 35.44v35.41h35.43v-35.41h-35.43zm35.43 35.41v35.43h35.41v-35.43h-35.41zm35.41 35.43v35.44h-106.28v35.44 70.88h35.44v-70.88h141.71v-35.44h-35.43v-35.44h-35.44zm-70.84 141.76v70.84h35.43v-70.84h-35.43zm35.43 70.84v70.87h35.41v-70.87h-35.41zm35.41 70.87v70.88h35.44v-70.88h-35.44zm0 70.88h-70.84v35.44h70.84v-35.44zm-70.84 0v-70.88h-35.44v70.88h35.44zm-35.44-70.88v-70.87h-35.44v70.87h35.44zm-35.44-70.87v-70.84h-35.44v70.84h35.44zm-35.44-70.84v-70.88h-35.43v35.44h-35.44v35.44h35.44 35.43zm-70.87 0h-35.41v35.43h35.41v-35.43z'/%3E%3Cpath style='fill:%23ffffff' d='m70.875 95.656v460.65h35.435v-35.43h35.41v-35.44h35.44v-35.44h35.43v70.88h35.44v70.84h35.44v70.87h35.44v70.88h35.43 35.41v-70.88h-35.41v-70.87h-35.43v-70.84h-35.44v-106.32h35.44 35.43 35.41v-35.44h-35.41v-35.43h-35.43v-35.41h-35.44v-35.44h-35.44v-35.43h-35.44v-35.44h-35.43v-35.44h-35.44v-35.44h-35.41v-35.434h-35.435z'/%3E%3C/svg%3E") 1 1, auto;
  }
}
[id] { scroll-margin-top: var(--nav-h); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: fixed; left: var(--pad); top: -80px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px;
  transition: top .2s;
}
.skip:focus { top: 12px; }

/* Marcadores de posición de imagen (sustitúyelos por <img>) */
.ph {
  width: 100%; height: 100%;
  display: grid; place-items: end start;
  padding: 14px;
  background:
    linear-gradient(135deg, var(--accent), #9fd3ef 60%, #ffd2c4);
  color: rgba(255, 255, 255, .85);
  font-size: .8rem;
}
.ph--about { background: linear-gradient(160deg, #ff5a36, #ffc2a8); }
.ph--lab   { background: linear-gradient(140deg, #7b2cbf, #e0b8ff 70%, #fff); }
img.ph, .ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Intro (preloader) ----------
   Fondo predominantemente blanco con un degradado azul muy tenue que asoma por abajo.
   Cinco manchas de color se desplazan despacio por la pantalla para que el fondo esté siempre
   en movimiento. Encima, grano de película.
   El logotipo entra con rebote, titila y se pliega al terminar.
   Colores: edita las variables de abajo. */
.loader { display: none; }
.js .loader {
  --lo-white: #f8fcff;   /* luz superior */
  --lo-pale:  #d8eef9;   /* celeste muy claro */
  --lo-sky:   #add9f4;   /* celeste */
  --lo-mid:   #469fe3;   /* azul medio */
  --lo-deep:  #0c73d5;   /* azul intenso (abajo) */
  --lo-star:  #0c73d5;   /* logotipo, barra y porcentaje: azul (el fondo ahora es casi blanco) */
  --p: 0;                /* progreso 0–100, lo escribe js.js */
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  overflow: hidden;
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 55%, #f4faff 78%, #e3f1fb 100%);
  color: var(--lo-star);
  transition: opacity .6s ease, visibility 0s linear .6s;
}

/* Manchas de color que se mueven por la pantalla */
.loader__bg { position: absolute; inset: 0; pointer-events: none; }
.loader__bg i {
  position: absolute; border-radius: 50%; will-change: transform;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
}
.loader__bg i:nth-child(1) {   /* luz blanca que recorre la parte alta */
  width: 92vmax; height: 92vmax; left: 45%; top: 0%; margin: -46vmax 0 0 -46vmax;
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0) 72%);
  animation-name: lo-b1; animation-duration: 11s;
}
.loader__bg i:nth-child(2) {   /* azul muy tenue que respira por abajo */
  width: 88vmax; height: 88vmax; left: 32%; top: 116%; margin: -44vmax 0 0 -44vmax;
  background: radial-gradient(closest-side, rgba(12, 115, 213, .2), rgba(12, 115, 213, 0) 72%);
  animation-name: lo-b2; animation-duration: 13s;
}
.loader__bg i:nth-child(3) {   /* azul suave que cruza el lado derecho */
  width: 60vmax; height: 60vmax; left: 88%; top: 98%; margin: -30vmax 0 0 -30vmax;
  background: radial-gradient(closest-side, rgba(70, 159, 227, .14), rgba(70, 159, 227, 0) 72%);
  animation-name: lo-b3; animation-duration: 16s;
}
.loader__bg i:nth-child(4) {   /* celeste claro que viaja por el medio */
  width: 66vmax; height: 66vmax; left: 92%; top: 50%; margin: -33vmax 0 0 -33vmax;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%);
  animation-name: lo-b4; animation-duration: 19s;
}
.loader__bg i:nth-child(5) {   /* celeste casi imperceptible en la izquierda */
  width: 56vmax; height: 56vmax; left: 6%; top: 80%; margin: -28vmax 0 0 -28vmax;
  background: radial-gradient(closest-side, rgba(70, 159, 227, .1), rgba(70, 159, 227, 0) 72%);
  animation-name: lo-b5; animation-duration: 17s;
}
@keyframes lo-b1 { from { transform: translate(-26vw, -2vh) scale(.9); }  50% { transform: translate(4vw, 8vh) scale(1.2); }   to { transform: translate(28vw, 0) scale(1); } }
@keyframes lo-b2 { from { transform: translate(-22vw, 6vh) scale(1); }    50% { transform: translate(14vw, -16vh) scale(1.18); } to { transform: translate(32vw, 4vh) scale(.95); } }
@keyframes lo-b3 { from { transform: translate(10vw, 8vh) scale(1); }     50% { transform: translate(-26vw, -14vh) scale(1.15); } to { transform: translate(-58vw, 4vh) scale(.95); } }
@keyframes lo-b4 { from { transform: translate(8vw, -16vh) scale(.95); }  50% { transform: translate(-34vw, 10vh) scale(1.2); }  to { transform: translate(-70vw, -8vh) scale(1); } }
@keyframes lo-b5 { from { transform: translate(0, 8vh) scale(1); }        50% { transform: translate(34vw, -22vh) scale(1.2); }  to { transform: translate(72vw, 6vh) scale(1.05); } }

/* Grano de película: ruido SVG por encima de todo, con sacudida a saltos */
.js .loader::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .3; mix-blend-mode: soft-light;
  animation: lo-grain .9s steps(6) infinite;
}
@keyframes lo-grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-6%, 4%); }
  33%  { transform: translate(5%, -7%); }
  50%  { transform: translate(-4%, 8%); }
  67%  { transform: translate(7%, 3%); }
  83%  { transform: translate(-8%, -5%); }
  100% { transform: translate(0, 0); }
}

.loader__stage { position: absolute; inset: 0; }
.star {
  position: absolute; left: var(--x); top: var(--y);
  height: var(--h); aspect-ratio: 457.7 / 629.33;
  translate: -50% -50%;
  filter: drop-shadow(0 10px 28px rgba(12, 60, 110, .22));   /* sombra azul suave bajo el logo */
  animation: star-in .85s cubic-bezier(.34, 1.56, .64, 1) var(--in) both;
}
/* Logotipo = máscara de recorte con un degradado azul (los tonos de la imagen de portada) */
.star__photo {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(155deg, #7fd2f5 0%, #2b97d3 22%, #0f6a9e 45%, #0a4a73 70%, #06283f 100%);
  background-size: 240% 240%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27310.87 225.49 457.7 629.33%27%3E%3Cpath d=%27M 654.140625 225.488281 L 654.140625 511.546875 L 391.085938 511.546875 C 475.703125 501.773438 596.929688 466.28125 596.929688 343.023438 L 596.929688 225.488281 L 310.871094 225.488281 L 310.871094 339.914062 L 482.507812 339.914062 C 470.226562 393.550781 346.386719 396.976562 310.871094 397.125 L 310.871094 625.96875 L 654.140625 625.96875 L 654.140625 665.304688 C 654.140625 675.175781 646.136719 683.183594 636.261719 683.183594 L 425.292969 683.183594 C 362.101562 683.183594 310.871094 734.410156 310.871094 797.605469 L 310.871094 854.816406 L 425.292969 854.816406 L 425.292969 825.671875 C 425.292969 810.171875 437.859375 797.605469 453.359375 797.605469 L 654.140625 797.605469 C 717.335938 797.605469 768.566406 746.378906 768.566406 683.183594 L 768.566406 225.488281 Z M 654.140625 225.488281%27/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27310.87 225.49 457.7 629.33%27%3E%3Cpath d=%27M 654.140625 225.488281 L 654.140625 511.546875 L 391.085938 511.546875 C 475.703125 501.773438 596.929688 466.28125 596.929688 343.023438 L 596.929688 225.488281 L 310.871094 225.488281 L 310.871094 339.914062 L 482.507812 339.914062 C 470.226562 393.550781 346.386719 396.976562 310.871094 397.125 L 310.871094 625.96875 L 654.140625 625.96875 L 654.140625 665.304688 C 654.140625 675.175781 646.136719 683.183594 636.261719 683.183594 L 425.292969 683.183594 C 362.101562 683.183594 310.871094 734.410156 310.871094 797.605469 L 310.871094 854.816406 L 425.292969 854.816406 L 425.292969 825.671875 C 425.292969 810.171875 437.859375 797.605469 453.359375 797.605469 L 654.140625 797.605469 C 717.335938 797.605469 768.566406 746.378906 768.566406 683.183594 L 768.566406 225.488281 Z M 654.140625 225.488281%27/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: var(--op, 1);
  animation: star-twinkle var(--t) ease-in-out var(--tw) infinite, lo-grad 5s ease-in-out infinite alternate;
}
@keyframes lo-grad { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

@keyframes star-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes star-twinkle {
  0%, 100% { transform: scale(1);   opacity: var(--op, 1); }
  50%      { transform: scale(.72); opacity: calc(var(--op, 1) * .6); }
}
@keyframes star-out {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0); opacity: 0; }
}

/* Barra y porcentaje de carga */
.loader__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: rgba(12, 115, 213, .12);
  transition: opacity .3s ease;
}
.loader__bar i {
  display: block; width: 100%; height: 100%;
  background: var(--lo-star);
  transform-origin: left center;
  transform: scaleX(calc(var(--p) / 100));
}
.loader__count {
  position: absolute; right: var(--pad); bottom: calc(var(--pad) + 5px);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 2rem); font-variant-numeric: tabular-nums;
  transition: opacity .3s ease;
}

/* Salida: se pliegan primero los de fuera y al final el central; luego se desvanece el fondo */
.loader.is-leaving .star {
  animation: star-out .5s cubic-bezier(.6, 0, .9, .4) var(--out) both;
}
.loader.is-leaving .loader__bar, .loader.is-leaving .loader__count { opacity: 0; }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader.is-gone { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js .loader::after, .loader__bg i, .star__photo { animation: none; }
  .star, .loader.is-leaving .star { animation: none; }
  .loader.is-leaving .star { opacity: 0; }
}

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 0 var(--pad);
  color: var(--ink);
  transition: transform .4s var(--ease), color .3s;
}
/* El fondo difuminado va en un pseudo-elemento: así el panel móvil (position: fixed)
   no queda atrapado dentro de la altura de la cabecera. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .3s;
}
.nav.is-solid::before { opacity: 1; }
.nav.is-hidden { transform: translateY(-100%); }

/* Sobre el hero (transparente) el menú va en blanco */
.nav--hero:not(.is-solid):not(.is-open) { color: #fff; }

.nav__logo { position: relative; z-index: 3; display: inline-flex; align-items: center; }
.nav__logo img { height: 38px; width: auto; filter: brightness(0); transition: filter .3s; }
.nav--hero:not(.is-solid):not(.is-open) .nav__logo img { filter: brightness(0) invert(1); }

.nav__panel { display: flex; justify-content: center; align-items: center; }
.nav__list { display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); }
.nav__list > li { position: relative; display: flex; align-items: center; gap: 2px; }
.nav__list a { position: relative; display: inline-block; padding: 10px 0; font-weight: 500; font-size: 1.2rem; }
.nav__list > li > a::after {
  /* barra del hover: degradado azul, el mismo de la estela de "Sobre mí" */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #8fd3f4);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__list > li > a:hover::after { transform: scaleX(1); }

.nav__extra { display: none; }
.nav__mail { justify-self: end; font-weight: 500; font-size: 1.05rem; }
/* Con letra más grande, el email no cabe en pantallas medianas */
@media (min-width: 1025px) and (max-width: 1399px) { .nav__mail { display: none; } }
.nav__mail:hover { opacity: .7; }
.nav__toggle { display: none; }

/* Menú móvil: panel a pantalla completa */
@media (max-width: 1024px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__mail { display: none; }

  .nav__toggle {
    position: relative; z-index: 3;
    display: grid; place-items: center;
    width: 44px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer;
  }
  .nav__toggle i {
    grid-area: 1 / 1; width: 26px; height: 2px; background: currentColor;
    transition: transform .35s var(--ease);
  }
  .nav__toggle i:first-of-type { transform: translateY(-4px); }
  .nav__toggle i:last-of-type { transform: translateY(4px); }
  .nav__toggle[aria-expanded="true"] i:first-of-type { transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] i:last-of-type { transform: rotate(-45deg); }

  .nav.is-open { color: var(--ink); }
  .nav__panel {
    position: fixed; inset: 0; z-index: 2;
    flex-direction: column; align-items: stretch; justify-content: space-between; gap: 32px;
    padding: calc(var(--nav-h) + 16px) var(--pad) var(--pad);
    background: var(--bg); color: var(--ink);
    overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .6s var(--ease), visibility 0s .6s;
  }
  .nav.is-open .nav__panel { clip-path: inset(0); visibility: visible; transition: clip-path .6s var(--ease); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list > li { flex-wrap: wrap; justify-content: space-between; border-bottom: 1.5px solid var(--line); }
  .nav__list > li > a {
    padding: 20px 0;
    font-weight: 600; font-size: clamp(2.3rem, 9.5vw, 3.8rem); letter-spacing: -.04em; line-height: 1.1;
  }
  .nav__list > li > a::after { display: none; }

  .nav__extra { display: flex; flex-direction: column; gap: 14px; font-weight: 500; }
  .nav__extra > a { font-size: 1.25rem; }
  .nav__extra ul { display: flex; gap: 22px; }
  .nav__extra a:hover { color: var(--accent); }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Cuánto más baja que la pantalla el hero (cambia este valor para ajustarlo) */
  --hero-extra: 18svh;
  min-height: calc(100svh + var(--hero-extra));
  color: #fff;

  /* Bordes inferiores redondeados */
  border-radius: 0 0 30px 30px;
}

/* ---------- Fondo con imagen ---------- */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  background-image: url("img/fondo-home.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Vídeo desactivado */
.hero__video {
  display: none;
}

/* ---------- Velo para mejorar la lectura del texto ---------- */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    to top,
    rgba(2, 15, 28, 0.5),
    rgba(2, 15, 28, 0) 50%
  );
}

/* ---------- Rastro del cursor ---------- */

.hero__trail {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.trail-tile {
  position: absolute;
  line-height: 0;
  translate: -2px -2px;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.35));
  animation: trail 1.4s steps(7) forwards;
}

.trail-tile svg {
  display: block;
  image-rendering: pixelated;
}

@keyframes trail {
  0%,
  55% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ---------- Redes sociales ---------- */

.hero__social {
  position: absolute;
  z-index: 3;
  left: 17.5vw;
  bottom: calc(30svh + var(--hero-extra));

  display: grid;
  gap: 14px;
}

.hero__social a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
}

.hero__social a:hover {
  color: #fff;
}

/* ---------- Contenido ---------- */

.hero__content {
  position: absolute;
  z-index: 3;
  left: 47.5vw;
  right: var(--pad);
  bottom: calc(12svh + var(--hero-extra));

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 40px);
}

.hero__title {
  font-weight: 500;
  font-size: clamp(2.6rem, 4.4vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* Botón: píldora blanca con círculo negro y "+" */
.hero__cta {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 5px 30px 5px 5px; border-radius: 999px;
  background: #fff; color: #000;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.hero__plus {
  position: relative; width: 48px; height: 48px; border-radius: 50%; background: #000;
  transition: rotate .5s var(--ease), background .3s;
}
.hero__plus::before, .hero__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: #fff; transition: background .3s;
}
.hero__plus::before { width: 14px; height: 2px; }
.hero__plus::after { width: 2px; height: 14px; }
.hero__cta:hover { background: #000; color: #fff; }
.hero__cta:hover .hero__plus { background: #fff; rotate: 90deg; }
.hero__cta:hover .hero__plus::before, .hero__cta:hover .hero__plus::after { background: #000; }

@media (max-width: 1024px) {
  .hero__social { left: var(--pad); bottom: calc(var(--pad) + var(--hero-extra)); display: flex; gap: 22px; }
  .hero__content { left: var(--pad); bottom: calc(var(--pad) + 56px + var(--hero-extra)); }
}
@media (max-width: 560px) {
  .hero__title { font-size: clamp(2.3rem, 11vw, 3rem); }
}

/* Etiquetas (se usan en las páginas de proyecto) */
.hero__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 520px; }
.hero__tags li {
  padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 999px;
  font-size: .9rem; font-weight: 500;
  transition: background .2s, color .2s;
}
.hero__tags li:hover { background: var(--ink); color: var(--bg); }

/* ---------- Sobre mí ---------- */
.about { position: relative; }
.about__pin {
  display: grid; grid-template-columns: minmax(180px, 22vw) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 96px); align-items: start;
  padding: clamp(80px, 14vw, 200px) var(--pad);
}
.about__img { aspect-ratio: 4 / 5; overflow: hidden; rotate: -3deg; }
.about__text {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.4rem, 3.1vw, 3rem); line-height: 1.18; letter-spacing: -.02em;
  max-width: 28em; align-self: center; overflow-wrap: break-word;
}

/* Revelado con scroll: la sección se "ancla" y el texto se descubre palabra a palabra.
   La sección siguiente no aparece hasta que todo el texto está a plena opacidad. */
.about.is-active { height: calc(100svh + var(--len, 250svh)); }
.about.is-active .about__pin {
  position: sticky; top: 0; height: 100svh; align-items: center;
  padding-block: calc(var(--nav-h) + 12px) 32px;
}
.reveal-word {
  opacity: var(--o, 1);
  color: color-mix(in srgb, var(--accent) calc(var(--b, 0) * 100%), var(--ink));
  /* la estela azul: un resplandor que sigue a las palabras que acaban de aparecer */
  text-shadow: 0 0 calc(var(--b, 0) * 26px) color-mix(in srgb, var(--accent) calc(var(--b, 0) * 70%), transparent);
}

/* ---------- Clientes ---------- */
.clients { padding: 0 0 clamp(80px, 12vw, 160px); overflow: hidden; }
.clients__title { padding: 0 var(--pad) 28px; font-size: 1rem; font-weight: 500; color: var(--mute); }

.marquee { overflow: hidden; border-block: 1.5px solid var(--line); }
.marquee + .marquee { border-top: 0; }
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 46s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li {
  padding: 22px clamp(28px, 4vw, 64px);
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 2.2rem); letter-spacing: -.02em; white-space: nowrap;
}
.marquee__track li:nth-child(even) { color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Proyectos ---------- */
.work { position: relative; padding: 0 var(--pad) clamp(80px, 12vw, 180px); }
.work__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 6.5rem); letter-spacing: -.04em; line-height: .95;
  margin-bottom: clamp(32px, 5vw, 72px);
}

.projects { border-top: 2px solid var(--ink); }
.projects li { border-bottom: 2px solid var(--ink); }

/* Base (móvil y tablet): cada proyecto va desplegado, en una columna */
.project {
  --cw: clamp(300px, 28vw, 460px);          /* ancho de la portada */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
  padding: clamp(28px, 4vw, 56px) 0;
}
.project__main { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* Titular: letra a letra, como el texto de "Sobre mí" (se atenúa, destella en azul y se asienta).
   js.js parte el texto en <span class="ch"> y los retrasa con --i. */
.project__head h3 {
  width: fit-content;
  margin-left: -.04em;                 /* alinea la F con la descripción de abajo */
  padding-bottom: .1em; margin-bottom: -.1em;   /* que no se corten las letras con cola (y, j...) */
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.2rem, 6.4vw, 6rem); line-height: .95; letter-spacing: -.04em;
  color: var(--ink);
  transition: opacity .3s;
}
.project__head h3 .word { white-space: nowrap; }

@keyframes ch-reveal {
  0%   { opacity: .14; color: var(--ink); text-shadow: 0 0 0 transparent; }
  45%  { opacity: 1;   color: #8fd3f4;
         text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 70%, transparent); }
  100% { opacity: 1;   color: var(--accent); text-shadow: 0 0 0 transparent; }
}
@keyframes sw-reveal { from { opacity: .14; } to { opacity: 1; } }

/* Móvil y tablet (sin hover): se revela al entrar en pantalla (.is-in lo pone js.js) */
.project.is-in h3 .ch { animation: ch-reveal .7s var(--ease) calc(var(--i) * 32ms) both; }
.project.is-in .project__more .sw { animation: sw-reveal .5s var(--ease) calc(.3s + var(--i) * 45ms) both; }

.project__more p { margin-top: 12px; color: var(--mute); }

/* Botón "Ver proyecto" */
.project__go {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 12px 20px; border: 1.5px solid currentColor; border-radius: 999px;
  font-weight: 500; font-size: .95rem; white-space: nowrap;
  transition: opacity .3s, background .25s, color .25s, border-color .25s;
}
.project__go::after {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate .3s var(--ease);
}
.project:hover .project__go { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.project:hover .project__go::after { translate: 3px 0; }

/* Portada con pastillas */
.project__cover {
  position: relative; margin: 0; overflow: hidden; border-radius: 8px;
  width: 100%; aspect-ratio: 3 / 2;
  background: linear-gradient(150deg, var(--c1), var(--c2));
}
.project__img { position: absolute; inset: 0; }
.project__cover img { width: 100%; height: 100%; object-fit: cover; }
.project__cover::after { /* velo para que las pastillas se lean sobre cualquier imagen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%);
}
.project__pills {
  position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.pill {
  max-width: 100%; padding: 6px 12px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: .7rem; font-weight: 600; line-height: 1.3;
  letter-spacing: .03em; text-transform: uppercase;
}

/* Ordenador con ratón: todo plegado; al pasar el cursor se despliega el proyecto */
@media (hover: hover) and (min-width: 1025px) {
  .project {
    grid-template-columns: minmax(0, 1fr) var(--cw); align-items: center;
    column-gap: clamp(32px, 4vw, 64px); padding: clamp(24px, 3vw, 40px) 0;
  }
  .project__main { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; }

  .project__more {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .55s var(--ease), opacity .3s;
  }
  .project__cover {
    height: 0; aspect-ratio: auto; opacity: 0;
    transition: height .6s var(--ease), opacity .4s;
  }
  .project__go { opacity: .45; }

  .project:hover .project__more, .project:focus-visible .project__more { max-height: 4em; opacity: 1; }
  .project:hover .project__cover, .project:focus-visible .project__cover {
    height: calc(var(--cw) * 2 / 3); opacity: 1;
  }
  .project:hover .project__go, .project:focus-visible .project__go { opacity: 1; }
  .project:hover h3 .ch, .project:focus-visible h3 .ch {
    animation: ch-reveal .7s var(--ease) calc(var(--i) * 32ms) both;
  }
  .project:hover .project__more .sw, .project:focus-visible .project__more .sw {
    animation: sw-reveal .5s var(--ease) calc(.3s + var(--i) * 45ms) both;
  }
  .projects:hover .project:not(:hover) .project__main { color: var(--mute); }
  .projects:hover .project:not(:hover) h3 { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .project:hover h3 .ch, .project:focus-visible h3 .ch, .project.is-in h3 .ch { animation: none; color: var(--accent); }
  .project:hover .sw, .project.is-in .sw { animation: none; }
}

/* =========================================================
   GALERÍA
   Fila horizontal que avanza al hacer scroll. Cada imagen crece y se ilumina al pasar
   por el centro (y se reduce y atenúa al alejarse). Siempre rectas. El movimiento va suavizado con inercia.
   Sin JS o con movimiento reducido: fila normal con desplazamiento táctil.
   ========================================================= */
.gallery { position: relative; background: var(--bg-2, var(--bg)); }
.gallery__pin { padding: clamp(64px, 9vw, 120px) 0; }
.gallery__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: 0 var(--pad); margin-bottom: clamp(24px, 4vw, 56px);
}
.gallery__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 6.5rem); letter-spacing: -.04em; line-height: .95;
}
.gallery__count {
  font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(1.25rem, 3vw, 2rem); color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.gallery__count b { color: var(--accent); font-weight: 700; }

.gallery__track {
  display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px);
  padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }

.gallery__item {
  --f: 1;                                   /* 0 = lejos del centro, 1 = en el centro (lo escribe js.js) */
  flex: none; scroll-snap-align: center;
  height: min(54svh, 500px);
  scale: calc(.84 + .16 * var(--f));
  opacity: calc(.4 + .6 * var(--f));
  translate: 0 var(--dy, 0);
}
.gallery__item figure { height: 100%; aspect-ratio: var(--ar, 4 / 5); display: flex; flex-direction: column; gap: 12px; }
.gallery__img {
  flex: 1; min-height: 0; overflow: hidden; border-radius: 10px;
  display: grid; place-items: end start; padding: 14px;
  background: linear-gradient(150deg, var(--c1), var(--c2));
  color: rgba(255, 255, 255, .9); font-size: .8rem;
}
.gallery__img img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; }
.gallery__item figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; font-weight: 600; }
.gallery__item figcaption span:last-child { font-weight: 500; opacity: .6; }

/* Modo anclado (lo activa js.js): la sección se queda fija mientras la fila avanza */
.gallery.is-active { height: calc(100svh + var(--len, 200svh)); }
.gallery.is-active .gallery__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(var(--nav-h) + 8px) 24px;
}
.gallery.is-active .gallery__track { overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform; }
.gallery.is-active .gallery__item { will-change: scale, opacity; }

@media (prefers-reduced-motion: reduce) {
  .contact::before { animation: none; }
  .gallery__item { scale: 1; opacity: 1; }
}

/* ---------- Footer: el email largo no debe desbordar en móvil ---------- */
.footer__email { overflow-wrap: anywhere; }
@media (max-width: 560px) { .footer__email { font-size: .78rem; letter-spacing: .01em; } }


/* ---------- Laboratorio ---------- */
.lab {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  background: var(--ink); color: var(--bg);
}
.lab__img { min-height: clamp(320px, 50vw, 720px); overflow: hidden; }
.lab__body {
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  padding: clamp(32px, 6vw, 96px);
}
.lab__body h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 5rem); letter-spacing: -.04em; line-height: .95;
}
.lab__body p { max-width: 36em; color: #c9cad4; }
.lab__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 999px;
  background: var(--accent); color: #fff; border: 2px solid var(--accent);
  font-weight: 600; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, translate .25s var(--ease);
}
.btn:hover { background: #fff; color: var(--ink); border-color: #fff; translate: 0 -2px; }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.btn--solid:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Servicios ---------- */
.skills { padding: clamp(80px, 12vw, 180px) var(--pad); }
.skills__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.4rem, 7vw, 6.5rem); letter-spacing: -.04em; line-height: .95;
  margin-bottom: clamp(32px, 5vw, 72px);
}
.skills__list { position: relative; }
.skills__list::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); transform-origin: left; }
.skills__list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px;
  position: relative; padding: 28px 0;
  transition: background .3s, padding .4s var(--ease);
}
.skills__list h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem); letter-spacing: -.03em; line-height: 1.05;
}
.skills__list p { color: var(--mute); max-width: 34em; align-self: center; }
@media (hover: hover) {
  .skills__list li:hover { padding-left: 20px; background: var(--bg-2); }
}

/* ---------- Contacto ---------- */
.contact {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(60px, 10vw, 140px) var(--pad);
  color: var(--ink);
  /* Base casi blanca: el color llega solo en manchas abstractas (ver ::before) */
  background: #fbfdff;
}
/* Luces que derivan despacio (solo transform: no repinta) */
.contact::before {
  content: ""; position: absolute; inset: -18%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 40% at 90% 12%, rgba(173, 217, 244, .62), rgba(173, 217, 244, 0) 100%),
    radial-gradient(40% 34% at 6% 86%, rgba(191, 226, 245, .8), rgba(191, 226, 245, 0) 100%),
    radial-gradient(26% 24% at 62% 70%, rgba(216, 238, 249, .85), rgba(216, 238, 249, 0) 100%),
    radial-gradient(24% 30% at 24% 14%, rgba(191, 226, 245, .5), rgba(191, 226, 245, 0) 100%),
    radial-gradient(22% 20% at 97% 90%, rgba(130, 195, 240, .42), rgba(130, 195, 240, 0) 100%);
  animation: ct-drift 20s ease-in-out infinite alternate;
}
@keyframes ct-drift {
  from { transform: translate3d(-5%, 2%, 0) scale(1); }
  to   { transform: translate3d(5%, -3%, 0) scale(1.08); }
}
.contact__kicker { font-weight: 500; margin-bottom: 16px; opacity: .85; }
.contact__intro h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(3rem, 8vw, 7.5rem); letter-spacing: -.045em; line-height: .9;
  margin-bottom: 24px;
}
.contact__intro a { border-bottom: 2px solid currentColor; font-weight: 600; word-break: break-word; }
.contact__intro a:hover { opacity: .75; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field--wide, .field--chips, .form__foot, .form__note { grid-column: 1 / -1; }
.field label, .field legend { font-size: .9rem; font-weight: 500; }
.field legend { padding: 0; margin-bottom: 10px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--ink) 45%, transparent);
  padding: 8px 0 10px; border-radius: 0; font-size: 1.1rem; resize: vertical;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 2px 0 0 var(--ink); }
.field .is-invalid { border-color: #d6361a !important; }

.field--chips { flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: center; }
.field--chips legend { width: 100%; float: left; }
.field--chips label { position: relative; cursor: pointer; }
.field--chips input { position: absolute; opacity: 0; inset: 0; }
.field--chips span {
  display: inline-block; padding: 8px 18px; border: 1.5px solid color-mix(in srgb, var(--ink) 60%, transparent); border-radius: 999px;
  transition: background .2s, color .2s;
}
.field--chips input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.field--chips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.form__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.contact .btn { background: var(--ink); color: #fff; border-color: var(--ink); }
.contact .btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.form__status { font-weight: 500; }
.form__note { font-size: .88rem; opacity: .8; }


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  position: relative;
  z-index: 10;

  width: 100%;
  padding: 7vw var(--pad) 25px;

  background: #000;
  color: #fff;

  border-radius: 30px 30px 0 0;
  overflow: hidden;
}


/* =========================================================
   CONTENIDO PRINCIPAL
   ========================================================= */

.footer__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-height: 42vh;
}


/* LOGO */

.footer__brand {
  margin-bottom: auto;
}

.footer__brand img {
  display: block;

  width: clamp(120px, 12vw, 220px);
  height: auto;
}


/* FRASE */

.footer__tagline {
  margin: 0 0 28px;

  max-width: 900px;

  font-size: clamp(2rem, 5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  font-weight: 500;
}


/* EMAIL */

.footer__email {
  display: inline-block;

  color: #fff;

  font-size: clamp(0.9rem, 1vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.03em;

  text-decoration: none;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.footer__email:hover {
  opacity: 0.55;
  transform: translateX(5px);
}


/* =========================================================
   PARTE INFERIOR
   ========================================================= */

.footer__bottom {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;

  gap: 30px;

  margin-top: 9vw;
  padding-top: 20px;

  border-top: 1px solid rgba(255, 255, 255, 0.25);
}


/* LINKS */

.footer__social,
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.footer__social a,
.footer__legal a {
  position: relative;

  color: rgba(255, 255, 255, 0.7);

  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;

  text-decoration: none;

  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}

.footer__social a:hover,
.footer__legal a:hover {
  color: #fff;
}


/* Línea animada debajo de los enlaces */

.footer__social a::after,
.footer__legal a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -4px;

  width: 100%;
  height: 1px;

  background: #fff;

  transform: scaleX(0);
  transform-origin: right;

  transition: transform 0.35s ease;
}

.footer__social a:hover::after,
.footer__legal a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* LEGAL */

.footer__legal {
  justify-content: center;
}


/* COPYRIGHT */

.footer__copyright {
  justify-self: end;

  color: rgba(255, 255, 255, 0.5);

  font-size: 0.72rem;
  letter-spacing: 0.02em;

  text-align: right;
}


/* =========================================================
   FOOTER · ANIMACIÓN
   ========================================================= */

/* =========================================================
   FOOTER · EXPANSIÓN CON EL SCROLL
   ========================================================= */

.site-footer {
  position: relative;
  z-index: 2;

  width: calc(100% - 30px);
  margin-left: 15px;

  min-height: 50vh;

  padding: 7vw var(--pad) 25px;

  background: #000;
  color: #fff;

  border-radius: 30px 30px 0 0;

  /*
    El JS controla esta variable.
    0 = footer pequeño
    1 = footer completamente expandido
  */
  --footer-progress: 0;

  transform-origin: center top;

  overflow: hidden;
}


/* =========================================================
   CONTENIDO DEL FOOTER
   ========================================================= */

.footer__main {
  position: relative;
  min-height: 35vh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* Logo */

.footer__brand {
  opacity: 1;
  transform: none;
}


/* Texto */

.footer__tagline {
  margin: auto 0 25px;

  max-width: 700px;

  font-size: clamp(2rem, 5vw, 5rem);
  line-height: .95;
  letter-spacing: -.045em;
}


/* Email */

.footer__email {
  color: #fff;
  text-decoration: none;

  font-size: clamp(1rem, 1.4vw, 1.4rem);
}


/* =========================================================
   PARTE INFERIOR
   ========================================================= */

.footer__bottom {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  align-items: end;

  gap: 30px;

  margin-top: 9vw;
  padding-top: 20px;

  border-top: 1px solid rgba(255,255,255,.25);
}


/* Links */

.footer__social,
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.footer__social a,
.footer__legal a {
  color: rgba(255,255,255,.7);

  font-size: .72rem;
  font-weight: 600;

  letter-spacing: .05em;

  text-decoration: none;
}


/* Copyright */

.footer__copyright {
  justify-self: end;

  color: rgba(255,255,255,.5);

  font-size: .72rem;

  text-align: right;
}


/* =========================================================
   ANULAMOS LA ANIMACIÓN ANTIGUA
   ========================================================= */

.footer-reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 900px) {

  .site-footer {
    width: calc(100% - 20px);
    margin-left: 10px;

    padding: 10vw var(--pad) 25px;
  }

  .footer__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 25px;
  }

  .footer__copyright {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }

}


@media (max-width: 560px) {

  .site-footer {
    width: calc(100% - 12px);
    margin-left: 6px;

    border-radius: 20px 20px 0 0;

    padding: 70px var(--pad) 25px;
  }

  .footer__main {
    min-height: 45vh;
  }

  .footer__tagline {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-top: 60px;
  }

}

/* Aparición escalonada */

.site-footer.is-visible .footer__brand {
    transition-delay: 0s;
}

.site-footer.is-visible .footer__tagline {
    transition-delay: .12s;
}

.site-footer.is-visible .footer__email {
    transition-delay: .22s;
}

.site-footer.is-visible .footer__social {
    transition-delay: .35s;
}

.site-footer.is-visible .footer__legal {
    transition-delay: .45s;
}

.site-footer.is-visible .footer__copyright {
    transition-delay: .55s;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .site-footer {
    padding: 10vw var(--pad) 25px;
  }

  .footer__main {
    min-height: 40vh;
  }

  .footer__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 25px;
  }

  .footer__copyright {
    justify-self: start;

    grid-column: 1 / -1;

    text-align: left;
  }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 560px) {

  .site-footer {
    padding: 70px var(--pad) 25px;

    border-radius: 20px 20px 0 0;
  }

  .footer__main {
    min-height: 48vh;
  }

  .footer__tagline {
    max-width: 95%;

    font-size: clamp(2rem, 10vw, 3rem);
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin-top: 60px;
  }

  .footer__legal {
    justify-content: flex-start;
  }

  .footer__copyright {
    text-align: left;
  }

}


/* =========================================================
   REDUCIR ANIMACIONES
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .footer-reveal {
    opacity: 1;
    transform: none;

    transition: none;
  }

  .footer__social a,
  .footer__legal a,
  .footer__email {
    transition: none;
  }

}


/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .about__pin { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .about__img { max-width: 130px; }
  .about__text { font-size: clamp(1.15rem, 5.2vw, 1.7rem); }
  .project { grid-template-columns: minmax(0, 1fr); }
  .project__go { opacity: 1; translate: 0 0; }
  .lab { grid-template-columns: minmax(0, 1fr); }
  .skills__list li { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ==========================================================
   VISTA DE CASO DE ESTUDIO (#/proyecto/slug)
   Los colores --c1 / --c2 los inyecta js.js según el proyecto.
   ========================================================== */
.case { --c1: #0e90d8; --c2: #9fd3ef; }

/* Marcadores de imagen del caso: sustitúyelos por <img> */
.ph--case { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.ph--v2 { background: linear-gradient(315deg, var(--c1), var(--c2)); }
.ph--v3 { background: var(--c1); }
.ph--v4 { background: var(--ink); color: #fff; }
.ph--v5 { background: var(--c2); color: #000; }

/* Cabecera */
.case__head { padding: calc(var(--nav-h) + clamp(36px, 7vw, 96px)) var(--pad) clamp(36px, 5vw, 72px); }
.case__num { font-weight: 500; color: var(--mute); margin-bottom: 18px; }
.case__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(3.2rem, 12.5vw, 12rem); line-height: .86; letter-spacing: -.05em;
  overflow-wrap: anywhere;
}
.case__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 64px; margin-top: clamp(28px, 4vw, 56px); align-items: start;
}
.case__tags { justify-content: flex-start; max-width: none; }
.case__intro { font-size: 1.2em; line-height: 1.45; max-width: 38em; }

/* Ficha */
.case__meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin: 0 var(--pad); padding: 24px 0;
  border-block: 2px solid var(--ink);
}
.case__meta dt { color: var(--mute); font-size: .88rem; margin-bottom: 4px; }
.case__meta dd { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.5rem); letter-spacing: -.02em; line-height: 1.15; }

/* Banda principal */
.case__band { margin: clamp(28px, 4vw, 56px) var(--pad) 0; overflow: hidden; }
.case__band .ph { aspect-ratio: 16 / 7; min-height: 220px; }

/* Historia */
.story {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 32px clamp(32px, 8vw, 128px);
  padding: clamp(64px, 10vw, 150px) var(--pad);
}
.story h2, .story h3 {
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
}
.story__role h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 20px; }
.story__role li { padding: 14px 0; border-top: 1.5px solid var(--line); }
.story__role li:last-child { border-bottom: 1.5px solid var(--line); }
.story__blocks { display: grid; gap: clamp(32px, 5vw, 64px); }
.story__blocks h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-bottom: 10px; color: var(--accent); }
.story__blocks p { max-width: 38em; }

/* Enfoque (secuencia real de pasos, por eso va numerado) */
.approach { padding: 0 var(--pad) clamp(64px, 10vw, 150px); }
.approach__title, .feature__title, .flow__title, .brand__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 5.5rem); letter-spacing: -.04em; line-height: .95;
}
.approach__title { margin-bottom: clamp(28px, 4vw, 56px); }
.approach__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; counter-reset: step; }
.approach__list li { border-top: 2px solid var(--ink); padding-top: 16px; counter-increment: step; }
.approach__list li::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 28px;
  font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; color: var(--accent);
}
.approach__list h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; margin-bottom: 8px; }
.approach__list p { color: var(--mute); font-size: .98rem; }

/* Secciones con imágenes */
.feature, .flow, .brand { padding: clamp(64px, 10vw, 150px) var(--pad); }
.feature__head, .flow__head, .brand__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.feature__head p, .flow__head p, .brand__head p { max-width: 36em; color: var(--mute); }

.feature__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feature__grid > :first-child { grid-column: 1 / -1; }
.feature__grid .ph { aspect-ratio: 4 / 3; }
.feature__grid > :first-child .ph { aspect-ratio: 16 / 8; }

.flow { background: var(--bg-2); }
.flow__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.flow__card .ph { aspect-ratio: 3 / 4; }
.flow__card figcaption { margin-top: 10px; font-size: .92rem; font-weight: 500; }

.brand__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.brand__grid figure { grid-column: span 2; }
.brand__grid figure:nth-child(1), .brand__grid figure:nth-child(2) { grid-column: span 3; }
.brand__grid figure:last-child { grid-column: 1 / -1; }
.brand__grid .ph { aspect-ratio: 4 / 3; }
.brand__grid figure:last-child .ph { aspect-ratio: 16 / 7; }

/* Siguiente proyecto */
.next {
  display: block; padding: clamp(56px, 9vw, 130px) var(--pad);
  background: var(--accent); color: #fff;
  transition: background .35s, color .35s;
}
.next small { display: block; font-size: 1rem; font-weight: 500; opacity: .85; margin-bottom: 12px; }
.next strong {
  display: block; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.8rem, 11vw, 10rem); line-height: .88; letter-spacing: -.05em;
  transition: translate .45s var(--ease);
}
@media (hover: hover) {
  .next:hover { background: var(--ink); }
  .next:hover strong { translate: 24px 0; }
}

@media (max-width: 900px) {
  .case__top, .story, .feature__head, .flow__head, .brand__head { grid-template-columns: minmax(0, 1fr); }
  .case__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approach__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .flow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .approach__list { grid-template-columns: minmax(0, 1fr); }
  .feature__grid { grid-template-columns: minmax(0, 1fr); }
  .brand__grid figure, .brand__grid figure:nth-child(1), .brand__grid figure:nth-child(2) { grid-column: 1 / -1; }
}


/* =========================================================
   BOTÓN "MÁS PROYECTOS" (final de Proyectos seleccionados)
   ========================================================= */
.more-works {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  width: fit-content; margin: clamp(40px, 6vw, 80px) auto 0;
  font-size: .85rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
}
.more-works__plus {
  position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--ink);
  transition: rotate .5s var(--ease), background .3s;
}
.more-works__plus::before, .more-works__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  background: #fff;
}
.more-works__plus::before { width: 14px; height: 1.5px; }
.more-works__plus::after { width: 1.5px; height: 14px; }
.more-works:hover .more-works__plus { rotate: 90deg; background: var(--accent); }

/* =========================================================
   PÁGINA "TODOS LOS PROYECTOS" · cuadrícula en mosaico
   Patrón: media · media · ancha, y vuelta a empezar
   ========================================================= */
.all__head { padding: calc(var(--nav-h) + clamp(36px, 7vw, 96px)) var(--pad) clamp(28px, 4vw, 56px); }
.all__title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 8rem); line-height: .9; letter-spacing: -.05em;
}
.all__lead { margin-top: 20px; max-width: 34em; color: var(--mute); }

.grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  padding: 0 var(--pad) clamp(80px, 12vw, 180px);
}
.tile {
  position: relative; display: block; overflow: hidden; border-radius: 10px;
  aspect-ratio: 29 / 20;
  background: linear-gradient(150deg, var(--c1), var(--c2));
}
.tile:nth-child(3n) { grid-column: 1 / -1; aspect-ratio: 22 / 9; }
.tile__img { position: absolute; inset: 0; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.tile:hover .tile__img img, .tile:focus-visible .tile__img img { scale: 1.05; }

/* Tarjeta de información: título, etiqueta y flecha */
.tile__info {
  position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink);
  transition: opacity .35s, translate .45s var(--ease);
}
.tile__title { font-size: .85rem; font-weight: 500; line-height: 1.2; }
.tile__tag {
  display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); font-size: .62rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mute);
}
.tile__arrow {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: .8rem; line-height: 1;
  transition: background .3s, rotate .4s var(--ease);
}
.tile:hover .tile__arrow, .tile:focus-visible .tile__arrow { background: var(--accent); rotate: -45deg; }

/* Ratón: la tarjeta aparece al pasar el cursor. Táctil: siempre visible */
@media (hover: hover) and (pointer: fine) {
  .tile__info { opacity: 0; translate: 0 8px; }
  .tile:hover .tile__info, .tile:focus-visible .tile__info { opacity: 1; translate: 0 0; }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .tile, .tile:nth-child(3n) { aspect-ratio: 4 / 3; }
}


/* ==========================================================
   PÁGINA DE PROYECTO · MAQUETACIÓN "GALERÍA"
   (réplica de la página de Open Mind; la genera renderGalleryCase en js.js)
   Las imágenes se muestran a su proporción natural: basta con poner el src.
   ========================================================== */
.gcase__head { padding: calc(var(--nav-h) + clamp(36px, 7vw, 96px)) var(--pad) clamp(28px, 4vw, 56px); }
.gcase__tagline {
  margin-top: clamp(40px, 6vw, 88px); max-width: 34em;
  font-family: var(--f-body); font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; letter-spacing: normal;
}
.gcase__meta {
  display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 6vw, 96px);
  margin-top: clamp(28px, 4vw, 56px); padding-top: 24px; border-top: 2px solid var(--ink);
}
.gcase__meta dt { color: var(--mute); font-size: .88rem; margin-bottom: 4px; }
.gcase__meta dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.5rem); letter-spacing: -.02em; line-height: 1.15; }
.gcase__meta a { border-bottom: 1.5px solid currentColor; transition: color .25s; }
.gcase__meta a:hover { color: var(--accent); }

/* Medios: imagen a su proporción, marcador con --ar, vídeo 16:9 */
.gcase__fig { margin: 0; overflow: hidden; border-radius: 10px; }
.gcase__fig img { display: block; width: 100%; height: auto; }
.gcase__fig img.is-cover { height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; }
.gcase__fig .ph { height: auto; aspect-ratio: var(--ar, 16 / 9); }
.gcase__video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.gcase__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gcase__hero { margin: 0 var(--pad); }

/* Textos + mi rol */
.gcase__about {
  display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr);
  gap: 32px clamp(32px, 8vw, 128px);
  padding: clamp(56px, 9vw, 130px) var(--pad);
}

.gcase__text { grid-column: 2; }
.gcase__text p { max-width: 40em; font-size: 1.1em; line-height: 1.55; }
.gcase__text p + p { margin-top: 1.2em; }
.gcase__text h2 {
  margin: clamp(40px, 6vw, 80px) 0 20px;
  font-family: var(--f-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.gcase__text ul li { padding: 14px 0; border-top: 1.5px solid var(--line); font-weight: 500; }
.gcase__text ul li:last-child { border-bottom: 1.5px solid var(--line); }

/* Galería: filas de 1 o 2 columnas (--n lo escribe el JS) */
.gcase__gallery { display: grid; gap: 16px; padding: 0 var(--pad) clamp(64px, 10vw, 150px); }
.gcase__row { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 16px; }

/* Texto breve intercalado entre imágenes (alineado con la columna de texto de arriba) */
.gcase__note {
  display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr);
  gap: 0 clamp(32px, 8vw, 128px);
  padding: clamp(24px, 4vw, 56px) 0;
}
.gcase__note p {
  grid-column: 2; max-width: 34em;
  font-size: 1.05em; line-height: 1.55; color: var(--mute);
}

/* Anterior / siguiente */
.gcase__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.gcase__nav a {
  display: block; padding: clamp(36px, 6vw, 90px) var(--pad);
  transition: background .35s, color .35s;
}
.gcase__nav a + a { text-align: right; border-left: 2px solid var(--ink); }
.gcase__nav small { display: block; margin-bottom: 10px; font-size: 1rem; font-weight: 500; opacity: .7; }
.gcase__nav strong {
  display: block; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 4.5rem); line-height: .95; letter-spacing: -.045em; overflow-wrap: anywhere;
}
@media (hover: hover) { .gcase__nav a:hover { background: var(--accent); color: #fff; } }

@media (max-width: 900px) {
  /* Esquinas de las imágenes: en pantallas estrechas 10px se ven mucho más marcados que en PC,
     así que se reducen en proporción al ancho (900px → 10px · 390px → ~4px) */
  .gcase__fig { border-radius: clamp(3px, 1.1vw, 10px); }
  .gcase__about { grid-template-columns: minmax(0, 1fr); }
  .gcase__text { grid-column: 1; }
  .gcase__note { grid-template-columns: minmax(0, 1fr); }
  .gcase__note p { grid-column: 1; }
}
@media (max-width: 640px) {
  .gcase__row { grid-template-columns: minmax(0, 1fr); }
  .gcase__nav { grid-template-columns: minmax(0, 1fr); }
  .gcase__nav a + a { text-align: left; border-left: 0; border-top: 2px solid var(--ink); }
}


/* ==========================================================
   BARRA DE SCROLL
   Carril fino a la derecha, thumb azul redondeado, sin flechas.
   Chrome, Edge y Safari usan ::-webkit-scrollbar; Firefox, scrollbar-color.
   (No se mezclan: en Chrome moderno scrollbar-width anularía los ::-webkit.)
   Para cambiar el grosor o el color, edita las variables.
   ========================================================== */
:root {
  --sb-size: 10px;                       /* grosor de la barra */
  --sb-track: var(--bg);                 /* carril */
  --sb-thumb: var(--accent);             /* barra que se mueve */
  --sb-thumb-hover: #0a6fa8;
}

::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 2px solid var(--sb-track);     /* deja aire alrededor y la hace parecer más fina */
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: var(--sb-track); }

@supports (-moz-appearance: none) {
  html { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }
}

/* La galería horizontal de la home mantiene su propio scroll oculto */
.gallery__track::-webkit-scrollbar { display: none; }

/* Casos de estudio en PC: contenido más estrecho, centrado, con aire a los lados (≈65 % del ancho).
   Solo ordenador (≥1025px): tablet y móvil se quedan como estaban. */
@media (min-width: 1025px) {
  .gcase__head,
  .gcase__about,
  .gcase__gallery { padding-left: max(var(--pad), 17.5%); padding-right: max(var(--pad), 17.5%); }
  .gcase__hero { margin-left: max(var(--pad), 17.5%); margin-right: max(var(--pad), 17.5%); }
}


/* ==========================================================
   HERO · ENTRADA TIPO "LETRAS + IMAGEN" (js.js: initHeroTitle)
   Las letras suben desde una máscara, aparece una pieza de imagen entre "Yagua" y "Lab"
   que se abre, y después entra el botón. Empieza al terminar el preloader (.hero-in).
   ========================================================== */
.hl { display: block; overflow: hidden; padding: .04em 0 .14em; margin: -.04em 0 -.14em; }
.hw { display: inline-block; white-space: nowrap; }
.hc { display: inline-block; }
.hero__chip {
  display: inline-block; width: 1.15em; height: .74em; margin: 0 .06em; border-radius: .09em; vertical-align: baseline;
  background: url("img/proyectos/open-mind/imagen-proyecto-1.gif") center / cover,
              linear-gradient(135deg, #6fd0f3, #0f6a9e 55%, #06283f);   /* cambia la imagen aquí */
}
.js:not(.hero-in) .hc { transform: translateY(112%); }
.js:not(.hero-in) .hero__chip { width: 0; margin: 0; }
.js:not(.hero-in) .hero__cta { opacity: 0; }
.hero-in .hc { animation: hc-up 1.05s cubic-bezier(.16, 1, .3, 1) calc(.08s + var(--i) * 40ms) backwards; }
.hero-in .hero__chip { animation: chip-in 1.1s cubic-bezier(.16, 1, .3, 1) .55s backwards; }
.hero-in .hero__cta { animation: hero-up .9s cubic-bezier(.16, 1, .3, 1) 1.05s backwards; }
.hero-in .hero__plus { animation: plus-in 1.1s cubic-bezier(.16, 1, .3, 1) 1.2s backwards; }
@keyframes hc-up { from { transform: translateY(112%); } }
@keyframes chip-in { from { width: 0; margin: 0; } }
@keyframes hero-up { from { opacity: 0; translate: 0 30px; } }
@keyframes plus-in { from { rotate: -180deg; scale: .4; } }
@media (prefers-reduced-motion: reduce) {
  .hero-in .hc, .hero-in .hero__chip, .hero-in .hero__cta, .hero-in .hero__plus { animation: none; }
}

/* ==========================================================
   TRANSICIÓN ENTRE PÁGINAS (js.js: initPageTransition)
   Una cortina sube y cubre la página; en la página nueva se retira hacia arriba.
   ========================================================== */
.pt {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: #fff; color: #000;   /* cortina blanca con el logo en negro */
  transform: translateY(100%); visibility: hidden; pointer-events: none;
}
.pt__logo { height: clamp(60px, 12vmin, 120px); width: auto; aspect-ratio: 457.7 / 629.33; opacity: 0; }
.pt.is-in { visibility: visible; pointer-events: all; animation: pt-in .75s cubic-bezier(.76, 0, .24, 1) forwards; }
.pt.is-in .pt__logo { animation: pt-label .5s .25s ease forwards; }
.pt.is-covered { visibility: visible; pointer-events: all; transform: none; }
.pt.is-covered .pt__logo, .pt.is-out .pt__logo { opacity: 1; }
.pt.is-out { visibility: visible; animation: pt-out .8s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes pt-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pt-out { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes pt-label { to { opacity: 1; } }


/* ---------- Qué hago · aparición escalonada (js.js: initSkills) ---------- */
.skills__list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--line); transform-origin: left; }
.skills__list h3 { overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.js .skills:not(.is-in) .hc { transform: translateY(112%); }
.js .skills:not(.is-in) .skills__list p { opacity: 0; }
.js .skills:not(.is-in) .skills__list::before, .js .skills:not(.is-in) .skills__list li::after { transform: scaleX(0); }
.skills.is-in .skills__title .hc { animation: hc-up 1.05s cubic-bezier(.16, 1, .3, 1) calc(.05s + var(--i) * 40ms) backwards; }
.skills.is-in .skills__list::before { animation: line-in 1.2s cubic-bezier(.16, 1, .3, 1) .3s backwards; }
.skills.is-in .skills__list h3 .hc { animation: hc-up 1.05s cubic-bezier(.16, 1, .3, 1) calc(.5s + var(--r) * .16s) backwards; }
.skills.is-in .skills__list p { animation: hero-up .9s cubic-bezier(.16, 1, .3, 1) calc(.62s + var(--r) * .16s) backwards; }
.skills.is-in .skills__list li::after { animation: line-in 1.2s cubic-bezier(.16, 1, .3, 1) calc(.55s + var(--r) * .16s) backwards; }
@keyframes line-in { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .skills.is-in .hc, .skills.is-in .skills__list p, .skills.is-in .skills__list::before, .skills.is-in .skills__list li::after { animation: none; }
}

/* La página de detrás también se mueve durante la transición (parallax suave).
   Se usa la propiedad "translate" para no chocar con los transform de otros scripts (p. ej. el footer). */
html.pt-leaving main, html.pt-leaving .site-footer { animation: pt-page-out .75s cubic-bezier(.76, 0, .24, 1) forwards; }
html.pt-arriving main, html.pt-arriving .site-footer { animation: pt-page-in .8s cubic-bezier(.76, 0, .24, 1) backwards; }
@keyframes pt-page-out { to { translate: 0 -16vh; opacity: .45; } }
@keyframes pt-page-in { from { translate: 0 16vh; opacity: .45; } }


/* ==========================================================
   BANDA CTA · CONTACTO  (js.js: initCta)
   Paso 1: "Quiero [servicio]  nuevo →"   ·   Paso 2: "Quiero [servicio]" + nombre + email + "next"
   Todo se mide en "em" a partir de --f, que sale del ancho de la sección (container query
   units): la banda escala entera. Para hacerla más grande o pequeña, cambia el 4cqw de --f.
   Colores: el azul de la web (--accent).
   ========================================================== */
.cta {
  container-type: inline-size;
  padding: clamp(48px, 7vw, 110px) clamp(10px, 1.2vw, 18px) clamp(28px, 3.4vw, 56px);
  background: var(--bg);
}
.cta__band {
  --f: clamp(22px, 4cqw, 84px);                  /* tamaño base: texto de las píldoras */
  --pill-h: 1.4em;                               /* alto de cada píldora */
  --pitch: 1.66em;                               /* distancia entre píldoras (alto + hueco) */
  position: relative; overflow: hidden;
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* los dos pasos comparten celda */
  height: 9em;                                   /* deja ~.5em libres arriba y abajo de las 5 píldoras */
  border-radius: clamp(20px, 1.8cqw, 40px);
  background: var(--accent); color: #fff;
  font-family: var(--f-display); font-weight: 500; font-size: var(--f);
  line-height: 1; letter-spacing: -.035em;
}

/* Pasos: se cruzan con un fundido y un pequeño desplazamiento */
.cta__step {
  grid-area: 1 / 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease .2s, transform .6s var(--ease) .2s, visibility 0s;
}
.cta__band[data-step="2"] .cta__step--pick {
  opacity: 0; visibility: hidden; transform: translateY(-8%); pointer-events: none;
  transition: opacity .35s ease, transform .5s var(--ease), visibility 0s .5s;
}
.cta__step--form {
  position: relative; flex-direction: column; gap: .5em; padding: 0 .6em;
  opacity: 0; visibility: hidden; transform: translateY(8%); pointer-events: none;
  transition: opacity .35s ease, transform .5s var(--ease), visibility 0s .5s;
}
.cta__band[data-step="2"] .cta__step--form {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .5s ease .2s, transform .6s var(--ease) .2s, visibility 0s;
}

/* ----- Paso 1 ----- */
.cta__lead {
  flex: none; margin-right: .05em;
  font-size: 1.6em; font-weight: 500; letter-spacing: -.045em; line-height: 1;
}

/* Rueda: muestra justo 5 píldoras y se queda a ~.2em de los bordes de la banda, así que ninguna
   píldora llega a tocar el borde superior ni el inferior (la sexta queda recortada fuera). */
.cta__wheel {
  position: relative; flex: none; align-self: center; width: 7.1em; height: 8.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.5%, #000 98.5%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 1.5%, #000 98.5%, transparent);
}
.cta__track {
  --i: 0;                                        /* posición actual (la escribe js.js) */
  position: absolute; left: 0; right: 0; top: 50%;
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--pitch) - var(--pill-h));
  transform: translateY(calc(var(--i) * var(--pitch) * -1 - var(--pill-h) / 2));
  transition: transform .7s var(--ease);
  will-change: transform;
}
.cta__track li { flex: none; }

.cta__pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--pill-h); padding: 0 .48em; white-space: nowrap;
  border: max(2px, .03em) solid #fff; border-radius: 999px;
  background: transparent; color: inherit;
  font: inherit; letter-spacing: inherit; line-height: 1; cursor: pointer;
  transition: background .45s, color .45s;
}
.cta__pill:hover { background: rgba(255, 255, 255, .14); }
.cta__track li.is-active .cta__pill { background: #fff; color: var(--accent); cursor: default; }
.cta__pill:focus-visible, .cta__next:focus-visible, .cta__chip:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* Botón blanco "nuevo →" / "next →" */
.cta__next {
  flex: none; display: inline-flex; align-items: center; gap: .42em;
  height: 1.38em; padding: 0 .58em 0 .48em;
  border: 0; border-radius: 999px; background: #fff; color: var(--accent);
  font: inherit; letter-spacing: inherit; line-height: 1; cursor: pointer;
  transition: background .3s, color .3s, scale .3s var(--ease);
}
.cta__next svg { width: .72em; height: .72em; flex: none; transition: translate .35s var(--ease); }
.cta__next:hover { background: #000; color: #fff; }
.cta__next:hover svg { translate: .12em 0; }
.cta__next:active { scale: .97; }

/* ----- Paso 2 ----- */
.cta__need { display: flex; align-items: center; gap: .55em; font-size: .54em; letter-spacing: -.04em; }
.cta__chip {
  height: 1.7em; padding: 0 .82em;
  border: 0; border-radius: 999px; background: #fff; color: var(--accent);
  font: inherit; font-size: .63em; letter-spacing: -.02em; line-height: 1; cursor: pointer;
  transition: background .3s, color .3s;
}
.cta__chip:hover { background: #000; color: #fff; }

.cta__fields { display: flex; align-items: center; gap: .25em; width: 100%; }
.cta__input {
  flex: 1 1 0; min-width: 0; height: 1.4em; padding: 0 .42em;
  border: max(2px, .03em) solid #fff; border-radius: 999px;
  background: transparent; color: #fff; caret-color: #fff;
  font: inherit; letter-spacing: inherit; line-height: 1; outline: none;
  transition: background .3s, border-color .3s;
}
.cta__input::placeholder { color: rgba(255, 255, 255, .5); opacity: 1; }
.cta__input:focus { background: rgba(255, 255, 255, .13); }
.cta__input.is-invalid { border-color: #ffd166; background: rgba(255, 209, 102, .16); }
.cta__input:-webkit-autofill {
  -webkit-text-fill-color: #fff; caret-color: #fff;
  -webkit-box-shadow: 0 0 0 100px var(--accent) inset; transition: background-color 9999s;
}
.cta__msg {
  position: absolute; left: 0; right: 0; bottom: 1.1em;
  font-size: .3em; font-weight: 500; letter-spacing: 0; text-align: center;
}
.cta__msg:empty { display: none; }

/* ----- Móvil y tablet estrecha: columna ----- */
@container (max-width: 700px) {
  .cta__band {
    --f: clamp(22px, 8.2cqw, 52px);
    height: auto; border-radius: clamp(18px, 4.5cqw, 28px);
  }
  .cta__step--pick { flex-direction: column; justify-content: center; gap: .4em; padding: .9em 0 1em; }
  .cta__lead { margin: 0; font-size: 1.45em; }
  .cta__wheel {
    align-self: stretch; width: auto; height: calc(var(--pitch) * 3.7);
    /* en columna las píldoras de los extremos se desvanecen antes de llegar al texto y al botón */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  }
  .cta__next { margin: 0; }

  .cta__step--form { gap: .6em; padding: 1em .7em 1.1em; }
  .cta__need { font-size: .8em; }
  .cta__fields { flex-direction: column; align-items: stretch; gap: .35em; }
  .cta__input { flex: none; padding: 0 .55em; }
  .cta__fields .cta__next { align-self: center; margin-top: .15em; }
  .cta__msg { position: static; font-size: .5em; }
}

@media (prefers-reduced-motion: reduce) {
  .cta__track, .cta__step { transition: none; }
}


/* ---------- Logotipo en SVG (menú y pie): hereda el color del texto ---------- */
.nav__logo svg { display: block; height: 38px; width: auto; color: inherit; }
.footer__brand svg { display: block; height: clamp(56px, 7vw, 110px); width: auto; color: #fff; }


/* ---------- Anchura de la página (móvil) ----------
   Red de seguridad: si alguna pieza se pasara de ancho, se recorta en lugar de ensanchar la página.
   Así el navegador móvil no "aleja" la vista ni descoloca la cortina de transición. */
body { overflow-x: clip; }
.flow__card, .brand__grid figure, .feature__grid figure, .approach__list li { min-width: 0; }

/* Marcadores de imagen de los casos de estudio: el alto lo marca su proporción (aspect-ratio),
   no el 100% del contenedor; así los pies de foto no quedan tapados por la fila siguiente. */
.ph--case { height: auto; }


/* ==========================================================
   VISTAS (todo el sitio vive en index.html · js.js: initRouter)
   Solo una vista se muestra a la vez: inicio, todos los proyectos o caso de estudio.
   ========================================================== */
[data-view][hidden] { display: none !important; }

/* Entrada directa a un proyecto o al listado: sin intro de carga (el preloader es solo para la home) */
.no-intro .loader { display: none !important; }