/* --- TIPOGRAFÍAS ALOJADAS EN NUESTRO SERVIDOR ---------------------------
   Antes esto era un @import a Google Fonts: el navegador de cada cliente enviaba su IP a
   Google antes de aceptar nada. Poppins no se carga: sus reglas estan pisadas con !important por
   la seccion "CANON VIRTUA" del final de este archivo, que fija Space Grotesk.
   Los .woff2 son variables: un solo fichero cubre todos los pesos.
   ----------------------------------------------------------------------- */
@font-face {
    font-family: 'Syne';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/syne-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-variable.woff2') format('woff2');
}

/* --- BOX SIZING GLOBAL --- */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- VARIABLES CYBERPUNK --- */
:root {
    /* Colores Principales */
    --primary-color: #5aa3ff;
    /* Azul solicitado */
    --accent-color: #00e676;
    /* Verde Neón solicitado */
    --error-color: #ff0055;
    /* Rojo neón para errores */

    /* Fondos */
    --bg-deep-space: #02051d;
    --bg-glass: rgba(4, 8, 36, 0.75);
    --bg-glass-hover: rgba(4, 8, 36, 0.9);

    /* Textos */
    --text-main: #e0e0e0;
    --text-muted: #a9bcc6;
    --text-highlight: #ffffff;
    --text-light: #ffffff;

    /* Efectos */
    --neon-glow-primary: 0 0 10px rgba(90, 163, 255, 0.5), 0 0 20px rgba(90, 163, 255, 0.3);
    --neon-glow-accent: 0 0 10px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.3);
    --border-glass: 1px solid rgba(90, 163, 255, 0.3);
    --border-glass-hover: 1px solid rgba(90, 163, 255, 0.8);

    /* UI */
    --border-radius-main: 12px;
    --border-radius-button: 4px;
    /* Más técnico/cuadrado */
}

/* --- BACKGROUND FX (Scanlines & Noise) --- */
.background-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.scanlines {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0) 50%,
            rgba(0, 0, 0, 0.2) 50%,
            rgba(0, 0, 0, 0.2));
    background-size: 100% 4px;
    position: absolute;
    animation: scanlineScroll 60s linear infinite;
    opacity: 0.3;
}

.noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.4;
}

@keyframes scanlineScroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 100%;
    }
}

/* --- ESTILOS GENERALES Y RESET --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-deep-space);
    color: var(--text-main);
    margin: 0;
    padding: 20px;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Glassmorphism Container */
#virtua-booking-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 40px;
    background: var(--bg-glass) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--border-glass);
    border-radius: var(--border-radius-main);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

/* Decoración estilo "Tech" en las esquinas del contenedor */
#virtua-booking-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0.8;
}

#virtua-booking-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0.8;
}

/* Logo */
.logo-container {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.logo-container img {
    max-width: 220px;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(90, 163, 255, 0.4));
}

/* Headings */
#virtua-booking-container h1,
#virtua-booking-container h2,
#virtua-booking-container h3,
#virtua-booking-container h4,
#virtua-booking-container h5 {
    color: var(--primary-color) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(90, 163, 255, 0.4);
    font-weight: 700;
}

#step-1-product h2 {
    border-bottom: 1px solid rgba(90, 163, 255, 0.2);
    padding-bottom: 15px;
    margin-bottom: 30px;
    text-align: center;
}

/* El título de la aventura respeta su capitalización real (nombres propios, largos) */
#virtua-booking-container #aventura-title {
    text-transform: none;
    letter-spacing: normal;
    font-size: 1.4em;
    line-height: 1.2;
}

/* --- STEP INDICATOR (Barra de Progreso Futurista) --- */
.step-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Alineación vertical centrada */
    margin-bottom: 50px;
    position: relative;
    padding: 0 40px;
    /* Espacio para que la línea no toque los bordes */
}

/* Línea de fondo (apagada) */
.step-indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 55px;
    /* Ajuste fino basado en el ancho de los items */
    right: 55px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    z-index: 0;
}

/* Línea de progreso (iluminada) - Simulada para los pasos activos */
.step-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    /* Ancho fijo para centrado */
}

/* El círculo del número */
.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Mantener circular o cambiar a hexágono si prefieres */
    background-color: var(--bg-deep-space);
    border: 2px solid var(--text-muted);
    color: var(--text-muted);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.1em;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
    /* Separación con el texto */
}

/* Texto debajo del paso */
.step-label {
    position: absolute;
    top: 50px;
    /* Posición absoluta para no afectar la línea central */
    font-size: 0.8em;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Estado Activo (Paso actual y completados) */
.step-item.active .step-number {
    border-color: var(--accent-color);
    color: var(--bg-deep-space);
    background-color: var(--accent-color);
    box-shadow: 0 0 15px var(--accent-color);
    transform: scale(1.1);
}

.step-item.active .step-label {
    color: var(--accent-color) !important;
    text-shadow: 0 0 5px rgba(0, 230, 118, 0.5);
    font-weight: 700;
}

/* --- STEPS ANIMATION --- */
.step {
    display: none;
    animation: fadeInSlide 0.5s ease-out forwards;
}

.step.active {
    display: block;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* --- PRODUCT CARDS (Holographic Cards) --- */
.product-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

#virtua-booking-container .product-card,
.product-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid rgba(90, 163, 255, 0.2) !important;
    border-radius: var(--border-radius-main);
    padding: 30px;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(5px);
}

.product-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--primary-color) !important;
    box-shadow: var(--neon-glow-primary) !important;
    background: rgba(90, 163, 255, 0.05) !important;
}

.product-card h3 {
    font-size: 1.4em;
    margin-bottom: 15px;
    min-height: 2.8em;
    /* Alinear alturas */
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card p {
    color: var(--text-muted) !important;
    font-size: 0.9em;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Custom Selects */
select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    background-color: rgba(2, 5, 29, 0.8) !important;
    border: 1px solid #37474f !important;
    color: var(--text-main) !important;
    font-family: 'Poppins', sans-serif;
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%235aa3ff%22%20d%3D%22M287%2C197.3L159.1%2C69.3c-3.1-3.1-8.2-3.1-11.3%2C0L5.3%2C197.3c-3.1%2C3.1-3.1%2C8.2%2C0%2C11.3l19.6%2C19.6c3.1%2C3.1%2C8.2%2C3.1%2C11.3%2C0l116.6-116.6c3.1-3.1%2C8.2-3.1%2C11.3%2C0l116.6%2C116.6c3.1%2C3.1%2C8.2%2C3.1%2C11.3%2C0l19.6-19.6C290.1%2C205.5%2C290.1%2C200.4%2C287%2C197.3z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px;
    transition: all 0.3s;
}

select:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 10px rgba(90, 163, 255, 0.2);
}

select option {
    background-color: var(--bg-deep-space);
}

/* --- BOTONES FUTURISTAS --- */
.btn-primary,
.btn-secondary,
.btn-validate-code {
    display: inline-block;
    padding: 14px 30px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

#virtua-booking-container .btn-primary {
    background: var(--primary-color) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(90, 163, 255, 0.3);
}

#virtua-booking-container .btn-primary:hover {
    background: #fff !important;
    color: var(--primary-color) !important;
    box-shadow: 0 0 25px rgba(90, 163, 255, 0.6);
    transform: translateY(-2px);
}

/* Efecto Ripple instantáneo en click */
.btn-primary:active {
    transform: scale(0.98);
}

#virtua-booking-container .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--text-muted) !important;
    color: var(--text-muted) !important;
}

#virtua-booking-container .btn-secondary:hover {
    border-color: #fff !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

#virtua-booking-container .btn-validate-code {
    background: var(--text-muted) !important;
    color: #000 !important;
    padding: 10px 20px;
    font-size: 0.9em;
    clip-path: none;
    /* Botón pequeño normal */
    border-radius: 4px;
}

#virtua-booking-container .btn-validate-code:hover {
    background: #fff !important;
}

/* --- CALENDARIO (GRID DE DATOS) --- */
.calendar-group-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.calendar-column {
    flex: 1.5;
    min-width: 300px;
}

.group-details-column,
.standard-details-column,
.aventura-details-column {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* En modo aventura, la tarjeta va antes del calendario (izquierda en escritorio, arriba en móvil) */
.aventura-details-column {
    order: -1;
}

/* Caja resaltada del selector de jugadores (modo aventura) */
.aventura-players-box {
    margin: 16px 0 4px;
    padding: 16px;
    border-radius: 10px;
    border: 2px solid var(--primary-color);
    background: rgba(90, 163, 255, 0.08);
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.aventura-players-label {
    display: block;
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 1.05em;
    color: var(--text-light, #fff);
}

.aventura-players-box select {
    width: 100%;
}

.aventura-players-hint {
    margin: 10px 0 0;
    font-size: 0.85em;
    color: var(--primary-color);
    display: none;
}

/* Mientras no han elegido jugadores: pulso para llamar la atención + mostrar la ayuda */
.aventura-players-box.needs-attention {
    animation: aventuraPulse 1.8s ease-in-out infinite;
}

.aventura-players-box.needs-attention .aventura-players-hint {
    display: block;
}

@keyframes aventuraPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(90, 163, 255, 0.45);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(90, 163, 255, 0);
    }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .aventura-players-box.needs-attention {
        animation: none;
        box-shadow: 0 0 12px rgba(90, 163, 255, 0.4);
    }
}

/* Lista de datos de la aventura (precio, jugadores, duración, edad) */
.aventura-specs {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.aventura-specs li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.95em;
}

.aventura-specs li:last-child {
    border-bottom: none;
}

.aventura-specs .spec-label {
    color: var(--text-muted);
}

.aventura-specs .spec-value {
    margin-left: auto;
    font-weight: 700;
    color: var(--text-light, #fff);
}

/* Calendario bloqueado hasta que se elige el número de jugadores (modo aventura) */
#calendar.calendar-locked {
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.6);
    transition: opacity 0.3s ease;
}

