/* ==========================================================================
   DESIGN SYSTEM & THEMES
   ========================================================================== */

:root {
    /* Day Theme (Light) Colors */
    --bg-primary: #fbfbfd;
    --bg-secondary: #f0f3fa;
    --text-primary: #0d1f3c;
    --text-secondary: #2d3f5e;
    --card-bg: rgba(255, 255, 255, 0.18);
    --card-border: rgba(27, 67, 149, 0.25);
    --card-shadow: 0 8px 32px rgba(23, 43, 77, 0.12);
    
    /* Global Brand Accents (Snoopy Logo Colors) */
    --primary: #1b4395;               /* Peanuts/Royal Blue */
    --primary-hover: #133270;
    --secondary: #d9252c;             /* Peanuts/Casita Red */
    --secondary-hover: #aa1a1f;
    --yellow: #fbc004;                /* Woodstock Yellow */
    --green: #009746;                 /* Playful Green */
    --orange: #f4901e;                /* Celestial Sun Orange */
    --purple: hsl(265, 60%, 55%);     /* Creative Purple */
    
    /* Fonts */
    --font-title: 'Fredoka', cursive;
    --font-body: 'Outfit', sans-serif;
    
    /* Layout */
    --header-height: 80px;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Safety Seals Colors */
    --safe-green: #2ec4b6;
    --hero-overlay-bg: rgba(251, 251, 253, 0.78);
    --hero-content-bg: rgba(251, 251, 253, 0.45);
}

[data-theme="dark"] {
    /* Night Theme (Dark) Colors */
    --bg-primary: #0b0c10;
    --bg-secondary: #1f2833;
    --text-primary: #f0f8ff;
    --text-secondary: #c8d8e8;
    --card-bg: rgba(15, 23, 42, 0.28);
    --card-border: rgba(129, 140, 248, 0.35);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --hero-overlay-bg: rgba(11, 12, 16, 0.55);
    --hero-content-bg: rgba(11, 12, 16, 0.25);
}

/* ==========================================================================
   BASE STYLES & RESET
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background: transparent;
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: var(--transition);
    position: relative;
}

/* Antes esto pintaba un degradado opaco encima de body en modo oscuro,
   lo cual tapaba por completo el fondo animado (.mr-bg, z-index:-10) que
   ya trae su propio cielo nocturno. Se deja transparente para que el
   fondo mágico se vea también en modo oscuro. */
[data-theme="dark"] body {
    background: transparent;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
}

.font-title {
    font-family: var(--font-title);
    letter-spacing: 0.5px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

li {
    list-style: none;
}

button, input, select {
    font-family: inherit;
    outline: none;
    border: none;
}

/* Gradients and Text Accents */
.text-gradient {
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.accent {
    color: var(--secondary);
}

.accent-blue {
    color: var(--primary);
}

/* ==========================================================================
   NAVIGATION HEADER
   ========================================================================== */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.5) 60%, transparent 100%);
    border-bottom: none;
    box-shadow: none;
    z-index: 100;
    transition: var(--transition);
}

[data-theme="dark"] .main-header {
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.5) 60%, transparent 100%);
}

.main-header.scrolled {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.header-container {
    max-width: 1300px; /* Más amplio */
    height: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.logo-img {
    height: 80px;
    width: auto;
    object-fit: contain;
}

.logo-text {
    font-size: 1.35rem; /* Ajustado el tamaño para que se vea más estilizado y compacto */
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap; /* Junta el nombre en una sola línea */
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Sombras en el texto del menú cuando la cabecera está sobre el vídeo para máxima visibilidad */
.main-header:not(.scrolled) .nav-link,
.main-header:not(.scrolled) .logo-text {
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8), 0 0 2px rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .main-header:not(.scrolled) .nav-link,
[data-theme="dark"] .main-header:not(.scrolled) .logo-text {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.5);
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: nowrap;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.5rem 0.2rem;
    position: relative;
    white-space: nowrap;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    border-radius: 10px;
    transition: var(--transition);
}

.nav-link:hover, .nav-link.active {
    color: var(--text-primary);
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.nav-link-icon {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
}

.control-btn:hover {
    transform: scale(1.1);
    background-color: var(--primary);
    color: white;
}

.lang-text {
    font-size: 0.85rem;
    font-weight: 700;
}

.menu-toggle {
    display: none;
    font-size: 1.5rem;
    background: none;
    color: var(--text-primary);
    cursor: pointer;
}

.nav-menu-mobile-header,
.nav-menu-close {
    display: none;
}

.nav-menu-backdrop {
    display: none;
}

/* ==========================================================================
   BUTTONS & CARDS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-hover));
    color: white;
    box-shadow: 0 4px 15px rgba(234, 115, 141, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(234, 115, 141, 0.45);
}

.btn-secondary {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}

.btn-secondary:hover {
    background-color: var(--primary);
    color: white;
    transform: translateY(-3px);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* ==========================================================================
   VIRTUAL TOUR (360°)
   ========================================================================== */

.tour-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tour-scene-btn {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}

.tour-scene-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Pulsing scene-change hotspots inside the panorama, for a game-like feel */
.tour-hotspot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid white;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.6);
    animation: tour-hotspot-pulse 2s infinite;
    cursor: pointer;
}

.tour-hotspot i {
    color: white;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

@keyframes tour-hotspot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    padding: 2rem;
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 16px 48px rgba(23, 43, 77, 0.18);
}

[data-theme="dark"] .card:hover {
    background: rgba(15, 23, 42, 0.45);
}

.card-sub {
    background-color: var(--bg-secondary);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
}

/* ==========================================================================
   GRID SYSTEM & LAYOUT
   ========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: 4rem 0;
}

.text-center {
    text-align: center;
}

.section-header {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

.grid {
    display: grid;
    gap: 1.5rem;
}

.grid-5 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero-section.hero-stacked {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
    overflow: hidden;
    position: relative;
}

.hero-video-wrapper {
    width: 100%;
    height: 88vh; /* Altura de página completa (casi 90vh) */
    min-height: 480px;
    max-height: 820px;
    overflow: hidden;
    position: relative;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Gradiente muy pequeño en la parte inferior para no tapar los detalles del vídeo */
.hero-video-wrapper::after {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Gradiente muy pequeño/sutil */
    background: linear-gradient(to bottom, transparent, var(--bg-secondary));
    pointer-events: none;
    z-index: 2;
    transition: var(--transition);
}

.hero-video-pure {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.12); /* Ligero zoom para recortar bordes negros laterales de la señal original */
    transform-origin: center;
}

