/* ==========================================================
   BLOQUE: VARIABLES VISUALES DE PROFELINK
========================================================== */

:root {
    --morado-principal: #4338e8;
    --morado-hover: #372fc8;
    --morado-claro: #f3f1ff;

    --texto-principal: #111827;
    --texto-secundario: #6b7280;

    --borde: #e5e7eb;
    --fondo-claro: #fafaff;
}


/* ==========================================================
   BLOQUE: CONFIGURACIÓN GENERAL
========================================================== */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: Arial, Helvetica, sans-serif;

    color: var(--texto-principal);

    background: #ffffff;
}


a {
    text-decoration: none;
}


button,
input {
    font-family: inherit;
}


/* ==========================================================
   BLOQUE: ENCABEZADO PRINCIPAL
========================================================== */

.encabezado-principal {
    width: 100%;

    min-height: 68px;

    display: flex;
    align-items: center;

    background: #ffffff;

    border-bottom: 1px solid #f0f0f0;

    position: sticky;

    top: 0;

    z-index: 1000;
}


/* ==========================================================
   BLOQUE: CONTENEDOR DE NAVEGACIÓN
========================================================== */

.contenedor-navegacion {
    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    padding: 0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* ==========================================================
   BLOQUE: LOGO PRINCIPAL
========================================================== */

.logo {
    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--texto-principal);

    text-decoration: none;
}


.logo img {
    display: block;
}


.logo-texto {
    font-size: 20px;

    font-weight: 800;
}


.logo-texto span {
    color: var(--morado-principal);
}


/* ==========================================================
   BLOQUE: NAVEGACIÓN PRINCIPAL
========================================================== */

.navegacion-principal {
    display: flex;

    align-items: center;

    gap: 30px;
}


.navegacion-principal a {
    color: var(--texto-secundario);

    font-size: 14px;

    transition: color 0.2s ease;
}


.navegacion-principal a:hover,
.navegacion-principal .enlace-activo {
    color: var(--morado-principal);
}


/* ==========================================================
   BLOQUE: ACCIONES DEL ENCABEZADO
========================================================== */

.acciones-navegacion {
    display: flex;

    align-items: center;

    gap: 10px;
}


/* ==========================================================
   BLOQUE: BOTONES GENERALES
========================================================== */

.boton-enlace {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


button.boton-enlace {
    border: none;

    font-family: inherit;
}


/* ==========================================================
   BLOQUE: BOTÓN INICIAR SESIÓN
========================================================== */

.boton-secundario {
    background: #ffffff;

    color: var(--morado-principal);

    border: 1px solid #d1d5db !important;
}


.boton-secundario:hover {
    background: var(--morado-claro);
}


/* ==========================================================
   BLOQUE: BOTÓN CREAR CUENTA
========================================================== */

.boton-navegacion {
    background: var(--morado-principal);

    color: #ffffff;
}


.boton-navegacion:hover {
    background: var(--morado-hover);
}


/* ==========================================================
   BLOQUE: NOMBRE DE USUARIO EN ENCABEZADO
========================================================== */

.usuario-navegacion {
    color: #374151;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;
}


/* ==========================================================
   BLOQUE: SECCIÓN PRINCIPAL HERO
========================================================== */

.seccion-hero {
    padding: 80px 24px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafaff 100%
        );
}


/* ==========================================================
   BLOQUE: CONTENEDOR HERO
========================================================== */

.contenedor-hero {
    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 70px;
}


/* ==========================================================
   BLOQUE: ETIQUETA DEL HERO
========================================================== */

.etiqueta-hero {
    display: inline-block;

    margin-bottom: 18px;

    padding: 7px 12px;

    border-radius: 20px;

    background: var(--morado-claro);

    color: var(--morado-principal);

    font-size: 12px;

    font-weight: 700;
}


/* ==========================================================
   BLOQUE: TÍTULO DEL HERO
========================================================== */

.contenido-hero h1 {
    max-width: 620px;

    margin-bottom: 20px;

    font-size: clamp(38px, 5vw, 58px);

    line-height: 1.08;

    letter-spacing: -1.7px;
}


.contenido-hero h1 span {
    color: var(--morado-principal);
}


/* ==========================================================
   BLOQUE: DESCRIPCIÓN DEL HERO
========================================================== */

.descripcion-hero {
    max-width: 580px;

    margin-bottom: 28px;

    color: var(--texto-secundario);

    font-size: 17px;

    line-height: 1.7;
}


