/* Alquila Luces y Sonido · estilo del concepto de Jorge (web «Félix V1» de AutomatizaMiEmpresa, 03/11/2026):
   azul noche con rejilla, tarjetas de cristal con borde luminoso, títulos en mayúsculas con degradado cian→violeta,
   etiquetas de sistema y Félix como guía. La estructura sigue siendo la más simple: packs con precio grande y un solo formulario. */
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url(fuentes/space-grotesk/space-grotesk-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url(fuentes/space-grotesk/space-grotesk-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url(fuentes/space-grotesk/space-grotesk-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(fuentes/dm-sans/dm-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url(fuentes/dm-sans/dm-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url(fuentes/dm-sans/dm-sans-latin-700-normal.woff2) format('woff2'); }

.marca-alquila {
  --bg: #080d1b; --surface: rgba(17, 22, 45, .72); --surface-2: rgba(23, 29, 58, .85); --line: rgba(148, 163, 255, .16);
  --text: #f4f6ff; --muted: #aeb6d8; --ok: #6ef2b9;
  --cian: #5ee7ff; --violeta: #a78bfa; --magenta: #e879f9;
  --a1: #5ee7ff; --a2: #a78bfa;
  --grad: linear-gradient(95deg, #5ee7ff 0%, #8fa8ff 45%, #b88cff 100%);
  --on-grad: #0b1024; --radius: 20px;
  --borde-luz: 0 0 0 1px rgba(150, 140, 255, .22), 0 0 24px rgba(120, 100, 255, .14);
  font-family: 'DM Sans', system-ui, sans-serif;
}
body.marca-alquila {
  background-color: var(--bg);
  background-image:
    radial-gradient(800px 520px at 82% 8%, rgba(139, 92, 246, .22), transparent 65%),
    radial-gradient(700px 520px at 0% 55%, rgba(94, 231, 255, .10), transparent 65%),
    linear-gradient(rgba(148, 163, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 255, .05) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
}
.marca-alquila h1, .marca-alquila h2, .marca-alquila h3, .marca-alquila legend, .marca-alquila .btn, .precio, .marca-alquila .total strong {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif;
}
.marca-alquila h1, .marca-alquila h2, .marca-alquila h3, .marca-alquila legend { text-transform: uppercase; color: #fff; letter-spacing: .01em; }
.marca-alquila h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.08; }
.marca-alquila .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-alquila .seccion { border-top: 0; padding: 4rem 0; }

/* Etiquetas tipo sistema: «[ PACKS / 01—05 ]», «● SISTEMA EN LÍNEA» */
.sistema { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--violeta); margin: 0 0 .9rem; }
.pildora { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1rem; border-radius: 999px; background: rgba(23, 29, 58, .7); border: 1px solid rgba(167, 139, 250, .45); box-shadow: 0 0 18px rgba(167, 139, 250, .2); font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1.4rem; }
.pildora::before, .en-linea::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cian); box-shadow: 0 0 10px var(--cian); }

/* Cabecera */
.marca-alquila .cabecera { background: rgba(8, 13, 27, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.cabecera .envoltura { justify-content: space-between; }
.marca-alquila .logo span { font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 1.25rem; line-height: 1; }
.marca-alquila .logo small { display: block; font-size: .62rem; font-weight: 500; letter-spacing: .3em; color: var(--muted); margin-top: .3rem; }
.logo-icono { width: 44px; height: 44px; filter: drop-shadow(0 0 8px rgba(143, 168, 255, .6)); }
.cab-reservar { min-height: 46px; padding: .55rem 1.3rem; }

/* Botones */
.marca-alquila .btn { text-transform: uppercase; letter-spacing: .06em; border-radius: 14px; }
.marca-alquila .btn-principal { background: var(--grad); color: var(--on-grad); box-shadow: 0 8px 30px rgba(120, 140, 255, .35); }
.marca-alquila .btn-secundario { background: rgba(23, 29, 58, .7); color: #fff; border: 1px solid rgba(167, 139, 250, .5); }
.marca-alquila .btn:hover { filter: brightness(1.1); }
.btn-grande { min-height: 60px; font-size: 1.08rem; padding: .9rem 2rem; }

/* Portada: pase de fotos reales de noche a pantalla completa, con el texto encima (sin JavaScript) */
.heroe-pase { position: relative; min-height: 88vh; display: grid; align-items: end; overflow: hidden; padding: 6rem 0 4.5rem; border-bottom: 1px solid rgba(167, 139, 250, .35); }
.pase { position: absolute; inset: 0; }
.pase img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: pase 18s infinite; transform: scale(1.04); }
.pase img:nth-child(1) { animation-delay: 0s; } .pase img:nth-child(2) { animation-delay: 6s; } .pase img:nth-child(3) { animation-delay: 12s; }
@keyframes pase { 0% { opacity: 0; transform: scale(1.04); } 6% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pase img { animation: none; } .pase img:first-child { opacity: 1; } }
.heroe-pase::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 13, 27, .92) 0%, rgba(8, 13, 27, .65) 45%, rgba(8, 13, 27, .15) 100%), linear-gradient(0deg, rgba(8, 13, 27, 1) 0%, transparent 35%); }
.heroe-pase .envoltura { position: relative; z-index: 1; width: 100%; }
.heroe-texto { max-width: 40rem; }
.heroe h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: .98; margin-bottom: 1.2rem; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.heroe-sub { font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: #fff; margin-bottom: 1.8rem; max-width: 32rem; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.heroe .acciones { margin-top: 0; }
.ventajas { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; color: #e6e9ff; font-size: 1rem; }
.ventajas li::before { content: "✦ "; color: var(--cian); }
.pase-etiqueta { position: absolute; right: 1.5rem; bottom: 1.2rem; z-index: 1; margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* Carrusel «Nuestros eventos»: se desliza con el dedo; cada foto encaja en su sitio */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 26rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .4rem .2rem 1rem; margin-top: 1.4rem; scrollbar-color: var(--violeta) transparent; }
.carrusel img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); border: 1px solid rgba(167, 139, 250, .4); box-shadow: 0 0 22px rgba(139, 92, 246, .25); scroll-snap-align: start; display: block; }
.carrusel-ayuda { margin: .3rem 0 0; font-size: .95rem; }

/* Packs: tarjetas de cristal numeradas */
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.3rem; margin-top: 1.8rem; }
.pack { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 45%), var(--surface); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--borde-luz); }
.pack > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; } /* height:auto: si no, manda el atributo height */
.pack-cuerpo { padding: 1.2rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.pack-num { font-family: 'Space Grotesk', sans-serif; font-size: .8rem; letter-spacing: .2em; color: var(--muted); margin: 0 0 .3rem; }
.pack h3 { font-size: 1.35rem; margin-bottom: .25rem; }
.precio { font-size: 3.3rem; font-weight: 700; line-height: 1.05; margin: 0 0 .9rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack ul { margin: 0 0 1.3rem; padding: 0; list-style: none; color: var(--muted); }
.pack ul li { margin-bottom: .35rem; padding-left: 1.25rem; position: relative; }
.pack ul li::before { content: "✦"; position: absolute; left: 0; color: var(--cian); font-size: .8rem; top: .15rem; }
.pack .btn { margin-top: auto; width: 100%; }
.pack-destacado { border-color: rgba(167, 139, 250, .75); box-shadow: 0 0 0 1px rgba(167, 139, 250, .45), 0 0 38px rgba(139, 92, 246, .4); }
.sello { position: absolute; top: .9rem; left: .9rem; z-index: 1; margin: 0; background: var(--grad); color: var(--on-grad); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .85rem; border-radius: 999px; }
.incluido { margin-top: 1.6rem; font-size: 1.02rem; font-weight: 700; color: var(--ok); }

/* Extras */
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.1rem; margin-top: 1.5rem; }
.extra { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--borde-luz); }
.extra img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.extra p { margin: .8rem 1.1rem 0; font-size: 1.05rem; }
.extra .precio-p { margin: .1rem 1.1rem 1rem; font-family: 'Space Grotesk', sans-serif; font-size: 2rem; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mas-extras { margin-top: 1.1rem; font-size: 1.02rem; }

/* Reserva */
.marca-alquila .reserva { max-width: 48rem; margin-top: 1.5rem; background: var(--surface); backdrop-filter: blur(8px); border: 1px solid rgba(167, 139, 250, .45); box-shadow: 0 0 40px rgba(139, 92, 246, .22); }
.marca-alquila .reserva fieldset { border-color: var(--line); }
.reserva legend { font-size: 1.02rem; color: var(--cian); letter-spacing: .08em; }
.elegir { display: grid; gap: .6rem; margin-bottom: .9rem; }
.opcion { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: .7rem; margin: 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; font-weight: 500; }
.opcion input { width: 22px; height: 22px; margin: 0; accent-color: var(--violeta); }
.opcion b { font-family: 'Space Grotesk', sans-serif; color: #fff; white-space: nowrap; font-size: 1.08rem; }
.opcion:has(input:checked) { border-color: var(--violeta); background: rgba(139, 92, 246, .14); box-shadow: 0 0 20px rgba(139, 92, 246, .3); }
.marca-alquila input:not([type=checkbox]):not([type=radio]), .marca-alquila select, .marca-alquila textarea { background: rgba(8, 13, 27, .7); border: 1px solid rgba(148, 163, 255, .25); }
.marca-alquila input:focus, .marca-alquila select:focus, .marca-alquila textarea:focus { border-color: var(--cian); box-shadow: 0 0 14px rgba(94, 231, 255, .35); outline: none; }
.a-medida { display: none; }
.reserva.es-a-medida .a-medida { display: block; }
.total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .9rem; margin: .6rem 0 1.1rem; padding: 1.1rem 1.3rem; border-radius: 16px; background: rgba(8, 13, 27, .75); border: 1px solid rgba(94, 231, 255, .45); box-shadow: 0 0 24px rgba(94, 231, 255, .18); }
.total span { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.total strong { font-size: 2.7rem; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.total small { color: var(--muted); }
.reserva button[type=submit] { width: 100%; }
.nota-pago { margin: 1rem 0 0; color: var(--muted); }
.marca-alquila .pie { border-top: 1px solid var(--line); }

/* Félix, el guía: botón flotante + panel de conversación con botones (sin IA: recorridos fijos) */
.felix-boton { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; align-items: center; gap: .7rem; padding: .45rem 1.1rem .45rem .45rem; border-radius: 999px; background: rgba(17, 22, 45, .94); border: 1px solid rgba(167, 139, 250, .6); box-shadow: 0 0 30px rgba(139, 92, 246, .45); color: #fff; font: inherit; cursor: pointer; text-align: left; }
.felix-boton img { width: 52px; height: 52px; object-fit: contain; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .35), transparent 70%); }
.felix-boton strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; }
.felix-boton small { color: var(--muted); font-size: .88rem; }
.felix-panel { position: fixed; right: 1rem; bottom: 6.2rem; z-index: 41; width: min(25rem, calc(100vw - 2rem)); max-height: calc(100vh - 8rem); overflow-y: auto; padding: 1.1rem 1.2rem 1.2rem; border-radius: 22px; background: rgba(13, 18, 38, .97); border: 1px solid rgba(167, 139, 250, .6); box-shadow: 0 0 50px rgba(139, 92, 246, .45); }
.marca-alquila [hidden] { display: none !important; } /* los botones de Félix solo aparecen con JavaScript */
.felix-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.en-linea { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Space Grotesk', sans-serif; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cian); }
.felix-cerrar { background: none; border: 0; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; }
.felix-dice { margin: 0 0 .9rem; font-size: 1.08rem; }
.felix-dice strong { color: #fff; }
.felix-opciones { display: grid; gap: .5rem; }
.felix-opciones button { min-height: 50px; padding: .6rem 1rem; border-radius: 14px; border: 1px solid rgba(167, 139, 250, .5); background: rgba(139, 92, 246, .14); color: #fff; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.felix-opciones button.principal { background: var(--grad); color: var(--on-grad); border: 0; font-weight: 700; text-align: center; }
.felix-opciones button:hover { filter: brightness(1.15); }
.felix-recomienda { margin: 0 0 1rem; padding: 1rem; border-radius: 16px; border: 1px solid rgba(94, 231, 255, .45); background: rgba(8, 13, 27, .7); }
.felix-recomienda b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; text-transform: uppercase; }
.felix-recomienda span { font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 760px) {
  .heroe-pase { min-height: 86vh; padding: 4rem 0 3.5rem; }
  .heroe-pase::after { background: linear-gradient(0deg, rgba(8, 13, 27, .97) 0%, rgba(8, 13, 27, .75) 45%, rgba(8, 13, 27, .25) 100%); }
  .heroe .acciones .btn { width: 100%; }
  .pase-etiqueta { display: none; } /* en el móvil la taparía el botón de Félix */
  .precio { font-size: 2.9rem; }
  .marca-alquila .logo span { font-size: 1.1rem; }
  .logo-icono { width: 38px; height: 38px; }
  .felix-boton small { display: none; }
  .felix-boton { padding-right: .9rem; }
  .felix-boton img { width: 46px; height: 46px; }
}