/* Importar fuentes */
        @import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@300;400;500;600;700&family=DM+Serif+Text:ital@0;1&family=Mea+Culpa&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
       @import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Luxurious+Script&family=Numans&family=Raleway:ital,wght@0,100..900;1,100..900&family=Tangerine:wght@400;700&display=swap');
        /* Estilos base */
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Tangerine", serif;
            font-weight: 400;
            font-style: normal;
            color: white;
            font-size: 1.4rem; /* Ajuste para móviles */
            /* Evitar scroll horizontal en móviles */
            overflow-x: hidden;
            background:url(../imgs/rositarosita.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }
        .font-Alex{
            font-family: 'Alex Brush',serif;
        }
        .font-Tangerine{
            font-family: 'Tangerine',serif;
        }
        .font-Poppins{
            font-family: 'Poppins',serif;
        }
        .font-Luxurius{
            font-family: 'Luxurious Script',serif;
        }
        .font-Raleway{
            font-family: 'Raleway',serif;
        }
        .font-Numans{
            font-family: 'Numans',serif;
        }

        /* Fondo fijo */
        .fondo-fijo {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: url("imgs/rositarosita.jpg") no-repeat center center / cover; /* Placeholder */
            z-index: -1;
        }

        /* Títulos */
        h1, h2, h3, h4, h5, h6 {
            font-family: "Luxurious Script", cursive;
            text-shadow: #000 1px 1px 1px;
            color: black;
            letter-spacing: .1rem;
            font-weight: 400;
            line-height: .9;
        }
        h1{
            font-size: 4rem;
            line-height: .5;
        }   
        .anos15{
            font-size: 2rem;
        }
        .fecha{
            font-size: 1.5rem;
        }
        .play{
            font-size: 1.5rem;
        }
        /* Secciones */
        section {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem 0; /* Padding para espacio en móviles */
        }

        /* Contenedores internos */
        .insection, .insection2, .insection3 {
            width: 90%;
            max-width: 480px; /* Limitar ancho para pantallas grandes */
            min-height: 80vh; /* Ajustar altura mínima */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 2.5rem; /* 50px */
            padding: 1.5rem; /* Ajustar padding */
            text-align: center;
        }

        .insection, .insection3 {
            background: linear-gradient(
                45deg,
                transparent 0%,
                rgba(0, 12, 34, 0.2) 5%,
                rgba(0, 12, 34, 1) 50%,
                rgba(0, 12, 34, 0.2) 95%,
                transparent 100%
            );
        }

        .insection2 {
            background: none;
        }

        .insection3 {
            min-height: 45vh;
        }

        /* Imagen principal */
        .imgs1 img {
            width: 90%;
            max-width: 350px;
            margin-bottom: 2.5rem; /* 50px */
            border-radius: 1rem;
        }

        /* Menú de navegación lateral */
        #menu {
            width: 30px;
            height: 180px;
            position: fixed;
            top: calc(50% - 90px); /* Centrar verticalmente */
            right: 0;
            background: url("imgs/fondo.jpg") repeat-y center center / contain; /* Placeholder */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1.5rem 0; /* 30px */
            border-radius: 10px 0 0 10px;
            z-index: 10; /* Asegurar que esté por encima de otros elementos */
        }

        .caja {
            width: 5px;
            height: 5px;
            background: #8922BF;
            border-radius: 50%;
            margin: 5px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.5s ease; /* Transición más suave */
        }

        .caja.active {
            background: #EDF52B; /* color al estar activa */
            transform: scale(1.5); /* Efecto visual al estar activa */
        }

        .caja a {
            display: block;
            width: 100%;
            height: 100%;
        }

        .contador {
    display: flex;
    justify-content: center; /* Centra los bloques de tiempo horizontalmente */
    gap: 0.75rem;
    margin-top: 0;
    line-height: .7;
    flex-wrap: wrap;
    font-size: 1.5rem; /* Ajuste para móviles */
}

.bloque-tiempo {
    display: flex;
    flex-direction: column;
    align-items: center; /* ¡Esto centra los dígitos y la etiqueta! */
}

/* El problema estaba en el padding y el width de .digito */
.digitos {
    display: flex;
    gap: 0.1rem;
    /* Nuevo: Añadir un ancho para que el bloque sea un contenedor centrado */
    justify-content: center;
}

.digito {
    background-color: transparent;
    font-family: 'Numans', serif;
    color: #f920a5;
    /* MODIFICACIÓN CLAVE: Reducir drásticamente el padding y el width. */
    /* Haz que el ancho se base solo en el contenido (los dos dígitos) */
    padding: 0.25rem 0.5rem; /* Padding pequeño */
    width: auto; /* IMPORTANTE: Dejar que el ancho sea el contenido */
    text-align: center;
    transition: background-color 1s ease;
    font-style: normal;
    font-size: 5rem;
}

.etiqueta {
    margin-top: 0;
    font-size: 1rem;
    color: #f920a5;
    font-family: 'Poppins', sans-serif;
    /* La alineación de la etiqueta está cubierta por align-items: center en .bloque-tiempo */
    text-align: center;
    /* Eliminar o ajustar margin: auto y justify-content para evitar conflictos */
    margin-bottom: 0; /* Solo para limpiar el margin */
}
.separador-contador {
    /* Estilo del separador de tiempo */
    font-size: 5rem; /* Mismo tamaño que los dígitos */
    color: #f920a5; /* Mismo color que los dígitos */
    font-family: 'Numans', serif;
    align-self: flex-start; /* Esto alinea los dos puntos con la parte superior (los números) */
    line-height: .7; /* Asegura que la altura del texto coincida con los números */
    margin-top: 0.25rem; /* Ajuste fino si es necesario */
}