/* ==========================================================
   BLOQUE: BOTONES DEL HERO
========================================================== */

.acciones-hero {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.boton-principal-inicio {
    background: var(--morado-principal);

    color: #ffffff;

    border: none;
}


.boton-principal-inicio:hover {
    background: var(--morado-hover);
}


.boton-ofrecer {
    background: #ffffff;

    color: var(--morado-principal);

    border: 1px solid #d1d5db;
}


.boton-ofrecer:hover {
    background: var(--morado-claro);
}


.texto-ayuda-hero {
    margin-top: 14px;

    color: #9ca3af;

    font-size: 12px;
}


/* ==========================================================
   BLOQUE: CONTENEDOR VISUAL DEL HERO
========================================================== */

.visual-hero {
    position: relative;

    min-height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* ==========================================================
   BLOQUE: TARJETA DEMOSTRATIVA DEL TUTOR
========================================================== */

.tarjeta-destacada {
    width: 100%;

    max-width: 400px;

    padding: 30px;

    display: flex;

    gap: 20px;

    background: #ffffff;

    border: 1px solid var(--borde);

    border-radius: 20px;

    box-shadow:
        0 22px 60px
        rgba(67, 56, 232, 0.11);
}


/* ==========================================================
   BLOQUE: AVATAR DEL TUTOR
========================================================== */

.avatar-tutor {
    width: 62px;

    height: 62px;

    min-width: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--morado-claro);

    color: var(--morado-principal);

    font-size: 18px;

    font-weight: 800;
}


/* ==========================================================
   BLOQUE: INFORMACIÓN DEL TUTOR
========================================================== */

.informacion-tutor-demo {
    flex: 1;
}


.estado-disponible {
    display: inline-block;

    margin-bottom: 7px;

    padding: 4px 8px;

    border-radius: 20px;

    background: #ecfdf5;

    color: #059669;

    font-size: 10px;

    font-weight: 700;
}


.informacion-tutor-demo h3 {
    margin-bottom: 4px;

    font-size: 19px;
}


.informacion-tutor-demo p {
    color: var(--texto-secundario);

    font-size: 13px;
}


/* ==========================================================
   BLOQUE: ETIQUETAS DEL TUTOR
========================================================== */

.etiquetas-demo {
    margin: 15px 0;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.etiquetas-demo span {
    padding: 5px 8px;

    border-radius: 6px;

    background: #f5f3ff;

    color: var(--morado-principal);

    font-size: 10px;

    font-weight: 600;
}


/* ==========================================================
   BLOQUE: TARIFA DEL TUTOR
========================================================== */

.pie-tutor-demo {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


.pie-tutor-demo strong {
    font-size: 18px;
}


.pie-tutor-demo small {
    color: var(--texto-secundario);

    font-size: 10px;

    font-weight: 400;
}


.boton-demo {
    padding: 7px 10px;

    border-radius: 7px;

    background: var(--morado-principal);

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;
}


/* ==========================================================
   BLOQUE: ELEMENTOS FLOTANTES DEL HERO
========================================================== */

.elemento-flotante {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 9px 12px;

    background: #ffffff;

    border: 1px solid var(--borde);

    border-radius: 10px;

    color: #374151;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.07);

    font-size: 11px;

    font-weight: 700;
}


.elemento-estrellas {
    top: 26px;

    right: 15px;
}


.elemento-horario {
    bottom: 28px;

    left: 10px;
}


/* ==========================================================
   BLOQUE: SECCIONES GENERALES
========================================================== */

.seccion-informativa,
.seccion-beneficios {
    padding: 82px 24px;
}


.seccion-beneficios {
    background: #fafaff;
}


.contenedor-seccion {
    max-width: 1100px;

    margin: 0 auto;
}


/* ==========================================================
   BLOQUE: ENCABEZADOS DE SECCIÓN
========================================================== */

.encabezado-seccion {
    max-width: 650px;

    margin: 0 auto 46px;

    text-align: center;
}


.subtitulo-seccion {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--morado-principal);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


.encabezado-seccion h2 {
    margin-bottom: 10px;

    font-size: 31px;

    line-height: 1.2;
}


.encabezado-seccion p {
    color: var(--texto-secundario);

    font-size: 14px;

    line-height: 1.6;
}


/* ==========================================================
   BLOQUE: CONTENEDOR DE PASOS
========================================================== */

.contenedor-pasos {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}


/* ==========================================================
   BLOQUE: TARJETA DE PASO
========================================================== */

.tarjeta-paso {
    position: relative;

    min-height: 215px;

    padding: 27px;

    background: #ffffff;

    border: 1px solid var(--borde);

    border-radius: 13px;
}


/* ==========================================================
   BLOQUE: NÚMERO DEL PASO
========================================================== */

.numero-paso {
    position: absolute;

    top: 12px;

    right: 12px;

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--morado-claro);

    color: var(--morado-principal);

    font-size: 10px;

    font-weight: 800;
}


/* ==========================================================
   BLOQUE: ICONOS DE PASOS
========================================================== */

.icono-paso {
    margin-bottom: 25px;
}


.icono-paso img {
    display: block;
}


/* ==========================================================
   BLOQUE: TEXTO DE PASOS
========================================================== */

.tarjeta-paso h3 {
    margin-bottom: 9px;

    font-size: 16px;
}


.tarjeta-paso p {
    color: var(--texto-secundario);

    font-size: 12px;

    line-height: 1.6;
}


/* ==========================================================
   BLOQUE: REJILLA DE BENEFICIOS
========================================================== */

.rejilla-beneficios {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 16px;
}


/* ==========================================================
   BLOQUE: TARJETA DE BENEFICIO
========================================================== */

.beneficio {
    min-height: 92px;

    padding: 20px 22px;

    display: flex;

    align-items: center;

    gap: 15px;

    background: #ffffff;

    border: 1px solid var(--borde);

    border-radius: 11px;
}


/* ==========================================================
   BLOQUE: ICONOS DE BENEFICIOS
========================================================== */

.icono-beneficio {
    width: 38px;

    min-width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--morado-claro);

    border-radius: 9px;
}


.icono-beneficio img {
    display: block;
}


/* ==========================================================
   BLOQUE: TEXTO DE BENEFICIOS
========================================================== */

.beneficio h3 {
    margin-bottom: 4px;

    font-size: 14px;
}


.beneficio p {
    color: var(--texto-secundario);

    font-size: 11px;

    line-height: 1.5;
}


/* ==========================================================
   BLOQUE: LLAMADO A LA ACCIÓN
========================================================== */

.seccion-cta {
    padding: 78px 24px;

    background: var(--morado-principal);

    color: #ffffff;

    text-align: center;
}


.contenido-cta {
    max-width: 700px;

    margin: 0 auto;
}


.contenido-cta h2 {
    margin-bottom: 15px;

    font-size: 34px;
}


.contenido-cta p {
    margin-bottom: 28px;

    color: #eeeeff;

    font-size: 15px;

    line-height: 1.6;
}


.boton-cta {
    min-height: 46px;

    padding: 0 24px;

    border: none;

    background: #ffffff;

    color: var(--morado-principal);
}


.boton-cta:hover {
    background: #f7f7ff;
}


/* ==========================================================
   BLOQUE: PIE DE PÁGINA
========================================================== */

.pie-principal {
    padding: 34px 24px;

    background: #111827;

    color: #ffffff;
}


.contenido-pie {
    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.marca-pie strong {
    font-size: 17px;
}


.marca-pie strong span {
    color: #818cf8;
}


.marca-pie p {
    margin-top: 5px;

    color: #cbd5e1;

    font-size: 11px;
}


.copyright {
    color: #cbd5e1;

    font-size: 11px;
}


/* ==========================================================
   BLOQUE: BLOQUEO DE SCROLL CUANDO HAY MODAL
========================================================== */

body.modal-abierto {
    overflow: hidden;
}


/* ==========================================================
   BLOQUE: FONDO DE LOS MODALES
========================================================== */

.modal-superposicion {
    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 99999;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(17, 24, 39, 0.55);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* ==========================================================
   BLOQUE: MODAL VISIBLE
========================================================== */

.modal-superposicion.modal-visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* ==========================================================
   BLOQUE: MODAL DE INICIO DE SESIÓN
========================================================== */

.modal-login {
    position: relative;

    width: 100%;

    max-width: 430px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 36px 38px 30px;

    background: #ffffff;

    border: 1px solid var(--borde);

    border-radius: 20px;

    box-shadow:
        0 30px 80px
        rgba(17, 24, 39, 0.25);

    transform:
        translateY(15px)
        scale(0.98);

    transition:
        transform 0.25s ease;
}


/* ==========================================================
   BLOQUE: MODAL DE CREAR CUENTA
========================================================== */

.modal-registro {
    position: relative;

    width: 100%;

    max-width: 540px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 36px 38px 30px;

    background: #ffffff;

    border: 1px solid var(--borde);

    border-radius: 20px;

    box-shadow:
        0 30px 80px
        rgba(17, 24, 39, 0.25);

    transform:
        translateY(15px)
        scale(0.98);

    transition:
        transform 0.25s ease;
}


/* ==========================================================
   BLOQUE: ANIMACIÓN DE LOS MODALES
========================================================== */

.modal-visible .modal-login,
.modal-visible .modal-registro {
    transform:
        translateY(0)
        scale(1);
}


/* ==========================================================
   BLOQUE: BOTÓN CERRAR MODAL
========================================================== */

.boton-cerrar-modal {
    position: absolute;

    top: 13px;

    right: 14px;

    width: 36px;

    height: 36px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: #6b7280;

    font-size: 27px;

    line-height: 1;

    cursor: pointer;
}


.boton-cerrar-modal:hover {
    background: #f3f4f6;

    color: #111827;
}


/* ==========================================================
   BLOQUE: LOGO DENTRO DE LOS MODALES
========================================================== */

.logo-modal {
    margin-bottom: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;
}


/* ==========================================================
   BLOQUE: ENCABEZADO DE LOS MODALES
========================================================== */

.encabezado-modal {
    margin-bottom: 24px;

    text-align: center;
}


.encabezado-modal h2 {
    margin-bottom: 8px;

    color: var(--texto-principal);

    font-size: 27px;
}


.encabezado-modal p {
    color: var(--texto-secundario);

    font-size: 14px;

    line-height: 1.5;
}


/* ==========================================================
   BLOQUE: MENSAJE DE ERROR
========================================================== */

.mensaje-error-login {
    margin-bottom: 17px;

    padding: 11px 13px;

    background: #fef2f2;

    border: 1px solid #fecaca;

    border-radius: 9px;

    color: #b91c1c;

    font-size: 13px;

    line-height: 1.5;
}


/* ==========================================================
   BLOQUE: FORMULARIOS DE LOS MODALES
========================================================== */

.formulario-login-modal,
.formulario-registro-modal {
    display: flex;

    flex-direction: column;

    gap: 17px;
}


/* ==========================================================
   BLOQUE: GRUPOS DE CAMPOS
========================================================== */

.grupo-login {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.grupo-login label {
    color: #374151;

    font-size: 13px;

    font-weight: 650;
}


/* ==========================================================
   BLOQUE: CAMPOS DE TEXTO
========================================================== */

.grupo-login input {
    width: 100%;

    height: 48px;

    padding: 0 14px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    outline: none;

    background: #ffffff;

    color: #111827;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.grupo-login input:focus {
    border-color: var(--morado-principal);

    box-shadow:
        0 0 0 3px
        rgba(67, 56, 232, 0.10);
}


/* ==========================================================
   BLOQUE: CONTRASEÑA
========================================================== */

.contenedor-contrasena-login {
    position: relative;
}


.contenedor-contrasena-login input {
    padding-right: 76px;
}


/* ==========================================================
   BLOQUE: BOTÓN VER CONTRASEÑA
========================================================== */

.boton-ver-contrasena {
    position: absolute;

    top: 50%;

    right: 12px;

    transform: translateY(-50%);

    padding: 5px;

    border: none;

    background: transparent;

    color: var(--morado-principal);

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;
}


/* ==========================================================
   BLOQUE: BOTÓN PRINCIPAL DE LOS FORMULARIOS
========================================================== */

.boton-login-modal {
    width: 100%;

    height: 48px;

    margin-top: 3px;

    border: none;

    border-radius: 10px;

    background: var(--morado-principal);

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}


.boton-login-modal:hover {
    background: var(--morado-hover);
}


.boton-login-modal:active {
    transform: scale(0.99);
}


/* ==========================================================
   BLOQUE: FILA NOMBRE Y APELLIDOS
========================================================== */

.fila-registro {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
}


/* ==========================================================
   BLOQUE: SELECTOR DEL TIPO DE CUENTA
========================================================== */

.grupo-tipo-cuenta {
    display: flex;

    flex-direction: column;

    gap: 9px;
}


.titulo-tipo-cuenta {
    margin-bottom: 2px;

    color: #374151;

    font-size: 13px;

    font-weight: 650;
}


/* ==========================================================
   BLOQUE: OPCIÓN DEL TIPO DE CUENTA
========================================================== */

.opcion-tipo-cuenta {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 12px 14px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.opcion-tipo-cuenta:hover {
    border-color: #aaa5f6;

    background: #fafaff;
}


/* ==========================================================
   BLOQUE: RADIO BUTTON DEL TIPO DE CUENTA
========================================================== */

.opcion-tipo-cuenta input {
    width: 17px;

    height: 17px;

    flex-shrink: 0;

    accent-color: var(--morado-principal);
}


.opcion-tipo-cuenta:has(input:checked) {
    border-color: var(--morado-principal);

    background: #f7f6ff;
}


/* ==========================================================
   BLOQUE: TEXTO DE LAS OPCIONES DE CUENTA
========================================================== */

.contenido-tipo-cuenta {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.contenido-tipo-cuenta strong {
    color: var(--texto-principal);

    font-size: 13px;
}


.contenido-tipo-cuenta small {
    color: var(--texto-secundario);

    font-size: 11px;

    line-height: 1.4;
}


/* ==========================================================
   BLOQUE: TÉRMINOS DEL REGISTRO
========================================================== */

.terminos-registro {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    color: var(--texto-secundario);

    font-size: 11px;

    line-height: 1.5;

    cursor: pointer;
}


.terminos-registro input {
    width: 16px;

    height: 16px;

    margin-top: 1px;

    flex-shrink: 0;

    accent-color: var(--morado-principal);
}


/* ==========================================================
   BLOQUE: PIE DE LOS MODALES
========================================================== */

.pie-login-modal {
    margin-top: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    color: var(--texto-secundario);

    font-size: 13px;
}


/* ==========================================================
   BLOQUE: BOTONES PARA CAMBIAR ENTRE MODALES
========================================================== */

.boton-enlace-modal {
    padding: 0;

    border: none;

    background: transparent;

    color: var(--morado-principal);

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;
}


.boton-enlace-modal:hover {
    text-decoration: underline;
}


/* ==========================================================
   BLOQUE: MENSAJES FLOTANTES
========================================================== */

.mensaje-flotante {
    position: fixed;

    top: 85px;

    left: 50%;

    z-index: 5000;

    width: calc(100% - 40px);

    max-width: 500px;

    padding: 13px 18px;

    transform: translateX(-50%);

    border-radius: 10px;

    text-align: center;

    font-size: 14px;

    font-weight: 600;

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.10);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


.mensaje-flotante-exito {
    background: #ecfdf5;

    border: 1px solid #a7f3d0;

    color: #047857;
}


.mensaje-flotante-informacion {
    background: #eef2ff;

    border: 1px solid #c7d2fe;

    color: var(--morado-principal);
}


.mensaje-desaparecer {
    opacity: 0;

    transform:
        translateX(-50%)
        translateY(-12px);
}


/* ==========================================================
   BLOQUE: RESPONSIVE PARA TABLET
========================================================== */

@media (max-width: 900px) {

    .navegacion-principal {
        display: none;
    }


    .contenedor-hero {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .contenido-hero {
        text-align: center;
    }


    .descripcion-hero {
        margin-left: auto;

        margin-right: auto;
    }


    .acciones-hero {
        justify-content: center;
    }


    .contenedor-pasos {
        grid-template-columns: 1fr;
    }


    .rejilla-beneficios {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   BLOQUE: RESPONSIVE PARA MÓVILES
========================================================== */

@media (max-width: 650px) {

    .contenedor-navegacion {
        padding: 0 15px;
    }


    .logo-texto {
        font-size: 18px;
    }


    .seccion-hero {
        padding: 55px 18px;
    }


    .contenido-hero h1 {
        font-size: 38px;
    }


    .acciones-hero {
        flex-direction: column;
    }


    .acciones-hero .boton-enlace {
        width: 100%;
    }


    .seccion-informativa,
    .seccion-beneficios {
        padding: 60px 18px;
    }


    .encabezado-seccion h2 {
        font-size: 26px;
    }


    .contenido-pie {
        flex-direction: column;

        text-align: center;
    }


    /* ======================================================
       BLOQUE: MODALES EN MÓVIL
    ====================================================== */

    .modal-superposicion {
        padding: 14px;
    }


    .modal-login,
    .modal-registro {
        max-width: none;

        padding: 35px 21px 27px;

        border-radius: 17px;
    }


    .fila-registro {
        grid-template-columns: 1fr;
    }


    .encabezado-modal h2 {
        font-size: 23px;
    }


    .pie-login-modal {
        flex-wrap: wrap;
    }

}