/* La hoja de impresión va aparte y solo para print: el navegador la pide cuando
   toca imprimir y el detector de impeccable no la mezcla con la de pantalla. */

:root{
  --mk-primario:#9F0F27;
  --mk-primario-hover:#D86A78;
  --mk-focus:#E17A87;
  --mk-accent-ink:#130D0A;
  --mk-secundario:#AFA79D;
  --mk-dorado:#D4A05C; /* el dorado del monograma SMC: identidad y estructura, nunca acción */
  --mk-dorado-line:rgba(212,160,92,.34); /* separadores de sección y marcos */
  --mk-fondo:#0B0C0A;
  --mk-fondo-2:#10110F;
  --mk-fondo-3:#171714;
  --mk-texto:#F2EDE4;
  --mk-muted:#BEB7AC;
  --mk-dim:#817D75;
  --mk-line:rgba(242,237,228,.13);
  --mk-line-strong:rgba(242,237,228,.22);
  --mk-shadow:rgba(35,8,15,.4);
  --mk-ease:cubic-bezier(.16,1,.3,1);
  --mk-font-body:"Aptos","Segoe UI Variable Text","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mk-font-display:"Barlow Semi Condensed","Barlow Semi Condensed Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}

/* Titulares: Barlow Semi Condensed servida desde la propia web (decisión del cliente,
   4/9/2026, con /impeccable typeset). Antes los titulares pedían un peso 720 que solo
   interpola SF Pro: en Android y en Windows sin Office saltaban a Negro 900 y las letras
   chocaban con el tracking. Solo dos cortes (700 y 800, 16 KB cada uno, subconjunto
   latino); el cuerpo sigue en la fuente del sistema. La reserva imita la métrica de
   Barlow (ascendente 1,0, descendente 0,2, un 85 % del ancho de Arial Bold) para que el
   nombre del héroe no salte cuando llega la fuente. */
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/barlow-semi-condensed-700.woff2?v=1") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/barlow-semi-condensed-800.woff2?v=1") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Semi Condensed Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Roboto Bold"),local("Arial");size-adjust:85%;ascent-override:100%;descent-override:20%;line-gap-override:0%}

*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scrollbar-gutter:stable both-edges;
  background:var(--mk-fondo);
}

body{
  background:
    radial-gradient(circle at 12% 0%, rgba(159,15,39,.1), transparent 28rem),
    linear-gradient(180deg,var(--mk-fondo),var(--mk-fondo-2));
  color:var(--mk-texto);
  font-family:var(--mk-font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:45;
  pointer-events:none;
  opacity:.025;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.56), transparent 32%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.38) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}

a{
  color:inherit;
  text-decoration:none;
}

a:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.premium-cta:focus-visible{
  outline:2px solid var(--mk-focus);
  outline-offset:4px;
  border-radius:10px;
}

.bar{
  position:fixed;
  top:18px;
  left:50%;
  right:auto;
  z-index:40;
  /* Ajustada a su contenido desde el 6/9/2026: con el oficio ya en el héroe, a 1120 px
     la barra llevaba un 60 % de vacío entre el monograma y los botones. */
  width:max-content;
  max-width:calc(100% - 32px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2.5rem;
  min-height:62px;
  padding:.5rem .58rem .5rem .9rem;
  border:1px solid rgba(242,237,228,.16);
  border-radius:14px;
  background:rgba(7,8,7,.68);
  box-shadow:0 22px 70px var(--mk-shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

.bar .brand-roles{
  display:inline-flex;
  align-items:center;
  gap:.62rem;
  min-height:44px;
  min-width:0;
  color:var(--mk-texto);
  font-family:var(--mk-font-display);
  text-transform:none;
  font-weight:700;
  font-size:clamp(.78rem,1.05vw,.98rem);
  letter-spacing:.02em;
  line-height:1.25;
}

/* el monograma SM: latón sobre el vidrio de la barra, sin disco ni anillo (a 44 px
   el sello entero se reduce a un círculo oscuro con un garabato; las letras solas
   se leen). Ocupa el alto útil de la barra (62 − 2 × 8 = 46 px) menos 1 px de aire. */
.bar .brand-mark{
  flex:0 0 auto;
  display:block;
  height:44px;
  width:auto;
}

.bar .brand-roles picture{
  display:contents; /* la imagen es el ítem del flex, no su envoltorio */
}

.bar .brand-text{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
}

.bar .brand-roles .role:not(.role-name){
  color:var(--mk-dorado);
  font-weight:700;
}

.bar .brand-roles .role-name{
  color:var(--mk-texto);
}

.bar .brand-roles .amp{
  color:var(--mk-texto); /* la «y» / «&» en crema: une, no describe */
}

.bar .brand-roles .sep{
  margin:0 .65em;
  color:rgba(242,237,228,.32);
}

.bar-actions{
  display:flex;
  align-items:center;
  gap:.42rem;
  flex:0 0 auto;
}

.bar-pitch{
  color:var(--mk-muted);
  font-size:.82rem;
  line-height:1;
  white-space:nowrap;
  margin-right:.35rem;
}

.bar-availability{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem; /* misma altura que banderas y botones: objetivo de 44 px, antes 36 */
  padding:0 .82rem;
  margin-right:.25rem;
  border:1px solid rgba(242,237,228,.16);
  border-radius:8px;
  background:var(--mk-primario);
  color:var(--mk-accent-ink);
  font-family:var(--mk-font-display);
  font-size:.82rem;
  font-weight:700;
  /* color y fondo en ease (cambio de estado en hover); el transform, en la curva fuerte */
  transition:background .2s ease, color .2s ease, transform .28s var(--mk-ease);
}

@media (hover: hover) and (pointer: fine){
  .bar-availability:hover{
    background:var(--mk-primario-hover);
    color:var(--mk-accent-ink);
    transform:translateY(-1px);
  }
}

.bar-availability:focus-visible{
  background:var(--mk-primario-hover);
  color:var(--mk-accent-ink);
  transform:translateY(-1px);
}

.bar-availability:active{
  transform:scale(.98); /* baja de su elevación al pulsar, como .premium-cta */
  transition-duration:.12s;
}

.lang-switcher{
  display:flex;
  align-items:center;
  gap:.38rem;
}

.lang-flag,
.bar-actions .btn{
  display:inline-flex;
  position:relative;
  align-items:center;
  justify-content:center;
  min-width:2.75rem;
  height:2.75rem;
  border:1px solid rgba(242,237,228,.17);
  border-radius:10px;
  background:rgba(242,237,228,.055);
  color:var(--mk-texto);
  font-family:var(--mk-font-display);
  font-size:.7rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .28s var(--mk-ease);
}

.lang-flag svg{
  width:1.1rem;
  height:auto;
  border-radius:2px;
}

.bar-actions .btn-mail{
  min-width:2.75rem;
  background:var(--mk-primario);
  border-color:rgba(242,237,228,.18);
  color:var(--mk-accent-ink);
}

@media (hover: hover) and (pointer: fine){
  .bar-actions .btn:hover,
  .lang-flag:hover{
    border-color:rgba(242,237,228,.36);
    background:rgba(242,237,228,.1);
    transform:translateY(-1px);
  }
}

.bar-actions .btn:active,
.lang-flag:active,
.premium-cta:active{
  transform:scale(.98);
  transition-duration:.12s;
}

@media (hover: hover) and (pointer: fine){
  /* banderas: al pasar, el recuadro se enciende en crema (estado neutro,
     no es la acción principal) */
  .lang-flag:hover{
    border-color:rgba(242,237,228,.9);
    background:rgba(242,237,228,.08);
  }

  .bar-actions .btn-mail:hover{
    background:var(--mk-primario-hover);
    color:var(--mk-accent-ink);
  }
}

/* El WhatsApp de la barra se enciende en su verde al pasar o al enfocarlo (decisión del
   cliente, 7/9/2026; antes en el integral, desde hoy en todas las páginas). */
@media (hover: hover) and (pointer: fine){
  .bar-actions .btn-wa:hover{
    background:#25D366;
    border-color:#25D366;
    color:#fff;
  }
}
.bar-actions .btn-wa:focus-visible{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
}

/* ===== HÉROE: seis vídeos que avanzan solos, con su frase encima =====
   Una pantalla (100dvh), no seis de scroll. El orden y el ritmo los lleva
   hero.js; aquí viven las capas, la coreografía de entrada y el raíl. */
.vfilm{
  --hero-pad-x:clamp(1.25rem,7vw,6.5rem);
  --hero-pad-b:clamp(1.1rem,4vh,2.4rem);
  position:relative;
  height:100vh; /* iOS anterior a 15.4 no entiende dvh: sin esta línea el héroe se plegaba */
  height:100dvh;
  min-height:560px;
  max-height:1200px;
  overflow:hidden;
  background:var(--mk-fondo);
}

.vstage{
  position:absolute;
  inset:0;
}

.vlayer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  opacity:0;
  /* el giro es un plano largo hacia abajo: el siguiente vídeo espera bajo el borde
     inferior y le pasa por encima al anterior como una lámina (5/9/2026, pedido por
     Daniel: «que pase uno encima del otro»). --zoom lo pone el scroll (capas.js). */
  --zoom:1;
  transform:translate3d(0,102%,0) scale(calc(var(--zoom) * 1.04));
  transition:none;
}

.vlayer.is-active{
  opacity:1;
  z-index:2;
  transform:translate3d(0,0,0) scale(var(--zoom));
  box-shadow:0 -40px 90px rgba(0,0,0,.62);
  transition:transform 1.15s var(--mk-ease), opacity .2s linear;
}

/* el plano que sale se queda debajo, baja un poco, se acerca y se oscurece: la cámara
   inclina hacia abajo y la lámina nueva lo va tapando */
.vlayer.is-prev{
  opacity:1;
  z-index:1;
  /* baja un 5 % y se acerca un 14 %: el borde superior sigue tapando el fondo (con un
     12 % y 1.1 asomaba una franja negra arriba durante la lámina) */
  transform:translate3d(0,5%,0) scale(calc(var(--zoom) * 1.14));
  filter:brightness(.55);
  transition:transform 1.15s var(--mk-ease), filter 1.15s ease, opacity .3s ease 1s;
}

@media(prefers-reduced-motion:reduce){
  .vlayer{transition:opacity .3s ease;transform:none}
  .vlayer.is-active{transform:none;box-shadow:none}
  .vlayer.is-prev{opacity:0;transform:none;filter:none;transition:opacity .3s ease}
}

.vfilm.en-escena .vlayer,
.vfilm .vmsg.is-active,
.vfilm .vmsg.is-leaving{
  will-change:opacity,transform;
}

/* Velo mínimo: oscurece solo donde hay texto (abajo y algo a la izquierda) y
   un poco arriba para que la barra se lea. El resto del vídeo se ve limpio. */
.vscrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(7,8,7,.42) 0%, rgba(7,8,7,.16) 38%, rgba(7,8,7,0) 66%),
    linear-gradient(180deg, rgba(7,8,7,.34) 0%, rgba(7,8,7,0) 26%, rgba(7,8,7,0) 52%, rgba(7,8,7,.58) 78%, rgba(7,8,7,.86) 100%);
}

