/* =============================================================
   WINMEDIA — styles.css (v2 brutalista premium)
   Neutro gris/negro/blanco + acento lima #C5FF7A.
   Display: Archivo. Cuerpo: Inter. Datos: IBM Plex Mono.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #E7E7E4;
  --bg-2:      #DEDEDA;
  --panel:     #F4F4F1;
  --ink:       #0B0B0B;
  --ink-soft:  #2E2E2C;
  --mute:      #6F6F6B;
  --line:      rgba(11, 11, 11, 0.14);

  --dark:      #0B0B0B;
  --dark-2:    #141412;
  --dark-3:    #1C1C19;
  --cream:     #EDEDE9;
  --cream-mut: rgba(237, 237, 233, 0.55);
  --line-d:    rgba(237, 237, 233, 0.14);

  --accent:    #C5FF7A;

  --display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 74px;
  --gutter: clamp(1.2rem, 4vw, 4rem);
  --radius: 22px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.02; letter-spacing: -0.015em; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--accent); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.projects :focus-visible, .booking-panel :focus-visible, .process :focus-visible, .cta :focus-visible { outline-color: var(--accent); }

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 10px; font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Tipografía utilitaria
   ============================================================= */
.kicker {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; color: var(--mute); margin-bottom: 1.2rem;
}
.section-title {
  font-family: var(--display); font-stretch: 118%; font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
  line-height: 0.96; max-width: 16ch;
}
.section-note { margin-top: 1.1rem; color: var(--mute); font-size: 0.95rem; max-width: 48ch; }
.section { padding: clamp(5rem, 11vh, 9rem) var(--gutter); }
.section-head { margin-bottom: clamp(2.4rem, 6vh, 4.5rem); }

/* Reveal / split (solo se ocultan con JS activo) */
html.js [data-reveal] {
  opacity: 0; transform: translateY(38px);
  /* misma curva que los split-words de gsap (expo.out): todo entra igual */
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }
html.js [data-reveal][data-split] { opacity: 1; transform: none; }
.split-word { display: inline-block; will-change: transform, opacity; }

/* Grano de película global: unifica claros y oscuros (casi subliminal) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.032;
}

/* =============================================================
   4. Splash
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg); display: grid; place-items: center;
  transition: opacity 0.7s var(--ease-out), clip-path 0.9s var(--ease-out);
  clip-path: inset(0);
  animation: splashSafety 0.01s 4.5s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-inner { text-align: center; }
.splash-word {
  display: block; font-family: var(--display);
  font-stretch: 122%; font-style: italic; font-weight: 900;
  font-size: clamp(2.6rem, 9vw, 6rem); letter-spacing: -0.02em;
  animation: splashWord 1.1s var(--ease-out) both;
}
.splash-word i { font-style: normal; font-size: 0.32em; vertical-align: super; }
.splash-sub {
  display: block; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.5em; color: var(--mute); margin-top: 0.4rem;
  animation: splashWord 1.1s 0.15s var(--ease-out) both;
}
@keyframes splashWord { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.splash-line {
  display: block; width: min(240px, 50vw); height: 2px;
  background: var(--line); margin: 2rem auto 0; overflow: hidden; border-radius: 2px;
}
.splash-line i {
  display: block; height: 100%; width: 100%; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 0;
  animation: splashBar 1.6s 0.3s var(--ease-soft) forwards;
}
@keyframes splashBar { to { transform: scaleX(1); } }

/* =============================================================
   5. Cursor
   ============================================================= */
.cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  display: none; mix-blend-mode: difference; opacity: 0;
  transition: opacity 0.25s var(--ease-out); }
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; }
.cursor-dot { width: 6px; height: 6px; margin: -3px; background: #fff; border-radius: 50%; }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px; border: 1px solid #fff; border-radius: 50%;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out);
}
.cursor.is-interactive .cursor-ring { width: 54px; height: 54px; margin: -27px; }
.cursor.is-media .cursor-ring { width: 90px; height: 90px; margin: -45px; border-color: var(--accent); }
.cursor.is-media .cursor-dot { background: var(--accent); }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }

/* =============================================================
   6. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 200; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  padding: 0 var(--gutter);
  transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
/* sin backdrop-filter: un blur en un elemento fijo se recalcula en CADA frame
   de scroll de toda la página; un fondo casi opaco da la misma sensación gratis */
@supports (animation-timeline: scroll()) {
  .nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--accent); transform: scaleX(0); transform-origin: 0 0;
    animation: navProgress linear both; animation-timeline: scroll(root);
  }
  @keyframes navProgress { to { transform: scaleX(1); } }
}
.nav.is-scrolled {
  background: rgba(233, 233, 230, 0.96);
  box-shadow: 0 1px 0 var(--line);
}
.nav-logo { display: flex; flex-direction: column; line-height: 1; }
.nav-logo-word { font-family: var(--display); font-stretch: 122%; font-style: italic; font-weight: 900; font-size: 1.28rem; letter-spacing: -0.02em; }
.nav-logo-sub { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.42em; color: var(--mute); margin-top: 2px; align-self: flex-end; }
.nav-links { display: none; gap: clamp(1.1rem, 1.8vw, 2rem); }
/* 1140px: con 5 enlaces (incluido "nuestra WINMED(IA)") por debajo se partían en dos líneas */
@media (min-width: 1140px) { .nav-links { display: flex; } }
.nav-link {
  position: relative; font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 0.3rem 0;
  white-space: nowrap;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-soft);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-right { display: flex; align-items: center; gap: 0.9rem; }

