/* 
    RESET UNIVERSAL: 
    Si no pongo 'box-sizing: border-box', la web se comporta como un adolescente: 
    le decís que mida 100 y mide 120 porque sí. Con esto, lo que mido se respeta.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    background: #000;
    /* Negro absoluto, como mi paciencia cuando no anda el código */
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 
    CAPA DE FONDO (El pelotero): 
    Acá es donde viven las burbujas. Tiene 'z-index: 1' porque es el fondo. 
    'pointer-events: none' para que las burbujas sean fantasmas: podés verlas, 
    pero no podés tocarlas ni te molestan para hacer clic.
*/

#burbujas-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* 
    LA BURBUJA: 
    Tiene 'will-change' y 'translateZ(0)'. Es como decirle al celular: 
    "Che, usá la tarjeta de video para esto, no seas vago". 
    Así las burbujas suben suaves y no a los saltos.
*/

.burbuja {
    position: absolute;
    bottom: -20px;
    background: rgba(0, 255, 247, 0.5);
    border-radius: 50%;
    animation-name: subir;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ==========================================================================
   EL CONTENEDOR PRINCIPAL (.main-wrapper)
   --------------------------------------------------------------------------
   ¿Para qué sirve? Es el marco que sostiene la tarjeta de vidrio en la pantalla.
   
   ¿Por qué lo cambiamos? Antes usábamos 'center' y la tarjeta se clavaba en el 
   medio de la pantalla, tapando todo. Al cambiarlo a 'flex-start', obligamos 
   a la tarjeta a irse para arriba de todo. 
   
   Le dejamos un 'padding-top' del 5% de la pantalla (5vh) para que no quede 
   pegada al techo del celular como si estuviera mal cortada. Así liberamos casi 
   un 40% de espacio abajo para que las burbujas humorísticas tengan pista libre 
   para flotar y cruzarse sin estorbar la lectura.
   ========================================================================== */
.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Clava la tarjeta arriba. Chau al centrado del medio. */
    padding-top: 5vh;        /* El airecito que le dejamos entre el techo y la tarjeta */
    min-height: 100vh;       /* Fuerza al contenedor a ocupar toda la altura del visor */
    width: 100%;
    box-sizing: border-box;  /* Evita que los paddings deformen el ancho total de la pantalla */
}

/* ==========================================================================
   LA TARJETA DE VIDRIO (.glass-card)
   --------------------------------------------------------------------------
   ¿Para qué sirve? Es tu vidriera virtual, donde va el texto importante de la web.
   
   ¿Por qué lo cambiamos? Antes era muy ancha (unos 600px). En la compu zafaba, 
   pero en el celular era un masacote que tapaba el fondo. 
   
   La achicamos un 40% poniéndole un tope de 360px de ancho máximo (max-width). 
   También le bajamos el espacio interno (padding) a 20px para que el texto quede 
   más compacto. 
   
   El 'width: 85%' es la red de seguridad: si la pantalla del celular es muy 
   vieja o angosta, la tarjeta se encoge sola y deja un 15% de margen libre para 
   no tocar los bordes del teléfono. El resto es puro maquillaje traslúcido.
   ========================================================================== */
.glass-card {
    width: 85%;             /* Margen de seguridad para que nunca toque los bordes del celu */
    max-width: 360px;       /* El tope de ancho. Un 40% más compacta y estilizada */
    padding: 20px;          /* Achicamos el aire interno para que los textos queden juntos */
    margin-top: 2vh;        /* El empujoncito final para terminar de acomodarla arriba */
    
    /* MAQUILLAJE: Efecto esmerilado para que parezca una web moderna y no un Word */
    background: rgba(255, 255, 255, 0.1);       /* Capa blanca casi invisible (10% de opacidad) */
    backdrop-filter: blur(10px);                /* El esmerilado que desenfoca las burbujas al pasar atrás */
    -webkit-backdrop-filter: blur(10px);        /* Soporte obligatorio para que se vea igual en iPhones */
    border: 1px solid rgba(255, 255, 255, 0.2); /* El "borde brillante" que simula el reflejo del vidrio */
    border-radius: 15px;                        /* Esquinas redondeadas para suavizar las puntas */
    color: #fff;                                /* Texto blanco puro para que contraste con el fondo */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Sombra oscura abajo para darle profundidad y despegue */
}