/* Frame for a vertical (phone-shot) hero video: transparent background,
   the video plays centered and uncropped so nothing at the edges of the
   portrait frame gets cut off. */
.hero-video-cinematic {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.hero-video-portrait {
    position: relative;
    z-index: 3;
    height: 120%; /* Agranda el video un 20% de altura */
    width: auto;
    max-width: none;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none; /* Quita el fondo negro borroso/sombra */
    /* Difuminado de 5% a los costados dejando ver el fondo */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

@media (max-width: 768px) {
    .hero-video-portrait {
        border-radius: 0;
        max-width: none;
    }
}

.hero-content-wrapper {
    background-color: var(--hero-content-bg);
    padding: 2.2rem 1.5rem;
    border-top: 1px solid var(--card-border);
    transition: var(--transition);
}

.hero-content-stacked {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.hero-content-stacked .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--bg-primary);
    color: var(--primary);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.hero-content-stacked .hero-title {
    font-size: 3rem;
    margin-bottom: 1.2rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.hero-content-stacked .hero-text {
    font-size: 1.45rem;
    font-style: italic;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.65;
    margin-bottom: 2rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.hero-content-stacked .hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}



.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

.hero-tag {
    display: inline-block;
    padding: 0.4rem 1rem;
    background-color: var(--bg-secondary);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.5rem;
    border: 1px solid var(--card-border);
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.hero-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 550px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
}

/* Image Stack decoration */
.hero-media {
    position: relative;
    height: 450px;
    width: 100%;
}

.image-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.stack-img {
    position: absolute;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 4px solid white;
    transition: var(--transition);
}

.img-1 {
    width: 70%;
    height: 70%;
    top: 5%;
    left: 5%;
    z-index: 2;
}

.img-2 {
    width: 65%;
    height: 65%;
    bottom: 5%;
    right: 5%;
    z-index: 3;
}

.img-1:hover, .img-2:hover {
    transform: scale(1.05);
    z-index: 10;
}

.decorative-blob {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: radial-gradient(circle, rgba(234, 115, 141, 0.15) 0%, rgba(98, 190, 232, 0.15) 100%);
    border-radius: 50% 30% 70% 40% / 50% 60% 30% 60%;
    z-index: 1;
    animation: blobAnimate 12s ease-in-out infinite;
}

@keyframes blobAnimate {
    0%, 100% { border-radius: 50% 30% 70% 40% / 50% 60% 30% 60%; }
    50% { border-radius: 30% 60% 40% 70% / 60% 30% 60% 30%; }
}

/* ==========================================================================
   PAI SECTION (CARDS)
   ========================================================================== */

.PAI-card {
    text-align: center;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 1.5rem auto;
}

.icon-blue { background-color: var(--primary); }
.icon-pink { background-color: var(--secondary); }
.icon-yellow { background-color: var(--yellow); }
.icon-green { background-color: var(--green); }
.icon-purple { background-color: var(--purple); }

.card-title {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.card-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   MENU SECTION
   ========================================================================== */

/* ==========================================================================
   CINEMATIC GALLERY SECTION
   ========================================================================== */

:root {
    --mr-gold: hsl(45, 95%, 55%);
    --mr-gold-soft: hsl(45, 95%, 68%);
}

.gallery-section {
    position: relative;
    overflow: hidden;
}

/* ---------- Marquee tag & floating sparkles ---------- */

.gallery-marquee-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.3rem;
    margin-bottom: 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #6b4a06;
    background: linear-gradient(135deg, var(--mr-gold-soft), var(--mr-gold));
    box-shadow: 0 6px 18px rgba(234, 179, 8, 0.35);
}

.mr-gallery-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.mr-gallery-sparkles i {
    position: absolute;
    color: var(--mr-gold);
    opacity: 0.55;
    animation: mrSparkleFloat 6s ease-in-out infinite;
}

.mr-gallery-sparkles i:nth-child(1) { top: 6%; left: 6%; font-size: 1.1rem; animation-delay: 0s; }
.mr-gallery-sparkles i:nth-child(2) { top: 18%; right: 9%; font-size: 0.9rem; animation-delay: -2s; color: var(--secondary); }
.mr-gallery-sparkles i:nth-child(3) { bottom: 22%; left: 12%; font-size: 1.3rem; animation-delay: -4s; }
.mr-gallery-sparkles i:nth-child(4) { bottom: 10%; right: 15%; font-size: 1rem; animation-delay: -1s; color: var(--primary); }

@keyframes mrSparkleFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.35; }
    50% { transform: translateY(-14px) rotate(15deg); opacity: 0.9; }
}

/* ---------- Spotlight: carrusel destacado tipo "gran estreno" ---------- */

/* El marco se adapta a la forma real de cada foto (JS ajusta aspect-ratio
   por foto — ver loadSpotlightRatio en app.js), acotado entre 0.65 y 1.6
   para que nunca quede ni panorámico ni una tira angosta. 3/4 es solo el
   valor de arranque mientras se conoce la primera foto (la mayoría de fotos
   del jardín son verticales, por eso ese es el punto de partida). El ancho
   usa min() así que ya es responsive sin necesitar media queries aparte. */
.gallery-spotlight {
    position: relative;
    width: min(90vw, 460px);
    aspect-ratio: 3 / 4;
    margin: 0 auto 2.5rem;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
    isolation: isolate;
    /* Nota: se probó "transition: aspect-ratio" para que el cambio de marco
       entre foto vertical/horizontal fuera animado, pero en pruebas reales
       el navegador se quedaba "pegado" en el valor viejo en vez de animar
       o incluso aplicar el nuevo — así que el cambio de proporción es
       instantáneo a propósito (ver showSpotlightSlide en app.js). El
       crossfade de opacidad entre fotos (0.9–1.4s) ya disimula el salto. */
}

@media (max-width: 480px) {
    .gallery-spotlight {
        width: 94vw;
        border-radius: 20px;
    }
}

.spotlight-slides {
    position: absolute;
    inset: 0;
}

.spotlight-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.spotlight-slide.active {
    opacity: 1;
}

/* Fondo difuminado: llena el marco sin recortar la foto nítida de encima.
   Más claro y saturado que un blur "de cine" típico a propósito: como el
   marco ahora es casi del mismo alto que la foto (3/4), lo que se alcanza
   a ver del difuminado es poco, pero si queda muy oscuro se ve como una
   franja gris muerta en vez de una extensión suave de los colores de la foto. */
.spotlight-slide-blur {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.15);
    filter: blur(28px) brightness(0.9) saturate(1.35);
}