/* FullCalendar Customization */
.fc {
    font-family: 'Poppins', sans-serif;
}

.fc .fc-toolbar-title {
    color: var(--text-main) !important;
    font-size: 1.2em;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fc .fc-button-primary {
    background-color: transparent !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.3s;
}

.fc .fc-button-primary:hover {
    background-color: var(--primary-color) !important;
    color: #000 !important;
    box-shadow: var(--neon-glow-primary);
}

.fc-theme-standard .fc-scrollgrid {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.fc-col-header-cell-cushion {
    color: var(--primary-color) !important;
    padding: 10px 0;
}

.fc-daygrid-day-number {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.8em;
    padding: 5px;
}

/* Celdas del día */
#virtua-booking-container .fc-daygrid-day-frame {
    transition: all 0.2s;
    background: transparent;
}

/* Días pasados */
#virtua-booking-container .fc-day-past .fc-daygrid-day-frame,
#virtua-booking-container .fc-day-disabled .fc-daygrid-day-frame {
    background: rgba(0, 0, 0, 0.3) !important;
    opacity: 0.3 !important;
}

/* Días disponibles (Interactive Data Nodes) */
.fc-day-available .fc-daygrid-day-frame {
    background: rgba(0, 230, 118, 0.05) !important;
    /* Verde muy sutil */
    border: 1px solid rgba(0, 230, 118, 0.3) !important;
    position: relative;
    overflow: hidden;
}

/* Glow line que barre el día disponible */
.fc-day-available .fc-daygrid-day-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 230, 118, 0.2), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    20% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.fc-day-available .fc-daygrid-day-frame:hover {
    background: rgba(0, 230, 118, 0.2) !important;
    box-shadow: var(--neon-glow-accent);
    transform: scale(1.05);
    z-index: 10;
}

.fc-day-available .fc-daygrid-day-number {
    color: var(--accent-color) !important;
    font-weight: 700;
}

/* Día Seleccionado */
#virtua-booking-container .fc-day-selected .fc-daygrid-day-frame {
    background: var(--accent-color) !important;
    box-shadow: 0 0 20px var(--accent-color) !important;
    border-color: #fff !important;
}

#virtua-booking-container .fc-day-selected .fc-daygrid-day-number {
    color: #000 !important;
}

/* --- TIME SLOTS --- */
#time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 15px;
    margin-top: 25px;
}

#virtua-booking-container .time-slot {
    background: rgba(2, 5, 29, 0.6) !important;
    color: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    /* Monospace para datos */
    font-weight: 700;
    transition: all 0.2s;
    position: relative;
}

#virtua-booking-container .time-slot:hover {
    background: var(--accent-color) !important;
    color: #000 !important;
    box-shadow: var(--neon-glow-accent);
    transform: translateY(-2px);
}

#virtua-booking-container .time-slot.selected {
    background: var(--primary-color) !important;
    color: #000 !important;
    border-color: var(--primary-color) !important;
    box-shadow: var(--neon-glow-primary);
}

/* --- FORMS & SUMMARY --- */
#booking-form input,
.code-section input {
    background-color: rgba(2, 5, 29, 0.5) !important;
    border: none !important;
    border-bottom: 2px solid #37474f !important;
    border-radius: 0 !important;
    /* Estilo línea */
    color: #fff !important;
    padding: 15px 10px;
    transition: all 0.3s;
}

#booking-form input:focus,
.code-section input:focus {
    outline: none;
    border-bottom-color: var(--primary-color) !important;
    background: rgba(90, 163, 255, 0.05) !important;
}

.step-3-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

/* Summary & Price Box */
#virtua-booking-container .summary,
#virtua-booking-container .price-summary {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
}

#virtua-booking-container .summary h3 {
    font-size: 1.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.summary li {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
    padding: 10px 0;
}

.price-summary p {
    color: #fff !important;
    font-size: 1.1em;
    display: flex;
    justify-content: space-between;
}

.price-summary #final-price {
    font-size: 1.4em;
    color: var(--primary-color) !important;
    text-shadow: 0 0 10px rgba(90, 163, 255, 0.6);
}

/* Code Section */
#virtua-booking-container .code-section {
    border: 1px dashed rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
}

/* Required Indicator */
.required-indicator {
    color: var(--error-color) !important;
    text-shadow: 0 0 5px var(--error-color);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    #virtua-booking-container {
        padding: 20px;
        margin: 10px;
        overflow-x: hidden;
    }

    .step-indicator {
        padding: 0;
    }

    .step-item {
        width: 40px;
    }

    .step-number {
        width: 30px;
        height: 30px;
        font-size: 0.9em;
    }

    .step-label {
        font-size: 0.6em;
        top: 40px;
    }

    .step-3-grid {
        grid-template-columns: 1fr;
    }

    .calendar-group-container {
        flex-direction: column;
    }

    .product-selection {
        flex-direction: column;
        align-items: center; /* Alinea las tarjetas al centro */
    }

    /* Tarjetas de producto: permitir que se encogan */
    .product-card,
    #virtua-booking-container .product-card,
    #virtua-booking-container .product-card-valentine {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    /* Columna del calendario */
    .calendar-column {
        min-width: 0;
    }

    /* 🔴 EL CUMPLEAÑOS NO SE PODIA RESERVAR DESDE EL MOVIL.
       Alejandro, 06/10/2026: «se ensancha toda la tarjeta y no se ve ni el
       sabado ni el domingo... tampoco se puede pasar de mes, toda la parte
       derecha queda fuera de la pantalla».

       Pasaba SOLO en cumpleaños y no en la reserva estandar, y el motivo era
       el contenido, no el CSS: el titulo de esta columna era
       «Cumpleaños/Grupos/Team Building», y sin espacios alrededor de las
       barras el navegador trata «Cumpleaños/Grupos/Team» como UNA SOLA
       PALABRA QUE NO PUEDE PARTIR. En un h3 sobre 360 px eso es mas ancho que
       el movil. El titulo de la estandar es «Reserva Estandar»: su palabra mas
       larga cabe, y por eso esa si funcionaba.

       Un item de flex no puede encogerse por debajo de su contenido minimo
       (min-width: auto), asi que la columna se iba de ancho. Y como `body`
       lleva `overflow-x: hidden`, lo que se sale NO se recorta y se puede
       desplazar: se recorta y queda INALCANZABLE. De ahi el «no hay forma».

       El texto ya se ha cambiado a puntos medios, pero esto se queda como red:
       cualquier palabra larga que entre aqui el dia de manana —un nombre de
       pack, una traduccion— volveria a romperlo. */
    .group-details-column,
    .standard-details-column,
    .aventura-details-column {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Y que el calendario nunca pueda quedar inalcanzable: si por lo que sea
       la tabla no cabe, que se pueda arrastrar en vez de perderse detras del
       recorte del body. */
    #calendar {
        overflow-x: auto;
    }
}

/* Pantallas muy estrechas (iPhone SE, móviles pequeños) */
@media (max-width: 400px) {
    body {
        padding: 8px;
    }

    #virtua-booking-container {
        padding: 15px;
        margin: 5px;
    }

    .logo-container {
        margin-bottom: 25px;
    }

    .logo-container img {
        max-width: 160px;
    }

    .product-card,
    #virtua-booking-container .product-card,
    #virtua-booking-container .product-card-valentine {
        padding: 20px;
    }

    .product-selection {
        gap: 20px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 12px 20px;
        font-size: 0.9em;
    }

    .step-indicator {
        margin-bottom: 35px;
    }

    /* Calendario: reducir padding de botones de navegación */
    .fc .fc-button-primary {
        padding: 4px 8px !important;
        font-size: 0.85em;
    }

    .fc .fc-toolbar-title {
        font-size: 1em;
    }

    /* Time slots más compactos */
    #time-slots {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
        gap: 10px;
    }

    /* Secciones de código/descuento */
    .code-section {
        padding: 15px !important;
    }

    .code-wrapper {
        flex-direction: column;
    }
}

/* --- TÉRMINOS Y CONDICIONES (MODAL CYBERPUNK) --- */
.terms-notice {
    font-size: 0.85em;
    color: var(--text-muted);
    text-align: center;
    margin-top: 15px;
}

.terms-notice a {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dashed var(--primary-color);
    transition: all 0.2s;
}

.terms-notice a:hover {
    color: #fff;
    border-bottom-style: solid;
    text-shadow: 0 0 8px var(--primary-color);
}

