/* Reset y estilos base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables de colores optimizados para conversión */
:root {
    /* Colores principales */
    --primary: #ff6b00;
    /* Naranja vibrante - Color principal para CTA */
    --primary-light: #ff8c33;
    /* Naranja claro para efectos hover */
    --primary-hover: #e55f00;
    /* Naranja más oscuro para efectos hover */

    /* Color secundario */
    --secondary: #6a1b9a;
    /* Morado - Color institucional */
    --secondary-light: #9c27b0;
    --secondary-dark: #4a148c;

    /* Colores de acento */
    --accent: #00b2ff;
    /* Azul brillante para elementos destacados */
    --accent-light: #33c1ff;

    /* Colores para estados */
    --success: #2ecc71;
    /* Verde - Confirmaciones */
    --warning: #ffc107;
    /* Amarillo - Advertencias/Promociones */
    --danger: #e74c3c;
    /* Rojo - Errores/Urgencia */

    /* Fondos y neutros */
    --dark: #2c3e50;
    /* Oscuro para fondos (header, footer) */
    --light: #f9f9f9;
    /* Claro para fondos de secciones */
    --white: #ffffff;
    /* Blanco puro */

    /* Textos */
    --text-dark: #333333;
    --text-medium: #555555;
    --text-light: #f5f5f5;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Estilos del encabezado */
.top-bar {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-right {
    display: flex;
    align-items: center;
}

.phone-number {
    color: #009eff;
    font-weight: bold;
    margin-left: 5px;
}

.whatsapp-header {
    display: inline-flex;
    align-items: center;
    background-color: #25d366;
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    margin-right: 10px;
    font-weight: bold;
}

.whatsapp-header i {
    margin-right: 5px;
    font-size: 16px;
}

.campus-btn {
    background-color: #6a1b9a;
    color: #fff;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: bold;
}

.main-header {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 24px;
    font-weight: bold;
    color: #6a1b9a;
}

.main-menu ul {
    display: flex;
}

.main-menu li {
    margin-left: 30px;
}

.main-menu a {
    color: #333;
    font-weight: 500;
}

.main-menu a:hover {
    color: #6a1b9a;
}

/* ===== APLICACIÓN DE COLORES ===== */

/* Header y navegación */
.top-bar {
    background-color: var(--dark);
}

.phone-number {
    color: var(--accent);
    font-weight: bold;
}

.whatsapp-header {
    background-color: #25d366;
    /* Color oficial de WhatsApp */
}

.campus-btn {
    background-color: var(--primary);
    color: var(--white);
    transition: all 0.3s ease;
}

.campus-btn:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3);
    transform: translateY(-2px);
}

.logo h1 {
    color: var(--secondary);
}

.main-menu a:hover {
    color: var(--primary);
}

/* Sección hero */
.hero {
    padding: 40px 0;
    background-color: black;
    margin-top: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hero-content {
    margin-bottom: 30px;
}

.title-main {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 24px;
    font-weight: normal;
    color: #333;
    margin-bottom: 20px;
}

.description {
    font-size: 18px;
    margin-bottom: 20px;
}

.highlight {
    font-weight: bold;
    color: #6a1b9a;
}

/* Sección de empresas y formulario */
.empresas-formulario-section {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.empresas-section {
    width: 60%;
    background-color: #ffd600;
    /* Amarillo */
    border-radius: 10px;
    padding: 30px;
}

.empresas-section h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 24px;
    color: #000000;
}

.empresas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.empresa-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    height: 110px;
}

.empresa-logo {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
}

/* Formulario "Pide información" */
.pide-info-form {
    width: 40%;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.pide-info-form h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 15px;
    color: black;
}

.pide-info-form p {
    text-align: center;
    margin-bottom: 25px;
    font-size: 16px;
    color: #333;
}

.pide-info-form form {
    display: flex;
    flex-direction: column;
}

.pide-info-form input,
.pide-info-form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}

.form-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.form-group input {
    margin-bottom: 0;
}

.select-label {
    font-size: 16px;
    margin-bottom: 8px;
    color: #333;
}

