* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto', sans-serif; background:#0d0d0d; color:#fff; }
a { text-decoration:none; color:inherit; }

/* NAVBAR */
nav { display:flex; align-items:center; justify-content:space-between; padding:20px 50px; background:#0d0d0d; position:sticky; top:0; z-index:1000; border-bottom:1px solid #3da35d; }
nav img { height:50px; transition: transform 0.3s; }
nav img:hover { transform: scale(1.05); }
nav ul { list-style:none; display:flex; gap:25px; }
nav ul li a { font-weight:700; transition:0.3s; }
nav ul li a:hover { color:#3da35d; }

/* HERO */
.hero { 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    align-items:center; 
    text-align:center; 
    height:100vh; 
    background: linear-gradient(rgba(13,13,13,0.6), rgba(13,13,13,0.6)),
                url('../img/londres.gif') center/cover no-repeat; 
    padding:0 20px; 
}
.hero h1 { font-size:3.5rem; margin-bottom:25px; }
.hero p { font-size:1.2rem; margin-bottom:30px; color:#ddd; max-width:700px; }
.hero-buttons { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.btn { padding:15px 30px; background:#3da35d; color:#fff; font-weight:700; border:none; border-radius:5px; cursor:pointer; transition:0.3s; }
.btn:hover { background:#2b7c44; transform:scale(1.03); }


/* Burbuja flotante más grande con fondo negro */
.burbuja-flotante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.8); /* fondo negro semitransparente */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px; /* más grande que antes */
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
    z-index: 1000;
}

.burbuja-flotante:hover {
    transform: scale(1.1);
    background-color: rgba(128, 128, 128, 0.8); /* gris semitransparente */
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    cursor: pointer;
}

/* SECCIONES */
section { padding:80px 50px; }
section h2 { text-align:center; font-size:2.5rem; margin-bottom:50px; position:relative; }

/* NIVELES Y CURSOS */
.niveles { 
    display: flex; 
    justify-content: space-around; 
    flex-wrap: wrap; 
    gap: 30px; 
}

.nivel-card { 
    background: #1a1a1a; 
    padding: 40px 20px; 
    border-radius: 15px; 
    text-align: center; 
    flex: 1 1 250px; 
    transition: 0.3s; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}

.nivel-card:hover { 
    transform: translateY(-6px); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.7); 
}

.nivel-card h3 { 
    font-size: 1.8rem; 
    margin-bottom: 15px; 
}

.nivel-card p { 
    margin-bottom: 15px; 
    font-size: 1rem; 
}

/* ESTILO PARA IMÁGENES */
.curso-img {
    width: 100%;         
    height: 180px;       
    object-fit: cover;   
    border-radius: 10px; 
    margin-bottom: 20px; 
    transition: transform 0.3s; 
}

.nivel-card:hover .curso-img {
    transform: scale(1.05); 
}

/* BOTÓN VERDE */
.btn {
    background-color: #28a745;  /* Verde */
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s, transform 0.3s;
}

.btn:hover {
    background-color: #218838;  /* Verde más oscuro al pasar el mouse */
    transform: translateY(-2px);
}

/* TESTIMONIOS Y SOBRE NOSOTROS */
.testimonios { position:relative; overflow:hidden; }
.testimonios-container { display:flex; transition: transform 0.6s ease-in-out; }
.testimonial { min-width:300px; background:#1a1a1a; padding:20px; margin:0 10px; border-radius:15px; flex-shrink:0; box-shadow:0 2px 10px rgba(0,0,0,0.5); }
.testimonial p { margin-bottom:10px; font-style:italic; }
.testimonial strong { font-weight:700; }

/* FORMULARIO */
.contacto form { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.contacto input, .contacto textarea { padding:15px; border-radius:8px; border:none; outline:none; background:#2a2a2a; color:#fff; }
.contacto button { width:fit-content; align-self:center; }

/* FOOTER */
footer { text-align:center; padding:20px; background:#1a1a1a; border-top:1px solid #3da35d; }


/* Sección general */
.admin-info {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 60px 20px;
    backdrop-filter: blur(10px);
}

/* Contenedor principal más ancho */
.admin-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* 🔽 Ajuste del tamaño */
    max-width: 880px;   /* antes 750px */
    width: 92%;         /* un poco más de ancho relativo */
    padding: 35px 50px; /* ligeramente más espacioso */
    gap: 35px;          /* más separación visual */

    backdrop-filter: blur(15px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover */
.admin-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

/* ===== Etiqueta ADMIN ===== */
.admin-badge {
    position: absolute;
    top: -12px;
    left: 20px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.admin-badge:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Imagen del administrador */
.admin-foto {
    width: 150px; /* ligeramente más grande */
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Texto */
.admin-text {
    flex: 1;
}

.admin-text h3 {
    font-size: 1.9rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.admin-text p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

/* Animación de entrada suave */
.admin-content {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* =========================
   SOBRE NOSOTROS - ESTILO TIPO TESTIMONIOS
   ========================= */
#sobre-nosotros {
    padding: 2rem 0;
    color: #fff;
}

#sobre-nosotros h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2.5rem; /* más grande */
    color: #f0f0f0;
}

/* Contenedor tipo testimonios */
#sobre-nosotros .testimonios {
    display: flex;
    flex-wrap: wrap; /* permite que las tarjetas se ajusten a la pantalla */
    gap: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: hidden; /* quitar scroll horizontal */
    justify-content: center; /* centra las tarjetas */
}

/* Cada tarjeta */
#sobre-nosotros .testimonial {
    position: relative;
    background: linear-gradient(145deg, #2c2c2c, #1f1f1f);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    min-width: 250px; /* un poco más ancho */
    max-width: 300px; /* más grande */
    min-height: 200px; /* más alto */
    padding: 1.5rem; /* más espacio interior */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Pregunta */
#sobre-nosotros .testimonial strong {
    display: block;
    color: #3da35d;
    margin-bottom: 0.5rem;
    font-size: 1.2rem; /* más grande */
}

/* Respuesta */
#sobre-nosotros .testimonial p {
    font-size: 1.05rem; /* más grande */
    line-height: 1.6;
    color: #e0e0e0;
    margin: 0;
}

/* Scroll interno de cada tarjeta si es necesario */
#sobre-nosotros .testimonial::-webkit-scrollbar {
    width: 5px;
}
#sobre-nosotros .testimonial::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 6px;
}




.testimonios {
    overflow: hidden; /* Oculta el exceso */
    position: relative;
}

.testimonios-container {
    display: flex;
    gap: 1rem;
    scroll-behavior: smooth; /* Permite que scrollBy funcione suavemente */
    overflow-x: auto; /* IMPORTANTE: permite el scroll horizontal */
    padding-bottom: 1rem; /* espacio para no cortar sombras */
}

/* Ocultar scrollbar en algunos navegadores */
.testimonios-container::-webkit-scrollbar {
    display: none;
}

.testimonial {
    min-width: 300px;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.carrusel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}

.carrusel-btn.left { left: 10px; }
.carrusel-btn.right { right: 10px; }

@media (max-width: 768px) {
    .testimonial { min-width: 250px; }
}