/* --- NEWSLETTER CHECKBOX (Discreto) --- */
.newsletter-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8em;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 12px;
    text-align: left;
    line-height: 1.4;
}

.newsletter-checkbox input[type="checkbox"] {
    display: none;
}

.newsletter-checkmark {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1px solid var(--text-muted);
    border-radius: 3px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.newsletter-checkbox input[type="checkbox"]:checked+.newsletter-checkmark {
    background: var(--text-muted);
    border-color: var(--text-muted);
}

.newsletter-checkbox input[type="checkbox"]:checked+.newsletter-checkmark::after {
    content: '✓';
    color: var(--bg-deep-space);
    font-size: 11px;
    font-weight: bold;
}

.newsletter-checkbox:hover .newsletter-checkmark {
    border-color: var(--primary-color);
}

.newsletter-checkbox:hover {
    color: var(--text-main);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    /* Fondo más oscuro */
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: var(--bg-glass-hover) !important;
    padding: 40px;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius-main);
    box-shadow: 0 0 50px rgba(90, 163, 255, 0.2);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    color: var(--text-main);
}

.modal-content h2,
.modal-content h4 {
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--error-color);
    font-size: 2em;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close-btn:hover {
    transform: scale(1.1);
    text-shadow: 0 0 10px var(--error-color);
}

/* --- ANIMACIONES DE TRANSICIÓN TIPO PORTAL --- */

/* Entrada del paso: fade + desplazamiento corto, rápido y sobrio */
.step.active {
    display: block;
    animation: stepIn 0.32s ease-out forwards;
    transform-origin: center center;
}

@keyframes stepIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Destello de transición: muy sutil, un tenue velo azulado que se desvanece rápido */
body.scan-active::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
            rgba(90, 163, 255, 0.12) 0%,
            transparent 60%);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    animation: portalFlash 0.5s ease-out forwards;
}

@keyframes portalFlash {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Efecto Click Botón (Onda de choque) */
.btn-primary:active {
    transform: scale(0.92);
}

.btn-primary:focus {
    animation: buttonShockwave 0.4s ease-out;
}

@keyframes buttonShockwave {
    0% {
        box-shadow: 0 0 0 0 rgba(90, 163, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.8);
    }

}

/* --- TARJETA SAN VALENTÍN (Rosa Millennial Oscuro) --- */
:root {
    --valentine-pink: #D68A8A;
    /* Rosa más oscuro */
    --valentine-pink-dark: #C06C6C;
    --valentine-bg-solid: #D68A8A;
    /* Usar el mismo rosa oscuro para fondo */
    --valentine-text: #4A2020;
    /* Texto aún más oscuro para contraste */
    --valentine-badge-red: #B71C1C;
    /* Rojo intenso para cartel, título y botón */
    --valentine-text-details: #2C0B0B;
    /* Casi negro para los detalles finos */
}

/* Aumentamos especificidad para ganar al estilo base que tiene !important */
#virtua-booking-container .product-card-valentine {
    /* Propiedades base copiadas de product-card para ser independiente */
    border-radius: var(--border-radius-main);
    padding: 30px;
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(5px);

    /* Propiedades específicas de San Valentín */
    background: var(--valentine-bg-solid) !important;
    border: 2px solid #fff !important;
    position: relative;
    overflow: visible;
    text-align: center !important;
    box-shadow: 0 0 15px rgba(247, 202, 201, 0.3) !important;
    margin: 10px;
    /* Asegurar margen si flex gap no aplica */
}

#virtua-booking-container .product-card-valentine:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #fff !important;
    box-shadow: 0 0 30px rgba(247, 202, 201, 0.6) !important;
    background: #e2a0a0 !important;
    /* Un poco más claro al hover */
}

.product-card-valentine h3 {
    color: var(--valentine-badge-red) !important;
    /* Título en ROJO */
    text-shadow: none !important;
    margin-top: 20px;
    margin-bottom: 5px;
    font-weight: 800;
    line-height: 1.2 !important;
    /* Mejor espaciado para las 2 líneas */
}

.product-card-valentine p {
    color: var(--valentine-text) !important;
    text-shadow: none !important;
    margin-bottom: 10px;
}

.valentine-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff1744, #b71c1c);
    /* Rojo intenso */
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    animation: valentinePulse 2s ease-in-out infinite;
}

@keyframes valentinePulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.05);
    }
}

.valentine-price {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 5px 0 15px 0;
}

.original-price-crossed {
    color: #4A2020 !important;
    /* Marrón oscuro en vez de gris */
    text-decoration: line-through;
    font-size: 1.1em;
    opacity: 0.8;
}

.valentine-final-price {
    color: var(--valentine-badge-red) !important;
    /* Precio en ROJO */
    font-size: 2.2em;
    font-weight: 800;
    text-shadow: none !important;
}

.valentine-details {
    margin-bottom: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    /* Un poco más de espacio */
}

.valentine-validity-buy,
.valentine-validity-use {
    color: var(--valentine-text-details) !important;
    /* Casi negro */
    font-size: 0.9em !important;
    /* Un pelín más grande */
    font-weight: 800 !important;
    /* Extra negrita */
    font-style: normal;
    margin: 0 !important;
    line-height: 1.4;
}

.valentine-validity-use {
    color: var(--valentine-text-details) !important;
    /* Mantener oscuro */
}

.btn-valentine {
    background: #fff !important;
    color: var(--valentine-badge-red) !important;
    /* Texto ROJO */
    border: 2px solid var(--valentine-badge-red) !important;
    /* Borde ROJO */
    margin-top: auto;
    font-weight: 800;
    /* Más negrita */
}

.btn-valentine:hover {
    background: var(--valentine-badge-red) !important;
    /* Fondo ROJO */
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(183, 28, 28, 0.4) !important;
}

/* --- VALENTINE THEME OVERRIDES (Step 3) --- */

/* Main Container Override (RED BACKGROUND) */
#virtua-booking-container.valentine-theme {
    background: #B71C1C !important;
    /* Changed from Pink to Red */
    border: 2px solid white !important;
    box-shadow: 0 0 30px rgba(183, 28, 28, 0.5) !important;
}

/* Decoración "Tech" (líneas) en rosa */
#virtua-booking-container.valentine-theme::before,
#virtua-booking-container.valentine-theme::after {
    background: linear-gradient(90deg, transparent, white, transparent) !important;
}

/* --- CARDS (PINK BACKGROUND) --- */
/* Use ID selector to beat the specificity of the default rules (#virtua-booking-container .summary) */
#virtua-booking-container.valentine-theme .summary,
#virtua-booking-container.valentine-theme .price-summary,
#virtua-booking-container.valentine-theme .code-section,
#virtua-booking-container.valentine-theme .form-column {
    background: #D68A8A !important;
    /* PINK again */
    border: 2px solid white !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    padding: 25px !important;
}

/* --- TEXT COLORS (DARK RED on PINK) --- */
#virtua-booking-container.valentine-theme .summary h3,
#virtua-booking-container.valentine-theme .price-summary h3,
#virtua-booking-container.valentine-theme .form-column h3 {
    color: #B71C1C !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
    border-bottom-color: rgba(255, 255, 255, 0.5) !important;
}

#virtua-booking-container.valentine-theme p,
#virtua-booking-container.valentine-theme li,
#virtua-booking-container.valentine-theme label,
#virtua-booking-container.valentine-theme span,
#virtua-booking-container.valentine-theme .terms-notice,
#virtua-booking-container.valentine-theme .price-summary p,
#virtua-booking-container.valentine-theme .price-summary span,
#virtua-booking-container.valentine-theme .code-section p {
    color: #4A2020 !important;
    /* Dark Red Text */
    text-shadow: none !important;
}

#virtua-booking-container.valentine-theme .price-summary strong,
#virtua-booking-container.valentine-theme .price-summary strong span,
#virtua-booking-container.valentine-theme .price-summary #final-price {
    color: #B71C1C !important;
    /* Bright Red Highlights */
    text-shadow: none !important;
}

#virtua-booking-container.valentine-theme .validation-message {
    color: #4A2020 !important;
}

/* --- FIELDS & BUTTONS --- */
/* Inputs (White Background, Dark Red Text) */
#virtua-booking-container.valentine-theme input,
#virtua-booking-container.valentine-theme select {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #4A2020 !important;
    border: none !important;
    border-bottom: 2px solid #B71C1C !important;
    border-radius: 4px !important;
    padding: 12px 15px !important;
}

#virtua-booking-container.valentine-theme input::placeholder {
    color: rgba(74, 32, 32, 0.6) !important;
}

#virtua-booking-container.valentine-theme input:focus,
#virtua-booking-container.valentine-theme select:focus {
    background-color: #fff !important;
    box-shadow: 0 0 10px rgba(183, 28, 28, 0.2) !important;
    border-bottom-color: #B71C1C !important;
}

/* Botón Principal (ROJO con texto Blanco - Estilo original San Valentín) */
#virtua-booking-container.valentine-theme .btn-primary {
    background: #B71C1C !important;
    color: white !important;
    box-shadow: 0 0 25px 5px rgba(255, 255, 255, 1) !important;
    /* Intensive White Glow */
    border: 2px solid white !important;
    /* Thick white border for pop */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

