/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --bg: #000312;
  --blue: #3b50ea;
  --red: #FF6D6D;
  --gray: #b5b5b5;
  --white: #ffffff;
  --font: 'omnes-pro', 'Nunito', sans-serif;
  --radius: 20px;
  color-scheme: dark;

  /* Accent: por defecto azul EVC. Cada página puede sobreescribirlo */
  --accent:     #3b50ea;
  --accent-rgb: 59, 80, 234;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; max-width: 100vw; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* ─── Glass utility ─────────────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(5px) saturate(130%);
  -webkit-backdrop-filter: blur(5px) saturate(130%);
  border: 0px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}

/* ─── Section fade-in on scroll ─────────────────────────────── */
/* Each section wraps with .section-fade — fades up when entering viewport */
.section-fade {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
  margin-bottom: 8%;
}
.section-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Section mask dissolve (fundido superior/inferior) ─────── */
/* Applied to sections to blend their edges into the dark background */
.section-dissolve {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, black 8%, black 92%, transparent 100%);
}
.section-dissolve--top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
}
.section-dissolve--bottom {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 88%, transparent 100%);
}

/* ─── Container ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}
@keyframes rotate-text {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes evc-breathe {
  0%   { opacity: 0.3; transform: scaleY(1); }
  100% { opacity: 0.7; transform: scaleY(1.2); }
}

/* ─── Scattered Logos (3D Floating) ─────────────────────────────────── */
.scattered-logos-wrap {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  pointer-events: auto;
  background: color-mix(in srgb, rgb(var(--accent-rgb)) 18%, #010810 82%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
}

.scattered-logos-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(
    circle 650px at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.85) 0%,
    rgba(var(--accent-rgb), 0.15) 55%,
    transparent 75%
  );
}

.scattered-logos-wrap:hover::before {
  opacity: 1;
}

/* Móvil: glow siempre visible + ripple en tap */
@media (max-width: 768px) {
  .scattered-logos-wrap::before {
    opacity: 1;
    background: radial-gradient(
      ellipse 80% 55% at 50% 50%,
      rgba(var(--accent-rgb), 0.45) 0%,
      rgba(var(--accent-rgb), 0.08) 60%,
      transparent 80%
    );
    transition: none;
  }
}


.logo-ripple {
  position: absolute;
  width: 0; height: 0;
  left: var(--rx, 50%);
  top:  var(--ry, 50%);
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.35) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: logo-ripple 0.7s ease-out forwards;
}

@keyframes logo-ripple {
  0%   { width: 0; height: 0; opacity: 0.8; transform: translate(-50%, -50%) scale(0); }
  60%  { opacity: 0.5; }
  100% { width: 600px; height: 600px; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}


.walker-img {
  position: absolute;
  width: 100px;
  bottom: -200px;
  opacity: 0;
  object-fit: contain;
  animation: diagonalTravel 28s linear infinite;
  will-change: transform, opacity;
  z-index: 1;
}

@keyframes diagonalTravel {
  0%   { transform: translate(0, 0)              rotate(-25deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(-250px, -1500px)   rotate(-25deg); opacity: 0; }
}

@media (max-width: 768px) {
  .scattered-logos-wrap {
    height: 460px;
  }
  .walker-img {
    width: 62px;
    bottom: -100px;
  }
  @keyframes diagonalTravel {
    0%   { transform: translate(0, 0)           rotate(-25deg); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(-120px, -760px) rotate(-25deg); opacity: 0; }
  }
  .clients-heading-top {
    padding: 30px 20px 10px;
  }
}

/* ─── Header ─────────────────────────────────────────────────── */
.glass-header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 1200px;
  border-radius: 90px;
  z-index: 9999;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  /* CSS glass — reads real content behind via backdrop-filter */
  background: rgba(0, 3, 18, 0.20);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  will-change: backdrop-filter;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  transition:
    width         0.6s cubic-bezier(0.33, 1, 0.68, 1),
    max-width     0.6s cubic-bezier(0.33, 1, 0.68, 1),
    border-radius 0.6s cubic-bezier(0.33, 1, 0.68, 1),
    top           0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.glass-header.compact {
  top: 12px;
  width: 68%;
  max-width: 780px;
}

.glass-header.expanded {
  width: 88%;
  max-width: 560px;
  border-radius: 40px;
}

/* Header content row */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  height: 82px;
  flex-shrink: 0;
  box-sizing: border-box;
  transition:
    height  0.55s cubic-bezier(0.33, 1, 0.68, 1),
    padding 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}
.glass-header.compact .header-container { height: 64px; padding: 0 25px; }

/* Logo */
.header-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-logo img {
  height: 38px;   /* altura fija = todos los logos se ven igual de grandes */
  width: auto;
  max-width: 160px;
  object-fit: contain;
  transition:
    height  0.55s cubic-bezier(0.33, 1, 0.68, 1),
    width   0.55s cubic-bezier(0.33, 1, 0.68, 1),
    opacity 0.22s ease,
    filter  0.22s ease,
    transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}
.header-logo img.changing {
  opacity: 0;
  filter: blur(6px);
}
.header-logo:hover img:not(.changing) { transform: scale(1.06); }
.glass-header.compact .header-logo img { height: 32px; width: auto; max-width: 40px; }

/* Hamburger */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 6px;
  flex-shrink: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, box-shadow 0.3s ease;
}
/* Desktop con ratón real: glow en hover */
@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover span { box-shadow: 0 0 10px 2px rgba(255,255,255,0.5); }
}
/* Táctil: flash controlado por JS, se apaga con transición */
.menu-toggle.tapping span {
  box-shadow: 0 0 10px 2px rgba(255,255,255,0.5);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, box-shadow 0s;
}
.glass-header.expanded .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.glass-header.expanded .menu-toggle span:nth-child(2) { transform: scaleX(0); opacity: 0; }
.glass-header.expanded .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menu content — max-height animation keeps overflow: hidden on parent working */
.menu-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  padding: 0 36px;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.25s ease, padding 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.glass-header.expanded .menu-content {
  max-height: 82vh;
  overflow-y: auto;
  opacity: 1;
  pointer-events: auto;
  padding: 18px 36px 32px;
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.38s ease 0.18s, padding 0.4s ease;
}

.menu-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
}
.menu-logos a {
  display: flex;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3));
}
.menu-logos a:hover { transform: scale(1.08) translateY(-6px); }
.menu-logos img { height: 44px; width: auto; max-width: 140px; object-fit: contain; }

/* Separador del menú */
.menu-divider {
  width: 60%;
  max-width: 320px;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 20px auto;
}

/* Enlace de vuelta — solo en landings */
.menu-back-row {
  display: flex;
  justify-content: center;
  padding: 0 0 20px;
}

/* Columnas de servicios */
.menu-services {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 0 40px;
}
.menu-services__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.menu-services__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.4;
  margin-bottom: 2px;
}
.menu-services__link {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  white-space: nowrap;
  transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
  color: rgba(255,255,255,0.85);
}
.menu-services__link--media:hover {
  color: #0eccdb;
  transform: scale(1.03);
  text-shadow: 0 0 14px rgba(14,204,219,0.4);
}
.menu-services__link--live:hover {
  color: #FF6D6D;
  transform: scale(1.03);
  text-shadow: 0 0 14px rgba(255,109,109,0.4);
}
.menu-services__link--live.is-current {
  color: #FF6D6D;
  font-weight: 700;
  background: rgba(255,109,109,0.1);
  border-radius: 8px;
}
.menu-services__link--live.is-current::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #FF6D6D;
  margin-right: 7px;
  vertical-align: middle;
}

/* ─── Navegación del menú (media acordeón + live, horizontal) ── */
.menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
}
.menu-nav--split {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
}
.menu-nav__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
}
.menu-nav__vdivider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.1);
  margin: 4px 18px;
  flex-shrink: 0;
}

/* Etiqueta de columna — oculta en desktop (la posición ya distingue media/live),
   visible solo cuando el menú se apila en móvil */
.menu-nav__col-label {
  display: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.85);
}
.menu-nav__col-label--media span { color: rgba(14,204,219,0.9); }
.menu-nav__col-label--live  span { color: rgba(255,109,109,0.9); }

/* Versión anterior (vertical, con títulos) — sin uso mientras .menu-nav--split
   esté activo. Se deja aquí para poder revertir sin tocar el CSS. */
.menu-nav__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
}
.menu-nav__group .menu-services__label { text-align: center; }
@media (max-width: 480px) {
  .menu-nav--split {
    flex-direction: column;
    align-items: center;
  }
  .menu-nav__col {
    max-width: 270px;
    width: 100%;
  }
  .menu-nav__vdivider {
    width: 60%;
    max-width: 280px;
    height: 1px;
    align-self: center;
    margin: 6px 0;
  }
  .menu-nav__col-label {
    display: block;
    align-self: center;
    text-align: center;
  }
  .menu-nav__col-label--live {
    margin-top: 14px;
  }
}

/* Acordeón de categorías de El Viento Media */
.menu-acc { width: 100%; }
.menu-acc__head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
}
.menu-acc__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 5px 6px;
  text-align: left;
  color: rgba(255,255,255,0.85);
  transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
}
.menu-acc__title:hover {
  color: #0eccdb;
  transform: scale(1.03);
  text-shadow: 0 0 14px rgba(14,204,219,0.4);
}
.menu-acc__toggle {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: none; background: none; cursor: pointer;
  color: rgba(255,255,255,0.4);
  border-radius: 50%;
  transition: color 0.2s, background 0.2s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-acc__toggle:hover { color: #0eccdb; background: rgba(255,255,255,0.06); }
.menu-acc.is-open .menu-acc__toggle { transform: rotate(180deg); color: #0eccdb; }

/* Estas dos reglas deben ir DESPUÉS de las reglas base de arriba para ganar
   la cascada (misma especificidad, gana la que viene después en el archivo) */
@media (max-width: 480px) {
  .menu-acc__head {
    position: relative;
  }
  .menu-acc__title {
    padding: 5px 32px;
    text-align: center;
  }
  .menu-acc__toggle {
    position: absolute;
    top: calc(50% - 13px);
    right: 0;
  }
}

/* Categoría activa (la que contiene la página actual) */
.menu-acc.is-current .menu-acc__title {
  color: #0eccdb;
  text-shadow: 0 0 14px rgba(14,204,219,0.35);
}
.menu-acc.is-current .menu-acc__toggle { color: rgba(14,204,219,0.6); }

.menu-acc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-acc.is-open .menu-acc__panel { max-height: 280px; }
.menu-acc__inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  padding: 6px 0 12px;
}
.menu-acc__item {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.55);
  padding: 6px 14px;
  border-radius: 8px;
  text-align: center;
  transition: color 0.2s, background 0.2s;
}
.menu-acc__item:hover { color: #0eccdb; background: rgba(14,204,219,0.08); }
.menu-acc__item.is-current {
  color: #0eccdb;
  font-weight: 700;
  background: rgba(14,204,219,0.1);
}
.menu-acc__item.is-current::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #0eccdb;
  margin-right: 7px;
  vertical-align: middle;
}

/* Fila de contacto */
.menu-contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 28px 0 0;
}
.menu-links__blog-link {
  position: absolute;
  right: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  transition: color 0.2s;
}
.menu-links__blog-link:hover { color: rgba(255, 255, 255, 0.6); }

/* Botón Contacto */
.menu-links__contact-btn {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.menu-links__contact-btn:hover {
  transform: scale(1.07);
  text-shadow: 0 0 12px rgba(255,255,255,0.35), 0 0 28px rgba(255,255,255,0.12);
}

/* Logo como botón (landings con backTo) */
.header-logo--btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Enlace "← volver a media" en el menú */
.menu-links__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  opacity: 0.85;
  margin-bottom: 4px;
  transition: opacity 0.2s ease;
}
.menu-links__back:hover { opacity: 1; }
.menu-links__back:hover .menu-links__back-arrow { transform: translateX(-3px); }
.menu-links__back:hover .menu-links__back-text { transform: scale(1.04); }
.menu-links__back-arrow {
  display: inline-flex;
  color: var(--accent, #0eccdb);
  transition: transform 0.2s ease;
}
.menu-links__back-text {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  transform-origin: left center;
  transition: transform 0.2s ease;
}
.menu-links__back-prefix {
  font-size: 0.89rem;
  font-weight: 500;
  opacity: 0.75;
}
.menu-links__back-brand {
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--accent, #0eccdb);
}

/* ─── Hero (Home) ────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 80px;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
  will-change: opacity;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,3,18,0.2) 0%, rgba(0,3,18,0.75) 100%);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero__subtitle {
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 12px;
}
.hero__title {
  font-size: clamp(3.5rem, 12vw, 13rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.hero__title em { font-style: normal; color: var(--blue); }

@media (max-width: 768px) {
  .hero { height: 90vh; justify-content: center; padding-bottom: 0; padding-top: 28vh; }
  .hero__title    { font-size: clamp(4.5rem, 18vw, 7rem); }
  .hero__subtitle { font-size: 0.7rem; }
}

/* ─── Panel Section (EVM / EVL dual-brand) ──────────────────── */
.ps-section {
  padding: 100px 20px 120px;
}
@media (max-width: 700px) {
  .ps-section { padding: 60px 20px 40px; }
}

/* Container */
.ps-wrap {
  position: relative;
  width: calc(100% - 40px);
  max-width: 900px;
  margin: 0 auto;
  height: 260px;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  scroll-margin-top: 96px;
  transition:
    max-width  0.65s cubic-bezier(0.4, 0, 0.2, 1),
    height     0.65s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.6s ease;
}
/* El contenido del panel abierto (titulo + texto + video + formulario) mide
   bastante mas que la altura disponible, asi que siempre hay que desplazarse.
   Sin ninguna senal, el recorte a media frase parece un fallo: este degradado
   al pie indica que la cosa continua. Cae sobre el relleno inferior de 96px
   cuando se llega al final, asi que nunca tapa texto util. */
.ps-wrap--open::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  pointer-events: none;
  z-index: 3;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background: linear-gradient(to bottom,
    rgba(0, 3, 18, 0) 0%,
    rgba(0, 3, 18, 0.72) 55%,
    rgba(0, 3, 18, 0.94) 100%);
}

.ps-wrap--open {
  max-width: 1400px;
  height: min(84vh, 840px);
  /* Quitar backdrop-filter cuando está abierto — evita artefactos con el vídeo */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Scrollable inner body — windmill stays outside so it never scrolls */
.ps-scroll-body {
  flex: 1;
  min-height: 0;
}
.ps-wrap--open .ps-scroll-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
  scroll-behavior: smooth;
}
/* Subtle brand tint on open — border stays white */
.ps-wrap--evm { background: rgba(14, 204, 219, 0.07); }
.ps-wrap--evl { background: rgba(255, 109, 109, 0.07); }

/* ── Curved flood from corners ── */
.ps-flood {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: clip-path 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              opacity    0.5s ease;
}
.ps-flood--evm {
  background: radial-gradient(ellipse at 0% 100%, rgba(14,204,219,0.55) 0%, rgba(14,204,219,0.1) 55%, transparent 75%);
  clip-path: circle(0% at 0% 100%);
}
.ps-flood--evl {
  background: radial-gradient(ellipse at 100% 100%, rgba(255,109,109,0.55) 0%, rgba(255,109,109,0.1) 55%, transparent 75%);
  clip-path: circle(0% at 100% 100%);
}
/* Hover: expand from corner — solo en dispositivos con ratón real */
@media (hover: hover) {
  .ps-wrap--hover-evm .ps-flood--evm { clip-path: circle(170% at 0% 100%); }
  .ps-wrap--hover-evl .ps-flood--evl { clip-path: circle(170% at 100% 100%); }
}
/* Opening click: complete the flood, then fade as subpage appears */
.ps-wrap--open.ps-wrap--evm .ps-flood--evm {
  clip-path: circle(210% at 0% 100%);
  opacity: 0;
  transition: clip-path 0.35s ease, opacity 0.55s ease 0.45s;
}
.ps-wrap--open.ps-wrap--evl .ps-flood--evl {
  clip-path: circle(210% at 100% 100%);
  opacity: 0;
  transition: clip-path 0.35s ease, opacity 0.55s ease 0.45s;
}

/* ── Stage ── */
.ps-stage {
  position: relative;
  height: 260px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 1;
  /* Appear on close: wait for subpage to fade out first */
  transition: opacity 0.3s ease 0.2s, height 0.01s ease 0.01s;
}
.ps-stage--exit {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  /* Exit on open: fast fade, then collapse */
  transition: opacity 0.18s ease, height 0.01s ease 0.18s;
}

/* ── Sides ── */
.ps-side {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  cursor: pointer;
  transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 2;
  min-width: 0;
  height: 100%;
}
.ps-wrap--hover-evm .ps-side--evm { flex: 1.6; }
.ps-wrap--hover-evm .ps-side--evl { flex: 0.4; }
.ps-wrap--hover-evl .ps-side--evm { flex: 0.4; }
.ps-wrap--hover-evl .ps-side--evl { flex: 1.6; }