/* Estilos para el desplegable con grupos */
select {
    appearance: none;
    /* Elimina estilos nativos del navegador */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a1b9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
    /* Espacio para la flecha */
}

optgroup {
    font-weight: bold;
    font-style: normal;
    color: black;
    background-color: #f5f5f5;
}

option {
    padding: 8px;
    font-weight: normal;
    color: #333;
}

/* Mejorar apariencia en Firefox */
@-moz-document url-prefix() {
    select {
        text-indent: 0.01px;
        text-overflow: '';
        padding-right: 1rem;
    }
}

/* Mejorar apariencia en IE y Edge */
select::-ms-expand {
    display: none;
}

.privacy-link {
    color: black;
    margin-bottom: 15px;
    display: inline-block;
}

/* Mejoras para el checkbox */
.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.form-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex-shrink: 0;
    cursor: pointer;
    /* Asegura que el checkbox sea visible */
    opacity: 1;
    visibility: visible;
    position: relative;
}

.form-check label {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    cursor: pointer;
    user-select: none;
    /* Evita que se seleccione el texto */
}

/* Estilo adicional para Firefox que tiene problemas con checkboxes */
@-moz-document url-prefix() {
    .form-check input[type="checkbox"] {
        margin-top: 2px;
    }
}

/* Estilo de error para el checkbox */
.form-check input[type="checkbox"].error {
    outline: 2px solid #ff3860;
    border-color: #ff3860;
}

.btn-descargar {
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 15px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-descargar:hover {
    background-color: #333;
}

/* ===== NUEVA SECCIÓN DE CICLOS FORMATIVOS CON PESTAÑAS ===== */
.ciclos-formativos {
    padding: 80px 0;
    background-color: beige;
}

.ciclos-header {
    text-align: center;
    margin-bottom: 50px;
}

.ciclos-header h2 {
    font-size: 32px;
    margin-bottom: 15px;
    color: #333;
}

.ciclos-header p {
    font-size: 18px;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* Tabs de navegación */
.familias-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.tab-button {
    padding: 12px 20px;
    background-color: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-button:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
}

.tab-button.active {
    background-color: #6a1b9a;
    color: #fff;
    border-color: #6a1b9a;
}

/* Contenido de las pestañas */
.family-content {
    display: none;
}

.family-content.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

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

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


/* Modificación para la sección de ciclos formativos */
.ciclos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 0 auto;
}

/* Clase especial para familias con pocas tarjetas (menos de 3) */
.ciclos-grid.few-cards {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    max-width: 1050px;
    margin: 0 auto;
}

/* Para 1 o 2 tarjetas */
.ciclos-grid.one-card,
.ciclos-grid.two-cards {
    justify-content: center;
}

.ciclos-grid.one-card {
    grid-template-columns: minmax(320px, 400px);
    max-width: 400px;
}

.ciclos-grid.two-cards {
    grid-template-columns: repeat(2, minmax(320px, 400px));
    max-width: 850px;
}

/* Ajustes CSS para las dos secciones de tarjetas */

/* Estilo para el grid de 3 tarjetas en la parte superior */
.ciclos-grid.three-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 0 auto 40px auto;
    /* Añade margen inferior para separar las secciones */
}

/* Estilo para el grid de 2 tarjetas centradas en la parte inferior */
.ciclos-grid.two-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 400px));
    gap: 25px;
    margin: 0 auto;
    justify-content: center;
    /* Centra las tarjetas horizontalmente */
    max-width: 850px;
}

/* Ajustes responsivos */
@media (max-width: 992px) {
    .ciclos-grid.three-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .ciclos-grid.three-cards .ciclo-card:nth-child(3) {
        grid-column: 1 / 3;
        /* La tercera tarjeta ocupa todo el ancho */
        max-width: 400px;
        margin: 0 auto;
    }

    .ciclos-grid.two-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .ciclos-grid.three-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .ciclos-grid.three-cards .ciclo-card:nth-child(3) {
        grid-column: auto;
    }
}

/* Para 4 elementos (primera fila completa, segunda fila con 1) */
.ciclos-grid.four-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 0 auto;
}