/* Sonido: solo toggle de MÚSICA on/off (los SFX suenan siempre) */
.sound-toggle {
  display: none; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 0.8rem;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
@media (min-width: 560px) { .sound-toggle { display: inline-flex; } }
.sound-toggle:hover { border-color: var(--ink); }
.sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound-bars i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; transition: height 0.3s; }
.sound-toggle[aria-pressed="true"] { background: var(--ink); color: var(--accent); border-color: var(--ink); }
.sound-toggle[aria-pressed="true"] .sound-bars i { animation: soundBar 0.9s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: 0.15s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: 0.3s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes soundBar { from { height: 3px; } to { height: 12px; } }

.nav-cta {
  display: none; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em;
  background: var(--ink); color: var(--bg); border: 1.5px solid var(--ink);
  padding: 0.72rem 1.25rem; border-radius: 12px;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
@media (min-width: 560px) { .nav-cta { display: inline-block; } }
.nav-cta:hover { background: var(--accent); color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 11, 11, 0.18); }

.nav-burger { display: grid; gap: 6px; padding: 0.6rem; }
@media (min-width: 1140px) { .nav-burger { display: none; } }
.nav-burger i { width: 26px; height: 2px; background: var(--ink); transition: transform 0.35s var(--ease-out), opacity 0.3s; display: block; }
.nav-burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 150; background: var(--dark); color: var(--cream);
  display: grid; place-items: center; clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease-soft);
}
.nav-mobile[aria-hidden="false"] { clip-path: inset(0); }
.nav-mobile nav { display: grid; gap: 1.15rem; text-align: center; width: 100%; padding: 0 2rem; }
.nav-mobile a {
  font-family: var(--display); font-stretch: 116%; font-weight: 800;
  font-size: clamp(1.5rem, 7vw, 2.3rem); text-transform: uppercase; color: var(--cream);
}
.nav-mobile a[data-nav-top] { color: var(--cream-mut); font-size: clamp(1rem, 4vw, 1.3rem); }
/* Si no cabe en una línea, "NUESTRA" baja y "WINMED(IA)" queda junto debajo
   (el chip nunca se separa: va pegado a WINMED, sin espacio entre medias). */
.nav-mobile-ia { font-size: clamp(1.3rem, 6vw, 2rem); line-height: 1.08; }
/* CTA compacto: cabe en una sola línea */
.nav-mobile-cta {
  justify-self: center; margin-top: 0.8rem;
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.1em; font-weight: 500;
  white-space: nowrap; text-transform: uppercase;
  background: var(--accent); color: var(--ink);
  padding: 0.95rem 1.8rem; border-radius: 14px;
}
/* Marca WINMED(IA): "(IA)" como chip oscuro con el verde dentro.
   El verde solo sobre fondo claro no se leía; el chip garantiza contraste
   en cualquier fondo (nav claro, tarjeta oscura, kicker, textos). */
.ia-accent {
  display: inline-block;
  background: var(--ink); color: var(--accent);
  border: 1px solid rgba(197, 255, 122, 0.4);
  padding: 0.04em 0.3em 0.08em; border-radius: 0.4em;
  font-style: normal; line-height: 1.25;
}
/* Botón ✕ para cerrar el menú móvil (la cabecera se oculta mientras tanto) */
html.menu-open .nav { opacity: 0; pointer-events: none; }
.nav-mobile-close {
  position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1.2rem; z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 1.35rem; line-height: 1; color: var(--cream); background: transparent;
  border: 1px solid var(--line-d); border-radius: 50%;
  transition: border-color 0.3s, color 0.3s, transform 0.4s var(--ease-out);
}
.nav-mobile-close:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }

/* =============================================================
   7. Hero
   ============================================================= */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  background: #060606; overflow: clip;
  display: grid; place-items: center;
}

/* CAPA 1 · vídeos de fondo (rotan con fundido a negro; los inyecta main.js) */
.hero-bg { position: absolute; inset: 0; z-index: 0; background: #060606; }
.hero-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.7s var(--ease-out); will-change: opacity;
}
.hero-bg video.is-on { opacity: 1; }
/* atenuado + viñeta: los vídeos se ven pero no le comen protagonismo al selector */
.hero-bg-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 42%, rgba(6, 6, 6, 0.32), rgba(6, 6, 6, 0.72) 100%),
    rgba(6, 6, 6, 0.42);
}

/* CAPA 3 · contenido centrado */
.hero-content {
  position: relative; z-index: 2; width: 100%;
  display: grid; justify-items: center; text-align: center;
  gap: clamp(1rem, 2.6vh, 1.8rem);
  padding: calc(var(--nav-h) + 1rem) var(--gutter) 3.2rem;
}

/* =============================================================
   LOGO W 3D del hero · "EL FRENAZO" (lib/hero-logo.js)
   Entra girando a toda velocidad, frena y se clava DE FRENTE.
   Después queda quieto (arrastrable; al soltar vuelve al frontal).
   Aspect 1400/712: el fotograma se recorta por abajo para
   eliminar la sombra de suelo pintada.
   ============================================================= */
.hero-logo {
  /* GRANDE pero con el titular aún visible: el lienzo es algo más corto que
     el logo (el 3D se ajusta por altura con margen para el balanceo). El tope
     por alto de pantalla (128vh) evita que empuje el titular fuera. */
  position: relative; width: min(1080px, 95vw, 128vh); aspect-ratio: 1400 / 770;
  margin-top: calc(-1 * clamp(0.6rem, 3vh, 2rem));
  margin-bottom: clamp(0.7rem, 3vh, 1.8rem);
  cursor: grab; touch-action: pan-y;
  opacity: 0; transition: opacity 0.45s var(--ease-out);
}
.hero-logo.is-on { opacity: 1; }
.hero-logo.is-drag { cursor: grabbing; }
/* SIN animaciones CSS de deriva/levitación: el logo ya no se desplaza —
   el movimiento es la rotación 3D lenta del propio modelo (hero-logo-3d.js) */
.hero-logo canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.hero-statement {
  font-family: var(--display); font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 5.2vw, 4rem); line-height: 0.95; letter-spacing: -0.01em;
  color: var(--cream); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.hero-sub {
  font-family: var(--mono); font-size: clamp(0.72rem, 1.5vw, 0.86rem); letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(237, 237, 233, 0.82); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 1.3rem; margin-top: 0.3rem; flex-wrap: wrap; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em;
  background: var(--accent); color: var(--ink); border: 1.5px solid var(--accent);
  padding: 1rem 1.6rem; border-radius: 13px; will-change: transform;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-soft);
}
.hero-cta:hover { background: var(--cream); border-color: var(--cream); box-shadow: 0 16px 40px rgba(197, 255, 122, 0.25); }
.hero-cta-arrow { transition: transform 0.4s var(--ease-bounce); }
.hero-cta:hover .hero-cta-arrow { transform: translateX(5px); }
.hero-link {
  position: relative; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cream-mut); padding-bottom: 2px; transition: color 0.3s;
}
.hero-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-soft);
}
.hero-link:hover { color: var(--cream); }
.hero-link:hover::after { transform: scaleX(1); transform-origin: left; }

.hero-scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid var(--cream-mut); border-radius: 14px;
  display: grid; justify-items: center; padding-top: 7px;
}
.hero-scroll span { width: 3px; height: 9px; border-radius: 2px; background: var(--cream); animation: scrollNudge 1.8s var(--ease-soft) infinite; }
@keyframes scrollNudge { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: 0.2; } }
/* dotPulse lo sigue usando el badge de la IA (.ai-badge i) — no borrar */
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(197, 255, 122, 0.65); } 70% { box-shadow: 0 0 0 9px rgba(197, 255, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(197, 255, 122, 0); } }