.spotlight-slide.active .spotlight-slide-blur {
    animation: mrKenBurns 9s ease-in-out forwards;
}

/* Foto nítida: siempre completa, nunca recortada, para que los papás vean toda la escena */
.spotlight-slide-img {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.spotlight-slide.active .spotlight-slide-img {
    opacity: 1;
    transform: scale(1);
}

@keyframes mrKenBurns {
    0% { transform: scale(1.15) translate(0, 0); }
    100% { transform: scale(1.05) translate(-1%, -1%); }
}

.spotlight-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.05) 65%, rgba(0, 0, 0, 0.35) 100%);
    z-index: 2;
}

.spotlight-curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent);
    z-index: 2;
    pointer-events: none;
}

.spotlight-curtain-left { left: 0; }
.spotlight-curtain-right { right: 0; transform: scaleX(-1); }

.spotlight-caption {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 3;
    color: #fff;
}

@media (max-width: 480px) {
    .spotlight-caption {
        left: 1.2rem;
        right: 1.2rem;
        bottom: 1.2rem;
    }
}

.spotlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mr-gold-soft);
    margin-bottom: 0.8rem;
}

.spotlight-title {
    /* Antes usaba vw del viewport completo; ahora el marco tiene su propio
       ancho fijo (ver .gallery-spotlight), así que se fija en rem para que
       no se desborde en pantallas anchas ni quede minúsculo en el celular. */
    font-size: 1.4rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 480px) {
    .spotlight-title {
        font-size: 1.15rem;
    }
}

.spotlight-dots {
    /* Arriba en vez de junto al título: en un marco angosto, títulos largos
       ("Taller de Cocina") chocaban con los puntos si ambos iban abajo. */
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    z-index: 3;
    display: flex;
    gap: 0.5rem;
}

.spotlight-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: var(--transition);
}

.spotlight-dot.active {
    background: var(--mr-gold);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.7);
}

/* ---------- Selector de carpetas: carrete de película ---------- */

.gallery-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 2.5rem;
}

.gallery-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(10px);
    color: var(--text-secondary);
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
}

.gallery-tab i {
    color: var(--mr-gold);
}

.gallery-tab:hover {
    transform: translateY(-3px);
    color: var(--text-primary);
    box-shadow: var(--card-shadow);
}

.gallery-tab.active {
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(234, 115, 141, 0.35);
}

.gallery-tab.active i {
    color: #fff;
}

.gallery-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 0.4rem;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.75rem;
    font-weight: 700;
}

.gallery-tab.active .gallery-tab-count {
    background: rgba(255, 255, 255, 0.25);
}

/* ---------- Panel de fotos ---------- */

.photos-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(20px);
    border-radius: 28px;
    box-shadow: var(--card-shadow);
    padding: 2rem;
}

.photos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 1rem;
}

.active-folder-path {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.active-folder-path i {
    color: var(--mr-gold);
}

.sync-badge {
    padding: 0.3rem 0.8rem;
    background-color: rgba(46, 196, 182, 0.15);
    color: var(--safe-green);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-flow: dense;
    gap: 1.2rem;
}

.gallery-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--text-secondary);
}

.gallery-empty-state i {
    font-size: 2.2rem;
    color: var(--primary);
    opacity: 0.5;
}

.gallery-empty-state p {
    max-width: 26rem;
    font-size: 0.95rem;
}

.photo-card {
    border-radius: 18px;
    overflow: hidden;
    height: 210px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-secondary);
    border: 2px solid transparent;
    position: relative;
    cursor: zoom-in;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    animation: mrPhotoReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.photo-card.photo-card-tall {
    height: 100%;
    grid-row: span 2;
}

@keyframes mrPhotoReveal {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.photo-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--mr-gold);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(250, 204, 21, 0.15);
    z-index: 2;
}

.photo-card img,
.photo-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    background-size: 250% 250%;
    background-position: 120% 0%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.photo-card:hover .photo-card-shine {
    opacity: 1;
    animation: mrShineSweep 1s ease forwards;
}

@keyframes mrShineSweep {
    from { background-position: 120% 0%; }
    to { background-position: -20% 0%; }
}

.photo-card-video-badge {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 55%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 1rem;
    opacity: 0;
    transition: var(--transition);
}

.photo-overlay i {
    color: #fff;
    font-size: 1.3rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.7);
    transition: var(--transition);
}

.photo-card:hover .photo-overlay {
    opacity: 1;
}

.photo-card:hover .photo-overlay i {
    transform: scale(1);
}

/* ---------- Lightbox cinematográfico ---------- */

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.gallery-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(20, 20, 25, 0.96) 0%, rgba(0, 0, 0, 0.98) 100%);
    backdrop-filter: blur(6px);
}

.lightbox-stage {
    position: relative;
    z-index: 1;
    max-width: min(88vw, 1000px);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.gallery-lightbox.open .lightbox-stage {
    transform: scale(1);
    opacity: 1;
}

.lightbox-frame {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
    background-position: center;
    background-size: cover;
    background-color: #111;
}

.lightbox-frame img,
.lightbox-frame video {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    border-radius: 14px;
}

/* El protector de contenido envuelve el img/video en .mr-protected-wrap;
   sin esto, su width/height:100% colapsaría contra el alto automático del frame. */
.lightbox-frame .mr-protected-wrap {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    display: block;
}

.lightbox-frame .mr-protected-wrap img,
.lightbox-frame .mr-protected-wrap video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.lightbox-caption {
    color: #fff;
    font-size: 1.1rem;
    text-align: center;
    opacity: 0.9;
}

.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.lightbox-close:hover {
    background: var(--secondary);
    transform: rotate(90deg);
}

.lightbox-nav {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    margin: 0 1.5rem;
}

.lightbox-nav:hover {
    background: var(--mr-gold);
    color: #2d3142;
    transform: scale(1.1);
}

/* ==========================================================================
   ZONA DOCENTES SECTION
   ========================================================================== */

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2rem;
}

.panel-title {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-control {
    width: 100%;
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--card-border);
    color: var(--text-primary);
}

.form-control:focus {
    border-color: var(--primary);
}

