body {

        background-color: #000;

        margin: 0;

        padding: 0;

        height: 100vh;

        width: 100vw;

        display: flex;

        justify-content: center;

        align-items: center;

        font-family: 'Inter', sans-serif;

        background-color: #0d1117;

    }



    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');



    #bg-div {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-image: url('https://files.catbox.moe/yp1xlh.jpg');

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;

        z-index: -1;

        opacity: 0;

        transition: opacity 2s ease-in-out;

    }



    /* Nuevo contenedor principal invisible, sin sombra ni overflow */

    .main-container {

        position: relative;

        width: 80%;

        height: 60%;

        max-width: 425px;

        opacity: 0;

        transition: opacity 2s ease-in-out;

        top: 20px;

        left: 5px;

        z-index: 2; /* Aseguramos que el main-container esté por encima de los marcadores */

    }



    /* Contenedor de la UI principal del Home */

    .home-ui, .section-content {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        z-index: 2; /* Sigue teniendo un z-index alto para estar sobre el base-square */

        display: none; /* Inicia oculto para que JS controle la visibilidad */

    }



    /* La UI del Home debe ser visible al cargar */

    .home-ui {

        display: block;

    }



    .base-square {

      margin-left: -10px;

        margin-top:5px;

        width: 380px;   /* ancho fijo */

        height: 425px;  /* alto fijo */

        aspect-ratio: auto;

        display: block;

        filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.5));

        position: relative; /* Para que el z-index funcione en relación a sus hermanos */

        z-index: 2;

    }



    .new-frame {

        position: absolute;

        top: -15px;

        left: -45px;

        width: 55%;

        height: auto;

        filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.5));

        z-index: 1;

        cursor: pointer;

    }



    .text-box {

        position: absolute;

        top: 30px;

        right: 22px;

        width: 200px;

        height: 30px;

        border: 2px dashed #fff;

        padding: 20px;

        color: #fff;

        display: flex;

        justify-content: center;

        align-items: center;

        font-family: sans-serif;

        font-size: 1.2rem;

        text-align: center;

}

    .text-box2 {

        position: absolute;

        top: 170px;

        right: 40px;

        width: 115px;

        height: 0.1px;

        height: 0.1px;

        border: 2px dashed #fff;

        padding: 20px;

        color: #fff;

        display: flex;

        justify-content: center;

        align-items: center;

        font-family: sans-serif;

        font-size: 0.8rem;

        text-align: center;

        overflow: hidden;

    }



    /* --- Propiedades para el texto de la animación --- */

    .text-box2 p {

        white-space: nowrap;

        animation: slideLeft 5s linear infinite;

        /* Puedes ajustar estos valores: */

        font-size: 0.8rem;

        letter-spacing: 0.1em;

    }



    @keyframes slideLeft {

        0% { transform: translateX(100%); }

        100% { transform: translateX(-100%); }

    }



    .bunny {

        position: absolute;

        top: 60px;

        right: -25px;

        width: 30%;

        z-index: 3;

    }

    .frutilla {

        position: absolute;

        top: 355px;

        right: -25px;

        width: 28%;

        z-index: 3;

    }



    .chatbox {

        position: absolute;

        top: 192px;

        right: 210px;

        width: 50%;

        height: 220px;

        z-index: 2;

        filter: hue-rotate(15deg) saturate(0.6) brightness(1.4);

    }



    .cbox-iframe {

        position: absolute;

        top: 210px;

        right: 215px;

        width: 48%;

        height: 240px;

        border: none;

        z-index: 3;

        filter: hue-rotate(15deg) saturate(0.6) brightness(1.4);

    }



    .social-container {

        z-index: 2;

        display: flex;

        gap: 10px;

        position: absolute;

        top: 110px;

        right: 100px;

    }



    .social-button {

        width: 1000px;

        height: 70px;

        background-color: transparent;

        border: 2px solid white;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        transition: transform 0.3s ease-in-out;

        cursor: pointer;

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    }



    .social-button:hover,

    .social-button:focus {

        transform: scale(1.1);

    }



    .social-button img {

        width: 90%;

        height: 65%;

    }

    .social-button img.vk-logo{

        width: 50%;

        height: 50%;

    }

    .social-button img.tellonym-logo{

        width: 50%;

        height: 50%;

    }

    .social-button img.mewe-logo {

        width: 90%;

        height: 90%;

    }



    .invert-filter {

        filter: invert(1);

    }



    @media (max-width: 600px) {

        .social-container {

            gap: 8px;

        }

        .social-button {

            width: 35px;

            height: 35px;

        }

    }



    /* Contenedor de los nuevos botones de marcador */

    .marker-buttons-container {

        position: absolute;

        top: -34px; /* Se ha subido más */

        left: -10px;

        transform: translateX(-50%);

        display: flex;

        flex-direction: row;

        gap: 10px;

        z-index: 1; /* Esto asegura que el z-index esté detrás de la interfaz del Home */

        left: 60%; /* Ajustado para mover las imágenes más a la derecha */

    }

    

    .marker-button {

        background-color: transparent;

        border: none;

        cursor: pointer;

        padding: 0;

        transition: transform 0.3s ease;

    }

    

    .marker-button:hover {

        transform: scale(1.1);

    }



    .marker-button img {

        width: 30px; /* Se ha achicado para que las imágenes sean más pequeñas */

        height: auto;

    }



    /* Nuevos estilos para la tabla */

    .side-by-side-container {

        position: absolute;

        top: 220px;

        right: 40px;

        width: 135px;

        height: 112px;

        border: 2px dashed #fff;

        padding: 10px;

        color: #fff;

        z-index: 2;

        overflow-y: auto;

        text-align: center;

        display: flex;

        flex-direction: column;

        gap: 5px;

    }



    .box1 {

        width: 100%;

        height: auto;

    }



    .box1 table {

        width: 100%;

        border-collapse: collapse;

    }



    .box1 h3 {

        text-decoration: underline;

        font-size: 1rem;

        margin-top: 0;

        margin-bottom: 1px;

    }



    /* Se ha eliminado la celda de encabezado y se ha colocado todo en la celda de datos */

    .box1 td {

        padding: 5px;

        vertical-align: top;

        border-bottom: 1px solid rgba(255, 255, 255, 0.3);

        text-align: left; /* Alineado a la izquierda */

    }

    

    /* Estilos para los párrafos de texto dentro de la tabla */

    .box1 td p {

        font-size: 0.7rem;

        margin-bottom: 5px;

        white-space: nowrap;

    }



    /* Contenedor para las imágenes de la tabla */

    .box1 .image-container {

        display: flex;

        justify-content: flex-start; /* Alineado a la izquierda */

        align-items: center;

        gap: 5px;

        margin-top: 5px;

    }



    /* --- Propiedades para las imágenes dentro de la tabla --- */

    .box1 img {

        /* Puedes ajustar estos valores: */

        width: 40px;

        filter: none;

        vertical-align: middle;

        cursor: pointer; /* Agregado para indicar que es clickeable */

    }

    

    .box1 img.small-image {

        width: 30px;

    }



    .box1 td.small-text {

        font-size: 10px;

    }

    .text-box p {
    /* Ajusta este valor para cambiar el tamaño */
    font-size: 12px; 
    
    /* El grosor de la letra (opcional) */
    font-weight: normal; 
    line-height: 6px;      /* El 1 hace que el espacio vertical sea igual al tamaño de la letra */
    /* Para que el texto se vea más elegante y espaciado */
    letter-spacing: 1px;
    
    /* Color para que combine con tu estética rosa si quieres */
    color: #ffffff; 
    
    /* Margen para que no quede pegado a otros elementos */
    margin: 0; 
}


    /* Modal para visualizar la imagen grande */

    .modal-overlay {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background-color: rgba(0, 0, 0, 0.8);

        display: none;

        justify-content: center;

        align-items: center;

        z-index: 1000;

    }



    /* Botón de cerrar del modal */

    .modal-close-btn {

        position: absolute;

        top: 20px;

        right: 30px;

        color: white;

        font-size: 2rem;

        font-weight: bold;

        cursor: pointer;

        z-index: 1001;

    }

    

    .modal-content {

        max-width: 90%;

        max-height: 90%;

        border-radius: 10px;

        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

    }

    :root {

        /* Paleta de colores actualizada a rosa pastel */

        --mp3-body-color: #f8d9e0; /* Color principal del cuerpo */

        --mp3-body-shadow: #d2b7c0; /* Sombra del cuerpo */

        --mp3-body-highlight: #fff2f5; /* Luz del cuerpo */

        --screen-color: #fff2f5; /* Fondo de la pantalla */

        --text-color: #333333; /* Color de texto oscuro para contraste */

        --wheel-color: #f8d9e0; /* Color de la rueda */

        --wheel-shadow: #d2b7c0; /* Sombra de la rueda */

        --wheel-highlight: #fff2f5; /* Luz de la rueda */

        --wheel-ring-color: #d2b7c0; /* Anillo de la rueda */

        --button-color: #f8d9e0; /* Botones del mismo color que el cuerpo */

        --button-text-color: #555555; /* Color del texto de los botones */

        --button-active-shadow: inset 2px 2px 5px #d2b7c0; /* Sombra de los botones al presionar */

        --progress-bar-color: #3b82f6; /* Color de la barra de progreso (azul) */

        --progress-background: #ffe3e9; /* Fondo de la barra de progreso (rosa claro) */

        --font-family: 'Inter', sans-serif;

        --highlight-color: #3b82f6;

        --thumb-color: #ffffff; /* Nuevo color para el círculo del volumen */

    }



    body {

        display: flex;

        justify-content: center;

        align-items: center;

        min-height: 100vh;

        background: linear-gradient(145deg, #f0f0f0, #e0e0e0);

        font-family: var(--font-family);

        margin: 0;

        padding: 20px;

        box-sizing: border-box;

    }



    /* ========== MP3 PLAYER (solo cambios de escala y color de iconos) ========== */

    .mp3-player {

        width: 90%;

        max-width: 280px;

        background-color: var(--mp3-body-color);

        border-radius: 20px;

        padding: 20px;

        box-shadow: 8px 8px 16px var(--mp3-body-shadow),

                   -8px -8px 16px var(--mp3-body-highlight);

        text-align: center;

        display: flex;

        flex-direction: column;

        gap: 20px;



        /* REDUCCIÓN SOLICITADA (aún más pequeña) */

        transform: scale(0.45);       /* <-- factor reducido a 0.45 para hacerlo más pequeño */

        transform-origin: left top;

        -webkit-transform: scale(0.45);

        -webkit-transform-origin: left top;

        pointer-events: auto;

        overflow: visible; /* aseguramos que controles emergentes no queden recortados */

    }



    /* Volumen: aseguramos que el icono sea visible (blanco) y accesible */

    .mp3-player .volume-icon {



        font-size: 1.05rem;           /* ligeramente más grande para visibilidad */

        z-index: 9999;                /* por encima de otros elementos */

        cursor: pointer;

        display: inline-block;

    }



    /* Atras / Play-Pause / Adelante: iconos en blanco y visibles */

    .mp3-player .wheel-button,

    .mp3-player .wheel-button i {

        color: #ffffff !important;    /* asegura que los iconos <i> se muestren en blanco */

    }



    /* Específicos por id si quieres mayor seguridad */

    .mp3-player #prev-btn i,

    .mp3-player #play-pause-btn i,

    .mp3-player #next-btn i {

        color: #ffffff !important;

    }



    /* mantengo el resto de estilos originales sin cambios */

    .mp3-screen {

        background-color: var(--screen-color);

        border-radius: 10px;

        padding: 15px;

        height: 250px;

        box-shadow: inset 3px 3px 8px #cccccc, inset -3px -3px 8px #ffffff;

        color: var(--text-color);

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        align-items: center;

        gap: 10px;

        text-align: left;

        position: relative; /* Para el contenido de la lista */

        overflow: hidden;

    }



    #track-display, #playlist-display {

        width: 100%;

        height: 100%;

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

        align-items: center;

        transition: opacity 0.3s ease-in-out;

        opacity: 1;

        position: absolute;

        top: 0;

        left: 0;

        padding: 15px;

        box-sizing: border-box;

    }

    

    #playlist-display {

        justify-content: flex-start;

        padding-top: 15px;

        opacity: 0;

        pointer-events: none;

    }



    #playlist-display h3 {

        margin-top: 0;

        margin-bottom: 10px;

        font-size: 1rem;

        font-weight: 700;

    }



    #playlist-display ul {

        list-style: none;

        padding: 0;

        margin: 0;

        width: 100%;

        overflow-y: auto;

    }



    #playlist-display li {

        font-size: 0.9rem;

        padding: 8px 10px;

        cursor: pointer;

        border-radius: 5px;

        transition: background-color 0.2s ease;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }



    #playlist-display li.active {

        background-color: var(--highlight-color);

        color: white;

        font-weight: 700;

    }



    .song-info {

        width: 100%;

        text-align: center; /* Centraliza el texto */

    }



    .song-info h3 {

        margin: 0;

        font-size: 1rem;

        font-weight: 700;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }



    .song-info p {

        margin: 5px 0 0;

        font-size: 0.8rem;

        color: #888;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }



    .progress-container {

        width: 90%;

        height: 4px;

        background-color: var(--progress-background);

        border-radius: 2px;

        cursor: pointer;

        box-shadow: inset 1px 1px 3px var(--mp3-body-shadow);

    }



    .progress-bar {

        height: 100%;

        width: 0%;

        background-color: var(--progress-bar-color);

        border-radius: 2px;

        transition: width 0.2s ease;

    }

    

    .time-info {

        display: flex;

        justify-content: space-between;

        width: 100%;

        font-size: 0.7rem;

        color: #999;

    }



    .volume-container {

        position: absolute; /* Usar posición absoluta para moverlo */

        top: 15px;

        left: 15px;

        display: flex;

        align-items: center;

        z-index: 9999; /* aseguramos visibilidad y clicabilidad */

    }

    

    .volume-slider-wrapper {

        background-color: var(--mp3-body-color);

        padding: 5px 10px;

        border-radius: 10px;

        box-shadow: 4px 4px 8px var(--mp3-body-shadow),

                   -4px -4px 8px var(--mp3-body-highlight);

        transform: scaleX(0); /* Desplazamiento horizontal */

        transform-origin: left;

        transition: transform 0.3s ease, opacity 0.3s ease;

        opacity: 0;

        pointer-events: none;

    }



    .volume-slider-wrapper.active {

        transform: scaleX(1);

        opacity: 1;

        pointer-events: auto;

    }



    #volume-slider {

        -webkit-appearance: none;

        appearance: none;

        width: 80px; /* Ancho más compacto */

        height: 4px;

        background: var(--progress-background);

        border-radius: 2px;

        outline: none;

        cursor: pointer;

        box-shadow: inset 1px 1px 3px var(--mp3-body-shadow);

    }



    #volume-slider::-webkit-slider-thumb {

        -webkit-appearance: none;

        appearance: none;

        width: 12px;

        height: 12px;

        background: var(--thumb-color); /* Usando la nueva variable de color */

        border-radius: 50%;

        cursor: pointer;

    }

