/* ==================================================================
   Sthenos ML — estilos propios. Se carga después de los CSS de la plantilla.
   ================================================================== */

/* Títulos de sección: ahora son <h2> y se ven como el <h1> de la plantilla */
.section-title h2 {
    font-size: 45px;
}

.why-join-us-inner-content .section-title h2 {
    color: #fff;
}

/* "+10 años de experiencia": antes era un <h1>, ahora es un <p> con el mismo aspecto */
.about-us-right-side-inner-content .insignia {
    display: inline-block;
    margin: 0;
    padding: 23px 80px;
    border-radius: 50px;
    background: #f92523;
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    transition: .3s;
}

.about-us-right-side-inner-content .insignia:hover {
    background: #212121;
}

.about-us-right-side-inner-content .insignia span {
    display: block;
    font-size: 40px;
}

/* Tabla de planes: la característica de cada fila es <th scope="row"> y se ve igual que las celdas */
.our-class-schedule-table tbody th {
    border-left: 1px solid #ddd;
}

.our-class-schedule-table tbody th span {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.our-class-schedule-table tbody th span.span2 {
    color: #101010;
}

/* Selector de región y enlaces legales en el pie de página */
.copyright-content .selector-region,
.copyright-content .enlaces-legales {
    margin-top: 8px;
    font-size: 14px;
}

.copyright-content .selector-region a {
    margin-left: 10px;
    color: rgba(255, 255, 255, .7);
}

.copyright-content .enlaces-legales a {
    margin-right: 15px;
    color: rgba(255, 255, 255, .7);
}

.copyright-content .selector-region a:hover,
.copyright-content .selector-region a.activa,
.copyright-content .enlaces-legales a:hover {
    color: #fff;
}

.copyright-content .selector-region a.activa {
    text-decoration: underline;
}

/* Formularios: campo trampa antispam (fuera de la pantalla, nadie lo ve ni lo llena) */
.campo-trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Formularios: mensajes de éxito y error */
.contact-form .alert {
    margin-bottom: 30px;
}

.contact-form .invalid-feedback {
    font-size: 14px;
}

.subscribe-form .mensaje-formulario {
    margin-bottom: 15px;
    font-size: 14px;
}

.subscribe-form .mensaje-ok {
    color: #7ee2a8;
}

.subscribe-form .mensaje-error {
    color: #ffb3b3;
}

/* Nota de privacidad junto a los formularios */
.nota-privacidad {
    margin: 15px 0 0;
    color: #7b7b90;
    font-size: 13px;
    line-height: 1.6;
}

.nota-privacidad a {
    color: #f92524;
    text-decoration: underline;
}

.subscribe-form .nota-privacidad {
    color: #aaaab1;
}

.subscribe-form .nota-privacidad a {
    color: #fff;
}

/* Aviso de cookies: barra fija al pie de la pantalla, por encima del botón para subir (z-index 1000) */
.aviso-cookies {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1100;
    padding: 18px 0;
    background: #101010;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .25);
}

.aviso-cookies[hidden] {
    display: none;
}

.aviso-cookies .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.aviso-cookies-texto {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
}

.aviso-cookies-texto a {
    color: #fff;
    text-decoration: underline;
}

.aviso-cookies-botones {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

.boton-cookies {
    min-width: 120px;
    padding: 10px 20px;
    border: 2px solid #fff;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
}

.boton-cookies-principal {
    border-color: #f92524;
    background: #f92524;
}

.boton-cookies:hover,
.boton-cookies:focus {
    border-color: #fff;
    background: #fff;
    color: #101010;
}

/* style.css quita el contorno de foco a todos los botones; aquí vuelve para quien navega con teclado */
.boton-cookies:focus-visible {
    outline: 3px solid #7ab8ff;
    outline-offset: 2px;
}

/* Página de privacidad */
.aviso-legal {
    color: #555;
}

.aviso-legal h2 {
    margin: 45px 0 15px;
    font-size: 26px;
}

.aviso-legal .aviso-legal-fecha {
    color: #7b7b90;
    font-size: 14px;
}

.aviso-legal ul {
    margin: 0 0 20px;
    padding-left: 20px;
}

.aviso-legal li {
    margin-bottom: 8px;
    list-style: disc;
}

.aviso-legal a {
    color: #f92524;
    text-decoration: underline;
}

.aviso-legal .tabla-legal {
    margin-bottom: 20px;
    overflow-x: auto;
}

.aviso-legal table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 15px;
}

.aviso-legal th,
.aviso-legal td {
    padding: 10px 12px;
    border: 1px solid #e3e3e8;
    text-align: left;
    vertical-align: top;
}

.aviso-legal th {
    background: #f0f0f0;
    color: #101010;
    font-weight: 500;
}

.aviso-legal code {
    color: #101010;
}

/* Los mismos cortes de pantalla que usa assets/css/responsive.css */
@media only screen and (max-width: 1199px) {
    .section-title h2 {
        font-size: 35px;
    }
}

@media only screen and (max-width: 991px) {
    .section-title h2 {
        font-size: 24px;
    }

    .about-us-right-side-inner-content .insignia {
        padding: 10px 20px;
    }

    .our-class-schedule-table tbody th span {
        font-size: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .our-class-schedule-table tbody th span {
        font-size: 14px;
        text-align: left;
    }

    .our-class-schedule-table tbody th span.span2 {
        text-transform: uppercase;
        font-size: 12px;
    }

    .aviso-cookies .container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .boton-cookies {
        flex: 1;
        min-width: 0;
    }

    .aviso-legal h2 {
        font-size: 22px;
    }
}

@media only screen and (max-width: 375px) {
    .section-title h2 {
        font-size: 20px;
    }
}