/* Frases: apiladas en el mismo sitio, abajo a la izquierda, encima del raíl. */
.vmsgs{
  position:absolute;
  left:var(--hero-pad-x);
  right:var(--hero-pad-x);
  bottom:calc(var(--hero-pad-b) + 4.4rem);
  z-index:3;
  pointer-events:none;
}

.vmsg{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  opacity:0;
  visibility:hidden;
  text-align:left;
  text-shadow:0 12px 40px rgba(13,10,8,.5);
}

.vmsg.is-active{
  opacity:1;
  visibility:visible;
}

.vmsg.is-leaving{
  visibility:visible;
  animation:heroLeave .2s var(--mk-ease) both; /* salida más corta que la entrada y con curva de salida (review-animations, 4/9/2026) */
}

.premium-hero-copy{
  width:min(760px,100%);
  pointer-events:auto;
}

/* Palabras: entran una a una (70 ms de escalón; 110 en el nombre) y enfocan,
   como una óptica: de 10 px de desenfoque a nítido, con una subida corta.
   El estado por defecto es visible y nítido: si el CSS o el JS fallan, el
   texto está ahí. */
.hero-w{
  --step:70ms;
  display:inline-block;
}

/* alemán en móvil: la frase del héroe usa todo el ancho de la copia para que
   «FPV-Aufnahmen in» quepa en una línea; las palabras siguen sin partirse. */
@media(max-width:760px){
  :lang(de) .premium-sequence-line{max-width:none}
}

.premium-name .hero-w{
  --step:80ms; /* escalonado máximo entre elementos de un grupo */
}

.vmsg.is-active .hero-w{
  animation:heroFocus .62s var(--mk-ease) both;
  animation-delay:calc(var(--i,0) * var(--step));
}

.vmsg.is-active .premium-tagline{
  animation:heroRise .5s var(--mk-ease) both;
  animation-delay:.3s;
}

@keyframes heroFocus{
  /* rótulo de película: entra de lado, con un barrido desde la izquierda, una pizca de
     inclinación y el desenfoque que se enfoca (5/9/2026) */
  from{opacity:0;filter:blur(9px);transform:translate3d(-.5em,0,0) skewX(-7deg);clip-path:inset(-.1em 100% -.15em -.05em)}
  40%{opacity:1}
  to{opacity:1;filter:blur(0);transform:none;clip-path:inset(-.1em -.2em -.15em -.05em)}
}

/* Cambio pedido por el visitante (clic o flecha en el raíl; hero.js pone .is-manual):
   la interfaz obedece rápido. Sin desenfoque, 200 ms y escalón de 20 ms; la frase
   que sale, en 120 ms. La entrada completa (620 ms, 10 px de desenfoque) queda para
   la primera carga y el giro automático, que nadie ha pedido. Medido antes: 800 ms
   hasta que la frase se asentaba tras una flecha. */
.vfilm.is-manual .vmsg.is-active .hero-w{
  animation:heroFocusFast .2s var(--mk-ease) both;
  animation-delay:calc(var(--i,0) * 20ms);
}

.vfilm.is-manual .vmsg.is-active .premium-tagline{
  animation-duration:.2s;
  animation-delay:.05s;
}

.vfilm.is-manual .vmsg.is-leaving{
  animation-duration:.12s;
}

@keyframes heroFocusFast{
  from{opacity:0;transform:translate3d(-.22em,0,0)}
  to{opacity:1;transform:none}
}

@keyframes heroRise{
  from{opacity:0;transform:translate3d(-14px,0,0)}
  to{opacity:1;transform:none}
}

@keyframes heroLeave{
  /* el rótulo que sale se va por el otro lado, como si la cámara panoramizase */
  from{opacity:1;transform:none;filter:blur(0)}
  to{opacity:0;transform:translate3d(.35em,0,0);filter:blur(6px)}
}

.premium-name h1.big{
  font-family:var(--mk-font-display);
  text-transform:none;
  font-size:clamp(3.2rem,8.4vw,7.2rem);
  line-height:.9;
  letter-spacing:-.01em;
  font-weight:800;
  margin:0 0 1rem;
  text-wrap:balance;
}

.premium-tagline{
  max-width:34ch;
  font-family:var(--mk-font-body);
  font-size:clamp(1.02rem,1.9vw,1.3rem);
  line-height:1.4;
  color:var(--mk-texto);
  margin:0;
  text-wrap:balance;
}

/* El oficio bajo el nombre (5/9/2026): el rótulo que iba en la barra («Piloto de Drone y
   FPV · Mallorca») baja al héroe con sus mismos colores: oficios en latón, la «y» y la
   isla en crema, el punto al 32 %. La barra se queda con el monograma solo. */
.premium-tagline--roles{
  font-family:var(--mk-font-display);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  max-width:none;
  white-space:nowrap;
}
.premium-tagline--roles .role:not(.role-name){
  color:var(--mk-dorado);
}
.premium-tagline--roles .role-name,
.premium-tagline--roles .amp{
  color:var(--mk-texto);
}
.premium-tagline--roles .sep{
  margin:0 .55em;
  color:rgba(242,237,228,.32);
}

/* Muelle fijo: botón + raíl de seis segmentos + pausa. Entra una sola vez,
   detrás del nombre, y se queda en todas las diapositivas. */
.hero-dock{
  position:absolute;
  left:var(--hero-pad-x);
  right:var(--hero-pad-x);
  bottom:var(--hero-pad-b);
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.5rem;
  opacity:0;
  transform:translateY(14px);
}

.vfilm.is-ready .hero-dock{
  animation:heroRise .52s var(--mk-ease) both;
  animation-delay:.38s;
}

.hero-rail{
  display:flex;
  align-items:center;
  gap:.4rem;
}

.hero-seg{
  position:relative;
  width:clamp(26px,3.6vw,52px);
  height:44px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.hero-seg::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  margin-top:-1px;
  border-radius:2px;
  background:rgba(242,237,228,.3);
}

/* La zona de pulsación de cada barrita absorbe el hueco con la vecina: la barra
   visible no cambia, pero el objetivo pasa de 26 a 32 px en móvil (mínimo 24). */
.hero-seg::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-.2rem;
  right:-.2rem;
}

.hero-seg-fill{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  margin-top:-1px;
  border-radius:2px;
  background:var(--mk-dorado);
  transform:scaleX(0);
  transform-origin:left center;
}

.hero-seg.is-done .hero-seg-fill{
  transform:scaleX(1);
  opacity:.55;
}

.hero-seg.is-running .hero-seg-fill{
  transform:scaleX(1);
  transition:transform var(--seg-dur,6s) linear;
}

@media (hover: hover) and (pointer: fine){
  .hero-seg:hover::before{
    background:rgba(242,237,228,.5);
  }
}

.hero-seg:focus-visible{
  outline:2px solid var(--mk-focus);
  outline-offset:2px;
  border-radius:4px;
}

/* El botón de pausa no se ve: solo las barritas. Sigue en el DOM para quien
   navega con teclado (WCAG 2.2.2: lo que se mueve solo debe poder pararse) y
   aparece únicamente al recibir el foco con Tab. */
.hero-pause{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  padding:0;
  margin:0;
}

.hero-pause:focus-visible{
  position:static;
  width:44px;
  height:44px;
  overflow:visible;
  clip:auto;
  clip-path:none;
  margin-left:.35rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(242,237,228,.24);
  border-radius:999px;
  background:rgba(7,8,7,.42);
  color:var(--mk-texto);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}