:root {

--volume-icon-color: #F6E6EA;

}

/* resto de tu CSS */

.volume-icon {

        font-size: 1rem;

        color: var(--mp3-body-shadow); /* Color del icono cambiado a un rosa más oscuro */

        cursor: pointer;

        padding: 5px;

    }

    

    /* Estilos del CD y la portada */

    .cd-composition {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -70%); /* Ajuste para bajarlo y centrarlo */

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .cd-disc {

        width: 110px; /* Tamaño un poco más grande */

        height: 110px; /* Tamaño un poco más grande */

        border-radius: 50%;

        background-image: url('https://files.catbox.moe/n72hlg.jpg');

        background-size: cover;

        background-position: center;

        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

        animation: spin 3s linear infinite;

        animation-play-state: paused;

        z-index: 1;

        margin-left: -55px; /* Ajustado para el nuevo tamaño */

    }



    .cd-disc.playing {

        animation-play-state: running;

    }



    .cd-disc::before {

        content: '';

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        width: 15px;

        height: 15px;

        background-color: #fff;

        border-radius: 50%;

        border: 1px solid #ccc;

    }



    .cd-cover {

        width: 120px; /* Tamaño un poco más grande */

        height: 120px; /* Tamaño un poco más grande */

        box-shadow: 0 4px 10px rgba(0,0,0,0.3);

        border-radius: 8px;

        overflow: hidden;

        z-index: 2;

    }

    

    .cd-cover img {

        width: 100%;

        height: auto;

        object-fit: cover;

    }

    

    @keyframes spin {

        0% { transform: rotate(0deg); }

        100% { transform: rotate(360deg); }

    }



    .controls-wheel {

        position: relative;

        width: 180px;

        height: 180px;

        background-color: var(--wheel-color);

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        box-shadow: 6px 6px 12px var(--wheel-shadow),

                   -6px -6px 12px var(--wheel-highlight);

        align-self: center;

    }



    .controls-wheel::before {

        content: '';

        position: absolute;

        top: 5px;

        right: 5px;

        bottom: 5px;

        left: 5px;

        border: 1px solid var(--wheel-ring-color);

        border-radius: 50%;

        pointer-events: none;

    }



    .wheel-button {

        position: absolute;

        background-color: var(--button-color);

        border: none;

        color: #ffffff; /* default white so icons are clearly visible (affects all wheel buttons) */

        font-size: 1rem;

        cursor: pointer;

        width: 40px;

        height: 40px;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        transition: transform 0.1s ease, box-shadow 0.1s ease;

    }

    

    .wheel-button:active {

        box-shadow: var(--button-active-shadow);

        transform: scale(0.9);

    }



    #menu-btn { top: 10px; }

    #prev-btn { left: 10px; }

    #next-btn { right: 10px; }

    #play-pause-btn { bottom: 10px; }



    .center-button {

        background-color: var(--mp3-body-color);

        width: 60px;

        height: 60px;

        border-radius: 50%;

        display: flex;

        justify-content: center;

        align-items: center;

        box-shadow: 3px 3px 6px var(--mp3-body-shadow),

                   -3px -3px 6px var(--mp3-body-highlight);

        /* Borde blanco para el círculo central */

        border: 1px solid white;

    }



    .center-button:active {

        box-shadow: var(--button-active-shadow);

        transform: scale(0.95);

    }