#virtua-booking-container.valentine-theme .btn-primary:hover {
    background: white !important;
    color: #B71C1C !important;
    box-shadow: 0 0 25px 8px rgba(255, 255, 255, 1) !important;
    /* Even stronger white glow on hover */
    transform: translateY(-2px);
}

/* Validated Code Button */
#virtua-booking-container.valentine-theme .btn-validate-code {
    background: #4A2020 !important;
    color: white !important;
    border: none !important;
}

#virtua-booking-container.valentine-theme .btn-validate-code:hover {
    background: white !important;
    color: #4A2020 !important;
}

/* Links */
#virtua-booking-container.valentine-theme a {
    color: #B71C1C !important;
    font-weight: bold;
    border-bottom: 1px dashed #B71C1C !important;
}

#virtua-booking-container.valentine-theme .required-indicator {
    color: #B71C1C !important;
}

/* --- VALENTINE STEP INDICATOR --- */
#virtua-booking-container.valentine-theme .step-indicator::before {
    background-color: rgba(214, 138, 138, 0.4) !important;
}

#virtua-booking-container.valentine-theme .step-item .step-number {
    background-color: #fce4ec !important;
    border: 2px solid #D68A8A !important;
    color: #000000 !important;
    box-shadow: 0 0 8px rgba(214, 138, 138, 0.2) !important;
}

#virtua-booking-container.valentine-theme .step-item .step-label {
    color: #D68A8A !important;
}

#virtua-booking-container.valentine-theme .step-item.active .step-number {
    background-color: white !important;
    border: 3px solid #B71C1C !important;
    color: #000000 !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.1) !important;
}

#virtua-booking-container.valentine-theme .step-item.active .step-label {
    color: white !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
    font-weight: 800 !important;
}

#virtua-booking-container.valentine-theme .step-item.valentine-hidden {
    display: none !important;
}

/* --- ANTI-VALENTINE STEP INDICATOR --- */
.step-item.anti-valentine-hidden {
    display: none !important;
}

/* --- GIFT VOUCHER REDESIGN --- */
.gift-perks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 15px 0 25px 0;
    text-align: left;
    background: rgba(90, 163, 255, 0.05); /* very soft primary color background */
    border-radius: 8px;
    padding: 15px;
    border: 1px solid rgba(90, 163, 255, 0.2);
}

.gift-perks .perk {
    font-size: 0.9em;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.gift-perks .icon {
    font-size: 1.2em;
}

.gift-note {
    font-size: 0.85em;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-style: italic;
    opacity: 0.8;
}

/* --- GIFT CONFIG HIGHLIGHT --- */
.gift-config-highlight {
    background: rgba(90, 163, 255, 0.05); /* sutil blue */
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px !important;
    box-shadow: inset 0 0 15px rgba(90, 163, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.gift-config-highlight::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary-color);
    box-shadow: var(--primary-glow);
}

.gift-config-highlight label {
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 5px;
}

/* --- EXTRA GIFT CARD HIGHLIGHT --- */
#virtua-booking-container .product-card-gift {
    border-color: rgba(90, 163, 255, 0.4) !important;
    overflow: visible !important;
}

#virtua-booking-container .product-card-gift::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    box-shadow: 0 0 10px #FFD700;
    opacity: 0.8;
    border-top-left-radius: var(--border-radius-main);
    border-top-right-radius: var(--border-radius-main);
}

.gift-floating-badge {
    position: absolute;
    top: -14px;
    right: 15px;
    background: linear-gradient(135deg, #FFD700, #F39C12);
    color: #000;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    z-index: 10;
    animation: floatingBadge 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes floatingBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

#virtua-booking-container #btn-buy-gift {
    background: linear-gradient(135deg, #FFD700, #F39C12) !important;
    color: #000 !important;
    border: 1px solid #FFD700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

#virtua-booking-container #btn-buy-gift:hover {
    background: #fff !important;
    color: #000 !important;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.7);
    border-color: #fff !important;
}

/* --- CLASES UTILITARIAS PARA FLUJOS ESPECIALES --- */
.valentine-hidden,
.anti-valentine-hidden {
    display: none !important;
}

#virtua-booking-container .product-card-gift:hover::before {
    background: linear-gradient(90deg, transparent, #fff, transparent);
    box-shadow: 0 0 15px #fff;
}

/* --- ACCESIBILIDAD: respetar "reducir movimiento" del sistema --- */
@media (prefers-reduced-motion: reduce) {

    .step.active,
    .btn-primary:focus,
    .fc-day-available .fc-daygrid-day-frame::after,
    .scanlines,
    .valentine-badge,
    .gift-floating-badge {
        animation: none !important;
    }

    /* El paso aparece sin desplazamiento */
    .step.active {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Sin destello de transición */
    body.scan-active::after {
        display: none !important;
    }
}

/* ============================================================================
   CANON VIRTUA — piel alineada con la app (dark #010103 + azul #007bff,
   Syne + Space Grotesk). SOLO estilos: no toca el HTML ni la lógica del JS.
   Piloto: PASO 1 (producto) + chrome compartido (contenedor, logo, pasos).
   ============================================================================ */
:root {
    --primary-color: #007bff;
    --accent-color: #00e5ff;
    --error-color: #ef5350;
    --bg-deep-space: #010103;
    --bg-glass: rgba(12, 12, 16, 0.72);
    --bg-glass-hover: rgba(16, 16, 22, 0.85);
    --text-main: #f0f0f0;
    --text-muted: #8a8a8a;
    --text-highlight: #ffffff;
    --neon-glow-primary: 0 0 18px rgba(0, 123, 255, 0.45), 0 0 42px rgba(0, 123, 255, 0.18);
    --border-radius-main: 14px;
    --font-title: 'Syne', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
}

/* Fondo limpio: fuera scanlines, grano casi imperceptible */
body {
    font-family: var(--font-body) !important;
    background-color: #010103 !important;
}
.scanlines { display: none !important; }
.noise { opacity: 0.03 !important; }

/* Contenedor: superficie oscura, borde azul sutil, sin cristal */
#virtua-booking-container {
    background: #050507 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 123, 255, 0.18) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6) !important;
}
#virtua-booking-container::before,
#virtua-booking-container::after {
    background: linear-gradient(90deg, transparent, #007bff, transparent) !important;
    opacity: 0.7 !important;
}

/* Logo */
.logo-container img {
    filter: drop-shadow(0 0 10px rgba(0, 123, 255, 0.45)) !important;
}

/* Titulares en Syne, sin mayúsculas forzadas */
#virtua-booking-container h1,
#virtua-booking-container h2,
#virtua-booking-container h3,
#virtua-booking-container h4,
#virtua-booking-container h5 {
    font-family: var(--font-title) !important;
    color: var(--text-highlight) !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

/* Indicador de pasos */
.step-number {
    font-family: var(--font-title) !important;
    background-color: #0a0a0d !important;
    border: 2px solid #2a2a30 !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}
.step-label {
    font-family: var(--font-title) !important;
    color: var(--text-muted) !important;
    letter-spacing: 1.5px !important;
    font-weight: 700 !important;
}
.step-item.active .step-number {
    border-color: #007bff !important;
    background-color: #007bff !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(0, 123, 255, 0.6) !important;
}
.step-item.active .step-label {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Tarjetas de producto (canon: tinte azul + borde) */
#virtua-booking-container .product-card,
.product-card {
    background: rgba(0, 123, 255, 0.05) !important;
    border: 1px solid rgba(0, 123, 255, 0.24) !important;
    border-radius: 14px !important;
    backdrop-filter: none !important;
}
.product-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(0, 123, 255, 0.7) !important;
    box-shadow: var(--neon-glow-primary) !important;
    background: rgba(0, 123, 255, 0.09) !important;
}
.product-card h3 {
    font-family: var(--font-title) !important;
    color: var(--text-highlight) !important;
    font-weight: 800 !important;       /* Syne ExtraBold: fuerza de título */
    font-size: 1.3em !important;
    letter-spacing: -0.035em !important; /* tracking negativo: compacta la Syne ancha */
    line-height: 1.15 !important;
}
.product-card p {
    font-family: var(--font-body) !important;
    color: var(--text-muted) !important;
}

/* Bono regalo: tarjeta destacada en azul (no dorada) */
#virtua-booking-container .product-card-gift {
    background: rgba(0, 123, 255, 0.12) !important;
    border-color: rgba(0, 123, 255, 0.55) !important;
}
#virtua-booking-container .product-card-gift::before {
    background: linear-gradient(90deg, transparent, #007bff, transparent) !important;
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.6) !important;
}
.gift-floating-badge {
    background: #007bff !important;
    color: #ffffff !important;
    font-family: var(--font-title) !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.45) !important;
    letter-spacing: 1px !important;
}