.ps-label {
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
  transition: color 0.35s;
}
.ps-wrap--hover-evm .ps-side--evm .ps-label { color: #0eccdb; }
.ps-wrap--hover-evl .ps-side--evl .ps-label { color: #ff6d6d; }

/* Arrow group: line + chevron together */
.ps-arrow {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.ps-arrow--l { flex-direction: row; }
.ps-arrow--r { flex-direction: row; }

.ps-line {
  flex: 1;
  height: 2px;
  min-width: 10px;
  background: rgba(255,255,255,0.22);
  border-radius: 2px;
  transition: background 0.35s;
}
.ps-wrap--hover-evm .ps-side--evm .ps-line { background: #0eccdb; }
.ps-wrap--hover-evl .ps-side--evl .ps-line { background: #ff6d6d; }

/* Chevron arrowheads */
.ps-arrowhead--l,
.ps-arrowhead--r {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-top: 2px solid rgba(255,255,255,0.35);
  border-right: 2px solid rgba(255,255,255,0.35);
  transition: border-color 0.35s;
}
.ps-arrowhead--l { transform: rotate(-135deg); }
.ps-arrowhead--r { transform: rotate(45deg); }
.ps-wrap--hover-evm .ps-side--evm .ps-arrowhead--l { border-color: #0eccdb; }
.ps-wrap--hover-evl .ps-side--evl .ps-arrowhead--r { border-color: #ff6d6d; }

/* ── Windmill ── */

/* Spacer hosts the stage windmill — lines can never cross it */
.ps-mill-space {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stage windmill: in normal flow inside mill-space */
.ps-mill {
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Subtle scale pulse on hover */
.ps-mill--hover-evm,
.ps-mill--hover-evl { transform: scale(1.08); }

/* Stage windmill: fade in after stage reappears, fade out fast when exiting */
.ps-mill { transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease 0.25s; }
.ps-stage--exit .ps-mill { opacity: 0; transition: opacity 0.15s ease; }

.ps-mill__circle {
  position: absolute;
  inset: 0;
  margin: auto;
  animation: spin-slow 20s linear infinite;
}

.ps-mill__img {
  position: relative;
  width: 50px;
  height: 50px;
  z-index: 1;
  transition: transform 0.25s ease;
}

/* Corner windmill: fixed top-right when open */
.ps-mill-corner {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  /* Fast fade-out when closing */
  transition: opacity 0.15s ease, transform 0.3s ease;
  z-index: 10;
}
.ps-mill-corner--in {
  opacity: 1;
  pointer-events: auto;
  /* Delayed fade-in when opening */
  transition: opacity 0.35s ease 0.2s, transform 0.3s ease;
}
.ps-mill-corner:hover { transform: rotate(20deg) scale(1.12); }
.ps-mill-corner .ps-mill__img {
  width: 44px;
  height: 44px;
}

/* ── Subpage ── */
.ps-subpage {
  opacity: 0;
  pointer-events: none;
  /* Fast fade-out when closing (no delay) */
  transition: opacity 0.18s ease;
}
.ps-subpage--in {
  opacity: 1;
  pointer-events: auto;
  /* Delayed fade-in when opening: wait for stage to exit */
  transition: opacity 0.4s ease 0.22s;
}

.ps-sub__body {
  padding: 80px 48px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Multi-line title — centered */
.ps-sub__title-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ps-sub__title {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 0.85;
  text-align: left;
  gap: 0;
}
.ps-sub__title span {
  display: block;
  margin-bottom: -0.05em;
}

/* Two-column layout */
.ps-sub__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
}
.ps-sub__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.ps-sub__prod {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9);
}
.ps-sub__desc {
  font-size: 0.97rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.6);
}
.ps-sub__cta {
  display: inline-block;
  align-self: flex-start;
  padding: 12px 28px;
  border-radius: 100px;
  border: 1.5px solid var(--bc);
  color: var(--bc);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.ps-sub__cta:hover { background: var(--bc); color: #fff; transform: translateY(-2px); }

.ps-sub__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  object-fit: cover;
}

/* Form */
.ps-form {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.ps-form__heading {
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
}
.ps-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ps-form input,
.ps-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.9rem;
  outline: none;
  resize: none;
  transition: border-color 0.2s;
}
.ps-form input::placeholder,
.ps-form textarea::placeholder { color: rgba(255,255,255,0.3); }
.ps-form input:focus,
.ps-form textarea:focus { border-color: rgba(255,255,255,0.3); }
.ps-form__submit {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: var(--bc);
  color: #fff;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  border: none;
  margin-top: 4px;
}
.ps-form__submit:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.ps-form__submit:disabled { opacity: 0.45; cursor: not-allowed; }
.ps-form__success { text-align: center; padding: 40px 20px; color: #4ade80; font-size: 1rem; }
.ps-form__error { color: var(--red); font-size: 0.85rem; text-align: center; }

@media (max-width: 700px) {
  /* Floods cian + rojo — duraciones primas distintas para desfase orgánico */
  .ps-wrap:not(.ps-wrap--open) .ps-flood--evm {
    clip-path: circle(170% at 0% 100%);
    animation: flood-mob-evm 19s ease-in-out infinite;
    animation-delay: -8s;
  }
  .ps-wrap:not(.ps-wrap--open) .ps-flood--evl {
    clip-path: circle(170% at 100% 100%);
    animation: flood-mob-evl 23s ease-in-out infinite;
    animation-delay: -3s;
  }

  .ps-wrap:not(.ps-wrap--open) { height: 200px; }
  /* En abierto: altura automática para que se adapte al contenido sin espacio vacío */
  /* Altura definida (no auto): el cuerpo interno es un hijo flex y necesita
     un limite concreto para poder desplazarse. Con auto, el max-height
     recortaba el final del texto sin dejar llegar a el. */
  .ps-wrap--open { height: 90vh; max-height: 90vh; overflow: hidden; }
  .ps-wrap { border-radius: 20px; }
  .ps-stage { height: 200px; }
  /* Forzar colapso del stage en móvil — la regla anterior lo sobreescribía */
  .ps-stage--exit { height: 0 !important; }
  .ps-mill-space { width: 110px; }
  .ps-mill { width: 110px; height: 110px; }
  .ps-mill__circle { width: 110px !important; height: 110px !important; }
  .ps-mill__img { width: 36px; height: 36px; }
  .ps-side { padding: 0 14px; gap: 8px; }
  /* Título más pequeño en móvil para no ocupar tanto espacio */
  .ps-sub__title { font-size: clamp(2rem, 10vw, 2.8rem); }
  .ps-sub__body { padding: 35px 20px 64px; gap: 24px; }
  .ps-sub__title-wrap { margin-bottom: 0; }
  .ps-sub__row { grid-template-columns: 1fr; gap: 20px; }
  .ps-sub__cta { align-self: center; }
  .ps-form__row { grid-template-columns: 1fr; }
}

/* Cian: 19s — sube ~9.5s, hold breve, baja ~8.5s */
@keyframes flood-mob-evm {
  0%        { opacity: 0.2; }
  50%       { opacity: 1;   }
  55%       { opacity: 1;   }
  100%      { opacity: 0.2; }
}
/* Rojo: 23s — sube ~12s, hold breve, baja ~10s */
@keyframes flood-mob-evl {
  0%        { opacity: 0.2; }
  52%       { opacity: 1;   }
  57%       { opacity: 1;   }
  100%      { opacity: 0.2; }
}

/* ─── Studio section ─────────────────────────────────────────── */
.studio-section {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.studio-section__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 28px;
}
.studio-section__label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.studio-section__title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
}
.studio-section__text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--gray);
  align-self: end;
}

/* ── Spotlight ── */
.studio-bento__spotlight {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ── Studio "Próximamente" overlay ── */
.studio-bento__coming-soon {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: rgba(5,7,14,0.58);
  border-radius: inherit;
  cursor: default;
}
.studio-bento__cs-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.38); margin: 0;
}
.studio-bento__cs-title {
  font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 800; letter-spacing: -0.02em;
  color: rgba(255,255,255,0.88); line-height: 1; margin: 0;
}
@media (max-width: 600px) {
  .studio-bento__cs-title { font-size: clamp(1.8rem,8vw,2.6rem); }
}

/* ── Bento grid ── */
.studio-bento {
  display: grid;
  gap: 10px;
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 280px 200px 180px;
  grid-template-areas:
    "video    video    set"
    "estudio  entrada  oficina"
    "camerino cocina   cocina";
}

/* ── Room card ── */
.room-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #080c1a;
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.25s, transform 0.25s;
}
.room-card:hover {
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
.room-card__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.room-card:hover .room-card__img { transform: scale(1.04); }

/* Placeholder */
.room-card__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #080c1a 0%, #0e1428 100%);
  position: relative;
}
.room-card__placeholder::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 15px;
  border: 1.5px dashed rgba(255,255,255,0.1);
  pointer-events: none;
}
.room-card__ph-icon {
  font-size: 2.8rem; opacity: 0.25; user-select: none;
}
.room-card__ph-icon--play {
  font-size: 2rem; opacity: 0.2;
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 50%;
}
.room-card__ph-badge {
  position: absolute; top: 12px; right: 12px;
  display: flex; align-items: center; gap: 5px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
  padding: 4px 8px; border-radius: 20px;
}

/* Expand hint */
.room-card { cursor: pointer; }
.room-card__expand {
  position: absolute; top: 12px; left: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(0,3,18,0.55);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.5);
  opacity: 0;
  transition: opacity 0.2s;
}
.room-card:hover .room-card__expand { opacity: 1; }

/* Label overlay */
.room-card__body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,3,18,0.88) 0%, transparent 100%);
  pointer-events: none;
}
.room-card__label {
  font-size: 0.85rem; font-weight: 800;
  color: var(--white); line-height: 1.2; margin-bottom: 3px;
}
.room-card__desc {
  font-size: 0.73rem; line-height: 1.4;
  color: rgba(255,255,255,0.45);
}

/* ── Lightbox ── */
.lb-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 3, 18, 0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: flex; align-items: center; justify-content: center;
  padding: 72px 80px 32px;
  overflow-y: auto;
  animation: lb-bg-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lb-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lb-backdrop--closing {
  animation: lb-bg-out 0.26s cubic-bezier(0.55, 0, 0.8, 0.45) both;
  pointer-events: none;
}
@keyframes lb-bg-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
/* Flechas de navegación */
.lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.8);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s;
}
.lb-arrow:hover { background: rgba(255,255,255,0.16); color: #fff; }
.lb-arrow--prev { left: 20px; }
.lb-arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb-arrow--next { right: 20px; }
.lb-arrow--next:hover { transform: translateY(-50%) translateX(2px); }
@media (max-width: 600px) {
  .lb-arrow { display: none; }
}
@media (max-width: 600px) {
  .lb-backdrop { padding: 64px 10px 20px; }
  .lb-content { width: 100%; gap: 12px; }
}

/* Dots indicador */
.lb-dots {
  display: flex; gap: 6px; align-items: center; justify-content: center;
}
.lb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none; cursor: pointer; padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.lb-dot.is-active {
  background: var(--white); transform: scale(1.3);
}
.lb-dot:hover:not(.is-active) { background: rgba(255,255,255,0.5); }

.lb-close {
  position: fixed; top: 20px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, color 0.2s;
}
.lb-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

.lb-content {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  width: min(94vw, 1300px);
  animation: lb-scale-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes lb-scale-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.lb-content--closing {
  animation: lb-scale-out 0.24s cubic-bezier(0.55, 0, 0.8, 0.45) both;
}
@keyframes lb-scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.88); }
}
.lb-media {
  width: 100%; max-height: 85vh;
  border-radius: 16px;
  object-fit: contain;
  display: block;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}
.lb-placeholder {
  width: 100%; height: min(75vh, 580px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: #080c1a;
  border: 1.5px dashed rgba(255,255,255,0.1);
  border-radius: 16px;
}
.lb-placeholder__icon { font-size: 5rem; opacity: 0.2; }
.lb-placeholder__label {
  font-size: 1.3rem; font-weight: 800; color: var(--white);
}
.lb-placeholder__note {
  font-size: 0.82rem; color: rgba(255,255,255,0.3);
}
.lb-caption {
  text-align: center;
}
.lb-caption__label {
  font-size: 0.95rem; font-weight: 800; color: var(--white); margin-bottom: 4px;
}
.lb-caption__desc {
  font-size: 0.8rem; color: rgba(255,255,255,0.4);
}
.lb-caption__socials {
  display: flex; gap: 10px; justify-content: center; margin-top: 10px;
}
.lb-caption__socials .timelapse-panel__social {
  position: static; opacity: 1;
}

/* Controles de vídeo personalizados (solo play/pause + barra) */
.lb-media-wrap { position: relative; width: 100%; }
.lb-controls {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,3,18,0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 120px;
  padding: 8px 14px;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.lb-controls--hidden {
  opacity: 0;
  pointer-events: none;
}
.lb-controls__play {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.1);
  border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s;
}
.lb-controls__play:hover { background: rgba(255,255,255,0.2); }
.lb-controls__bar {
  flex: 1; height: 24px; border-radius: 999px;
  background: transparent;
  cursor: pointer; position: relative;
  display: flex; align-items: center;
}
.lb-controls__bar::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.15);
  pointer-events: none;
}
.lb-controls__bar-fill {
  position: absolute; top: 50%; left: 0;
  transform: translateY(-50%);
  height: 4px;
  background: #0eccdb;
  border-radius: 999px;
  pointer-events: none;
}

@media (max-width: 600px) {
  .lb-controls { padding: 10px 16px; gap: 14px; }
  .lb-controls__play { width: 36px; height: 36px; }
  .lb-controls__play svg { width: 16px; height: 16px; }
  .lb-controls__bar { height: 32px; }
  .lb-controls__bar::before { height: 6px; }
  .lb-controls__bar-fill { height: 6px; }
}

@media (max-width: 900px) {
  .studio-section__header { grid-template-columns: 1fr; gap: 16px; }
  .studio-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 180px 180px 160px;
    grid-template-areas:
      "video    video"
      "set      estudio"
      "entrada  oficina"
      "camerino cocina";
  }
}
@media (max-width: 560px) {
  .studio-bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "video" "set" "estudio" "entrada" "oficina" "camerino" "cocina";
  }
  .room-card { height: 200px; }
}

/* ─── Clients heading ────────────────────────────────────────── */
.clients-heading-top {
  padding: 60px 20px 20px;
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
}

.clients-section-wrapper {
  margin: 0;
  margin-bottom: 8%;
  width: 100%;
  position: relative;
  background: var(--bg);
}

.clients-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: none;
}
.clients-title span {
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 600;
  display: block;
  letter-spacing: -0.02em;
  margin-top: -5px;
}

/* ─── Google Reviews 3-stack carousel ───────────────────────── */
.gr-section {
  padding: 80px 20px 60px;
  text-align: center;
  overflow: hidden;
}
.gr-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 600;
  margin-bottom: 56px;
  color: var(--white);
}

/* Stage holds the 3 cards with depth illusion */
.gr-stage {
  position: relative;
  height: 340px;
  max-width: 860px;
  margin: 0 auto 40px;
}

/* Base card */
.gr-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(360px, 86vw);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              opacity  0.7s cubic-bezier(0.4, 0, 0.2, 1),
              filter   0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}

/* La tarjeta central: cristal, resplandor y borde destacado.
   La posición/escala/opacidad de TODAS las tarjetas se calcula inline en el JSX. */
.gr-card.center {
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 0 0 48px rgba(var(--accent-rgb), 0.18),
              0 2px 40px rgba(0,0,0,0.4);
}

.gr-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gr-stars { display: flex; gap: 2px; }
.gr-card__google {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.gr-card__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  font-style: italic;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.gr-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.gr-card__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; color: white;
  flex-shrink: 0;
}
.gr-card__avatar--photo {
  object-fit: cover;
  background: none;
}
.gr-card__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--white);
}

/* Grab cursor while dragging */
.gr-stage:active { cursor: grabbing; }

/* Móvil */
@media (max-width: 600px) {
  .gr-stage { height: 320px; }
}

/* ─── Testimonials ───────────────────────────────────────────── */
.testimonials-section {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.testimonials-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 600;
  margin-bottom: 40px;
  text-align: center;
}
.testimonial-card {
  padding: 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testimonial-card__quote {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--gray);
  font-style: italic;
}
.testimonial-card__author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.testimonial-card__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 1.1rem; flex-shrink: 0;
}
.testimonial-card__name { font-weight: 600; font-size: 0.95rem; }
.testimonial-card__role { font-size: 0.8rem; color: var(--gray); }

.swiper { padding-bottom: 40px !important; }
.swiper-pagination-bullet { background: var(--gray) !important; }
.swiper-pagination-bullet-active { background: var(--blue) !important; }

/* ─── Brand cards (ex-Stats) ─────────────────────────────────── */
.brands-section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 420px; /* reserva el espacio de la card expandida — evita que la sección de abajo se mueva */
}