.drop-zone {
    border: 2px dashed var(--primary);
    border-radius: 15px;
    padding: 2.5rem 1rem;
    text-align: center;
    background-color: rgba(98, 190, 232, 0.03);
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 1.5rem;
}

.drop-zone:hover {
    background-color: rgba(98, 190, 232, 0.08);
}

.drop-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.drop-text {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.file-preview-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-secondary);
    padding: 0.8rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--card-border);
}

.preview-filename {
    font-weight: 600;
    font-size: 0.9rem;
}

.remove-file-btn {
    background: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 1.1rem;
}

.console-log {
    background-color: #1e1e24;
    color: #abb2bf;
    padding: 1rem;
    border-radius: 12px;
    font-family: monospace;
    font-size: 0.85rem;
    height: 120px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
    border: 1px solid #282c34;
}

.log-line {
    margin-bottom: 0.4rem;
}

.text-green { color: #98c379; }
.text-yellow { color: #d19a66; }

.db-visual-area {
    display: flex;
    flex-direction: column;
}

.db-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.db-table th, .db-table td {
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}

.db-table th {
    font-weight: 700;
    color: var(--text-secondary);
}

/* ==========================================================================
   QR DEMO SECTION
   ========================================================================== */

.qr-demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 850px;
    margin: 0 auto;
}

.qr-demo-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-box-title {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.qr-box-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    max-width: 320px;
}

.qr-code-interactive {
    width: 180px;
    height: 180px;
    border-radius: 16px;
    background-color: white;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 4px solid var(--bg-secondary);
    cursor: pointer;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: var(--transition);
}

.qr-code-interactive:hover {
    transform: scale(1.05);
    border-color: var(--primary);
}

.qr-graphic {
    font-size: 8rem;
    color: #2d3142;
}

.qr-badge {
    position: absolute;
    bottom: -15px;
    background-color: var(--primary);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#giftQrCode .qr-badge { background-color: var(--secondary); }
#reviewQrCode .qr-badge { background-color: var(--yellow); color: #2d3142; }

.id-selection-panel {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.85rem;
}

.review-prompt {
    margin-top: 2rem;
    font-weight: 700;
    color: var(--yellow);
}

/* ==========================================================================
   FOOTER AREA
   ========================================================================== */

.main-footer {
    background-color: #1a1e29;
    color: #abb2bf;
    padding: 5rem 0 2rem 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 4rem;
}

.footer-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 1.5rem 0 2rem 0;
    max-width: 320px;
}

.security-seal {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(255,255,255,0.03);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    max-width: 320px;
    cursor: pointer;
    transition: var(--transition);
}

.security-seal:hover {
    background-color: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

.seal-icon {
    font-size: 2rem;
    color: var(--safe-green);
}

.seal-text {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
}

.seal-text strong {
    color: white;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

.footer-title {
    font-size: 1.15rem;
    color: white;
    margin-bottom: 1.5rem;
}

.contact-details li {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.contact-details i {
    margin-top: 0.2rem;
    color: var(--primary);
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-link {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.footer-link:hover {
    color: white;
}

.footer-bottom {
    max-width: 1200px;
    margin: 4rem auto 0 auto;
    padding: 2rem 2rem 0 2rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.footer-bottom-links a {
    color: var(--text-secondary);
    transition: var(--transition);
    text-decoration: none;
}

.footer-bottom-links a:hover {
    color: white;
}

.text-white { color: white; }

/* ==========================================================================
   SIMULATED CHATBOT CAMILA (FLOATING)
   ========================================================================== */

.chatbot-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 999;
}

.chatbot-bubble {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--secondary);
    box-shadow: 0 8px 25px rgba(234, 115, 141, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.chatbot-bubble:hover {
    transform: scale(1.1) rotate(5deg);
}

.avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid white;
}

.pulse-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background-color: var(--safe-green);
    border-radius: 50%;
    border: 2px solid white;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.chat-window {
    position: absolute;
    bottom: 75px;
    right: 0;
    width: 350px;
    height: 450px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    display: none; /* Controlled by JS */
}

.chat-window.open {
    display: flex;
    animation: openWindow 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes openWindow {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-header {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-hover));
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.agent-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.avatar-img-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid white;
}

.agent-name-area {
    display: flex;
    flex-direction: column;
}

.agent-name {
    font-size: 0.95rem;
}

.agent-status {
    font-size: 0.7rem;
    opacity: 0.9;
}

.close-chat-btn {
    background: none;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
}

.chat-messages {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--bg-secondary);
}

.msg {
    max-width: 80%;
    padding: 0.8rem 1rem;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.msg-bot {
    background-color: var(--card-bg);
    color: var(--text-primary);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: var(--card-shadow);
}

.msg-user {
    background-color: var(--secondary);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.chat-input-area {
    display: flex;
    padding: 1rem;
    background-color: var(--card-bg);
    border-top: 1px solid var(--card-border);
    gap: 0.8rem;
}

.chat-input {
    flex: 1;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}

.send-message-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--secondary);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
}

.send-message-btn:hover {
    background-color: var(--secondary-hover);
}

/* ==========================================================================
   MODALS AREA
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

.modal.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    max-width: 550px;
    width: 90%;
    background-color: var(--bg-primary);
    padding: 2.5rem;
    animation: modalScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalScale {
    0% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
}

.gift-landing-simulation {
    text-align: center;
}

.gift-tag {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background-color: rgba(234, 115, 141, 0.15);
    color: var(--secondary);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.gift-heading {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.video-simulator-box {
    width: 100%;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--card-shadow);
    margin-bottom: 1.5rem;
    border: 1px solid var(--card-border);
}

.video-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.45);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    gap: 0.8rem;
}

.play-icon-big {
    font-size: 3.5rem;
    color: var(--secondary);
    transition: var(--transition);
}

.video-overlay:hover .play-icon-big {
    transform: scale(1.1);
}

.simulated-video {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Simulated video playing animations */
.simulated-video.playing .pulse-animation-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid var(--secondary);
    border-radius: 50%;
    animation: radarRing 3s ease-out infinite;
}

@keyframes radarRing {
    0% { width: 0; height: 0; opacity: 1; }
    100% { width: 300px; height: 300px; opacity: 0; }
}

.gift-letter-text {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 2rem;
    line-height: 1.5;
    font-style: italic;
}

.social-share-area {
    border-top: 1px solid var(--card-border);
    padding-top: 1.5rem;
}

.social-share-area span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn-share {
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.share-whatsapp { background-color: #25d366; }
.share-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

.max-w-md {
    max-width: 650px;
}

.modal-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0.8rem;
}

.modal-text-content {
    font-size: 0.9rem;
    color: var(--text-secondary);
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.8rem;
    text-align: justify;
    line-height: 1.6;
}

.modal-text-content p {
    margin-bottom: 1rem;
}

.modal-text-content h3 {
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: var(--primary);
    border-bottom: 2px solid var(--card-border);
    padding-bottom: 0.4rem;
    margin: 2rem 0 1rem;
}

.modal-text-content h3:first-child {
    margin-top: 0;
}

.modal-text-content .mc-num {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
}

.modal-text-content ol,
.modal-text-content ul {
    margin: 0.75rem 0 1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-text-content ul.mc-plain {
    list-style: none;
    margin-left: 0;
}

.modal-text-content li > ul,
.modal-text-content li > ol {
    margin-top: 0.5rem;
}

.modal-text-content strong {
    color: var(--text-primary);
}

.modal-text-content .mc-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.75rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.modal-text-content .mc-meta dt {
    font-weight: 700;
    color: var(--text-primary);
}

.modal-text-content .mc-meta dd {
    margin: 0;
}

.modal-text-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin: 1rem 0;
}

.modal-text-content table th,
.modal-text-content table td {
    border: 1px solid var(--card-border);
    padding: 0.5rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.modal-text-content table th {
    background-color: var(--bg-secondary);
    font-family: var(--font-title);
}

/* ==========================================================================
   TRAYECTORIA SECTION
   ========================================================================== */

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.tray-card {
    text-align: left;
    height: 100%;
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    transition: var(--transition);
}

.tray-card .card-icon {
    margin: 0 auto 1.25rem auto;
}

.tray-card .card-title {
    margin-bottom: 1.25rem;
    font-size: 1.35rem;
}

.tray-card .card-text,
.tray-card p {
    line-height: 1.68;
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.tray-card .card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tray-card .card-text p,
.tray-card > p {
    margin: 0 0 0.95rem 0;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.tray-card .card-text p:last-child,
.tray-card > p:last-child {
    margin-bottom: 0;
}

.tray-card .card-text p:has(+ .tray-list) {
    margin-bottom: 0.45rem;
}

.tray-list {
    list-style: none;
    margin: 0.45rem 0 0.85rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tray-list li {
    line-height: 1.5;
    font-size: 0.86rem;
    position: relative;
    padding-left: 1.35rem;
    text-align: justify;
    text-justify: inter-word;
}

.tray-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary, #1b4395);
    font-weight: 700;
}

[data-theme="dark"] .tray-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1.5px solid rgba(27, 67, 149, 0.25) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .tray-card .card-title,
[data-theme="dark"] .tray-card h3 {
    color: #0d1f3c !important;
    text-shadow: none !important;
}

[data-theme="dark"] .tray-card .card-text,
[data-theme="dark"] .tray-card p,
[data-theme="dark"] .tray-card .card-text p,
[data-theme="dark"] .tray-card > p,
[data-theme="dark"] .tray-card .tray-list li {
    color: #111827 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

[data-theme="dark"] .tray-list li::before {
    color: var(--primary, #1b4395) !important;
}

/* ==========================================================================
   CALENDARIO SECTION
   ========================================================================== */

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.calendar-card {
    text-align: left;
}

.calendar-card-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 1.2rem;
}

.calendar-card-title .card-icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
    margin: 0;
    flex-shrink: 0;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
}

.calendar-table tr {
    border-bottom: 1px solid var(--card-border);
}

.calendar-table tr:last-child {
    border-bottom: none;
}

.calendar-table td {
    padding: 0.6rem 0.4rem;
    font-size: 0.85rem;
    line-height: 1.4;
    vertical-align: top;
}

.cal-date {
    color: var(--primary);
    font-weight: 700;
    white-space: nowrap;
    width: 1%;
    padding-right: 1rem !important;
}

.cal-event {
    color: var(--text-secondary);
}


/* Video Hero Styles */
.video-container-hero {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border: 4px solid white;
    transition: var(--transition);
    z-index: 2;
}

.video-container-hero:hover {
    transform: scale(1.03);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   SERVICIOS SECTION
   ========================================================================== */

.services-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}

.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.2rem;
    height: 100%;
    transition: var(--transition);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--card-shadow);
}

.service-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.9rem;
    font-size: 1.25rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.service-card-title {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.service-card-text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.1rem;
    }
}

/* Wiggle animation for WhatsApp */
@keyframes whatsapp-wiggle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-8deg); }
    30% { transform: rotate(8deg); }
    45% { transform: rotate(-4deg); }
    60% { transform: rotate(4deg); }
    75% { transform: rotate(-2deg); }
    90% { transform: rotate(2deg); }
}

.chatbot-bubble:hover {
    animation: whatsapp-wiggle 1s ease-in-out infinite;
    transform: scale(1.05);
}


/* ==========================================================================
   UBICACIÓN / MAPA SECTION
   ========================================================================== */

.location-section {
    background-color: var(--bg-secondary);
}

.map-container {
    position: relative;
    height: 420px;
    width: 100%;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    border: 8px solid var(--card-bg);
    background-color: var(--card-bg);
    transition: var(--transition);
}

.map-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.map-tap-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0 1.5rem 0;
    background: transparent;
    border: none;
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: background var(--transition);
}

.map-tap-overlay:hover,
.map-tap-overlay:focus-visible {
    background: rgba(0, 0, 0, 0.08);
}

.map-tap-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--card-bg);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--card-border);
}