/* Selects como inputs del canon */
select {
    font-family: var(--font-body) !important;
    background-color: #141416 !important;
    border: 1px solid #26262c !important;
    color: var(--text-main) !important;
    border-radius: 10px !important;
    padding: 13px 15px !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2C197.3L159.1%2C69.3c-3.1-3.1-8.2-3.1-11.3%2C0L5.3%2C197.3c-3.1%2C3.1-3.1%2C8.2%2C0%2C11.3l19.6%2C19.6c3.1%2C3.1%2C8.2%2C3.1%2C11.3%2C0l116.6-116.6c3.1-3.1%2C8.2-3.1%2C11.3%2C0l116.6%2C116.6c3.1%2C3.1%2C8.2%2C3.1%2C11.3%2C0l19.6-19.6C290.1%2C205.5%2C290.1%2C200.4%2C287%2C197.3z%22%2F%3E%3C%2Fsvg%3E') !important;
}
select:focus {
    border-color: #007bff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18) !important;
}
select option {
    background-color: #141416 !important;
    color: var(--text-main) !important;
}

/* Botones cápsula (canon) */
#virtua-booking-container .btn-primary,
#virtua-booking-container .btn-secondary,
#virtua-booking-container .btn-validate-code {
    font-family: var(--font-title) !important;
    clip-path: none !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    font-weight: 700 !important;
    font-size: 0.95em !important;
    padding: 15px 22px !important;
    line-height: 1.2 !important;
    overflow: visible !important;
    white-space: normal !important;    /* etiquetas largas envuelven, no se salen del borde */
}
/* Los botones principales llenan la tarjeta: nunca sobresalen */
#virtua-booking-container .btn-primary {
    width: 100% !important;
    display: block !important;
}
#virtua-booking-container .btn-primary {
    background: #007bff !important;
    color: #ffffff !important;
    box-shadow: 0 6px 22px rgba(0, 123, 255, 0.4) !important;
}
#virtua-booking-container .btn-primary:hover {
    background: #3399ff !important;
    color: #ffffff !important;
    box-shadow: 0 8px 30px rgba(0, 123, 255, 0.6) !important;
    transform: translateY(-2px) !important;
}
#virtua-booking-container .btn-secondary {
    border: 1px solid rgba(0, 123, 255, 0.5) !important;
    color: #cfe4ff !important;
}
/* Botón "Comprar Bonos Regalo": azul destacado (no dorado) */
#virtua-booking-container #btn-buy-gift {
    background: #007bff !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 22px rgba(0, 123, 255, 0.45) !important;
}
#virtua-booking-container #btn-buy-gift:hover {
    background: #3399ff !important;
    color: #ffffff !important;
    box-shadow: 0 8px 30px rgba(0, 123, 255, 0.65) !important;
    border: none !important;
}

/* ============================================================================
   CANON VIRTUA (2/2) — PASO 2 (calendario) + PASO 3 (datos/precio) + modal.
   ============================================================================ */

/* Tipografía del calendario */
.fc { font-family: var(--font-body) !important; }
.fc .fc-toolbar-title {
    font-family: var(--font-title) !important;
    color: var(--text-highlight) !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
}
.fc .fc-button-primary { border-radius: 50px !important; font-family: var(--font-title) !important; }
.fc .fc-button-primary:hover { color: #ffffff !important; }
.fc-col-header-cell-cushion { color: #7abaff !important; }

/* Días disponibles: azul en vez de verde */
.fc-day-available .fc-daygrid-day-frame {
    background: rgba(0, 123, 255, 0.06) !important;
    border: 1px solid rgba(0, 123, 255, 0.32) !important;
}
.fc-day-available .fc-daygrid-day-frame::after {
    background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.22), transparent) !important;
}
.fc-day-available .fc-daygrid-day-frame:hover {
    background: rgba(0, 123, 255, 0.2) !important;
    box-shadow: var(--neon-glow-primary) !important;
}
.fc-day-available .fc-daygrid-day-number { color: #45a3ff !important; }

/* Día seleccionado: azul canon, número blanco */
#virtua-booking-container .fc-day-selected .fc-daygrid-day-frame {
    background: #007bff !important;
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}
#virtua-booking-container .fc-day-selected .fc-daygrid-day-number { color: #ffffff !important; }

/* Franjas horarias: MUY iluminadas en cian para que llamen la atención */
#virtua-booking-container .time-slot {
    background: rgba(0, 229, 255, 0.1) !important;
    color: #00e5ff !important;
    border: 1.5px solid #00e5ff !important;
    border-radius: 10px !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: 1.05em !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.55) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.35), inset 0 0 14px rgba(0, 229, 255, 0.1) !important;
    animation: slotGlow 2.4s ease-in-out infinite !important;
}
@keyframes slotGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.3), inset 0 0 12px rgba(0, 229, 255, 0.08); }
    50%      { box-shadow: 0 0 22px rgba(0, 229, 255, 0.65), inset 0 0 16px rgba(0, 229, 255, 0.14); }
}
#virtua-booking-container .time-slot:hover {
    background: #00e5ff !important;
    color: #041016 !important;
    border-color: #00e5ff !important;
    text-shadow: none !important;
    box-shadow: 0 0 26px rgba(0, 229, 255, 0.8) !important;
    transform: translateY(-2px) scale(1.03) !important;
    animation: none !important;
}
#virtua-booking-container .time-slot.selected {
    background: #00e5ff !important;
    color: #041016 !important;
    border-color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.85) !important;
    animation: none !important;
}

/* Inputs de datos: relleno oscuro estilo app (en vez de línea) */
#booking-form input,
.code-section input {
    background-color: #141416 !important;
    border: 1px solid #26262c !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-family: var(--font-body) !important;
    padding: 14px 15px !important;
}
#booking-form input:focus,
.code-section input:focus {
    border-color: #007bff !important;
    background: #141416 !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18) !important;
}

/* Resumen y precio */
#virtua-booking-container .summary,
#virtua-booking-container .price-summary {
    background: rgba(0, 123, 255, 0.04) !important;
    border: 1px solid rgba(0, 123, 255, 0.18) !important;
    border-radius: 14px !important;
}
.price-summary #final-price {
    font-family: var(--font-title) !important;
    color: #45a3ff !important;
    text-shadow: 0 0 14px rgba(0, 123, 255, 0.6) !important;
}

/* Cajas de detalle / config del bono / caja de aventura */
.group-details-column,
.standard-details-column,
.aventura-details-column {
    background: rgba(0, 123, 255, 0.04) !important;
    border: 1px solid rgba(0, 123, 255, 0.16) !important;
    border-radius: 14px !important;
}
.gift-config-highlight {
    background: rgba(0, 123, 255, 0.06) !important;
    border: 1px solid rgba(0, 123, 255, 0.4) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 0 18px rgba(0, 123, 255, 0.1) !important;
}
.gift-config-highlight label { font-family: var(--font-title) !important; }
.aventura-players-box {
    border: 2px solid rgba(0, 123, 255, 0.6) !important;
    background: rgba(0, 123, 255, 0.08) !important;
    border-radius: 12px !important;
}

/* Modal de términos */
.modal-content {
    background: #0a0a0d !important;
    border: 1px solid rgba(0, 123, 255, 0.4) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7) !important;
}
.modal-content h2,
.modal-content h4 {
    font-family: var(--font-title) !important;
    color: var(--text-highlight) !important;
    text-transform: none !important;
}

/* Newsletter checkbox: check azul al marcar */
.newsletter-checkbox input[type="checkbox"]:checked + .newsletter-checkmark {
    background: #007bff !important;
    border-color: #007bff !important;
}
.newsletter-checkbox input[type="checkbox"]:checked + .newsletter-checkmark::after {
    color: #ffffff !important;
}

/* Accesibilidad: sin pulso de las horas si el sistema pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
    #virtua-booking-container .time-slot { animation: none !important; }
}

/* ============================================================================
   TEMA VERANO 2026 — SOLO la landing del bono de verano (?oferta=verano2026).
   Estética del email de la campaña: crema + pastel, bento redondeado, texto
   oscuro. Todo scoped a .summer-theme / .summer-body → no toca nada más.
   Paleta: crema #F5F2EB · antracita #2B2828 · gris #7A7571 · menta #E2ECE9 ·
   rosa #FAD8D6 · azul pastel #D8E2DC · mantequilla #FFF1C5.
   ============================================================================ */
body.summer-body { background-color: #EDE7DB !important; }
body.summer-body .scanlines,
body.summer-body .noise { display: none !important; }

#virtua-booking-container.summer-theme {
    background: #EDE7DB !important;
    border: 2px solid #2B2828 !important;              /* marco general que lo encierra todo */
    border-radius: 28px !important;
    box-shadow: 0 16px 0 rgba(43, 40, 40, 0.15) !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
#virtua-booking-container.summer-theme::before { display: none !important; }

/* Cinta diagonal "EDICIÓN VERANO" en la esquina del marco (que se reconozca Virtua) */
#virtua-booking-container.summer-theme::after {
    content: "EDICIÓN VERANO" !important;
    display: block !important;
    position: absolute !important;
    top: 34px !important;
    right: -54px !important;
    bottom: auto !important;
    left: auto !important;
    width: 210px !important;
    height: auto !important;
    transform: rotate(45deg) !important;
    background: #D93F35 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    text-align: center !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 8px 0 !important;
    box-shadow: 0 4px 10px rgba(43, 40, 40, 0.25) !important;
    opacity: 1 !important;
    z-index: 30 !important;
    pointer-events: none !important;
}