.brand-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 300px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25,0.8,0.25,1);
  display: flex;
  flex-direction: column;
}
@media (hover: hover) {
  .brand-card:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-5px);
  }
  .brand-card--blue:hover  { border-color: rgba(14,204,219,0.35); }
  .brand-card--red:hover   { border-color: rgba(255,109,109,0.35); }
  .brand-card--white:hover { border-color: rgba(255,255,255,0.2); }
}

/* Bottom accent line that expands on hover */
.brand-card__accent {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.brand-card--white .brand-card__accent { background: rgba(255,255,255,0.55); }
.brand-card--blue  .brand-card__accent { background: #0eccdb; }
.brand-card--red   .brand-card__accent { background: var(--red); }
@media (hover: hover) {
  .brand-card:hover .brand-card__accent { transform: scaleX(1); }
}
@media (max-width: 768px) {
  .brand-card.is-active .brand-card__accent { transform: scaleX(1); }
}

.brand-card__inner {
  padding: 40px 36px 48px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.brand-card__top { display: flex; flex-direction: column; gap: 10px; }

.brand-card__short {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
  opacity: 0.35;
}
@media (hover: hover) { .brand-card:hover .brand-card__short { opacity: 1; } }
.brand-card--blue .brand-card__short { color: #0eccdb; }
.brand-card--red  .brand-card__short { color: var(--red); }

.brand-card__name {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: pre-line;
  color: var(--white);
  text-transform: lowercase;
}
.brand-card__tagline {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.4;
  letter-spacing: 0.03em;
}
.brand-card__desc {
  font-size: 0.83rem;
  line-height: 1.6;
  opacity: 0.55;
  margin-bottom: 16px;
}

/* Reveal section — hidden by default, shown on hover.
   Se anima con grid-template-rows (0fr -> 1fr) en vez de max-height: asi se
   despliega exactamente hasta la altura que ocupe el contenido. Antes habia un
   max-height: 260px fijo y las tres tarjetas lo superaban (EVC 275, EVM 261,
   EVL 282), por lo que el ultimo servicio de la lista salia cortado. Con esto
   no hay numero magico que revisar si manana cambia un texto. */
.brand-card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  /* cierre: suave y lento */
  transition: grid-template-rows 0.65s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;
}
.brand-card__reveal-inner {
  overflow: hidden;
  min-height: 0;
}
@media (hover: hover) {
  .brand-card:hover .brand-card__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.42s cubic-bezier(0.25,0.8,0.25,1), opacity 0.3s ease 0.06s;
  }
}

.brand-card__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 24px 0 20px;
}
.brand-card__services {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.brand-card__services li {
  font-size: 0.88rem;
  font-weight: 500;
  opacity: 0.65;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-card__services li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.brand-card--white .brand-card__services li::before { background: rgba(255,255,255,0.5); }
.brand-card--blue  .brand-card__services li::before { background: #0eccdb; }
.brand-card--red   .brand-card__services li::before { background: var(--red); }

/* Mobile: single column, services always visible */
@media (max-width: 768px) {
  .brands-grid { grid-template-columns: 1fr; gap: 12px; }
  .brand-card { min-height: auto; transform: none !important; }
  /* En movil la lista va siempre abierta: a altura real, no a 260px fijos */
  .brand-card__reveal { grid-template-rows: 1fr !important; opacity: 1 !important; }
  .brand-card__inner { padding: 32px 28px 36px; }
}

/* Móvil: iluminación por scroll (clase añadida con JS) */
@media (max-width: 768px) {
  .brand-card {
    opacity: 0.45;
    transition: opacity 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .brand-card.is-active {
    opacity: 1;
  }
  .brand-card--white.is-active { box-shadow: 0 0 40px rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
  .brand-card--blue.is-active  { box-shadow: 0 0 40px rgba(14,204,219,0.15);  border-color: rgba(14,204,219,0.35); }
  .brand-card--red.is-active   { box-shadow: 0 0 40px rgba(255,109,109,0.15); border-color: rgba(255,109,109,0.35); }
}

/* ─── EVC description ────────────────────────────────────────── */
.evc-section {
  padding: 80px 20px;
  max-width: 900px;
  margin: 0 auto;
  margin-bottom: 8%;
  text-align: center;
}
.evc-section__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, var(--blue));
  margin-bottom: 20px;
}
.evc-section__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}
.evc-section__title em { font-style: italic; color: var(--accent, var(--blue)); }
.evc-section__desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray);
  max-width: 600px;
  margin: 0 auto 32px;
}
.evc-section__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--white);
  padding: 12px 28px;
  border-radius: 100px;
  transition: background 0.2s, color 0.2s;
}
.evc-section__link:hover { background: var(--white); color: var(--bg); }

/* ─── Contact modal (EVC) ────────────────────────────────────── */
.contact-modal__backdrop {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,3,18,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: fadeIn 0.22s ease forwards;
}
.contact-modal__backdrop.closing {
  animation: fadeOut 0.28s ease forwards;
}
.contact-modal__backdrop.closing .contact-modal__box {
  animation: slideDown 0.26s cubic-bezier(0.4,0,1,1) forwards;
}
@keyframes fadeIn    { from { opacity: 0 }                              to { opacity: 1 } }
@keyframes fadeOut   { from { opacity: 1 }                              to { opacity: 0 } }
@keyframes slideUp   { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }
@keyframes slideDown { from { opacity: 1; transform: translateY(0) }    to { opacity: 0; transform: translateY(20px) } }

.contact-modal__box {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 48px 44px 44px;
  width: 100%; max-width: 480px;
  animation: slideUp 0.28s cubic-bezier(0.25,0.8,0.25,1) forwards;
}

.contact-modal__close {
  position: absolute; top: 18px; right: 18px;
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
  padding: 4px;
}
.contact-modal__close:hover { color: var(--white); }

.contact-modal__eyebrow {
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent, var(--blue)); opacity: 0.8;
  margin-bottom: 8px;
}
.contact-modal__title {
  font-size: 1.6rem; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 28px;
}
.contact-modal__box--wide {
  max-width: 560px;
  align-self: flex-start;
  margin-top: max(12vh, 60px);
}

/* ─── Stage Calendar ─────────────────────────────────────────── */
.stage-cal { width: 100%; }

