/* ---------- Base ---------- */
:root {
  --ink: #000;
  --paper: #fff;
  --gutter: clamp(16px, 6.8vw, 96px);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

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

html, body { margin: 0; padding: 0; }
html, body { overflow-x: clip; }   /* el dibujo sobresale sin crear scroll lateral */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Cursor: círculo gris (más grande sobre lo que se puede pinchar) ---------- */
:root {
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%238a8a8a' fill-opacity='.85'/%3E%3C/svg%3E") 10 10, auto;
  --cursor-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='15' fill='%238a8a8a' fill-opacity='.55'/%3E%3C/svg%3E") 18 18, pointer;
}
html { cursor: var(--cursor); }
a, button, .hero-title.is-docked { cursor: var(--cursor-link); }

/* ---------- Cabecera: ABOUT ME / CONTACT ---------- */
.site-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 50;
  padding: clamp(18px, 4vh, 40px) clamp(16px, 3.4vw, 48px);
}

.nav { display: flex; gap: clamp(20px, 4vw, 52px); }

.nav-link {
  position: relative;
  display: inline-block;
  font-size: clamp(16px, 2.4vw, 32px);
  letter-spacing: .01em;
  line-height: 1.15;
}

/* Al pasar el ratón: un poco más grande, gris y algo difuminado */
.nav-link span {
  display: inline-block;
  transition: transform .4s var(--ease), color .4s var(--ease), filter .4s var(--ease);
}
.nav-link:hover span,
.nav-link:focus-visible span {
  transform: scale(1.08);
  color: #8a8a8a;
  filter: blur(1px);
}

.sr-only {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 5;                    /* el titular fijo queda por encima del resto de secciones */
  min-height: 100vh;
}

/* El titular va fijo: main.js lo mueve de grande y centrado a pequeño
   en la esquina superior izquierda según se baja */
.hero-title {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  margin: 0;
  width: max-content;
  max-width: 92vw;
  text-align: center;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 7.9vw, 160px);  /* lo más grande que cabe en dos líneas */
  white-space: nowrap;
  line-height: 1.05;
  letter-spacing: .01em;
  transform-origin: center;
  will-change: transform;
}

.hero-explore {
  position: absolute;
  left: 50%;
  /* justo debajo del titular centrado (main.js da --title-h) */
  top: calc(44vh + var(--title-h, 200px) / 2 + clamp(18px, 4vh, 40px));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .2em;
  font-size: clamp(15px, 2vw, 27px);
  width: max-content;
  /* aparece cuando el titular ya ha entrado ("backwards" para no pisar
     el desvanecido que main.js le pone al bajar) */
  animation: explore-in .9s var(--ease) 1.15s backwards;
}
@keyframes explore-in {
  from { opacity: 0; translate: 0 14px; }
}