#music .mp3-player {

position: absolute;      /* ya debe ser así */

left: 15px;             /* negativo = más a la izquierda; 0 = borde izquierdo */

top: 35px;              /* mayor = más abajo; menor = sube */

transform: scale(0.45);  /* conserva la escala que usas */

transform-origin: left top;

overflow: visible;

}

/* CONTENEDOR PRINCIPAL MUSIC */

/* CONTENEDOR DEL VIDEO */

.youtube-video {

position: absolute;     /* independiente del mp3 */

top: 200px;             /* subir / bajar */

left: 170px;             /* mover a los lados */

width: 260px;           /* tamaño del video */

z-index: 3;

}

/* VIDEO */

.youtube-video iframe {

width: 65%;

aspect-ratio: 5/ 6;

border: none;

border-radius: 14px;

}

.video-overlay {

position: absolute;

top: 0;

left: 0;

width: 65%;              /* MISMO ancho que el iframe */

aspect-ratio: 5 / 6;     /* MISMA proporción que el iframe */

background: rgba(255, 105, 180, 0.25);

border-radius: 14px;

pointer-events: none;

}

/* CONTENEDOR DEL GIF */

.music-gif {

position: absolute;   /* independiente del mp3 y del video */

top: 284px;            /* subir / bajar */

left: 15px;           /* mover a los lados */

width: 120px;         /* tamaño del gif */

z-index: 4;           /* por encima del video */

pointer-events: none; /* no interfiere con clics */

}