.glass-card h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.glass-card p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
}

#dinamico {
    font-size: 0.875rem;
    color: rgba(0, 255, 247, 0.8);
    margin-top: 1rem;
    font-weight: 500;
}

/* 
    ANIMACIÓN: 
    No movemos las burbujas con 'top' o 'bottom' porque somos profesionales. 
    Usamos 'translateY' que es más liviano para el procesador del celular.
*/
@keyframes subir {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110vh);
        opacity: 0;
    }
}

/* Pantallas muy peque�as: < 360px */
@media (max-width: 359px) {
    .main-wrapper {
        padding: 15px;
    }

    .glass-card {
        padding: 15px;
        border-radius: 15px;
    }

    .glass-card h1 {
        font-size: 1.5rem;
    }

    .glass-card p {
        font-size: 0.875rem;
    }

    #dinamico {
        font-size: 0.75rem;
    }
}

/* Smartphones peque�os: 360px - 480px */
@media (min-width: 360px) and (max-width: 480px) {
    .main-wrapper {
        padding: 16px;
    }

    .glass-card {
        padding: 20px;
        border-radius: 16px;
    }

    .glass-card h1 {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
    }

    .glass-card p {
        font-size: 0.95rem;
    }

    #dinamico {
        font-size: 0.8rem;
    }
}

/* Smartphones medianos y tablets en portrait: 481px - 768px */
@media (min-width: 481px) and (max-width: 768px) {
    .main-wrapper {
        padding: 20px;
    }

    .glass-card {
        padding: 25px;
        max-width: 450px;
    }

    .glass-card h1 {
        font-size: 2rem;
    }

    .glass-card p {
        font-size: 1rem;
    }
}

/* Tablets y dispositivos grandes */
@media (min-width: 769px) {
    .main-wrapper {
        padding: 20px;
    }

    .glass-card {
        padding: 30px;
        max-width: 500px;
    }
}

/* Landscape en m�viles */
@media (max-height: 600px) and (orientation: landscape) {
    .main-wrapper {
        min-height: auto;
        padding: 10px 20px;
    }

    .glass-card {
        padding: 15px 25px;
    }

    .glass-card h1 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .glass-card p {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    #dinamico {
        font-size: 0.75rem;
    }
}

/* Touch devices optimization */
@media (hover: none) and (pointer: coarse) {
    .glass-card {
        padding: 25px;
    }
}

/* 1. EL CONTENEDOR GENERAL (Atrás de todo) */
#burbujas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    /* Obliga a las frases a flotar POR DETRÁS de la glass-card */
    pointer-events: none;
    /* Si una frase pasa por encima de un botón, te deja clickear igual */
}

/* 2. LAS FRASES INDIVIDUALES (Actuando como burbujas) */
.burbuja-flotante {
    position: absolute;
    bottom: -100px;
    /* Arrancan abajo de todo, escondidas */

    /* Estética Glassmorphism combinada */
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 20px;
    border-radius: 30px;
    /* Bordes bien redondeados de burbuja */

    /* Tipografía */
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    white-space: nowrap;
    /* Evita que el texto se rompa en dos líneas */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);

    /* Animación infinita hacia arriba */
    animation: flotarHaciaElTecho infinite linear;
}

/* 3. EL MOVIMIENTO (Subida con un rápido zig-zag horizontal) */
@keyframes flotarHaciaElTecho {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-11.5vh) translateX(25px) rotate(4deg);
        opacity: 1;
    }
    20% {
        transform: translateY(-23vh) translateX(-25px) rotate(-4deg);
    }
    30% {
        transform: translateY(-34.5vh) translateX(25px) rotate(4deg);
    }
    40% {
        transform: translateY(-46vh) translateX(-25px) rotate(-4deg);
    }
    50% {
        transform: translateY(-57.5vh) translateX(25px) rotate(4deg);
    }
    60% {
        transform: translateY(-69vh) translateX(-25px) rotate(-4deg);
    }
    70% {
        transform: translateY(-80.5vh) translateX(25px) rotate(4deg);
    }
    80% {
        transform: translateY(-92vh) translateX(-25px) rotate(-4deg);
    }
    90% {
        transform: translateY(-103.5vh) translateX(25px) rotate(4deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-115vh) translateX(-25px) rotate(-4deg);
        opacity: 0;
    }
}