.hero-pause svg{
  width:14px;
  height:14px;
  fill:currentColor;
}

.hero-pause .ico-play{display:none}
.hero-pause[aria-pressed="true"] .ico-pause{display:none}
.hero-pause[aria-pressed="true"] .ico-play{display:block}

@media (hover: hover) and (pointer: fine){
  .hero-pause:hover{
    background:rgba(7,8,7,.62);
    border-color:rgba(242,237,228,.45);
  }
}

.hero-pause:focus-visible{
  outline:2px solid var(--mk-focus);
  outline-offset:3px;
}

.premium-cta{
  margin-top:.2rem;
}

.premium-sequence-line{
  max-width:13ch;
  font-family:var(--mk-font-display);
  font-size:clamp(2.35rem,6.3vw,6rem);
  /* 1.02 y no .96: en alemán estas frases parten hasta en 5 líneas y las
     diéresis de "für" o "Küste" dejaban solo 2,3px de holgura sobre la
     cola de la línea anterior. Como la tipografía es la pila del sistema,
     esa holgura cambia en cada máquina. */
  line-height:1.02;
  letter-spacing:-.01em;
  font-weight:700;
  color:var(--mk-texto);
  text-wrap:balance;
}

.premium-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.86rem 1.22rem;
  border:1px solid rgba(242,237,228,.18);
  border-radius:8px;
  background:var(--mk-primario);
  color:var(--mk-accent-ink);
  font-family:var(--mk-font-display);
  text-transform:none;
  letter-spacing:.02em;
  font-size:.98rem;
  line-height:1;
  font-weight:700;
  box-shadow:0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .28s var(--mk-ease);
  white-space:nowrap;
}

@media (hover: hover) and (pointer: fine){
  .premium-cta:hover{
    background:var(--mk-primario-hover);
    color:var(--mk-accent-ink);
    transform:translateY(-1px);
  }
}

.premium-cta:focus-visible{
  background:var(--mk-primario-hover);
  color:var(--mk-accent-ink);
  transform:translateY(-1px);
}

.close{
  position:relative;
  overflow:hidden;
  text-align:left;
  padding:clamp(6rem,11vw,10rem) clamp(1.15rem,5vw,4rem) clamp(5rem,8vw,7rem);
  background:var(--mk-fondo-2);
}

/* Fondo de fotos del bloque final. Tres capas apilan oscuridad: la opacidad del
   conjunto, el brightness de la imagen y el velo de ::after. Antes la foto
   llegaba al ~5 % en el centro (brightness .7 bajo un velo del 92 %): negro con
   textura. Ahora se ve la escena y el peor caso (blanco puro bajo texto) queda
   en 4.9:1 con --mk-muted. El selector lleva .close delante porque el CSS
   crítico inline de las páginas declara `.close .close-bg{opacity:1}` y pisaba
   la regla de aquí (la antigua opacity:.34 nunca llegó a aplicarse). */
.close .close-bg{
  position:absolute;
  inset:0;
  opacity:.75;
}

.close-bg .slide{
  position:absolute;
  inset:0;
  opacity:0;
  animation:premiumBgCycle 56s linear infinite;
  animation-delay:calc(var(--d,0) * -4s);
}

.close-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.06) brightness(.88);
  /* llega dentro de una diapositiva ya visible: entra con fundido, no de golpe */
  opacity:0;
  transition:opacity .4s var(--mk-ease);
}

.close-bg img.is-loaded,
.no-js .close-bg img{
  opacity:1;
}

.close-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(7,8,7,.62), rgba(7,8,7,.38) 48%, rgba(7,8,7,.56)),
    linear-gradient(180deg, rgba(7,8,7,.38), rgba(16,17,15,.84));
}

.close-in{
  position:relative;
  z-index:2;
  max-width:1120px;
  margin:0 auto;
  text-shadow:none;
}

.info-block{
  display:grid;
  grid-template-columns:minmax(180px, .72fr) minmax(0, 1.7fr);
  gap:clamp(1.5rem,4vw,4.5rem);
  padding:clamp(2.4rem,6vw,5rem) 0;
  border-top:1px solid var(--mk-dorado-line);
}

.info-block:first-child{
  border-top:0;
  padding-top:0;
}

.info-block--compact{
  padding-top:clamp(1.5rem,3.2vw,2.4rem);
  padding-bottom:clamp(1.5rem,3.2vw,2.4rem);
}

.info-block--compact:first-child{
  padding-top:0;
}

.info-block--compact .info-grid > div{
  min-height:clamp(150px,18vw,200px);
}

.info-h{
  max-width:13ch; /* un solo tamaño de título de sección, el compacto (typeset, 4/9/2026) */
  font-family:var(--mk-font-display);
  text-transform:none;
  font-weight:800;
  font-size:clamp(1.7rem,3.3vw,3rem);
  letter-spacing:-.01em;
  line-height:.95;
  color:var(--mk-texto);
  text-wrap:balance;
}

/* Títulos largos de sección (Servicios lleva ahora la búsqueda «…en Mallorca»):
   un punto menos de cuerpo y más ancho, para que queden en tres líneas y no en cinco. */
.info p,
.close-in p{
  color:var(--mk-muted);
  line-height:1.72;
  font-size:clamp(1rem,1.5vw,1.08rem);
  max-width:65ch;
  margin-bottom:1.4em; /* casi una interlínea: los párrafos ya no se pegan */
  text-wrap:pretty;
}

.info p strong,
.close-in p strong{
  color:var(--mk-dorado);
  font-weight:650;
}

/* Sobre mí: título arriba y los dos párrafos en dos columnas. Con la rejilla
   título/contenido el segundo párrafo caía bajo el título, en la columna estrecha,
   y el bloque medía 455px para dos párrafos. */
.info-block--about{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.5rem,3vw,3rem);
  row-gap:clamp(1rem,2vw,1.5rem);
  align-items:start;
}

.info-block--about .info-h{
  grid-column:1 / -1;
}

.info-block--about p{
  margin-bottom:0;
}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.85rem,1.8vw,1.1rem);
}

.info-grid > div{
  min-height:clamp(180px,24vw,260px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(1.1rem,2.2vw,1.65rem);
  border:1px solid var(--mk-line);
  border-radius:12px;
  background:rgba(242,237,228,.045);
  /* Capas con sombra (decisión del cliente, 4/9/2026): la ficha flota un poco sobre
     el fondo con la sombra de vino de la barra a menor escala. Antes era plana. */
  box-shadow:0 10px 15px var(--mk-shadow), inset 0 1px 0 rgba(255,255,255,.055);
}

/* Los fondos de foto de las cuatro fichas (~700 KB) solo se piden cuando la sección
   se acerca (hero.js pone .is-near en .close a 600 px); hasta entonces las fichas
   llevan el fondo plano de .info-grid > div. */
/* Servicios: cuatro fichas equivalentes en 2x2. A cuatro columnas dentro de la
   columna de contenido cada ficha medía 173px y el texto caía a ~14 caracteres
   por línea; en 2x2 la línea dobla y la foto de fondo se lee como foto. */
.info-grid--services{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.9rem,1.5vw,1.35rem);
}

.info-grid--services > div{
  grid-column:auto;
  min-height:clamp(190px,16vw,230px);
  border-color:var(--mk-dorado-line); /* marco dorado: estructura, como los separadores */
  position:relative;
  isolation:isolate;
}

/* La foto va en una capa propia que entra con fundido cuando ya está descargada
   (hero.js marca .is-loaded al cargar). La ficha está siempre en pantalla cuando
   llega el JPEG, y antes se pintaba de golpe. Sin JS se ve directamente. */
.info-grid--services > div::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background-position:center;
  background-size:cover;
  opacity:0;
  transition:opacity .35s var(--mk-ease);
  pointer-events:none;
}

.info-grid--services > div.is-loaded::before,
.no-js .info-grid--services > div::before{
  opacity:1;
}

.is-near .info-grid--services > div:nth-child(1)::before,
.no-js .info-grid--services > div:nth-child(1)::before{
  background-image:
    linear-gradient(180deg, rgba(7,8,7,.2), rgba(7,8,7,.88)),
    url("/assets/camara-estudio.webp");
}

.is-near .info-grid--services > div:nth-child(2)::before,
.no-js .info-grid--services > div:nth-child(2)::before{
  background-image:
    linear-gradient(180deg, rgba(7,8,7,.16), rgba(7,8,7,.86)),
    url("/assets/son-moix-aereo-poster.webp");
}

.is-near .info-grid--services > div:nth-child(3)::before,
.no-js .info-grid--services > div:nth-child(3)::before{
  background-image:
    linear-gradient(180deg, rgba(7,8,7,.16), rgba(7,8,7,.86)),
    url("/assets/amanecer.webp");
}

.is-near .info-grid--services > div:nth-child(4)::before,
.no-js .info-grid--services > div:nth-child(4)::before{
  background-image:
    linear-gradient(180deg, rgba(7,8,7,.18), rgba(7,8,7,.88)),
    url("/assets/nautica.webp");
}

.info-grid h3{
  max-width:18ch;
  font-family:var(--mk-font-display);
  text-transform:none;
  font-weight:700;
  font-size:clamp(1.15rem,2.1vw,1.55rem);
  letter-spacing:-.005em;
  line-height:1.05;
  color:var(--mk-texto);
  margin-bottom:.55rem;
  text-wrap:balance;
}