@media (max-width: 719px) {
  .hero { min-height: 90svh; }
  .hero-logo { width: 94vw; }
  .hero-statement { font-size: clamp(1.7rem, 8.4vw, 2.5rem); }
  /* apilar acciones: el CTA a lo ancho y el enlace centrado debajo (si no,
     "Ver proyectos" se salía por la derecha) */
  .hero-actions { flex-direction: column; align-items: stretch; gap: 0.9rem; width: 100%; max-width: 340px; }
  .hero-cta { justify-content: center; }
  .hero-link { text-align: center; }
  .hero-scroll { display: none; }
}

/* Nav sobre el hero OSCURO: hasta hacer scroll, textos claros (si no, tinta
   negra invisible). Al entrar .is-scrolled (fondo claro) vuelven los normales. */
.nav-logo-word, .nav-logo-sub, .nav-link, .sound-toggle, .nav-cta, .nav-burger i { transition: color 0.3s var(--ease-out), background 0.3s, border-color 0.3s; }
.nav:not(.is-scrolled) .nav-logo-word,
.nav:not(.is-scrolled) .nav-link,
.nav:not(.is-scrolled) .sound-toggle { color: var(--cream); }
.nav:not(.is-scrolled) .nav-logo-sub { color: var(--cream-mut); }
.nav:not(.is-scrolled) .sound-toggle { border-color: var(--line-d); }
.nav:not(.is-scrolled) .nav-cta { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.nav:not(.is-scrolled) .nav-burger i { background: var(--cream); }

/* =============================================================
   8. Marquesina de logos (clientes)
   ============================================================= */
.clients { background: var(--dark); color: var(--cream); padding: 2rem 0; border-block: 1px solid var(--dark); }
.marquee { overflow: hidden; position: relative; display: flex; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--dark), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--dark), transparent); }
.marquee-track { display: inline-flex; align-items: center; gap: clamp(2.6rem, 5vw, 4.5rem); white-space: nowrap; will-change: transform; padding-right: clamp(2.6rem, 5vw, 4.5rem); }
.marquee-logo {
  /* la altura la fija el JS por logo (área normalizada) — todos igual de grandes */
  flex: none; height: 42px; width: auto; max-width: 230px;
  object-fit: contain;
  opacity: 0.66; filter: brightness(0) invert(1);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
@media (max-width: 719px) { .marquee-logo { max-width: 160px; } }
.marquee-logo:hover { opacity: 1; transform: scale(1.08); }

/* =============================================================
   9. Servicios (acordeón con vídeo dentro de cada apartado)
   ============================================================= */
.services-list { border-top: 1px solid var(--line); width: 100%; }
.service-item { border-bottom: 1px solid var(--line); }
.service-head {
  width: 100%; text-align: left; display: grid; grid-template-columns: 2.8rem 1fr auto; gap: 1rem;
  align-items: center; padding: 1.4rem 0.4rem;
  transition: padding 0.45s var(--ease-soft), background 0.35s;
}
.service-head:hover, .service-item.is-open .service-head { padding-left: 1rem; }
.service-item.is-open .service-head { background: rgba(11, 11, 11, 0.03); }
.sv-num { font-family: var(--mono); font-size: 0.72rem; color: var(--mute); transition: color 0.3s; }
.service-item.is-open .sv-num, .service-head:hover .sv-num { color: var(--ink); }
.sv-title { font-family: var(--display); font-stretch: 112%; font-weight: 750; font-size: clamp(1.15rem, 2.8vw, 1.6rem); text-transform: uppercase; transition: font-stretch 0.45s var(--ease-out); }
.service-head:hover .sv-title, .service-item.is-open .sv-title { font-stretch: 120%; }
.sv-plus {
  position: relative; width: 26px; height: 26px; flex: none; justify-self: end;
  border: 1px solid var(--line); border-radius: 50%;
  transition: transform 0.45s var(--ease-soft), background 0.3s, border-color 0.3s;
}
.sv-plus::before, .sv-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.6px; background: var(--ink); transform: translate(-50%, -50%); }
.sv-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity 0.3s; }
.service-item.is-open .sv-plus { transform: rotate(90deg); background: var(--accent); border-color: var(--ink); }
.service-item.is-open .sv-plus::after { opacity: 0; }