.stage-cal__nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.stage-cal__month {
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--white, #fff); text-transform: capitalize;
}
.stage-cal__nav-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.45);
  width: 28px; height: 28px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color 0.18s, background 0.18s;
}
.stage-cal__nav-btn:hover:not(:disabled) { color: #FF6D6D; background: rgba(255,109,109,0.1); }
.stage-cal__nav-btn:disabled { opacity: 0.2; cursor: default; }

/* Grid with bordered cells */
.stage-cal__grid-wrapper {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.stage-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
/* All cells get right + bottom interior borders */
.stage-cal__grid > * {
  border-right: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stage-cal__grid > *:nth-child(7n) { border-right: none; }

.stage-cal__weekday {
  text-align: center; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  padding: 9px 0;
  background: rgba(255,255,255,0.018);
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
.stage-cal__day {
  text-align: center; font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 40px; padding: 6px 2px;
  transition: background 0.15s;
}
.stage-cal__day--empty { background: transparent; }
.stage-cal__day-num { line-height: 1; }
.stage-cal__day.is-today .stage-cal__day-num {
  color: #FF6D6D; font-weight: 800;
}
.stage-cal__day.is-occupied {
  background: rgba(255,109,109,0.08);
  color: rgba(255,255,255,0.3);
}
.stage-cal__day-dot {
  display: block; width: 4px; height: 4px;
  background: rgba(255,109,109,0.6); border-radius: 50%;
}

.stage-cal__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.4rem; flex-wrap: wrap; gap: 0.5rem;
}
.stage-cal__legend {
  display: flex; gap: 1.2rem;
}
.stage-cal__legend-item {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; color: rgba(255,255,255,0.35);
}
.stage-cal__legend-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.stage-cal__legend-dot--free {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
}
.stage-cal__legend-dot--occupied { background: rgba(255,109,109,0.4); }

.stage-cal__status {
  font-size: 0.72rem; color: rgba(255,255,255,0.3);
}
.stage-cal__status--error { color: rgba(255,109,109,0.55); }

.stage-cal__reservar {
  width: 100%; display: block; text-align: center; box-sizing: border-box;
}

/* ─── Stage Booking Form back button ─────────────────────────── */
/* ─── Service Toggles (SonidoContactForm) ───────────────────── */
.service-toggles__label {
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 10px;
}
.service-toggles {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.service-toggle {
  flex: 1; min-width: 90px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: rgba(255,255,255,0.45);
  font-size: 0.88rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: all 0.18s;
}
.service-toggle:hover {
  border-color: rgba(var(--accent-rgb, 255,109,109), 0.3);
  color: rgba(255,255,255,0.75);
}
.service-toggle.is-active {
  background: rgba(var(--accent-rgb, 255,109,109), 0.1);
  border-color: rgba(var(--accent-rgb, 255,109,109), 0.45);
  color: var(--accent, #FF6D6D);
}
.service-toggle__check {
  width: 16px; height: 16px; flex-shrink: 0;
  border-radius: 4px; border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.service-toggle.is-active .service-toggle__check {
  background: var(--accent, #FF6D6D); border-color: var(--accent, #FF6D6D); color: #fff;
}

/* Smaller platform toggles */
.service-toggle--sm {
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 12px;
  font-size: 0.82rem;
}
.service-toggles--platforms {
  flex-wrap: wrap;
  gap: 6px;
}

/* ─── StreamingForm: chips & duration picker ─────────────────── */
.sform-label {
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 10px;
}
.sform-label--inline {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.sform-dur-preview {
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--accent, #0eccdb);
  background: rgba(var(--accent-rgb, 14,204,219), 0.12);
  padding: 2px 8px; border-radius: 20px;
}

/* Tipo-de-evento chips (3 cards) */
.sform-chips--tipo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.sform-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem; font-weight: 600;
  font-family: inherit; cursor: pointer; text-align: center;
  position: relative;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.sform-chip:hover {
  border-color: rgba(var(--accent-rgb, 14,204,219), 0.35);
  color: rgba(255,255,255,0.75);
}
.sform-chip.is-active {
  background: rgba(var(--accent-rgb, 14,204,219), 0.1);
  border-color: rgba(var(--accent-rgb, 14,204,219), 0.5);
  color: var(--accent, #0eccdb);
}
.sform-chip__icon { font-size: 1.4rem; line-height: 1; }
.sform-chip__text { line-height: 1.2; }
.sform-chip__check {
  position: absolute; top: 7px; right: 7px;
  opacity: 0.85;
}

/* Platform pills (5 small) */
.sform-chips--plat {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sform-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  color: rgba(255,255,255,0.45);
  font-size: 0.83rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.sform-pill:hover {
  border-color: rgba(var(--accent-rgb, 14,204,219), 0.35);
  color: rgba(255,255,255,0.75);
}
.sform-pill.is-active {
  background: rgba(var(--accent-rgb, 14,204,219), 0.1);
  border-color: rgba(var(--accent-rgb, 14,204,219), 0.5);
  color: var(--accent, #0eccdb);
}

/* Duration picker */
.sform-dur-field { grid-column: 1 / -1; }
.sform-dur { display: flex; gap: 8px; }
.sform-dur__col { flex: 1; }
.sform-dur__select {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--white);
  font-family: inherit; font-size: 0.95rem;
  outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;
  transition: border-color 0.2s, background 0.2s;
}
.sform-dur__select:focus {
  border-color: var(--accent, #0eccdb);
  background: rgba(255,255,255,0.09);
}
.sform-dur__select option { background: #0d1117; }
@media (max-width: 480px) {
  .sform-chips--tipo { grid-template-columns: 1fr 1fr; }
  .sform-chips--tipo .sform-chip:last-child { grid-column: 1 / -1; }
}

/* ─── File Upload Button ─────────────────────────────────────── */
.file-upload-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 10px;
  color: rgba(255,255,255,0.45);
  font-family: inherit; font-size: 0.88rem;
  cursor: pointer; text-align: left;
  transition: border-color 0.2s, color 0.2s;
}
.file-upload-btn:hover {
  border-color: rgba(var(--accent-rgb, 43,155,255), 0.45);
  color: rgba(255,255,255,0.75);
}
.file-upload-btn span { flex: 1; }
.file-upload-btn em { opacity: 0.5; font-style: normal; }
.file-upload-btn__remove {
  flex-shrink: 0; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.1);
  font-size: 0.7rem; color: rgba(255,255,255,0.6);
  transition: background 0.15s;
}
.file-upload-btn__remove:hover { background: rgba(255,80,80,0.3); color: #fff; }

/* ─── Stage Booking Form back button ─────────────────────────── */
.stage-booking__back {
  background: none; border: none; padding: 0;
  color: rgba(255,255,255,0.4); font-size: 0.78rem;
  cursor: pointer; margin-bottom: 1.2rem;
  transition: color 0.2s; display: block;
}
.stage-booking__back:hover { color: rgba(255,255,255,0.75); }

/* ─── Panel Form (ContactForm) ───────────────────────────────── */
.panel-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.panel-form__field {
  display: flex;
  flex-direction: column;
}

.panel-form__field--full {
  grid-column: 1 / -1;
}

/* ── Privacy checkbox (all forms) ── */
.privacy-check {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.45;
}
.privacy-check input[type="checkbox"] {
  flex-shrink: 0; margin-top: 2px;
  width: 16px; height: 16px; cursor: pointer;
  accent-color: var(--accent, #0eccdb);
}
.privacy-check__link { color: rgba(255,255,255,0.8); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); }
.privacy-check__link:hover { color: var(--accent, #0eccdb); text-decoration-color: currentColor; }

.panel-form input,
.panel-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--white);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.panel-form input::placeholder,
.panel-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.panel-form input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  color-scheme: dark;
  cursor: pointer;
}
.panel-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.35);
  cursor: pointer;
}
/* Hide browser empty-state text; placeholder is rendered by React span */
.panel-form input[type="date"].is-empty { color: transparent; }

.date-field-wrapper { position: relative; }
.date-field-placeholder {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.35); font-size: 0.95rem;
  pointer-events: none; z-index: 1;
}

.panel-form input:focus,
.panel-form textarea:focus {
  border-color: var(--blue);
  background: rgba(255, 255, 255, 0.09);
}

.panel-form textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.panel-form__submit {
  width: 100%;
  padding: 14px 24px;
  background: var(--accent, var(--blue));
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, opacity 0.2s;
}

.panel-form__submit:hover:not(:disabled) {
  background: color-mix(in srgb, rgb(var(--accent-rgb, 43 155 255)) 70%, white 30%);
  transform: translateY(-1px);
}

.panel-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.panel-form__error {
  grid-column: 1 / -1;
  color: var(--red);
  font-size: 0.85rem;
  margin: 0;
}

.panel-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
}

.panel-form__success p {
  font-size: 1.2rem;
  font-weight: 700;
  color: #4ade80;
  margin: 0;
}

.panel-form__success span {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 480px) {
  .panel-form {
    grid-template-columns: 1fr;
  }
  .panel-form__field--full {
    grid-column: 1;
  }
}

/* ─── Cookie Banner ──────────────────────────────────────────── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: rgba(0, 3, 18, 0.88);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,0.09);
  padding: 18px 5%;
  animation: cookie-slide-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cookie-banner--leaving {
  animation: cookie-slide-down 0.35s cubic-bezier(0.55, 0, 1, 0.45) both;
}
@keyframes cookie-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes cookie-slide-down {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}
.cookie-banner__inner {
  max-width: 1100px; margin: 0 auto;
}
.cookie-banner__top {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.cookie-banner__text { flex: 1; min-width: 200px; }
.cookie-banner__title {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--white); margin-bottom: 4px;
}
.cookie-banner__desc {
  font-size: 0.78rem; line-height: 1.55;
  color: rgba(255,255,255,0.45);
}
.cookie-banner__link {
  color: rgba(255,255,255,0.55);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(255,255,255,0.2);
  transition: color 0.2s;
}
.cookie-banner__link:hover { color: rgba(255,255,255,0.85); }
.cookie-banner__actions {
  display: flex; gap: 8px; flex-shrink: 0; align-items: center; flex-wrap: wrap;
}
.cookie-banner__btn {
  padding: 8px 18px; border-radius: 10px;
  font-family: inherit; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.cookie-banner__btn--ghost {
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.4);
}
.cookie-banner__btn--ghost:hover { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.25); }
.cookie-banner__btn--secondary {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
}
.cookie-banner__btn--secondary:hover { background: rgba(255,255,255,0.1); color: var(--white); }
.cookie-banner__btn--primary {
  background: var(--blue); border: 1px solid transparent; color: var(--white);
}
.cookie-banner__btn--primary:hover {
  background: color-mix(in srgb, var(--blue) 80%, white 20%);
  transform: translateY(-1px);
}

/* Panel expandible */
.cookie-banner__panel {
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 16px;
  animation: ck-panel-in 0.25s ease both;
}
@keyframes ck-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner__panel-inner {
  display: flex; flex-direction: column; gap: 4px;
}
.cookie-banner__panel-footer {
  display: flex; justify-content: flex-end;
  margin-top: 14px;
}

/* Filas de categoría */
.ck-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px 16px; border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.ck-row__info { flex: 1; }
.ck-row__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.83rem; font-weight: 700; color: rgba(255,255,255,0.8);
  margin-bottom: 3px;
}
.ck-row__badge {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06); padding: 2px 7px; border-radius: 20px;
}
.ck-row__desc {
  font-size: 0.75rem; color: rgba(255,255,255,0.35); line-height: 1.45;
}

/* Toggle switch */
.ck-toggle {
  position: relative; flex-shrink: 0;
  width: 42px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer; transition: background 0.2s, border-color 0.2s;
  padding: 0;
}
.ck-toggle.is-on {
  background: var(--blue); border-color: var(--blue);
}
.ck-toggle.is-disabled {
  opacity: 0.45; cursor: not-allowed;
  background: rgba(255,255,255,0.15);
}
.ck-toggle__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,0.55);
  transition: left 0.2s, background 0.2s;
  pointer-events: none;
}
.ck-toggle.is-on .ck-toggle__thumb {
  left: calc(42px - 16px - 4px);
  background: #fff;
}
.ck-toggle.is-disabled .ck-toggle__thumb { background: rgba(255,255,255,0.4); }

@media (max-width: 680px) {
  .cookie-banner__top { flex-direction: column; align-items: stretch; }
  .cookie-banner__actions { justify-content: flex-end; }
  .ck-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ─── Cookies page ───────────────────────────────────────────── */
.cookies-page {
  max-width: 780px; margin: 0 auto;
  padding: 140px 5% 120px;
}
.cookies-page__header { margin-bottom: 60px; }
.cookies-page__eyebrow {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-bottom: 14px;
}
.cookies-page__title {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  line-height: 1.1; color: var(--white); margin-bottom: 14px;
}
.cookies-page__meta {
  font-size: 0.8rem; color: rgba(255,255,255,0.3);
}
.cookies-section {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cookies-section:last-of-type { border-bottom: none; }
.cookies-section__title {
  font-size: 1.15rem; font-weight: 800; color: var(--white);
  margin-bottom: 16px;
}
.cookies-subsection {
  font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.65);
  margin: 24px 0 10px;
}
.cookies-page p {
  font-size: 0.93rem; line-height: 1.75;
  color: rgba(255,255,255,0.55); margin-bottom: 12px;
}
.cookies-page a {
  color: rgba(255,255,255,0.75); text-decoration: underline;
  text-underline-offset: 2px; transition: color 0.2s;
}
.cookies-page a:hover { color: var(--white); }

/* ─── Mapa del sitio ──────────────────────────────────────────── */
.sitemap-page {
  max-width: 1100px; margin: 0 auto;
  padding: 140px 5% 120px;
}
.sitemap-page__header { margin-bottom: 56px; }
.sitemap-page__eyebrow {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-bottom: 14px;
}
.sitemap-page__title {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  line-height: 1.1; color: var(--white); margin-bottom: 14px;
}
.sitemap-page__meta {
  font-size: 0.85rem; color: rgba(255,255,255,0.4);
}
.sitemap-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 40px 24px;
}
.sitemap-col__title {
  font-size: 0.95rem; font-weight: 800; color: var(--white);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sitemap-col__title a {
  color: inherit; text-decoration: none; transition: color 0.2s;
}
.sitemap-col__title a:hover { color: var(--blue); }
.sitemap-col__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.sitemap-col__list a {
  font-size: 0.86rem; color: rgba(255,255,255,0.55);
  text-decoration: none; transition: color 0.2s;
}
.sitemap-col__list a:hover { color: var(--white); }

.cookies-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.84rem; margin: 12px 0 20px;
}
.cookies-table th {
  text-align: left; padding: 10px 14px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cookies-table td {
  padding: 10px 14px; vertical-align: top;
  color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cookies-table td:first-child { color: rgba(255,255,255,0.75); font-weight: 600; }
.cookies-table--full { width: 100%; }
.cookies-table code {
  background: rgba(255,255,255,0.06); padding: 2px 6px;
  border-radius: 4px; font-size: 0.82em; color: #0eccdb;
}
.cookies-list {
  padding-left: 1.4rem; margin: 10px 0 16px;
  color: rgba(255,255,255,0.55); font-size: 0.93rem; line-height: 1.9;
}
.cookies-reset {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 20px 24px;
  margin: 16px 0;
}
.cookies-reset p { margin-bottom: 12px; }
.cookies-reset__btn {
  padding: 10px 22px; border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--white); font-family: inherit;
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: background 0.2s;
}
.cookies-reset__btn:hover { background: rgba(255,255,255,0.14); }
.cookies-footer-note {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.25) !important;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Cookies page: consent section ── */
.cookies-consent {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 24px 28px;
  margin-bottom: 40px;
  display: flex; flex-direction: column; gap: 14px;
}
.cookies-consent__eyebrow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(14,204,219,0.8); margin: 0;
}
.cookies-consent__desc { font-size: 0.9rem; color: rgba(255,255,255,0.65); margin: 0; line-height: 1.6; }
.cookies-consent__saved { font-size: 0.85rem; color: #4ade80; margin: 0; }
.cookies-consent__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies-consent__panel {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 14px; display: flex; flex-direction: column; gap: 0;
}
.cookies-consent__panel-footer { padding: 12px 0 4px; }
.cookies-doc-title {
  font-size: 1.4rem; font-weight: 700; color: var(--white);
  margin: 52px 0 0; padding-top: 44px;
  border-top: 1px solid rgba(255,255,255,0.1);
  letter-spacing: -0.01em;
}
@media (max-width: 600px) {
  .cookies-consent { padding: 18px 16px; }
  .cookies-consent__btns { flex-direction: column; }
  .cookies-consent__btns .cookie-banner__btn { width: 100%; text-align: center; justify-content: center; }
  .cookies-doc-title { font-size: 1.2rem; margin-top: 40px; padding-top: 36px; }
}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer-wrapper {
  position: relative;
  width: 100%;
  padding: 100px 5%;
  box-sizing: border-box;
  color: var(--white);
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: var(--bg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
}

/* Breathing radial gradient background */
.footer-breathing {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse 100% 80% at 50% 0%, rgba(var(--accent-rgb), 0.4), transparent 70%);
  opacity: 0.6;
  animation: evc-breathe 5s ease-in-out infinite alternate;
  z-index: 1;
  transform-origin: top center;
  will-change: opacity, transform;
  pointer-events: none;
}

/* Giant "el viento crea" text */
.footer-huge {
  position: absolute;
  bottom: -4%;
  left: -1.5%;
  font-size: clamp(65px, 11vw, 200px);
  font-weight: 600;
  letter-spacing: -3px;
  color: rgba(255, 255, 255, 0.15);
  line-height: 0.8;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}

/* BlurText container inside footer-huge */
.footer-huge p {
  display: flex !important;
  flex-wrap: wrap;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.footer-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

.footer-decoration {
  position: absolute;
  right: -150px;
  bottom: -200px;
  width: 650px;
  height: auto;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}
.footer-decoration img { width: 100%; display: block; }

.footer-main {
  position: relative;
  z-index: 5;
  background: rgba(23, 23, 35, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  padding: 60px 80px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer-city {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.5px;
}
.footer-group { display: flex; flex-direction: column; gap: 8px; }
.footer-label {
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer-text { font-size: 1.05rem; color: #e2e2e2; line-height: 1.5; font-weight: 400; }
.footer-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s, transform 0.25s, opacity 0.25s;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 400;
  opacity: 0.8;
  margin-top: 4px;
  transition: opacity 0.2s;
}
.footer-map-link:hover { opacity: 1; color: var(--accent); transform: translateY(-2px); }
.footer-socials { display: flex; flex-direction: row; gap: 20px; align-items: center; }
.footer-socials a {
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  transition: color 0.25s, transform 0.25s;
}
.footer-socials a:hover { color: var(--white); transform: translateY(-3px); }

@media (max-width: 768px) {
  .footer-wrapper { padding: 80px 20px 40px; justify-content: center; min-height: auto; }
  .footer-main { padding: 40px 25px; max-width: 100%; text-align: center; align-items: center; gap: 25px; }
  .footer-city { font-size: 1.6rem; }
  .footer-huge { bottom: -2% !important; left: -2% !important; font-size: 70px !important; }
  .footer-huge p span { opacity: 1 !important; transform: none !important; }
  /* Molino sale por la esquina inferior derecha */
  .footer-decoration {
    width: 320px;
    right: -90px;
    bottom: -100px;
    left: auto;
    top: auto;
    opacity: 0.55;
  }
  .footer-socials { justify-content: center; gap: 25px; }
  .footer-socials a:hover { transform: translateY(-3px); }
  .footer-map-link { justify-content: center; }
}

@media (max-width: 380px) {
  .footer-wrapper { padding: 60px 14px 28px; }
  .footer-main { padding: 32px 18px; gap: 20px; border-radius: 22px; }
  .footer-city { font-size: 1.35rem; }
  .footer-huge { font-size: 46px !important; bottom: -1% !important; }
  .footer-decoration { width: 190px; right: -65px; bottom: -70px; opacity: 0.4; }
}

/* ─── Podcast Hero ───────────────────────────────────────────── */
.podcast-hero {
  position: relative;
  width: 100%;
  min-height: 85vh;
  padding: 80px 5%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.podcast-hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  will-change: opacity;
}
.podcast-hero__overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(59,80,234,0.12) 0%, rgba(0,3,18,0.65) 70%);
  z-index: 1;
}
.podcast-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}
.podcast-hero__rotating {
  position: relative;
  width: 190px; height: 190px;
  margin: 0 auto 36px;
}
.podcast-hero__rotating-svg {
  position: absolute;
  inset: 0;
  animation: rotate-text 12s linear infinite;
}
.podcast-hero__title {
  font-size: clamp(2.7rem, 7.5vw, 6.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
}
.podcast-hero__tagline {
  display: block;
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 0px;
}
.podcast-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1rem);
  color: var(--gray);
  margin-top: 20px;
  font-weight: 300;
}
.podcast-hero__arrow {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  animation: arrow-bounce 1.5s ease-in-out infinite;
  cursor: pointer;
}

/* ─── Bloques de texto intercalados (Podcast) ────────────────── */
.podcast-text-section {
  max-width: 1100px;
  margin: 180px auto 110px;
  padding: 0 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.podcast-text-section__lead {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
}
.podcast-text-section__body {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.25;
  color: var(--gray);
}
.podcast-text-section__body strong {
  color: var(--white);
  font-weight: 700;
}
.podcast-text-section--closing {
  max-width: 1300px;
}
.podcast-text-section--closing .podcast-text-section__lead {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

/* ─── Multi-step form (Podcast) ──────────────────────────────── */
.form-section {
  padding: 80px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.form-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}
.form-section__sub { text-align: center; color: var(--gray); margin-bottom: 48px; }

/* Progress */
.form-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 40px;
}
.progress-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 1rem;
  transition: all 0.4s ease;
  flex-shrink: 0;
  position: relative;
}
.progress-dot.active { background: rgba(255,255,255,0.9); color: #000; border-color: white; box-shadow: 0 0 15px rgba(255,255,255,0.4); transform: scale(1.1); }
.progress-dot.done { background: rgba(59,80,234,0.4); border-color: var(--blue); }
.progress-line {
  width: 50px; height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  transition: all 0.4s ease;
  flex-shrink: 0;
}
.progress-line.done { background: rgba(255,255,255,0.8); box-shadow: 0 0 10px rgba(255,255,255,0.4); }

/* Step */
.form-step { animation: fade-up 0.4s ease forwards; }
.form-step__title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 28px;
  text-align: center;
}

/* Package cards */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.package-card {
  padding: 30px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.15);
  border-top: 1px solid rgba(255,255,255,0.45);
  cursor: pointer;
  text-align: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter: blur(10px);
  transition: transform 0.35s ease, border-color 0.25s, box-shadow 0.35s;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; gap: 8px;
}
.package-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.5); box-shadow: 0 15px 40px rgba(0,0,0,0.4); }
.package-card.selected { border-color: rgba(255,255,255,1); background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08)); box-shadow: 0 15px 30px rgba(0,0,0,0.4), 0 0 20px rgba(255,255,255,0.3); }
.package-card__name { font-weight: 600; font-size: 1.1rem; }
.package-card__price { font-size: 2rem; font-weight: 600; color: #00aaff; }
.package-card__desc { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 8px; line-height: 1.5; }

@media (max-width: 600px) { .package-grid { grid-template-columns: 1fr; } }

/* Type buttons */
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.type-btn {
  padding: 36px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  font-size: 1.1rem; font-weight: 600;
  color: var(--white);
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter: blur(10px);
  text-align: center;
  transition: border-color 0.25s, background 0.25s, transform 0.3s;
}
.type-btn:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.5); }
.type-btn.selected { border-color: rgba(255,255,255,1); background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08)); }

/* Extras */
.extras-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.extra-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.extra-item__info h4 { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.extra-item__info p { font-size: 0.85rem; color: #00aaff; font-weight: 400; }
.counter-widget {
  display: flex; align-items: center; gap: 14px;
  background: rgba(0,0,0,0.3);
  padding: 8px 14px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.1);
  min-width: 110px;
  height: 44px;
}
.counter-widget button {
  color: var(--white); font-size: 1.4rem; line-height: 1;
  padding: 0 4px; transition: color 0.2s;
}
.counter-widget button:hover { color: #00aaff; }
.counter-widget__val {
  font-size: 1.15rem; font-weight: 600;
  min-width: 22px; text-align: center;
}

/* Post/episodes */
.postpro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.postpro-btn {
  padding: 28px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  font-size: 1rem; font-weight: 600;
  color: var(--white);
  background: rgba(255,255,255,0.05);
  text-align: center;
  transition: border-color 0.25s, background 0.25s;
  font-family: var(--font);
}
.postpro-btn.selected { border-color: rgba(255,255,255,1); background: rgba(255,255,255,0.15); }
.postpro-btn__sub { font-size: 0.8rem; color: #00aaff; margin-top: 6px; }

/* Contact fields */
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.78rem; font-weight: 600; color: var(--gray); letter-spacing: 0.07em; text-transform: uppercase; }
.field input, .field textarea, .field select {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  resize: vertical;
  backdrop-filter: blur(8px);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,0.5); font-weight: 400; }
.field input:focus, .field textarea:focus { border-color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.12); box-shadow: 0 0 15px rgba(255,255,255,0.15); }
.field textarea { min-height: 100px; }

/* Price display */
.price-display {
  padding: 24px;
  border-radius: var(--radius);
  background: rgba(59,80,234,0.1);
  border: 1px solid rgba(59,80,234,0.3);
  text-align: center;
  margin-bottom: 24px;
}
.price-display__label { font-size: 0.8rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.1em; }
.price-display__value { font-size: 3rem; font-weight: 600; color: #00aaff; }

/* Form nav */
.form-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}
.btn-primary {
  padding: 14px 32px;
  background: var(--white);
  color: #000;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  font-family: var(--font);
}
.btn-primary:hover { background: #e0e0e0; transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255,255,255,0.3); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-secondary {
  padding: 12px 24px;
  background: transparent;
  color: rgba(255,255,255,0.6);
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.25);
  font-family: var(--font);
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn-secondary:hover { color: var(--white); border-color: rgba(255,255,255,0.7); transform: translateX(-3px); }

@media (max-width: 768px) {
  .contact-fields { grid-template-columns: 1fr; }
}

/* ─── Podcast studios ────────────────────────────────────────── */
.podcast-studios {
  padding: 110px 0 0;
  position: relative;
  z-index: 2;
}
.podcast-studios__header {
  text-align: center;
  padding: 0 20px;
  max-width: 900px;
  margin: 0 auto 56px;
}
.podcast-studios h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  margin-bottom: 10px;
}
.podcast-studios__sub { color: var(--gray); }

/* ── Fila Espacio → Set ───────────────────────────────────────── */
.studios-duo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.studios-duo__item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.studios-duo__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.studios-duo__item:hover img { transform: scale(1.04); }

/* Variante sin recorte */
.studios-duo__item--full {
  aspect-ratio: unset;
}
.studios-duo__item--full img {
  height: auto;
  object-fit: contain;
}

/* Etiqueta flotante */
.studios-duo__label {
  position: absolute;
  bottom: 14px; left: 14px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  background: rgba(0,3,18,0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Flecha horizontal → */
.studios-h-arrow {
  display: flex;
  align-items: center;
  padding: 0 16px;
  flex-shrink: 0;
  width: 100px;
}
.studios-h-arrow svg {
  width: 100%;
  height: 20px;
  display: block;
  overflow: visible;
}
.studios-h-arrow__line {
  width: 44px; height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.08), rgba(255,255,255,0.25));
}
.studios-h-arrow__head {
  width: 6px; height: 6px;
  border-top: 1px solid rgba(255,255,255,0.3);
  border-right: 1px solid rgba(255,255,255,0.3);
  transform: rotate(45deg);
  margin-left: -4px;
  flex-shrink: 0;
}

