@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400&display=swap');
:root{--yellow:#fae29c;--burgundy:#701d29;--blue:#99c2e6;--ink:#701d29;--max:1320px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--yellow);color:var(--ink);font:400 17px/1.45 'Jost',Arial,sans-serif;overflow-x:hidden}a{color:inherit}img{display:block;max-width:100%}
.skip-link{position:absolute;z-index:30;top:-100px;left:16px;padding:9px 12px;background:white}.skip-link:focus{top:16px}
.page-header{position:absolute;top:0;right:0;left:0;z-index:10;height:0}.nav{display:flex;gap:28px;justify-content:flex-end;align-items:center;padding:clamp(22px,4.5vw,64px) clamp(30px,7vw,110px) 0 20px;font-size:clamp(14px,1.12vw,17px);line-height:1.1}.nav a{text-decoration:none;white-space:nowrap}.nav a:hover,.nav a:focus-visible,.nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.hero{position:relative;height:clamp(400px,49.6vw,715px);width:100%;max-width:1500px;margin:0 auto}.hero .logo{position:absolute;left:25.15%;top:32%;width:42.1%;height:auto}.hero .asterisco{position:absolute;width:5.1%;left:65.7%;top:28.7%}.hero .portrait{position:absolute;left:0;top:3%;width:25%;max-width:360px;height:auto;object-fit:contain}.hero .creative{position:absolute;width:29%;height:auto;left:-7%;top:60%;transform:rotate(90deg);transform-origin:center center}.waves{position:absolute;top:76.3%;left:43.4%;width:5.6%;height:13.6%;display:flex;flex-direction:column;justify-content:space-between}.waves img{width:100%;height:19%;object-fit:fill}.waves img:nth-child(2){opacity:.82}.waves img:nth-child(3){opacity:.64}.waves img:nth-child(4){opacity:.46}.waves img:nth-child(5){opacity:.30}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.3vw,33px);width:min(82.5%,var(--max));margin:0 0 clamp(70px,7vw,115px) 4.75%}.work-card{display:block;position:relative;aspect-ratio:1.335;overflow:hidden;background:#d9b976}.work-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .4s ease}.work-card:hover img,.work-card:focus-visible img{transform:scale(1.04);filter:brightness(.89)}.work-card:focus-visible,.nav a:focus-visible{outline:3px solid var(--burgundy);outline-offset:4px}.work-card .hover-label{position:absolute;left:15px;bottom:14px;color:#fff;text-shadow:0 1px 5px #0009;font-size:19px;opacity:0;transform:translateY(5px);transition:all .2s}.work-card:is(:hover,:focus-visible) .hover-label{opacity:1;transform:none}
main.inner{padding-top:clamp(145px,13.8vw,210px);min-height:100vh}.project-inner{width:min(90.5%,1260px);margin:0 auto 100px}.project-head{text-align:center;margin:0 0 26px}.display-graphic{width:auto;max-height:100px;max-width:min(90%,650px);margin:0 auto 10px}.project-head h1,.work-block h2,.about-side h2,.pending h1{font-size:clamp(38px,5.6vw,82px);font-weight:400;line-height:1.08;margin:0 0 8px;color:var(--blue)}.project-head p,.work-block p{font-size:clamp(16px,1.7vw,24px);margin:0 0 18px;text-align:center}.work-block{margin-bottom:clamp(90px,9vw,140px)}.work-block h2{text-align:center}.video-frame{display:grid;place-items:center;width:100%;aspect-ratio:16/9;background:var(--blue);color:#336088;font-size:14px}.video-frame span{background:#ffffffa6;border-radius:4px;padding:6px 10px}.back{text-decoration:none;font-size:16px}.back:hover{text-decoration:underline}
.about-wrap{width:min(77%,1000px);margin:0 auto;display:grid;grid-template-columns:1.15fr .9fr;gap:clamp(20px,4vw,60px);align-items:center}.about-wrap .bio{max-width:430px;font-size:clamp(14px,1.2vw,17px);line-height:1.36}.about-wrap .bio p{margin:0 0 16px}.about-photo{width:100%;aspect-ratio:0.88;object-fit:cover;object-position:center}.about-bottom{width:min(80%,1000px);margin:clamp(65px,10vw,140px) auto 200px;display:flex;align-items:flex-start;justify-content:flex-end}.about-side{text-align:right}.about-side h2{font-size:clamp(28px,3.7vw,57px);margin:0 0 30px;color:var(--burgundy);font-family:Georgia,serif;font-weight:bold;letter-spacing:-2px}.about-side h2:last-of-type{margin-bottom:7px}.about-side a{display:block;text-decoration:none}.about-side a:hover{text-decoration:underline}.small-note{font-size:14px;opacity:.8}.pending{width:min(88%,1000px);margin:0 auto 140px;text-align:center}.pending p{font-size:18px}
@media(min-width:1500px){.hero{height:715px}}
@media(max-width:700px){.nav{padding:22px 22px 0 16px;gap:17px;font-size:14px}.hero{height:clamp(305px,66vw,465px);margin-bottom:10px}.hero .portrait{top:14%;left:0;width:31%}.hero .logo{left:28%;top:37%;width:58%}.hero .asterisco{left:83.5%;top:31%;width:7.2%}.hero .creative{left:-16%;top:70%;width:44%}.waves{top:76%;left:52%;width:7.6%;height:14%}.work-grid{grid-template-columns:1fr;width:90%;gap:18px;margin-bottom:70px}.work-card{aspect-ratio:1.45}.work-card .hover-label{opacity:1;transform:none;background:#0005;font-size:16px;padding:4px 8px;left:8px;bottom:8px}.inner{padding-top:115px!important}.project-inner{width:90%}.work-block{margin-bottom:75px}.about-wrap{width:86%;display:flex;flex-direction:column-reverse;align-items:stretch;gap:30px}.about-wrap .bio{max-width:none}.about-photo{width:75%;margin:0 auto;aspect-ratio:4/5}.about-bottom{width:86%;margin:65px auto 120px}.about-side h2{margin-bottom:20px}.about-side{font-size:14px}}
@media(max-width:390px){.nav{gap:14px;font-size:13px}.hero .portrait{top:19%}.hero .creative{top:71%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work-card img,.hover-label{transition:none}}


/* SEGUNDA VERSIÓN — ajustes de dirección de arte, octubre 2026 */
@font-face {
  font-family: 'TAN Nimbus';
  src: local('TAN - NIMBUS'), local('TAN NIMBUS'), local('TAN-NIMBUS'), url('../assets/fonts/TAN-NIMBUS.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root{--nimbus:'TAN Nimbus',Georgia,serif}
/* La cabecera ocupa por sí misma la pantalla inicial; los trabajos aparecen al bajar. */
.hero{
  height:100svh;
  min-height:720px;
  max-height:none;
  max-width:1500px;
  overflow:hidden;
  isolation:isolate;
}
.hero .logo{
  top:clamp(185px,25.6vh,255px);
  left:25.15%;
  z-index:2;
}
.hero .asterisco{
  top:clamp(165px,23vh,230px);
  z-index:2;
}
.hero .portrait{
  z-index:5;
  top:3%;
  transform:translate3d(0,var(--portrait-y,0px),0);
  will-change:transform;
  pointer-events:none;
}
/* El texto vertical queda por detrás de la silueta y sube/desaparece al hacer scroll. */
.hero .creative{
  top:clamp(365px,47.5vh,440px);
  z-index:3;
  translate:0 var(--creative-y,0px);
  opacity:var(--creative-opacity,1);
  will-change:translate,opacity;
  pointer-events:none;
}
.scroll-cue{
  position:absolute;
  top:clamp(490px,66vh,615px);
  left:43.4%;
  width:5.6%;
  height:clamp(68px,10vh,100px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  z-index:6;
  padding:3px 0;
  cursor:pointer;
  border-radius:12px;
  outline-offset:8px;
  transition:transform .25s ease;
}
.scroll-cue img{width:100%;height:19%;object-fit:fill;pointer-events:none}
.scroll-cue img:nth-child(2){opacity:.82}
.scroll-cue img:nth-child(3){opacity:.64}
.scroll-cue img:nth-child(4){opacity:.46}
.scroll-cue img:nth-child(5){opacity:.30}
.scroll-cue:is(:hover,:focus-visible){transform:translateY(9px)}
.scroll-cue:is(:hover,:focus-visible) img{
  animation:scroll-arrow-bounce .8s ease-in-out infinite alternate;
}
.scroll-cue:is(:hover,:focus-visible) img:nth-child(2){animation-delay:.1s}
.scroll-cue:is(:hover,:focus-visible) img:nth-child(3){animation-delay:.2s}
.scroll-cue:is(:hover,:focus-visible) img:nth-child(4){animation-delay:.3s}
.scroll-cue:is(:hover,:focus-visible) img:nth-child(5){animation-delay:.4s}
.scroll-cue:focus-visible{outline:3px solid var(--burgundy)}
@keyframes scroll-arrow-bounce{
  from{transform:translateY(-3px) scale(1)}
  to{transform:translateY(7px) scale(1.09)}
}
/* Centrado real del mosaico, mismo eje central que el logo. */
.work-grid{
  width:min(90%,1240px);
  margin:50px auto clamp(70px,7vw,115px);
  scroll-margin-top:20px;
}
/* El nombre de la marca aparece en TAN-NIMBUS cuando se pasa por encima. */
.work-card .hover-label{
  font-family:var(--nimbus);
  font-weight:400;
  font-size:clamp(20px,2.15vw,31px);
  line-height:1.12;
  max-width:calc(100% - 24px);
  bottom:18px;
  left:20px;
  text-shadow:0 2px 12px #0009;
}
/* Nombres de campañas, títulos de clientes y elementos editoriales. */
.project-head h1,
.work-block h2,
.about-side h2,
.pending h1{
  font-family:var(--nimbus);
  font-weight:400;
  letter-spacing:normal;
}
.project-head h1,.work-block h2{
  font-size:clamp(44px,5.7vw,93px);
  line-height:1.1;
  color:var(--blue);
  margin-bottom:12px;
}
.about-side h2{font-size:clamp(30px,3.7vw,57px);line-height:1.16}
/* Los bloques interiores tienen la anchura y los espacios de la maqueta Illustrator. */
.project-inner{width:min(91%,1280px)}
.work-block{margin-bottom:clamp(100px,10vw,155px)}
.video-frame{width:100%;aspect-ratio:16/9}
@media (min-width:1500px){.hero{height:100svh;min-height:720px}}
@media (max-width:700px){
  .hero{height:100svh;min-height:610px;max-height:900px;margin-bottom:0}
  .hero .portrait{top:11%;left:0;width:31%}
  .hero .logo{top:29%;left:28%;width:58%}
  .hero .asterisco{top:26%;left:83.5%;width:7.2%}
  .hero .creative{top:42%;left:-16%;width:44%}
  .scroll-cue{top:53%;left:52%;width:7.6%;height:77px}
  .work-grid{width:90%;margin:25px auto 70px;grid-template-columns:1fr}
  .work-card .hover-label{
    font-size:clamp(19px,6.4vw,26px);
    bottom:11px;
    left:12px;
    max-width:calc(100% - 24px);
  }
  .project-head h1,.work-block h2{font-size:clamp(38px,9.6vw,58px)}
}
@media(max-width:390px){
  .hero .portrait{top:11%}
  .hero .creative{top:42%}
}
@media(prefers-reduced-motion:reduce){
  .hero .portrait{transform:none!important;will-change:auto}
  .hero .creative{translate:none!important;opacity:1!important;will-change:auto}
  .scroll-cue,.scroll-cue img{animation:none!important;transition:none!important}
  .scroll-cue:is(:hover,:focus-visible){transform:none}
}


/* V3 — ajustes de maquetación y microinteracciones solicitados */
:root { --yellow:#fae29c; }
/* Enlaces a todas las secciones desde todas las páginas */
.page-header { z-index:30; }
.nav { gap:clamp(15px,1.8vw,27px); }

/* Composición central del hero */
.hero {
  overflow:visible; isolation:auto;
  z-index:1;
}
.hero .logo {
  left:50%; width:min(42.1%,640px);
  transform:translateX(-50%);
}
.hero .asterisco {
  cursor:pointer;
  transition:transform .75s cubic-bezier(.2,.75,.22,1);
  transform-origin:50% 50%;
}
.hero .asterisco:hover { transform:rotate(360deg); }
.scroll-cue {
  left:50%; transform:translateX(-50%);
}
.scroll-cue:is(:hover,:focus-visible) {
  transform:translateX(-50%) translateY(9px);
}
/* La silueta pasa sobre el rótulo y bajo los trabajos, nunca se desvanece.
   El recorte inferior evita que quede una imagen cortada sobre el amarillo. */
.hero .portrait {
  z-index:7;
  clip-path:inset(0 0 var(--portrait-cut,0px) 0);
}
/* Máscara geométrica: recorta el texto por arriba según baja la figura.
   No hay transición de opacidad y el texto jamás puede salir por arriba. */
.hero .creative-wipe {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:5;
  pointer-events:none;
  clip-path:inset(var(--creative-cover,0px) 0 0 0);
}
.hero .creative-wipe .creative {
  z-index:auto;
  opacity:1 !important;
  translate:none !important;
}
/* Los trabajos están delante de la silueta y la cubren al alcanzarlos. */
.work-grid {
  position:relative;
  z-index:9;
  margin:0 auto clamp(70px,7vw,115px);
  padding-top:0;
}
/* Hover de portadas: desaparece la fotografía y deja el amarillo con nombre centrado */
.work-card { background:var(--yellow); }
.work-card img { transition:opacity .22s ease; }
.work-card:is(:hover,:focus-visible) img {
  opacity:0; transform:none; filter:none;
}
.work-card .hover-label {
  inset:0; margin:0;
  display:flex; justify-content:center; align-items:center;
  width:100%; max-width:none;
  padding:18px 24px;
  color:var(--burgundy); text-align:center;
  font-family:var(--nimbus); font-size:clamp(25px,2.4vw,42px);
  font-weight:400; line-height:1.16;
  text-shadow:none;
  opacity:0; transform:none;
  transition:opacity .22s ease;
  pointer-events:none;
}
.work-card:is(:hover,:focus-visible) .hover-label { opacity:1; }

/* Sobre mí: banda de texto en bucle continuo como la web original */
main.inner:has(.about-wrap) { position:relative; }
.about-marquee {
  position:absolute; top:103px; left:0; width:100%;
  overflow:hidden; white-space:nowrap; pointer-events:none;
  height:75px; display:flex; align-items:center;
}
.marquee-track {
  width:max-content; display:flex; flex:none; white-space:nowrap;
  font:400 clamp(28px,3.2vw,48px)/1.15 var(--nimbus);
  color:var(--burgundy);
  animation:about-marquee 26s linear infinite;
  will-change:transform;
}
.marquee-track span { flex:none; padding-right:45px; }
@keyframes about-marquee { to { transform:translateX(-50%); } }
.about-wrap { position:relative; z-index:1; }
.about-bottom { position:relative; z-index:1; }
.about-side { width:min(100%,440px); }
.about-side .contact-heading {
  margin:27px 0 7px;
  font:400 clamp(27px,2.7vw,38px)/1.12 var(--nimbus);
  letter-spacing:normal; color:var(--burgundy);
}
.awards { text-align:right; max-width:440px; }
.awards summary {
  display:flex; justify-content:flex-end; align-items:center; gap:14px;
  list-style:none; cursor:pointer;
  font:400 clamp(27px,2.7vw,38px)/1.12 var(--nimbus);
  color:var(--burgundy);
}
.awards summary::-webkit-details-marker { display:none; }
.awards summary:focus-visible { outline:2px solid var(--burgundy); outline-offset:6px; }
.awards-chevron {
  display:block; width:13px; height:13px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;
}
.awards[open] .awards-chevron { transform:rotate(225deg) translate(-2px,-1px); }
.awards-list {
  list-style:none; padding:12px 0 0; margin:0;
  font:400 clamp(13px,1.05vw,16px)/1.35 'Jost',sans-serif;
}
.awards-list li { margin:0 0 10px; }

@media (max-width:700px) {
  .nav { gap:13px; padding:20px 16px 0; font-size:13px; }
  .hero .logo { left:50%; width:58%; }
  .scroll-cue { left:50%; }
  .work-grid { margin:0 auto 70px; }
  .work-card .hover-label { opacity:0; font-size:clamp(22px,6vw,33px); background:transparent; }
  .about-marquee { top:80px; height:56px; }
  .marquee-track { font-size:27px; }
  main.inner:has(.about-wrap) { padding-top:170px!important; }
  .about-side .contact-heading,.awards summary { font-size:29px; }
  .about-bottom { margin-top:62px; }
}
@media (hover:none) {
  .work-card img { opacity:1; }
  .work-card .hover-label { opacity:0; }
  .work-card:focus-visible img { opacity:0; }
  .work-card:focus-visible .hover-label { opacity:1; }
}
@media(prefers-reduced-motion:reduce) {
  .hero .asterisco,.work-card img,.work-card .hover-label,.awards-chevron { transition:none!important; }
  .hero .asterisco:hover { transform:none; }
  .marquee-track { animation:none; }
  .hero .creative-wipe { clip-path:none!important; }
  .hero .portrait { clip-path:none!important; }
}

/* Ajuste fino de las proporciones del diseño Sobre mí a 1440 px */
@media(min-width:701px){
  .about-wrap { width:min(82%,1180px); grid-template-columns:43% 57%; gap:0; }
  .about-photo { width:min(100%,320px); justify-self:start; }
  .about-side .contact-heading,.awards summary { font-size:clamp(25px,2.3vw,34px); }
}


/* V4 — revisión 22-10-2026: dirección de arte sobre las capturas del usuario. */
:root { --body-size:17px; }
.nav { font-size:var(--body-size); }
/* Jerarquía fija: los ornamentos del hero se mueven como un grupo (no opacidad).
   Todo el grupo se recorta conjuntamente al terminar la cabecera; así no queda
   una cola del rótulo creative copywriter abandonada sobre los trabajos. */
.hero { overflow:clip; isolation:isolate; }
.hero-art {
  position:absolute; inset:0; z-index:7; pointer-events:none;
  transform:translate3d(0,var(--art-y,0px),0);
  will-change:transform;
}
.hero .portrait {
  top:3%; left:2.5%; width:25%; max-width:360px;
  transform:none!important; clip-path:none!important;
  z-index:3; will-change:auto;
}
.hero .creative-wipe {
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  z-index:2; clip-path:none!important;
}
.hero .creative-wipe .creative {
  position:absolute; top:clamp(365px,47.5vh,440px); left:-7%; width:29%;
  height:auto; transform:rotate(90deg); transform-origin:center center;
  translate:none!important; opacity:1!important;
}
.hero .creative-star {
  position:absolute; z-index:5; width:21px; height:21px;
  top:clamp(225px,28.8vh,275px); left:7.4%;
  transform-origin:center center; pointer-events:auto; cursor:pointer;
}
/* El asterisco granate va por fuera, a la derecha del logo, no encima de la R. */
.hero .asterisco {
  top:clamp(177px,23.6vh,233px);
  left:calc(50% + min(21.05vw,320px) + 11px);
  width:5.1%; max-width:76px;
  z-index:8; pointer-events:auto;
}
/* Ambos elementos reaccionan juntos, ya sea con ratón, teclado o pulsación. */
.hero .synced-star {transition:transform .75s cubic-bezier(.2,.75,.22,1)}
.hero:has(.synced-star:is(:hover,:focus-visible)) .synced-star,
.hero.stars-spinning .synced-star { transform:rotate(360deg); }
/* Las portadas tienen 5% de aumento para eliminar bordes de las capturas. */
.work-card img { transform:scale(1.05); transform-origin:50% 50%; }
.work-card:is(:hover,:focus-visible) img { transform:scale(1.05); opacity:0; filter:none; }
/* Tamaño coherente para el texto secundario en todos los interiores. */
.project-head p,.work-block p { font-size:var(--body-size); line-height:1.45; }
.about-wrap .bio,.about-side { font-size:var(--body-size); }
/* MARQUESINA — azul, mayúsculas, sin adornos y atravesando el borde de la foto. */
main.inner:has(.about-wrap) { padding-top:clamp(350px,34vw,500px); }
.about-marquee {
  top:clamp(308px,31vw,455px); height:clamp(60px,6vw,86px);
  z-index:3; align-items:center;
}
.marquee-track {
  color:var(--blue); text-transform:uppercase;
  font:400 clamp(38px,4.15vw,65px)/1.08 var(--nimbus);
  letter-spacing:0;
}
.marquee-track span { padding-right:38px; }
.about-wrap { z-index:1; }
@media (min-width:1500px) {
  .hero .asterisco { left:calc(50% + 320px + 11px); }
}
@media (max-width:700px) {
  :root {--body-size:15px;}
  .nav {font-size:13px;}
  .hero .portrait {top:11%; left:2%; width:31%}
  .hero .creative-wipe .creative { top:42%; left:-16%; width:44%; }
  .hero .creative-star {width:15px;height:15px;top:32%;left:5.7%;}
  .hero .asterisco {top:26%;left:calc(50% + 29% + 7px);width:7.2%;}
  main.inner:has(.about-wrap) {padding-top:clamp(245px,64vw,340px)!important;}
  .about-marquee {top:clamp(215px,55vw,300px); height:54px;}
  .marquee-track {font-size:clamp(26px,6.75vw,34px)}
  .project-head p,.work-block p {font-size:var(--body-size)}
}
@media (prefers-reduced-motion:reduce) {
  .hero-art {transform:none!important;will-change:auto;}
  .hero .synced-star {transition:none!important;}
  .hero:has(.synced-star:is(:hover,:focus-visible)) .synced-star {transform:none!important;}
}

@keyframes two-stars-turn { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.hero.stars-spinning .synced-star { animation:two-stars-turn .75s cubic-bezier(.2,.75,.22,1) both; }
@media(prefers-reduced-motion:reduce) {.hero.stars-spinning .synced-star{animation:none;}}

/* El rótulo se recoge de abajo hacia arriba bajo la silueta, sin opacidad.
   El recorte es progresivo y está sincronizado con la fotografía para evitar
   dejar la palabra 'copywriter' suelta mientras Car sigue bajando. */
.hero .creative-wipe {clip-path:inset(0 0 var(--creative-hide,0%) 0)!important;}
@media(prefers-reduced-motion:reduce) {
  .hero .creative-wipe {clip-path:none!important;}
}


/* V5 — animación vertical por oclusión real, sin opacidad ni borrado. */
.hero { --text-rise:0px; --art-y:0px; }
.hero .hero-art {
  transform:translate3d(0,var(--art-y),0);
}
/* Retrato nuevo a color, recortado al contenido alfa, sin estirar el PNG. */
.hero .portrait {
  top:3%; left:3.5%; width:25%; max-width:345px;
  object-fit:contain; z-index:4;
}
/* Una ventana recorta todo lo que asciende por encima de la barra del retrato. */
.hero .creative-wipe {
  --clip-rail:clamp(190px,25.9vh,232px);
  clip-path:inset(var(--clip-rail) 0 0 0)!important;
  z-index:2; overflow:visible;
}
.hero .creative-wipe .creative {
  top:clamp(365px,47.5vh,440px); left:-7%; width:29%;
  transform:rotate(90deg) translateX(calc(-1 * var(--text-rise)));
  transform-origin:center center;
  will-change:transform;
}
/* El asterisco azul viaja con la primera letra y se recorta en la misma barra. */
.hero .creative-star-carrier {
  position:absolute; top:clamp(242px,31.6vh,296px); left:7.35%;
  width:21px; height:21px;
  transform:translate3d(0,calc(-1 * var(--text-rise)),0);
  z-index:5;
  pointer-events:auto; cursor:pointer;
}
.hero .creative-star {position:static;display:block;width:100%;height:100%;pointer-events:auto;cursor:pointer;transform-origin:center center;}
/* Giro sincronizado: el icono azul sigue dentro de su capa móvil. */
.hero:has(.synced-star:is(:hover,:focus-visible)) .synced-star { transform:rotate(360deg); }
.hero.stars-spinning .synced-star {animation:two-stars-turn .75s cubic-bezier(.2,.75,.22,1) both;}
/* Sobre mí: subir el bloque aproximadamente 180px, conservando la banda sobre la foto. */
main.inner:has(.about-wrap) {padding-top:clamp(175px,21vw,300px);}
.about-marquee {top:clamp(145px,17.8vw,252px);height:clamp(60px,6vw,86px);}
@media(max-width:700px){
  .hero .portrait {top:11%;left:2.6%;width:33%;max-width:none;}
  .hero .creative-wipe {--clip-rail:clamp(117px,19vh,190px);}
  .hero .creative-wipe .creative {top:42%;left:-16%;width:44%;}
  .hero .creative-star-carrier {top:clamp(143px,23.4vh,219px);left:5.7%;width:15px;height:15px;}
  main.inner:has(.about-wrap) {padding-top:clamp(165px,47vw,250px)!important;}
  .about-marquee {top:clamp(143px,40vw,219px);height:54px;}
}
@media(prefers-reduced-motion:reduce){
  .hero .creative-wipe .creative {transform:rotate(90deg)!important;}
  .hero .creative-star-carrier {transform:none!important;}
  .hero .creative-wipe {clip-path:inset(var(--clip-rail) 0 0 0)!important;}
}

/* V5: primer recuadro inmediatamente después de la cabecera. */
.work-grid { margin-top:0; }


/* V6 — solo ajustes solicitados: recuperar Nimbus desde la instalación local
   del diseñador y subir ligeramente la composición de Sobre mí. */
@media (min-width:701px) {
  main.inner:has(.about-wrap) { padding-top:clamp(125px,17.6vw,250px); }
  .about-marquee { top:clamp(95px,14.2vw,205px); }
}
@media (max-width:700px) {
  main.inner:has(.about-wrap) { padding-top:clamp(125px,37vw,205px)!important; }
  .about-marquee { top:clamp(113px,30vw,183px); }
}
/* El SVG azul tiene ahora el viewBox ajustado al dibujo real.
   Ambos asteriscos comparten la animación existente de V4/V5. */
.hero .creative-star-carrier { overflow:visible; }


/* V7 — ÚNICAMENTE el asterisco azul del rótulo vertical.
   Se coloca sobre la primera letra, sigue el mismo ascenso y queda
   recortado por el borde de la fotografía (nunca se desvanece). */
.hero .creative-star-carrier {
  top: calc(clamp(242px,31.6vh,296px) - 51px);
  left: 6.85%;
  z-index: 3; /* por detrás del retrato (z-index:4) */
  clip-path: inset(var(--star-occluded,0px) 0 0 0);
}
@media (max-width:700px) {
  .hero .creative-star-carrier {
    top: calc(clamp(143px,23.4vh,219px) + 65px);
    left: 4.3%;
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero .creative-star-carrier {clip-path:none!important;}
}


/* V8 — vídeos reales para El Corte Inglés, Ria y Atleti y Vodafone. */
.video-frame.video-embed {
  display:block;
  position:relative;
  overflow:hidden;
  background:var(--blue);
  aspect-ratio:16/9;
  width:100%;
  height:auto;
}
.video-frame.video-embed iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.work-block .video-frame.video-embed + .video-frame.video-embed {
  margin-top:clamp(24px,3vw,44px);
}
.work-block .video-description {
  max-width:1000px;
  margin:clamp(26px,3.6vw,46px) auto 20px;
  font-size:var(--body-size);
  line-height:1.45;
  text-align:center;
}

/* V9: páginas interiores / Personal. No afecta a la Home. */
.project-inner.migrated {max-width:1280px;}
.migrated .campaign-desc {font-size:17px;line-height:1.45;max-width:970px;margin:0 auto 23px;text-align:center;}
.migrated .work-block h2 {overflow-wrap:anywhere;}
.migrated .campaign-subnote {text-align:center;font-size:17px;margin:0 auto 18px;}
.migrated .editorial-label {font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.07em;text-transform:uppercase;font-size:clamp(17px,2.3vw,25px);text-align:center;margin:68px 0 27px;}
.editorial-feature {width:100%;margin:18px auto 0;}
.media-still{width:100%;height:auto;object-fit:cover;background:#ecd6a0;display:block;}
.editorial-feature .media-still{max-width:100%;max-height:730px;object-fit:contain;}
.inline-source,.external-video{display:block;text-align:right;font:400 14px 'Jost',sans-serif;margin:13px 2px 30px;text-underline-offset:4px;}
.external-video{margin:12px 0 28px;}
.editorial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:14px;margin:22px 0 40px;}
.gallery-item{display:block;background:transparent;overflow:hidden;}
.gallery-item .media-still{width:100%;object-fit:contain;transition:transform .25s ease;}
.gallery-item:hover .media-still{transform:scale(1.025);}
.gallery-item:focus-visible,.personal-card:focus-visible{outline:3px solid var(--burgundy);outline-offset:5px;}
.gifs{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
.gifs img{width:100%;max-width:100%;}
.spot-piece{margin:34px auto 60px;max-width:960px;}
.spot-piece h4{font-weight:400;text-align:center;font-size:18px;margin:0 0 17px;}
.spot-piece .editorial-feature{width:min(100%,1000px);}
.spot-piece .media-still{width:100%;}
.project-outro{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:28px 0 30px;font-size:14px;}
.project-outro .source-secondary{text-decoration:none;}
.project-outro a:hover{text-decoration:underline;text-underline-offset:4px;}
.radio-list{max-width:740px;margin:30px auto 60px;border-top:1px solid rgba(112,29,41,.4);}
.radio-list a{display:flex;justify-content:space-between;gap:18px;padding:20px 0;border-bottom:1px solid rgba(112,29,41,.4);text-decoration:none;}
.radio-list a span{font-size:13px;text-align:right;}
.radio-list a:hover{text-decoration:underline;}
.personal-heading h1,.personal-detail h1{color:var(--blue);font:400 clamp(44px,6.5vw,88px)/1.14 var(--nimbus);text-align:center;margin:12px 0 44px;}
.personal-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 auto 100px;}
.personal-card{display:block;text-decoration:none;}
.personal-card img,.personal-type-art{width:100%;aspect-ratio:4/5;object-fit:cover;}
.personal-card .personal-card-name{display:block;font:400 clamp(20px,2.4vw,32px)/1.3 var(--nimbus);color:var(--burgundy);margin:18px 0 5px;}
.personal-card small{font-size:14px;}
.personal-type-art{background:var(--blue);display:grid;align-content:center;place-items:center;font:400 clamp(22px,3vw,46px)/1.14 var(--nimbus);color:var(--yellow);text-align:center;padding:20px;}
.personal-type-art span{color:var(--burgundy);margin-top:20px;}
.personal-detail{max-width:1100px;margin:0 auto 60px;}
.personal-detail h1{margin-bottom:38px;}
.personal-detail .personal-intro{font-size:17px;text-align:center;max-width:780px;margin:0 auto 44px;}
.personal-detail .personal-cover{width:min(100%,800px);max-height:680px;object-fit:contain;margin:0 auto 42px;}
.personal-detail .personal-prose{max-width:820px;margin:0 auto 50px;font-size:17px;line-height:1.62;}
.personal-detail .personal-prose p{margin:0 0 23px;}
.personal-detail .media-names{text-align:center;font-size:19px;}
.personal-detail .readmore{text-align:center;margin:20px auto 40px;}
@media(max-width:800px){.editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}.personal-cards{grid-template-columns:1fr;max-width:430px;gap:50px;}}
@media(max-width:600px){.migrated .campaign-desc{font-size:16px;}.editorial-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.gifs{grid-template-columns:1fr;}.project-outro{flex-wrap:wrap;}.radio-list a{flex-direction:column;gap:3px;}.personal-detail .personal-prose{font-size:16px;}}
@media(prefers-reduced-motion:reduce){.gallery-item .media-still{transition:none!important;}}

/* VERSION 10 — Interior pages only. Home remains untouched. */
.next-project-outro{justify-content:flex-end;margin:clamp(48px,7vw,115px) 0 20px;}
.next-project{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:22px;row-gap:5px;align-items:center;width:min(100%,550px);padding:20px 8px 22px;border-top:1px solid var(--burgundy);text-decoration:none;color:var(--burgundy);}
.next-project-caption{grid-column:1 / -1;font:400 15px/1.5 'Jost',sans-serif;}
.next-project-name{font:400 clamp(23px,3.1vw,45px)/1.15 var(--nimbus);color:var(--burgundy);}
.next-project-arrow{font-size:clamp(29px,3vw,44px);transition:transform .2s ease;}
.next-project:hover .next-project-arrow,.next-project:focus-visible .next-project-arrow{transform:translate(4px,-4px);}
.next-project:focus-visible{outline:3px solid var(--burgundy);outline-offset:5px;}
/* Portfolio Personal — sólo títulos clicables, sin imágenes ni subtítulos */
.personal-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:24px;margin:0 auto 100px;}
.personal-card{display:flex;justify-content:center;align-items:center;min-height:240px;padding:26px;text-align:center;border:1px solid color-mix(in srgb,var(--burgundy) 30%,transparent);transition:background .2s ease;}
.personal-card .personal-card-name{margin:0;line-height:1.15;font-size:clamp(25px,3.25vw,49px);}
.personal-card:hover,.personal-card:focus-visible{background:color-mix(in srgb,var(--blue) 13%,transparent);}
/* Más Madrid: una sola imagen por paso */
.media-carousel{width:min(100%,950px);margin:22px auto 55px;}
.media-carousel-stage{height:clamp(300px,49vw,640px);display:grid;place-items:center;overflow:hidden;}
.media-carousel-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center;margin:0;}
.media-carousel-slide[hidden]{display:none!important;}
.media-carousel-slide img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}
.media-carousel-nav{display:flex;justify-content:center;align-items:center;gap:clamp(18px,4vw,50px);padding:14px 0 4px;}
.carousel-nav-button{cursor:pointer;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--burgundy);border-radius:50%;color:var(--burgundy);background:transparent;font:400 28px/1 'Jost',sans-serif;}
.carousel-nav-button:hover,.carousel-nav-button:focus-visible{color:var(--yellow);background:var(--burgundy);}
.carousel-count{min-width:72px;text-align:center;font:400 16px/1.4 'Jost',sans-serif;color:var(--burgundy);font-variant-numeric:tabular-nums;}
.radio-pending-item{display:flex;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid rgba(112,29,41,.4);font-size:17px;}
.radio-pending-status{font-size:14px;opacity:.65;text-align:right;}
@media(max-width:800px){.personal-cards{grid-template-columns:1fr;max-width:560px;gap:16px;}.personal-card{min-height:145px;}}
@media(max-width:600px){.media-carousel{margin-bottom:35px;}.media-carousel-stage{height:clamp(250px,80vw,450px);}.carousel-nav-button{width:44px;height:44px;}.next-project-name{font-size:clamp(26px,7vw,38px);}.radio-pending-item{flex-wrap:wrap;}}
@media(prefers-reduced-motion:reduce){.next-project-arrow,.personal-card{transition:none;}}


/* Versión 11 — ajustes exclusivamente interiores */
.personal-cards {display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3.2vw,42px);margin:clamp(8px,4vw,65px) auto 110px;max-width:860px;}
.personal-card {display:block;min-height:0;width:auto;padding:0;border:0;background:transparent;transition:none;text-align:center;}
.personal-card:hover,.personal-card:focus-visible {background:transparent;text-decoration:underline;text-underline-offset:7px;}
.personal-card .personal-card-name {font:400 clamp(24px,3.1vw,40px)/1.17 var(--nimbus);margin:0;color:var(--burgundy);}
.once-spots-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:25px;row-gap:24px;align-items:start;margin:22px 0 60px;}
.once-spots-grid .spot-piece {margin:0;width:100%;min-width:0;max-width:none;}
.once-spots-grid .spot-piece h4 {font-size:17px;line-height:1.35;min-height:46px;margin-bottom:14px;}
.once-spots-grid .spot-piece .editorial-feature {width:100%;margin:0;}
.once-spots-grid .spot-piece .media-still {aspect-ratio:16/9;object-fit:cover;}
.asset-awaiting {font:400 13px/1.4 'Jost',sans-serif!important;color:var(--burgundy);text-align:center!important;margin:12px auto 0!important;opacity:.7;}
.once-two-line-title {max-width:900px;margin-left:auto!important;margin-right:auto!important;}
.campaign-intro {text-align:center;font-size:17px;margin:-8px auto 20px;}
.radio-section {width:min(100%,960px);margin:40px auto 82px;}
.radio-description {font-size:15px;text-align:center;margin-bottom:12px;}
.audio-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;margin:20px auto;}
.audio-entry {display:flex;justify-content:space-between;gap:14px;align-items:center;min-width:0;padding:17px 0;border-bottom:1px solid rgba(112,29,41,.3);font:400 17px 'Jost',sans-serif;}
.audio-entry strong {font-weight:400;}
.audio-file-state {font-size:13px;opacity:.66;}
.audio-entry audio {max-width:100%;width:min(300px,100%);height:42px;}
.animated-pieces {width:min(100%,950px);display:flex;flex-direction:column;gap:22px;margin:18px auto 75px;}
.animated-piece {width:100%;margin:0;}
.animated-piece img {display:block;width:100%;height:auto;object-fit:contain;}
.media-carousel-stage {position:relative;display:block!important;overflow:hidden;}
.media-carousel-slide {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.media-carousel-slide[hidden] {display:none!important;}
.media-carousel-slide img {max-height:100%;object-fit:contain;}
@media(max-width:700px) { .once-spots-grid {gap:22px 12px;} .once-spots-grid .spot-piece h4 {font-size:14px;min-height:40px;} .audio-grid {grid-template-columns:1fr;} .personal-cards{gap:25px;} }


/* V12 · correcciones solicitadas; la Home permanece intacta. */
.personal-card:hover,.personal-card:focus-visible{background:transparent;text-decoration:none!important;}
.personal-card:hover .personal-card-name,.personal-card:focus-visible .personal-card-name{color:var(--blue);text-decoration:none;}
.personal-card .personal-card-name{transition:color .18s ease;}
/* Reproductores: relación de aspecto correcta, también dentro de la cuadrícula ONCE. */
.video-embed{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#99c2e6;}
.video-embed iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;}
.once-spots-grid .spot-piece .video-embed{width:100%;}
/* Más Madrid: miniaturas navegables debajo de las gráficas. */
.carousel-thumbnails{display:flex;overflow-x:auto;gap:10px;padding:13px 2px 16px;scrollbar-width:thin;scroll-snap-type:x proximity;}
.carousel-thumb{flex:0 0 clamp(60px,7.2vw,96px);width:clamp(60px,7.2vw,96px);height:clamp(56px,6.7vw,90px);padding:0;border:3px solid transparent;background:transparent;cursor:pointer;opacity:.55;scroll-snap-align:center;transition:border-color .18s,opacity .18s;}
.carousel-thumb img{display:block;width:100%;height:100%;object-fit:contain;}
.carousel-thumb[aria-pressed="true"],.carousel-thumb:hover,.carousel-thumb:focus-visible{opacity:1;border-color:var(--burgundy);}
.carousel-thumbnails::-webkit-scrollbar{height:6px;}
.carousel-thumbnails::-webkit-scrollbar-thumb{background:rgba(112,29,41,.4);border-radius:3px;}
/* Más Madrid · Digital: tres vídeos panorámicos en horizontal */
.digital-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px auto 65px;width:100%;}
.digital-video-grid .video-embed{min-width:0;}
/* Dos GIF independientes y más pequeños en la misma fila */
.animated-pieces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(25px,5vw,90px);width:min(80%,950px);margin:25px auto 75px;}
.animated-piece{margin:0;}
.animated-piece img{width:100%;height:auto;object-fit:contain;}
/* Aquarius · reproductores propios MP3 */
.radio-pending-item audio{width:min(58%,380px);height:44px;flex:0 1 380px;}
@media(max-width:700px){
 .digital-video-grid{grid-template-columns:1fr;gap:16px;}
 .animated-pieces{width:92%;gap:20px;}
 .carousel-thumb{flex-basis:66px;width:66px;height:66px;}
 .radio-pending-item audio{flex-basis:100%;max-width:100%;width:100%;}
}
@media(prefers-reduced-motion:reduce){.carousel-thumb,.personal-card .personal-card-name{transition:none;}}


/* V13 · vídeo con póster estático y carga bajo demanda */
.video-embed{position:relative;display:block;overflow:hidden;background:#d8d1c6;aspect-ratio:16/9;width:100%;}
.video-poster{all:unset;cursor:pointer;display:block;position:absolute;inset:0;width:100%;height:100%;}
.video-poster:focus-visible{outline:3px solid var(--burgundy);outline-offset:4px;}
.video-poster-image{display:block;width:100%;height:100%;object-fit:cover;}
.video-poster-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.14));}
.video-poster-play{display:grid;place-items:center;width:clamp(64px,8vw,94px);height:clamp(64px,8vw,94px);border-radius:50%;background:rgba(255,255,255,.92);color:var(--burgundy);font-size:clamp(24px,3.2vw,40px);padding-left:.18em;box-shadow:0 10px 28px rgba(0,0,0,.18);}
.video-embed iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;}
.work-block .video-frame.video-embed + .video-frame.video-embed,
.work-block .video-embed + .video-embed{margin-top:clamp(24px,3vw,44px);} 
/* Más Madrid · separa mejor los GIF del bloque digital */
.digital-video-grid{margin:18px auto 86px;}
.animated-pieces{width:min(68%,760px);gap:clamp(55px,8vw,140px);margin:54px auto 90px;}
.animated-piece img{max-width:100%;}
/* Aquarius · tarjetas de audio según nueva dirección de arte */
.aquarius-audio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;margin:26px auto 8px;}
.aquarius-audio-card{display:grid;grid-template-columns:80px 1fr;align-items:stretch;min-height:108px;background:color-mix(in srgb, white 55%, var(--yellow));border:1px solid rgba(112,29,41,.12);}
.aquarius-audio-trigger{appearance:none;border:0;border-right:1px solid rgba(112,29,41,.18);background:transparent;color:#111;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .18s ease,color .18s ease;}
.aquarius-audio-trigger:hover,.aquarius-audio-trigger:focus-visible,.aquarius-audio-card.is-playing .aquarius-audio-trigger{background:var(--burgundy);color:var(--yellow);}
.aquarius-audio-trigger:focus-visible{outline:3px solid var(--burgundy);outline-offset:3px;}
.aquarius-audio-icon{font-size:28px;line-height:1;padding-left:.15em;}
.aquarius-audio-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:18px 20px 18px 20px;min-width:0;}
.aquarius-audio-copy strong{font:400 clamp(20px,2vw,24px)/1.15 var(--nimbus);color:#2b2321;margin:0 0 8px;}
.aquarius-audio-brand{font:400 15px/1.2 'Jost',sans-serif;color:rgba(43,35,33,.55);}
.aquarius-audio-card audio{display:none;}
@media(max-width:700px){
  .aquarius-audio-grid{grid-template-columns:1fr;gap:12px;}
  .aquarius-audio-card{grid-template-columns:68px 1fr;min-height:94px;}
  .animated-pieces{width:84%;gap:28px;margin-top:42px;}
}
@media(prefers-reduced-motion:reduce){
  .aquarius-audio-trigger{transition:none;}
}


/* V14 – Player thumbnails: identical across all projects, including three Digital spots. */
.video-embed{display:block!important;position:relative;overflow:hidden;aspect-ratio:16 / 9;width:100%;height:auto!important;margin-left:0;margin-right:0;align-self:start;}
.video-embed .video-poster{all:unset;box-sizing:border-box;display:block;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;}
.video-embed .video-poster-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.video-embed .video-poster-overlay{display:grid;position:absolute;inset:0;place-items:center;background:rgba(0,0,0,.11);pointer-events:none;}
.video-embed .video-poster-play{display:grid;place-items:center;width:clamp(55px,7vw,86px);height:clamp(55px,7vw,86px);border-radius:50%;background:rgba(255,255,255,.94);font:400 clamp(21px,2.6vw,33px)/1 sans-serif;color:var(--burgundy);padding-left:.15em;box-shadow:0 6px 20px rgba(0,0,0,.10);}
.video-embed .video-poster:hover .video-poster-play,.video-embed .video-poster:focus-visible .video-poster-play{background:var(--yellow);}
.video-embed .video-poster:focus-visible{outline:3px solid var(--burgundy);outline-offset:-3px;}
.digital-video-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;grid-auto-rows:auto;gap:12px;}
.digital-video-grid > .video-embed{display:block;margin:0!important;padding:0;vertical-align:top;min-width:0;align-self:start;}
.digital-video-grid .video-poster{vertical-align:top;}
/* V14 – Radio players on Aquarius and ONCE */
.aquarius-audio-grid{align-items:stretch;}
.aquarius-audio-card{background:#fff3cc;border:1px solid rgba(112,29,41,.17);transition:background .22s ease,color .22s ease;}
.aquarius-audio-copy strong{font:400 clamp(17px,1.5vw,21px)/1.25 var(--nimbus);color:var(--burgundy);margin:0;overflow-wrap:anywhere;}
.aquarius-audio-brand{display:none!important;}
.aquarius-audio-trigger{color:var(--burgundy);border-color:rgba(112,29,41,.17);}
.aquarius-audio-card.is-playing{background:var(--blue);border-color:var(--burgundy);}
.aquarius-audio-card.is-playing .aquarius-audio-trigger{background:var(--burgundy);color:var(--yellow);}
.aquarius-audio-card.is-playing .aquarius-audio-copy strong{color:var(--burgundy);}
.once-year-audio{margin:clamp(30px,4vw,58px) auto clamp(70px,9vw,125px);width:100%;}
.once-radio-heading{font:400 clamp(16px,1.7vw,21px)/1.3 'Jost',sans-serif;text-align:center;color:var(--burgundy);margin:0 auto 24px;}
.once-year-audio .aquarius-audio-grid{margin:0;}
/* Exact two-line heading, including at 1440px */
.work-block h2.once-two-line-title{width:100%;max-width:100%;margin-left:auto!important;margin-right:auto!important;font-size:clamp(34px,4.45vw,66px);line-height:1.08;text-align:center;}
.work-block h2.once-two-line-title span{display:block;white-space:nowrap;}
@media(max-width:700px){
 .work-block h2.once-two-line-title{font-size:clamp(25px,6.4vw,42px);}
 .digital-video-grid{grid-template-columns:1fr;gap:16px;}
 .aquarius-audio-copy strong{font-size:clamp(16px,4vw,20px);}
 .once-year-audio{margin:27px 0 70px;}
}
@media(prefers-reduced-motion:reduce){.aquarius-audio-card{transition:none;}}


/* V15 — Centre the play icon identically in every video poster.
   The CSS triangle has a predictable visual centroid; the old text glyph
   was font-dependent and appeared offset in some browsers. */
.video-embed .video-poster-play {
  display:block;
  position:relative;
  box-sizing:border-box;
  padding:0!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0;
  flex:none;
}
.video-embed .video-poster-play::before {
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:33%;height:36%;
  background:var(--burgundy);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  transform:translate(-33.333%,-50%);
}
/* ONCE: year followed immediately by aligned video rows (no spot headings). */
.once-spots-grid .spot-piece{margin:0;display:flex;flex-direction:column;min-width:0;}
.once-spots-grid .spot-piece .video-embed{margin:0!important;}


/* ===== V16: refinements approved by user ===== */
/* Home: one gentle synchronized turn; accelerate both on either hover. */
@keyframes car-star-idle {to{transform:rotate(360deg)}}
@keyframes car-star-fast {to{transform:rotate(360deg)}}
.hero .synced-star {
  animation:car-star-idle 19s linear infinite;
  transition:none!important;
  transform-origin:center center;
}
.hero:has(.synced-star:is(:hover,:focus-visible)) .synced-star {
  animation:car-star-fast .72s linear infinite!important;
}
.hero.stars-spinning .synced-star {
  animation:car-star-fast .72s linear 2!important;
}
/* Simultaneous hover is more important than the old one-off 'transform' hover. */
.hero:has(.synced-star:is(:hover,:focus-visible)) .synced-star {
  /* La velocidad se regula mediante Web Animations, sin resetear el giro. */
}
@media(prefers-reduced-motion:reduce) {
 .hero .synced-star,.hero.stars-spinning .synced-star,
 .hero:has(.synced-star:is(:hover,:focus-visible)) .synced-star{animation:none!important;transform:none!important}
}
/* Work footers: understated two-way navigation, inspired by reference 4 */
.project-outro.project-switcher {
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
  width:100%;margin:clamp(58px,8vw,115px) auto 20px;
  padding:0;gap:clamp(18px,4vw,60px);
}
.project-switcher-link{
  display:inline-flex;align-items:baseline;gap:5px;max-width:50%;
  color:var(--burgundy);text-decoration:none!important;
  border:0;padding:8px 0;
  font:400 clamp(18px,2.2vw,30px)/1.12 var(--nimbus);
  transition:color .2s ease;
}
.project-switcher-link:hover,.project-switcher-link:focus-visible{color:var(--blue)}
.project-switcher-link:focus-visible{outline:2px solid var(--burgundy);outline-offset:5px}
.project-switcher-prev{text-align:left}
.project-switcher-next{text-align:right;justify-content:flex-end;margin-left:auto}
.project-switcher-angle{font-family:Georgia,serif;font-size:1.1em;font-weight:400;line-height:.8;flex:none}
.project-switcher-name{overflow-wrap:normal}
/* ONCE: year, videos then audio — no intermediate radio headline. */
.once-year-audio,.radio-section:has(.aquarius-audio-grid){margin-top:clamp(12px,2vw,28px)!important;}
.once-year-audio .aquarius-audio-grid{margin-top:0!important;}
.once-year-audio .once-radio-heading,.once-year-audio .editorial-label{display:none!important;}
/* Aquarius: audio starts directly after video with no title/description. */
.radio-work{margin-top:clamp(-40px,-2vw,-14px);}
.radio-work .aquarius-audio-grid{margin-top:0;}
/* Chinchín Club – looping pale-blue title passing over the circular photograph. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main.inner.chinchin-page{padding-top:clamp(155px,16vw,235px)}
.chinchin-detail{width:min(100%,1240px);max-width:none;}
.chinchin-hero{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(22px,5vw,90px);min-height:clamp(430px,40vw,590px);margin:0 auto clamp(80px,8vw,125px);}
.chinchin-copy{width:min(100%,400px);justify-self:end;align-self:center;padding-top:80px;z-index:1;}
.chinchin-copy .personal-intro{font-size:clamp(16px,1.15vw,18px);text-align:left;margin:0 0 18px;line-height:1.42;}
.chinchin-copy .readmore{font-size:14px;text-align:left;margin:0;}
.chinchin-round-mask{justify-self:start;align-self:center;width:min(100%,clamp(290px,28vw,410px));aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;z-index:1;margin-top:52px;}
.chinchin-round-mask img{width:100%;height:100%;object-fit:cover;}
.chinchin-marquee{position:absolute;left:50%;top:clamp(55px,7.2vw,112px);width:100vw;transform:translateX(-50%);overflow:hidden;z-index:4;white-space:nowrap;pointer-events:none;}
.chinchin-marquee-track{display:flex;width:max-content;align-items:center;animation:about-marquee 27s linear infinite;font:400 clamp(33px,4.2vw,67px)/1.08 var(--nimbus);color:var(--blue);}
.chinchin-marquee-track span{white-space:nowrap;flex:none;padding-right:45px;}
/* Quiero y no puedo – two-column intro, scrolling gallery and media headlines. */
.quiero-detail{max-width:1170px;}
.quiero-detail > h1{margin-bottom:clamp(26px,3vw,48px);}
.quiero-intro-layout{display:grid;grid-template-columns:1.18fr .82fr;align-items:start;gap:clamp(25px,4vw,75px);margin:0 auto clamp(60px,7vw,110px);max-width:1030px;}
.quiero-intro-layout .personal-prose{font-size:clamp(14px,1.05vw,16px);line-height:1.48;margin:0;max-width:none;}
.quiero-intro-layout .personal-prose p{margin:0 0 17px;}
.quiero-intro-layout .personal-cover{display:block;margin:0;width:100%;max-height:none;height:auto;object-fit:contain;}
.quiero-carousel{width:100%;margin:0 auto clamp(60px,7vw,105px);}
.quiero-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;}
.quiero-carousel-track::-webkit-scrollbar{display:none}
.quiero-carousel-track:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.quiero-carousel-card{flex:0 0 20%;scroll-snap-align:start;aspect-ratio:1.1;margin:0;overflow:hidden;background:#f8b5bb;}
.quiero-carousel-card img{display:block;width:100%;height:100%;object-fit:cover;}
.quiero-carousel-controls{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:12px;}
.quiero-carousel-controls button{border:0;background:transparent;color:var(--burgundy);font:400 48px/1 Georgia,serif;cursor:pointer;padding:0 6px;}
.quiero-carousel-controls button:hover,.quiero-carousel-controls button:focus-visible{color:var(--blue)}
.quiero-medios-heading{text-align:center;color:var(--blue);font:400 clamp(31px,3.4vw,48px)/1.13 var(--nimbus);margin:30px 0 28px;}
.quiero-press-marquees{width:100vw;position:relative;left:50%;transform:translateX(-50%);overflow:hidden;margin:22px auto 75px;}
.quiero-press-line{overflow:hidden;white-space:nowrap;width:100%;height:clamp(32px,4.5vw,61px);display:flex;align-items:center;}
.quiero-press-track{display:flex;width:max-content;will-change:transform;animation:quiero-press-left 25s linear infinite;}
.quiero-press-group{display:flex;width:max-content;align-items:center;flex:none;}
.quiero-press-group a{font:400 clamp(22px,2.9vw,43px)/1.05 var(--nimbus);color:var(--burgundy);text-decoration:none;margin-right:clamp(26px,4vw,66px);}
.quiero-press-group a:hover,.quiero-press-group a:focus-visible{color:var(--blue)}
.quiero-press-right .quiero-press-track{animation-name:quiero-press-right}
.quiero-press-line:hover .quiero-press-track,.quiero-press-line:focus-within .quiero-press-track{animation-play-state:paused}
@keyframes quiero-press-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes quiero-press-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:700px){
  .project-switcher-link{font-size:clamp(14px,4.4vw,22px);gap:2px;}
  .chinchin-hero{grid-template-columns:1fr;gap:10px;min-height:auto;padding-top:80px;}
  .chinchin-copy{width:min(100%,430px);padding-top:0;justify-self:center;order:2;}
  .chinchin-round-mask{justify-self:center;order:1;width:min(78vw,350px);margin-top:14px;}
  .chinchin-marquee{top:15px;}
  .chinchin-marquee-track{font-size:clamp(28px,8vw,43px);}
  .quiero-intro-layout{grid-template-columns:1fr;gap:28px;}
  .quiero-intro-layout .personal-cover{max-width:420px;margin:0 auto;}
  .quiero-carousel-card{flex-basis:63%;aspect-ratio:1.08;}
  .quiero-press-line{height:49px;}
  .quiero-press-group a{font-size:clamp(24px,6.4vw,35px);}
}
@media(prefers-reduced-motion:reduce){
  .chinchin-marquee-track,.quiero-press-track{animation:none!important;transform:none!important;}
  .project-switcher-link{transition:none}
}