/* panel que se despliega DENTRO del apartado */
.service-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); }
.service-item.is-open .service-panel { grid-template-rows: 1fr; }
.service-panel-inner { overflow: hidden; }
.service-panel-pad { padding: 0 0.4rem 1.6rem; display: grid; gap: 1rem; }
@media (min-width: 720px) { .service-panel-pad { grid-template-columns: 1fr 1.15fr; align-items: start; } }
.sv-desc { font-size: 0.98rem; color: var(--ink-soft); max-width: 42ch; align-self: center; }
.service-video {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--dark);
}
.service-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--ease-out); }
.service-video.has-video video { opacity: 1; }
.sv-poster {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(80% 90% at 30% 20%, rgba(197, 255, 122, 0.22), transparent 60%), linear-gradient(150deg, #1c1c1a, #0b0b0b);
  transition: opacity 0.35s;
}
.service-video.has-video .sv-poster { opacity: 0; }
.sv-poster span { font-family: var(--display); font-stretch: 122%; font-style: italic; font-weight: 900; font-size: 3.4rem; color: rgba(197, 255, 122, 0.5); }
.sv-tag { position: absolute; right: 1rem; top: 1rem; z-index: 2; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.2em; color: var(--ink); background: var(--accent); padding: 0.32rem 0.55rem; border-radius: 7px; }

/* =============================================================
   10. Proyectos (carrusel horizontal)
   ============================================================= */
.projects { background: var(--dark); color: var(--cream); border-radius: 34px; margin: 0 clamp(0.5rem, 1.2vw, 1.1rem); overflow: hidden; }
.projects .kicker, .projects .section-note { color: var(--cream-mut); }

.carousel { position: relative; margin: 0 calc(-1 * var(--gutter)); padding: 0.5rem var(--gutter) 1.5rem; overflow: hidden; cursor: grab; }
.carousel.is-drag { cursor: grabbing; }
.carousel-track { display: flex; gap: 1rem; width: max-content; will-change: transform; }
/* Tarjeta VERTICAL: portada del vídeo OSCURECIDA de fondo + LOGO del cliente
   bien visible encima. Clic → vídeo en TikTok (pestaña nueva). */
.project-card {
  flex: none; width: clamp(160px, 44vw, 232px); aspect-ratio: 9 / 16;
  border: 1px solid var(--line-d); border-radius: 16px; position: relative; overflow: hidden;
  background: var(--dark-2); display: block; text-decoration: none;
  transition: border-color 0.35s, transform 0.5s var(--ease-soft), box-shadow 0.45s var(--ease-soft);
}
a.project-card { cursor: pointer; }
.project-card:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 26px 55px -22px rgba(0, 0, 0, 0.7); }
/* portada atenuada (se intuye la escena pero manda el logo); se aviva al hover */
.project-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.44) saturate(0.9); pointer-events: none;
  transition: transform 0.6s var(--ease-out), filter 0.45s;
}
.project-card:hover .project-cover { filter: brightness(0.64) saturate(1); transform: scale(1.05); }
.project-card-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.5) 0%, rgba(11, 11, 11, 0.28) 45%, rgba(11, 11, 11, 0.82) 100%);
}
/* logo del cliente, centrado y bien visible */
.project-card-logowrap { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1rem; pointer-events: none; }
.project-card-logo {
  max-width: 68%; max-height: 34%;
  filter: brightness(0) invert(1) drop-shadow(0 3px 12px rgba(0, 0, 0, 0.55));
  transition: transform 0.5s var(--ease-out);
}
.project-card:hover .project-card-logo { transform: scale(1.05); }
/* nombre de marca como texto (clientes sin logo) */
.project-card-brandname {
  font-family: var(--display); font-stretch: 116%; font-weight: 800;
  font-size: clamp(1.3rem, 4.6vw, 1.95rem); text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--cream); text-align: center; line-height: 1;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.55));
  transition: transform 0.5s var(--ease-out);
}
.project-card:hover .project-card-brandname { transform: scale(1.05); }
.project-card-idx { position: absolute; right: 0.8rem; top: 0.7rem; z-index: 3; font-family: var(--mono); font-size: 0.62rem; color: var(--cream); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.project-card-field { position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.85rem; z-index: 3; text-align: center; font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-mut); }
/* pastilla "Ver en TikTok" (aparece al pasar el ratón / con foco) */
.project-card-tt {
  position: absolute; left: 50%; top: 0.72rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.34rem; white-space: nowrap;
  font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--accent); padding: 0.32rem 0.6rem; border-radius: 999px;
  opacity: 0; transform: translate(-50%, -6px); transition: opacity 0.3s, transform 0.4s var(--ease-bounce);
}
.project-card-tt i { font-size: 0.62em; }
.project-card:hover .project-card-tt, .project-card:focus-visible .project-card-tt { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .project-card-tt { opacity: 1; transform: translate(-50%, 0); } }
/* tarjeta sin portada: logo sobre degradado de marca */
.project-card.no-cover {
  background: radial-gradient(80% 90% at 30% 20%, rgba(197, 255, 122, 0.1), transparent 60%), linear-gradient(150deg, #1c1c1a, #0b0b0b);
}

.carousel-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.carousel-hint { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--cream-mut); }
.carousel-progress { flex: 1; height: 2px; background: var(--line-d); border-radius: 2px; overflow: hidden; }
.carousel-progress i { display: block; height: 100%; width: 20%; background: var(--accent); transform-origin: 0 0; }


/* =============================================================
   11. Equipo (flip cards)
   ============================================================= */