/* Columna derecha: set + flecha vertical */
.studios-set-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Flecha vertical ↓ */
.studios-v-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0 2px;
}
.studios-v-arrow__line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0.07));
}
.studios-v-arrow__head {
  width: 6px; height: 6px;
  border-right: 1px solid rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.28);
  transform: rotate(45deg);
  margin-top: -4px;
}

/* ── Flecha diagonal Set → Carrusel ─────────────────────────── */
.studios-diag-arrow {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: block;
  line-height: 0;
}
.studios-diag-arrow svg {
  width: 100%;
  height: 100px;
  display: block;
  overflow: visible;
}

/* ── Carrusel coverflow ───────────────────────────────────────── */
.studio-coverflow {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px 64px;
  user-select: none;
  overflow: hidden;
}

/* Stage: mismo tamaño que la imagen central, centrado */
.studio-coverflow__stage {
  position: relative;
  width: 70%;
  left: 15%;           /* (100% - 70%) / 2 = 15%  → centra el stage */
  aspect-ratio: 16/9;
}

/* Todos los items se apilan dentro del stage */
.studio-coverflow__item {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  transform-origin: center;
  will-change: transform;
  /* Transición CSS en todos los items — funciona porque la key es estable */
  transition:
    transform 0.48s cubic-bezier(0.25, 0.8, 0.25, 1),
    filter    0.48s ease,
    opacity   0.35s ease;
}
.studio-coverflow__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.studio-coverflow__item.is-side {
  filter: blur(4px) brightness(0.42);
}
@media (max-width: 768px) {
  .studio-coverflow__item.is-side {
    filter: blur(1.5px) brightness(0.65);
  }
}

/* Fades que recortan los bordes con limpieza */
.studio-coverflow__edge {
  position: absolute;
  top: 0;
  bottom: 64px;
  width: 22%;
  pointer-events: none;
  z-index: 4;
}
.studio-coverflow__edge--l { left:  0; background: linear-gradient(to right, var(--bg) 35%, transparent); }
.studio-coverflow__edge--r { right: 0; background: linear-gradient(to left,  var(--bg) 35%, transparent); }
@media (max-width: 768px) {
  .studio-coverflow__edge--l { background: linear-gradient(to right, var(--bg) 8%, transparent); }
  .studio-coverflow__edge--r { background: linear-gradient(to left,  var(--bg) 8%, transparent); }
}

/* Puntos de paginación */
.studio-coverflow__dots {
  display: none;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .studio-coverflow__dots { display: flex; }
}
.studio-coverflow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, transform 0.3s ease;
  padding: 0;
}
.studio-coverflow__dot.is-active {
  background: var(--accent, rgba(255,255,255,0.9));
  transform: scale(1.4);
}

/* Botones */
.studio-coverflow__btn {
  position: absolute;
  top: calc(50% - 32px);
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.13);
  background: rgba(0,3,18,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s, color 0.2s;
}
.studio-coverflow__btn:hover  { background: rgba(255,255,255,0.1); color: var(--white); }
.studio-coverflow__btn--prev  { left:  20px; }
.studio-coverflow__btn--next  { right: 20px; }

/* Contador */
.studio-coverflow__counter {
  position: absolute;
  bottom: 18px;
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em;
  margin: 0;
  white-space: nowrap;
}
.studio-coverflow__counter span {
  display: block;
  width: 20px; height: 1px;
  background: rgba(255,255,255,0.15);
}

@media (max-width: 768px) {
  /* Columna vertical: Espacio → flecha → Set */
  .studios-duo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 16px;
  }
  .studios-duo__item--full { width: 100%; }
  .studios-set-col { width: 100%; }
  .studios-set-col .studios-duo__item { width: 80%; margin: 0 auto; }

  /* Ambas flechas: ocultar SVG, mostrar flecha vertical idéntica */
  .studios-h-arrow,
  .studios-diag-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 16px 0;
  }
  .studios-h-arrow svg,
  .studios-diag-arrow svg { display: none; }

  .studios-h-arrow::before,
  .studios-diag-arrow::before {
    content: '';
    display: block;
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.25));
  }
  .studios-h-arrow::after,
  .studios-diag-arrow::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1px solid rgba(255,255,255,0.28);
    border-bottom: 1px solid rgba(255,255,255,0.28);
    transform: rotate(45deg);
    margin-top: -3px;
  }

  /* Carrusel más ancho en móvil */
  .studio-coverflow__stage {
    width: 80%;
    left: 10%;
  }
}

/* ─── Video bg section ───────────────────────────────────────── */
/* Variante emerge: el vídeo sube por detrás del fade de la galería */
.video-bg-section--emerge {
  margin-top: -100px;
  z-index: 1;
}
.video-bg-section--emerge .video-bg-section__overlay {
  background: linear-gradient(to bottom, #000312 0%, #000312 10%, transparent 30%, transparent 78%, #000312 100%);
}
.video-bg-section {
  margin-top: 5%;
  margin-bottom: 8%;
  position: relative;
  overflow: hidden;
  max-height: 85vh;
}
.video-bg-section__vid {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  /* Fuerza al vídeo a una capa de composición normal (en vez de un overlay
     de hardware) para que el backdrop-filter del header pueda leerlo y desenfocarlo */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.video-bg-section__vid--mobile { display: none; }
@media (max-width: 768px) {
  .video-bg-section__vid--desktop { display: none; }
  .video-bg-section__vid--mobile  { display: block; }
}
.video-bg-section__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #000312 0%, transparent 18%, transparent 82%, #000312 100%);
}
.video-bg-section__content {
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 2; text-align: center; padding: 16vh 20px 0;
}
@media (max-width: 768px) {
  .video-bg-section {
    max-height: 90vh;
  }
  .video-bg-section__content {
    padding: 10vh 20px 0;
  }
}
.video-bg-section__quote {
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 600;
  font-style: italic;
  max-width: 800px;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0,3,18,0.8);
}
.video-bg-section__quote--plain { font-style: normal; }

/* ─── Brand pages (Media / Live) ────────────────────────────── */

/* Hero compartido */
.brand-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.brand-hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.brand-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,3,18,0.35) 0%, rgba(0,3,18,0.55) 100%);
}
.brand-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 0 20px;
}
.brand-hero__rotating {
  position: relative;
  width: 190px; height: 190px;
}
.brand-hero__rotating-svg {
  position: absolute; inset: 0;
  animation: rotate-text 18s linear infinite;
}
.brand-hero__title {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.brand-hero__title em {
  display: block;
  font-style: normal;
}
.brand-hero__title--evm em { color: #0eccdb; }
.brand-hero__title--evl em { color: #FF6D6D; }
.brand-hero__subtitle {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}

/* Servicios */
.brand-services {
  padding: 100px 60px 80px;
  max-width: 1600px;
  margin: 0 auto;
}
.brand-services__header {
  text-align: center;
  margin-bottom: 60px;
}
.brand-services__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.brand-services__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}
.brand-services__title em {
  font-style: normal;
  color: var(--accent);
}
.brand-services__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
  justify-content: center;
  gap: 24px;
}
.brand-service-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s, background 0.3s, transform 0.3s, opacity 0.4s;
}
@media (hover: hover) and (pointer: fine) {
  .brand-service-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.05);
    transform: translateY(-4px);
  }
}

/* Variante enlace — tarjetas de las páginas hub de categoría */
.brand-service-card--link {
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
  padding-right: 48px;
}
.brand-service-card__arrow {
  position: absolute;
  top: 22px; right: 18px;
  display: flex;
  color: var(--accent, #0eccdb);
  opacity: 0.4;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .brand-service-card--link:hover .brand-service-card__arrow {
    opacity: 1;
    transform: translateX(3px);
  }
}
.brand-service-card--link.is-active .brand-service-card__arrow { opacity: 1; }
/* Móvil: efecto lupa + glare — solo la del centro crece, las demás se reducen */
@media (max-width: 768px) {
  .brand-service-card {
    opacity: 0.35;
    transform: scale(0.92);
    position: relative;
    overflow: hidden;
  }
  .brand-service-card.is-active {
    opacity: 1;
    transform: scale(1.04);
    border-color: rgba(var(--accent-rgb), 0.4);
    background: rgba(var(--accent-rgb), 0.07);
    box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.18);
  }
  /* Glare sweep al activarse — franja diagonal que se desliza con transform */
  .brand-service-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 45%;
    height: 200%;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(var(--accent-rgb), 0.18) 50%,
      transparent 100%
    );
    transform: skewX(-15deg) translateX(-200%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
  }
  .brand-service-card.is-active::before {
    animation: card-glare-mob 0.8s ease forwards;
  }
  @keyframes card-glare-mob {
    0%   { transform: skewX(-15deg) translateX(-200%); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: skewX(-15deg) translateX(500%);  opacity: 0; }
  }

  /* Ocultar gafas VR en móvil */
  .vr-section__bg { display: none; }
}
.brand-service-card__icon { font-size: 1.6rem; }
.brand-service-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
}
.brand-service-card__desc {
  font-size: 0.82rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
}

/* ─── Landing fan (panel interactivo de los hubs de categoría) ─── */
.landing-fan-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 60px 40px;
}
.landing-fan {
  display: flex;
  gap: 14px;
  height: 640px;
}
.landing-fan__panel {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-fan__panel.is-active { flex-grow: 5; }

.landing-fan__toggle {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none; background: none; padding: 0;
  cursor: pointer;
  display: block;
  font-family: inherit;
}

.landing-fan__media { position: absolute; inset: 0; }
.landing-fan__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.landing-fan__panel.is-active .landing-fan__img { transform: scale(1.04); }
.landing-fan__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #080c1a 0%, #0e1428 100%);
}
.landing-fan__ph-icon { font-size: 4rem; opacity: 0.18; user-select: none; }
.landing-fan__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,7,14,0.95) 0%, rgba(5,7,14,0.5) 30%, rgba(5,7,14,0) 65%);
  transition: background 0.4s ease;
}
.landing-fan__panel.is-active .landing-fan__scrim {
  background: linear-gradient(to top, rgba(5,7,14,0.97) 0%, rgba(5,7,14,0.75) 45%, rgba(5,7,14,0.1) 80%, rgba(5,7,14,0) 100%);
}

.landing-fan__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  color: var(--white);
  transition: opacity 0.3s ease;
}
.landing-fan__label-icon { font-size: 2.2rem; }
.landing-fan__label-text { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; }
.landing-fan__panel.is-active .landing-fan__label { opacity: 0; pointer-events: none; }

.landing-fan__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 44px;
  max-width: 560px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s ease;
}
.landing-fan__panel.is-active .landing-fan__content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.landing-fan__eyebrow {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.landing-fan__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--white);
}
.landing-fan__desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin-bottom: 18px;
}
.landing-fan__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  padding: 0;
}
.landing-fan__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.landing-fan__list li span { font-size: 1rem; }
.landing-fan__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  transition: gap 0.25s ease, opacity 0.2s ease;
}
.landing-fan__cta:hover { gap: 13px; opacity: 0.85; }

@media (max-width: 860px) {
  .landing-fan-section { padding: 70px 20px 20px; }
  .landing-fan { flex-direction: column; height: auto; gap: 16px; }
  .landing-fan__panel {
    flex: 0 0 auto;
    height: 220px;
    transition: height 0.5s ease;
  }
  .landing-fan__panel.is-active { height: 580px; }
  .landing-fan__label { padding: 16px; }
  .landing-fan__label-icon { font-size: 1.8rem; }
  .landing-fan__content { padding: 24px; max-width: none; }
}

/* ─── Media showcase (categorías grandes con vídeo + desplegable) ─── */
.media-showcase-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 60px 40px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.media-showcase {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
}
.media-showcase__media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.media-showcase__bg {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.media-showcase__placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #080c1a 0%, #0e1428 100%);
  position: relative;
}
.media-showcase__placeholder::before {
  content: '';
  position: absolute; inset: 0;
  border: 1.5px dashed rgba(255,255,255,0.1);
  pointer-events: none;
}
.media-showcase__ph-icon { font-size: 4.4rem; opacity: 0.18; user-select: none; }
.media-showcase__ph-badge {
  position: absolute; top: 20px; right: 20px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  padding: 5px 12px; border-radius: 20px;
}
.media-showcase__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,7,14,0.94) 0%, rgba(5,7,14,0.35) 55%, rgba(5,7,14,0) 100%);
  pointer-events: none;
}
.media-showcase__header {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 44px;
}
.media-showcase__number {
  position: absolute; top: -8px; right: 36px;
  font-size: 4rem; font-weight: 800;
  color: rgba(255,255,255,0.08);
  line-height: 1;
}
.media-showcase__eyebrow {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.media-showcase__title {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 10px;
}
.media-showcase__title em { font-style: normal; color: var(--accent); display: block; }
.media-showcase__sub {
  max-width: 540px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}

.media-showcase__panel { background: rgba(255,255,255,0.015); }
.media-showcase__panel.is-open { background: rgba(255,255,255,0.03); }
.media-showcase__toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 44px;
  background: none; border: none; cursor: pointer;
  color: var(--white);
  font-family: inherit;
}
.media-showcase__toggle-label { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; }
.media-showcase__toggle-label em { font-style: normal; color: rgba(255,255,255,0.45); font-weight: 500; }
.media-showcase__toggle-icon {
  display: flex; color: var(--accent);
  transition: transform 0.3s ease;
}
.media-showcase__panel.is-open .media-showcase__toggle-icon { transform: rotate(180deg); }

.media-showcase__collapse {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s ease;
}
.media-showcase__panel.is-open .media-showcase__collapse { grid-template-rows: 1fr; }
.media-showcase__items {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.06);
}
.media-showcase__item {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 44px;
  background: #0a0d18;
  text-decoration: none; color: var(--white);
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.media-showcase__item:hover {
  background: rgba(var(--accent-rgb), 0.08);
  padding-left: 50px;
}
.media-showcase__item-icon { font-size: 1.3rem; }
.media-showcase__item-label { flex: 1; font-size: 0.92rem; font-weight: 600; }
.media-showcase__item-arrow { display: flex; color: var(--accent); opacity: 0.6; }
.media-showcase__item:hover .media-showcase__item-arrow { opacity: 1; }
.media-showcase__item--all { background: rgba(var(--accent-rgb), 0.05); }
.media-showcase__item--all .media-showcase__item-label { color: var(--accent); font-weight: 700; }

@media (max-width: 860px) {
  .media-showcase-section { padding: 70px 20px 20px; gap: 36px; }
  .media-showcase__media { aspect-ratio: 4 / 5; }
  .media-showcase__header { padding: 28px 24px; }
  .media-showcase__number { display: none; }
  .media-showcase__toggle { padding: 18px 24px; }
  .media-showcase__item { padding: 16px 24px; }
  .media-showcase__item:hover { padding-left: 28px; }
}

/* ─── Postproducción (fondo desenfocado tipo software de edición) ─── */
.postpro-section {
  position: relative;
  overflow: hidden;
  padding: 110px 60px;
  background: var(--bg);
}
.postpro-section__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 45% at 18% 22%, rgba(14,204,219,0.55) 0%, rgba(14,204,219,0) 70%),
    radial-gradient(34% 40% at 82% 18%, rgba(255,109,109,0.4) 0%, rgba(255,109,109,0) 70%),
    radial-gradient(45% 55% at 70% 80%, rgba(120,90,255,0.4) 0%, rgba(120,90,255,0) 70%),
    radial-gradient(40% 50% at 15% 85%, rgba(14,204,219,0.3) 0%, rgba(14,204,219,0) 70%),
    #080c1a;
  filter: blur(4px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}
.postpro-section__bg-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0.85;
}
.postpro-section__bg-badge {
  position: absolute; top: 28px; right: 28px; z-index: 1;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.3);
  padding: 5px 12px; border-radius: 20px;
}
.postpro-section__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,14,0.45) 0%, rgba(5,7,14,0.62) 55%, rgba(5,7,14,0.88) 100%);
}
.postpro-section__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.postpro-section__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.postpro-section__eyebrow {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.postpro-section__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.1;
  margin-bottom: 18px;
}
.postpro-section__title em { font-style: normal; color: var(--accent); }
.postpro-section__desc {
  font-size: 1rem; line-height: 1.7;
  color: rgba(255,255,255,0.7);
}
.postpro-section__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}
.postpro-section__item {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
}
.postpro-section__item-icon { font-size: 1.7rem; line-height: 1; }
.postpro-section__item-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 6px;
}
.postpro-section__item-desc {
  font-size: 0.86rem; line-height: 1.6;
  color: rgba(255,255,255,0.62);
}

@media (max-width: 860px) {
  .postpro-section { padding: 70px 20px; }
  .postpro-section__header { margin-bottom: 36px; }
  .postpro-section__list { grid-template-columns: 1fr; gap: 16px; }
  .postpro-section__item { padding: 18px; }
}

