/* ============================================================
   TIPOGRAFÍA
============================================================ */
@font-face {
    font-family: 'UniversoRetro';
    src: url('Tipografia/VT323-Regular.ttf') format('truetype');
    font-display: swap;
}

/* ============================================================
   BASE SLIDE 2
============================================================ */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    font-family: 'UniversoRetro', monospace;
    cursor: none;
}

/* BLOQUEO DEL CURSOR DEL SISTEMA */
#slide2, #slide2 * {
    cursor: none !important;
}

/* CONTENEDOR SLIDE 2 */
#slide2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================
   ENTRADA BLANCA
============================================================ */
#entrada-blanca {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 1;
    z-index: 9999;
    animation: fadeEntrada 2.9s ease forwards;
    pointer-events: none !important;
}

@keyframes fadeEntrada {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ============================================================
   FONDO SLIDE 2
============================================================ */
#fondo-slide2 {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* PC */
@media (min-width: 768px) {
    #fondo-slide2 {
        background-image: url('web/FondoSlide2.jpg');
    }
}

/* MÓVIL VERTICAL */
@media (max-width: 767px) and (orientation: portrait) {
    #fondo-slide2 {
        background-image: url('web/FondoSlide2MovilV.png');
    }
}

/* MÓVIL HORIZONTAL */
@media (max-width: 767px) and (orientation: landscape) {
    #fondo-slide2 {
        background-image: url('web/FondoSlide2MovilH.png');
    }
}

/* ============================================================
   CURSOR PERSONALIZADO
============================================================ */
#cursor-s2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    pointer-events: none;
    z-index: 999999999 !important;
    transform: translate(-50%, -50%);
    animation: flotarCursor 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px #ff6a00);
    transition: transform 0.15s ease, filter 0.15s ease;
}

#cursor-s2 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes flotarCursor {
    0% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-6px); }
    100% { transform: translate(-50%, -50%) translateY(0px); }
}

/* Hover */
.cursor-hover {
    transform: translate(-50%, -50%) scale(1.25);
    filter: drop-shadow(0 0 14px #ff6a00);
}

/* Clic */
.cursor-click {
    animation: clickExpand 0.25s ease-out;
}

@keyframes clickExpand {
    0% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 8px #ff6a00); }
    50% { transform: translate(-50%, -50%) scale(1.6); filter: drop-shadow(0 0 20px #ff6a00); }
    100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 8px #ff6a00); }
}

/* ============================================================
   POSICIONES UNIVERSALES — EDITABLES
============================================================ */
:root {
    --panel-sonido-x: 457px;
    --panel-sonido-y: -342px;

    --panel-texto-x: -697px;
    --panel-texto-y: -325px;

    --icono-merckland-x: -640px;
    --icono-merckland-y: 320px;

    --icono-aci-x: -468px;
    --icono-aci-y: 320px;
}

/* ============================================================
   PANEL DE SONIDO
============================================================ */
#panel-sonido-s2 {
    position: absolute;
    left: calc(50% + var(--panel-sonido-x));
    top:  calc(50% + var(--panel-sonido-y));
    width: 260px;
    background: rgba(0,0,0,0.55);
    border: 3px solid #00cfff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 14px #00cfff;
    z-index: 999;
}

.titulo-sonido-box {
    width: 100%;
    background: rgba(0,0,0,0.7);
    border: 3px solid #00cfff;
    border-radius: 6px;
    padding: 8px 0;
    text-align: center;
    font-size: 1.25rem;
    color: #00cfff;
    text-shadow: 0 0 6px #00cfff;
    box-shadow: 0 0 10px #00cfff;
    margin-bottom: 10px;
    animation: pulsoTituloBox 1.8s ease-in-out infinite;
    image-rendering: pixelated;
}

@keyframes pulsoTituloBox {
    0%   { box-shadow: 0 0 10px #00cfff; }
    50%  { box-shadow: 0 0 18px #00eaff; }
    100% { box-shadow: 0 0 10px #00cfff; }
}

/* RAYOS PIXELADOS */
.pixel-ray {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00eaff;
    image-rendering: pixelated;
    opacity: 0;
    z-index: 1000;
    animation: pixelRayElectric 0.18s steps(1) infinite;
}

@keyframes pixelRayElectric {
    0%   { opacity: 0; transform: translate(0,0) scale(1); }
    20%  { opacity: 1; transform: translate(3px,-4px) scale(1.3); }
    40%  { opacity: 1; transform: translate(-4px,2px) scale(0.9); }
    60%  { opacity: 1; transform: translate(2px,-3px) scale(1.4); }
    80%  { opacity: 1; transform: translate(-3px,4px) scale(1); }
    100% { opacity: 0; transform: translate(0,0) scale(1); }
}

#panel-sonido-s2 input[type="range"] {
    width: 100%;
    accent-color: #00cfff;
    filter: drop-shadow(0 0 6px #00cfff);
}

.toggle-btn-s2 {
    background: black;
    border: 3px solid #00cfff;
    padding: 10px 14px;
    border-radius: 6px;
    color: #00cfff;
    text-shadow: 0 0 10px #00cfff;
    cursor: none !important;
    margin-top: 12px;
    text-align: center;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    animation: muteBlink 1.4s infinite steps(1);
}

@keyframes muteBlink {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.4); }
    100% { filter: brightness(1); }
}

.toggle-btn-s2:active {
    transform: scale(0.88);
    box-shadow: 0 0 22px #00eaff;
    filter: brightness(1.6);
}

/* ============================================================
   PANEL DE TEXTO
============================================================ */
#panel-texto-s2 {
    position: absolute;
    left: calc(50% + var(--panel-texto-x));
    top:  calc(50% + var(--panel-texto-y));
    width: 24vw;
    height: 36vh;
    background: rgba(0,0,0,0.65);
    border: 4px solid #ff6a00;
    border-radius: 12px;
    padding: 18px;
    overflow-y: scroll;
    box-shadow: 0 0 20px #ff6a00;
    z-index: 999;
}

.titulo-panel-s2 {
    font-size: 1.6rem;
    color: #ff6a00;
    text-shadow: 0 0 6px #ff6a00;
    margin-bottom: 6px;
}

#texto-s2 {
    font-size: 1.3rem;
    color: #ff6a00;
    text-shadow: 0 0 6px #ff6a00;
    line-height: 1.5;
}

#panel-texto-s2::-webkit-scrollbar {
    width: 10px;
}