.info-grid p,
.close-in .info-grid p{
  font-size:.95rem;
  line-height:1.55;
  margin-bottom:0;
  color:rgba(242,237,228,.74);
}

.experience-proof{
  grid-template-columns:minmax(280px, .82fr) minmax(0, 1.58fr);
  align-items:start;
}

.experience-proof > div{
  min-width:0;
}

.experience-proof .premium-brands{
  width:100%;
  overflow:hidden;
  margin-top:1.55rem;
  padding:.85rem 0;
  border-top:1px solid var(--mk-line);
  border-bottom:1px solid var(--mk-line);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.experience-proof .premium-brand-track{
  display:flex;
  align-items:stretch;
  width:max-content;
  gap:.75rem;
  animation:premiumLogoRail 38s linear infinite;
  will-change:transform;
}

.experience-proof .premium-brands:focus-within .premium-brand-track{
  animation-play-state:paused;
}

@media (hover: hover) and (pointer: fine){
  /* en táctil el hover se queda pegado al tocar y la tira se paraba hasta tocar otra cosa */
  .experience-proof .premium-brands:hover .premium-brand-track{
    animation-play-state:paused;
  }
}

.experience-proof .experience-item{
  width:auto;
  min-height:auto;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 .6rem;
}

.experience-proof .experience-item img{
  display:block;
  width:auto;
  max-width:100%;
  height:clamp(25px,3.2vw,36px);
  object-fit:contain;
  object-position:left center;
}

.experience-proof .experience-item img.tall{
  height:clamp(34px,4.5vw,48px);
}

.experience-proof .experience-item img.outline{
  filter:brightness(1.14) contrast(1.07) saturate(1.2);
}

@keyframes premiumLogoRail{
  to{transform:translateX(calc(-50% - .375rem))}
}

@keyframes premiumBgCycle{
  0%,5%{opacity:0}
  8%,13%{opacity:1}
  16%,100%{opacity:0}
}

.faq{
  border-top:1px solid var(--mk-dorado-line);
}

.faq details{
  border-bottom:1px solid var(--mk-line);
}

.faq summary{
  font-family:var(--mk-font-display);
  text-transform:none;
  font-weight:700;
  font-size:clamp(1rem,1.7vw,1.16rem);
  letter-spacing:0;
  color:var(--mk-texto);
  line-height:1.35;
  cursor:pointer;
  list-style:none;
  position:relative;
  padding:1.25rem 2.4rem 1.25rem 0;
  transition:color .2s ease;
}

.faq summary::-webkit-details-marker{
  display:none;
}

/* Un solo marcador. El CSS crítico de la página dibuja aquí un chevrón con
   bordes; se anula (border:0, sin caja) para que solo quede el «+», que gira
   a «×» al abrir. Antes se veían los dos superpuestos. */
.faq summary::after{
  content:"+";
  position:absolute;
  right:.2rem;
  top:1.08rem;
  width:auto;
  height:auto;
  border:0;
  transform:none;
  color:var(--mk-muted); /* en reposo, crema atenuada (8,2:1); se enciende en rojo claro al pasar el ratón o abrir (quieter, 4/9/2026) */
  font-size:1.4rem;
  line-height:1;
  transition:transform .25s var(--mk-ease), color .2s ease;
}

@media (hover: hover) and (pointer: fine){
  .faq summary:hover{
    color:var(--mk-primario-hover);
  }
  .faq summary:hover::after{
    color:var(--mk-primario-hover);
  }
}

.faq summary:focus-visible::after{
  color:var(--mk-primario-hover);
}

.faq details[open] summary{
  color:var(--mk-primario-hover);
}

.faq details[open] summary::after{
  top:1.08rem;
  color:var(--mk-primario-hover);
  transform:rotate(45deg);
}

.faq-a{
  padding:0 0 1.35rem;
  max-width:65ch;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s var(--mk-ease), transform .25s var(--mk-ease);
}

.faq details[open] .faq-a{
  opacity:1;
  transform:none;
}

/* Donde existe ::details-content, el fundido va en el propio pseudo-elemento y no
   en .faq-a: el contenido de un details cerrado está en content-visibility:hidden,
   no tiene estilo previo, y la transición de un descendiente arranca según le
   pille (medido el 4/9/2026: 3 de 7 clics abrían con el texto ya a opacidad 1).
   El pseudo-elemento siempre tiene estilo y arranca en el mismo fotograma. */
@supports selector(::details-content){
  .faq .faq-a{
    opacity:1;
    transform:none;
    transition:none;
  }

  .faq details::details-content{
    opacity:0;
    transform:translateY(6px);
    transition:opacity .25s var(--mk-ease), transform .25s var(--mk-ease);
  }

  .faq details[open]::details-content{
    opacity:1;
    transform:none;
  }
}

/* La caja crecía de golpe y empujaba el pie; el texto se desvanecía después. Ahora
   la altura acompaña al desvanecido, solo donde el navegador interpola height:auto;
   en el resto abre de golpe como antes. Un solo reloj: caja, texto y «+» a 250 ms. */
@supports (interpolate-size: allow-keywords) and selector(::details-content){
  .faq{
    interpolate-size:allow-keywords;
  }

  .faq details::details-content{
    height:0;
    overflow:clip;
    transition:opacity .25s var(--mk-ease), transform .25s var(--mk-ease), height .25s var(--mk-ease), content-visibility .25s allow-discrete;
  }

  .faq details[open]::details-content{
    height:auto;
  }
}

.close-in .faq-a p{
  font-size:1rem;
  line-height:1.68;
  margin-bottom:.9em;
}

.close-in .faq-a p:last-child{
  margin-bottom:0;
}

footer{
  position:relative;
  z-index:5;
  background:#090A09;
  padding:clamp(3rem,6vw,5rem) clamp(1.2rem,5vw,4rem) 1.4rem;
  border-top:1px solid var(--mk-dorado-line);
}

.foot-grid{
  max-width:1120px;
  margin:0 auto;
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;
  align-items:start;
}

.foot-cta{
  width:100%;
  max-width:100%;
  justify-self:stretch;
  text-align:left;
}

/* el sello entero, a un tamaño donde el anillo y los corchetes de encuadre se ven:
   cierra la página como un sello. Decorativo (alt vacío); el nombre va debajo. */
.foot-seal{
  display:block;
  width:clamp(104px,12vw,136px);
  margin:0 0 1.15rem;
}

.foot-seal img{
  display:block;
  width:100%;
  height:auto;
}

.foot-cta h2{
  font-family:var(--mk-font-display);
  text-transform:none;
  font-weight:800;
  line-height:.92;
  letter-spacing:-.01em;
  max-width:none;
  white-space:nowrap;
  text-wrap:normal;
}

.foot-availability{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px; /* mismo botón principal que en el héroe; antes 40 px y .92rem */
  margin-top:.9rem;
  padding:.86rem 1.22rem;
  border:1px solid rgba(242,237,228,.18);
  border-radius:8px;
  background:var(--mk-primario);
  color:var(--mk-accent-ink);
  font-family:var(--mk-font-display);
  font-size:.98rem;
  font-weight:700;
  letter-spacing:.02em;
  transition:background .2s ease, color .2s ease, transform .28s var(--mk-ease);
}

@media (hover: hover) and (pointer: fine){
  .foot-availability:hover{
    background:var(--mk-primario-hover);
    color:var(--mk-accent-ink);
    transform:translateY(-1px);
  }
}

.foot-availability:focus-visible{
  background:var(--mk-primario-hover);
  color:var(--mk-accent-ink);
  transform:translateY(-1px);
}

.foot-availability:active{
  transform:translateY(-1px) scale(.98);
  transition-duration:.12s;
}

/* El vino profundo pide tinta clara; el vino de hover, más luminoso, tinta oscura. */
.bar-availability,
.bar-actions .btn-mail,
.premium-cta,
.foot-availability{
  color:var(--mk-texto);
}

@media (hover: hover) and (pointer: fine){
  .bar-availability:hover,
  .bar-actions .btn-mail:hover,
  .premium-cta:hover,
  .foot-availability:hover{
    color:var(--mk-accent-ink);
  }
}

.bar-availability:focus-visible,
.premium-cta:focus-visible,
.foot-availability:focus-visible{
  color:var(--mk-accent-ink);
}

.foot-contact{
  display:flex;
  flex-flow:row nowrap;
  justify-content:flex-start;
  gap:.35rem;
  margin-top:1.65rem;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.foot-contact::-webkit-scrollbar{
  display:none;
}

/* Logos de contacto (7/9/2026, decisión del cliente): cada canal es su logo en silueta
   crema, sin caja, igual en escritorio y en móvil, y se enciende con el color plano de su
   marca al pasar, tocar o enfocar. Mismo tratamiento que las pruebas de AESA y Coverdrone
   de al lado y que los iconos de la barra: un solo lenguaje en el pie. El nombre del canal
   vive en aria-label y title. Google es una estrella: la G no se puede usar en un color. */
.foot-contact a{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:44px;
  height:44px;
  border-radius:10px;
  color:rgba(242,237,228,.78);
  --brand-hover:var(--mk-primario);
  transition:color .2s ease, transform .28s var(--mk-ease);
}
.foot-contact a svg{
  width:22px;
  height:22px;
  display:block;
}

.foot-contact a[href*="wa.me"],
.foot-contact a[href*="whatsapp"]{
  --brand-hover:#25D366;
}

.foot-contact a[href^="mailto:"]{
  --brand-hover:#FBBC04; /* el amarillo de la M de Gmail (5/9/2026): el email no es una
                            marca y el rojo se confundía con Instagram; con amarillo la
                            fila enciende un color distinto por chip. Tinta oscura encima. */
}

.foot-contact a[href*="linkedin.com"]{
  --brand-hover:#0A66C2;
}

.foot-contact a[href*="instagram.com"]{
  --brand-hover:#E4405F;
}

.foot-contact a[href*="g.page"]{
  --brand-hover:#4285F4; /* el azul de Google: la reseña es una acción en su casa */
}


@media (hover: hover) and (pointer: fine){
  .foot-contact a:hover{
    color:var(--brand-hover);
    transform:translateY(-1px);
  }


}

/* Respuesta a la pulsación: en móvil pasan cientos de ms hasta que el sistema abre
   la app y el toque parecía ignorado. Misma convención que .premium-cta:active. */
.foot-contact a:active{
  color:var(--brand-hover); /* en táctil no hay hover: el toque enciende el logo */
  transform:scale(.94);
  transition-duration:.12s;
}

.foot-contact a:focus-visible{
  color:var(--brand-hover);
  transform:translateY(-1px);
}




/* Pruebas de credibilidad (5/9/2026): operador registrado en AESA y seguro de RC con
   Coverdrone. Logos en silueta crema al 70 % (monocromo, como la tira de clientes: no son
   acción) que suben al 100 % al pasar el ratón; cada pieza es un enlace en pestaña nueva.
   Se ven también en móvil, a diferencia de los chips. Sin número de operador: es personal. */
.foot-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  margin-top:1.65rem;
}
.foot-row .foot-contact{
  margin-top:0;
  min-width:0;
  flex:0 1 auto;
}
.foot-row .proof{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.5rem;
  min-height:44px;
  color:var(--mk-muted);
  font-size:.73rem;
  letter-spacing:.02em;
  text-decoration:none;
  border-radius:6px;
}
.foot-row .proof span{
  white-space:nowrap;
}
.foot-row .proof img{
  display:block;
  height:26px;
  width:auto;
  opacity:.7;
  transition:opacity .2s var(--mk-ease);
}
.foot-row .proof img[src*="aesa"]{
  height:32px; /* icono + palabra, sin el nombre largo del organismo, ilegible a este tamaño */
}
.foot-row .proof:focus-visible{
  color:var(--mk-texto);
}
@media (hover: hover) and (pointer: fine){
  .foot-row .proof:hover{
    color:var(--mk-texto);
  }
}
.foot-row .proof:focus-visible img{
  opacity:1;
}
@media (hover: hover) and (pointer: fine){
  .foot-row .proof:hover img{
    opacity:1;
  }
}
.foot-row .proof:focus-visible{
  outline:2px solid var(--mk-dorado);
  outline-offset:4px;
}


.foot-legal{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--mk-muted);
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (hover: hover) and (pointer: fine){
  .foot-legal:hover{
    color:var(--mk-primario-hover);
  }
}

/* Navegación de servicios en el pie (7/9/2026): enlaces internos a las páginas de servicio
   desde todas las páginas; las páginas de servicio la heredan del pie de su portada. */
.foot-nav{
  max-width:1120px;
  margin:2.2rem auto 0;
  padding-top:1rem;
  border-top:1px solid var(--mk-line);
}
.foot-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.1rem 1.6rem;
}
.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--mk-font-display);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mk-dorado);
  transition:color .2s var(--mk-ease);
}
@media (hover: hover) and (pointer: fine){
  .foot-nav a:hover{
    color:var(--mk-texto);
  }
}
.foot-nav + .foot-bottom{
  margin-top:1rem;
}