.ciclos-grid.four-cards .ciclo-card:nth-child(4) {
    grid-column-start: 2;
    grid-column-end: 3;
}

/* Solución final para las tarjetas con centrado preciso */
.ciclos-grid.five-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1050px;
    /* Ancho máximo controlado */
    margin: 0 auto;
}

/* Primera fila normal */
.ciclos-grid.five-cards .ciclo-card:nth-child(1),
.ciclos-grid.five-cards .ciclo-card:nth-child(2),
.ciclos-grid.five-cards .ciclo-card:nth-child(3) {
    grid-row: 1;
}

/* Segunda fila centrada exactamente */
.ciclos-grid.five-cards .ciclo-card:nth-child(4) {
    grid-row: 2;
    grid-column: 1;
    justify-self: end;
    /* Alinea a la derecha en su celda */
}

.ciclos-grid.five-cards .ciclo-card:nth-child(5) {
    grid-row: 2;
    grid-column: 2;
    justify-self: start;
    /* Alinea a la izquierda en su celda */
}

/* Ocultar la columna 3 en la segunda fila */
.ciclos-grid.five-cards::after {
    content: none;
    /* Desactivamos el elemento fantasma anterior */
}

/* Ajustes responsivos para 4 y 5 tarjetas */
@media (max-width: 992px) {

    .ciclos-grid.four-cards,
    .ciclos-grid.five-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .ciclos-grid.four-cards .ciclo-card:nth-child(4),
    .ciclos-grid.five-cards .ciclo-card:nth-child(4),
    .ciclos-grid.five-cards .ciclo-card:nth-child(5) {
        grid-column-start: auto;
        grid-column-end: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {

    .ciclos-grid.four-cards,
    .ciclos-grid.five-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

/* Ajustes responsivos */
@media (max-width: 992px) {
    .ciclos-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ciclos-grid.one-card {
        grid-template-columns: minmax(280px, 400px);
    }
}

@media (max-width: 768px) {

    .ciclos-grid,
    .ciclos-grid.two-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

/* Tarjeta de ciclo */
.ciclo-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ciclo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.ciclo-icon {
    width: 100%;
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #6a1b9a;
    color: #fff;
    font-size: 40px;
}

#informatica .ciclo-icon {
    background-color: #7952b3;
}

#administracion .ciclo-icon {
    background-color: #4a8cff;
}

#socioculturales .ciclo-icon {
    background-color: #ff9642;
}

#marketing .ciclo-icon {
    background-color: #ee58a1;
}

#hosteleria .ciclo-icon {
    background-color: #cb4ea3;
}

.ciclo-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centra horizontalmente todos los elementos */
    text-align: center;
    /* Centra el texto */
}

/* Centrado de títulos */
.ciclo-content h3 {
    font-size: 20px;
    margin-bottom: 5px;
    color: #333;
    text-align: center;
}

/* Modificación para centrar las etiquetas de grado en todas las tarjetas */
.grado {
    display: flex;
    /* Cambiamos a display flex */
    justify-content: center;
    /* Centramos horizontalmente */
    width: 100%;
    /* Ocupamos todo el ancho disponible */
    padding: 4px 12px;
    background-color: #f2f2f2;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    text-align: center;
    /* Aseguramos que el texto esté centrado */
    max-width: fit-content;
    /* Ajustamos el ancho al contenido */
    margin-left: auto;
    /* Centramos con márgenes automáticos */
    margin-right: auto;
}

/* Solución de respaldo para navegadores que no soportan fit-content */
@supports not (width: fit-content) {
    .grado {
        display: table;
        margin: 0 auto 15px auto;
        width: auto;
    }
}

/* Centrado de descripciones */
.ciclo-content p {
    color: #666;
    margin-bottom: 20px;
    flex-grow: 1;
    text-align: center;
}

/* Centrado de botones */
.btn-info {
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid #6a1b9a;
    border-radius: 30px;
    color: #6a1b9a;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    align-self: center;
    /* Centra el botón */
}

.btn-info:hover {
    background-color: #6a1b9a;
    color: #fff;
}