/* Logo del email (oscuro, apto para fondo claro) en vez del zorro blanco */
.summer-theme .logo-container img { display: none !important; }
.summer-theme .logo-container {
    height: 120px !important;
    background-image: url('/assets/images/logo-verano-2026.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}

/* Landing de un solo paso: fuera el indicador 1-2-3 */
.summer-theme .step-indicator { display: none !important; }

/* Tipografía Helvetica (como el email) */
.summer-theme,
.summer-theme p, .summer-theme span, .summer-theme label,
.summer-theme input, .summer-theme select, .summer-theme li {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.summer-theme h1, .summer-theme h2, .summer-theme h3,
.summer-theme h4, .summer-theme h5 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    color: #2B2828 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}

/* === SISTEMA BENTO: cada tarjeta lleva LÍNEA (borde) + esquina redonda + sombra ===
   OJO: con #id para ganar al canon (#virtua-booking-container .price-summary). */
#virtua-booking-container.summer-theme .gift-config-highlight,
#virtua-booking-container.summer-theme .price-summary,
#virtua-booking-container.summer-theme .summary {
    border: 1.5px solid #2B2828 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 26px rgba(43, 40, 40, 0.12) !important;
    position: relative !important;
    padding: 24px !important;
    overflow: visible !important;
}

/* Eyebrows en mono (la firma del email: "// TEXTO") */
.summer-theme .gift-config-highlight::before,
.summer-theme .price-summary::before,
.summer-theme .summary::before {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #2B2828 !important;
    opacity: 0.55;
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
    margin: 0 0 14px 0 !important;
}
.summer-theme .gift-config-highlight::before { content: "// ¿CUÁNTOS BONOS?" !important; }
.summer-theme .price-summary::before { content: "// EL PRECIO" !important; }
.summer-theme .summary::before { content: "// TU RESUMEN" !important; }

/* Color de cada tarjeta bento (con #id para ganar al canon) */
#virtua-booking-container.summer-theme .gift-config-highlight { background: #BFE6D2 !important; }   /* verde menta (cantidad) */
#virtua-booking-container.summer-theme .price-summary { background: #FFF1C5 !important; }           /* amarillo del email (precio) */
#virtua-booking-container.summer-theme .summary { background: #FFF1C5 !important; }                 /* amarillo del email (resumen) */

.summer-theme .gift-config-highlight label {
    color: #2B2828 !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1.05em !important;
}

/* Inputs y selects: blancos con LÍNEA negra (fields definidos), flecha oscura */
.summer-theme #booking-form input,
.summer-theme select {
    background-color: #FFFFFF !important;
    border: 1.5px solid #2B2828 !important;
    border-radius: 12px !important;
    color: #2B2828 !important;
    padding: 15px 16px !important;
    box-shadow: none !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%232B2828%22%20d%3D%22M287%2C197.3L159.1%2C69.3c-3.1-3.1-8.2-3.1-11.3%2C0L5.3%2C197.3c-3.1%2C3.1-3.1%2C8.2%2C0%2C11.3l19.6%2C19.6c3.1%2C3.1%2C8.2%2C3.1%2C11.3%2C0l116.6-116.6c3.1-3.1%2C8.2-3.1%2C11.3%2C0l116.6%2C116.6c3.1%2C3.1%2C8.2%2C3.1%2C11.3%2C0l19.6-19.6C290.1%2C205.5%2C290.1%2C200.4%2C287%2C197.3z%22%2F%3E%3C%2Fsvg%3E') !important;
}
.summer-theme #booking-form input::placeholder { color: #9c968c !important; }
.summer-theme #booking-form input:focus,
.summer-theme select:focus {
    border-color: #2B2828 !important;
    background: #FFFDF6 !important;
    box-shadow: 0 4px 0 rgba(43, 40, 40, 0.15) !important;
}
.summer-theme select option { background-color: #FFFFFF !important; color: #2B2828 !important; }

/* Precio: original tachado → final grande */
.summer-theme .price-summary p { font-size: 1.05em !important; margin: 4px 0 !important; }
.summer-theme .price-summary strong { font-size: 1.15em !important; font-weight: 900 !important; }
#virtua-booking-container.summer-theme .price-summary #final-price {
    font-size: 1.6em !important;
    font-weight: 900 !important;
    text-shadow: 0 0 14px rgba(230, 90, 120, 0.7) !important;   /* sombra ROSA (pisa la azul del canon) */
}
.summer-theme .price-summary #original-price { text-decoration: line-through !important; opacity: 0.6 !important; }

/* Resumen */
#virtua-booking-container.summer-theme .summary h3 {
    color: #2B2828 !important;
    border-bottom: 1.5px solid rgba(43, 40, 40, 0.2) !important;
}
.summer-theme .summary li,
.summer-theme .summary li span,
.summer-theme .summary li strong {
    color: #2B2828 !important;
    border-bottom-color: rgba(43, 40, 40, 0.12) !important;
}

/* CTA "Confirmar y Pagar" → rosa del email, línea negra y sombra dura tipo bento
   (con #id para ganar al canon #virtua-booking-container .btn-primary) */
#virtua-booking-container.summer-theme .btn-primary {
    background: #FAD8D6 !important;
    color: #2B2828 !important;
    border: 1.5px solid #2B2828 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 0 #2B2828 !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 18px 22px !important;
}
#virtua-booking-container.summer-theme .btn-primary:hover {
    background: #F6C3BF !important;
    color: #2B2828 !important;
    box-shadow: 0 3px 0 #2B2828 !important;
    transform: translateY(3px) !important;
}

/* Textos secundarios, términos y newsletter */
.summer-theme .terms-notice,
.summer-theme .newsletter-checkbox { color: #7A7571 !important; }
.summer-theme .terms-notice a,
.summer-theme a { color: #2B2828 !important; font-weight: 700 !important; }
.summer-theme .newsletter-checkmark { border: 1.5px solid #2B2828 !important; }
.summer-theme .newsletter-checkbox input[type="checkbox"]:checked + .newsletter-checkmark {
    background: #2B2828 !important;
    border-color: #2B2828 !important;
}
.summer-theme .newsletter-checkbox input[type="checkbox"]:checked + .newsletter-checkmark::after {
    color: #F5F2EB !important;
}

/* Modal de Términos en tema verano. El modal vive a nivel de <body> (fuera del
   contenedor), por eso se scopea con body.summer-body en vez de .summer-theme. */
body.summer-body .modal-content {
    background: #EDE7DB !important;
    border: 2px solid #2B2828 !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 0 rgba(43, 40, 40, 0.15) !important;
    color: #2B2828 !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
body.summer-body .modal-content h2,
body.summer-body .modal-content h4,
body.summer-body .modal-content p,
body.summer-body .modal-content span,
body.summer-body .modal-content strong,
body.summer-body #terms-text-content {
    color: #2B2828 !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    text-shadow: none !important;
}
body.summer-body .modal-content h2,
body.summer-body .modal-content h4 {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-weight: 800 !important;
}
body.summer-body .modal-close-btn { color: #2B2828 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   EL RESUMEN VIVO DE LA TARJETA DE GRUPOS  (01/10/2026)
   Aparece al elegir categoria + opcion + personas, con el total, la señal y
   lo que queda en tienda. Antes la tarjeta solo decia "Duracion: 2 horas".
   ⚠️ Usa las variables que ya existen en la hoja: nada de colores nuevos.
   ═══════════════════════════════════════════════════════════════════════════ */
.group-resumen {
    margin-top: 12px;
    padding: 12px 14px;
    text-align: left;
    border-radius: 8px;
    background: rgba(0, 123, 255, .08);
    border-left: 3px solid var(--primary-color, #007bff);
}
.group-resumen p { line-height: 1.35; }

/* --- HORA + PRECIO EN CADA FRANJA -------------------------------------------
   (clase puesta por el JS, no con :has). El nodo de disponibilidad manda `precios` por hora (tabla C). La hora manda
   visualmente y el precio va debajo, mas pequeño. Ni el precio ni el "/pers"
   fijan `color`: lo HEREDAN de .time-slot, asi que siguen siendo legibles en
   hover y en .selected sin escribir una regla por estado.
   Va al final del fichero a proposito: hay reglas de .time-slot mas arriba
   (linea ~693) y otra tanda en la ~1875, y esta tiene que ganar a las dos.
   ------------------------------------------------------------------------- */
#virtua-booking-container .time-slot.time-slot--con-precio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.15;
    padding: 8px 6px;
}

#virtua-booking-container .time-slot .ts-hora {
    font-size: 1.05em;
    font-weight: 700;
}

#virtua-booking-container .time-slot .ts-precio {
    font-size: .78em;
    font-weight: 400;
    opacity: .75;
    white-space: nowrap;
}

#virtua-booking-container .time-slot .ts-precio small {
    font-size: .85em;
    opacity: .8;
}

/* --- LA TARJETA DEL CUMPLEAÑOS -----------------------------------------------
   Alejandro, 06/10/2026: «esos 3 datos los puedes poner en una tarjeta los 3
   juntos para que se vean mejor». Nombre, edad y pastel en un solo bloque, para
   que se lean como una sola cosa y no como tres campos sueltos perdidos entre
   los añadidos y el codigo de descuento.

   Se usan los tokens del canon (--primary-color) en vez de un color nuevo: es
   el mismo recurso visual que ya usa `.group-resumen`.
   ------------------------------------------------------------------------- */
#virtua-booking-container .cumple-tarjeta {
    margin: 1.5em 0 0;
    padding: 1.1em 1.2em 0.9em;
    border-radius: 14px;
    background: rgba(0, 123, 255, .06);
    border: 1px solid rgba(0, 123, 255, .22);
    text-align: left;
}