.map-tap-hint i {
    color: var(--primary);
}

@media (max-width: 768px) {
    .map-container {
        height: 300px;
    }
}

/* ---------- Modal: elegir Google Maps o Waze ---------- */

.map-choice-content {
    text-align: center;
}

.map-choice-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.map-choice-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.share-gmaps {
    background-color: #4285f4;
}

.share-waze {
    background-color: #05c3de;
}

/* ==========================================================================
   MEDIA QUERIES (RESPONSIVENESS)
   ========================================================================== */

@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 4rem;
    }
    
    .hero-text {
        margin: 0 auto 2rem auto;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .gallery-wrapper {
        grid-template-columns: 1fr;
    }
    
    .admin-grid {
        grid-template-columns: 1fr;
    }
    
    .qr-demo-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
    }
}

/* El menú pasa a hamburguesa desde 1100px: con 10 enlaces + controles,
   una fila horizontal ya no cabe bien en laptops/tablets y el texto
   terminaba saliéndose del recuadro del header. */
@media (max-width: 1100px) {
    .nav-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 15, 30, 0.5);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s ease;
        z-index: 998;
    }

    .nav-menu-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(300px, 82vw);
        height: 100dvh;
        background: var(--bg-primary);
        border-left: 1px solid var(--card-border);
        box-shadow: -12px 0 40px rgba(15, 23, 42, 0.22);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 0 2rem 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 999;
    }

    .nav-menu.open {
        transform: translateX(0);
    }

    .nav-menu-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.2rem 1.4rem;
        border-bottom: 1px solid var(--card-border);
        margin-bottom: 0.5rem;
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 1;
    }

    .nav-menu-mobile-logo {
        height: 76px;
        width: auto;
        object-fit: contain;
    }

    .nav-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: 1.1rem;
        cursor: pointer;
        transition: var(--transition);
    }

    .nav-menu-close:hover {
        background: var(--primary);
        color: #fff;
        transform: rotate(90deg);
    }

    .nav-menu .nav-link {
        width: 100%;
        padding: 0.95rem 1.4rem;
        border-bottom: 1px solid var(--card-border);
        font-size: 1rem;
        text-shadow: none !important;
    }

    .nav-menu .nav-link::after {
        display: none;
    }

    .nav-menu .nav-link.active,
    .nav-menu .nav-link:hover {
        color: var(--primary);
        background: var(--bg-secondary);
    }

    .nav-menu .nav-link-icon {
        border-bottom: none;
        margin-top: 0.5rem;
        color: var(--primary);
    }

    .menu-toggle {
        display: block;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.6rem;
    }
    
    .menu-display-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .chat-window {
        width: 90vw;
        right: -15px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.8rem;
    }

    .service-card {
        padding: 1rem 0.6rem;
    }

    .service-icon-box {
        width: 42px;
        height: 42px;
        font-size: 1.05rem;
    }

    .service-card-title {
        font-size: 0.92rem;
    }

    .service-card-text {
        font-size: 0.8rem;
    }

    .tray-card {
        padding: 1.5rem;
    }

    /* Timeline Mobile Responsive - Removed */
}