.foot-bottom{
  max-width:1120px;
  margin:2.2rem auto 0;
  padding-top:1rem;
  border-top:1px solid var(--mk-line);
  display:flex;
  justify-content:space-between;
  gap:.6rem 1.2rem;
  flex-wrap:wrap;
  color:var(--mk-dim);
  font-size:.78rem;
}

@media(min-width:761px){
  footer{
    padding:2.35rem clamp(1.2rem,5vw,4rem) 1.05rem;
  }

  .foot-grid{
    max-width:760px;
    gap:.75rem;
    justify-items:center;
    text-align:center;
  }

  .foot-cta{
    justify-self:center;
    text-align:center;
    display:grid;
    justify-items:center;
  }

  .foot-cta h2{
    font-size:clamp(2.05rem,3.8vw,3.65rem);
    text-align:center;
  }

  .foot-availability{
    margin-top:.72rem;
  }

  .foot-contact{
    justify-content:center;
    margin-top:.82rem;
    gap:.42rem;
  }




  .foot-bottom{
    max-width:760px;
    margin:1.2rem auto 0;
    padding-top:.85rem;
    justify-content:center;
    text-align:center;
  }
}

@media(max-width:1050px){
  .bar-pitch{
    display:none;
  }
}

@media(max-width:760px){
  /* cinco chips ya no caben en una fila de 375 px: parten en dos, alineados con el
     nombre. Con nowrap, la fila (432 px) ensanchaba la pista del grid del pie y la
     página entera pasaba a 451 px: desbordamiento horizontal en todo el móvil. */
  .foot-contact{
    flex-wrap:wrap;
    justify-content:flex-start;
    overflow:visible;
    max-width:100%;
  }
  /* las pruebas (AESA, Coverdrone) pasan debajo de los chips, una al lado de la otra */
  .foot-row{
    flex-wrap:wrap;
    justify-content:center; /* las pruebas centradas, como en escritorio; los chips
                               siguen alineados con el nombre dentro de su fila */
    gap:1rem 2rem;
    margin-top:.82rem;
  }
  .foot-row .foot-contact{
    flex:0 0 100%;
    order:0;
  }
  .foot-row .proof{
    order:1;
  }

  /* Compacta y centrada también en móvil (7/9/2026, decisión del cliente): antes iba a
     todo el ancho y quedaba un hueco vacío entre el monograma y las banderas. Ahora se
     ajusta a su contenido, como en escritorio, con menos aire entre las dos partes. */
  .bar{
    top:10px;
    width:max-content;
    max-width:calc(100% - 20px);
    min-height:56px;
    padding:.42rem .48rem .42rem .62rem;
    border-radius:12px;
    gap:.75rem;
  }

  /* en móvil el oficio se queda (el nombre ya no va en la barra). Junto a los
     cuatro botones quedan ~120px: el oficio parte en dos líneas y «Mallorca»
     va en la tercera; nada se recorta con puntos suspensivos. */
  .bar .brand-roles{
    font-size:.7rem; /* 11,2px: por encima del suelo de legibilidad de 11px */
    letter-spacing:0;
    gap:.5rem;
    max-width:calc(38vw + 48px); /* el ancho de texto de antes más el monograma y su hueco */
    line-height:1.15;
  }

  .bar .brand-mark{
    height:40px; /* alto útil de la barra en móvil: 56 − 2 × 6,7 ≈ 42 px */
  }

  .bar .brand-text{
    white-space:normal;
    overflow:visible;
    column-gap:.45em; /* si el oficio y «Mallorca» caben en una línea (apaisado), no se pegan */
  }

  .bar .brand-roles .role{
    display:block;
    white-space:normal;
  }

  .bar .brand-roles .role-name{
    margin-top:.15em;
  }

  .bar .brand-roles .sep{
    display:none;
  }

  .bar-actions{
    gap:.32rem;
  }

  .lang-flag,
  .bar-actions .btn{
    min-width:2.75rem;
    height:2.75rem;
    border-radius:8px;
  }

  .vfilm{
    min-height:420vh;
  }

  

  .premium-name h1.big{
    font-size:clamp(3.05rem,15vw,5rem);
    line-height:.9;
    margin-bottom:1rem;
  }

  .premium-tagline{
    max-width:26ch;
    font-size:clamp(.95rem,3.6vw,1.1rem);
    margin-bottom:1.1rem;
  }

  .premium-sequence-line{
    max-width:10ch;
    font-size:clamp(2.28rem,11vw,4.1rem);
  }

  .vfilm{
    --hero-pad-x:1.15rem;
    --hero-pad-b:1.1rem;
    min-height:100svh;
  }

  .vmsgs{
    bottom:calc(var(--hero-pad-b) + 7.4rem);
  }

  .hero-dock{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:.85rem;
  }

  .hero-rail{
    gap:.32rem;
  }

  .hero-seg{
    width:clamp(24px,7vw,34px);
  }

  .hero-seg::after{
    left:-.16rem;
    right:-.16rem;
  }

  .premium-cta{
    min-height:46px;
    padding:.82rem 1rem;
    font-size:.92rem;
  }

  .close{
    padding:5rem 1.1rem 4rem;
  }

  .info-block{
    grid-template-columns:1fr;
    gap:1.1rem;
    padding:3rem 0;
  }

  .info-h{
    max-width:12ch;
  }

  .info-grid{
    grid-template-columns:1fr;
  }

  .info-grid > div{
    min-height:190px;
  }

  /* En móvil se mantiene el carrusel: una única fila continua y fundidos en los bordes. */
  .experience-proof .premium-brands{
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }

  .experience-proof .premium-brand-track{
    display:flex;
    align-items:stretch;
    width:max-content;
    gap:.55rem;
    animation:premiumLogoRail 30s linear infinite;
    transform:none;
  }

  .experience-proof .experience-item{
    padding:0 .45rem;
  }

  .experience-proof .premium-brand-track .experience-item:nth-child(n+10){
    display:flex;
  }

  .foot-cta h2{
    font-size:clamp(1.82rem,8vw,3rem);
    white-space:nowrap;
  }

  .foot-bottom{
    justify-content:flex-start;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .vlayer{
    transition:none;
  }

  .vmsg.is-active .hero-w,
  .vmsg.is-active .premium-tagline,
  .vfilm.is-ready .hero-dock,
  .vmsg.is-leaving{
    animation:none!important;
  }

  .vmsg.is-leaving{
    opacity:0;
  }

  .hero-dock{
    opacity:1;
    transform:none;
  }

  .hero-seg.is-running .hero-seg-fill{
    transition:none;
  }

  .vstage{
    position:relative!important;
    min-height:100dvh;
    height:auto;
  }

  

  

  

  .vmsgs{
    position:relative;
    min-height:100dvh;
    display:grid;
    align-content:end;
    gap:1rem;
    padding:7rem 1.2rem 4rem;
  }

  

  .premium-name h1.big{
    margin-bottom:.15rem;
  }

  .premium-sequence-line{
    font-size:clamp(1.35rem,6vw,2.1rem);
    max-width:20ch;
  }

  .premium-cta,
  .bar-actions .btn,
  .lang-flag,
  .faq summary,
  .faq summary::after,
  .faq-a,
  .foot-contact a{
    transition:none;
  }

  .close-bg .slide,
  .experience-proof .premium-brand-track{
    animation:none!important;
  }

  .close-bg .slide:first-child{
    opacity:1;
  }
}

/* Enlace de salto al contenido: fuera de pantalla hasta que recibe el foco. */
.skip-link{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{width:auto;height:auto;overflow:visible;clip-path:none;
  left:0;top:0;z-index:200;padding:12px 18px;
  background:var(--mk-fondo);color:var(--mk-texto);text-decoration:none;font-size:1rem;
  border:2px solid var(--mk-primario);border-radius:0 0 6px 0}

/* --- Pulso del botón de contacto -------------------------------------
   Traído de motion.css, que se eliminó: de sus 87 reglas solo estas se
   usaban. El resto era de componentes que esta web no tiene (.mk-rail,
   .mk-hero, .mk-intro, .mk-split, .mk-marquee-track...).
   Las páginas afinan la repetición y el desfase en su propio <style>,
   con mayor especificidad (.bar-actions .mk-pulse::after). */
.mk-pulse{position:relative}
.mk-pulse::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  border:2px solid var(--mk-primario);
  opacity:0; /* invisible mientras espera su turno (ver el retraso más abajo) */
  animation:mkPulse 2.2s var(--mk-ease) infinite; /* la curva del sistema, no ease-out de fábrica */
  pointer-events:none;
}
@keyframes mkPulse{
  0%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(1.12)}
}
@media (prefers-reduced-motion: reduce){
  .mk-pulse::after{animation:none!important;opacity:1!important;transform:none!important}
}