/* ─── GlareHover ─────────────────────────────────────────────── */
.glare-hover {
  width: var(--gh-width);
  height: var(--gh-height);
  background: var(--gh-bg);
  border-radius: var(--gh-br);
  border: 1px solid var(--gh-border);
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}
.vr-section__glare {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100% !important;
  height: 100% !important;
}
.glare-hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    var(--gh-angle),
    hsla(0, 0%, 0%, 0) 60%,
    var(--gh-rgba) 70%,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 0) 100%
  );
  transition: var(--gh-duration) ease;
  background-size: var(--gh-size) var(--gh-size), 100% 100%;
  background-repeat: no-repeat;
  background-position: -100% -100%, 0 0;
  pointer-events: none;
  z-index: 2;
}
.glare-hover:hover::before {
  background-position: 200% 200%, 0 0;
}
.glare-hover--play-once::before { transition: none; }
.glare-hover--play-once:hover::before {
  transition: var(--gh-duration) ease;
  background-position: 200% 200%, 0 0;
}

/* ─── Timelapse dual panel ───────────────────────────────────── */
.timelapse-section {
  max-width: 1200px; margin: 0 auto;
  padding: 80px 5%;
}
.timelapse-section__header {
  text-align: center; margin-bottom: 40px;
}
.timelapse-section__eyebrow {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent, #0eccdb);
  margin-bottom: 14px;
}
.timelapse-section__title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800; line-height: 1.2; color: var(--white);
}
.timelapse-section__title em {
  color: var(--accent, #0eccdb); font-style: normal;
}

.timelapse-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Línea divisoria con glow */
.timelapse-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(var(--accent-rgb, 14,204,219), 0.6) 50%,
    transparent 100%);
  box-shadow: 0 0 16px rgba(var(--accent-rgb, 14,204,219), 0.5);
  pointer-events: none;
  z-index: 3;
}

.timelapse-panel {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.timelapse-panel__expand {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(0,3,18,0.5);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.5);
  opacity: 0;
  transition: opacity 0.2s;
}
.timelapse-panel:hover .timelapse-panel__expand { opacity: 1; }
.timelapse-panel.is-dimmed { filter: brightness(0.55) saturate(0.7); opacity: 0.85; }
.timelapse-panel.is-active { filter: brightness(1.08); }

.timelapse-panel__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.timelapse-panel.is-active .timelapse-panel__video { transform: scale(1.03); }

.timelapse-panel__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,3,18,0.75) 0%, rgba(0,3,18,0.05) 45%, rgba(0,3,18,0.25) 100%);
  pointer-events: none;
}

.timelapse-panel__label {
  position: absolute; bottom: 18px; left: 22px;
  font-size: 0.95rem; font-weight: 800; color: var(--white);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  margin: 0; z-index: 2;
}

.timelapse-panel__socials {
  position: absolute; top: 16px; right: 16px;
  display: flex; gap: 8px; z-index: 2;
}
.timelapse-panel__social {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,3,18,0.5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.timelapse-panel__social svg { width: 15px; height: 15px; }
.timelapse-panel__social:hover { transform: translateY(-2px); color: #fff; }
.timelapse-panel__social--youtube:hover { background: rgba(255,0,0,0.5); border-color: rgba(255,0,0,0.6); }
.timelapse-panel__social--spotify:hover { background: rgba(30,215,96,0.45); border-color: rgba(30,215,96,0.6); }

@media (max-width: 768px) {
  .timelapse-grid { grid-template-columns: 1fr; }
  .timelapse-divider { left: 0; right: 0; top: 50%; bottom: auto; width: 100%; height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(var(--accent-rgb, 14,204,219), 0.6) 50%, transparent 100%);
  }
  .timelapse-panel { aspect-ratio: 16/10; }
}

/* ─── Sección VR y 360 ───────────────────────────────────────── */
.vr-section-outer {
  position: relative;
  margin-bottom: 5%;
  width: 100%;
  background: var(--bg);
}
.vr-section {
  padding: 130px 160px 90px;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.vr-section__bg {
  position: absolute;
  left: 50%;
  width: 80%;
  top: 60%;
  transform: translateX(-50%) translateY(-50%);
  /* altura = 100vw * (572/1024) para que las gafas quepan sin recorte */
  height: max(100%, 56vw);
  pointer-events: none;
  z-index: 0;
  animation: vr-breathe 8s ease-in-out infinite;
}
.vr-section__bg svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 32px rgba(14, 204, 219, 0.2));
}
@keyframes vr-breathe {
  0%, 100% { opacity: 0.04; }
  50%       { opacity: 0.12; }
}
/* Glare sweep dentro de la silueta de las gafas */
.vr-glare-sweep {
  opacity: 0;
  transform: translateX(-60%);
}
.vr-section-outer:hover .vr-glare-sweep {
  animation: vr-glare-pass 1.1s ease forwards;
}
@keyframes vr-glare-pass {
  0%   { transform: translateX(-60%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(60%);  opacity: 0; }
}
@media (max-width: 768px) {
  .vr-section { padding: 80px 28px 60px; }
  .vr-section__bg { height: max(100%, 80vw); }
}
.vr-section__header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.vr-section__title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
}
.vr-section__title em {
  font-style: normal;
  color: var(--accent);
}
.vr-section__desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
}
.vr-section__grid {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .vr-section { padding: 60px 20px; }
  .vr-section__grid { grid-template-columns: 1fr; }
}
.brand-service-card--vr {
  border-color: rgba(var(--accent-rgb), 0.12);
  background: rgba(var(--accent-rgb), 0.03);
}

/* Stats (Live) */
.brand-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 60px 20px;
  flex-wrap: wrap;
}
.brand-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.brand-stat__value {
  height: clamp(2.2rem, 5vw, 3.5rem);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.brand-stat__value--infinity {
  font-size: clamp(4.2rem, 9.5vw, 6.8rem);
  transform: translateX(-0.05em);
}
.brand-stat__label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Galería brand */
.brand-gallery-section {
  padding: 80px 0 40px;
}
.brand-gallery-section__header {
  text-align: center;
  padding: 0 20px;
  margin-bottom: 48px;
}
.brand-gallery-section__header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 10px;
}
.brand-gallery-section__header p {
  color: rgba(255,255,255,0.5);
}

/* Sección contacto brand */
.brand-contact-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 80px 20px 60px;
  text-align: center;
}
.brand-contact-section__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.brand-contact-section__title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 36px;
}

@media (max-width: 768px) {
  .brand-services__grid { grid-template-columns: 1fr; }
  .brand-stats { gap: 36px; }
  .brand-stat { flex: 1 1 0; }
  .brand-stat__value { width: 100%; }
  .brand-stat__value--infinity {
    font-size: clamp(3.4rem, 9.5vw, 6.8rem);
    margin-bottom: 12px;
  }
}
/* Variables de Flex y Centrado General */
#quiz-wrapper,
.podcast-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 20; /* Superior al vídeo para evitar solapamientos */
    scroll-margin-top: 120px;
}

.quiz-step {
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: translateY(10px);
    width: 100%;
    display: none;
    /* Empezamos con none en css puro, manejado por JS, esto evita saltos extraños antes del fadeIn */
    flex-direction: column;
    align-items: center;
}