.team-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px)  { .team-grid { gap: 1.1rem; } }
@media (min-width: 960px)  { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-card {
  perspective: 1400px;
  /* min-width:0 → las columnas del grid quedan EXACTAMENTE iguales (1fr real):
     sin esto, un puesto largo (nowrap) ensanchaba su columna y las fotos salían
     de distinto tamaño entre columnas. */
  min-width: 0;
}
/* Sin aspect-ratio fijo en el flip: la altura la marca la cara frontal (foto 3:4
   + meta). El dorso se ancla encima con position:absolute. Así la FOTO tiene
   proporción 3:4 (la de las fotos originales) → se ven ENTERAS y todas iguales. */
.team-flip { position: relative; transform-style: preserve-3d; transition: transform 0.75s var(--ease-soft); }
.team-card.is-flipped .team-flip { transform: rotateY(180deg); }
.team-front, .team-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.team-front { position: relative; background: var(--panel); display: flex; flex-direction: column; }
.team-photo { position: relative; width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; background: radial-gradient(80% 90% at 50% 15%, rgba(197, 255, 122, 0.12), transparent 60%), linear-gradient(160deg, #1f1f1c, #0b0b0b); overflow: hidden; }
/* La foto tapa la inicial en cuanto carga; si falta el archivo, el JS la retira.
   FOTOS NUEVAS (jul 2026, 1080×1722 ≈ 5:8): ya traen su propio aire y viñeta
   negra pintada — la foto LLENA la caja a sangre, sin margen ni marco (el
   antiguo --air + border-radius dibujaba las líneas/recortes negros en los
   lados). Al ser más vertical que la caja 3:4, cover recorta solo arriba/abajo:
   object-position 50% 30% protege la cabeza y se come torso. */
.team-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
/* CARAS A LA MISMA ALTURA: cada foto trae al sujeto encuadrado distinto,
   así que el desplazamiento vertical se calibra POR PERSONA alineando LA
   FRENTE al 22% de la caja (detección de piel — el tope del pelo engaña:
   los rizos sueltos de unos cuentan y el pelo liso de otros no). Si
   sustituís una foto, recalibrad su % (o borrad su regla y queda el 30%
   por defecto de arriba). */
.team-card[data-slug="alejandro"]  .team-photo img { object-position: 50% 58%; }
.team-card[data-slug="fran"]       .team-photo img { object-position: 50% 12%; }
.team-card[data-slug="hector"]     .team-photo img { object-position: 50% 56%; }
.team-card[data-slug="fran-rocha"] .team-photo img { object-position: 50% 7%; }
.team-card[data-slug="lolo"]       .team-photo img { object-position: 50% 56%; }
.team-card[data-slug="eva"]        .team-photo img { object-position: 50% 30%; }
.team-card[data-slug="nico"]       .team-photo img { object-position: 50% 48%; }
.team-card[data-slug="sandra"]     .team-photo img { object-position: 50% 31%; }
/* la foto se destapa con una contra-escala al entrar (scroll-driven nativo:
   sin JS, en el compositor; sin soporte, la foto sale normal). No hay hover
   sobre la foto — la carta gira — así que no hay conflicto de transform. */
@supports (animation-timeline: view()) {
  .team-photo img { animation: teamPhotoReveal linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; }
  @keyframes teamPhotoReveal { from { transform: scale(1.14); } to { transform: scale(1); } }
}
/* (El ajuste especial de Fran Rocha ya no hace falta: su foto nueva de
   jul 2026 viene bien centrada, como las del resto del equipo.) */
.team-photo span { font-family: var(--display); font-stretch: 122%; font-style: italic; font-weight: 900; font-size: 5rem; color: rgba(11, 11, 11, 0.16); }
.team-meta { padding: clamp(0.7rem, 2vw, 1.1rem) clamp(0.8rem, 2.2vw, 1.2rem) clamp(0.8rem, 2.2vw, 1.25rem); border-top: 1px solid var(--line); }
.team-meta h3 {
  font-family: var(--display); font-stretch: 114%; font-weight: 800;
  font-size: clamp(0.82rem, 2.4vw, 1.1rem); text-transform: uppercase; line-height: 1.1;
  /* RESERVA SIEMPRE 2 LÍNEAS de nombre → todas las cartas quedan igual de
     altas y la foto del mismo tamaño en todas. El nombre de 1 línea se pega
     abajo (junto al rol) para que queden alineados. */
  min-height: 2.2em; display: flex; align-items: flex-end;
}
.team-meta p {
  font-family: var(--mono); font-size: clamp(0.52rem, 1.6vw, 0.64rem); letter-spacing: 0.14em;
  color: var(--mute); text-transform: uppercase; margin-top: 0.3rem; line-height: 1.25;
  /* reserva 2 líneas de puesto → la meta ocupa lo mismo en TODAS las cartas
     (con el nombre a 2 líneas ya reservado) y las fotos quedan idénticas. */
  min-height: 2.5em;
}
@media (max-width: 719px) {
  .team-meta p { font-size: 0.5rem; letter-spacing: 0.05em; }
}
/* Dorso: foto "loca" de la persona + sus mejores skills encima.
   Sin foto de dorso, queda el degradado de marca y las skills se leen igual. */
.team-back {
  position: absolute; inset: 0;   /* se superpone a la cara frontal (que marca la altura) */
  transform: rotateY(180deg);
  background: radial-gradient(80% 90% at 30% 20%, rgba(197, 255, 122, 0.24), transparent 60%), linear-gradient(150deg, #1c1c1a, #0b0b0b);
}
.team-back-photo { position: absolute; inset: 0; }
.team-back-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* velo inferior: garantiza que las skills se lean sobre cualquier foto */
.team-back-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.15) 0%, rgba(11, 11, 11, 0.1) 32%, rgba(11, 11, 11, 0.88) 100%);
}
.team-back-info {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: clamp(0.7rem, 2.2vw, 1.1rem);
  display: grid; gap: clamp(0.4rem, 1.4vw, 0.6rem);
}
.team-back-tag {
  justify-self: start;
  font-family: var(--mono); font-size: clamp(0.48rem, 1.5vw, 0.6rem); letter-spacing: 0.2em;
  color: var(--accent); background: rgba(11, 11, 11, 0.72);
  padding: 0.35rem 0.6rem; border-radius: 8px;
}
.team-skills { display: grid; gap: 0.22rem; }
.team-skills li {
  position: relative; padding-left: 0.95rem;
  font-family: var(--mono); font-size: clamp(0.52rem, 1.6vw, 0.68rem); line-height: 1.35;
  color: var(--cream); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.team-skills li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* =============================================================
   12. Proceso (stage + pasos)
   ============================================================= */
.process { background: var(--dark); color: var(--cream); border-radius: 34px; margin: 0 clamp(0.5rem, 1.2vw, 1.1rem); }
.process .kicker { color: var(--cream-mut); }
.process-layout { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
@media (min-width: 960px) { .process-layout { grid-template-columns: 1fr 1fr; } }

.process-stage {
  /* Móvil: anclado ABAJO tras las fases (regla más adelante) ·
     Escritorio: 2 columnas con el terminal pegajoso arriba. */
  border: 1px solid var(--line-d); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 4 / 3; background: var(--dark-2);
  display: flex; flex-direction: column;
}
@media (min-width: 960px) { .process-stage { position: sticky; top: calc(var(--nav-h) + 2rem); order: 0; } }

/* Terminal de rodaje */
.pt-head {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line-d);
  background: rgba(237, 237, 233, 0.03);
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--cream-mut);
}
.pt-dots { display: inline-flex; gap: 5px; }
.pt-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(237, 237, 233, 0.16); }
.pt-dots i:first-child { background: var(--accent); }
.pt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-title b { color: var(--accent); font-weight: 600; text-transform: uppercase; }
.pt-rec { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--cream-mut); }
.pt-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f56; animation: recBlink 1.2s step-end infinite; }
@keyframes recBlink { 50% { opacity: 0.15; } }