/* ==========================================================================
   Heredado del CSS crítico de las páginas, retirado el 4/9/2026. Aquel bloque
   iba antes que esta hoja y la pisaba a veces (opacidad del cierre, marcador
   del FAQ). Se midió con la huella de estilos calculados qué declaraciones
   seguían aportando algo; solo esas viven aquí. Van al final para conservar
   la misma prioridad que tenían.
   ========================================================================== */
/* el pulso avisa y se calla: tres latidos, alternados, y empiezan cuando el héroe ya
   está quieto (palabras hasta 733 ms, muelle hasta 933 ms). Antes arrancaban a los
   36 ms y en la llegada competían tres movimientos; un solo momento autoral. */
.bar-actions .mk-pulse::after{animation-iteration-count:3;animation-fill-mode:forwards;animation-delay:1.2s}
.bar-actions .btn-mail.mk-pulse::after{animation-delay:2.3s}
@media(min-width:761px){
  .bar .brand-roles{max-width:66vw}
}
.bar .brand-roles .sep{opacity:.5}
.lang-switcher{margin:0 .25rem}
@media(max-width:560px){
  .lang-switcher{margin:0 .15rem}
}
.lang-flag svg{box-shadow:0 0 0 1px rgba(11,11,13,.18)}
.bar-availability{letter-spacing:.02em}
/* las secciones del cierre se apilan con este hueco */
.close-in{display:flex;flex-direction:column;gap:clamp(2.4rem,5vw,3.6rem)}
.info-h{margin-bottom:1rem}
.foot-bottom{text-align:center}
.brand:focus-visible,
.foot-legal:focus-visible{border-radius:8px}
@media(prefers-reduced-motion:reduce){
  /* sin carrusel, se queda la primera foto */
  .close-bg .slide{opacity:0}
  .close-bg .slide:first-child{opacity:1}
}

/* ==========================================================================
   Delight (/impeccable delight, 4/9/2026): la sala de realización responde.
   1) El tally del raíl: un punto rojo en la barrita que está en el aire, y un
      rótulo de tercio inferior con el nombre de la toma al pasar el ratón o
      llegar con el teclado. 2) El botón rojo dice qué está pasando al pulsarlo.
   ========================================================================== */
.hero-seg-tally{
  position:absolute;
  left:0;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--mk-primario);
  box-shadow:0 0 0 1px var(--mk-fondo); /* anillo oscuro para que se lea sobre el latón; sin halo */
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .28s var(--mk-ease);
  pointer-events:none;
}
.hero-seg[aria-selected="true"] .hero-seg-tally{
  opacity:1;
}
.hero-slate{
  position:absolute;
  right:0;
  bottom:calc(100% + .3rem);
  max-width:60%;
  padding:.1rem 0 .1rem .55rem;
  border-left:2px solid var(--mk-dorado);
  font-family:var(--mk-font-display);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.02em;
  line-height:1.2;
  color:var(--mk-texto);
  text-shadow:0 1px 8px var(--mk-fondo);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .16s var(--mk-ease), transform .16s var(--mk-ease); /* es un tooltip: 125–200 ms */
  pointer-events:none;
}
.hero-slate.is-on{
  opacity:1;
  transform:none;
}
/* con teclado el rótulo aparece y desaparece en seco: las acciones de teclado no se animan */
.hero-slate.is-now{
  transition:none;
}
@media(max-width:760px){
  .hero-slate{display:none}
}
/* el rótulo del botón se cruza (desenfoque de 2 px y opacidad, 160 ms) al cambiar de
   texto y al volver: un botón que cambia de estado se morfa, no se teletransporta */
.cta-lbl{
  display:inline-block;
  transition:filter .16s ease, opacity .16s ease;
}
.is-swapping .cta-lbl{
  filter:blur(2px);
  opacity:.7;
}
/* el botón rojo mientras se abre WhatsApp: mismo ancho, texto que explica, punto encendido */
.is-opening{
  color:var(--mk-texto)!important;
  background:var(--mk-primario)!important;
  transform:none!important;
}
.is-opening::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:.5rem;
  border-radius:50%;
  background:var(--mk-texto);
  animation:tallyBlink 1.2s steps(1) 2;
  vertical-align:middle;
}
@keyframes tallyBlink{
  0%,60%{opacity:1}
  61%,100%{opacity:.25}
}
@media(prefers-reduced-motion:reduce){
  .is-opening::before{animation:none}
  .hero-slate{transition:opacity .16s var(--mk-ease);transform:none}
  .hero-seg-tally{transition:opacity .2s var(--mk-ease)}
  /* los fundidos de foto (solo opacidad) se conservan; el encogido al pulsar
     queda instantáneo (transition:none más arriba), no se anula: es la única
     señal de que el toque ha entrado, igual que en el botón rojo */
  .faq details::details-content{transition:none}
}

/* ==========================================================================
   Bolder (/impeccable bolder, 4/9/2026), objetivo: Experiencia laboral. Es la
   prueba más fuerte de la web (LaLiga, Mediapro, IB3, 18 años de directo) y se
   contaba en gris a 17 px con logos de 36 px. La afirmación sube al rol headline
   y los logos a escala de prueba, con los filetes de latón de la estructura.
   Nada más de la página cambia.
   ========================================================================== */
.close-in .experience-claim{
  font-family:var(--mk-font-display);
  font-weight:800;
  font-size:clamp(1.7rem,3.3vw,3rem);
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--mk-texto);
  max-width:22ch;
  margin-bottom:.9em;
  text-wrap:balance;
}
.experience-proof .premium-brands{
  margin-top:1.9rem;
  padding:1.1rem 0;
  border-top:1px solid var(--mk-dorado-line);
  border-bottom:1px solid var(--mk-dorado-line);
}
.experience-proof .premium-brand-track{
  gap:1.1rem;
  animation-duration:48s;
}
.experience-proof .experience-item{
  padding:0 .8rem;
}
.experience-proof .experience-item img{
  height:clamp(34px,4.4vw,56px);
}
.experience-proof .experience-item img.tall{
  height:clamp(44px,5.8vw,72px);
}
@media(max-width:760px){
  .experience-proof .premium-brand-track{gap:.8rem;animation-duration:36s}
  .experience-proof .experience-item{padding:0 .55rem}
}