.quiz-step.active-step {
    display: flex;
    opacity: 1;
    transform: none;
    /* El paso pasa de display:none a flex, y eso no se puede transicionar: por
       eso la entrada se hace con animacion, que si arranca al aparecer.
       La direccion depende de si avanzas o retrocedes. */
    animation: quizPasoEntra 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.quiz-step.from-back.active-step {
    animation-name: quizPasoEntraAtras;
}

@keyframes quizPasoEntra {
    from { opacity: 0; transform: translateX(44px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@keyframes quizPasoEntraAtras {
    from { opacity: 0; transform: translateX(-44px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* El indicador de progreso acompana el cambio */
.progress-step,
.progress-line {
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
}
.progress-step.active { transform: scale(1.06); }

/* Respeta a quien pide menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
    .quiz-step.active-step,
    .quiz-step.from-back.active-step { animation: none; }
    .progress-step.active { transform: none; }
}

/* --- INDICADOR DE PROGRESO 1 --- 2 --- 3 --- */
.quiz-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 35px;
    padding-top: 15px;
    padding-bottom: 5px;
    width: 100%;
}

.progress-step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    color: white;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    font-family: 'omnes-pro', sans-serif;
    backdrop-filter: blur(5px);
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0; /* Vital para que no se vuelvan elipses */
}

/* Ajuste absoluto para que ninguna regla externa (theme/wordpress) interfiera */
.progress-step span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    /* Ajustado a -40% para forzarlo matemáticamente un pelín hacia abajo respecto a su centro */
    margin: 0;
    padding: 0;
    line-height: 0;
}

.progress-step.active {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border-color: white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.progress-line {
    width: 50px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 10px;
    transition: all 0.4s ease;
    border-radius: 3px;
}

.progress-line.active {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Efecto Cristal (Glassmorphism) para títulos del formulario */
.quiz-step h3 {
    font-family: 'omnes-pro', sans-serif;
    color: #fff;
    margin-bottom: 25px;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

/* --- NUEVAS TARJETAS DE OPCIONES --- */
.quiz-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 100%;
}

.quiz-option {
    flex: 1;
    min-width: 140px;
    max-width: 250px;
    padding: 30px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

.quiz-option:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.2);
}

.quiz-option.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
    border-color: rgba(255, 255, 255, 1);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.4);
}

.quiz-option:active {
    transform: translateY(1px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.option-icon {
    font-size: 2.8rem;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quiz-option:hover .option-icon {
    transform: scale(1.1);
}

.option-text {
    font-family: 'omnes-pro', sans-serif;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
}

/* --- CENTRADO Y ESTILO DE CAMPOS TEXTO --- */
.quiz-inputs-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
    max-width: 800px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.quiz-step input[type="text"],
.quiz-step input[type="email"],
.quiz-step input[type="tel"],
.quiz-step textarea {
    width: 100%;
    max-width: 100%;
    text-align: left;
    /* Alineado a la izquierda como la imagen */
    background: rgba(255, 255, 255, 0.08);
    /* Fondo ligeramente más sólido tipo tarjeta */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    color: #ffffff !important;
    font-family: 'omnes-pro', sans-serif;
    font-size: 1rem;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.quiz-step textarea {
    min-height: 120px;
    resize: vertical;
}

.quiz-step input[type="text"]:focus,
.quiz-step input[type="email"]:focus,
.quiz-step input[type="tel"]:focus,
.quiz-step textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.quiz-step input[type="text"]::placeholder,
.quiz-step input[type="email"]::placeholder,
.quiz-step input[type="tel"]::placeholder,
.quiz-step textarea::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    /* Textos de placeholder más legibles */
    font-weight: 500;
}

/* Responsivo para móviles: pasa a 1 sola columna */
@media (max-width: 768px) {
    .quiz-inputs-container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding-bottom: 15px;
    }

    .quiz-step input[type="text"],
    .quiz-step input[type="email"],
    .quiz-step input[type="tel"],
    .quiz-step textarea {
        padding: 14px 16px;
        font-size: 16px; /* Evita zoom automático en iOS */
    }

    .form-group.full-width {
        grid-column: auto;
    }

    /* Mejoras de aire y centrado en móvil */
    .quiz-options {
        gap: 12px;
    }

    .pricing-cards-container {
        justify-content: center !important;
        width: 100%;
        gap: 20px;
    }

    .pricing-features li {
        text-align: center !important;
        list-style: none !important;
        padding-left: 0 !important;
    }

    .episodes-options {
        justify-content: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    .quiz-option {
        min-width: 100%; /* Una por fila en móvil real si es estrecho */
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .quiz-step h3 {
        font-size: 1.35rem;
        padding: 0 10px;
        text-align: center;
        width: 100%;
    }

    .quiz-step input[type="text"],
    .quiz-step input[type="email"],
    .quiz-step input[type="tel"],
    .quiz-step textarea {
        padding: 14px 16px;
        font-size: 16px;
        text-align: center; /* Centrado en móvil */
    }

    .form-group, .quiz-inputs-container {
        align-items: center;
        justify-content: center;
    }

    .progress-step {
        width: 40px;
        height: 40px;
        aspect-ratio: 1/1 !important;
        flex-shrink: 0 !important;
        font-size: 0.95rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Centrado botón enviar WP CF7 */
    input[type="submit"] {
        display: block !important;
        margin: 20px auto !important;
        width: auto !important;
        min-width: 200px;
    }

    .progress-line {
        width: 30px;
        margin: 0 5px;
    }
}

/* Efecto Cristal Avanzado en Botones (Opciones del Quiz y Submit) */
.quiz-step input[type="submit"], .podcast-submit {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    min-width: 220px;
    padding: 15px 30px;
    margin: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-family: 'omnes-pro', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Efecto hover vibrante pero refinado */
.quiz-step input[type="submit"]:hover, .podcast-submit:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1)) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-4px);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.2) !important;
}

/* Efecto al hacer clic (presionado) */
.quiz-step input[type="submit"]:active, .podcast-submit:active {
    transform: translateY(1px);
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
}

.podcast-submit {
    margin-top: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --- BOTÓN VOLVER ATRÁS --- */
.back-btn {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.15);
    /* Color de fondo círculos apagados, ligeramente visible */
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 10px;
    position: absolute;
    top: -15px;
    left: -15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-btn svg {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

.back-btn:hover {
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
}

.back-btn:hover svg {
    transform: translateX(-3px);
}

.btn-atras {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 12px 25px;
    font-family: 'omnes-pro', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 30px;
    letter-spacing: 1px;
}

.btn-atras:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateX(-3px);
}

.btn-atras-absolute {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 10px;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    left: -15px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.btn-atras-absolute svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.btn-atras-absolute:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
    /* Se hace grande muy poco al hacer hover */
}

/* --- ESTILOS FORMULARIO PODCAST --- */

.pricing-cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin-top: 20px;
}

.pricing-card {
    flex: 1;
    min-width: 250px;
    max-width: 320px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* Transición unificada: permite que las animaciones de entrada 'giratorio' funcionen */
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Defensive CSS to prevent WordPress CF7 from injecting empty space */
.pricing-card > p, 
.pricing-card > br,
.border-glow-card > p,
.border-glow-card > br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

.pricing-card.premium-card {
    background: linear-gradient(135deg, rgba(80, 150, 180, 0.15), rgba(255, 255, 255, 0.02));
    border-color: rgba(100, 180, 210, 0.4);
    transform: scale(1.05);
    /* Ligeramente más grande */
}

/* Animación escalonada (Staggered entrance) en Escritorio */
@media (min-width: 769px) {
    .pricing-cards-container .pricing-card:nth-child(1) { transition-delay: 0s !important; }
    .pricing-cards-container .pricing-card:nth-child(2) { transition-delay: 1.5s !important; }
    .pricing-cards-container .pricing-card:nth-child(3) { transition-delay: 3s !important; }
}

.pricing-card.premium-card:hover {
    transform: scale(1.05) translateY(-5px);
    border-color: rgba(100, 180, 210, 0.7);
}

.pricing-header h4 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
    font-family: 'omnes-pro', sans-serif;
}


.current-price {
    /* En linea base comun: "Desde", la cifra y "IVA no incl." se apoyan todos
       sobre la misma linea en vez de quedar el ultimo flotando arriba. */
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 1.2rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 20px;
    font-family: 'omnes-pro', sans-serif;
}

.current-price span {
    font-size: 2.2rem;
    color: #00aaff;
}

.current-price small {
    font-size: 0.7rem;
    font-weight: normal;
    opacity: 0.7;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    flex-grow: 1;
    /* Para que el botón quede abajo uniformemente */
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: #fff;
    font-family: 'omnes-pro', sans-serif;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    text-align: left;
}

.feature-tick {
    flex-shrink: 0;
    margin-top: 4px;
    color: #00aaff;
}

.pricing-features li:last-child {
    border-bottom: none;
}

.btn-seleccionar {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 12px 20px;
    background: #ffffff;
    color: #000000;
    border: none;
    font-family: 'omnes-pro', sans-serif;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 1rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-seleccionar:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

/* EXTRAS */
.extras-container {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    width: 100%;
}

.extra-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 25px 15px;
    text-align: center;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.extra-icon {
    color: #fff;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

.extra-item h4 {
    color: #fff;
    font-family: 'omnes-pro', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.counter-widget {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 8px 15px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: auto !important;
    min-width: 120px !important;
    margin: 0 auto !important;
    height: 45px !important;
}

.counter-widget br {
    display: none !important;
}

.counter-widget p {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
}

.counter-widget button {
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    font-family: monospace !important;
    transition: color 0.2s !important;
    line-height: 1 !important;
    padding: 0 5px !important;
    margin: 0 !important;
    height: 100% !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.counter-widget button:hover {
    color: #00aaff;
}

.counter-value {
    color: #fff !important;
    font-family: 'omnes-pro', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    min-width: 25px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .pricing-card.premium-card {
        transform: scale(1);
        /* No agrandar en móviles */
    }

    .pricing-card.premium-card:hover {
        transform: translateY(-5px);
    }
}

/* =========================================================================
   EFECTO BORDER GLOW (VERSIÓN ORIGINAL EXACTA)
   ========================================================================= */

.border-glow-card {
    --edge-proximity: 0;
    --cursor-angle: 45deg;
    --edge-sensitivity: 40;
    --color-sensitivity: calc(var(--edge-sensitivity) + 20);
    --border-radius: 20px;
    --glow-padding: 40px;
    --cone-spread: 25;

    position: relative;
    border-radius: var(--border-radius);
    isolation: isolate;
    transform: translate3d(0, 0, 0.01px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgb(255 255 255 / 15%);
    background: var(--card-bg, #060010) padding-box;
    overflow: visible;
    transition: transform 0.3s ease;
}

.border-glow-card::before,
.border-glow-card::after,
.border-glow-card>.edge-light {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    transition: opacity 0.25s ease-out;
    z-index: -1;
    pointer-events: none;
}

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active)>.edge-light {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--card-bg, #060010) 0%, var(--card-bg, #060010) 100%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 100%) border-box,
        var(--gradient-one, radial-gradient(circle at 80% 55%, hsla(268, 100%, 76%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-two, radial-gradient(circle at 69% 34%, hsla(349, 100%, 74%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-three, radial-gradient(circle at 8% 6%, hsla(136, 100%, 78%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-four, radial-gradient(circle at 41% 38%, hsla(192, 100%, 64%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-five, radial-gradient(circle at 86% 85%, hsla(186, 100%, 74%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-six, radial-gradient(circle at 82% 18%, hsla(52, 100%, 65%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-seven, radial-gradient(circle at 51% 4%, hsla(12, 100%, 72%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-base, linear-gradient(#c299ff 0%, #c299ff 100%)) border-box;

    opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

    mask-image:
        conic-gradient(from var(--cursor-angle) at center,
            black calc(var(--cone-spread) * 1%),
            transparent calc((var(--cone-spread) + 15) * 1%),
            transparent calc((100 - var(--cone-spread) - 15) * 1%),
            black calc((100 - var(--cone-spread)) * 1%));
    -webkit-mask-image:
        conic-gradient(from var(--cursor-angle) at center,
            black calc(var(--cone-spread) * 1%),
            transparent calc((var(--cone-spread) + 15) * 1%),
            transparent calc((100 - var(--cone-spread) - 15) * 1%),
            black calc((100 - var(--cone-spread)) * 1%));
}

/* colored mesh-gradient background fill near edges (SUAVE) */
.border-glow-card::after {
    border: 1px solid transparent;
    background:
        var(--gradient-one, radial-gradient(circle at 80% 55%, hsla(268, 100%, 76%, 1) 0%, transparent 50%)) padding-box,
        var(--gradient-two, radial-gradient(circle at 69% 34%, hsla(349, 100%, 74%, 1) 0%, transparent 50%)) padding-box,
        var(--gradient-three, radial-gradient(circle at 8% 6%, hsla(136, 100%, 78%, 1) 0%, transparent 50%)) padding-box,
        var(--gradient-four, radial-gradient(circle at 41% 38%, hsla(192, 100%, 64%, 1) 0%, transparent 50%)) padding-box,
        var(--gradient-five, radial-gradient(circle at 86% 85%, hsla(186, 100%, 74%, 1) 0%, transparent 50%)) padding-box,
        var(--gradient-six, radial-gradient(circle at 82% 18%, hsla(52, 100%, 65%, 1) 0%, transparent 50%)) padding-box,
        var(--gradient-seven, radial-gradient(circle at 51% 4%, hsla(12, 100%, 72%, 1) 0%, transparent 50%)) padding-box,
        var(--gradient-base, linear-gradient(#c299ff 0%, #c299ff 100%)) padding-box;

    mask-image:
        linear-gradient(to bottom, black 0%, black 100%),
        radial-gradient(circle at 50% 50%, black 40%, transparent 65%),
        radial-gradient(circle at 66% 66%, black 5%, transparent 40%),
        radial-gradient(circle at 33% 33%, black 5%, transparent 40%),
        radial-gradient(circle at 66% 33%, black 5%, transparent 40%),
        radial-gradient(circle at 33% 66%, black 5%, transparent 40%),
        conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

    -webkit-mask-image:
        linear-gradient(to bottom, black 0%, black 100%),
        radial-gradient(circle at 50% 50%, black 40%, transparent 65%),
        radial-gradient(circle at 66% 66%, black 5%, transparent 40%),
        radial-gradient(circle at 33% 33%, black 5%, transparent 40%),
        radial-gradient(circle at 66% 33%, black 5%, transparent 40%),
        radial-gradient(circle at 33% 66%, black 5%, transparent 40%),
        conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);

    mask-composite: subtract, add, add, add, add, add;
    -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
    opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card>.edge-light {
    inset: calc(var(--glow-padding) * -1);
    pointer-events: none;
    z-index: 1;

    mask-image:
        conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    -webkit-mask-image:
        conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);

    opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    mix-blend-mode: plus-lighter;
}

.border-glow-card>.edge-light::before {
    content: "";
    position: absolute;
    inset: calc(var(--glow-padding) - 1px);
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
        inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
        inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
        inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
        inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
        inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
        inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
        0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
        0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
        0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
        0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
        0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
        0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
}

.border-glow-inner {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    border-radius: inherit;
    overflow: hidden;
    /* Necesario para que la linterna no se salga de las esquinas */
}

/* EFECTO LINTERNA SUTIL DENTRO DE LA TARJETA */
.border-glow-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Linterna que sigue a las coordenadas enviadas por el JS */
    background: radial-gradient(circle 250px at var(--cursor-x, 50%) var(--cursor-y, 50%), var(--glow-color-10, rgba(255, 255, 255, 0.05)), transparent 100%);
    opacity: 0;
    transition: opacity 0.5s ease-out;
    mix-blend-mode: screen;
    z-index: -1;
}

.border-glow-card:hover .border-glow-inner::before {
    opacity: 1;
}

/* Sobreescribir estilos para que funcione perfecto como pricing card */
.pricing-card.border-glow-card {
    padding: 0;
    border: 1px solid rgb(255 255 255 / 5%);
    background: var(--card-bg, #060010) padding-box;
    backdrop-filter: none;
}

/* =========================================================================
   ESPECIAL PREMIUM
   ========================================================================= */

.pricing-card.premium-card.border-glow-card {
    transform: scale(1.05);
    /* Fondo azulado fijo como anteriormente */
    background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.15) 0%, var(--card-bg, #060010) 65%) padding-box;
    border-color: rgba(14, 165, 233, 0.3);
}

/* Sincronizamos el relleno interno del borde para que no oscurezca el fondo azulado de arriba al brillar */
.pricing-card.premium-card.border-glow-card::before {
    background:
        radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.15) 0%, var(--card-bg, #060010) 65%) padding-box,
        linear-gradient(rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 0%) 100%) border-box,
        var(--gradient-one, radial-gradient(circle at 80% 55%, hsla(268, 100%, 76%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-two, radial-gradient(circle at 69% 34%, hsla(349, 100%, 74%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-three, radial-gradient(circle at 8% 6%, hsla(136, 100%, 78%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-four, radial-gradient(circle at 41% 38%, hsla(192, 100%, 64%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-five, radial-gradient(circle at 86% 85%, hsla(186, 100%, 74%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-six, radial-gradient(circle at 82% 18%, hsla(52, 100%, 65%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-seven, radial-gradient(circle at 51% 4%, hsla(12, 100%, 72%, 1) 0%, transparent 50%)) border-box,
        var(--gradient-base, linear-gradient(#c299ff 0%, #c299ff 100%)) border-box;
}

/* Linterna un puntito más intensa para Premium */
.pricing-card.premium-card.border-glow-card .border-glow-inner::before {
    background: radial-gradient(circle 350px at var(--cursor-x, 50%) var(--cursor-y, 50%), var(--glow-color-20, rgba(255, 255, 255, 0.08)), transparent 100%);
}

/* HOVER PREMIUM: Que se ilumine por completo suprimiendo la máscara cónica */
.pricing-card.premium-card.border-glow-card:hover::before,
.pricing-card.premium-card.border-glow-card:hover::after,
.pricing-card.premium-card.border-glow-card:hover>.edge-light {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 1 !important;
}

/* =========================================================================
   FORMULARIO PODCAST REACT
   ========================================================================= */

.podcast-form-shell {
    width: 100%;
}

.podcast-form-shell button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.progress-fragment {
    display: flex;
    align-items: center;
}

.progress-step {
    appearance: none;
}

.quiz-options--client {
    max-width: 650px;
}

.quiz-options--client .quiz-option {
    min-height: 135px;
}

.quiz-action-row {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quiz-action-row--tight {
    margin-top: 20px;
}

.btn-seleccionar--compact {
    max-width: 200px;
    margin: 0;
}

.podcast-step-title {
    margin-bottom: 30px;
}

.podcast-step-subtitle {
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
    font-family: 'omnes-pro', sans-serif;
    font-weight: 700;
}

.episodes-options {
    padding: 15px;
    margin-bottom: 15px;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    width: 100%;
    max-width: 600px;
}

.episodes-options .episode-option {
    flex: 1;
    min-width: 50px;
    padding: 15px 0;
}

.episodes-options .episode-option--more {
    flex: 2;
    min-width: 120px;
}

.episodes-options .option-text {
    font-size: 1.2rem;
    font-weight: 800;
}

.episodes-options .episode-option--more .option-text {
    font-size: 1rem;
}

.episodes-message {
    text-align: center;
    font-family: 'omnes-pro', sans-serif;
    min-height: 25px;
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.episodes-message__error {
    color: #ff4444;
    font-weight: 800;
}

.episodes-message__info {
    color: #00aaff;
    font-weight: 800;
}

.podcast-production-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    align-items: stretch;
}

.podcast-production-block {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.post-options {
    margin-bottom: 0;
    gap: 15px;
    width: 100%;
    justify-content: center;
    flex-direction: row;
}

.post-option {
    padding: 20px 10px;
    min-width: 100px;
    flex: 1;
}

.option-text--stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.option-text--stack strong {
    font-size: 1.4rem;
    line-height: 1.2;
}

.option-text--stack small {
    font-size: 0.8rem;
    font-weight: 400;
    margin-top: 5px;
}

.reels-card {
    padding: 15px;
    min-width: 100%;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.reels-card h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.extra-icon--small {
    margin-bottom: 5px;
}

.counter-widget--compact {
    margin-bottom: 5px !important;
    transform: scale(0.9);
}

.reels-recommendation {
    font-family: 'omnes-pro', sans-serif;
    font-size: 0.75rem;
    opacity: 0.8;
    margin: 0;
    color: #fff;
}

.reels-pricing-hint {
    font-family: 'omnes-pro', sans-serif;
    font-size: 0.8rem;
    color: #00aaff;
    font-weight: 800;
    margin-top: 8px;
    text-align: center;
    line-height: 1.2;
}

.reels-pricing-hint small {
    display: block;
    color: white;
    font-weight: 400;
    opacity: 0.8;
    white-space: nowrap;
}

.dynamic-price-container {
    text-align: center;
    color: #fff;
    font-family: 'omnes-pro', sans-serif;
    margin-bottom: 20px;
}

.dynamic-price-container p {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.dynamic-price-container span {
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 8px;
    display: inline-block;
    line-height: 1.4;
}

.dynamic-price-container small {
    display: block;
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 10px;
}

.privacy-row {
    margin-top: 4px;
    display: flex;
    justify-content: center;
}

.podcast-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    animation: podcastOverlayIn 0.35s ease both;
}

.podcast-overlay__content {
    animation: podcastOverlayContentIn 0.45s ease both;
}

.podcast-overlay__content svg {
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(0, 170, 255, 0.4));
}

.podcast-overlay__content h3 {
    color: white;
    font-family: 'omnes-pro', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0 0 15px;
}

.podcast-overlay__content p {
    color: rgba(255, 255, 255, 0.9);
    font-family: 'omnes-pro', sans-serif;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

@keyframes podcastOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes podcastOverlayContentIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* El formulario va ahora justo despues de "Un espacio a tu medida": necesita
   aire propio, porque antes lo daba el paddingTop en linea de Podcast.jsx. */
.podcast-form-after-studio {
    padding-top: 8%;
}

/* Etiqueta sobre el precio ("Tu episodio" en la landing de produccion) */
.pricing-tagline {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 6px;
    font-family: 'omnes-pro', sans-serif;
}

/* "Todo lo de Esencial, mas:" — resume lo heredado para no repetir la lista */
.pricing-inherits {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
    font-family: 'omnes-pro', sans-serif;
}
.pricing-inherits strong { color: #00aaff; font-weight: 700; }
/* ─── Tabla comparativa de paquetes ───────────────────────────────────── */

.pt-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 5% 40px;
  font-family: 'omnes-pro', sans-serif;
}

.pt-head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.pt-head h2 {
  font-size: clamp(1.55rem, 2.9vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 14px;
}
.pt-head p {
  font-size: 0.97rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}

/* La tabla vive dentro de una tarjeta redondeada, como el resto de bloques
   de la web. En movil se desplaza en horizontal en vez de aplastarse. */
.pt-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  overflow: hidden;
}

.pt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pt-table {
  width: 100%;
  min-width: 540px;
  border-collapse: separate;
  border-spacing: 0;
  color: #fff;
}

.pt-table thead th {
  padding: 22px 16px 18px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
}

.pt-corner { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

.pt-table tbody th {
  padding: 16px;
  font-size: 0.93rem;
  font-weight: 500;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.pt-table tbody td {
  padding: 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.pt-table tbody tr:last-child th,
.pt-table tbody tr:last-child td { border-bottom: none; }

/* Filas alternas muy sutiles, para seguir la linea sin rayas duras */
.pt-table tbody tr:nth-child(even) th,
.pt-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}

/* Columna destacada: en vez de un bloque de color solido, un tinte apenas
   perceptible con brillo concentrado arriba (donde esta el nombre) y dos
   filos finos a los lados que la recorren de arriba abajo. */
.pt-col-featured {
  background: rgba(0, 170, 255, 0.028);
  box-shadow:
    inset 1px 0 0 rgba(0, 170, 255, 0.16),
    inset -1px 0 0 rgba(0, 170, 255, 0.16);
}

.pt-table thead .pt-col-featured {
  color: #00aaff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  /* El brillo nace en la cabecera y se desvanece hacia abajo */
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(0, 170, 255, 0.22) 0%, rgba(0, 170, 255, 0.05) 55%, transparent 100%);
  box-shadow:
    inset 1px 0 0 rgba(0, 170, 255, 0.16),
    inset -1px 0 0 rgba(0, 170, 255, 0.16),
    inset 0 1px 0 rgba(0, 170, 255, 0.3);
  text-shadow: 0 0 18px rgba(0, 170, 255, 0.45);
}

.pt-table tbody tr:last-child .pt-col-featured {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow:
    inset 1px 0 0 rgba(0, 170, 255, 0.16),
    inset -1px 0 0 rgba(0, 170, 255, 0.16),
    inset 0 -1px 0 rgba(0, 170, 255, 0.14);
}

/* El alterno no debe tapar el resaltado de la columna */
.pt-table tbody tr:nth-child(even) td.pt-col-featured {
  background: rgba(0, 170, 255, 0.04);
}

/* Tick fino, sin circulo: solo el trazo con un halo suave. */
.pt-tick {
  color: #00aaff;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(0, 170, 255, 0.55));
}
.pt-no   { color: rgba(255, 255, 255, 0.22); font-size: 1rem; }
.pt-txt  { font-size: 0.92rem; color: rgba(255, 255, 255, 0.92); }

/* Solo para lectores de pantalla */
.pt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pt-section { padding: 50px 5% 30px; }
  .pt-card { border-radius: 18px; }
  .pt-table thead th { font-size: 0.88rem; padding: 17px 11px 14px; }
  .pt-table tbody th { font-size: 0.85rem; padding: 13px 11px; }
  .pt-table tbody td { padding: 13px 11px; }
}
/* ─── Landings de eventos (empresas / agencias) ──────────────────────────
   Páginas de campaña para Google Ads. No aparecen en el menú del sitio.
   Usan las variables globales: --accent lo fija la página (turquesa EVM).
   ───────────────────────────────────────────────────────────────────── */

/* ── Hero ──
   Estas landings llevan titulares largos (frases de campaña), al contrario que
   las landings normales, cuyo H1 es de una o dos palabras. Por eso se reduce
   bastante respecto al .brand-hero__title heredado. */
/* Más ancho que las landings normales para que el titular quepa en menos
   líneas: con 880px partía en tres y el hero quedaba demasiado apilado. */
.ev-hero__content {
  max-width: 1060px;
  gap: 14px;
}
.ev-hero__title {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  /* El espaciado lo da el gap del contenedor: sin margen no se duplica */
  margin-bottom: 0;
}
.ev-hero__title em {
  display: block;
  font-style: normal;
  color: var(--accent);
}
/* Las dos frases forman un solo mensaje, así que van muy juntas entre sí */
.ev-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 680px;
  margin: 4px auto 0;
}
.ev-hero__text {
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
}
.ev-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 18px;
}
.ev-hero__secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 40px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ev-hero__secondary:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.ev-hero__aux {
  margin-top: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.05em;
}

/* ── Cabecera común de sección ── */
.ev-section-head {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}
.ev-section-head h2 {
  font-size: clamp(1.55rem, 2.9vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}
.ev-section-head p {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--gray);
}
.ev-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ── Intro: titular a la izquierda, texto a la derecha ── */
.ev-intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.ev-intro__title {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
}
.ev-intro__title em {
  font-style: normal;
  color: var(--accent);
}
.ev-intro__text p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray);
  margin-bottom: 18px;
}
.ev-intro__text p:last-child { margin-bottom: 0; }

/* ── Paquetes ── */
.ev-packages {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 5%;
  scroll-margin-top: 90px;
}
.ev-packages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.ev-package {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: border-color 0.25s, transform 0.25s;
}
.ev-package:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}
.ev-package--featured {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(255, 255, 255, 0.03) 45%);
}
.ev-package__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #001018;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  white-space: nowrap;
}
.ev-package__name {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.ev-package__tagline {
  font-size: 0.9rem;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 600;
}
.ev-package__desc {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--gray);
  margin-bottom: 22px;
}
.ev-package__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.ev-package__price-value {
  font-size: 1.7rem;
  font-weight: 800;
}
.ev-package__price-note {
  font-size: 0.8rem;
  color: var(--gray);
}
.ev-package__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}
.ev-package__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 11px;
}
.ev-package__list svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 4px;
}
.ev-package__extra {
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 18px;
  font-style: italic;
}
/* Vacía (paquetes sin nota): no debe ocupar alto ni margen */
.ev-package__extra:empty {
  margin-bottom: 0;
  line-height: 0;
}

/* ── Alineación entre tarjetas ──
   Los subtítulos y descripciones ocupan distinto número de líneas en cada
   paquete, así que el precio y su separador quedaban a alturas diferentes.
   Con subgrid las filas de las tres tarjetas se alinean entre sí: nombre,
   subtítulo, descripción, precio, lista, nota y botón caen a la misma altura.
   Sólo se aplica en la vista de tres columnas; apilado no tiene sentido. */
@media (min-width: 981px) {
  @supports (grid-template-rows: subgrid) {
    .ev-packages__grid {
      /* El espaciado vertical lo dan los márgenes de cada elemento, así que
         aquí se anula para que subgrid no añada separación extra. */
      row-gap: 0;
      grid-template-rows: auto auto auto auto 1fr auto auto;
    }
    .ev-package {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
    }
  }
}
.ev-package__cta {
  width: 100%;
  padding: 14px 20px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: var(--white);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, filter 0.2s;
}
.ev-package__cta:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
}
.ev-package--featured .ev-package__cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #001018;
}
.ev-package--featured .ev-package__cta:hover { filter: brightness(1.12); }
.ev-packages__note {
  max-width: 820px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.4);
}

/* ── Retícula de tarjetas ── */
.ev-grid-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 5%;
}
.ev-grid { display: grid; gap: 20px; }
.ev-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ev-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ev-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ev-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 26px 24px;
  transition: border-color 0.25s, background 0.25s;
}
.ev-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  background: rgba(255, 255, 255, 0.05);
}
.ev-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.ev-card p {
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--gray);
}

/* ── Bloque de lista ── */
.ev-list-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 5%;
}
.ev-list-section--highlight {
  max-width: 100%;
  background: rgba(var(--accent-rgb), 0.05);
  border-top: 1px solid rgba(var(--accent-rgb), 0.15);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}
.ev-list-section--highlight .ev-list-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ev-list__title {
  font-size: clamp(1.55rem, 2.9vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
}
.ev-list__title em {
  font-style: normal;
  color: var(--accent);
}
.ev-list__text {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--gray);
  margin-bottom: 26px;
}
.ev-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ev-list--2col {
  columns: 2;
  column-gap: 40px;
}
.ev-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.93rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 13px;
  break-inside: avoid;
}
.ev-list svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 4px;
}
.ev-list__note {
  margin-top: 26px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}
.ev-list-section .evc-section__link { margin-top: 28px; }

/* ── Proceso ── */
.ev-process {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 5%;
}
.ev-process__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px;
}
.ev-step {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ev-step__num {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  color: rgba(var(--accent-rgb), 0.85);
  line-height: 1;
  margin-bottom: 14px;
}
.ev-step__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 9px;
}
.ev-step__desc {
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--gray);
}

/* ── Preguntas frecuentes ── */
.ev-faq {
  max-width: 860px;
  margin: 0 auto;
  padding: 80px 5%;
}
.ev-faq__list { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ev-faq__item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ev-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}
.ev-faq__q:hover { color: var(--accent); }
.ev-faq__q svg {
  flex-shrink: 0;
  transition: transform 0.28s ease;
  color: var(--accent);
}
.ev-faq__item.is-open .ev-faq__q svg { transform: rotate(180deg); }
.ev-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.ev-faq__item.is-open .ev-faq__a { grid-template-rows: 1fr; }
.ev-faq__a p {
  overflow: hidden;
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--gray);
  padding-right: 38px;
}
.ev-faq__item.is-open .ev-faq__a p { padding-bottom: 22px; }

/* ── Formulario final ──
   Monta el mismo formulario que el bloque de paquetes, así que necesita el
   mismo ancho (1200px): con menos, las tres tarjetas del paso 1 se estrangulan.
   El encabezado y la nota sí se mantienen estrechos para que el texto se lea
   cómodo. */
.ev-form-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 5% 100px;
}
.ev-form-section__head {
  max-width: 780px;
  margin: 0 auto 36px;
  text-align: center;
  scroll-margin-top: 90px;
}
.ev-form-section__head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
}
.ev-form-section__head p {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--gray);
}
/* Sin marco propio: el formulario por pasos ya trae sus tarjetas y sus campos
   con fondo, y un recuadro alrededor sólo añadiría un doble borde. */
.ev-form-section__box {
  background: transparent;
  border: none;
  padding: 0;
}
.ev-form-section__aux {
  max-width: 780px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
}

/* ── Formulario por pasos: selección de servicios (paso 2) ── */
.ev-servicios {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}
.ev-servicio {
  position: relative;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 148px;
  padding: 28px 22px 26px !important;
  padding-right: 50px !important;
}
/* Bloqueados porque "Producción completa" ya los incluye */
.ev-servicio.is-locked {
  opacity: 0.55;
  cursor: default !important;
  transform: none !important;
}
.ev-servicio.is-locked:hover {
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}
.ev-servicio .option-text {
  font-size: 0.95rem !important;
  text-align: left !important;
  line-height: 1.35;
}
.ev-servicio__desc {
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}
.ev-servicio__check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #001018;
  transition: background 0.2s, border-color 0.2s;
}
.ev-servicio.active .ev-servicio__check {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Campo de fecha ──
   PodcastForm.css estiliza text/email/tel pero no date, así que el navegador
   lo pintaba con su estilo por defecto. Aquí se replica el mismo aspecto que
   el resto de campos del formulario. */
.quiz-step input[type="date"] {
  width: 100%;
  max-width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 16px 20px;
  color: #ffffff;
  font-family: 'omnes-pro', sans-serif;
  font-size: 1rem;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  box-sizing: border-box;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Altura idéntica a los inputs de texto pese al widget nativo */
  min-height: 55px;
}
.quiz-step input[type="date"]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
/* El icono del calendario viene oscuro por defecto: se invierte para que se
   vea sobre el fondo oscuro, y se agranda un poco el área de clic. */
.quiz-step input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.65;
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  transition: opacity 0.2s;
}
.quiz-step input[type="date"]:hover::-webkit-calendar-picker-indicator,
.quiz-step input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}
/* Texto interno (dd / mm / aaaa) al tono de los placeholders del resto */
.quiz-step input[type="date"]::-webkit-datetime-edit {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}
.quiz-step input[type="date"]:valid::-webkit-datetime-edit {
  color: #ffffff;
  font-weight: 400;
}
.quiz-step input[type="date"]::-webkit-datetime-edit-text {
  color: rgba(255, 255, 255, 0.45);
  padding: 0 2px;
}
/* Segmento seleccionado al navegar con teclado */
.quiz-step input[type="date"]::-webkit-datetime-edit-day-field:focus,
.quiz-step input[type="date"]::-webkit-datetime-edit-month-field:focus,
.quiz-step input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background: rgba(var(--accent-rgb), 0.35);
  color: #fff;
  border-radius: 4px;
  outline: none;
}

/* ── "Producción completa" ──
   Va aparte de la retícula y con un tono más claro para que se lea como la
   opción que engloba a todas las demás, no como una más de la lista. */
.ev-completa {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 820px;
  margin: 16px auto 0;
  padding: 24px 26px;
  text-align: left;
  background: rgba(255, 255, 255, 0.07);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 18px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.25s, border-color 0.25s;
}
.ev-completa:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.5);
}
.ev-completa.active {
  background: rgba(var(--accent-rgb), 0.14);
  border-style: solid;
  border-color: var(--accent);
}
.ev-completa .ev-servicio__check {
  position: static;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.ev-completa.active .ev-servicio__check {
  background: var(--accent);
  border-color: var(--accent);
}
.ev-completa__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ev-completa__label {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
}
.ev-completa__desc {
  font-size: 0.83rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
}

/* Aviso de validación entre pasos */
.ev-aviso {
  max-width: 820px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffb4b4;
  font-family: var(--font);
}

/* ── Campo de ubicación con botón de mapa ── */
.ev-ubic { position: relative; width: 100%; }
.ev-ubic input { padding-right: 52px !important; }
.ev-ubic__map {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.ev-ubic__map:hover {
  background: rgba(var(--accent-rgb), 0.3);
  border-color: var(--accent);
}

/* ── Panel del mapa ── */
.lp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 3, 18, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lp-box {
  width: 100%;
  max-width: 660px;
  max-height: 90vh;
  overflow-y: auto;
  background: #0b0f20;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 26px;
  font-family: var(--font);
}
.lp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lp-head h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}
.lp-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.lp-close:hover { color: #fff; }
.lp-hint {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}
.lp-map-wrap {
  position: relative;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 18px;
}
.lp-map { width: 100%; height: 100%; }
.lp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  z-index: 2;
}
.lp-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  font-family: var(--font);
  font-size: 0.95rem;
  box-sizing: border-box;
}
.lp-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.13);
}
.lp-coords {
  margin-top: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}
.lp-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 22px;
}
.lp-cancel,
.lp-confirm {
  padding: 12px 22px;
  border-radius: 40px;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.lp-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
.lp-cancel:hover { background: rgba(255, 255, 255, 0.08); }
.lp-confirm {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #001018;
}
.lp-confirm:hover:not(:disabled) { filter: brightness(1.12); }
.lp-confirm:disabled { opacity: 0.45; cursor: not-allowed; }

/* Marcador del mapa */
.lp-pin span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
}
/* El mapa se ve claro: se atenúa un poco para que no deslumbre en la web oscura */
.lp-map .leaflet-tile-pane { filter: brightness(0.86) saturate(0.9); }
.lp-map .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.6) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
.lp-map .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.8) !important; }

@media (max-width: 560px) {
  .lp-box { padding: 20px 16px; }
  .lp-map-wrap { height: 260px; }
  .lp-actions { flex-direction: column-reverse; }
  .lp-cancel, .lp-confirm { width: 100%; }
}

/* Los campos con etiqueta (fecha, briefing) serían más altos que los que solo
   llevan placeholder, y quedarían desalineados en la misma fila. Alineando el
   contenido de cada celda por abajo, todos los inputs quedan a la misma altura
   independientemente de si llevan etiqueta encima. */
.ev-form .form-group { justify-content: flex-end; }

/* Etiquetas y ayudas dentro del formulario por pasos */
.ev-field-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 7px;
}
.ev-filename {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--accent);
}
.ev-form-hint {
  max-width: 620px;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font);
}
.quiz-step input[type="file"] {
  width: 100%;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--font);
}
.quiz-step input[type="file"]::file-selector-button {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 8px;
  padding: 7px 14px;
  margin-right: 12px;
  font-family: var(--font);
  font-size: 0.8rem;
  cursor: pointer;
}
.quiz-step input[type="file"]::file-selector-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
  .ev-servicios { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* Mismo ajuste que el resto de campos: 16px evita el zoom automático de iOS */
  .quiz-step input[type="date"] {
    padding: 14px 16px;
    font-size: 16px;
    min-height: 51px;
  }
}
@media (max-width: 560px) {
  .ev-servicios { grid-template-columns: 1fr; }
}

/* ── Añadidos al formulario compartido ── */
.panel-form__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 7px;
}
.panel-form__filename {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--accent);
}
.panel-form input[type="file"] {
  width: 100%;
  font-size: 0.85rem;
  color: var(--gray);
  padding: 12px 14px;
}
.panel-form input[type="file"]::file-selector-button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  border-radius: 8px;
  padding: 7px 14px;
  margin-right: 12px;
  font-family: var(--font);
  font-size: 0.8rem;
  cursor: pointer;
}
.panel-form input[type="file"]::file-selector-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .ev-intro {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 70px 5%;
  }
  .ev-packages__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
  }
  .ev-grid--3,
  .ev-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ev-grid--2,
  .ev-grid--3,
  .ev-grid--4 { grid-template-columns: 1fr; }
  .ev-list--2col { columns: 1; }
  .ev-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ev-form-section__box { padding: 26px 20px; }
}