#panel-texto-s2::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.4);
}

#panel-texto-s2::-webkit-scrollbar-thumb {
    background: #ff6a00;
    border-radius: 10px;
    box-shadow: 0 0 10px #ff6a00;
}

#panel-texto-s2::-webkit-scrollbar-thumb:hover {
    background: #ff8c00;
}

/* ============================================================
   ICONOS CON MARCO Y TRANSICIÓN — ESTRUCTURA Y POSICIÓN FINAL
============================================================ */
.icono-circular {
    width: 300px;   
    height: 300px;  
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    image-rendering: pixelated;
    z-index: 999999;
    
    /* Centra el origen del botón para que las coordenadas funcionen perfectas */
    transform: translate(-50%, -50%); 
    transition: transform 0.25s ease;
}

/* Marco: Ajustado al tamaño grande */
.icono-marco {
    position: absolute;
    width: 100%;      
    height: 100%;     
    top: 0;
    left: 0;
    object-fit: contain; 
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 3; 
}

/* Icono inicial (Fondo base - Encogido en el centro) */
.icono-img-base {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain; 
    border-radius: 50%;
    z-index: 1;
    opacity: 1;
    transform: scale(0.75); 
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Icono final (Fondo hover - Encogido en el centro) */
.icono-img-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain; 
    border-radius: 50%;
    z-index: 2;
    opacity: 0;
    transform: scale(0.75); 
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ============================================================
   ESTADOS HOVER
============================================================ */
.icono-circular:hover .icono-img-base {
    opacity: 0;
}

.icono-circular:hover .icono-img-hover {
    opacity: 1;
    transform: scale(0.78); /* Zoom sutil al cerebro/icono sin salirse del marco */
}

/* Glow del marco */
.icono-circular:hover .icono-marco {
    filter: drop-shadow(0 0 16px #ff6a00); 
}

/* ============================================================
   POSICIONES UNIVERSALES DE ICONOS (CORREGIDAS +40PX ABAJO)
============================================================ */
#icono-merckland {
    left: calc(50% + var(--icono-merckland-x));
    /* ✨ Sumamos 40px aquí para alejarlo del panel de texto limpiamente */
    top:  calc(50% + var(--icono-merckland-y) + 40px); 
}

#icono-aci {
    left: calc(50% + var(--icono-aci-x));
    /* ✨ Sumamos 40px aquí también para que vayan a la par */
    top:  calc(50% + var(--icono-aci-y) + 40px); 
}