/* ==========================================================================
   Adapt (/impeccable adapt, 4/9/2026): móvil apaisado y ventanas bajas (zoom
   al 200 %). El héroe pedía 560 px de alto y en un iPhone tumbado (390 px) el
   botón y el raíl quedaban fuera de la primera pantalla; en el SE apaisado el
   nombre se metía bajo la barra. Ahora el héroe mide la pantalla, el nombre y
   el lema escalan con la altura y el botón y el raíl van en fila.
   ========================================================================== */
@media (max-height:520px) and (orientation:landscape){
  .vfilm{
    --hero-pad-b:.9rem;
    height:100svh;
    min-height:0;
    max-height:none;
  }
  .vmsgs{bottom:calc(var(--hero-pad-b) + 3.6rem)}
  .hero-dock{flex-direction:row;align-items:center;gap:1rem}
  .premium-name h1.big{font-size:clamp(1.9rem,11vh,3rem);margin-bottom:.5rem}
  .premium-tagline{font-size:.95rem;max-width:40ch}
  .premium-sequence-line{font-size:clamp(1.5rem,9vh,2.4rem);max-width:none}
  .hero-slate{display:none}
  .hero-seg{width:clamp(22px,4vw,40px)}
}

/* ==========================================================================
   Harden (/impeccable harden, 4/9/2026): degradación con gracia.
   ========================================================================== */
/* Sin JavaScript: el cargador de fotos no corre. La primera foto del cierre se
   pinta como fondo y las fichas reciben sus fotos (la clase no-js la retira un
   script en línea antes de pintar, así que con JS no cuesta ni un byte). */
.no-js .close-bg .slide{animation:none;opacity:0}
.no-js .close-bg .slide:first-child{opacity:1;background:url("/assets/concierto.webp") center/cover}

/* Superficies que pinta el navegador: selección en latón, controles y barras
   de desplazamiento en oscuro. */
:root{color-scheme:dark}
::selection{background:var(--mk-dorado);color:var(--mk-fondo)}

/* Contraste forzado (Windows): las barras del raíl y el tally perdían su color
   y se pintaban negro sobre negro. Colores del sistema, que siguen al tema. */
@media (forced-colors: active){
  .hero-seg::before{background:GrayText;forced-color-adjust:none}
  .hero-seg-fill{background:Highlight;forced-color-adjust:none}
  .hero-seg-tally{background:Highlight;box-shadow:none;forced-color-adjust:none}
  .is-opening::before{background:ButtonText;forced-color-adjust:none}
  .hero-slate{border-left-color:ButtonText}
  .close-bg::after{display:none}
}

/* ==========================================================================
   Capas — «El plano largo». La página es un solo plano y el scroll es el tiempo.
   Todo cuelga de html.capas (lo pone capas.js): sin JavaScript no se oculta nada.
   Con prefers-reduced-motion (html.reduce) no hay apariciones ni paralaje.
   ========================================================================== */

/* 1. El héroe se queda clavado y el cierre le pasa por encima como una lámina */
.capas .vfilm{
  --p:0;
  position:sticky;
  top:0;
  z-index:0;
}
.capas .vfilm.is-covered{
  /* cubierto del todo: fuera del viewport, así el observer de hero.js lo pausa */
  transform:translate3d(0,-120vh,0);
  visibility:hidden;
}
.capas:not(.reduce) .vfilm .vlayer{
  --zoom:calc(1 + var(--p) * .08);
  will-change:transform;
}
.capas:not(.reduce) .vfilm .vmsgs,
.capas:not(.reduce) .vfilm .hero-dock{
  transform:translate3d(0,calc(var(--p) * -14vh),0);
  opacity:calc(1 - var(--p) * 1.6);
}
.capas .vfilm::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
  background:var(--mk-fondo);
  opacity:calc(var(--p) * .7);
  pointer-events:none;
}
.capas .close{
  position:relative;
  z-index:2;
  border-radius:28px 28px 0 0;
  box-shadow:0 -34px 90px rgba(0,0,0,.6);
  /* overflow:hidden convierte el bloque en contenedor de scroll y nada se ancla dentro
     (ni los títulos de escritorio ni la pila de fichas de móvil); clip recorta igual sin
     ese efecto. Los navegadores viejos ignoran clip y se quedan con hidden. */
  overflow:hidden;
  overflow:clip;
}
.capas .close::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  z-index:3;
  background:var(--mk-dorado-line);
}
.capas footer{
  position:relative;
  z-index:3;
  border-radius:28px 28px 0 0;
  margin-top:-28px;
  box-shadow:0 -28px 70px rgba(0,0,0,.55);
}

/* 2. Profundidad del fondo del cierre: se mueve más despacio que el texto */
.capas:not(.reduce) .close .close-bg{
  --bgy:0vh;
  inset:-16vh 0;
  transform:translate3d(0,var(--bgy),0);
  will-change:transform;
}

/* 3. Apariciones */
.capas:not(.reduce) .rv{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .8s var(--mk-ease), transform 1s var(--mk-ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.capas:not(.reduce) .is-in .rv{
  opacity:1;
  transform:none;
}
.capas:not(.reduce) .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding:.08em 0 .18em;
  margin:-.08em 0 -.18em;
}
.capas:not(.reduce) .wi{
  display:inline-block;
  transform:translate3d(0,118%,0);
  transition:transform 1s var(--mk-ease);
  transition-delay:calc(var(--i,0) * 45ms);
}
.capas:not(.reduce) .is-in .wi{
  transform:none;
}
/* las fichas de Servicios, con su escalonado propio y un poco de escala */
.capas:not(.reduce) .info-grid--services > .rv{
  transform:translate3d(0,30px,0) scale(.98);
  transition-delay:calc(220ms + var(--k,0) * 80ms);
}
/* ya reveladas: en reposo (esta regla gana a la del escalonado, que por orden y misma
   especificidad dejaba la ficha a 30 px y al 98 % una vez aparecida), y el marco y el
   halo del tally transicionan sin el retardo del escalonado */
.capas:not(.reduce) .is-in .info-grid--services > .rv{
  transform:none;
  transition:opacity .8s var(--mk-ease), transform 1s var(--mk-ease), border-color .2s var(--mk-ease), box-shadow .2s var(--mk-ease);
  transition-delay:calc(220ms + var(--k,0) * 80ms), calc(220ms + var(--k,0) * 80ms), 0s, 0s;
}
/* la línea de latón de cada capítulo se dibuja al llegar */
.capas .info-block{
  position:relative;
}
.capas:not(.reduce) .info-block:not(:first-child){
  border-top-color:transparent;
}
.capas:not(.reduce) .info-block:not(:first-child)::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:1px;
  background:var(--mk-dorado-line);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.2s var(--mk-ease);
}
.capas:not(.reduce) .info-block.is-in::before{
  transform:scaleX(1);
}
/* el sello del pie llega girando desde el latón */
.capas:not(.reduce) .foot-seal.rv{
  transform:translate3d(0,20px,0) rotate(-10deg) scale(.94);
  transform-origin:center;
}
.capas:not(.reduce) footer .foot-contact a.rv{
  transition-delay:calc(180ms + var(--i,0) * 60ms);
}