/* Colores específicos por familia */
#informatica .btn-info {
    border-color: #7952b3;
    color: #7952b3;
}

#informatica .btn-info:hover {
    background-color: #7952b3;
    color: #fff;
}

#administracion .btn-info {
    border-color: #4a8cff;
    color: #4a8cff;
}

#administracion .btn-info:hover {
    background-color: #4a8cff;
    color: #fff;
}

#socioculturales .btn-info {
    border-color: #ff9642;
    color: #ff9642;
}

#socioculturales .btn-info:hover {
    background-color: #ff9642;
    color: #fff;
}

#marketing .btn-info {
    border-color: #ee58a1;
    color: #ee58a1;
}

#marketing .btn-info:hover {
    background-color: #ee58a1;
    color: #fff;
}

#hosteleria .btn-info {
    border-color: #cb4ea3;
    color: #cb4ea3;
}

#hosteleria .btn-info:hover {
    background-color: #cb4ea3;
    color: #fff;
}

/* Se mantienen también los estilos originales de familias de ciclos por compatibilidad */
.family-section {
    margin-bottom: 50px;
}

.family-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.course-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.course-card {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-radius: 30px;
    width: calc(33.333% - 14px);
    transition: transform 0.3s;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    min-height: 90px;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.course-card .icon {
    margin-right: 15px;
    font-size: 24px;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-card .info h4 {
    font-size: 16px;
    margin-bottom: 5px;
    color: #333;
}

.course-card .info p {
    font-size: 14px;
    color: #666;
}

/* Colores por familia */
.fp-informatica .course-card {
    border-color: #7952b3;
}

.fp-informatica .course-card .icon {
    background-color: #7952b3;
}

.fp-administracion .course-card {
    border-color: #4a8cff;
}

.fp-administracion .course-card .icon {
    background-color: #4a8cff;
}

.fp-socioculturales .course-card {
    border-color: #ff9642;
}

.fp-socioculturales .course-card .icon {
    background-color: #ff9642;
}

.fp-marketing .course-card {
    border-color: #ee58a1;
}

.fp-marketing .course-card .icon {
    background-color: #ee58a1;
}

.fp-hosteleria .course-card {
    border-color: #cb4ea3;
}

.fp-hosteleria .course-card .icon {
    background-color: #cb4ea3;
}

/* Estilos para el botón de Ver menos */
.toggle-courses {
    display: inline-flex;
    align-items: center;
    color: #6a1b9a;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
}

.toggle-courses i {
    margin-right: 5px;
    transition: transform 0.3s;
}

.toggle-courses.collapsed i {
    transform: rotate(-90deg);
}

/* Ajustes para tabs de navegación */
.tab-button[data-family="informatica"].active {
    background-color: #7952b3;
    border-color: #7952b3;
}

.tab-button[data-family="administracion"].active {
    background-color: #4a8cff;
    border-color: #4a8cff;
}

.tab-button[data-family="socioculturales"].active {
    background-color: #ff9642;
    border-color: #ff9642;
}

.tab-button[data-family="marketing"].active {
    background-color: #ee58a1;
    border-color: #ee58a1;
}

.tab-button[data-family="hosteleria"].active {
    background-color: #cb4ea3;
    border-color: #cb4ea3;
}

/* Estilos para el footer mejorado */
footer {
    background-color: #333;
    color: #fff;
}

.footer-main {
    padding: 60px 0 40px;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Estilos para el logo del footer */
.footer-logo h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #fff;
}

.footer-description {
    color: #ccc;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Estilos para la información de contacto */
.footer-contact {
    margin-bottom: 20px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.contact-item i {
    color: #6a1b9a;
    margin-right: 10px;
    font-size: 16px;
    margin-top: 3px;
}

.contact-item span {
    color: #ccc;
}

/* Estilos para los títulos de columnas */
.footer-column h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    color: #fff;
}

.footer-column h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #6a1b9a;
}

/* Estilos para los enlaces del footer */
.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    padding-left: 15px;
}

.footer-links a::before {
    content: "\f105";
    /* Icono de flecha de FontAwesome */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #6a1b9a;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 20px;
}

/* Estilos para el formulario de suscripción */
.footer-subscribe {
    display: flex;
    margin-bottom: 25px;
}

.footer-subscribe input {
    flex: 1;
    height: 45px;
    padding: 0 15px;
    border: none;
    border-radius: 4px 0 0 4px;
    background-color: #444;
    color: #fff;
}

.footer-subscribe input::placeholder {
    color: #aaa;
}

.footer-subscribe button {
    width: 45px;
    height: 45px;
    border: none;
    background-color: #6a1b9a;
    color: #fff;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.footer-subscribe button:hover {
    background-color: #8e24aa;
}

/* Estilos para iconos sociales */
.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #444;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s;
}