/* ---------- Panel de Selección Mágico ---------- */
.menu-cloud-panel {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1.5px dashed rgba(234, 115, 141, 0.25);
    border-radius: 24px;
    box-shadow: var(--card-shadow);
    padding: 1.1rem 1.5rem;
    max-width: 580px;
    margin: 0 auto 1.5rem auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.menu-cloud-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(197, 230, 247, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] .menu-cloud-panel {
    border-color: rgba(197, 90, 55, 0.15);
}

.magic-stars-left,
.magic-stars-right {
    position: absolute;
    font-size: 1.5rem;
    pointer-events: none;
    animation: magicPulse 2.5s infinite ease-in-out;
}

.magic-stars-left {
    top: 15px;
    left: 20px;
    color: var(--secondary);
    transform: rotate(-15deg);
}

.magic-stars-right {
    bottom: 15px;
    right: 20px;
    color: var(--yellow);
    transform: rotate(15deg);
}

@keyframes magicPulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.6; filter: drop-shadow(0 0 2px rgba(255,255,255,0)); }
    50% { transform: scale(1.2) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 8px var(--yellow)); }
}

.menu-selector-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    z-index: 1;
    position: relative;
}

.selector-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.selector-label i {
    font-size: 0.95rem;
}

.menu-selector-row:nth-child(2) .selector-label i {
    color: var(--primary);
}

.menu-selector-row:nth-child(3) .selector-label i {
    color: var(--secondary);
}

.menu-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.menu-pill-btn {
    border: 1px solid var(--card-border);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 0.3rem 0.75rem;
    border-radius: 50px;
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.3s, 
                color 0.3s, 
                box-shadow 0.3s, 
                border-color 0.3s;
}

.menu-pill-btn:hover {
    transform: translateY(-3px) scale(1.05);
    background-color: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Active State for Week Selectors (Blue Glow) */
.menu-pill-btn.week-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: white;
    border-color: var(--primary);
    box-shadow: 0 6px 15px rgba(98, 190, 232, 0.35);
    transform: scale(1.05) translateY(-2px);
}

/* Active State for Day Selectors (Pink Glow) */
.menu-pill-btn.day-btn.active {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-hover));
    color: white;
    border-color: var(--secondary);
    box-shadow: 0 6px 15px rgba(234, 115, 141, 0.35);
    transform: scale(1.05) translateY(-2px);
}

@media (max-width: 768px) {
    .menu-cloud-panel {
        padding: 1.5rem;
        border-radius: 24px;
        margin-bottom: 2rem;
    }
    .menu-selector-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    .menu-pills {
        width: 100%;
    }
    .menu-pill-btn {
        flex: 1;
        text-align: center;
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    .magic-stars-left,
    .magic-stars-right {
        display: none;
    }
}

.menu-today-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
    z-index: 1;
    position: relative;
}

.menu-today-reset-btn {
    border: 1px solid var(--card-border);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.4rem 1.1rem;
    border-radius: 50px;
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.3s, 
                color 0.3s, 
                box-shadow 0.3s, 
                border-color 0.3s;
}

.menu-today-reset-btn:hover {
    transform: translateY(-3px) scale(1.05);
    background: linear-gradient(135deg, var(--secondary), var(--secondary-hover));
    color: white;
    border-color: var(--secondary);
    box-shadow: 0 6px 15px rgba(234, 115, 141, 0.3);
}

.menu-today-reset-btn i {
    font-size: 0.95rem;
}

.menu-display-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
}

.menu-item-box {
    background-color: var(--card-bg);
    backdrop-filter: blur(20px);
    padding: 2.5rem;
    border-radius: 24px;
    border: 2px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s, border-color 0.5s;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.menu-item-box:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
    border-color: rgba(234, 115, 141, 0.3);
}

.menu-item-box .menu-food-content {
    font-size: 1.5rem;
}

.menu-item-box .menu-type-tag {
    font-size: 1rem;
    padding: 0.5rem 1.2rem;
    margin-bottom: 1.5rem;
}

.menu-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1.2rem;
    align-self: flex-start;
}

.tag-blue { background-color: var(--primary); }
.tag-pink { background-color: var(--secondary); }