/* GIF */

.music-gif img {

width: 120%;

height: auto;

display: block;

border-radius: 12px;  /* opcional */

}

/* CONTENEDOR DE LA IMAGEN (MARCO ADAPTABLE) */

.music-image {

position: absolute;

top: 35px;

left: 178px;

display: inline-block;

border: 2px dashed #fff;

padding: 6px;

z-index: 3;

box-sizing: border-box;

}

/* IMAGEN */

.music-image img {

width: 140px;        /* tamaño real */

height: auto;

display: block;

border-radius: 0px;

cursor: pointer;

}

/* IMAGEN SUPERPUESTA */

.music-image-overlay {

position: absolute;

top: 35px;          /* ajustar según gusto */

right: -100px;        /* debe coincidir con la imagen base */

z-index: 4;         /* mayor que la imagen base */

pointer-events: none; /* no interfiere con clicks */

}

/* IMG OVERLAY */

.music-image-overlay img {

width: 170px;       /* mismo ancho que la imagen base */

height: auto;

display: block;

}

/* ===============================

CONTENEDOR INTERNO (COMO HOME)

================================ */

.text-area-wrapper {

position: relative;

width: 100%;

height: 100%;

overflow: hidden;

}

/* ===============================

MARCO DE LÍNEAS BLANCAS

(DECORATIVO, ESTÁTICO)

================================ */