/* Opcional: Centrar los dos puntos verticalmente */
.contador {
    /* Asegúrate de que este contenedor sea un elemento flex */
    display: flex;
    align-items: flex-start; /* Asegura que todo comience en la parte superior */
    /* ... otros estilos ... */
}


        /* Calendario */
        #cajames {
            width: 100%; /* Ajustar a 100% para móviles */
            max-width: 375px; /* Mantener un máximo */
            margin: auto;
            justify-content: center;
            margin-bottom: 2.5rem; /* 50px */
            align-items: center;
            position: relative;
            padding: 1.5rem 0.5rem; /* Ajustar padding */
            
            /* Cambios para Grid */
            display: grid; /* Usar Grid para el diseño de 7 columnas */
            grid-template-columns: repeat(7, 1fr); /* 7 columnas de igual ancho */
            gap: 0.25rem; /* Espacio entre los días */
        }

        #cajames .dia, #cajames .diavc, .elegido {
            border: none;
            width: 100%; /* Ocupar todo el ancho de la celda de la cuadrícula */
            height: 2.1875rem; /* 35px */
            border-radius: 0.625rem; /* 10px */
            text-align: center;
            font-size: 1rem;
            /* margin: 0.125rem; Removido, el gap de grid lo maneja */
            /* display: inline-block; Removido, no es necesario con grid */
            position: relative;
            font-size: 2rem; /* Ajustar tamaño de fuente */
            padding-bottom: 0.3125rem; /* 5px */
            color: #000; /* Color de texto para días */
        }

        #cajames .diavc {
            color: transparent;
        }

        .elegido {
            color: rgb(117, 0, 251);
            font-weight: bold;
        }

        .mes {
            text-align: center;
            padding: 1rem 0; /* 20px */
            font-family: "Mea Culpa", cursive;
            font-size: 3rem; /* Ajustar tamaño de fuente */
        }

        /* Líneas de blur */
        .linea-blur {
            width: 100%;
            height: 2px;
            background: linear-gradient(
                to right,
                transparent 0%,
                rgba(0, 0, 0, 0.2) 5%,
                rgba(0, 0, 0, 1) 50%,
                rgba(0, 0, 0, 0.2) 95%,
                transparent 100%
            );
        }

        .linea-blur-clara {
            width: 100%;
            height: 2px;
            background: linear-gradient(
                to right,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 5%,
                rgba(255, 255, 255, 1) 50%,
                rgba(255, 255, 255, 0.2) 95%,
                transparent 100%
            );
        }

        /* Frase */
        #frase {
            
            color: white;
            font-size: 1rem; /* Ajustar tamaño de fuente */
            text-align: center;
            padding: 10rem 1rem; /* Ajustar padding para móviles */
        }

        .frases {
            font-size: 0.9rem; /* Ajustar tamaño de fuente */
            text-align: center;
            color: #fff;
            padding: 0.5rem 0.75rem; /* Ajustar padding */
        }

        /* Familia */
        #familia {
            color: white;
            font-size: 1.2rem;
            text-align: center;
            margin: 1.5rem 0.5rem; /* Ajustar margen */
        }

        /* Carrusel de imágenes */
        .contenedor-imagen {
            position: relative;
            width: 90%; /* Ajustar a 90% para móviles */
            max-width: 350px; /* Mantener un máximo */
            height: 350px;
            overflow: hidden;
            margin-top: 2.5rem; /* 50px */
            border-radius: 1rem;
        }

        .imagen {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease;
            z-index: 0;
        }

        .imagen.visible {
            opacity: 1;
            z-index: 1;
        }

        /* Información del evento */
        .infoevento {
            color: white;
            font-size: 1.25rem; /* Ajustar tamaño de fuente */
            text-align: center;
            line-height: 1.2;
            margin-bottom: 2.5rem; /* 50px */
        }

        .info {
            color: white;
            font-size: 1.25rem; /* Ajustar tamaño de fuente */
            text-align: center;
            line-height: 1.2;
            margin-bottom: 1rem; /* 20px */
        }

        /* Botón de ubicación/confirmación */
        .ubicacion {
            position: relative;
            width: 90%; /* Ajustar a 90% para móviles */
            max-width: 350px;
            background: rgba(0, 0, 0, 0.2);
            border: white solid thin;
            color: #fff;
            margin-top: 2.5rem; /* 50px */
            padding: 0.75rem 0.75rem; /* Ajustar padding */
            border-radius: 2.5rem; /* 40px */
            text-align: center;
            font-size: 1.25rem; /* Ajustar tamaño de fuente */
            cursor: pointer;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;
        }

        .ubicacion:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .ubicacion img {
            width: 1.875rem; /* 30px */
            margin-right: 0.5rem;
        }

        .c1, .c2 {
            width: auto;
            display: inline-block;
            vertical-align: middle;
        }

        .c2 {
            font-size: 1rem; /* Ajustar tamaño de fuente */
        }

        p {
            font-size: 1.25rem; /* Ajustar tamaño de fuente */
            text-align: center;
            line-height: 1.2;
        }

        small {
            font-size: 0.7rem; /* Ajustar tamaño de fuente */
            font-family: "Poppins", sans-serif;
        }