#virtua-booking-container .cumple-tarjeta-titulo {
    margin: 0 0 .9em;
    font-size: 1em;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary-color, #007bff);
}

/* Las etiquetas y el asterisco van en la misma linea: el <span> del asterisco
   es hermano del <label>, asi que el label no puede ser `display:block`. */
#virtua-booking-container .cumple-tarjeta label {
    display: inline;
    margin: 0;
}

#virtua-booking-container .cumple-tarjeta input,
#virtua-booking-container .cumple-tarjeta select {
    display: block;
    width: 100%;
    margin: .4em 0 1em;
}

#virtua-booking-container .cumple-tarjeta select:last-of-type,
#virtua-booking-container .cumple-tarjeta #cake-type-container select {
    margin-bottom: .6em;
}

/* El asterisco de obligatorio. Rojo del canon y nunca solo-color: va con la
   nota del pie que lo explica, y los campos llevan `aria-required`. */
#virtua-booking-container .obligatorio {
    color: var(--error-color, #ff0055);
    font-weight: 700;
    margin-left: .25em;
}

#virtua-booking-container .cumple-tarjeta-pie {
    margin: .2em 0 0;
    font-size: .82em;
    opacity: .75;
}

#virtua-booking-container .cumple-tarjeta-nota {
    font-size: .9em;
    color: var(--text-light);
    margin: .2em 0 .6em;
}

/* --- EL AVISO DE CORREOS -----------------------------------------------------
   Sustituyo a la casilla «Quiero recibir ofertas» el 07/10/2026. Ver el
   comentario del index.html: una casilla premarcada no es consentimiento
   valido, y la via de la LSSI 21.2 da el mismo resultado informando.

   Las dos frases van en PARRAFOS distintos a proposito: la primera es
   ejecucion del contrato (el comprobante) y la segunda es lo comercial, que
   es lo unico de lo que uno se da de baja. Juntarlas las confunde.
   ------------------------------------------------------------------------- */
#virtua-booking-container .aviso-correos {
    margin: 1em 0 0;
    font-size: .82em;
    line-height: 1.5;
    opacity: .75;
    text-align: left;
}

#virtua-booking-container .aviso-correos span {
    display: block;
}

#virtua-booking-container .aviso-correos span + span {
    margin-top: .5em;
}

/* --- LAS TRES CASILLAS ANTES DE PAGAR · 14/10/2026 ---------------------------
   Gestoria, L1 y L2. Desmarcadas de fabrica; las dos primeras bloquean el pago
   y la tercera (ofertas) es opcional.

   ⚠️ `#booking-form input` (mas arriba) pone relleno, borde inferior y fondo
   con !important a TODOS los inputs del formulario, y deformaria una casilla.
   Por eso la casilla real se deja en pantalla pero invisible (asi se puede
   enfocar con teclado y desde script.js) y se pinta una caja propia al lado.
   ------------------------------------------------------------------------- */
#virtua-booking-container .consentimientos {
    border: 0;
    margin: 1.4em 0 0;
    padding: 0;
    min-width: 0;
    text-align: left;
}

#virtua-booking-container .consent-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 .8em;
    font-size: .88em;
    line-height: 1.45;
    color: var(--text-muted);
    cursor: pointer;
}

#booking-form .consent-item input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#virtua-booking-container .consent-box {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    border: 1.5px solid var(--text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

#virtua-booking-container .consent-item input:checked + .consent-box {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

#virtua-booking-container .consent-item input:checked + .consent-box::after {
    content: '✓';
    color: var(--bg-deep-space, #02051d);
    font-size: 12px;
    font-weight: bold;
}

#virtua-booking-container .consent-item input:focus-visible + .consent-box {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

#virtua-booking-container .consent-item:hover .consent-box {
    border-color: var(--primary-color);
}

#virtua-booking-container .consent-item a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* El aviso de «falta aceptar»: solo las dos obligatorias que sigan sin marcar */
#virtua-booking-container .consentimientos.consent-error .consent-item:not(.consent-item--opcional) input:not(:checked) + .consent-box {
    border-color: #ef5350;
    box-shadow: 0 0 0 3px rgba(239, 83, 80, .35);
}

#virtua-booking-container .consent-resumen {
    text-align: left;
    margin-top: .2em;
}

/* --- AVISO DEL BONO DE UNA ENTRADA · 14/10/2026 ------------------------------
   Informativo, no una alarma: la mayoria ya compra de dos en dos.
   ------------------------------------------------------------------------- */
#virtua-booking-container .gift-single-notice {
    margin: .9em 0 0;
    padding: .7em .9em;
    font-size: .85em;
    line-height: 1.45;
    color: var(--text-light);
    border-left: 3px solid var(--primary-color);
    background: rgba(90, 163, 255, .08);
    border-radius: 6px;
}

/* --- LA NOTA DE LOS JUEGOS ---------------------------------------------------
   Va en la columna de la reserva estandar, en el paso del calendario. Es donde
   surge la duda «¿y que jugamos?», justo mientras se elige dia y hora, y es la
   duda que hace que alguien lo deje para «mirarlo con los demas».
   Se destaca con el borde izquierdo, igual que `.group-resumen`, para que se
   lea como un aviso util y no como letra pequena.
   ------------------------------------------------------------------------- */
#virtua-booking-container .nota-juegos {
    margin: 1em 0 0;
    padding: .7em .9em;
    border-radius: 10px;
    background: rgba(0, 123, 255, .06);
    border-left: 3px solid var(--primary-color, #007bff);
    font-size: .88em;
    line-height: 1.45;
    text-align: left;
}

#virtua-booking-container .nota-juegos strong {
    display: block;
    margin-bottom: .2em;
}

/* --- EL ASTERISCO, EN SU SITIO ----------------------------------------------
   El <span class="required-indicator"> va DESPUES de un input que ocupa el
   100% del ancho, asi que caia en la linea de abajo, suelto, y no se leia como
   asterisco de campo. Se coloca dentro del propio campo, a la derecha.
   ------------------------------------------------------------------------- */
#virtua-booking-container .required-input-container {
    position: relative;
}

#virtua-booking-container .required-input-container .required-indicator {
    position: absolute;
    top: 50%;
    right: .7em;
    transform: translateY(-50%);
    pointer-events: none;
    font-weight: 700;
    line-height: 1;
}

/* Que el texto no se meta debajo del asterisco */
#virtua-booking-container .required-input-container input {
    padding-right: 1.8em;
    /* Ancho propio, sin depender del tema de WordPress: abierto suelto (o en
       otro tema) el campo salia estrecho y el asterisco quedaba en el borde. */
    width: 100%;
    box-sizing: border-box;
}

/* --- LA SUGERENCIA DEL CORREO ----------------------------------------------
   «¿Querías decir juan@gmail.com?» con el correcto en un boton. Se sugiere,
   nunca se corrige solo: hay dominios legitimos parecidos a los comunes.
   ------------------------------------------------------------------------- */
#virtua-booking-container .email-sugerencia {
    margin: -.4em 0 .9em;
    font-size: .85em;
    text-align: left;
    color: var(--text-light);
}

#virtua-booking-container .email-sugerencia-boton {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: var(--primary-color, #007bff);
    text-decoration: underline;
    cursor: pointer;
}

/* --- DATOS DE FACTURACION · OPCIONALES · 14/10/2026 ---------------------------
   «Quiero factura»: los tres campos solo salen si se marca. La casilla reutiliza
   `.consent-item` (la caja propia), porque `#booking-form input` deformaria una
   casilla nativa. Los campos de texto heredan el estilo de los demas inputs.
   ------------------------------------------------------------------------- */
#virtua-booking-container .facturacion-bloque {
    margin: 1.2em 0 0;
    text-align: left;
}

#virtua-booking-container .facturacion-campos {
    margin: .4em 0 0 28px;
}

#virtua-booking-container .facturacion-campos .required-input-container {
    margin-bottom: 10px;
}

#virtua-booking-container .facturacion-nota {
    margin: .2em 0 0;
    font-size: .8em;
    opacity: .7;
}

/* --- LAS CASILLAS DE ANTES DE PAGAR, EN SU PROPIO RECUADRO · 14/10/2026 ----------
   Alejandro: «lo del pastel es una cosa y todas esas casillas es otra, no deben
   estar asi juntos». El pastel y los añadidos van ARRIBA, en las opciones del
   pack. Esto es un recuadro aparte, con titulo, justo encima del boton de pagar.
   ------------------------------------------------------------------------- */
#virtua-booking-container .consentimientos {
    margin: 2em 0 0;
    padding: 1em 1.1em .6em;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .03);
}

#virtua-booking-container .consent-titulo {
    padding: 0 .5em;
    font-size: .8em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