.text-frame {

position: absolute;

top: 35%;

left: 47.5%;

transform: translate(-50%, -50%);



width: 86%;   /* ← ACÁ controlás el ancho */

height: 58%;  /* ← ACÁ controlás el alto */



border: 2px dashed #fff;

border-radius: 0px;



z-index: 5;

pointer-events: none;

box-sizing: border-box;

}

/* ===============================

CONTENIDO (SCROLLEA)

================================ */

.text-content {

position: absolute;

top: 35%;

left: 45%;

transform: translate(-50%, -50%);



width: 80%;

height: 56%;



overflow-y: auto;

padding: 20px;



z-index: 10;

box-sizing: border-box;

}

/* ===============================

TEXTO

================================ */

.text-content p {

margin: 0;

line-height: 1.5;

text-align: left;

color: #fff;

}

/* ===============================

IMAGEN FLOTANTE

================================ */

.text-content .float-img {

float: left;

width: 130px;

margin: 0 15px 10px 0;

border-radius: 10px;

}

/* ===============================

SCROLLBAR DISCRETA

================================ */

.text-content::-webkit-scrollbar {

width: 6px;

}

.text-content::-webkit-scrollbar-thumb {

background: rgba(255,255,255,0.5);

border-radius: 10px;

}

.text-line-frame {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);



