/* Antonio Martínez · Ilusionista — web oficial */
:root {
  --noche: #0a0710;
  --noche2: #120b1d;
  --violeta: #2b1846;
  --morado: #8a4fe0;
  --lila: #b98cff;
  --lila-claro: #e4d6ff;
  --hueso: #f1efea;
  --texto: #ece6f7;
  --gris: #a99fbb;
  --linea: rgba(185, 140, 255, .22);
  --ancho: 1240px;
  --radio: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fundido: linear-gradient(180deg, var(--noche) 0%, rgba(10,7,16,0) 22%, rgba(10,7,16,0) 78%, var(--noche) 100%);
}
/* Montserrat 900 para las letras de contorno lila: igual que la de Google, pero con la barra de la A unida a los palos
   (en la original se veían sus bordes por dentro) y la G con barra corta hacia dentro. La genera scripts/fuente_contorno.py
   (al cambiarla, subir el ?v= aquí y en el preload de base.html) */
@font-face { font-family: 'Montserrat Contorno'; src: url('/fonts/montserrat-900-contorno.woff2?v=2') format('woff2'); font-weight: 900; font-display: swap; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
html { color-scheme: dark; scrollbar-color: #5b3a8f var(--noche); accent-color: var(--morado); -webkit-tap-highlight-color: rgba(185,140,255,.25); }
/* Nada de azul del navegador: foco y relleno automático de formularios en lila/oscuro */
:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
  -webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #1a0f2b inset; transition: background-color 9999s; }
body { background: var(--noche); color: var(--texto); font-family: 'Lexend', system-ui, sans-serif; font-weight: 300; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.bloqueado { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--morado); color: #fff; }

h1, h2, h3, .titulo { font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; line-height: .98; letter-spacing: -.5px; color: #fff; }
h2 { font-size: clamp(36px, 5.4vw, 72px); }
h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: 0; line-height: 1.15; }
.etiqueta { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--lila); display: inline-flex; align-items: center; gap: 12px; }
.etiqueta::before { content: ""; width: 34px; height: 2px; background: var(--morado); }
.lila { color: var(--lila); }
.contorno { color: transparent; -webkit-text-stroke: 1.5px var(--lila); font-family: 'Montserrat Contorno', 'Montserrat', sans-serif; }
/* Norma general: los párrafos van justificados (las palabras largas se pueden partir con guion: el generador
   marca dónde con ­, así no quedan huecos grandes). Los textos centrados o muy cortos se dejan como estaban */
p { font-size: 17px; text-align: justify; text-justify: inter-character; -webkit-hyphens: manual; hyphens: manual; text-wrap: pretty; }
/* main.js marca así los párrafos que, en esa pantalla, quedarían con huecos grandes al justificar (p. ej. en Safari) */
p.sin-justificar { text-align: left !important; }
.llamada p, .mural p, .cifra p, .centrado p, .objeto p, .cab-programas p, .destacado .info p, .lema { text-align: inherit; }
p + p { margin-top: 14px; }
b, strong { font-weight: 600; color: #fff; }

.envoltorio { width: min(var(--ancho), 100% - 40px); margin-inline: auto; }
section { position: relative; }
.bloque { padding: clamp(56px, 7vw, 100px) 0; }

/* ---------- Botones ---------- */
/* flex: none y nowrap: un botón nunca se encoge ni parte su texto (en catalán «Contractar» se salía del lila) */
.boton { flex: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 30px; border-radius: 60px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; transition: transform .35s var(--ease), background .35s, box-shadow .35s, color .35s; position: relative; overflow: hidden; isolation: isolate; }
.boton svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.boton:hover svg { transform: translateX(4px); }
.boton-principal { background: linear-gradient(120deg, var(--morado), #a66bff); color: #fff; box-shadow: 0 10px 40px -10px rgba(138, 79, 224, .8); }
.boton-principal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); z-index: -1; }
.boton-principal:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -10px rgba(138, 79, 224, 1); }
.boton-principal:hover::after { transform: translateX(120%); }
.boton-borde { border: 1.5px solid rgba(255,255,255,.4); color: #fff; backdrop-filter: blur(6px); }
.boton-borde:hover { border-color: var(--lila); background: rgba(138, 79, 224, .15); }

/* ---------- Cabecera ---------- */
.cabecera { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .4s, padding .4s, border-color .4s; padding: 22px 0; border-bottom: 1px solid transparent; }
/* El fondo y el desenfoque van en una capa aparte (::before): si el desenfoque estuviera en la propia
   cabecera, el menú del móvil (position: fixed) quedaría encerrado dentro de ella al bajar por la página */
.cabecera.solida { padding: 12px 0; border-color: var(--linea); }
.cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: rgba(10, 7, 16, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cabecera.solida::before { opacity: 1; }
.cabecera .envoltorio { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* El logo nunca se encoge aunque el menú vaya justo de espacio (si no, la firma sale aplastada) */
.marca { flex: none; }
.marca img { height: 42px; width: auto; max-width: none; transition: height .4s; }
.cabecera.solida .marca img { height: 34px; }
.menu { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 28px); }
.menu a { white-space: nowrap; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; position: relative; padding: 6px 0; color: rgba(255,255,255,.85); transition: color .3s; }
/* Apartados del menú: al pasar el ratón las letras crecen y se vuelven lilas (y vuelven a encogerse al salir);
   el apartado en el que estás se queda así. Se agranda con transform para no empujar a los vecinos. */
.menu > a { display: inline-block; transition: color .35s, transform .45s var(--ease); }
.menu > a:hover, .menu > a.activo { color: var(--lila); }
@media (min-width: 1301px) { .menu > a:hover, .menu > a.activo { transform: scale(1.14); } }
.cabecera .boton { padding: 13px 24px; font-size: 12px; }
.hamburguesa { display: none; width: 44px; height: 44px; position: relative; }
/* Selector de idioma: cápsula con el mundo lila + código; al abrirla, banderas y nombres */
.idiomas { position: relative; }
.idioma-actual { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 30px; border: 1px solid rgba(185,140,255,.55); color: var(--lila); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px; transition: border-color .3s, background .3s; }
.idioma-actual span { color: #fff; }
.idioma-actual .mundo { width: 17px; height: 17px; }
.idioma-actual .flechita { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.idioma-actual:hover, .idiomas.abierto .idioma-actual { border-color: var(--lila); background: rgba(138,79,224,.15); }
.idiomas.abierto .idioma-actual .flechita { transform: rotate(180deg); }
.idioma-lista { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; list-style: none; padding: 6px; border-radius: 12px; background: #1a0f2b; border: 1px solid rgba(185,140,255,.35); box-shadow: 0 20px 50px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
.idiomas.abierto .idioma-lista { opacity: 1; visibility: visible; transform: none; }
.menu .idioma-lista a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #ece6f7; font-family: 'Lexend', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; }
.menu .idioma-lista a::after { display: none; }
.menu .idioma-lista a:hover, .menu .idioma-lista a.actual { background: var(--lila-claro); color: #1a0f2b; }
.idioma-lista .bandera { width: 24px; height: 16px; border-radius: 3px; flex: none; }
/* Landing de los anuncios (shows.antonioilusionista.com): sin cabecera, así que la portada empieza arriba;
   el mapa es propio (Leaflet), sin enlaces a Google Maps */
.landing .show-portada { padding-top: clamp(24px, 4vw, 48px); }
.landing .acciones-arriba { margin-top: 18px; }
.landing .show-texto > .sello { margin-top: 26px; }
.landing .sello + .datos-show { margin-top: 24px; }
.landing .mapa-landing { position: absolute; inset: 0; background: #12101a; }
.landing .mapa::after { display: none; }
.landing .leaflet-tile-pane { filter: grayscale(1) invert(.9) contrast(.95) brightness(.95) sepia(.25) hue-rotate(220deg); }
.landing .leaflet-control-attribution { background: rgba(10,7,16,.7); color: #9a90ad; font-size: 10px; }
.landing .leaflet-bar a { background: #1a0f2b; color: #ece6f7; border-color: rgba(185,140,255,.35); }
.marcador-landing span { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--morado); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(138,79,224,.35), 0 4px 14px rgba(0,0,0,.6); }
.hamburguesa span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: transform .35s var(--ease), opacity .3s; }
.hamburguesa span:nth-child(1) { top: 15px; } .hamburguesa span:nth-child(2) { top: 21px; } .hamburguesa span:nth-child(3) { top: 27px; }
.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Portada con vídeo ---------- */
/* padding-top: reserva el hueco de la cabecera; ningún texto puede subir hasta el logo */
.portada { min-height: max(640px, 100svh); padding-top: 140px; display: flex; align-items: flex-end; overflow: hidden; background: #000; }
.portada .video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #000 center / cover no-repeat; }
.portada video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* Nada con desenfoque (backdrop-filter) encima del vídeo de portada: en el iPhone, Safari a veces deja de pintar
   el vídeo que hay debajo (sigue reproduciéndose por dentro, pero en pantalla se queda la primera imagen).
   El botón «Ver en televisión» y la barra de arriba usan aquí un fondo oscuro translúcido en su lugar. */
/* iPhone: lienzo donde la página dibuja el vídeo (ver inicio.html); solo se enseña cuando ya ha dibujado bien */
.portada .lienzo-portada { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
.portada .lienzo-portada.listo { visibility: visible; }
html.video-parado .portada .lienzo-portada { visibility: hidden; }
.portada .boton-borde { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,7,16,.38); }
body:has(.portada) .cabecera::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,7,16,.94); }
/* Sin el botón de play de Safari (sale cuando el iPhone está en modo de bajo consumo y no deja reproducir solo):
   se ve el primer fotograma limpio y el vídeo arranca al primer toque (inicio.html) */
.portada video::-webkit-media-controls,
.portada video::-webkit-media-controls-panel,
.portada video::-webkit-media-controls-start-playback-button,
.portada video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; opacity: 0; }
/* Nuestro botón de play (solo aparece si el móvil bloquea el vídeo): por encima de todo, en la zona de la cara */
.play-portada { position: absolute; left: 50%; top: 34%; z-index: 5; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center; background: rgba(138,79,224,.85); color: #fff; border: 2px solid rgba(255,255,255,.6); box-shadow: 0 0 0 0 rgba(185,140,255,.6); animation: latido 2.4s infinite; cursor: pointer; }
/* Solo se ve con html.video-parado (inicio.html): el vídeo se esconde y queda de fondo su fotograma */
.play-portada { display: none; }
html.video-parado .play-portada { display: grid; }
html.video-parado #video-portada { visibility: hidden; }
.play-portada svg { width: 30px; height: 30px; margin-left: 4px; }
/* Capa sobre el vídeo de portada (versión C): casi nada arriba, el centro limpio y solo se oscurece la franja de
   abajo, donde va el texto. Antes (más oscura, con tinte morado):
   linear-gradient(180deg, rgba(10,7,16,.55) 0%, rgba(10,7,16,.1) 30%, rgba(10,7,16,.35) 60%, var(--noche) 100%),
   radial-gradient(ellipse 70% 60% at 20% 80%, rgba(43,24,70,.75), transparent 70%)
   Término medio (versión B):
   linear-gradient(180deg, rgba(10,7,16,.38) 0%, rgba(10,7,16,0) 22%, rgba(10,7,16,0) 50%, rgba(10,7,16,.45) 72%, var(--noche) 100%),
   radial-gradient(ellipse 70% 55% at 20% 85%, rgba(43,24,70,.45), transparent 70%) */
/* Ahora: versión B. Versión C (la más viva, sin morado y con sombra en el texto):
   linear-gradient(180deg, rgba(10,7,16,.28) 0%, rgba(10,7,16,0) 16%, rgba(10,7,16,0) 56%, rgba(10,7,16,.55) 78%, var(--noche) 100%)
   + .portada .contenido, .portada .rol { text-shadow: 0 2px 16px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.5); } */
.portada::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(10,7,16,.38) 0%, rgba(10,7,16,0) 22%, rgba(10,7,16,0) 50%, rgba(10,7,16,.45) 72%, var(--noche) 100%),
  radial-gradient(ellipse 70% 55% at 20% 85%, rgba(43,24,70,.45), transparent 70%); }
.portada .contenido { position: relative; z-index: 2; padding-bottom: clamp(70px, 12vh, 130px); }
.portada .rol { font-family: 'Montserrat'; font-weight: 700; font-size: 14px; letter-spacing: 8px; color: var(--lila); text-transform: uppercase; }
.portada .firma { width: clamp(280px, 42vw, 620px); margin: 14px 0 6px -10px; filter: drop-shadow(0 6px 30px rgba(0,0,0,.5)); }
.portada h1 { font-size: clamp(26px, 3.4vw, 46px); max-width: 780px; letter-spacing: 0; }
.portada h1 span { color: var(--lila); }
/* «Magia que te deja / sin palabras» con el estilo de los títulos de cada apartado: arriba hueca con borde lila,
   abajo en blanco y del mismo ancho (main.js ajusta el tamaño de la segunda línea) */
.portada h1.titulo-portada { font-size: clamp(22px, 4vw, 58px); line-height: .98; max-width: none; margin-top: 4px; }
.portada h1.titulo-portada span { display: block; white-space: nowrap; }
.portada h1.titulo-portada .contorno { color: transparent; }
.portada h1.titulo-portada .segunda { color: #fff; }
/* En el ordenador, todo el texto de la portada forma un bloque compacto a la izquierda (para que se vea
   más el vídeo): el ancho lo marca «Ilusionista · Mentalista» y main.js ajusta la firma, el título y la
   frase de abajo (dos líneas justificadas) a ese mismo ancho */
@media (min-width: 861px) {
  .portada .rol { font-size: 16.5px; letter-spacing: 9px; display: inline-block; margin-bottom: 10px; }
  .portada .firma { margin: 0 0 8px; }
  .portada h1.titulo-portada { margin: 0; }
  .portada .bajada { margin-top: 18px; max-width: none; text-align: justify; text-align-last: justify; -webkit-hyphens: none; hyphens: none; }
  .portada .acciones { margin-top: 33px; }
  /* Párrafos de dos líneas del mismo ancho (main.js fija el ancho) */
  [data-dos-lineas] { text-align: justify; text-align-last: justify; -webkit-hyphens: none; hyphens: none; }
}
.portada .bajada { max-width: 560px; margin-top: 16px; font-size: 18px; color: #ddd3ee; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.sonido { position: absolute; right: max(20px, calc((100vw - var(--ancho)) / 2)); bottom: clamp(70px, 12vh, 130px); z-index: 3; display: flex; align-items: center; gap: 10px; font-family: 'Montserrat'; font-weight: 700; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.8); }
.sonido i { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.sonido:hover i { background: var(--morado); border-color: var(--morado); }
.sonido svg { width: 18px; height: 18px; }
.raton { position: absolute; left: 50%; bottom: 26px; z-index: 3; width: 24px; height: 38px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 14px; transform: translateX(-50%); }
.raton::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; border-radius: 2px; background: var(--lila); transform: translateX(-50%); animation: rueda 1.8s infinite; }
@keyframes rueda { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- Cinta "Visto en" ---------- */
.cinta { border-block: 1px solid var(--linea); background: var(--noche2); overflow: hidden; padding: 22px 0; }
.cinta .pista { display: flex; width: max-content; animation: desliza 38s linear infinite; }
.cinta .grupo { display: flex; align-items: center; gap: 46px; padding-right: 46px; }
.cinta span { font-family: 'Montserrat'; font-weight: 900; font-size: clamp(18px, 2.2vw, 26px); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.cinta span:nth-child(odd) { color: #fff; } .cinta span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--lila); font-family: 'Montserrat Contorno', 'Montserrat', sans-serif; }
.cinta em { color: var(--morado); font-style: normal; font-size: 14px; }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ---------- Cifras ---------- */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 70px 0 0; }
.cifra { text-align: center; padding: 10px; }
.cifra .num { font-family: 'Montserrat'; font-weight: 900; font-size: clamp(40px, 5vw, 66px); line-height: 1; background: linear-gradient(180deg, #fff, var(--lila)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifra .txt { margin-top: 10px; font-family: 'Montserrat'; font-weight: 700; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gris); }

/* ---------- Empresas ---------- */
/* Todos los bloques empiezan y acaban en el color de fondo (--fundido), así no hay cortes entre uno y otro */
.empresas { background: var(--fundido), radial-gradient(ellipse 60% 50% at 85% 18%, rgba(43,24,70,.8), transparent 70%), var(--noche); }
.intro-dos { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 90px); align-items: end; }
.intro-dos h2 { margin-top: 18px; }
.intro-dos p { color: #d6cde6; }
/* Empresas: título algo más pequeño, el texto pegado a él y a la derecha el collage de Zurich */
.foto-zurich img { width: 100%; display: block; border-radius: var(--radio); }
@media (min-width: 861px) {
  .intro-dos.con-foto { grid-template-columns: minmax(0, 390px) minmax(0, 1fr) clamp(220px, 21vw, 300px); gap: clamp(26px, 3.6vw, 54px); align-items: center; }
  .intro-dos.con-foto h2 { font-size: clamp(34px, 3.9vw, 56px); }
}
@media (max-width: 860px) { .foto-zurich { max-width: 360px; } }
.foto-grande { margin-top: 70px; border-radius: var(--radio); overflow: hidden; position: relative; aspect-ratio: 21 / 9; }
.foto-grande img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.foto-grande .sello { position: absolute; left: 30px; bottom: 30px; padding: 14px 22px; border-radius: 50px; background: rgba(10,7,16,.7); backdrop-filter: blur(10px); font-family: 'Montserrat'; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.foto-grande .sello i { width: 8px; height: 8px; border-radius: 50%; background: var(--lila); box-shadow: 0 0 12px var(--lila); }

.formatos { margin-top: 80px; display: grid; gap: 26px; }
.formato { display: grid; grid-template-columns: 90px 1fr 1.05fr; gap: 40px; align-items: center; padding: 34px 0; border-top: 1px solid var(--linea); }
.formato:last-child { border-bottom: 1px solid var(--linea); }
.formato .n { font-family: 'Montserrat Contorno', 'Montserrat'; font-weight: 900; font-size: 54px; color: transparent; -webkit-text-stroke: 1.5px var(--morado); line-height: 1; align-self: start; }
.formato h3 { font-size: clamp(24px, 2.6vw, 34px); text-transform: uppercase; font-weight: 900; margin-bottom: 14px; }
.formato p { color: #cfc6de; font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips span { padding: 7px 14px; border-radius: 30px; border: 1px solid var(--linea); font-size: 12.5px; font-weight: 400; color: var(--lila-claro); }
.formato .imagen { border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 10; }
.formato .imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.formato:hover .imagen img { transform: scale(1.06); }
/* Foto con vídeo (formato 02): toda la foto es un botón y lleva la píldora «Míralo en acción» encima */
.formato .imagen.con-video { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.formato .imagen.con-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(10,7,16,.35)); pointer-events: none; }
.ver-video { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 8px; border-radius: 40px; background: rgba(138,79,224,.92); color: #fff; font-family: 'Montserrat'; font-weight: 800; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 22px -8px rgba(138,79,224,.8); transition: background .3s, transform .4s var(--ease); }
.ver-video svg { width: 20px; height: 20px; padding: 5px 4px 5px 6px; border-radius: 50%; background: #fff; color: var(--morado); flex: none; }
.con-video:hover .ver-video { background: var(--morado); transform: translateX(-50%) scale(1.05); }

.marca-propia { margin-top: 70px; display: grid; grid-template-columns: .95fr 1.05fr; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #24133d, #160c25); border: 1px solid var(--linea); }
.marca-propia .texto { padding: clamp(30px, 5vw, 64px); }
.marca-propia h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 900; text-transform: uppercase; margin: 16px 0 18px; }
.marca-propia ul { list-style: none; margin: 24px 0 32px; display: grid; gap: 12px; }
.marca-propia li { position: relative; padding-left: 26px; font-size: 16px; }
.marca-propia li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; background: var(--morado); transform: rotate(45deg); }
/* Sin corte entre el texto y la foto: la foto ocupa más ancho, pasa por detrás del texto
   y se va desvaneciendo poco a poco hasta el fondo lila */
.marca-propia { position: relative; }
.marca-propia .texto { position: relative; z-index: 1; }
/* El fundido acaba donde termina el texto; la foto está recortada (tresenraya_logo2.jpg) para que
   el cliente y Antonio queden ya en la zona nítida, con Antonio cerca del borde derecho */
.marca-propia .imagen { position: absolute; top: 0; right: 0; bottom: 0; width: 64.5%; }
.marca-propia .imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 7%, #000 14%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 7%, #000 14%); }

/* ---------- Logos ---------- */
/* Mural igual que la diapositiva de logos del portfolio */
.mural { position: relative; text-align: center; }
#clientes { padding: clamp(40px, 5vw, 70px) 0 clamp(20px, 3vw, 40px); }
#clientes + .contacto { padding-top: clamp(40px, 5vw, 70px); }
.mural .intro { font-size: clamp(16px, 1.55vw, 21px); line-height: 1.6; font-weight: 300; max-width: 1100px; margin: 0 auto; }
/* Justificado, también la última línea: main.js (bloqueLleno) estrecha el bloque para que esa línea quede llena */
.mural .intro { text-align: justify; text-align-last: justify; hyphens: auto; -webkit-hyphens: auto; }
.divisor { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 38px 0 30px; }
.divisor i { width: min(230px, 26vw); height: 2px; background: linear-gradient(90deg, transparent, var(--morado)); }
.divisor i:last-child { background: linear-gradient(90deg, var(--morado), transparent); }
.divisor img { width: 58px; }
/* La misma línea debajo de los logos, sin el logo: mide lo que la de arriba entera. No ocupa sitio (absoluta):
   main.js la pone a medio camino entre los logos y la frase */
.mural .linea-logos { position: absolute; left: 50%; transform: translateX(-50%); width: calc(2 * min(230px, 26vw) + 102px); height: 2px;
  background: linear-gradient(90deg, transparent, var(--morado) 38%, var(--morado) 62%, transparent); pointer-events: none; }
.mural .rejilla-logos { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 130px; align-items: center; justify-items: center; max-width: 1140px; margin: 0 auto; }
.mural .rejilla-logos img { max-width: 150px; max-height: 66px; width: auto; filter: brightness(0) invert(1); opacity: .92; transition: transform .4s var(--ease), opacity .3s; }
.mural .rejilla-logos img.alto { max-height: 100px; }
.mural .rejilla-logos img.color { filter: none; opacity: 1; }
.mural .rejilla-logos img:hover { transform: scale(1.08); opacity: 1; }
.mural .cierre { margin: 20px auto 0; max-width: 1100px; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; color: #cfcfcf; font-weight: 300; }
/* Debajo de los logos (versión D): la frase en negrita y la pregunta en mayúsculas con contorno lila, como los títulos.
   Las dos miden lo mismo (main.js, data-mismo-ancho="crecer") */
.mural .cierre { display: table; margin: clamp(30px, 4vw, 50px) auto 0; text-align: center; font-family: 'Montserrat', sans-serif; line-height: 1.3; }
.mural .cierre > span { display: block; white-space: nowrap; }
.mural .cierre .cierre-1 { font-weight: 700; font-size: clamp(16px, 1.8vw, 24px); color: #ece6f7; }
.mural .cierre .cierre-2 { margin-top: 10px; font-family: 'Montserrat Contorno', 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
  color: transparent; -webkit-text-stroke: 1.4px var(--lila); }
/* En el móvil la frase se parte en dos líneas y las tres miden lo mismo, con la letra más grande (main.js, cierreLogos) */
@media (max-width: 860px) { .mural .cierre .cierre-1 > span { display: block; } .mural .cierre .cierre-2 { margin-top: 8px; } }

/* ---------- Ventajas ---------- */
.ventajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; background: var(--linea); border-radius: 18px; overflow: hidden; border: 1px solid var(--linea); }
.ventaja { background: var(--noche); padding: 40px 34px; transition: background .4s; }
.ventaja:hover { background: #150c22; }
.ventaja .ico { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--morado); display: grid; place-items: center; margin-bottom: 24px; transition: background .4s, transform .5s var(--ease); }
.ventaja:hover .ico { background: var(--morado); transform: rotate(-12deg) scale(1.05); }
.ventaja .ico svg { width: 24px; height: 24px; fill: none; stroke: var(--lila); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.ventaja:hover .ico svg { stroke: #fff; }
.ventaja h3 { margin-bottom: 10px; font-size: 19px; text-transform: none; font-weight: 800; }
.ventaja p { font-size: 15px; color: var(--gris); }

/* ---------- Televisión ---------- */
.tele { background: var(--fundido), radial-gradient(ellipse 50% 40% at 15% 25%, rgba(43,24,70,.9), transparent 70%), var(--noche); overflow: hidden; }
.tele .cab { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; }
.tele .cab p { max-width: 430px; color: #cfc6de; }
.destacado { margin-top: 60px; position: relative; display: block; width: 100%; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 7.2; text-align: left; }
.destacado > picture { display: contents; }
.destacado img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.destacado:hover img { transform: scale(1.04); }
.destacado::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,7,16,.9) 0%, rgba(10,7,16,.3) 55%, transparent); }
.destacado .info { position: absolute; left: clamp(24px, 5vw, 60px); bottom: clamp(24px, 5vw, 56px); z-index: 2; max-width: 520px; }
.destacado .info h3 { font-size: clamp(30px, 4.4vw, 60px); font-weight: 900; text-transform: uppercase; margin: 14px 0 12px; }
.destacado .info p { color: #ddd3ee; }
.play { width: 74px; height: 74px; border-radius: 50%; background: rgba(138,79,224,.92); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(185,140,255,.6); animation: latido 2.4s infinite; flex: none; }
.play svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(185,140,255,.55); } 70% { box-shadow: 0 0 0 22px rgba(185,140,255,0); } 100% { box-shadow: 0 0 0 0 rgba(185,140,255,0); } }
.destacado .play { position: absolute; right: clamp(24px, 6vw, 80px); top: 50%; transform: translateY(-50%); z-index: 2; width: 96px; height: 96px; }
.destacado .play svg { width: 32px; height: 32px; }
/* Respiro entre el tráiler y las miniaturas, con una pequeña cabecera */
.cab-programas { margin-top: clamp(70px, 8vw, 110px); display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 30px; }
.cab-programas p { color: var(--gris); font-size: 15px; }
/* Las miniaturas entran al bajar: suben y se acercan un poco, una detrás de otra */
.programa.aparece { transform: translateY(60px) scale(.94); transition-duration: 1.1s; }
.programa.aparece.visto { transform: none; }
.programas { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.programa { position: relative; text-align: left; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3.1; background: #1a1126; }
/* Colores siempre vivos; al pasar el ratón (o el dedo) solo se acerca la foto */
.programa img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); filter: saturate(1.1); }
.programa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,7,16,.95) 0%, rgba(10,7,16,.2) 55%, transparent); transition: background .5s; }
.programa .info { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; }
.programa .canal { font-family: 'Montserrat'; font-weight: 700; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--lila); }
.programa h3 { font-size: 17px; font-weight: 800; margin-top: 4px; }
.programa .play { position: absolute; top: 50%; left: 50%; z-index: 2; width: 56px; height: 56px; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform .5s var(--ease), opacity .4s; animation: none; }
.programa .play svg { width: 18px; height: 18px; }
/* .tocado: el mismo efecto en el móvil mientras el dedo está encima al deslizar (main.js) */
.programa:hover img, .programa.tocado img { transform: scale(1.08); }
.programa:hover .play, .programa.tocado .play { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.carrusel-tv { margin-top: 50px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.carrusel-tv .pista { display: flex; gap: 16px; width: max-content; animation: desliza 60s linear infinite; }
.carrusel-tv img { height: 220px; width: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }

/* ---------- Testimonios ---------- */
/* Como la diapositiva del portfolio: figura grande en el centro y citas a los lados */
.testimonios { background: var(--fundido), radial-gradient(ellipse 42% 62% at 50% 52%, #3a2160 0%, #1d1030 45%, var(--noche) 88%), var(--noche); overflow: hidden; }
/* Rejilla de tres columnas: la altura se adapta al contenido, así nunca se corta ninguna cita.
   La figura va pegada al borde inferior de la sección y su base se funde con el fondo. */
/* Fila 1: el título encima de la cabeza, a la altura de la primera cita. Fila 2: la figura, pegada abajo. */
.escena { position: relative; width: min(1600px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(10px, 2vw, 30px); padding: clamp(110px, 14vh, 150px) clamp(20px, 4.5vw, 70px) 0; min-height: 100svh; }
.escena h2 { grid-column: 2; grid-row: 1; align-self: start; text-align: center; font-size: 15px; font-weight: 800; letter-spacing: 6px; color: var(--lila); position: relative; z-index: 2; }
.escena .halo { position: absolute; left: 50%; top: 22%; width: min(760px, 62vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(185,140,255,.22) 0%, rgba(138,79,224,.08) 45%, transparent 70%); }
.escena .figura { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; width: 100%; max-width: 780px; margin-top: 20px; position: relative; }
/* La foto se ve tal cual (americana negra) y por encima, abajo del todo, un velo que la funde con el fondo */
.testimonios::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, rgba(10,7,16,0) 0%, rgba(10,7,16,.85) 65%, var(--noche) 100%); pointer-events: none; z-index: 1; }
.columna-citas { grid-row: 1 / span 2; align-self: start; display: flex; flex-direction: column; gap: clamp(28px, 4.5vh, 50px); padding-bottom: 60px; position: relative; z-index: 2; }
.columna-citas.izq { grid-column: 1; }
.columna-citas.der { grid-column: 3; }
.cita svg { width: 34px; height: 26px; fill: var(--morado); margin-bottom: 8px; display: block; }
.cita .q { font-size: 16.5px; font-style: italic; color: #ece6f7; line-height: 1.45; }
.cita .quien { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cita .avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; padding: 2px; background: linear-gradient(135deg, var(--lila), var(--morado) 50%, #f0a6ff); }
.cita .avatar.iniciales { display: grid; place-items: center; font-family: 'Montserrat'; font-weight: 800; font-size: 17px; color: #fff; }
.cita .avatar.iniciales span { width: 100%; height: 100%; border-radius: 50%; background: #2b1846; display: grid; place-items: center; }
.cita .n { font-family: 'Montserrat'; font-weight: 800; font-size: 18px; color: #fff; line-height: 1.2; }
.cita .p { font-family: 'Montserrat'; font-weight: 600; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lila); margin-top: 2px; }

/* ---------- Eventos privados ---------- */
.privados .cab { max-width: 760px; }
.privados .cab h2 { margin: 18px 0 22px; }
.privados .cab p { color: #cfc6de; }
/* las cuatro tarjetas del mismo ancho (antes la izquierda era un 15 % más ancha) */
.tarjetas-evento { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 60px; }
.tarjeta-evento { position: relative; border-radius: 20px; overflow: hidden; min-height: 640px; display: flex; align-items: flex-end; isolation: isolate; }
.tarjeta-evento img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
/* Capa oscura solo donde va el texto (abajo); la parte de arriba de la foto se ve con su color y su luz.
   Antes: linear-gradient(0deg, rgba(10,7,16,.96) 5%, rgba(10,7,16,.5) 50%, rgba(10,7,16,.05)) */
.tarjeta-evento::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,7,16,.9) 0%, rgba(10,7,16,.72) 28%, rgba(10,7,16,.3) 50%, rgba(10,7,16,0) 66%); }
.tarjeta-evento .info { text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); }
.tarjeta-evento:hover img { transform: scale(1.05); }
/* Bodas: la foto en espejo, para que la invitada y yo quedemos a la derecha y el título no le tape la cara */
.tarjeta-boda img { transform: scaleX(-1); }
.tarjeta-boda:hover img { transform: scaleX(-1) scale(1.05); }
.tarjeta-evento .info { padding: clamp(26px, 4vw, 44px); }
/* Título en bloque: todas sus líneas miden exactamente este ancho (main.js las ajusta). Más estrecho = más foto */
.tarjeta-evento h3 { font-size: clamp(20px, 2vw, 28px); width: min(270px, 62%); font-weight: 900; text-transform: uppercase; margin: 14px 0 14px; }
/* la etiqueta lila (Bodas, Otras celebraciones…) más pegada al título, en las cuatro tarjetas por igual:
   así baja y no toca la barbilla en la foto de celebraciones */
html[lang="es"] .tarjeta-evento .etiqueta + h3 { margin-top: 3px; }   /* solo en castellano: en catalán e inglés ya no tapaba */
/* En catalán este título va en solo dos líneas («Aniversaris i / sopars privats»): bloque más ancho y letra más grande */
html[lang="ca"] .tarjeta-evento h3.titulo-celebraciones { width: min(380px, 80%); }
/* En inglés («Anniversaries, / birthdays and / private dinners»), tres líneas algo más grandes */
html[lang="en"] .tarjeta-evento h3.titulo-celebraciones { width: min(340px, 74%); }
/* En castellano («Aniversarios, cumpleaños y cenas privadas», cuatro líneas) el bloque es más pequeño, para no taparme la cara */
html[lang="es"] .tarjeta-evento h3.titulo-celebraciones { width: min(205px, 52%); }
/* «Magia para / EMPRESAS»: cada parte en una sola línea; la de arriba se ajusta al ancho de la de abajo (main.js) */
[data-mismo-ancho="primera"] > span, .lineas-iguales > span { display: block; white-space: nowrap; }
.lineas-iguales { max-width: none !important; text-align: center !important; }
.contacto .rejilla > * { min-width: 0; } /* un título largo no ensancha la columna (main.js lo ajusta al sitio) */
/* «Magia en / tu boda»: corte fijo, las líneas no se parten solas */
html[lang="es"] .tarjeta-evento h3.titulo-boda { white-space: nowrap; }
@media (max-width: 560px) { html[lang="en"] .tarjeta-evento h3.titulo-celebraciones { width: 88%; } }
/* En catalán e inglés los cortes de este título son fijos: las líneas no se parten solas (main.js las ajusta al ancho) */
html[lang="ca"] .tarjeta-evento h3.titulo-celebraciones, html[lang="en"] .tarjeta-evento h3.titulo-celebraciones { white-space: nowrap; }
.tarjeta-evento p { color: #ddd3ee; font-size: 16px; max-width: 470px; }
.tarjeta-evento .enlace { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; font-family: 'Montserrat'; font-weight: 800; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lila); }
.tarjeta-evento .enlace svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.tarjeta-evento .enlace:hover svg { transform: translateX(5px); }
/* Fiestas mayores: «FIESTAS» y «MAYORES» en dos líneas del mismo ancho (main.js, data-mismo-ancho="crecer").
   Foto con el escenario entero (estructura de luces arriba). Ordenador: versión C; móvil: versión A */
.tarjeta-evento h3.titulo-fiestas { width: auto; font-size: 54px; line-height: .98; }
.titulo-fiestas > span { display: block; white-space: nowrap; }
.tarjeta-fiestas img { object-position: 12% 50%; }
.tarjeta-fiestas::before { background: linear-gradient(0deg, rgba(10,7,16,.9) 0%, rgba(10,7,16,.72) 30%, rgba(10,7,16,.35) 50%, rgba(10,7,16,0) 66%); }
@media (min-width: 1101px) { html[lang="en"] .tarjeta-evento h3.titulo-fiestas { font-size: 50px; } }   /* «TOWN / FESTIVALS» es más ancho */
@media (max-width: 1100px) { .tarjeta-evento h3.titulo-fiestas { font-size: 46px; } }
/* Móvil: la foto entera arriba (un poco subida para que «Ayuntamientos» quede por debajo de los pies) y el texto debajo */
@media (max-width: 860px) {
  .tarjeta-evento h3.titulo-fiestas { font-size: 40px; }
  html[lang="en"] .tarjeta-evento h3.titulo-fiestas { font-size: 36px; }
}/* Segunda fila (fiestas mayores y restaurantes): mismo estilo, separada de la primera */
.tarjetas-evento-2 { margin-top: 22px; }
.tarjeta-evento .enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin-top: 22px; }
.tarjeta-evento .enlaces .enlace { margin-top: 0; }
.tarjeta-evento .enlaces .enlace { text-align: left; }
.tarjeta-evento .enlace .icono-play { flex: none; width: 26px; height: 26px; padding: 7px 6px 7px 8px; border-radius: 50%; background: var(--morado); color: #fff; }
.tarjeta-evento .enlace:hover .icono-play { transform: none; background: var(--lila); }

/* ---------- Sobre mí ---------- */
.sobre { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
/* Sin marco: la foto se funde con el fondo por los cuatro lados (dos degradados que se cruzan) */
.sobre .retrato { position: relative; aspect-ratio: 4 / 5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 80%, transparent 100%); mask-composite: intersect; }
.sobre .retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
/* Foto recortada (sin fondo, PNG): sin máscara; detrás, el mismo lila oscuro de la cabecera de la página,
   que sigue hacia abajo por la izquierda, y un halo suave a su espalda */
/* Arriba empieza en el negro exacto en que acaba la cabecera (sin línea de corte) y el lila aparece poco a poco */
.sobre-fondo { padding-bottom: clamp(30px, 4vw, 56px); background: linear-gradient(180deg, var(--noche) 0%, rgba(10,7,16,0) 30%), radial-gradient(ellipse 45% 65% at 18% 55%, rgba(43,24,70,.75), transparent 72%), var(--noche); }
.sobre-fondo + .llamada { padding-top: clamp(20px, 3vw, 40px); }
/* La foto de la cartera, más grande: se come parte del margen izquierdo */
@media (min-width: 861px) {
  .sobre .retrato.recortado { width: 128%; margin-left: -22%; }
  /* Los 44 px que sube el texto se devuelven abajo: la sección mide lo mismo y la foto no se mueve */
  .banner.bio .envoltorio { padding-bottom: calc(clamp(50px, 8vh, 90px) + 44px); }
}
.sobre .retrato.recortado { -webkit-mask-image: none; mask-image: none; aspect-ratio: 1000 / 1157; }
.sobre .retrato.recortado::before { content: ""; position: absolute; inset: 8% 10% 20%; background: radial-gradient(closest-side, rgba(138,79,224,.35), transparent); filter: blur(30px); }
/* La foto y el fuego animado van juntos en .foto-fuego (mismas proporciones que la foto, 2000x2314): el fuego
   se coloca en % de la foto (zona 842,376 de 852x1055 en la de 2000 px) */
.sobre .retrato.recortado .foto-fuego { position: relative; display: block; width: 100%; aspect-ratio: 2000 / 2314; margin-top: auto; }
.sobre .retrato.recortado .foto-fuego img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* Encima de la figura fija (sin ruido), solo la zona del fuego animada: x 458, y 100, 263 de ancho en la de 900x1041 */
.sobre .retrato.recortado .foto-fuego .llamas { inset: auto; left: 50.889%; top: 9.606%; width: 29.222%; height: auto; pointer-events: none; }
/* Oculta hasta que se ha descargado entera (main.js): si no, se reproduce a trompicones mientras llega */
.foto-fuego .llamas { opacity: 0; transition: opacity .25s; }
.foto-fuego .llamas.lista { opacity: 1; }
/* Ordenador: la foto mide lo que la columna de texto. La cabeza empieza a la altura de «Más allá de la tele» y la
   figura acaba con el último párrafo (en el PNG, la figura va de la fila 49 a la 1116 de sus 1157 de alto) */
@media (min-width: 861px) {
  .sobre .retrato.recortado { align-self: stretch; aspect-ratio: auto; }
  .sobre .retrato.recortado .foto-fuego { position: absolute; left: 50%; top: calc(-100% * 49 / 1067); height: calc(100% * 1157 / 1067); width: auto; max-width: none; transform: translateX(-50%); }
}
/* Entrada al bajar: aparece desde abajo y se acerca un poco, como el texto pero más lenta */
.sobre .retrato.aparece { transform: translateY(50px) scale(.94); transition-duration: 1.4s; }
.sobre .retrato.aparece.visto { transform: none; }
.sobre h2 { margin: 18px 0 26px; }
.sobre p { color: #d6cde6; }
/* Sobre mí: fotos de momentos (del libro) bajo «Magia que se recuerda» */
.momentos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(34px, 4vw, 52px); }
.momentos figure { margin: 0; }
.momentos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); }
/* Emoji al final del título de la foto: sin el espaciado de letras de las mayúsculas y un poco más grande */
.momentos figcaption .emoji { letter-spacing: 0; font-size: 1.35em; line-height: 1; vertical-align: -.12em; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
/* Los nombres entre paréntesis, debajo del título de la foto, en letra normal */
.momentos figcaption .quienes { display: block; margin-top: 5px; font-family: 'Lexend', sans-serif; font-weight: 400; font-size: 12.5px; letter-spacing: 0; text-transform: none; line-height: 1.45; color: #a99cbf; }
.momentos figcaption {margin-top: 10px; font-family: 'Montserrat'; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); }
@media (max-width: 860px) { .momentos { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ---------- Tienda ---------- */
.tienda { background: var(--fundido), radial-gradient(ellipse 60% 50% at 50% 50%, rgba(43,24,70,.55), transparent 70%), var(--noche); }
.tienda .cab { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; }
.productos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.producto { border-radius: 18px; overflow: hidden; border: 1px solid var(--linea); background: #120b1c; display: flex; flex-direction: column; transition: transform .5s var(--ease), border-color .4s, box-shadow .5s; }
.producto:hover { transform: translateY(-6px); border-color: rgba(185,140,255,.5); box-shadow: 0 30px 60px -30px rgba(138,79,224,.6); }
.producto .portadilla { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #3a2160, #160c25 70%); position: relative; overflow: hidden; }
.producto .portadilla .objeto { width: 46%; aspect-ratio: 2 / 3; border-radius: 6px 12px 12px 6px; background: linear-gradient(135deg, #1b0f2c, #3c2266); box-shadow: 14px 18px 40px rgba(0,0,0,.55), inset 6px 0 0 rgba(255,255,255,.08); display: grid; place-items: center; padding: 16px; text-align: center; transform: rotate(-6deg); transition: transform .8s var(--ease); }
.producto:hover .objeto { transform: rotate(0) scale(1.04); }
.producto .objeto.baraja { aspect-ratio: 5 / 7; width: 40%; border-radius: 12px; background: linear-gradient(135deg, #f1efea, #d9d2e6); color: #2b1846; }
.producto .objeto span { font-family: 'Montserrat'; font-weight: 900; font-size: 15px; text-transform: uppercase; line-height: 1.1; }
.producto .pronto { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 20px; background: rgba(10,7,16,.7); font-family: 'Montserrat'; font-weight: 700; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--lila); }
.producto .datos { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.producto .tipo { font-family: 'Montserrat'; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--lila); }
.producto h3 { font-size: 22px; font-weight: 900; text-transform: uppercase; }
.producto p { font-size: 15px; color: var(--gris); flex: 1; }
.producto .pie { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.producto .precio { font-family: 'Montserrat'; font-weight: 900; font-size: 24px; color: #fff; }
.producto .boton { padding: 13px 22px; font-size: 11.5px; }
/* Tarjetas de la tienda con foto real; toda la tarjeta lleva a la ficha de abajo */
.producto .portadilla.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.producto:hover .portadilla.foto img { transform: scale(1.05); }
.producto .enlace { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat'; font-weight: 800; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--lila); }
.producto .enlace svg { width: 16px; height: 16px; transform: rotate(90deg); }
/* «Ver más» cubre toda la tarjeta (la tarjeta entera baja a la ficha); «Comprar» queda por encima */
.producto { position: relative; }
.producto .enlace.estirado::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Precio | Comprar | Ver más: dos columnas iguales a los lados para que «Comprar» quede justo en el centro */
.producto .pie { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
.producto .pie .precio { justify-self: start; }
.producto .pie .estirado { justify-self: end; white-space: nowrap; font-size: 11px; letter-spacing: 1.2px; gap: 5px; }
.producto .boton.comprar { position: relative; z-index: 2; padding: 10px 15px; gap: 6px; font-size: 11px; letter-spacing: 1.2px; }
/* Si la tarjeta es estrecha no caben las tres cosas con «Comprar» centrado: «Ver más» se queda en su flecha, dentro de un círculo */
.producto .pie { container-type: inline-size; }
@container (max-width: 325px) {
  .producto .pie .estirado { font-size: 0; gap: 0; width: 38px; height: 38px; justify-content: center; border-radius: 50%; border: 1px solid rgba(185,140,255,.45); }
}
@container (max-width: 240px) {
  .producto .pie .precio { font-size: 19px; }
  .producto .pie .boton.comprar { padding: 9px 12px; letter-spacing: .8px; }
  .producto .pie .estirado { width: 34px; height: 34px; }
}
.producto .boton.comprar svg { width: 14px; height: 14px; }

/* Fichas de producto (en la misma página de la tienda) */
.ficha { border-top: 1px solid var(--linea); scroll-margin-top: 70px; }
.ficha-cabecera { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.galeria-producto .foto-principal { border-radius: 18px; overflow: hidden; background: #120b1c; aspect-ratio: 4 / 3; }
.galeria-producto .foto-principal img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.galeria-producto .miniaturas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.galeria-producto .miniaturas button { border-radius: 10px; overflow: hidden; aspect-ratio: 1; border: 2px solid transparent; opacity: .65; transition: opacity .3s, border-color .3s; }
.galeria-producto .miniaturas button.activa, .galeria-producto .miniaturas button:hover { opacity: 1; border-color: var(--lila); }
.galeria-producto .miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.ficha-compra h2 { font-size: clamp(34px, 4vw, 54px); margin: 14px 0 16px; }
.ficha-lema { font-size: 19px; color: var(--lila-claro); margin-bottom: 14px; text-align: left; }
.ficha-compra > p:not(.ficha-lema) { color: #ddd3ee; }
.ficha-precio { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 26px 0 20px; }
.ficha-precio b { font-family: 'Montserrat'; font-weight: 900; font-size: 46px; color: #fff; line-height: 1; }
.ficha-precio span { font-size: 14px; color: var(--gris); }
/* Libro: aviso de la dedicatoria, entre el precio y el botón de compra */
.ficha-compra > p.ficha-dedicatoria { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 22px; max-width: 440px; font-size: 15.5px; line-height: 1.5; color: var(--lila-claro); text-align: left; -webkit-hyphens: none; hyphens: none; }
.ficha-dedicatoria svg { flex: none; width: 19px; height: 19px; margin-top: 2px; fill: none; stroke: var(--lila); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ficha-dedicatoria b { color: #fff; }
/* Aviso bajo el botón de compra: el envío incluido es solo a la Península; el resto, por WhatsApp */
.ficha-compra > p.ficha-envio { font-size: 14px; line-height: 1.55; color: var(--gris); margin-top: 14px; max-width: 420px; text-align: left; }
.ficha-envio a { color: var(--lila); text-decoration: underline; text-underline-offset: 3px; }
/* «Al comprar aceptas las condiciones de compra»: bajo los botones de compra y bajo las tarjetas */
.ficha-compra > p.ficha-acepta { font-size: 13px; line-height: 1.5; color: var(--gris); margin-top: 12px; max-width: 420px; text-align: left; }
.tienda .aviso-compra { font-size: 13px; color: var(--gris); text-align: center; margin-top: 18px; }
.ficha-acepta a, .aviso-compra a { color: var(--lila); text-decoration: underline; text-underline-offset: 3px; }
.ficha-datos { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--linea); }
.ficha-datos li { font-size: 15px; color: #fff; }
.ficha-datos span { display: block; font-family: 'Montserrat'; font-weight: 700; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lila); margin-bottom: 2px; }
.ficha-texto { margin-top: clamp(40px, 5vw, 70px); max-width: 1000px; }
.ficha-intro { font-size: 21px; color: #fff; margin-bottom: 16px; }
.ficha-texto > p { color: #ddd3ee; }
.ficha-texto > p + p { margin-top: 14px; }
.ficha-texto > p b { color: #fff; }
/* Frase que presenta los bloques para magos */
.ficha-texto > p.ficha-para-magos { margin-top: 30px; color: #fff; font-size: 19px; }
.ficha-para-magos + .ficha-bloques { margin-top: 18px; }
.ficha-bloques { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.ficha-bloques > div { padding: 24px 26px; border-radius: var(--radio); background: linear-gradient(160deg, rgba(43,24,70,.5), rgba(18,11,29,.6)); border: 1px solid rgba(185,140,255,.16); }
.ficha-bloques h3 { font-size: 18px; margin-bottom: 10px; }
.ficha-bloques p { font-size: 15.5px; color: #ddd3ee; }
/* Vídeos de la ficha: miniatura con botón de play que abre la ventana de vídeo */
.ficha-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(34px, 4vw, 50px); max-width: 1000px; }
.video-mini { display: block; text-align: left; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; font: inherit; }
.video-mini .miniatura { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; border: 1px solid rgba(185,140,255,.16); margin-bottom: 12px; }
.video-mini .miniatura img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.video-mini .miniatura svg { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; padding: 12px 10px 12px 13px; margin: -21px 0 0 -21px; border-radius: 50%; background: rgba(10,7,16,.6); color: #fff; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); transition: background .3s; }
.video-mini:hover .miniatura img { transform: scale(1.05); }
.video-mini:hover .miniatura svg { background: var(--lila); }
.video-mini b { display: block; font-family: 'Montserrat'; font-weight: 800; font-size: 16px; }
.video-mini > span:last-child { font-size: 14px; color: var(--gris); }
.ficha-opiniones { margin-top: clamp(30px, 4vw, 46px); max-width: 1000px; }
.ficha-videos.dos, .opiniones.dos { grid-template-columns: 1fr 1fr; }
/* Opiniones en carrusel: 3 a la vista (1 en móvil) y flechas para pasar */
.opiniones.desliza { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.opiniones.desliza::-webkit-scrollbar { display: none; }
.opiniones.desliza > .opinion { flex: 0 0 calc((100% - 36px) / 3); scroll-snap-align: start; }
.flechas-opiniones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.flecha-op { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(185,140,255,.4); background: rgba(138,79,224,.12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .3s, opacity .3s; }
.flecha-op svg { width: 20px; height: 20px; }
.flecha-op:hover:not(:disabled) { background: var(--morado); }
.flecha-op:disabled { opacity: .3; cursor: default; }
/* Historia del producto (Portal en Fool Us): foto y texto lado a lado */
.ficha-historia { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(26px, 4vw, 50px); align-items: center; margin-top: clamp(40px, 5vw, 64px); max-width: 1000px; }
.ficha-historia .foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3; }
.ficha-historia .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; }
.ficha-historia h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 12px 0 14px; }
.ficha-historia p { color: #ddd3ee; }
.ficha-historia p + p { margin-top: 12px; }
@media (max-width: 860px) {
  .ficha-cabecera, .ficha-bloques, .ficha-videos, .ficha-videos.dos, .opiniones.dos, .ficha-historia { grid-template-columns: 1fr; }
  .opiniones.desliza > .opinion { flex-basis: 100%; }
  .galeria-producto .miniaturas { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .ficha-precio b { font-size: 38px; }
}

/* ---------- Contacto ---------- */
.contacto { background: var(--fundido), radial-gradient(ellipse 60% 60% at 80% 50%, rgba(43,24,70,.9), transparent 70%), var(--noche); }
.contacto .rejilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); }
.contacto h2 { margin: 18px 0 24px; }
.contacto .lado p { color: #d6cde6; }

/* Página de Contacto en el ordenador: el título y el formulario, justo debajo de la cabecera (sin el margen de bloque) */
@media (min-width: 861px) { .hueco-cabecera + .contacto { padding-top: 30px; } }
@media (max-width: 860px) { .hueco-cabecera + .contacto { padding-top: 18px; } }
/* Móvil: «HABLEMOS DE / TU EVENTO» del mismo tamaño que «PREGUNTAS / FRECUENTES» (unas cuatro quintas partes) */
@media (max-width: 600px) { .contacto h2.titulo-doble { font-size: 13.2vw; } }
/* Ordenador: también del ancho de «PREGUNTAS / FRECUENTES» («tu evento» es más estrecha que «frecuentes» a igual letra) */
@media (min-width: 861px) { .contacto h2.titulo-doble { font-size: clamp(41.5px, 6.2vw, 82.5px); } }

/* Inicio: aviso con el título de las preguntas frecuentes y el botón que lleva a ellas (en Contacto) */
.preguntas-aviso .rejilla { align-items: center; }
.aviso-preguntas p { color: #d6cde6; margin-bottom: 22px; max-width: 520px; text-align: left; -webkit-hyphens: none; hyphens: none; }
@media (max-width: 600px) {
  .aviso-preguntas .boton { display: flex; width: 100%; justify-content: center; padding-left: 14px; padding-right: 14px; letter-spacing: 1.2px; font-size: 11px; white-space: normal; text-align: center; }
}
#preguntas { scroll-margin-top: 90px; }

/* ---------- Preguntas frecuentes (página de Contacto) ---------- */
.preguntas { padding: 0 0 clamp(70px, 8vw, 110px); }
.preguntas .rejilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.preguntas .rejilla > * { min-width: 0; }
.preguntas h2 { margin-bottom: 18px; }
.preguntas .lado p { color: #d6cde6; text-align: left; }
/* Subtítulo al ancho del título (main.js, anchoDelTitulo): en una línea, o en dos (.en-dos) en el móvil */
.ancho-del-titulo { white-space: nowrap; line-height: 1.3; -webkit-hyphens: none; hyphens: none; }
.ancho-del-titulo.en-dos span { display: block; }
.lista-preguntas { border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.35; color: #fff; transition: color .3s; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover, .pregunta[open] summary { color: var(--lila); }
.pregunta summary:focus-visible { outline: 2px solid var(--lila); outline-offset: 4px; border-radius: 6px; }
/* El «+» lila de la derecha: al abrir gira y se convierte en «×» */
.pregunta .mas { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(185,140,255,.45);
  transition: transform .45s var(--ease), background .3s, border-color .3s; }
.pregunta .mas::before, .pregunta .mas::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--lila); transition: background .3s; }
.pregunta .mas::after { transform: rotate(90deg); }
.pregunta summary:hover .mas { border-color: var(--lila); }
.pregunta[open] .mas { transform: rotate(135deg); background: var(--morado); border-color: var(--morado); }
.pregunta[open] .mas::before, .pregunta[open] .mas::after { background: #fff; }
.pregunta p { padding: 0 56px 24px 2px; color: #d6cde6; animation: abre-pregunta .45s var(--ease); }
@keyframes abre-pregunta { from { opacity: 0; transform: translateY(-8px); } }
/* Móvil: «PREGUNTAS / FRECUENTES» ocupa unas cuatro quintas partes de la pantalla (crece con ella) */
@media (max-width: 600px) { .preguntas h2 { font-size: 11.5vw; } }
@media (max-width: 860px) {
  .preguntas .rejilla { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pregunta p { padding-right: 8px; }
}
.vias { margin-top: 36px; display: grid; gap: 14px; }
.via { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--linea); transition: background .3s, border-color .3s, transform .4s var(--ease); }
.via:hover { background: rgba(138,79,224,.12); border-color: rgba(185,140,255,.5); transform: translateX(6px); }
.via i { width: 46px; height: 46px; border-radius: 50%; background: var(--morado); display: grid; place-items: center; flex: none; }
.via i svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.via i.wa { background: #25d366; } .via i.wa svg { fill: #fff; stroke: none; }
.via i.relleno svg { fill: #fff; stroke: none; width: 20px; height: 20px; } /* iconos de silueta rellena (TikTok) */
.via small { display: block; font-family: 'Montserrat'; font-weight: 700; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); }
.via span { font-size: 17px; color: #fff; }

/* Formulario (en la sección de contacto y en la ventana Contratar) */
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario .ancho { grid-column: 1 / -1; }
.campo label { display: block; font-family: 'Montserrat'; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
.campo input, .campo select, .campo textarea { width: 100%; padding: 15px 16px; border-radius: 10px; border: 1px solid rgba(185,140,255,.25); background: rgba(10,7,16,.55); color: #fff; font: inherit; font-size: 16px; transition: border-color .3s, box-shadow .3s; }
.campo textarea { min-height: 120px; resize: vertical; }
/* La fecha, igual que las demás casillas: en el iPhone se ensanchaba y en Android salía 2 px más alta */
.campo { min-width: 0; }
.campo input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; height: calc(1.6em + 32px); text-align: left; }
.campo input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.campo input[type=date]::-webkit-datetime-edit { padding: 0; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b98cff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.campo select option { background: #160c25; }
/* Desplegable a medida (sustituye al nativo, cuya lista se resalta en azul) */
.select-oculto { position: absolute; left: 0; top: 0; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden; opacity: 0; pointer-events: none; }
.desplegable { position: relative; }
.desplegable-boton { width: 100%; text-align: left; padding: 15px 44px 15px 16px; border-radius: 10px; border: 1px solid rgba(185,140,255,.25); background: rgba(10,7,16,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b98cff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; color: #fff; font: inherit; font-size: 16px; transition: border-color .3s, box-shadow .3s; }
.desplegable-boton.vacio { color: var(--gris); }
.desplegable.abierto .desplegable-boton, .desplegable-boton:focus-visible { outline: none; border-color: var(--lila); box-shadow: 0 0 0 4px rgba(138,79,224,.2); }
.desplegable-lista { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; list-style: none; padding: 6px; border-radius: 12px; background: #1a0f2b; border: 1px solid rgba(185,140,255,.35); box-shadow: 0 20px 50px rgba(0,0,0,.55); max-height: 340px; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
.desplegable.abierto .desplegable-lista { opacity: 1; visibility: visible; transform: none; }
.desplegable-lista li { padding: 11px 14px; border-radius: 8px; cursor: pointer; color: #ece6f7; font-size: 15.5px; }
/* Al pasar por encima: lila clarito con texto oscuro para que contraste */
.desplegable-lista li.activo { background: var(--lila-claro); color: #1a0f2b; }
.desplegable-lista li[aria-selected="true"] { font-weight: 600; }
.desplegable-lista li[aria-selected="true"]::after { content: " ✓"; color: var(--morado); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--lila); box-shadow: 0 0 0 4px rgba(138,79,224,.2); }
.tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tipos label { margin: 0; cursor: pointer; position: relative; }
.tipos input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; pointer-events: none; }
.tipos span { display: block; text-align: center; padding: 14px 8px; border-radius: 10px; border: 1px solid rgba(185,140,255,.25); font-family: 'Montserrat'; font-weight: 700; font-size: 12.5px; letter-spacing: 1px; color: #ddd3ee; transition: all .3s; text-transform: none; }
.tipos input:checked + span { background: var(--morado); border-color: var(--morado); color: #fff; }
.tipos input:focus-visible + span { box-shadow: 0 0 0 4px rgba(138,79,224,.35); }
.privacidad { font-size: 13px; color: var(--gris); display: flex; gap: 10px; align-items: flex-start; }
.privacidad input { margin-top: 4px; accent-color: var(--morado); }
.formulario .boton { justify-content: center; }
.aviso { font-size: 15px; padding: 14px 16px; border-radius: 10px; display: none; }
.aviso.ok { display: block; background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .4); }
.aviso.error { display: block; background: rgba(255, 90, 90, .1); border: 1px solid rgba(255, 90, 90, .4); }
.tarjeta-form { padding: clamp(24px, 4vw, 44px); border-radius: 22px; background: rgba(18, 11, 29, .85); border: 1px solid var(--linea); backdrop-filter: blur(10px); }

/* ---------- Pie ---------- */
.pie-web { padding: 60px 0 30px; }
.pie-web .arriba { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.pie-web .arriba img { height: 46px; }
.redes { display: flex; gap: 12px; }
.redes a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.redes a:hover { background: var(--morado); border-color: var(--morado); }
.redes svg { width: 18px; height: 18px; fill: #fff; }
.pie-web .abajo { margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--gris); }
.pie-web .abajo a:hover { color: var(--lila); }

/* ---------- Ventanas (Contratar y vídeo) ---------- */
.ventana { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(5, 3, 9, .82); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.ventana.abierta { opacity: 1; visibility: visible; }
.ventana .caja { position: relative; width: min(720px, 100%); max-height: calc(100svh - 40px); overflow: auto; transform: translateY(30px) scale(.97); transition: transform .5s var(--ease); }
.ventana.abierta .caja { transform: none; }
.ventana .caja h2 { font-size: clamp(28px, 4vw, 42px); margin: 12px 0 10px; }
.ventana .caja > p { color: #cfc6de; margin-bottom: 26px; }
.cerrar { position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .3s, transform .4s var(--ease); }
.cerrar:hover { background: var(--morado); transform: rotate(90deg); }
.cerrar svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2; }
/* Sin desenfoque detrás del vídeo: en el iPhone, el desenfoque sobre un iframe puede dejar el reproductor en blanco */
.ventana-video { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 3, 9, .94); }
.ventana-video .caja { width: min(1100px, 100%); overflow: visible; }
.ventana-video .marco-video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.7); }
/* Vídeo vertical (móvil): marco 9:16 que cabe en la pantalla, por si no se abre en pantalla completa */
.ventana-video .marco-video.vertical { aspect-ratio: 9 / 16; width: auto; height: min(calc(100svh - 150px), calc((100vw - 40px) * 16 / 9)); margin: 0 auto; }
/* En pantalla completa, el marco ocupa toda la pantalla (sin bordes redondeados) */
.marco-video:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.marco-video:-webkit-full-screen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.ventana-video iframe, .ventana-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.ventana-video .cerrar { top: -56px; right: 0; }
.ventana-video .titulo-video { margin-top: 16px; font-family: 'Montserrat'; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 14px; color: var(--lila); }

/* Botón flotante de WhatsApp */
/* Más pequeño y discreto mientras se navega; recupera el color al pasar el ratón */
.flotante { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; background: #25d366; opacity: .6; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .4s var(--ease), opacity .3s; }
.flotante:hover, .flotante:focus-visible { transform: scale(1.08); opacity: 1; }
.flotante svg { display: block; width: 24px; height: 24px; fill: #fff; }

/* ---------- Cabecera de cada página interior ---------- */
.banner { position: relative; min-height: clamp(460px, 68svh, 680px); padding-top: 140px; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.banner > picture { display: contents; }
.banner > img, .banner > picture > img, .bio > video { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; z-index: -2; will-change: transform; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,7,16,.7) 0%, rgba(10,7,16,.25) 35%, rgba(10,7,16,.6) 70%, var(--noche) 100%), radial-gradient(ellipse 60% 70% at 15% 90%, rgba(43,24,70,.85), transparent 70%); }
.banner .envoltorio { padding-bottom: clamp(50px, 8vh, 90px); }
.banner h1 { font-size: clamp(42px, 7.5vw, 104px); margin: 18px 0 18px; }
.banner p { max-width: 620px; font-size: 18px; color: #ddd3ee; text-align: justify; hyphens: none; }

/* Cabecera con la foto a la derecha del texto, fundida hacia la izquierda (Empresas) */
.banner-lado { min-height: clamp(520px, 82svh, 820px); }
.banner-lado > img, .bio > video { left: auto; right: 0; width: 64%; height: 100%; object-position: 30% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 38%); }
.banner-lado::before { background: linear-gradient(180deg, rgba(10,7,16,.55) 0%, rgba(10,7,16,0) 22%, rgba(10,7,16,0) 70%, var(--noche) 100%), radial-gradient(ellipse 50% 70% at 10% 80%, rgba(43,24,70,.7), transparent 70%); }
.banner-lado .envoltorio > * { max-width: 520px; }
.banner-lado .envoltorio > p { max-width: 540px; } /* a este ancho el texto ocupa 3 líneas y las dos primeras casi no se estiran */

/* Sobre mí: la diapositiva de biografía del portfolio */
/* El texto arriba (a un dedo del logo), no pegado abajo; la foto y la altura de la sección no cambian */
.bio { min-height: 100svh; align-items: flex-start; padding-top: 96px; }
.bio > img, .bio > video { width: 61%; object-position: 29% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 38%), linear-gradient(180deg, #000 70%, transparent 100%); mask-composite: intersect; }
.bio .envoltorio > * { max-width: 640px; }
/* El vídeo del saludo va encima de la foto: invisible hasta que se reproduce (mientras, se ve la foto) */
.bio > video { opacity: 0; transition: opacity .4s; pointer-events: none; }
.bio > video.lista { opacity: 1; }
.bio h1 { font-size: clamp(42px, 5.6vw, 76px); margin: 14px 0 0; }
.bio .raya { width: 90px; height: 3px; background: var(--morado); margin: 20px 0 6px; }
.bio p { font-size: 17.5px; line-height: 1.55; color: #ece6f7; text-align: justify; margin-top: 16px; max-width: 640px; }

/* Las mismas cifras animadas de Empresas, en una fila compacta bajo el texto */
.bio .cifras { grid-template-columns: repeat(4, auto); justify-content: start; gap: 34px; padding-top: 34px; }
.bio .cifra { text-align: left; padding: 0; }
.bio .cifra .num { font-size: clamp(34px, 3.4vw, 48px); }
.bio .cifra .txt { font-size: 11px; letter-spacing: 2px; }

/* Eventos privados: en esta foto la cabeza está pegada al borde superior; la foto empieza bajo el menú
   y se ve desde arriba del todo, con el borde superior fundido */
/* Empresas, «Tu logo, tu producto…»: botones y el play sobre la foto del tres en raya */
.acciones-marca { display: flex; flex-wrap: wrap; gap: 12px; }
/* «Ver el vídeo» con un triángulo de play delante (el vídeo se abre en la ventana de la web) */
.boton-video svg { width: 14px; height: 14px; color: var(--lila); }
.boton-video:hover svg { transform: none; }
/* Tienda: el fotograma de Fool Us a todo el ancho, con su proporción (se ve entero, sin recortar la figura) */
.banner-tienda { min-height: min(46.875vw, 92svh); }
.banner-tienda > img, .banner-tienda > picture > img { height: 100%; object-position: 50% 30%; }
/* Móvil en catalán: «LES MEVES» es largo y tapaba la boca; el título y el texto bajan (la foto se queda arriba) */
@media (max-width: 600px) {
  html[lang="ca"] .banner-tienda { padding-top: 205px; }
  html[lang="ca"] .banner-tienda > picture > img { object-position: 50% 0%; }
}
.banner-tienda::before { background: linear-gradient(90deg, rgba(10,7,16,.75) 0%, rgba(10,7,16,.25) 40%, rgba(10,7,16,0) 60%), linear-gradient(180deg, rgba(10,7,16,.5) 0%, rgba(10,7,16,0) 25%, rgba(10,7,16,0) 70%, var(--noche) 100%); }
.banner-privados > img { top: 70px; height: calc(100% - 70px); object-position: 50% 0%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 38%), linear-gradient(180deg, transparent 0, #000 70px); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 38%), linear-gradient(180deg, transparent 0, #000 70px); mask-composite: intersect; }

/* Eventos en el ordenador: la foto alargada con la pared beige (mesa_7450_ancha.jpg) ocupa toda la cabecera,
   sin fundido a oscuro por la izquierda; solo se oscurece abajo, al pasar a la sección siguiente. El blanco y el
   texto llevan una sombra suave para leerse sobre el beige (las letras huecas no, que se vería por dentro) */
@media (min-width: 861px) {
  .banner-privados > img.foto-ordenador { left: 0; right: 0; top: 0; width: 100%; height: 100%; object-position: 100% 30%; -webkit-mask-image: none; mask-image: none; }
  .banner-privados::before { background: linear-gradient(180deg, rgba(10,7,16,0) 0%, rgba(10,7,16,0) 75%, var(--noche) 100%); }
  .banner-privados h1 > span:not(.contorno), .banner-privados p { text-shadow: 0 2px 18px rgba(0,0,0,.45); }
}

/* Cabecera de Televisión: título a dos líneas (contorno + relleno) y los programas como etiquetas */
/* La foto (304, Got Talent) va a la derecha del título, fundida hacia la izquierda con el fondo oscuro */
.banner-tv { min-height: clamp(460px, 68svh, 640px); }
/* Con su proporción original (16:9) para que se vean los tres; fundida por la izquierda, arriba y abajo */
.banner-tv > img { left: auto; right: 0; top: 54%; width: 56%; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 13%), linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 6%, #000 13%), linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%); mask-composite: intersect; }
.banner-tv::before { background: linear-gradient(180deg, rgba(10,7,16,.4) 0%, rgba(10,7,16,0) 25%, rgba(10,7,16,0) 70%, var(--noche) 100%), radial-gradient(ellipse 45% 70% at 12% 75%, rgba(43,24,70,.75), transparent 70%); }
.banner-tv .envoltorio > * { max-width: 500px; }
.banner-tv .envoltorio > .titulo-tv { max-width: none; }
.banner .titulo-tv { font-size: clamp(40px, 4.6vw, 68px); line-height: .9; margin: 16px 0 22px; }
/* «VISTO EN / TELEVISIÓN» y «AS SEEN / ON TV»: dos líneas del mismo ancho (main.js agranda la más estrecha) */
.titulo-tv > span { display: block; white-space: nowrap; }
html[lang="en"] .banner .titulo-tv { font-size: clamp(50px, 6.6vw, 100px); }
/* Títulos de cada página: la primera parte en letras huecas con borde lila y el resto en blanco */
.titulo-tv .contorno, .titulo-doble .contorno { display: block; -webkit-text-stroke: 2px var(--lila); }
.cadenas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; max-width: 700px; }
.cadenas span { padding: 8px 15px; border-radius: 30px; background: rgba(10,7,16,.55); border: 1px solid rgba(185,140,255,.35); backdrop-filter: blur(6px); font-family: 'Montserrat'; font-weight: 700; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; }

/* ---------- Franja de llamada a contratar ---------- */
.llamada { padding: clamp(50px, 6vw, 80px) 0; text-align: center; background: var(--fundido), radial-gradient(ellipse 50% 60% at 50% 55%, rgba(138,79,224,.3), transparent 70%), var(--noche); }
.llamada h2 { font-size: clamp(32px, 4.6vw, 60px); margin: 16px auto 18px; max-width: 900px; }
.llamada p { color: #cfc6de; max-width: 560px; margin: 0 auto 34px; }
.llamada .acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
/* «Hagamos que / nadie lo olvide»: dos líneas del mismo ancho (main.js agranda o encoge la segunda) */
.llamada h2.dos-lineas > span { display: block; white-space: nowrap; }
.llamada h2.dos-lineas { line-height: 1; }
/* Páginas legales (aviso legal, privacidad, cookies, condiciones de compra): texto sencillo y legible */
.legal { padding: 150px 0 90px; }
.legal .envoltorio { max-width: 820px; }
.legal h1 { font-size: clamp(34px, 4.6vw, 54px); margin: 14px 0 8px; line-height: 1.05; }
.legal .actualizado { font-size: 14px; color: var(--gris); margin-bottom: 40px; }
.legal h2 { font-size: 20px; margin: 38px 0 12px; color: #fff; }
.legal p, .legal li { color: #cfc6de; font-size: 16px; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; display: grid; gap: 10px; margin-top: 16px; }
.legal ul.datos-titular { list-style: none; padding: 22px 24px; border-radius: var(--radio); border: 1px solid rgba(185,140,255,.2); background: rgba(43,24,70,.35); gap: 12px; }
.legal .datos-titular span { display: block; font-family: 'Montserrat'; font-weight: 700; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lila); margin-bottom: 2px; }
.legal .otros-legales { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 14px; }
.legal .otros-legales a { color: var(--lila); }
.legal p { text-align: left; }

/* Página /gracias/ (tras pagar en PayPal): la llamada a pantalla completa, con el título como h1 */
.gracias { min-height: 100svh; display: flex; align-items: center; padding-top: 120px; }
.gracias h1 { font-size: clamp(36px, 5.4vw, 72px); margin: 16px auto 26px; line-height: 1; }
.gracias h1 > span { display: block; white-space: nowrap; }
.gracias p { margin-bottom: 14px; }
.gracias .acciones { margin-top: 34px; }
/* Dos frases en dos líneas exactamente del mismo ancho: el párrafo mide lo que la más larga y la otra se justifica */
/* Las líneas se cortan con <br> (solo los de cada tamaño de pantalla) y todas se justifican al ancho de la más larga */
.frases-iguales { display: table; max-width: none !important; margin-left: auto; margin-right: auto; white-space: nowrap; text-align: justify !important; text-align-last: justify !important; text-wrap: nowrap; -webkit-hyphens: none; hyphens: none; }
@media (min-width: 561px) { .frases-iguales .salto-movil { display: none; } }
@media (max-width: 560px) { .frases-iguales .salto-ordenador { display: none; } }
.llamada .etiqueta::after { content: ""; width: 34px; height: 2px; background: var(--morado); }

/* ---------- Espectáculo (El viajero del tiempo 2.0) ---------- */
/* Portada: texto a la izquierda y el cartel a la derecha, con un marco lila desplazado y un halo detrás */
.show-portada { padding: 112px 0 clamp(40px, 5vw, 70px); overflow: hidden; background: linear-gradient(180deg, rgba(10,7,16,0) 70%, var(--noche) 100%), radial-gradient(ellipse 45% 60% at 75% 45%, rgba(138,79,224,.28), transparent 70%), radial-gradient(ellipse 50% 60% at 10% 80%, rgba(43,24,70,.8), transparent 70%), var(--noche); }
.show-portada .envoltorio { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.show-portada h1 { font-size: clamp(44px, 6vw, 88px); margin: 20px 0 18px; }
/* «2.0» como en el cartel: pequeño, blanco con contorno morado grueso, montado sobre la O final de «tiempo» */
.titulo-viajero .linea2 { white-space: nowrap; }
/* «El viajero» siempre en una línea: la columna del texto no pasa de ~540 px, así que la letra no puede crecer
   más de 80 px (con 86-88 px, en pantallas de 1440 px o más, «viajero» bajaba a otra línea) */
.titulo-viajero .contorno { white-space: nowrap; }
.show-portada h1.titulo-viajero { font-size: clamp(44px, 6vw, 80px); }
.titulo-viajero .version { position: relative; top: .32em; margin-left: -.66em; font-size: .44em; letter-spacing: 0; color: #fff;
  -webkit-text-stroke: .12em var(--morado); paint-order: stroke fill; text-shadow: 0 .14em .4em rgba(10,7,16,.8); }
.sello { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 16px 8px 8px; border-radius: 40px; border: 1px solid rgba(185,140,255,.35); background: rgba(138,79,224,.12); font-family: 'Montserrat'; font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #ece6f7; }
.sello b { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;   /* flex: none: en el móvil el texto de al lado lo estrechaba (óvalo) */ background: var(--morado); color: #fff; font-size: 14px; letter-spacing: 0; }
.lema { font-family: 'Montserrat'; font-weight: 700; font-size: 19px; color: var(--lila-claro); margin-bottom: 4px; }
.show-texto > p { color: #ddd3ee; max-width: 560px; }
.datos-show { list-style: none; display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 14px 40px; margin: 30px 0 34px; }
.datos-show li, .info-lugar li { font-weight: 400; color: #fff; }
.datos-show .enlace-fechas { color: #fff; text-decoration: underline; text-decoration-color: var(--lila); text-underline-offset: 4px; }
.datos-show .enlace-fechas:hover { color: var(--lila); }
.datos-show span, .info-lugar span { display: block; font-family: 'Montserrat'; font-weight: 700; font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--lila); margin-bottom: 2px; }
.show-portada .acciones, .lugar .acciones { display: flex; flex-wrap: wrap; gap: 14px; }
/* Cartel cuadrado sin marco: los cuatro bordes se funden con el fondo de la web */
/* En el ordenador ocupa todo el hueco de la derecha: desde la altura de «Ahora en La Off» hasta abajo
   del todo y hasta el borde derecho de la pantalla (sigue cuadrado; los bordes fundidos lo integran) */
@media (min-width: 861px) {
  .show-portada { padding-bottom: 0; }
  .show-portada .envoltorio { grid-template-columns: minmax(0, 540px) 1fr; align-items: stretch; }
  .show-texto { padding-bottom: clamp(40px, 5vw, 70px); }
  /* Tan alto como la columna de texto, salvo que así se metiera encima del texto: entonces manda el ancho */
  .show-portada .show-cartel { width: auto; justify-self: stretch; container-type: size; --margen: calc((100vw - min(var(--ancho), 100vw - 40px)) / 2); }
  .show-portada .show-cartel .cartel-vivo { position: absolute; top: -30px; right: calc(var(--margen) * -1); width: min(100cqh + 30px, 100cqw + var(--margen) + 60px); height: auto; max-width: none; aspect-ratio: 1; }
}
.show-cartel { position: relative; justify-self: center; width: min(100%, 600px); }
.show-cartel img { width: 100%; }
/* El vídeo tapa exactamente su trozo de la foto (x 600-1600, y 490-1452 de 1600) y funde sus bordes con ella */
.show-cartel video { position: absolute; left: 37.5%; top: 30.625%; width: 62.5%; height: auto; aspect-ratio: 1000 / 962; opacity: 0; transition: opacity .4s; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%), linear-gradient(180deg, transparent 0, #000 3%, #000 97%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%), linear-gradient(180deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-composite: intersect; }
.show-cartel video.lista { opacity: 1; }
.cartel-vivo { position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 92%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 92%, transparent 100%); mask-composite: intersect; }

.show-trailer { padding: 30px 0 clamp(28px, 3.5vw, 50px); }
.show-historia { padding-top: clamp(28px, 3.5vw, 50px); }
.show-historia { background: var(--fundido), radial-gradient(ellipse 50% 40% at 85% 40%, rgba(43,24,70,.8), transparent 70%), var(--noche); }
.show-dos { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.show-dos h2, .show-opiniones h2, .lugar h2 { font-size: clamp(34px, 4.4vw, 60px); margin-top: 16px; }
.show-dos p { color: #ddd3ee; text-align: justify; }
/* Carrusel de fotos del show: de lado a lado de la pantalla, pasando solo (se para al pasar el ratón) */
.show-historia { padding-bottom: 0; }
.landing .show-historia > .carrusel-show:first-child { margin-top: 0; }   /* landing: el carrusel va justo debajo del tráiler */
.carrusel-show { margin-top: clamp(40px, 5vw, 64px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.carrusel-show .pista { display: flex; gap: 16px; width: max-content; animation: desliza 46s linear infinite; }
/* Quieto hasta que se ve en pantalla (así las cuatro primeras son las que se ven al llegar) */
.carrusel-show:not(.visto) .pista { animation-play-state: paused; }
.carrusel-show img { width: clamp(250px, 24vw, 360px); aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radio); flex: none; }
/* Con main.js lo mueve el código: se puede arrastrar con el dedo o el ratón y luego sigue solo (main.js, carrusel-show) */
.carrusel-show.a-mano .pista { animation: none; will-change: transform; }
.carrusel-show.a-mano { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.carrusel-show.a-mano.arrastrando { cursor: grabbing; }
.carrusel-show.a-mano img { pointer-events: none; -webkit-user-drag: none; }
/* La segunda tanda empieza tras su hueco: el desplazamiento del 50% cuadra exacto */
.carrusel-show .pista { padding-right: 16px; }

/* Nominación: sello con copa, bajo el título */
.nominado { display: inline-flex; align-items: center; gap: 14px; margin: 2px 0 18px; padding: 12px 22px 12px 14px; border-radius: 16px; background: linear-gradient(120deg, rgba(138,79,224,.32), rgba(138,79,224,.08)); border: 1px solid rgba(185,140,255,.5); box-shadow: 0 10px 40px -14px rgba(138,79,224,.8); }
.nominado svg { width: 38px; height: 38px; flex: none; color: var(--lila-claro); padding: 7px; border-radius: 50%; background: var(--morado); }
.nominado div { max-width: 290px; font-family: 'Montserrat'; font-weight: 800; font-size: 15px; line-height: 1.25; letter-spacing: .5px; text-transform: uppercase; color: #fff; text-wrap: balance; }
.nominado small { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; color: var(--lila); }
.landing .show-texto > .nominado { margin: 22px 0 0; }   /* landing: va encima del título «El viajero del tiempo 2.0» */

/* Opiniones: nota grande y tarjetas */
.nota-show { display: flex; align-items: center; gap: 28px; margin: 34px 0 40px; flex-wrap: wrap; }
.nota-grande { font-family: 'Montserrat'; font-weight: 900; font-size: clamp(80px, 9vw, 120px); line-height: .9; color: #fff; }
.nota-grande small { font-size: .3em; color: var(--lila); margin-left: 4px; }
.estrellas { color: var(--lila); font-size: 22px; letter-spacing: 4px; }
.nota-texto { color: #cfc6de; font-size: 15px; margin-top: 4px; }
.notas-parciales { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.notas-parciales li { padding: 6px 14px; border-radius: 30px; border: 1px solid rgba(185,140,255,.3); font-size: 13px; color: #ddd3ee; }
.notas-parciales b { color: var(--lila); margin-right: 4px; }
.opiniones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.opinion { padding: 26px 26px 28px; border-radius: var(--radio); background: linear-gradient(160deg, rgba(43,24,70,.55), rgba(18,11,29,.6)); border: 1px solid rgba(185,140,255,.16); }
.opinion .quien { font-family: 'Montserrat'; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris); }
.opinion .quien b { color: var(--lila); }
.opinion h3 { font-size: 19px; margin: 10px 0 12px; }
.opinion p { font-size: 15.5px; color: #ddd3ee; }
.centrado { text-align: center; margin-top: 44px; }
/* Opiniones pegadas al carrusel, y poco hueco hasta «Dónde ver el espectáculo» */
.show-opiniones { padding: clamp(40px, 4.5vw, 60px) 0 clamp(30px, 3.5vw, 46px); }
.show-lugar { padding-top: clamp(30px, 3.5vw, 46px); }

/* Lugar: datos y mapa (el mapa de Google, oscurecido y teñido para que vaya con la web) */
.lugar { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: stretch; }
.direccion { font-size: 19px; color: #fff; margin: 14px 0 24px; }
.info-lugar { list-style: none; display: grid; gap: 14px; margin-bottom: 30px; }
.info-lugar li { font-weight: 300; color: #ddd3ee; }
.mapa { position: relative; min-height: 420px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(185,140,255,.25); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.9) contrast(.95) brightness(.95); }
.mapa::after { content: ""; position: absolute; inset: 0; background: rgba(138,79,224,.18); mix-blend-mode: color; pointer-events: none; }

@media (max-width: 860px) {
  .show-portada { padding-top: 110px; }
  .show-portada .envoltorio, .show-dos, .lugar { grid-template-columns: 1fr; }
  .show-cartel { order: -1; width: calc(100% + 40px); margin: -20px -20px 0; }
  .carrusel-show img { width: 72vw; }
  .opiniones { grid-template-columns: 1fr; }
  .mapa { min-height: 320px; }
  /* El play en la esquina, para no taparme la cara */
  .show-trailer .destacado .play { top: 22px; right: 22px; left: auto; transform: none; width: 70px; height: 70px; }
}

/* ---------- Animaciones al desplazarse ---------- */
.aparece { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--retraso, 0s); }
.aparece.visto { opacity: 1; transform: none; }
.portada .aparece { opacity: 1; transform: none; transition: none; animation: entra 1.1s var(--ease) both; animation-delay: calc(var(--retraso, 0s) + .15s); }
@keyframes entra { from { opacity: 0; transform: translateY(40px); } }
/* Cortinilla del color de fondo que se retira hacia abajo. Va en un ::before y no recorta la propia foto:
   con clip-path el navegador la daba por invisible y la animación nunca se disparaba (se quedaba en negro). */
.revela { position: relative; }
.revela::before { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--noche); transform-origin: 50% 100%; transition: transform 1.3s var(--ease); pointer-events: none; }
.revela.visto::before { transform: scaleY(0); }
.palabras .p { display: inline-block; overflow: hidden; vertical-align: bottom; }
.palabras .p > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 60ms); }
.palabras.visto .p > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .aparece, .palabras .p > span { opacity: 1; transform: none; }
  .revela::before { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1300px) {
  .menu { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 26px; background: var(--noche); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
  body.menu-abierto { overflow: hidden; } /* con el menú abierto la página de detrás no se desplaza */
  .menu a { font-size: 20px; }
  .menu-abierto .menu { opacity: 1; visibility: visible; }
  .hamburguesa { display: block; z-index: 2; }
  .cabecera .boton { display: none; }
  .menu .boton-menu { display: inline-flex; margin-top: 10px; }
  /* En el menú del móvil, los tres idiomas siempre a la vista, en fila */
  .idioma-actual { display: none; }
  /* visibility: inherit (no visible): con el menú cerrado los idiomas tampoco se pueden tocar; antes
     seguían activos aunque no se vieran y tapaban botones de la página (p. ej. «Ver en televisión») */
  .idioma-lista { position: static; opacity: 1; visibility: inherit; transform: none; display: flex; gap: 6px; background: none; border: none; box-shadow: none; padding: 0; min-width: 0; }
  .menu .idioma-lista a { font-size: 13px; padding: 8px 12px; border: 1px solid rgba(185,140,255,.3); border-radius: 30px; }
  .programas { grid-template-columns: repeat(2, 1fr); }
}
/* Testimonios en pantallas estrechas: la figura arriba y las citas debajo */
@media (max-width: 980px) {
  .escena { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 70px 20px 60px; }
  .escena h2 { position: static; order: -2; margin-bottom: 10px; align-self: center; }
  /* «Lo que dicen» / «de mi magia» en dos líneas del mismo ancho (main.js agranda la segunda) */
  .escena h2 span { display: block; white-space: nowrap; }
  .escena .halo { top: 60px; width: 90vw; }
  .escena .figura { order: -1; width: min(520px, 100%); margin-top: 30px;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
  .columna-citas { width: min(640px, 100%); gap: 34px; margin-top: 34px; padding-bottom: 0; }
}
@media (min-width: 1301px) { .menu .boton-menu { display: none; } }
/* Entre 1301 y 1500 px el menú va justo (7 apartados, y en catalán son palabras largas): más compacto */
@media (min-width: 1301px) and (max-width: 1500px) { .menu { gap: 18px; } .menu a { letter-spacing: 1px; } .cabecera .envoltorio { gap: 18px; } }
@media (max-width: 860px) {
  .intro-dos, .sobre, .contacto .rejilla, .marca-propia, .tarjetas-evento { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: 1fr 1fr; gap: 34px 10px; }
  .formato { grid-template-columns: 1fr; gap: 18px; }
  .formato .n { font-size: 40px; }
  .ventajas, .productos { grid-template-columns: 1fr; }
  .foto-grande { aspect-ratio: 4 / 3; }
  .destacado { aspect-ratio: 4 / 5; }
  .destacado::after { background: linear-gradient(0deg, rgba(10,7,16,.95) 10%, transparent 70%); }
  .destacado .play { top: 30%; left: 50%; right: auto; transform: translate(-50%, -50%); }
  .destacado .info { right: clamp(20px, 5vw, 40px); } /* ancho fijo: así el título sabe cuánto sitio tiene */
  /* Tarjetas de Eventos (versión C): la foto arriba, grande y sin texto encima de las caras; se funde por abajo
     y el texto empieza donde acaba. Las cuatro tarjetas iguales */
  .tarjeta-evento { display: block; min-height: 0; background: var(--noche); }
  .tarjeta-evento img { position: relative; display: block; inset: auto; height: 380px; z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
  .tarjeta-evento::before { display: none; }
  .tarjeta-evento .info { position: relative; z-index: 1; margin-top: -60px; padding-top: 0; }
  .tarjeta-evento:hover img { transform: none; }
  /* (la foto de la boda está en espejo: un % bajo enseña más de la derecha) */
  .tarjeta-boda img, .tarjeta-boda:hover img { object-position: 28% 25%; transform: scaleX(-1); }
  .tarjeta-celebraciones img { object-position: 32% 0%; }
  .tarjeta-fiestas img { object-position: 12% 30%; }
  .tarjeta-evento picture { display: block; } /* restaurante: en el móvil, foto recortada a los dos (sin la parte alargada de abajo) */
  .sonido span { display: none; }
  .sonido { top: 90px; bottom: auto; }
  .portada .rol { font-size: 12px; letter-spacing: 5px; }
  .portada .firma { display: none; }
  .portada .rol { margin-bottom: 14px; }
  .carrusel-tv img { height: 150px; }
  .banner-tv > img { width: 100%; top: 0; height: 100%; transform: none; opacity: .5; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
  .marca-propia .imagen { position: relative; width: 100%; min-height: 300px; }
  .marca-propia .imagen img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%); }
  .bio .cifras { grid-template-columns: 1fr 1fr; gap: 24px; }
  /* Cabeceras con foto (Empresas, Sobre mí…): la foto con toda su luz; solo se oscurece la parte de abajo, donde va el texto */
  .banner-lado > img, .bio > video { width: 100%; -webkit-mask-image: none; mask-image: none; opacity: 1; }
  .banner-lado:not(.banner-privados)::before { background: linear-gradient(180deg, rgba(10,7,16,.45) 0%, rgba(10,7,16,0) 15%, rgba(10,7,16,0) 33%, rgba(10,7,16,.72) 52%, rgba(10,7,16,.84) 76%, var(--noche) 100%); }
  /* Empresas (versión B): la foto desplazada para que la invitada quede junto a «EMPRESAS», sin sombra en su cara;
     se oscurece solo por debajo, donde va el texto pequeño, y el título lleva sombra en las letras */
  .banner-empresas > img { object-position: 47% 45%; top: -8%; height: 108%; }
  .banner-lado.banner-empresas::before { background: linear-gradient(180deg, rgba(10,7,16,.45) 0%, rgba(10,7,16,0) 15%, rgba(10,7,16,0) 64%, rgba(10,7,16,.72) 76%, rgba(10,7,16,.86) 80%, var(--noche) 100%); }
  .banner-empresas .envoltorio > * { text-shadow: 0 2px 14px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.5); }
  .mural .rejilla-logos { grid-template-columns: repeat(4, 1fr); }
  /* Televisión en el móvil: el collage vertical (tú y Dani arriba, Edurne abajo) y el texto debajo */
  .banner-tv { display: block; min-height: 0; padding-top: 62px; }
  .banner-tv::before { display: none; }
  .banner-tv > .foto-ordenador { display: none; }
  .banner-tv > .foto-movil { display: block; position: static; width: 100%; height: auto; aspect-ratio: auto; transform: none; opacity: 1; -webkit-mask-image: none; mask-image: none; }
  .banner-tv .envoltorio { position: relative; margin-top: -25px; }
  /* Sobre mí en el móvil: la foto arriba, entera, y el texto debajo (no detrás) */
  .bio { display: block; min-height: 0; padding-top: 62px; }
  .bio::before { display: none; }
  .bio > img, .bio > video { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 47% 20%; opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 75%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 75%, transparent 100%); }
  .bio > video { position: absolute; top: 62px; left: 0; z-index: 0; }   /* encima de la foto, en el mismo sitio */
  .bio .envoltorio { position: relative; margin-top: -40px; }
  /* Eventos privados en el móvil: la foto entera, desde arriba del todo, vista a través de la cabecera
     (sin sombra encima, con su brillo normal); solo se oscurece abajo, donde va el texto */
  /* Foto alargada por arriba con el color de la pared (mesa_7450_movil.jpg, 80 px añadidos) y bajada 40 px:
     se ve el pelo entero y la pared llega hasta arriba del todo */
  .banner-privados > .foto-ordenador { display: none; }
  .banner-privados > .foto-movil { display: block; top: calc(40px - (100% - 70px) * 80 / 683); height: calc((100% - 70px) * 763 / 683); object-position: 50% 0%; opacity: 1; -webkit-mask-image: none; mask-image: none; }
  .banner-privados::before { background: linear-gradient(180deg, rgba(10,7,16,0) 0%, rgba(10,7,16,0) 40%, rgba(10,7,16,.7) 62%, rgba(10,7,16,.85) 85%, var(--noche) 100%); }
  /* Todo el texto justificado, con guiones al partir palabras para que no queden huecos grandes */
  p, .q, .banner p, .bio p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; text-wrap: pretty; }
  .llamada p { text-align-last: center; }
  /* Las frases cortas (2-3 líneas) bajo los títulos: líneas repartidas con la misma medida, sin estirar huecos */
  .banner:not(.bio) p, .llamada p, .info p, .cab-programas p, .lema, .portada .bajada { text-align: left; text-wrap: balance; }
  /* En el móvil «Magia que te deja» ocupa todo el ancho de la pantalla */
  .portada h1.titulo-portada { font-size: 7.4vw; }
  .portada h1.titulo-portada .contorno { -webkit-text-stroke-width: 1.5px; }
  .llamada p { text-align: center; }
}
.foto-movil { display: none; }
@media (max-width: 560px) {
  .mural .rejilla-logos { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 96px; }
  .mural .rejilla-logos img { max-width: 92px; max-height: 44px; }
  .mural .rejilla-logos img.alto { max-height: 64px; }
  .formulario, .tipos { grid-template-columns: 1fr; }
  /* En móviles muy estrechos (320 px) el formulario no puede ensanchar la página */
  .contacto .rejilla, .formulario { grid-template-columns: minmax(0, 1fr); }
  .contacto .rejilla > *, .formulario > * { min-width: 0; }
  .tarjeta-form { padding: 22px 18px; }
  .destacado .info h3 { font-size: clamp(24px, 8vw, 40px); }
  /* El botón de enviar ocupa todo el ancho y, si aun así no cabe, parte el texto en dos líneas centradas */
  .formulario .boton { width: 100%; flex-shrink: 1; white-space: normal; text-align: center; padding: 16px 16px; letter-spacing: 1.5px; }
  .via { padding: 14px 14px; gap: 14px; min-width: 0; }
  @media (max-width: 340px) { .formulario .boton svg { display: none; } }
  .via > * { min-width: 0; }
  .via span { font-size: 15.5px; overflow-wrap: anywhere; }
  .tipos { grid-template-columns: 1fr 1fr; }
  .programas { grid-template-columns: 1fr; }
  /* Uno al lado del otro si caben; si no (palabras largas, móviles estrechos), uno debajo del otro a todo el ancho */
  .portada .acciones { gap: 12px; }
  .portada .acciones .boton { flex: 1 1 auto; justify-content: center; padding: 16px 18px; font-size: 12px; letter-spacing: 1.5px; white-space: nowrap; }
  p { font-size: 16px; }
}

/* Portada en el móvil, más compacta para que se vea el vídeo: título, frase y botones más pequeños,
   botones uno al lado del otro. La etiqueta «Ilusionista · Mentalista» va en vw como el título,
   así las dos miden lo mismo en cualquier móvil */
@media (max-width: 600px) {
  .portada h1.titulo-portada { font-size: 5.2vw; }
  .portada .rol { font-size: 2.53vw; letter-spacing: 1.07vw; margin-bottom: 8px; }
  .portada .bajada { font-size: 13.5px; line-height: 1.5; margin-top: 10px; max-width: 290px; }
  .portada .acciones { margin-top: 18px; gap: 8px; flex-wrap: nowrap; }
  .portada .acciones .boton { flex: 1 1 0; width: auto; padding: 12px 10px; font-size: 10px; letter-spacing: 1.4px; }
  /* Todo pegado abajo: botones, debajo el ratón (más pequeño, con su animación lila) y WhatsApp escondido en la portada */
  .portada .contenido { padding-bottom: 38px; }
  .portada .raton { bottom: 5px; width: 18px; height: 28px; }
  .portada .raton::after { top: 5px; height: 6px; }
  .flotante { right: 12px; bottom: 12px; width: 40px; height: 40px; }
  .flotante svg { width: 21px; height: 21px; }
  /* En la portada WhatsApp no sale hasta que se empieza a bajar (main.js quita .en-portada) */
  body.en-portada .flotante { opacity: 0; transform: translateY(12px); pointer-events: none; }
}
@media (max-width: 350px) {
  .portada .acciones .boton { padding: 12px 6px; font-size: 9.5px; letter-spacing: .6px; gap: 6px; }
}