/* ===== V17: últimos ajustes solicitados, sin tocar el resto de la web ===== */
/* WAAPI controla velocidad y fase. Deshabilitamos las animaciones CSS antiguas
   para que el hover no pause ni reinicie la rotación de ninguno de los dos. */
.hero .synced-star,
.hero.stars-spinning .synced-star,
.hero:has(.synced-star:is(:hover,:focus-visible)) .synced-star {
  animation:none!important;
  transition:none!important;
}
/* Chinchín: misma fotografía y máscara, más arriba y rótulo en minúsculas. */
main.inner.chinchin-page {padding-top:clamp(105px,9.4vw,150px);}
.chinchin-marquee-track {text-transform:none;font-size:clamp(30px,3vw,46px);}
.chinchin-marquee {top:clamp(44px,6.3vw,95px);}
.chinchin-round-mask {margin-top:36px;}
/* Quiero y no puedo: Medios en TAN-NIMBUS, nombres más pequeños y con aire. */
.quiero-medios-heading {
  font-family:var(--nimbus)!important;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(31px,3.4vw,48px);
}
.quiero-press-line {height:clamp(37px,3.8vw,54px);}
.quiero-press-group a {
  font-family:var(--nimbus);
  font-weight:400;
  font-size:clamp(18px,1.7vw,26px);
  line-height:1.1;
  margin-right:clamp(58px,5.6vw,96px);
}
@media(max-width:700px){
  main.inner.chinchin-page {padding-top:98px!important;}
  .chinchin-hero {padding-top:43px;}
  .chinchin-marquee {top:0;}
  .chinchin-marquee-track{font-size:clamp(27px,7.4vw,37px);}
  .quiero-press-line{height:38px;}
  .quiero-press-group a{
    font-size:clamp(18px,4.7vw,24px);
    margin-right:clamp(45px,9vw,76px);
  }
}
@media(prefers-reduced-motion:reduce){
  .hero .synced-star {animation:none!important;}
}