width: 86%;

height: 72%;



border: 2px dashed #ffffff;

border-radius: 10px;



pointer-events: none;

z-index: 5;

box-sizing: border-box;

}

/* Imagen pequeña a la izquierda (estilo uniforme) */

.history-img-left {

float: left;

width: 95px;              /* ← tamaño pequeño */

height: auto;

margin: 0 12px 8px 0;

border-radius: 8px;

}

}

.text-frame-content::after {

content: "";

display: block;

clear: both;

}

/* Imagen flotando a la izquierda */

.history-img-left {

float: left;

width: 130px;

margin: 0 14px 10px 0;

border-radius: 10px;

}

/* Imagen flotando a la derecha */

.history-img-right {

float: right;

width: 130px;

margin: 0 0 10px 14px; /* espacio entre texto e imagen */

border-radius: 10px;

}

/* Imagen centrada con texto debajo */

.history-img-center {

display: block;

width: 500px;          /* ajustable */

max-width: 100%;

margin: 20px auto 12px auto; /* centrada horizontal */

border-radius: 12px;

}
/* 1. Definimos la animación (Solo opacidad, sin movimiento para evitar errores) */
@keyframes fadeInApparition {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 2. Aplicamos la animación a las secciones */
.home-ui, .section-content {
    /* Mantenemos el estado final de la animación */
    animation: fadeInApparition 0.6s ease-out forwards;
}

/* 3. ¡IMPORTANTE! Borramos o comentamos el bloque de .text-content 
   que tenías antes. No debe llevar animación propia porque ya 
   está dentro de la sección principal. */
#welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background: rgba(248, 217, 224, 0.2) !important; /* Fondo oscuro para resaltar el cartel */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Por encima de todo */
    backdrop-filter: blur(2px);
}

.welcome-card {
    background: #f8d9e0; /* Tu rosa pastel */
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 3px dashed #fff;
}

.welcome-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.welcome-card h2 {
    font-family: 'Inter', sans-serif;
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.welcome-card p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 20px;
}

.welcome-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.welcome-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    background: #fff;
    color: #f8d9e0;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    border: 2px solid #f8d9e0;
}

.welcome-buttons button:hover {
    transform: scale(1.05);
    background: #f8d9e0;
    color: #fff;
}

#welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Fondo oscuro */
    display: flex;
    justify-content: flex-start; /* Alinea a la izquierda */
    align-items: center; /* Centra verticalmente */
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.cartel-wrapper {
    width: 110%;
    max-width: 450px; /* Aquí controlas el tamaño de la imagen */
    margin-left: 8px; /* Aquí controlas qué tan a la izquierda está */
}

.img-cartel {
    width: 110%;
    height: auto;
    display: block;
    /* Sombra reducida: el -12px la encoge para que no sobresalga mucho */
    box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.9);
    border-radius: 20px; /* Opcional: si quieres redondear un poco las puntas */
}
/* Esto hace que el texto flote sobre la imagen sin empujarla */
.cartel-wrapper {
    position: relative; /* Muy importante para que lo de adentro se oriente */
    width: 110%;
    max-width: 450px;
    margin-left: 8px;
}

.contenido-encima {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Centramos el texto y botones dentro del área de la imagen */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.contenido-encima h2 {
    font-family: 'Inter', sans-serif;
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0px #fff; /* Sombra blanca para que se lea mejor */
}

.contenido-encima p {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 20px;
    text-shadow: 1px 1px 0px #fff;
}

.botones-contenedor {
    display: flex;
    gap: 10px;
}

.btn-inicio {
    padding: 8px 15px;
    border: 2px solid #f8d9e0;
    border-radius: 50px;
    background: #fff;
    color: #f8d9e0;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.btn-inicio:hover {
    background: #f8d9e0;
    color: #fff;
    transform: scale(1.05);
}