.menu-food-content {
    font-size: 1.15rem;
    color: var(--text-primary);
    line-height: 1.6;
    font-weight: 600;
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON
   ========================================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.2rem;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1) rotate(8deg);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-float .pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #25d366;
    animation: whatsapp-pulse 2s infinite;
    opacity: 0;
    pointer-events: none;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ---------- Mobile Safety and Responsive Alignments ---------- */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    position: relative;
    width: 100vw;
}

/* Ensure all images and videos are scale-safe */
img, video, iframe, canvas {
    max-width: 100%;
}

/* Constrain video and background objects on small viewports */
@media (max-width: 768px) {
    /* Prevent the hero section content from overflowing or being shifted */
    .hero-section.hero-stacked {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .hero-video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: 55vh; /* Scaled down slightly for mobile to keep better spacing */
        min-height: auto;
    }
    
    /* Ensure the body and containers fit precisely in screen */
    .container {
        padding: 0 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    /* Tighter vertical rhythm between sections on small screens */
    .section-padding {
        padding: 2.75rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
    }
    
    .main-header {
        max-width: 100% !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .logo-text {
        font-size: 1.15rem !important; /* Slightly smaller for mobile logo text */
    }

    /* Force columns to 1fr to prevent inline grid properties from causing overflow */
    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .circulares-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Constrain the celestial background elements.
       Nota: antes esto también fijaba top/right con !important, lo que
       pisaba la animación mrTravel (un !important gana siempre sobre una
       animación CSS) y dejaba el sol/luna completamente congelado. Además
       lo achicaba a 80px (minúsculo); ahora se ve bastante más grande. */
    .mr-celestial {
        max-width: 380px !important;
        max-height: 380px !important;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0 0.8rem !important;
    }
    .logo-img {
        height: 55px !important;
    }
    .logo-text {
        font-size: 1rem !important;
    }
    .control-btn {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ---------- Payments Dashboard Responsiveness ---------- */
@media (max-width: 992px) {
    .payment-portal-dashboard {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }
}

@media (max-width: 600px) {
    .payment-row-card {
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        padding: 1.5rem !important;
    }
    .payment-row-card > div {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.8rem !important;
    }
    .payment-row-card a {
        width: 100% !important;
    }
}

/* ---------- Transparent Character Background Animations ----------
   object-fit:contain + una anchura fija (en vez de una altura fija) para
   que se vea el perrito completo dentro de una cajita chica, sin estirar
   el video panorámico (1920x1080) a una franja gigante casi del ancho de
   toda la pantalla, que era lo que lo hacía ver "invisible". */
.mr-char-left {
    position: absolute;
    left: -10px;
    bottom: 20px;
    width: 620px;
    height: auto;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
    transition: transform var(--transition), opacity 0.5s ease;
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.mr-char-right {
    position: absolute;
    right: -10px;
    bottom: 20px;
    width: 620px;
    height: auto;
    object-fit: contain;
    z-index: 5;
    pointer-events: none;
    transition: transform var(--transition), opacity 0.5s ease;
    -webkit-mask-image: linear-gradient(to left, black 80%, transparent 100%);
    mask-image: linear-gradient(to left, black 80%, transparent 100%);
}

/* Solo decorativos de día: en modo noche se ocultan, como era originalmente. */
[data-theme="dark"] .mr-char-left,
[data-theme="dark"] .mr-char-right {
    display: none;
}

/* Antes esto los ocultaba por completo (display:none) en cualquier pantalla
   menor a 1350px, es decir, en la práctica todos los celulares/tablets y
   muchos computadores. Ahora en vez de desaparecer se van achicando para
   seguir viéndose (más pequeños) a medida que la pantalla es más angosta. */
@media (max-width: 1350px) {
    .mr-char-left,
    .mr-char-right {
        width: 460px;
    }
}

@media (max-width: 900px) {
    .mr-char-left,
    .mr-char-right {
        width: 300px;
        bottom: 10px;
    }
}

@media (max-width: 520px) {
    .mr-char-left,
    .mr-char-right {
        width: 200px;
    }
}

/* ==========================================================================
   GLASSMORPHISM GLOBAL — Sections & cards ultra-transparent so the
   animated background (sun, clouds, butterflies…) shows through at all times.
   ========================================================================== */

/* ---- All page sections: fully transparent ---- */
section,
section.section-padding,
.trayectoria-section,
.PAI-section,
.servicios-section,
.calendario-section,
.menu-section,
.pagos-section,
.gallery-section,
.circulares-section,
.location-section {
    background: transparent !important;
    background-color: transparent !important;
}

/* ---- card-sub: light glass tint ---- */
.card-sub {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(27, 67, 149, 0.2) !important;
}

[data-theme="dark"] .card-sub {
    background: rgba(15, 23, 42, 0.22) !important;
}

/* ---- Payment row cards ---- */
.payment-row-card {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(27, 67, 149, 0.22) !important;
}

[data-theme="dark"] .payment-row-card {
    background: rgba(15, 23, 42, 0.30) !important;
}

/* ---- Photos panel ---- */
.photos-panel {
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

[data-theme="dark"] .photos-panel {
    background: rgba(15, 23, 42, 0.26) !important;
}

/* ---- Menu cloud panel ---- */
.menu-cloud-panel {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

[data-theme="dark"] .menu-cloud-panel {
    background: rgba(15, 23, 42, 0.28) !important;
}

/* ---- Menu item boxes ---- */
.menu-item-box {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .menu-item-box {
    background: rgba(15, 23, 42, 0.30) !important;
}

/* ---- Hero content wrapper ---- */
.hero-content-wrapper {
    background: rgba(255, 255, 255, 0.9) !important;
    border-top: 1px solid rgba(27, 67, 149, 0.2) !important;
}

[data-theme="dark"] .hero-content-wrapper {
    background: rgba(11, 12, 16, 0.28) !important;
}

/* ---- Inline style overrides for bg-primary / bg-secondary sections ---- */
/* (pagos, tour, circulares, location use style="" in HTML) */
#pagos, #tour-360, #circulares, #location {
    background: transparent !important;
    background-color: transparent !important;
}

/* ==========================================================================
   HIGH-CONTRAST TEXT SYSTEM — ensures readability over the glass + animation
   ========================================================================== */

/* Section titles & subtitles */
.section-title {
    color: #0d1f3c !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.7), 0 0 2px rgba(255,255,255,0.5);
}

[data-theme="dark"] .section-title {
    color: #f0f8ff !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

.section-subtitle {
    color: #1a2f52 !important;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] .section-subtitle {
    color: #c8d8e8 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

[data-theme="dark"] #trayectoria .section-title {
    color: #0d1f3c !important;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.8) !important;
}

[data-theme="dark"] #trayectoria .section-subtitle {
    color: #1a2f52 !important;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.7) !important;
}

/* Card titles & body text */
.card-title,
h3, h4 {
    color: #0d1f3c !important;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .card .card-title,
[data-theme="dark"] .tray-card .card-title,
[data-theme="dark"] .PAI-card .card-title {
    color: #0d1f3c !important;
    text-shadow: none !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: #0d1f3c !important;
    text-shadow: none !important;
}

.card-text {
    color: #1a2f52 !important;
}

[data-theme="dark"] .card-text {
    color: #111827 !important;
}

/* Hero quote text */
.hero-content-stacked .hero-text {
    color: #0d1f3c !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.75);
}

[data-theme="dark"] .hero-content-stacked .hero-text {
    color: #f0f8ff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

/* Nav links over transparent header */
.nav-link {
    color: #0d1f3c !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 4px rgba(255,255,255,0.8);
}

[data-theme="dark"] .nav-link {
    color: #f0f8ff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.nav-link:hover,
.nav-link.active {
    color: var(--secondary) !important;
}

/* Selector labels */
.selector-label {
    color: #0d1f3c !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(255,255,255,0.6);
}

[data-theme="dark"] .selector-label {
    color: #f0f8ff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* Menu food content */
.menu-food-content {
    color: #0d1f3c !important;
    text-shadow: 0 1px 4px rgba(255,255,255,0.5);
}

[data-theme="dark"] .menu-food-content {
    color: #f0f8ff !important;
}

/* General p tags inside cards */
.card p,
.card-sub p {
    color: #1a2f52 !important;
}

[data-theme="dark"] .card p,
[data-theme="dark"] .card-sub p {
    color: #111827 !important;
}

/* Payment text inside transparent cards */
[style*="color: var(--text-secondary)"],
p[style*="color: var(--text-secondary)"] {
    color: #1a2f52 !important;
}

[data-theme="dark"] [style*="color: var(--text-secondary)"] {
    color: #111827 !important;
}

/* ---------- Proyecto de Robótica — Showcase Destacado ---------- */
.robotica-section {
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary);
    border-top: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
    padding: 5.5rem 0;
}

.robotica-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.robotica-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
}
.robotica-blob--1 {
    width: 420px;
    height: 420px;
    top: -160px;
    right: -120px;
    background: radial-gradient(circle, var(--primary), transparent 70%);
    opacity: 0.28;
}
.robotica-blob--2 {
    width: 360px;
    height: 360px;
    bottom: -150px;
    left: -110px;
    background: radial-gradient(circle, var(--secondary), transparent 70%);
    opacity: 0.18;
}
.robotica-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--card-border) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: 0.4;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 72% 30%, black 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 60% at 72% 30%, black 0%, transparent 75%);
}

.robotica-section .container {
    position: relative;
    z-index: 1;
}

.robotica-wrapper {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.robotica-content {
    text-align: left;
}

.robotica-badge {
    background: linear-gradient(135deg, rgba(217, 37, 44, 0.12), rgba(27, 67, 149, 0.14));
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(27, 67, 149, 0.18);
}
.robotica-badge i {
    color: var(--secondary);
}

.robotica-title {
    font-size: 2.3rem;
    color: var(--text-primary);
    margin-bottom: 1.4rem;
    line-height: 1.15;
}

.robotica-textbox {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(27, 67, 149, 0.2) !important;
    border-radius: 20px;
    padding: 1.6rem 1.8rem;
    box-shadow: var(--card-shadow);
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .robotica-textbox {
    background: rgba(15, 23, 42, 0.28) !important;
}

.robotica-text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #1a2f52 !important;
    margin-bottom: 1.3rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.robotica-text:last-child {
    margin-bottom: 0;
}

[data-theme="dark"] .robotica-text {
    color: #111827 !important;
}

.robotica-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1.8rem 0;
}
.robotica-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--card-border);
    padding: 0.55rem 1rem;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(23, 43, 77, 0.06);
}
.robotica-stat i {
    color: var(--primary);
    font-size: 0.95rem;
}

/* Showcase */
.robotica-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.robotica-ribbon {
    position: absolute;
    top: -14px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, var(--secondary), var(--primary));
    color: #fff;
    font-family: var(--font-title);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    padding: 0.5rem 1.1rem;
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(23, 43, 77, 0.25);
}

.robotica-hero {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    cursor: pointer;
    border: 5px solid var(--bg-primary);
    box-shadow: 0 18px 40px rgba(23, 43, 77, 0.18), 0 0 0 1px var(--card-border);
    transition: var(--transition);
}
.robotica-hero img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.robotica-hero:hover img {
    transform: scale(1.06);
}
.robotica-hero:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(23, 43, 77, 0.26), 0 0 0 1px var(--card-border);
}
.robotica-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(10, 15, 30, 0.65) 100%);
    z-index: 1;
}
.robotica-hero-caption {
    position: absolute;
    left: 1.1rem;
    bottom: 1rem;
    color: #fff;
    font-size: 1.05rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    z-index: 2;
}
.robotica-zoom-hint {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: var(--transition);
}
.robotica-hero:hover .robotica-zoom-hint {
    opacity: 1;
    transform: scale(1);
}

.robotica-filmstrip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}
.robotica-thumb {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    border: 3px solid var(--bg-primary);
    box-shadow: 0 6px 16px rgba(23, 43, 77, 0.12);
    transition: var(--transition);
}
.robotica-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.robotica-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(23, 43, 77, 0.2);
    border-color: var(--primary);
}
.robotica-thumb:hover img {
    transform: scale(1.12);
}

.robotica-hero:focus-visible,
.robotica-thumb:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .robotica-wrapper {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .robotica-content {
        text-align: center;
    }
    .robotica-textbox {
        text-align: justify;
    }
    .robotica-stats {
        justify-content: center;
    }
    .robotica-ribbon {
        right: 50%;
        transform: translateX(50%);
    }
}

@media (max-width: 520px) {
    .robotica-filmstrip {
        grid-template-columns: repeat(3, 1fr);
    }
    .robotica-hero img {
        height: 220px;
    }
}