/* 4. El visor: esquinas, capítulo, código de tiempo y línea de progreso */
.hud{
  position:fixed;
  inset:0;
  z-index:55;
  pointer-events:none;
  font-family:var(--mk-font-display);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.06em;
  line-height:1;
  color:var(--mk-muted);
}
.hud-bar{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:var(--mk-dorado);
  transform:scaleX(0);
  transform-origin:left;
  opacity:.9;
}
.hud-c{
  position:absolute;
  width:22px;
  height:22px;
  border:1px solid var(--mk-dorado-line);
  display:none;
}
.hud-tl{top:14px;left:14px;border-right:0;border-bottom:0}
.hud-tr{top:14px;right:14px;border-left:0;border-bottom:0}
.hud-bl{bottom:14px;left:14px;border-right:0;border-top:0}
.hud-br{bottom:14px;right:14px;border-left:0;border-top:0}
@media(min-width:1200px){
  .hud-c{display:block}
}
.hud-cap,
.hud-tc{
  position:absolute;
  bottom:20px;
  opacity:0;
  transform:translate3d(0,6px,0);
  transition:opacity .35s ease, transform .5s var(--mk-ease);
}
.hud.is-on .hud-cap,
.hud.is-on .hud-tc{
  opacity:1;
  transform:none;
}
.hud-cap,
.hud-tc{
  /* un vidrio mínimo detrás: el texto que pasa por debajo no se mezcla con el rótulo */
  padding:.42em .6em;
  border-radius:6px;
  background:rgba(7,8,7,.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.hud-cap{
  left:20px;
  display:flex;
  gap:.7em;
  align-items:baseline;
}
.hud-n{color:var(--mk-dorado)}
.hud-t{
  transition:opacity .16s ease, transform .16s ease;
}
.hud-t.is-swap{
  opacity:0;
  transform:translate3d(0,4px,0);
}
.hud-tc{
  right:20px;
  font-variant-numeric:tabular-nums;
}
.hud-tc::before{
  /* el tally: la cámara está grabando */
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--mk-primario);
  margin-right:.55em;
  vertical-align:1px;
  animation:hudRec 1.6s steps(1,end) infinite;
}
@keyframes hudRec{0%,60%{opacity:1}61%,100%{opacity:.25}}
@media(max-width:760px){
  .hud-cap{display:none}
  .hud-tc{right:12px;bottom:12px;font-size:.66rem}
}

/* 5. Grano de película (solo puntero fino; capas.js no lo crea en táctil) */
.grano{
  position:fixed;
  inset:-120px;
  z-index:54;
  pointer-events:none;
  opacity:.06;
  mix-blend-mode:screen;
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
  animation:grano 1.1s steps(6) infinite;
}
@keyframes grano{
  0%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-40px,22px,0)}
  40%{transform:translate3d(28px,-36px,0)}
  60%{transform:translate3d(-18px,-50px,0)}
  80%{transform:translate3d(44px,14px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* 6. Sin movimiento: todo quieto y visible; el visor no parpadea */
.capas.reduce .grano,
.capas.reduce .hud-bar{display:none}
.capas.reduce .hud-tc::before{animation:none}
.capas.reduce .vfilm::after{display:none}
@media(prefers-reduced-motion:reduce){
  .hud-tc::before{animation:none}
}

/* 7. Movimiento continuo anclado al scroll */
/* el título de cada capítulo se queda anclado mientras pasa su contenido (solo escritorio) */
@media(min-width:761px){
  .capas .info-block:not(.info-block--about) > .info-h{
    position:sticky;
    top:calc(62px + 18px + 2.4rem);
    align-self:start;
  }
}
/* Trayectoria se lee al bajar: las palabras se encienden con el scroll, no suben */
.capas:not(.reduce) .experience-claim.scrub .wi{
  transform:none;
  transition:opacity .12s linear;
  will-change:opacity;
}
/* un monograma grande y tenue detrás de Sobre mí, que se mueve más despacio que el texto */
.capas .info-block--about{
  --my:0vh;
}
.capas .info-block--about::after{
  content:"";
  position:absolute;
  right:-9vw;
  top:-20vh;
  width:clamp(240px,30vw,460px);
  aspect-ratio:196/176;
  background:url("/assets/monograma.webp?v=1") center/contain no-repeat;
  opacity:.045;
  z-index:-1;
  pointer-events:none;
  transform:translate3d(0,var(--my),0) rotate(-6deg);
  will-change:transform;
}
.capas.reduce .info-block--about::after{transform:none}
/* (5/9/2026) Las dos columnas de fichas viajaban a velocidades opuestas con 200 ms de
   retardo para dar profundidad; el cliente lo veía como un movimiento extraño. Fuera:
   las cuatro bajan con la página como un bloque y queda solo la aparición escalonada. */

/* Tally en las fichas de Servicios: la ficha «en el aire». En escritorio se enciende al
   pasar el ratón; en táctil, capas.js marca .is-live en la que cruza el centro de la
   pantalla. Punto rojo arriba a la derecha con los dos parpadeos del pinchazo, el marco
   dorado pasa a un filo rojo tenue y la foto sube un punto de luz. Sin levantar ni
   agrandar la ficha. Las fichas no son enlaces: flecha normal, no cursor de texto. */
.info-grid--services > div{
  cursor:default;
  transition:opacity .8s var(--mk-ease), transform .8s var(--mk-ease), border-color .2s var(--mk-ease), box-shadow .2s var(--mk-ease);
}
.info-grid--services > div::before{
  transition:opacity .35s var(--mk-ease), filter .2s var(--mk-ease);
}
.info-grid--services > div::after{
  content:"";
  position:absolute;
  top:14px;
  right:14px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mk-primario);
  box-shadow:0 0 0 1px rgba(11,12,10,.85), 0 0 10px rgba(159,15,39,.7);
  opacity:0;
  transition:opacity .2s var(--mk-ease);
  pointer-events:none;
}
.info-grid--services > div.is-live{
  border-color:rgba(159,15,39,.62);
  box-shadow:0 10px 15px var(--mk-shadow), inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(159,15,39,.28), 0 0 26px rgba(159,15,39,.22);
}
.info-grid--services > div.is-live::before{
  filter:brightness(1.12);
}
.info-grid--services > div.is-live::after{
  opacity:1;
  animation:tallyBlink .5s steps(1) 2;
}
/* Fichas de servicio enlazadas (portadas y páginas de servicio). La ficha sigue siendo un
   div porque las reglas de arriba y capas.js la seleccionan como `> div`, y capas.js
   reescribe el h3 palabra a palabra: el enlace es el último hijo y se estira sobre toda
   la ficha con ::after. El foco se pinta en la ficha entera. */
.info-grid--services .card-link{
  margin-top:.7rem;
  font-family:var(--mk-font-display);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mk-dorado);
}
.info-grid--services .card-link::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:inherit;
}
@supports selector(:has(*)){
  .info-grid--services .card-link:focus-visible{
    outline:none;
  }
}
.info-grid--services > div:has(.card-link){
  cursor:pointer;
}
.info-grid--services > div:has(.card-link:focus-visible){
  outline:2px solid var(--mk-focus);
  outline-offset:4px;
}
@media(hover:hover) and (pointer:fine){
  .info-grid--services > div:hover{
    border-color:rgba(159,15,39,.62);
    box-shadow:0 10px 15px var(--mk-shadow), inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(159,15,39,.28), 0 0 26px rgba(159,15,39,.22);
  }
  .info-grid--services > div:hover::before{
    filter:brightness(1.12);
  }
  .info-grid--services > div:hover::after{
    opacity:1;
    animation:tallyBlink .5s steps(1) 2;
  }
}
@media(prefers-reduced-motion:reduce){
  .info-grid--services > div.is-live::after,
  .info-grid--services > div:hover::after{
    animation:none;
  }
}
/* el sello del pie gira con el scroll */
.capas:not(.reduce) .is-in .foot-seal.rv{
  --rot:0deg;
  transform:rotate(var(--rot));
  transition:opacity .8s var(--mk-ease), transform .25s linear;
}

/* cambio pedido a mano en el raíl: la lámina obedece rápido (las acciones del usuario
   no esperan al número), igual que los rótulos en .is-manual */
.vfilm.is-manual .vlayer.is-active,
.vfilm.is-manual .vlayer.is-prev{
  transition-duration:.45s;
}


/* ==========================================================================
   Modo película del héroe (hero.js pone .is-film): el héroe se queda clavado y el
   scroll pasa de un plano al siguiente. hero.js escribe los transforms en línea; aquí
   solo se apagan las transiciones y las animaciones por tiempo y se atan los rótulos a --u.
   ========================================================================== */
.vfilm.is-film{
  position:sticky;
  top:0;
  z-index:0;
}
.vtrack{
  /* el tramo de scroll que recorre la película: 62 vh por plano (56 en móvil) */
  height:calc(var(--shots,6) * 62vh);
  pointer-events:none;
}
@media(max-width:760px){
  .vtrack{height:calc(var(--shots,6) * 56vh)}
}
.vfilm.is-film .vlayer{
  transition:none!important;
  box-shadow:none;
  will-change:transform;
}
.vfilm.is-film .vlayer.is-over{
  box-shadow:0 -40px 90px rgba(0,0,0,.62);
}
.vfilm.is-film .vscrim{z-index:3} /* el velo de legibilidad: sobre los vídeos (z 1 y 2), bajo el texto */
.vfilm.is-film .vmsgs{z-index:5}
.vfilm.is-film .hero-dock{z-index:6}
.vfilm.is-film .vmsg{
  transition:none;
  animation:none!important;
}
.vfilm.is-film .vmsg.is-active{
  opacity:1;
  visibility:visible;
}
.vfilm.is-film .vmsg .hero-w{
  /* cada palabra sigue a --u con su escalón: la primera arranca antes que la última */
  /* cada palabra arranca con su escalón y TODAS llegan al 100 % cuando --u llega a 1:
     con 1.6 la sexta palabra se quedaba en el 90 % (desenfocada y con la «e» de «aire»
     cortada, visto por Daniel en móvil el 5/9/2026) */
  --wu:clamp(0, calc(var(--u,0) * 2 - var(--i,0) * .14), 1);
  animation:none!important;
  opacity:var(--wu);
  transform:translate3d(calc((1 - var(--wu)) * -.5em),0,0) skewX(calc((1 - var(--wu)) * -7deg));
  filter:blur(calc((1 - var(--wu)) * 9px));
  clip-path:inset(-.1em calc((1 - var(--wu)) * 100%) -.15em -.05em);
  will-change:transform,opacity,clip-path;
}
.vfilm.is-film .vmsg .premium-tagline{
  animation:none!important;
  opacity:var(--u,0);
  transform:translate3d(calc((1 - var(--u,0)) * -14px),0,0);
}
.vfilm.is-film .hero-seg-fill{
  animation:none!important;
  transition:none!important;
}

/* El raíl del héroe (barritas de progreso y tally) no se ve: Daniel lo quitó de la vista el
   5/9/2026. Sigue en el DOM para el teclado: aparece cuando una barrita o el botón de pausa
   reciben el foco, igual que ya hacía el botón de pausa. */
.vfilm .hero-rail{
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.vfilm .hero-rail:focus-within{
  opacity:1;
  pointer-events:auto;
}