/* ============================
   FUENTE GENERAL
   ============================ */
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #f5f6f7;
    color: #222;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================
   HEADER GLOBAL FYROX CAMPUS
   ============================ */
.header {
    background: #1b1f2f;
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.navbar {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.navbar a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

.navbar a:hover {
    color: #ffd54f;
}

.navbar a.active {
    color: #ffd54f;
}

/* ============================
   MAIN CONTAINER (INDEX)
   ============================ */
.main-container {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255,255,255,0.85);
    border-radius: 12px;
    max-width: 700px;
    margin: 60px auto;
}

.main-container h1 {
    font-size: 30px;
    color: #000;
    margin-bottom: 8px;
}

.main-container p {
    font-size: 16px;
    color: #333;
    margin-bottom: 25px;
}

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

.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
    text-align: center;
}

.btn-primary {
    background-color: #ffd54f;
    color: #000;
}

.btn-secondary {
    background-color: #444;
    color: #fff;
}

.btn:hover {
    transform: scale(1.05);
}

/* ============================
   TARJETAS DE SERVICIOS
   ============================ */
.servicios-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 20px;
}

.servicio-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 260px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.servicio-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}

.btn-servicio {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 18px;
    background: #ffd54f;
    color: #000;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
}

/* ============================
   FORMULARIO DE INSCRIPCIÓN
   ============================ */
.input-mail {
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #ccc;
    margin-top: 15px;
    width: 100%;
    max-width: 300px;
    display: block;
}

.btn-inscribir {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background: #ffd54f;
    color: #000;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
    border: none;
}

.btn-inscribir:hover {
    transform: scale(1.05);
}

/* ============================
   FOOTER
   ============================ */
.footer {
    text-align: center;
    padding: 20px;
    background: #0a0a0a;
    color: #fff;
    margin-top: auto;
}
/* ============================
   BOTÓN WHATSAPP FLOTANTE
   ============================ */
.whatsapp-float {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 65px;
    height: 65px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: floatPulse 1.8s infinite ease-in-out;
    z-index: 9999;
}

.whatsapp-float img {
    width: 38px;
    height: 38px;
}

@keyframes floatPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
/* BOTÓN WHATSAPP FLOTANTE */
.whatsapp-float {
    position: fixed;
    bottom: 22px;
    right: 22px;
    width: 65px;
    height: 65px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: floatPulse 1.8s infinite ease-in-out;
    z-index: 9999;
    overflow: hidden; /* CONTIENE LA IMAGEN */
    padding: 10px; /* CONTIENE AÚN MÁS */
}

.whatsapp-float img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* EVITA DEFORMACIÓN */
    display: block;
}/* ============================================
   MOBILE — AJUSTE DEL FOOTER PARA EVITAR SUPERPOSICIÓN
   ============================================ */

@media (max-width: 768px) {

    /* Mueve el texto del footer a la izquierda */
    .footer {
        padding-right: 90px !important; /* espacio para el botón de WhatsApp */
    }

    /* Botón flotante de WhatsApp */
    .whatsapp-float {
        bottom: 25px !important;
        right: 15px !important;
        width: 48px !important;
        height: 48px !important;
    }
}

@media (max-width: 480px) {

    .footer {
        padding-right: 100px !important; /* más espacio en pantallas pequeñas */
    }

    .whatsapp-float {
        width: 42px !important;
        height: 42px !important;
        bottom: 20px !important;
    }
}<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Fyrox Campus - Formación Técnica Profesional</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/style_responsive.css">


    <!-- CSS GLOBAL DEL INDEX -->
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', sans-serif;
            background-image: url('img/cursos/fondo_index.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            color: #000;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .header {
            background: rgba(0, 0, 0, 0.7);
            padding: 20px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.15);
        }

        .navbar {
            display: flex;
            gap: 22px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .navbar a {
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
        }

        .navbar a:hover {
            color: #ffd54f;
        }

        .main-container {
            text-align: center;
            padding: 50px 20px;
            background: rgba(255,255,255,0.85);
            border-radius: 12px;
            max-width: 600px;
            margin: 60px auto;
        }

        .main-container h1 {
            font-size: 28px;
            color: #000;
            margin-bottom: 8px;
        }

        .main-container p {
            font-size: 16px;
            color: #333;
            margin-bottom: 25px;
        }

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

        .btn {
            display: inline-block;
            padding: 10px 22px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
            text-decoration: none;
            text-align: center;
        }

        .btn-primary {
            background-color: #ffd54f;
            color: #000;
        }

        .btn-secondary {
            background-color: #444;
            color: #fff;
        }

        .btn:hover {
            transform: scale(1.05);
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #fff;
            background: rgba(0, 0, 0, 0.7);
            margin-top: auto;
        }

        /* BOTÓN WHATSAPP + TEXTO */
        .whatsapp-container {
            position: fixed;
            bottom: 22px;
            right: 22px;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 9999;
        }

        .whatsapp-text {
            background: rgba(0,0,0,0.75);
            color: #fff;
            padding: 10px 16px;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            backdrop-filter: blur(4px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            animation: floatPulse 1.8s infinite ease-in-out;
        }

        .whatsapp-float {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            animation: floatPulse 1.8s infinite ease-in-out;
        }

        .whatsapp-float svg {
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 18px;
        }

        @keyframes floatPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.12); }
            100% { transform: scale(1); }
        }
    </style>