/* V20 — MOBILE-ONLY ART DIRECTION (desktop remains v19).
   The vertical copy and small asterisk rise through the same physical rail
   of Car's portrait; the marquee crosses the round Chinchín artwork. */
@media (max-width:700px) {
  /* Keep the portrait/brand hierarchy, but align the rail + vertical lettering. */
  .hero .creative-wipe .creative {
    top:33%!important;
    left:-16%;
    width:44%;
  }
  .hero .creative-star-carrier {
    top:calc(clamp(143px,23.4vh,219px) - 3px)!important;
    left:4.3%;
    width:15px;
    height:15px;
  }
  /* Pull the burgundy asterisk tight to the right edge of CAR. */
  .hero .asterisco {
    left:calc(50% + 28.5%);
    top:26%;
    width:7.2%;
  }
  /* Title overlaps the upper arc of the circular artwork, not empty sky. */
  .chinchin-marquee {
    top:80px!important;
  }
  /* Smaller screens: keep inner content comfortably within its viewport. */
  .project-inner {width:min(92%,1280px);}
  .project-switcher-link {max-width:49%;min-width:0;overflow-wrap:anywhere;}
  .once-spots-grid {column-gap:12px;row-gap:15px;}
  .once-year-audio {margin-bottom:58px;}
  .cms-gallery {grid-template-columns:1fr;}
  .personal-detail h1 {overflow-wrap:anywhere;}
}
@media (max-width:360px) {
  .chinchin-marquee {top:80px!important;}
  .chinchin-marquee-track {font-size:clamp(24px,7.2vw,30px);}
  .project-switcher-link {font-size:clamp(13px,4vw,18px);}
  .nav {gap:12px;font-size:13px;}
}