#virtua-booking-container .consent-etiqueta {
    display: inline-block;
    margin-right: .5em;
    padding: .05em .5em;
    border: 1px solid var(--text-muted);
    border-radius: 999px;
    font-size: .72em;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    vertical-align: .1em;
}

#virtua-booking-container .consent-etiqueta--obligatoria {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* --- EL PASO 1 PROPIO DE UNA CATEGORIA · modo «Team building» · 03/11/2026 ------------
   Alejandro: quien llega desde la pagina de team building (?categoria=teambuilding&pack=N)
   ve SOLO la tarjeta del grupo, con su titulo, en vez de todas las tarjetas del paso 1 (la
   Reserva Estandar decia «2 a 8 jugadores» y el cliente creia que su grupo no cabia).
   script.js pone `paso1-propio` en el paso 1 y `tarjeta-paso1-propio` en la tarjeta del
   grupo; QUITAR LAS DOS DEVUELVE EL PASO 1 DE SIEMPRE: no hay nada que restaurar.

   ⚠️ Se esconde TODA tarjeta que no lleve la marca (no una lista de las que hay hoy): la que
      se añada manana tampoco saldra en este modo. Y la regla nombra la MARCA, no «la tarjeta
      del grupo»: asi nunca puede esconderse la unica que debe verse.
   ⚠️ `!important` porque algunas tarjetas se pintan o se esconden con `style=""` en el HTML.
   ------------------------------------------------------------------------- */
#virtua-booking-container #step-1-product.paso1-propio .product-card:not(.tarjeta-paso1-propio),
#virtua-booking-container #step-1-product.paso1-propio .product-card-valentine {
    display: none !important;
}

/* Una sola tarjeta: algo mas ancha que cuando comparte la fila con otras dos, y sin el hueco de
   dos lineas del titulo (estaba para alinear las alturas de tres tarjetas entre si). */
#virtua-booking-container #step-1-product.paso1-propio .tarjeta-paso1-propio {
    max-width: 420px;
}

#virtua-booking-container #step-1-product.paso1-propio .tarjeta-paso1-propio h3 {
    min-height: 0;
}

/* «¿Buscas otra reserva?»: un enlace discreto bajo el boton. Solo existe en este modo. */
#virtua-booking-container .enlace-otra-reserva {
    display: none;
}

#virtua-booking-container #step-1-product.paso1-propio .enlace-otra-reserva {
    display: block;
    align-self: center;
    margin: 14px auto 0;
    padding: 6px 4px;
    background: none;
    border: 0;
    font: inherit;
    font-size: .9em;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

/* Pantallas estrechas: con el resumen de precio desplegado el boton «Reservar Grupo» tiene que quedar a la
   vista en un movil de 375 × 812 sin bajar (el fallo del 06/10 era justo este: el boton empujado fuera de la
   pantalla). Solo se aprieta el espacio ENTRE las piezas de la tarjeta; ni el tamaño de letra ni nada de
   lo que se ve cambia. */
@media (max-width: 480px) {
    #virtua-booking-container #step-1-product.paso1-propio .tarjeta-paso1-propio h3 {
        margin-bottom: 8px;
    }

    #virtua-booking-container #step-1-product.paso1-propio .tarjeta-paso1-propio > p {
        margin-bottom: 14px;
    }

    #virtua-booking-container #step-1-product.paso1-propio .tarjeta-paso1-propio select {
        margin-bottom: 10px;
    }

    #virtua-booking-container #step-1-product.paso1-propio .tarjeta-paso1-propio .group-resumen {
        margin-top: 8px;
    }
}

/* --- 05/11/2026 · EL PASO 1 PROPIO EN «DOS TARJETAS» (hoy, Amigos y familia) -----------------------------------
   Alejandro: quien llega desde la pagina de Amigos y familia ve DOS tarjetas, no una: la Reserva Estandar de siempre
   (puede querer una hora) y la del grupo con el titulo de la categoria. script.js pone, ADEMAS de las dos marcas del
   modo de tarjeta unica, `paso1-dos-tarjetas` en el paso 1 y `tarjeta-paso1-estandar` en la tarjeta estandar.

   ⚠️ TODO lo de aqui va bajo `.paso1-dos-tarjetas`: la tarjeta unica (team building, despedidas, cumpleaños) no cambia
      ni un pixel. La tarjeta estandar NO se toca: solo se deja ver (la regla de arriba la esconde, como al bono).
   ⚠️ El orden lo da el HTML (la estandar va antes): a la izquierda en escritorio y arriba en el movil.
   ------------------------------------------------------------------------- */
#virtua-booking-container #step-1-product.paso1-propio.paso1-dos-tarjetas .product-card.tarjeta-paso1-estandar {
    display: flex !important;
}

/* Con dos tarjetas lado a lado, el titulo del grupo vuelve a reservar el hueco de dos lineas de siempre, para que los dos
   titulos y los desplegables queden a la misma altura que en el paso 1 normal. */
#virtua-booking-container #step-1-product.paso1-propio.paso1-dos-tarjetas .tarjeta-paso1-propio h3 {
    min-height: 2.8em;
}

/* --- 05/11/2026 · EL AVISO DE LOS DIAS DEL PACK (corto y que se vea) ------------------------------------------------
   Alejandro: «en el gestor en ningún momento avisamos al cliente de que el producto no es válido para viernes por la tarde y
   fin de semana, en el caso de los básicos. Debemos señalarlo en el calendario para que entiendan por qué no salen esos días»; y,
   al ver una primera versión más larga: «demasiado largo… horrible», «corto y preciso» y «hay que resaltarlo de alguna forma
   para que la gente lo lea. visual + corto + preciso».
   Dos avisos, los dos con `hidden` en el HTML:
     · #aviso-dias-pack      encima del calendario (script.js: pintarAvisoDias): una caja que destaca (borde de 4 px y brillo azul
                             del canon, un icono «i» y el nombre del pack sugerido en el cian de las horas) con la regla en negrita
                             y, debajo, la sugerencia. Es un flex: el icono a la izquierda y el texto a su lado.
     · #aviso-viernes-tarde  bajo las horas, solo si el día elegido es viernes (script.js: pintarAvisoViernes): la misma caja,
                             más pequeña y sin brillo.
   ⚠️ La última regla hace que `hidden` esconda DE VERDAD aunque otra regla ponga `display` (el aviso es `display: flex` y la
      sugerencia `display: block`).
   ------------------------------------------------------------------------- */
#virtua-booking-container .aviso-dias-pack {
    display: block;
    margin: 0 0 16px;
    padding: .8em 1em;
    border-radius: 12px;
    border: 1px solid rgba(0, 123, 255, .55);
    border-left: 4px solid #007bff;
    background: linear-gradient(135deg, rgba(0, 123, 255, .26), rgba(0, 123, 255, .08));
    box-shadow: 0 0 18px rgba(0, 123, 255, .28);
    color: #fff;
    font-size: .98em;
    line-height: 1.4;
    text-align: left;
}

#virtua-booking-container #aviso-dias-pack {
    display: flex;
    align-items: flex-start;
    gap: .75em;
}

#virtua-booking-container .aviso-dias-pack__icono {
    flex: 0 0 auto;
    width: 1.55em;
    height: 1.55em;
    color: var(--accent-color, #00e5ff);
}

#virtua-booking-container .aviso-dias-pack__texto {
    flex: 1 1 auto;
    min-width: 0;
}

#virtua-booking-container .aviso-dias-pack strong {
    display: block;
    font-weight: 700;
    font-size: 1.05em;
    color: #fff;
    text-wrap: balance;
}

#virtua-booking-container .aviso-dias-pack__otro {
    display: block;
    margin-top: .35em;
    color: rgba(255, 255, 255, .85);
    text-wrap: balance;
}

#virtua-booking-container .aviso-dias-pack__nombre {
    color: var(--accent-color, #00e5ff);
    font-weight: 700;
    white-space: nowrap;
}

#virtua-booking-container .aviso-dias-pack--viernes {
    margin: 14px 0;
    padding: .6em .9em;
    font-size: .92em;
    box-shadow: none;
}

#virtua-booking-container .aviso-dias-pack[hidden],
#virtua-booking-container .aviso-dias-pack [hidden] {
    display: none !important;
}

/* --- 05/11/2026 · EL CALENDARIO ENTERO EN EL MOVIL (sin scroll por dentro) ---------------------------------------------
   Alejandro: «no sale entero, hay que hacer scroll». En script.js el calendario lleva ahora `height: 'auto'` (y `stickyHeaderDates: false`):
   mide lo que necesita su contenido y se ven las 6 semanas. Pero con `height: 'auto'` y sin estas reglas las filas salen de 78 px (50 px con siete
   columnas) y el calendario sube a ~550-590 px: estas reglas bajan las filas (47 px en el movil, 56-57 en pantallas anchas; el calendario queda en
   ~400 px en el movil y ~440 en el escritorio). Todo bajo `#virtua-booking-container .fc`: no toca nada mas.
   ------------------------------------------------------------------------- */
#virtua-booking-container .fc .fc-daygrid-day-events { min-height: 0; margin-top: 0; }
#virtua-booking-container .fc .fc-daygrid-day-frame { min-height: 56px; }
@media (max-width: 480px) { #virtua-booking-container .fc .fc-daygrid-day-frame { min-height: 46px; } }