</head>

<body>

    <!-- HEADER -->
    <header class="header">
        <nav class="navbar">
            <a href="courses.html">Cursos</a>
            <a href="login.html">Aulas</a>
            <a href="soporte.html">Soporte</a>
            <a href="contacto.html">Contacto</a>
        </nav>
    </header>

    <!-- CONTENIDO PRINCIPAL -->
    <div class="main-container">
        <h1>Fyrox Campus</h1>
        <p>Formación Técnica Profesional<br>
        Capacitación en electrónica de potencia, STM32, sensores aislados, sistemas CAN, instrumentación y más.</p>

        <div class="buttons">
            <a href="register.html" class="btn btn-primary">Crear cuenta</a>
            <a href="login.html" class="btn btn-secondary">Ya tengo cuenta</a>
        </div>
    </div>

    <!-- FOOTER -->
    <footer class="footer">
        © 2026 Fyrox Campus — Formación Técnica Profesional
    </footer>

    <!-- BOTÓN WHATSAPP + TEXTO -->
    <div class="whatsapp-container">
        <div class="whatsapp-text">Contactanos</div>

        <a href="https://wa.me/541137002873" class="whatsapp-float" target="_blank">
            <svg viewBox="0 0 512 512">
                <rect width="512" height="512" rx="110" fill="#25D366"/>
                <path d="M256 112C178 112 116 174 116 252C116 273 121 293 130 311L112 400L202 382C219 391 238 396 256 396C334 396 396 334 396 256C396 178 334 112 256 112ZM256 360C241 360 226 356 213 349L210 347L158 357L168 305L166 302C157 287 152 270 152 252C152 194 198 148 256 148C314 148 360 194 360 252C360 310 314 360 256 360ZM309 292C304 290 283 280 278 278C273 276 270 275 266 280C262 285 252 296 249 299C246 302 243 303 238 300C233 297 216 289 198 271C180 253 172 236 169 231C166 226 168 223 170 221C172 219 174 216 176 214C178 212 179 210 181 207C183 204 182 202 181 199C180 196 170 172 166 164C162 156 158 158 156 158C154 158 152 158 150 158C148 158 144 160 142 162C140 164 132 172 132 188C132 204 144 224 148 230C152 236 176 272 210 300C244 328 268 336 284 336C300 336 310 328 314 324C318 320 320 314 320 310C320 306 314 294 309 292Z" fill="white"/>
            </svg>
        </a>
    </div>

</body>
</html>
#selectAlumno {
    width: 300px;          /* ancho grande */
    padding: 10px;         /* espacio interno */
    font-size: 16px;       /* letras grandes */
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #000;
}
/* ============================
   BOTÓN INSCRIPCIONES ABIERTAS
   ============================ */
.inscripciones-banner {
    background: #0099cc; /* azul estilo imagen */
    text-align: center;
    padding: 14px 0;
    margin-top: 0;
}

.inscripciones-banner a {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 1px;
    display: inline-block;
}

.inscripciones-banner a:hover {
    opacity: 0.85;
}
/* ============================
   BANNER CONTINUO DE CURSOS
   ============================ */
.banner-cursos {
    width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.65);
    padding: 12px 0;
    margin-top: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.banner-track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: scrollCursos 18s linear infinite;
}

.banner-track span {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Animación */
@keyframes scrollCursos {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
/* ============================
   BANNER CONTINUO DE CURSOS (MEJORADO)
   ============================ */
.banner-cursos {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,60,120,0.55));
    padding: 14px 0;
    margin-top: 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(2px);
}

.banner-track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: scrollCursos 18s linear infinite;
}

.banner-track span {
    color: #e8f4ff; /* azul muy claro */
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgba(0,0,0,0.35);
}

/* Animación */
@keyframes scrollCursos {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
.whatsapp-banner-logo svg {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
}