/* cuerpo = SOLO el terminal; todo recortado, nada se sale ni se mancha */
.pt-body { position: relative; z-index: 2; flex: 1; min-height: 0; overflow: hidden; padding: 1.2rem 1.3rem; }
.pt-ghost {
  position: absolute; right: 0.8rem; bottom: -1rem; z-index: 0;
  font-family: var(--display); font-stretch: 122%; font-style: italic; font-weight: 900;
  font-size: clamp(7rem, 15vw, 11rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(197, 255, 122, 0.18);
  pointer-events: none; user-select: none;
}
.pt-lines {
  position: relative; z-index: 1;
  height: 100%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.3rem;
  mask-image: linear-gradient(180deg, transparent 0, #000 1.8rem);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.8rem);
}
.pt-line { flex: none; font-family: var(--mono); font-size: clamp(0.66rem, 1.35vw, 0.8rem); line-height: 1.55; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-line b { color: var(--accent); font-weight: 600; margin-right: 0.35rem; }
.pt-cmd { color: var(--cream); }
.pt-out { color: var(--cream-mut); }
.pt-out .pt-dim { color: rgba(237, 237, 233, 0.3); }
.pt-ok { color: var(--accent); }
.pt-bar { letter-spacing: 0.05em; color: var(--accent); }
.pt-pct { color: var(--cream-mut); font-size: 0.9em; }
.pt-caret { display: inline-block; width: 8px; height: 1em; margin-left: 3px; vertical-align: text-bottom; background: var(--accent); animation: caretBlink 0.8s step-end infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* Móvil/tablet (1 columna): el terminal va DESPUÉS de las fases y queda
   ANCLADO abajo de la pantalla mientras haces scroll — los comandos se
   ven siempre, como una consola acoplada. OJO: tiene que ser flex, no
   grid — en grid un ítem sticky solo puede moverse dentro de su celda. */
@media (max-width: 959px) {
  /* align-items:stretch anula el align-items:start de la regla base (pensado
     para el grid de escritorio): sin él, el terminal sale a su ancho de
     contenido y desborda el viewport en móvil */
  .process-layout { display: flex; flex-direction: column; align-items: stretch; }
  .process-stage {
    position: sticky; bottom: 0.9rem; order: 1; z-index: 5;
    aspect-ratio: auto; height: 34vh; min-height: 235px;
    box-shadow: 0 22px 55px rgba(8, 8, 8, 0.6);
  }
  .pt-ghost { font-size: 5.2rem; }
}

.process-steps { display: grid; gap: 0.4rem; }
.process-step {
  border: 1px solid transparent; border-radius: 16px;
  transition: background 0.4s, border-color 0.4s, opacity 0.4s;
}
/* el contenido es un <button> real: operable con teclado, hereda el grid del li */
.process-step-btn {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
  width: 100%; text-align: left; padding: 1.4rem 1rem; cursor: pointer;
  border-radius: inherit;
}
.process-step { opacity: 0.5; }
.process-step:hover { opacity: 0.8; }
.process-step.is-active { opacity: 1; background: rgba(237, 237, 233, 0.04); border-color: var(--line-d); }
.process-num { font-family: var(--display); font-stretch: 120%; font-weight: 900; font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--cream-mut); line-height: 1; transition: color 0.4s; }
.process-step.is-active .process-num { color: var(--accent); }
.process-step h3 { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.25rem; text-transform: uppercase; margin-bottom: 0.4rem; }
.process-step p { color: var(--cream-mut); max-width: 46ch; font-size: 0.95rem; }

/* =============================================================
   13. FAQ
   ============================================================= */
.faq-list { width: 100%; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0.4rem; font-family: var(--display); font-stretch: 112%; font-weight: 750;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem); cursor: pointer;
  transition: color 0.3s, padding-left 0.45s var(--ease-soft), font-stretch 0.45s var(--ease-out);
}
/* apertura/cierre con altura animada (nativo 2026; sin soporte queda a corte, como antes) */
:root { interpolate-size: allow-keywords; }
.faq-item::details-content {
  block-size: 0; overflow: clip;
  transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { padding-left: 1rem; font-stretch: 118%; }
.faq-x { position: relative; flex: none; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; transition: transform 0.45s var(--ease-soft), background 0.3s, border-color 0.3s; }
.faq-x::before, .faq-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.6px; background: var(--ink); transform: translate(-50%, -50%); }
.faq-x::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-x { transform: rotate(135deg); background: var(--accent); border-color: var(--ink); }
.faq-item > p { padding: 0 3.4rem 1.5rem 0.4rem; color: var(--ink-soft); max-width: 64ch; }

/* =============================================================
   13.5 Plugin IA (ideas virales)
   ============================================================= */
.aiplugin { background: var(--bg-2); }
.ai-card {
  max-width: 860px; margin: 0 auto;
  background: var(--dark); color: var(--cream);
  border-radius: var(--radius); border: 1px solid var(--line-d);
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
  box-shadow: 0 40px 90px -30px rgba(11, 11, 11, 0.4);
}
.ai-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.ai-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--cream-mut); }
.ai-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: dotPulse 2.4s ease-out infinite; }
.ai-status { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--accent); }
.ai-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ai-form input {
  flex: 1 1 240px; min-width: 0; font: inherit; color: var(--cream);
  background: rgba(237, 237, 233, 0.05); border: 1px solid var(--line-d);
  border-radius: 14px; padding: 1rem 1.1rem;
  transition: border-color 0.3s, background 0.3s;
}
.ai-form input::placeholder { color: var(--cream-mut); }
.ai-form input:focus { outline: none; border-color: var(--accent); background: rgba(237, 237, 233, 0.08); }
.ai-go {
  flex: none; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; font-weight: 500;
  background: var(--accent); color: var(--ink); border-radius: 14px; padding: 1rem 1.5rem;
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s;
}
.ai-go:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(197, 255, 122, 0.25); }
.ai-go.is-busy { pointer-events: none; opacity: 0.7; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.ai-chip { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--cream-mut); border: 1px solid var(--line-d); border-radius: 999px; padding: 0.4rem 0.8rem; cursor: pointer; transition: border-color 0.3s, color 0.3s, background 0.3s; }
.ai-chip:hover { border-color: var(--accent); color: var(--cream); }

.ai-out { margin-top: 1.4rem; display: grid; gap: 0.7rem; }
.ai-think { font-family: var(--mono); font-size: 0.74rem; color: var(--accent); display: flex; align-items: center; gap: 0.5rem; }
.ai-think i { width: 8px; height: 1em; background: var(--accent); animation: caretBlink 0.7s step-end infinite; }
.ai-idea {
  border: 1px solid var(--line-d); border-radius: 16px; padding: 1.1rem 1.2rem;
  background: rgba(237, 237, 233, 0.03);
  opacity: 0; transform: translateY(12px); animation: aiIn 0.5s var(--ease-out) forwards;
}
/* nth-of-type: delante va el <p class="ai-detected">, que no cuenta como idea */
.ai-idea:nth-of-type(2) { animation-delay: 0.12s; }
.ai-idea:nth-of-type(3) { animation-delay: 0.24s; }
@keyframes aiIn { to { opacity: 1; transform: none; } }
.ai-idea-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.ai-idea-n { font-family: var(--display); font-stretch: 120%; font-style: italic; font-weight: 900; font-size: 1.5rem; color: var(--accent); line-height: 1; }
.ai-idea-fmt { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--cream-mut); text-transform: uppercase; margin-left: auto; text-align: right; }
.ai-idea h4 { font-family: var(--display); font-stretch: 110%; font-weight: 750; font-size: clamp(1rem, 2.4vw, 1.25rem); line-height: 1.1; }
.ai-idea p { font-size: 0.9rem; color: var(--cream-mut); margin-top: 0.4rem; }
.ai-cta { margin-top: 0.6rem; font-size: 0.85rem; color: var(--cream-mut); display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; }
.ai-cta button[data-open-booking] { color: var(--accent); border-bottom: 1px solid var(--accent); font: inherit; }
.ai-cta-sep { color: rgba(237, 237, 233, 0.3); }
/* "dame otras 3": pastilla, no enlace */
.ai-more {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  border: 1px solid var(--line-d); border-radius: 999px; padding: 0.42rem 0.85rem;
  color: var(--cream); transition: border-color 0.3s, color 0.3s;
}
.ai-more:hover { border-color: var(--accent); color: var(--accent); }
/* copiar idea */
.ai-copy {
  flex: none; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream-mut); border: 1px solid var(--line-d); border-radius: 999px; padding: 0.28rem 0.6rem;
  transition: border-color 0.3s, color 0.3s;
}
.ai-copy:hover { border-color: var(--accent); color: var(--cream); }
.ai-copy.is-copied { border-color: var(--accent); color: var(--accent); }
/* etiqueta "sector detectado" sobre las ideas */
.ai-detected { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--cream-mut); margin-bottom: 0.2rem; }
.ai-detected b { color: var(--accent); font-weight: 500; }
/* mensaje cuando la entrada no es un sector válido */
.ai-reject { border: 1px solid var(--line-d); border-radius: 16px; padding: 1.1rem 1.2rem; background: rgba(237, 237, 233, 0.03); }
.ai-reject-msg { font-size: 1rem; color: var(--cream); }
.ai-reject-eg { margin-top: 0.5rem; font-size: 0.85rem; color: var(--cream-mut); }
.ai-reject-eg b { color: var(--cream); font-weight: 500; }