/* ─── Tarjetas con imagen (bloque "Podemos asumir toda la producción") ─── */
.ev-card--img {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ev-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.ev-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ev-card--img:hover .ev-card__media img { transform: scale(1.05); }
/* Velo para que el texto de debajo no compita con la foto */
.ev-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 3, 18, 0) 45%, rgba(0, 3, 18, 0.55) 100%);
}
.ev-card--img .ev-card__body { padding: 22px 24px 26px; }

/* ─── Promesa de plazo (24 horas) ───────────────────────────────────────
   El único bloque de la landing con fondo animado: auroras que se desplazan
   despacio y un barrido de brillo sobre el número. Todo en CSS, sin JS. */
.ev-promise {
  position: relative;
  overflow: hidden;
  padding: 110px 5%;
  margin: 40px 0;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(var(--accent-rgb), 0.16) 0%, transparent 60%),
    linear-gradient(180deg, #050a1c 0%, #01030d 100%);
  border-top: 1px solid rgba(var(--accent-rgb), 0.25);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
}
.ev-promise__glow {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.55;
}
.ev-promise__orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.ev-promise__orb--a {
  width: 46vw; height: 46vw; left: 4%; top: 6%;
  background: rgba(var(--accent-rgb), 0.5);
  animation: ev-orb-a 17s ease-in-out infinite;
}
.ev-promise__orb--b {
  width: 38vw; height: 38vw; right: 6%; top: 22%;
  background: rgba(59, 80, 234, 0.45);
  animation: ev-orb-b 21s ease-in-out infinite;
}
.ev-promise__orb--c {
  width: 30vw; height: 30vw; left: 38%; bottom: -6%;
  background: rgba(var(--accent-rgb), 0.34);
  animation: ev-orb-c 25s ease-in-out infinite;
}
@keyframes ev-orb-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9vw, 5vh, 0) scale(1.14); }
}
@keyframes ev-orb-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(-8vw, 7vh, 0) scale(0.9); }
}
@keyframes ev-orb-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.95); }
  50%      { transform: translate3d(5vw, -6vh, 0) scale(1.18); }
}
.ev-promise__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.ev-promise__eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 7px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 100px;
  background: rgba(var(--accent-rgb), 0.1);
  margin-bottom: 26px;
}
.ev-promise__title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.9);
}
.ev-promise__big {
  position: relative;
  display: block;
  margin-top: 8px;
  font-size: clamp(3.4rem, 11vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, #ffffff 18%, var(--accent) 46%, #ffffff 74%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ev-shine 6s linear infinite;
}
@keyframes ev-shine {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
.ev-promise__text {
  max-width: 560px;
  margin: 22px auto 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}
.ev-promise__cta {
  margin-top: 34px;
  padding: 15px 34px;
  border-radius: 40px;
  border: none;
  background: var(--accent);
  color: #001018;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  animation: ev-pulse 2.8s ease-out infinite;
  transition: filter 0.2s;
}
.ev-promise__cta:hover { filter: brightness(1.12); }
@keyframes ev-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 22px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* Respeta a quien pide menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
  .ev-promise__orb,
  .ev-promise__big,
  .ev-promise__cta { animation: none; }
  .ev-promise__big {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--accent);
  }
}

/* ─── Afirmación breve ─── */
.ev-statement {
  max-width: 900px;
  margin: 0 auto;
  padding: 90px 5%;
  text-align: center;
}
.ev-statement__title {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 22px;
}
.ev-statement__title em {
  font-style: normal;
  color: var(--accent);
}
.ev-statement__text {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--gray);
}

/* ─── Clientes ─── */
/* Igual que en /media: titular alineado a la izquierda. Aquí, además, la
   segunda línea va en el turquesa de El Viento Media y ambas más juntas. */
.ev-clients { padding-top: 40px; }
.ev-clients__title span {
  color: var(--accent);
  line-height: 0.92;
  margin-top: -0.14em;
}

/* ─── Vídeo ─── */
.ev-video {
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 5%;
}
.ev-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #04060f;
}
.ev-video__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .ev-promise { padding: 80px 5%; }
  .ev-statement { padding: 70px 5%; }
}