/* V21 — last fine-tuning, ONLY mobile Home. Move the CAR group down together
   and make the vertical copy + little star clear the portrait before peeking. */
@media (max-width:700px){
  .hero .logo{top:calc(29% + 17px);}
  .hero .asterisco{top:calc(26% + 17px);}
}


/* V23 — La desaparición en móvil utiliza el MISMO RECORTE que escritorio:
   el texto asciende tras el retrato y se oculta al atravesar su barra azul.
   El borde de esta máscara sigue la pendiente REAL de esa barra del PNG.
   Sin opacidad, sin desvanecimiento, sin máscaras adicionales. */
@media(max-width:700px){
  .hero .creative-wipe{
    clip-path:polygon(
      0 var(--mobile-rail-left,162px),
      100% var(--mobile-rail-right,240px),
      100% 100%,
      0 100%
    )!important;
  }
  .hero .creative-wipe .creative{opacity:1!important;}
}

/* V24 — Safari iPhone: anchor the small blue asterisk to the ACTUAL
   rotated creative-copywriter artwork, not the browser viewport height.
   Both remain fully opaque and retain the original blue-rail clipping. */
@media(max-width:700px){
  .hero .creative-wipe .creative{top:calc(33% + var(--mobile-copy-shift,0px))!important;}
  .hero .creative-star-carrier{top:var(--mobile-star-top,calc(clamp(143px,23.4svh,219px) - 3px))!important;}
}