.social-icon:hover {
    background-color: #6a1b9a;
    transform: translateY(-3px);
}

/* Parte inferior del footer */
.footer-bottom {
    background-color: #222;
    padding: 20px 0;
    border-top: 1px solid #444;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom p {
    margin: 0;
    color: #aaa;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

.footer-bottom-links a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-bottom-links a:hover {
    color: #fff;
}

/* Estilos responsivos */
@media (max-width: 992px) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-columns {
        grid-template-columns: 1fr;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        margin-top: 15px;
        justify-content: center;
    }
}

/* Botón flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}

.whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    font-size: 36px;
    transition: transform 0.3s;
}

.whatsapp-float a:hover {
    transform: scale(1.1);
}

/* Estilos responsivos */
@media (max-width: 992px) {
    .empresas-formulario-section {
        flex-direction: column;
    }

    .empresas-section,
    .pide-info-form {
        width: 100%;
    }

    .course-card {
        width: calc(50% - 10px);
    }

    .empresas-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ciclos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        text-align: center;
    }

    .logo {
        margin-bottom: 20px;
    }

    .main-menu ul {
        justify-content: center;
    }

    .main-menu li {
        margin: 0 10px;
    }

    .course-card {
        width: 100%;
    }

    .top-bar .container {
        flex-direction: column;
        text-align: center;
    }

    .top-right {
        margin-top: 10px;
        justify-content: center;
    }

    .tab-button {
        padding: 10px 15px;
        font-size: 14px;
    }

    .ciclos-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .empresas-grid {
        grid-template-columns: 1fr;
    }

    .form-group {
        flex-direction: column;
    }
}

/* Estilos para la sección de Prácticas Garantizadas */
.practicas-garantizadas {
    background-color: aliceblue;
    padding: 80px 0;
    border-top: 1px solid #eaeaea;
}

.practicas-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.practicas-texto {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.practicas-texto h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
    position: relative;
}

.practicas-texto h2::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #6ad3ea;
    border-radius: 50%;
    margin-left: 5px;
    position: relative;
    top: -15px;
}

.practicas-texto p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Estilos mejorados para el botón de prácticas garantizadas */
.practicas-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #6a1b9a;
    /* Color morado del botón, similar al de tu web */
    color: #ffffff !important;
    /* Color de texto BLANCO, con !important para garantizar que se aplique */
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    border: 2px solid #6a1b9a;
    min-width: 200px;
}

.practicas-btn:hover {
    background-color: #8e24aa;
    /* Un morado ligeramente más claro al hacer hover */
    color: #ffffff !important;
    /* Mantener el texto BLANCO en hover */
    border-color: #8e24aa;
    box-shadow: 0 5px 15px rgba(106, 27, 154, 0.3);
    /* Sombra sutil para efecto elevado */
}

/* Si quieres mantener el icono de flecha, asegúrate de que sea visible */
.practicas-btn i {
    margin-left: 8px;
    transition: transform 0.3s;
    color: #ffffff !important;
    /* Asegurar que el icono también sea blanco */
}

.practicas-btn:hover i {
    transform: translateX(5px);
    /* Pequeña animación al hacer hover */
}

/* Estilos para la sección de Blog */
.blog-section {
    padding: 80px 0;
    background-color: #fff;
}

.blog-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
}

.blog-header h2 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
    position: relative;
}

