:root {
    --azul-oscuro: #2b4b91;
    --azul-claro: #4fa8d1;
    --blanco-transparente: rgba(255, 255, 255, 0.92);
}

/* --- ANIMACIONES --- */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

body {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    background: url('imagenes/ondas.png') no-repeat center center fixed;
    background-size: cover;
    overflow-x: hidden;
}

.navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 8%; }
.mini-logo img { height: 55px; border-radius: 50%; }
.nav-links { display: flex; list-style: none; background: var(--azul-oscuro); padding: 10px 30px; border-radius: 50px; }
.nav-links li a { color: white; text-decoration: none; margin: 0 15px; font-size: 0.85rem; }

.container { display: grid; grid-template-columns: 1fr 1fr; padding: 20px 8%; align-items: center; gap: 30px; }

/* --- SECCIÓN DE TEXTO --- */
.text-side {
    animation: slideInLeft 1.2s ease-out forwards;
}

.brand { 
    display: flex; 
    align-items: center; 
    gap: 30px; /* Un poco más de espacio para el icono grande */
}

h1 { 
    font-size: clamp(2.5rem, 5vw, 3.8rem); 
    color: #FFFFFF; 
    line-height: 1.1; 
}

.light { font-weight: 300; color: var(--azul-claro); }

.main-ico { 
    width: 150px; /* <--- AQUÍ CAMBIAS EL TAMAÑO (antes 100px) */
    height: auto; 
    margin-bottom: 0; 
}

/* --- SECCIÓN DE IMAGEN --- */
.image-side {
    animation: slideInRight 1.2s ease-out forwards;
}

.character-wrapper { position: relative; width: 100%; max-width: 450px; display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.annia-img { width: 100%; height: auto; z-index: 1; }

.features-bar {
    width: 100%; background: var(--blanco-transparente); backdrop-filter: blur(10px);
    display: flex; padding: 15px 5px; border-radius: 20px; margin-top: -40px;
    z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    opacity: 0;
    animation: fadeIn 1s ease-out 0.8s forwards;
}

.f-item { flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: 0.3s; }
.f-item:hover { transform: translateY(-5px); }
.f-item img { width: 45px; height: 45px; margin-bottom: 5px; object-fit: contain; }
.f-item p { font-size: 0.7rem; color: var(--azul-oscuro); font-weight: 700; text-align: center; line-height: 1.2; }
.f-item:not(:last-child) { border-right: 1px solid rgba(0,0,0,0.1); }

.legal-tags-bottom { 
    margin-top: 25px; 
    display: flex; 
    gap: 15px; 
    justify-content: center; 
    width: 100%; 
    opacity: 0;
    animation: fadeIn 1s ease-out 1.2s forwards;
}
.tag-capsule { background: var(--azul-oscuro); color: white; text-decoration: none; padding: 8px 18px; border-radius: 50px; font-size: 0.75rem; transition: 0.3s; }
.tag-capsule:hover { background: var(--azul-claro); }

/* MODAL */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
.modal-content { background: white; margin: 2% auto; width: 90%; height: 92vh; border-radius: 20px; position: relative; overflow: hidden; }
.close-modal { position: absolute; top: 10px; right: 20px; font-size: 40px; color: #333; cursor: pointer; z-index: 1001; }

#reader { border: none !important; }
#reader video { border-radius: 15px; object-fit: cover; }

@media (max-width: 900px) {
    .container { grid-template-columns: 1fr; text-align: center; }
    .brand { flex-direction: column; gap: 15px; } 
    .main-ico { width: 120px; } /* Un poco más pequeño en móviles para que no sature */
    .nav-links { display: none; }
    .text-side, .image-side { animation: fadeIn 1.2s ease-out forwards; }
}