/* =============================================================
   14. CTA band
   ============================================================= */
.cta {
  background: var(--dark); color: var(--cream); text-align: center;
  border-radius: 34px; margin: 0 clamp(0.5rem, 1.2vw, 1.1rem); overflow: hidden;
}
.cta .kicker { color: var(--cream-mut); }
.cta-inner { max-width: 800px; margin: 0 auto; }
.cta-big { font-family: var(--display); font-stretch: 120%; font-weight: 850; text-transform: uppercase; font-size: clamp(2.2rem, 7vw, 5rem); line-height: 0.96; margin: 0.4rem 0 2rem; }
.cta-button {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.14em;
  background: var(--accent); color: var(--ink); padding: 1.15rem 2rem; border-radius: 16px;
  transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), background 0.3s, color 0.3s;
}
.cta-button:hover { background: var(--cream); color: var(--ink); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(197, 255, 122, 0.22); }
.cta-button-arrow { transition: transform 0.4s var(--ease-bounce); }
.cta-button:hover .cta-button-arrow { transform: translateX(5px); }
.cta-sub { margin-top: 1.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--cream-mut); }

/* =============================================================
   15. Footer
   ============================================================= */
.footer { padding: clamp(3.5rem, 8vh, 6rem) var(--gutter) 2rem; }
.footer-word { font-family: var(--display); font-stretch: 122%; font-style: italic; font-weight: 900; font-size: clamp(3.2rem, 12.5vw, 11rem); line-height: 0.9; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); transition: color 0.6s var(--ease-out); text-align: center; user-select: none; }
.footer-word:hover { color: var(--ink); }
.footer-word i { font-style: normal; font-size: 0.3em; vertical-align: super; }
.footer-grid { display: grid; gap: 2.4rem; grid-template-columns: 1fr; margin: 3.4rem 0; padding-top: 2.6rem; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-label { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em; color: var(--mute); margin-bottom: 0.9rem; }
.footer-grid a, .footer-grid p, .footer-link-btn { display: block; font-size: 0.95rem; margin-bottom: 0.45rem; text-align: left; }
.footer-grid a, .footer-link-btn { width: fit-content; border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.footer-grid a:hover, .footer-link-btn:hover { border-color: var(--ink); }
.footer-base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 1.6rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--mute); }
.footer-base a:hover { color: var(--ink); }

/* =============================================================
   16. Modal de reserva (panel lateral)
   ============================================================= */
.booking-overlay {
  position: fixed; inset: 0; z-index: 500; display: flex; justify-content: flex-end;
  background: rgba(8, 8, 8, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background 0.5s var(--ease-out), backdrop-filter 0.5s var(--ease-out);
}
.booking-overlay[hidden] { display: none; }
.booking-overlay.is-open { background: rgba(8, 8, 8, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.booking-panel {
  position: relative; width: min(920px, 100%); height: 100%; background: var(--dark); color: var(--cream);
  display: grid; grid-template-columns: 1fr; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.55s var(--ease-out);
  box-shadow: -40px 0 100px rgba(0,0,0,0.5);
}
@media (min-width: 820px) { .booking-panel { grid-template-columns: 0.85fr 1.15fr; } }
.booking-overlay.is-open .booking-panel { transform: translateX(0); }
.booking-close {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 4; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(237,237,233,0.06); color: var(--cream); border: 1px solid var(--line-d);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease-bounce);
}
.booking-close:hover { background: var(--accent); color: var(--ink); transform: rotate(90deg); }

.booking-aside { padding: 1.4rem 1.4rem 1.2rem; background: var(--dark-2); border-bottom: 1px solid var(--line-d); }
@media (min-width: 820px) { .booking-aside { padding: clamp(2rem, 5vw, 3.4rem); border-bottom: 0; border-right: 1px solid var(--line-d); } }
/* En móvil el aside se compacta: fuera cita, titular más pequeño */
@media (max-width: 819px) {
  .booking-quote { display: none; }
  .booking-headline { font-size: 1.3rem; }
  .booking-headline br { display: none; }
  .booking-bullets { margin-top: 0.9rem; gap: 0.3rem; }
  .booking-bullets li { font-size: 0.82rem; }
  .booking-eyebrow { margin-bottom: 0.8rem; }
}
.booking-eyebrow { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 1.4rem; }
.booking-headline { font-family: var(--display); font-stretch: 116%; font-weight: 850; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 0.98; }
.booking-bullets { margin-top: 1.6rem; display: grid; gap: 0.55rem; }
.booking-bullets li { position: relative; padding-left: 1.4rem; color: var(--cream-mut); font-size: 0.95rem; }
.booking-bullets li::before { content: "+"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.booking-quote { margin-top: 2rem; font-size: 0.9rem; color: var(--cream-mut); font-style: italic; border-left: 2px solid var(--accent); padding-left: 1rem; }

.booking-main { padding: clamp(2rem, 5vw, 3.4rem); }
.booking-progress { display: flex; gap: 0.4rem; margin-bottom: 2rem; }
.bp-step { flex: 1; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--cream-mut); padding-bottom: 0.55rem; border-bottom: 2px solid var(--line-d); transition: color 0.3s, border-color 0.3s; }
.bp-step.is-active { color: var(--accent); border-color: var(--accent); }
.bp-step.is-done { color: var(--cream); border-color: var(--cream); }
.booking-step[hidden] { display: none; }
.booking-step { animation: stepIn 0.5s var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Campos */
.field { position: relative; margin-bottom: 0.9rem; }
.field-row { display: grid; gap: 0.9rem; }
@media (min-width: 540px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field input, .field select {
  width: 100%; font: inherit; color: var(--cream); background: rgba(237, 237, 233, 0.04);
  border: 1px solid var(--line-d); border-radius: 14px; padding: 1.35rem 1rem 0.55rem;
  transition: border-color 0.3s, background 0.3s; appearance: none;
}
.field select { padding-right: 2.4rem; cursor: pointer; }
.field select option { color: var(--ink); background: var(--cream); }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); background: rgba(237, 237, 233, 0.07); }
.field label { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cream-mut); font-size: 0.92rem; transition: all 0.22s var(--ease-out); }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field select:focus + label, .field select:valid + label {
  top: 0.62rem; transform: none; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.field:has(select)::after { content: "↓"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--cream-mut); pointer-events: none; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; border-radius: 14px; padding: 1rem 1.5rem; transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), background 0.3s, color 0.3s, border-color 0.3s; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); transition-duration: 0.1s; }