/* Entrada del titular: cada línea sube desde abajo, como saliendo de una ranura */
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;           /* que no se corte la base de las letras */
  margin-bottom: -.06em;
}
.hero-title .line > span {
  display: inline-block;
  animation: line-in 1.1s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-title .line:nth-child(2) > span { animation-delay: .14s; color: #8a8a8a; }  /* GRAPHIC DESIGNER en gris */
@keyframes line-in {
  from { transform: translateY(110%) rotate(4deg); opacity: 0; filter: blur(6px); }
  60%  { opacity: 1; }
  to   { transform: none; filter: blur(0); }
}

.hero-explore .arrow {
  display: inline-block;
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ---------- Estela de mensajes estilo iPhone (main.js los crea) ---------- */
.bubbles {
  position: fixed;
  inset: 0;
  z-index: 30;                 /* por debajo del titular y del menú */
  pointer-events: none;
}
.bubble {
  position: absolute;
  max-width: 260px;
  padding: 9px 15px;
  border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
  /* el color lo pone main.js en --bubble y --bubble-ink */
  background: var(--bubble, #0a84ff);
  color: var(--bubble-ink, #fff);
  animation: bubble-in .35s cubic-bezier(.2, 1.4, .4, 1) both;
  transition: opacity .6s ease, translate .6s ease;
}
/* enviado: sale hacia arriba a la izquierda del cursor */
.bubble.is-sent {
  translate: calc(-100% - 6px) calc(-100% - 6px);
  transform-origin: bottom right;
}
/* recibido: sale hacia arriba a la derecha del cursor */
.bubble.is-received {
  translate: 6px calc(-100% - 6px);
  transform-origin: bottom left;
}
/* colita del bocadillo: forma sólida en SVG, no tapa lo que hay detrás */
.bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 17px;
  height: 21px;
  background: var(--bubble, #0a84ff);
  -webkit-mask: no-repeat center / 100% 100%;
  mask: no-repeat center / 100% 100%;
}
.bubble.is-sent { border-bottom-right-radius: 6px; }
.bubble.is-sent::before {
  right: -8px;
  -webkit-mask-image: var(--tail-sent);
  mask-image: var(--tail-sent);
}
:root {
  --tail-sent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 21'%3E%3Cpath d='M0 0H9V6C9 12 12 17 17 19C15 20 12 21 9 21H0Z' fill='%23000'/%3E%3C/svg%3E");
}
.bubble.is-received { border-bottom-left-radius: 6px; }
.bubble.is-received::before {
  left: -8px;
  -webkit-mask-image: var(--tail-received);
  mask-image: var(--tail-received);
}
:root {
  --tail-received: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 21'%3E%3Cpath d='M17 0H8V6C8 12 5 17 0 19C2 20 5 21 8 21H17Z' fill='%23000'/%3E%3C/svg%3E");
}

.bubble.is-leaving { opacity: 0; }
.bubble.is-gone { opacity: 0; transition: opacity .2s ease; }   /* al bajar: fuera de golpe */
.bubble.is-sent.is-leaving { translate: calc(-100% - 6px) calc(-100% - 36px); }
.bubble.is-received.is-leaving { translate: 6px calc(-100% - 36px); }

@keyframes bubble-in {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ---------- Franja de proyectos (scroll horizontal) ---------- */
.work {
  position: relative;
  z-index: 3;
  /* la altura real la calcula main.js: 100vh + recorrido horizontal */
  height: 300vh;
}

.work-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.work-track {
  --card-h: min(58vh, 44vw);
  --card-w: calc(var(--card-h) * .83);
  display: flex;
  gap: clamp(20px, 3.2vw, 46px);
  padding: 0 var(--gutter);
  will-change: transform;
}

.project {
  flex: 0 0 var(--card-w);
  display: flex;
  flex-direction: column;
}

/* el título y la descripción van debajo de la portada */
.project-info {
  order: 2;
  margin-top: clamp(20px, 3vh, 30px);
}

.project-title {
  margin: 0;
  font-family: "Nunito Sans", "Avenir Next", Avenir, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.7vw, 38px);
  letter-spacing: .01em;
  line-height: 1.05;
}

.project-desc {
  margin: .2em 0 0;
  font-family: "Nunito Sans", "Avenir Next", Avenir, Helvetica, sans-serif;
  font-size: clamp(13px, 1.3vw, 18px);
}

.project-cover {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: clamp(14px, 1.6vw, 24px);
  overflow: hidden;
  background: #000;
  transform-origin: center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.project-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.project:hover .project-cover,
.project:focus-visible .project-cover {
  transform: scale(1.05);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}
.project:hover .project-cover img { transform: scale(1.04); }
.project.is-empty { cursor: var(--cursor); }

/* Proyectos que aún no están: degradado difuminado de grises + candado */
.project.is-empty .project-cover {
  background: #8c8c8c;
  /* Safari no recorta el desenfoque con border-radius: se recorta a mano */
  clip-path: inset(0 round clamp(14px, 1.6vw, 24px));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}
.project.is-empty .project-cover::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at var(--g1, 25% 20%), #fff 0, transparent 45%),
    radial-gradient(circle at var(--g2, 80% 75%), #000 0, transparent 50%),
    radial-gradient(circle at var(--g3, 70% 15%), #d9d9d9 0, transparent 40%),
    radial-gradient(circle at var(--g4, 15% 85%), #3a3a3a 0, transparent 45%),
    linear-gradient(160deg, #e6e6e6, #6b6b6b 55%, #1a1a1a);
  filter: blur(28px);
}
.project.is-empty .project-cover::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.2' fill='%23888' fill-opacity='.25'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3Ccircle cx='12' cy='15.4' r='1.3' fill='%23888' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* cada tarjeta con las manchas en un sitio distinto */
.project.is-empty:nth-child(even) .project-cover { --g1: 75% 25%; --g2: 20% 70%; --g3: 30% 10%; --g4: 85% 90%; }
.project.is-empty:nth-child(3n) .project-cover   { --g1: 50% 85%; --g2: 60% 20%; --g3: 10% 40%; --g4: 90% 55%; }
.project.is-empty:hover .project-cover { transform: none; box-shadow: none; }

/* ---------- Texto gigante en movimiento al final de la portada ---------- */
.hello {
  position: relative;
  z-index: 3;
  /* espacio en blanco entre los proyectos y el texto en movimiento */
  margin-top: 6vh;
  padding-bottom: 14vh;
  overflow: hidden;
}
.marquee { width: 100%; }
/* dos mitades iguales: al llegar a -50% vuelve al principio sin que se note */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee-track span {
  flex: none;
  padding-right: .45em;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(72px, 15vw, 270px);
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.marquee-track em {
  font-style: normal;
  color: #8a8a8a;                /* IDEAS en gris */
}
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Botón CONTACT ME debajo del texto: crece un poco al pasar el ratón */
.contact-btn {
  display: block;
  width: max-content;
  margin: clamp(28px, 5vh, 56px) auto 0;
  padding: .85em 2.1em;
  border-radius: 999px;
  background: #8a8a8a;           /* gris, como IDEAS */
  color: var(--paper);
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(15px, 1.5vw, 22px);
  letter-spacing: .04em;
  transition: transform .4s var(--ease);
}
.contact-btn:hover,
.contact-btn:focus-visible {
  transform: scale(1.1);
}

/* ---------- Página de contacto ---------- */
.contact {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(90px, 16vh, 150px) clamp(16px, 3.4vw, 48px) clamp(24px, 6vh, 56px);
}

/* texto explicativo pequeño, arriba como en el ejemplo */
.contact-intro {
  margin: 0 0 0 clamp(0px, 18vw, 300px);
  max-width: 26em;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.4;
}

/* correo y teléfono enormes, abajo a la derecha */
.contact-big {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 8vh;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 8.2vw, 156px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-align: right;
}
.contact-big a {
  display: inline-block;
  transform-origin: right center;
  transition: transform .4s var(--ease), color .4s var(--ease);
}
/* correo e Instagram: al pasar el ratón, gris y un pelín más grande */
.contact-mail:hover,
.contact-mail:focus-visible,
.contact-ig:hover,
.contact-ig:focus-visible {
  color: #8a8a8a;
  transform: scale(1.04);
}

/* Pegatina: se inclina hacia abajo a la izquierda y vuelve, con sombra y glitter */
.contact { position: relative; }
.sticker {
  position: absolute;
  right: 18vw;
  top: 20vh;
  width: clamp(150px, min(25vw, 42vh), 440px);
  transform-origin: center;     /* gira sobre su propio eje */
  animation: sticker-sway 3.2s ease-in-out infinite;
}
.sticker img {
  width: 100%;
  height: auto;
  /* sombra que sigue la forma de la pegatina */
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .22)) drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}
.sticker-glitter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* js/sticker.js pinta los puntitos solo sobre el pelo marrón; el resto queda mate */
  background: center / 100% 100% no-repeat;
}
@keyframes sticker-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-9deg); }
}

/* ---------- Página About me ---------- */
/* el menú y BACK se van con el scroll para no taparse con el texto */
.about-page .site-header,
.about-page .back-link { position: absolute; }
.about {
  padding: clamp(110px, 18vh, 170px) clamp(16px, 3.4vw, 48px) clamp(60px, 10vh, 120px);
}
.gray { color: #8a8a8a; }

/* cabecera: ABOUT ME enorme */
.about-title {
  margin: 0;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 15vw, 260px);
  line-height: .9;
  letter-spacing: -.01em;
}
/* misma entrada que el titular de la portada: cada línea sube desde abajo */
.about-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
  margin-bottom: -.06em;
}
.about-title .line > span {
  display: inline-block;
  animation: line-in 1.1s cubic-bezier(.16, 1, .3, 1) both;
}
.about-title .line:nth-child(2) > span { animation-delay: .14s; color: #8a8a8a; }
.about-role {
  margin: clamp(18px, 3vh, 32px) 0 0;
  max-width: 34em;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.4;
  animation: explore-in .9s var(--ease) .9s backwards;
}

/* texto de presentación, grande */
.about-profile {
  max-width: 1100px;
  margin: clamp(60px, 12vh, 140px) 0 0 auto;
  font-size: clamp(19px, 2vw, 32px);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.about-profile p { margin: 0 0 .9em; }
.about-profile strong { font-family: "Arial Black", Helvetica, Arial, sans-serif; font-weight: 900; }

/* etiquetas de sección, pequeñas y en gris con una línea */
.about-label {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d9d9d9;
  color: #8a8a8a;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* cinta de herramientas */
.about-tools { margin-top: clamp(60px, 12vh, 140px); }
.tools-marquee {
  margin: 0 calc(-1 * clamp(16px, 3.4vw, 48px));   /* de borde a borde de la pantalla */
  padding: 22px 0;
  overflow: hidden;
}
.tools-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
/* pausa al pasar el ratón; en móvil un toque dejaba la cinta parada */
@media (hover: hover) {
  .tools-marquee:hover .tools-track { animation-play-state: paused; }
}
.tool-chip {
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 14px 24px 16px;
  border-radius: 999px;
  font-family: "Arial Black", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.05;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .4s var(--ease);
}
.tool-chip small {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .7;
}
@media (hover: hover) {
  .tool-chip:hover { transform: rotate(0deg) scale(1.08); }
}

/* experiencia / formación / idiomas: título grande y estrecho, líneas pequeñas debajo */
.about-cv {
  width: min(100%, 760px);
  margin: clamp(60px, 12vh, 140px) 0 0 auto;
}
.cv-block + .cv-block { margin-top: clamp(36px, 6vh, 64px); }
.cv-block h2 {
  margin: 0 0 .25em;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 5.6vw, 92px);
  line-height: 1;
  letter-spacing: -.01em;
}
.cv-block ul { margin: 0; padding: 0; list-style: none; }
.cv-block li {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  letter-spacing: .03em;
}
.cv-block li span { margin-left: .6em; color: #8a8a8a; }

/* cierre */
.about-cta {
  margin-top: clamp(70px, 14vh, 160px);
  text-align: center;
}
.about-cta-title {
  margin: 0;
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 8vw, 150px);
  line-height: 1;
}
.about-cta-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: clamp(26px, 5vh, 50px);
}
.about-cta-links .contact-btn { margin: 0; }
.about-link {
  font-size: clamp(15px, 1.4vw, 20px);
  border-bottom: 1px solid currentColor;
  transition: color .3s var(--ease);
}
.about-link:hover { color: #8a8a8a; }

/* aparición suave al hacer scroll (js/about.js añade .is-visible) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Página de proyecto ---------- */
.project-page .site-header {
  position: absolute;          /* se va con el scroll de la columna izquierda */
  right: auto;
  left: 0;
  width: calc(100% - var(--panel-w));
  display: flex;
  justify-content: flex-end;
}

.project-page {
  --panel-w: min(70.8vh, 42vw);
}

.project-scroll {
  width: calc(100% - var(--panel-w));
  padding-top: clamp(70px, 12vh, 120px);
}
.project-scroll img,
.project-scroll video { display: block; width: 100%; height: auto; }

/* Ficha del proyecto en texto (en vez de dentro de la imagen): imita la maqueta de las imágenes,
   todas las medidas en cqw para que escale igual que ellas (1cqw = 13,68px de la imagen original) */
.project-text {
  container-type: inline-size;
}
.project-text-cols {
  display: grid;
  grid-template-columns: 51.7cqw 1fr;
  padding: 1.46cqw 1.7cqw .5cqw 1.754cqw;
  font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: max(1.754cqw, 9px);
  line-height: 1.25;
  color: #111;
}
.project-text-cols > div:last-child { color: #a0a0a0; }
.project-text p { margin: 0 0 1.25em; padding-right: 2cqw; }
.project-text p:last-child { margin-bottom: 0; }
.project-text strong { font-weight: 600; }
/* etiquetas junto al título (sobre la imagen de cabecera) */
.project-head { position: relative; }
.project-tags {
  position: absolute;
  top: 17.62cqw;
  left: 53.44cqw;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.17cqw;
  line-height: 1.25;
  color: #111;
}
.project-tags.is-en { left: 72cqw; color: #a0a0a0; }

.project-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--panel-w);
  height: 100vh;
  background: #b6d1ad;
}
.project-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-link {
  position: fixed;
  left: clamp(16px, 2.9vw, 40px);
  top: clamp(18px, 4vh, 40px);
  z-index: 60;
  font-size: clamp(14px, 1.4vw, 20px);
}

/* Flecha de cristal al siguiente proyecto: deja ver lo de detrás difuminado */
.next-project {
  position: fixed;
  right: clamp(14px, 2vw, 32px);
  top: 50%;
  z-index: 60;
  width: clamp(44px, 4.4vw, 68px);
  aspect-ratio: 3 / 4;
  transform: translateY(-50%);
  transition: transform .45s var(--ease);
}
.next-project-glass {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 46% 0, 100% 50%, 46% 100%, 0 100%, 54% 50%);
  background: rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transition: background .45s var(--ease);
}
/* borde fino para que se lea sobre fondos claros y oscuros */
.next-project-edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.next-project-edge polygon {
  fill: none;
  stroke: rgba(255, 255, 255, .8);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35));
}
.next-project:hover,
.next-project:focus-visible { transform: translate(6px, -50%) scale(1.06); }
.next-project:hover .next-project-glass,
.next-project:focus-visible .next-project-glass { background: rgba(255, 255, 255, .45); }

/* la misma flecha, a la izquierda y mirando al otro lado: proyecto anterior */
.next-project.is-prev {
  right: auto;
  left: clamp(14px, 2vw, 32px);
  /* escondida hasta que el cursor se acerca (js/project.js añade .is-near) */
  opacity: 0;
  pointer-events: none;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.next-project.is-prev.is-near {
  opacity: 1;
  pointer-events: auto;
}
/* en pantallas táctiles no hay cursor: se ve siempre */
@media (hover: none) {
  .next-project.is-prev { opacity: 1; pointer-events: auto; }
}
.next-project.is-prev .next-project-glass,
.next-project.is-prev .next-project-edge { transform: scaleX(-1); }
.next-project.is-prev:hover,
.next-project.is-prev:focus-visible { transform: translate(-6px, -50%) scale(1.06); }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  /* Portada: titular centrado */
  .hero { min-height: 100svh; }
  .hero-title { font-size: clamp(36px, 11.2vw, 64px); white-space: normal; }
  .hero-explore { font-size: 15px; }

  /* Franja: tarjetas grandes, una casi entera en pantalla */
  .work-sticky { height: 100svh; }
  .work-track {
    --card-w: 74vw;
    --card-h: min(calc(74vw / .83), 60svh);
    gap: 16px;
    padding: 0 16px;
  }
  .project-title { font-size: 24px; }
  .project-desc { font-size: 13px; line-height: 1.35; }
  .project-cover { border-radius: 14px; }
  .project.is-empty .project-cover { clip-path: inset(0 round 14px); }

  /* Contacto: el correo tiene que caber entero */
  .contact-big { font-size: 7.6vw; }
  .contact-intro { margin-left: 0; }
  .bubble { font-size: 14px; padding: 8px 13px; white-space: normal; width: max-content; max-width: 62vw; }
  .sticker { right: 8vw; top: 34svh; width: min(56vw, 32svh); }

  /* About me: todo en una columna */
  .about-cta-links { flex-direction: column; gap: 18px; }

  /* Páginas de proyecto: todo en una columna, el collage al final */
  .project-page .site-header { width: 100%; }
  .project-scroll { width: 100%; padding-top: 64px; }
  .project-panel { position: static; width: 100%; height: auto; }
  .project-panel img { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-explore .arrow,
  .hero-explore,
  .hero-title .line > span { animation: none; }
  .marquee-track { animation-duration: 60s; }
  .sticker,
  .about-title .line > span,
  .about-role { animation: none; }
  .tools-track { animation-duration: 70s; }
  .reveal { opacity: 1; transform: none; transition: none; }
}