.blog-header h2::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #6ad3ea;
    border-radius: 50%;
    margin-left: 5px;
    position: relative;
    top: -15px;
}

.blog-header p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
}

.blog-posts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.blog-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.blog-image {
    height: 200px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-info {
    padding: 20px;
    background-color: #e6f7fc;
}

.blog-date {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.blog-info h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
    min-height: 50px;
}

.blog-link {
    display: inline-block;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.blog-link:hover {
    color: #6a1b9a;
}

.blog-button-container {
    text-align: center;
    margin-top: 20px;
}

.btn-blog {
    display: inline-block;
    padding: 12px 30px;
    background-color: transparent;
    color: #333;
    border: 2px solid #333;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-blog:hover {
    background-color: #6a1b9a;
    color: #fff;
    border-color: #6a1b9a;
}

/* Estilos responsivos */
@media (max-width: 992px) {
    .blog-posts {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .practicas-content {
        flex-direction: column;
        text-align: center;
    }

    .practicas-texto {
        margin-bottom: 30px;
    }

    .blog-posts {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Estilos para la barra superior */
.top-bar {
    background-color: #333;
    color: white;
    padding: 8px 0;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.phone-number {
    color: #00b0ff;
    text-decoration: none;
    font-weight: bold;
}

.top-right {
    display: flex;
    gap: 15px;
}

.whatsapp-header {
    background-color: #25d366;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
}

.campus-btn {
    background-color: #1500ff;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
}

/* Estilos para el encabezado principal */
.main-header {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.main-header .container {
    display: flex;
    align-items: center;
}

/* Estilos para el logo */
.logo {
    flex: 0 0 auto;
    margin-right: 20px;
}

.logo a {
    text-decoration: none;
    display: block;
}

.school-logo {
    height: 60px;
    width: auto;
    /* Asegúrate de que el archivo PNG del logo tenga fondo transparente */
}

/* Estilos para el menú principal - CENTRADO */
.main-menu {
    flex: 1;
}

.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: right;
    /* Centra los elementos del menú */
    gap: 30px;
}

.main-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.main-menu a:hover {
    color: #990000;
}

/* Contenedor general */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Eliminar líneas o barras no deseadas */
header::after {
    display: none;
    /* Elimina cualquier pseudoelemento que pudiera estar creando líneas */
}

/* Media queries para responsive */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        gap: 15px;
    }

    .main-menu ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Eliminar la línea ondulada roja entre el header y el resto del contenido */

/* 1. Esta línea está causada por un estilo en la clase 'hero' */
.hero {
    padding: 40px 0;
    background-color: black;
    margin-top: 0;
    /* Cambiado de 20px a 0 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 2. También está causada por margen en la sección main */
main {
    margin-top: 0;
}

/* 3. Esta es la línea específica que crea esa separación */
.main-header {
    background-color: beige;
    padding: 15px 0;
    border-bottom: none;
    /* Cambiado de "1px solid #ddd" a "none" */
}

/* 4. Agregar borde al logo */
.school-logo {
    height: 60px;
    width: auto;
    border: 2px solid #990000;
    /* Borde sólido para el logo */
    padding: 3px;
    /* Espacio entre la imagen y el borde */
}

/* 5. Aplicar estas reglas para asegurar que no haya espacio entre secciones */
header+main {
    margin-top: 0 !important;
}

/* 6. Asegurarse de que no haya espacio blanco después del header */
header::after {
    content: none !important;
}

/* 7. Eliminar cualquier elemento decorativo que pudiera estar creando la línea */
.wave-separator,
.divider-element,
svg[viewBox],
svg:not(.fa),
[class*="wave"],
[class*="divider"],
[class*="separator"] {
    display: none !important;
}

/* Estilos para el botón de email con icono */
.email-action {
    display: flex;
    align-items: center;
}

.email-btn {
    display: flex;
    align-items: center;
    background-color: #6a1b9a; /* Color morado, puedes cambiarlo a tu preferencia */
    color: white !important;
    padding: 8px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

.email-btn:hover {
    background-color: #8e24aa; /* Un tono más claro al pasar el mouse */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.email-btn i {
    margin-right: 8px;
    font-size: 16px;
}

/* Animación sutil para el icono */
.email-btn:hover i {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
/* Estilos para el botón de Matricúlate */
.matriculate-btn {
    display: inline-flex;
    align-items: center;
    background-color: #ff6b00; /* Color naranja para destacar */
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.matriculate-btn:hover {
    background-color: #e55f00; /* Un tono más oscuro al pasar el mouse */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.matriculate-btn i {
    margin-right: 8px;
    font-size: 16px;
}

/* Estilos para el botón de email */
.email-btn {
    display: inline-flex;
    align-items: center;
    background-color: #6a1b9a; /* Color morado */
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.email-btn:hover {
    background-color: #8e24aa; /* Un tono más claro al pasar el mouse */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.email-btn i {
    margin-right: 8px;
    font-size: 16px;
}

/* Contenedor de los botones */
.action-buttons {
    display: flex;
    list-style: none;
    gap: 8px; /* Reduce este valor para acercar más los botones */
    margin: 0;
    padding: 0;
}

.action-buttons li {
    margin: 0; /* Elimina cualquier margen predeterminado */
}

/* Alineamiento en el header */
.main-header .container {
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 768px) {
    .action-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .matriculate-btn,
    .email-btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
}

/* Estilos mejorados para el logo y nombre del instituto */
.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease;
}

.logo-link {
    text-decoration: none;
    display: flex;
}

.logo-link:hover .logo-container {
    transform: translateY(-2px);
}

.school-logo {
    height: 65px;
    width: auto;
    border: 2px solid #990000;
    padding: 3px;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.logo-link:hover .school-logo {
    box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}

.institute-name {
    display: flex;
    flex-direction: column;
}

.institute-name h1 {
    font-family: 'Montserrat', Arial, sans-serif; /* Considera añadir esta fuente */
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.5px;
    position: relative;
}

.institute-name h1::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: #990000; /* Color de acento que coincide con el borde del logo */
    margin-top: 5px;
}

.institute-name h1 span {
    color: #990000; /* "de Madrid" en color acento */
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .logo-container {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .institute-name h1 {
        font-size: 18px;
    }
    
    .institute-name h1::after {
        margin: 5px auto 0;
    }
}
/* Ocultar el botón de Administración y Gestión */
.tab-button[data-family="administracion"] {

}

/* Ocultar Socioculturales */
.tab-button[data-family="socioculturales"] {

}

/* Ocultar Hostelería y Turismo */
.tab-button[data-family="hosteleria"] {
}

/* Ocultar Marketing y Comercio */
.tab-button[data-family="marketing"] {
}
/* Ocultar el contenido de las categorías */
#administracion {
}

#socioculturales {
}

#hosteleria {
}

#marketing {
    /*display: none !important; TODAS LAS DE Ocultar el contenido de las categorías VAN CON IMPORTANT*/
}

/* oculto las familias que no son informatica solo en el formulario de info */
.pide-info-form select optgroup[label="Administración y Gestión"],
.pide-info-form select optgroup[label="Servicios Socioculturales"],
.pide-info-form select optgroup[label="Marketing y Comercio"],
.pide-info-form select optgroup[label="Hostelería y Turismo"] {
   /* display: none;*/
}

/* Estilo para el texto dentro de empresas-grid */
.empresas-grid .mensaje {
    margin-top: 30px;
    width: 100%;
    grid-column: 1 / -1; /* Hace que ocupe todas las columnas del grid */
}

.empresas-grid .mensaje p {
    font-size: 24px; /* Mismo tamaño que el encabezado h2 */
    font-weight: bold;
    text-align: center;
    color: #000000;
    margin: 0 auto;
    padding: 0 15px;
    line-height: 1.4;
}
/* Estilos para indicar que las tarjetas son clickables */
.ciclo-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ciclo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Mantener el estilo del botón */
.ciclo-card .btn-info:hover {
    /* Mantener los estilos existentes del botón al hacer hover */
    z-index: 2; /* Asegurar que el botón se vea por encima */
}