.btn-solid { background: var(--cream); color: var(--ink); }
.btn-solid:hover { background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.btn-accent { background: var(--accent); color: var(--ink); width: 100%; position: relative; }
.btn-accent:hover { box-shadow: 0 18px 44px rgba(197, 255, 122, 0.25); }
.btn-ghost { border: 1px solid var(--line-d); color: var(--cream-mut); padding: 0.85rem 1.2rem; }
.btn-ghost:hover { border-color: var(--cream); color: var(--cream); }
.booking-nav-row { display: flex; justify-content: flex-start; margin-top: 1.4rem; }
.booking-nav-row.spread { justify-content: space-between; align-items: center; }

/* Calendario */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.cal-title { font-family: var(--display); font-stretch: 112%; font-weight: 800; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.04em; }
.cal-nav { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-d); display: grid; place-items: center; transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s; }
.cal-nav:hover { background: var(--cream); color: var(--ink); }
.cal-nav:disabled { opacity: 0.25; pointer-events: none; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--cream-mut); text-align: center; margin-bottom: 0.5rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.cal-day { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--mono); font-size: 0.82rem; border-radius: 12px; border: 1px solid transparent; color: var(--cream); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--ease-bounce); }
.cal-day.is-off { color: rgba(237, 237, 233, 0.18); pointer-events: none; }
.cal-day.is-open { border-color: var(--line-d); cursor: pointer; }
.cal-day.is-open:hover { background: rgba(197, 255, 122, 0.14); border-color: var(--accent); transform: scale(1.06); }
.cal-day.is-selected { background: var(--accent); color: var(--ink); border-color: var(--accent); font-weight: 700; }
.cal-day.is-today { position: relative; }
.cal-day.is-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal-legend { margin-top: 1rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--cream-mut); display: flex; align-items: center; gap: 0.5rem; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--accent); }

/* Horas */
.slots-day { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; margin-bottom: 0.3rem; }
.slots-note { font-size: 0.8rem; color: var(--cream-mut); margin-bottom: 1.4rem; }
.slots-note b { color: var(--accent); font-weight: 500; font-family: var(--mono); font-size: 0.74rem; }
.slots-block { margin-bottom: 1.2rem; }
.slots-label { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.22em; color: var(--cream-mut); margin-bottom: 0.6rem; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 0.45rem; }
.slot { font-family: var(--mono); font-size: 0.8rem; padding: 0.7rem 0.4rem; text-align: center; border: 1px solid var(--line-d); border-radius: 12px; color: var(--cream); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--ease-bounce); }
.slot:hover { border-color: var(--accent); background: rgba(197, 255, 122, 0.12); transform: translateY(-2px); }
.slot.is-busy { color: rgba(237, 237, 233, 0.22); text-decoration: line-through; pointer-events: none; border-color: rgba(237, 237, 233, 0.06); }

/* Resumen */
.booking-summary { border: 1px solid var(--line-d); border-radius: 18px; padding: 1.4rem 1.4rem 0.9rem; margin-bottom: 1.4rem; }
.bs-title { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 1rem; }
.booking-summary dl { display: grid; gap: 0.7rem; }
.booking-summary dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px dashed var(--line-d); }
.booking-summary dl > div:last-child { border-bottom: 0; }
.booking-summary dt { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-mut); padding-top: 0.15rem; }
.booking-summary dd { font-size: 0.95rem; }
.booking-confirm .bc-spinner { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.booking-confirm.is-sending .bc-label { opacity: 0; }
.booking-confirm.is-sending .bc-spinner { opacity: 1; }
.bc-spinner::after { content: ""; width: 18px; height: 18px; border: 2px solid rgba(11, 11, 11, 0.25); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Éxito */
.booking-success { text-align: center; padding: 1.5rem 0.5rem; }
.bs-check { width: 74px; margin: 0 auto 1.4rem; }
.bs-check circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.9s var(--ease-out) forwards; }
.bs-check path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.7s 0.5s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.booking-success h3 { font-family: var(--display); font-stretch: 116%; font-weight: 800; font-size: 1.7rem; text-transform: uppercase; margin-bottom: 0.6rem; }
.booking-success p { color: var(--cream-mut); max-width: 42ch; margin: 0 auto 0.6rem; }
.bs-mail-note { font-size: 0.8rem; }
.bs-mail-note a { color: var(--accent); text-decoration: underline; }

/* =============================================================
   18. Responsive fino
   ============================================================= */
@media (max-width: 719px) {
  /* widget del tiempo: arriba a la izquierda, muy pequeño y discreto */
  .hero-widget {
    top: calc(var(--nav-h) + 0.4rem); left: var(--gutter); right: auto; bottom: auto;
    min-width: 0; padding: 0.4rem 0.55rem; gap: 0.05rem;
    background: rgba(244, 244, 241, 0.5); border-radius: 9px;
  }
  .hero-widget .widget-line { font-size: 0.5rem; gap: 0.45rem; }
  .hero-widget .widget-k { font-size: 0.42rem; }
  .hero-widget .widget-dot { width: 5px; height: 5px; }
  .hero-widget .widget-sep { border-top-width: 0.5px; padding-top: 0.18rem; margin-top: 0.12rem; }
  /* en móvil el titular ya dice "marketing + IA": el kicker sobra */
  .hero-corner-tl { display: none; }
  .hero-scroll { display: none; }
  .footer-base { flex-direction: column; }
}

/* Transición nativa al navegar entre páginas del sitio (se ignora sin soporte) */
@view-transition { navigation: auto; }

/* =============================================================
   19. Reduced motion — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
  .widget-dot { animation: none; }
  .hero-scroll span { animation: none; }
  .sound-toggle[aria-pressed="true"] .sound-bars i { animation: none; height: 8px; }
}