/* V25 — ONCE en móvil: un vídeo por fila, superficie táctil completa.
   La cuadrícula de dos columnas se mantiene sin cambios en escritorio. */
@media (max-width:700px) {
  .once-spots-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 22px !important;
  }
  .once-spots-grid .spot-piece,
  .once-spots-grid .spot-piece .video-embed {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }
  .once-spots-grid .spot-piece .video-poster {
    touch-action: manipulation;
  }
}

/* V27 — Safari mobile: align the visible blue star just above the actual
   ink of the rotated SVG title, compensating its transparent viewBox padding.
   JS still anchors the star to the letter artwork; scroll clipping and the
   separately animated star remain exactly as in V23–V26. Desktop untouched. */
@media(max-width:700px){
  .hero .creative-star-carrier{
    top:calc(var(--mobile-star-top,calc(clamp(143px,23.4svh,219px) - 3px)) + 15px)!important;
  }
}


/* V28 — Navigation: Home represented by Car’s own logo on every inner page.
   The homepage keeps the original hero and only shows the three text links. */
.page-header .header-home-logo{
  position:absolute;
  left:clamp(17px,4.35vw,70px);
  top:clamp(21px,3vw,47px);
  display:block;
  width:clamp(95px,9.8vw,155px);
  height:auto;
  z-index:2;
  line-height:0;
  text-decoration:none;
}
.header-home-logo img{display:block;width:100%;height:auto;object-fit:contain;}
.header-home-logo:hover img{opacity:.87;}
.header-home-logo:focus-visible{outline:3px solid var(--burgundy);outline-offset:6px;border-radius:2px;}
.page-header:has(.header-home-logo) .nav{padding-top:clamp(29px,5.5vw,86px);}
/* About: 15px closer to the portrait, preserving the marquee/photo overlap. */
@media(min-width:701px){
  .about-marquee{top:calc(clamp(95px,14.2vw,205px) + 15px);}
}
@media(max-width:700px){
  .page-header .header-home-logo{left:16px;top:18px;width:91px;}
  .page-header:has(.header-home-logo) .nav{padding-top:20px;padding-right:17px;gap:12px;}
}
@media(max-width:360px){
  .page-header .header-home-logo{left:13px;top:19px;width:80px;}
  .page-header:has(.header-home-logo) .nav{padding-right:12px;gap:9px;font-size:12px;}
}

.cms-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:30px auto 50px}.cms-gallery-item{margin:0}.cms-gallery img{display:block;width:100%;height:auto}@media(max-width:700px){.cms-gallery{grid-template-columns:1fr}}