/*
|--------------------------------------------------------------------------
| Landing de registro: estilos comunes a las dos sedes
|--------------------------------------------------------------------------
|
| Todo lo que CDMX y GDL comparten vive aqui. Lo propio de cada sede -el
| acento, el degradado y la escala del contador- va en su hoja, que se
| carga DESPUES de esta para poder encimarse.
|
| Antes habia dos copias de este archivo, iguales en un 95%. La diferencia
| restante no era de diseno sino deriva: por ejemplo `.btn-20` acabo con
| `clamp(358px, 4vw, 34px)` en una de las dos, un rango invertido que CSS
| resuelve como ancho fijo de 358px.
*/

.contenedor_principal {
    overflow: hidden;
}
/*--------------------- Contadoooor -------------------*/
.countdown-bar {
    width: 100%;
    max-width: 1920px;
    height: clamp(130px, 20vw, 186px);
    color: #fff;
    gap: 6px;
    /* url(../../../public/images/gdl2025/registro/fondo-countdown.webp),*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.countdown-bar p {
    font-style: normal;
    font-weight: 400;
    line-height: 109.1%;
    text-align: center;
    margin-bottom: initial;
    margin-inline: 10px;
}

.countdown-bar b {
    text-align: center;
    text-shadow: 0 0 15px #1f87c9;
    font-style: normal;
    font-weight: 600;
    line-height: 109.1%;
}

.countdown-bar span {
    text-shadow: 0 0 15px #1f87c9;
    font-size: clamp(35px, 12vw, 64px);
    font-style: normal;
    font-weight: 700;
    line-height: 109.1%;
    text-align: center;
}

.degradado {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* ---------------- Información del lado Izquierdo ----------------*/

.fondo-img-edicion {
    background-color: white;
    opacity: 0.9;
    width: 100%;
    justify-content: center;
    display: flex;
    padding: 0.8rem;
}

.form-title {
    text-align: center;
    font-weight: 800;
    line-height: normal;

    color: #fff;
    text-align: center;
    font-style: normal;
    line-height: normal;
    padding-inline: 15px;
}

.titulo-acceso {
    font-size: clamp(36px, 9vw, 64px);
    line-height: 115%;
}

.lista-acceso h2 {
    font-size: clamp(20px, 5vw, 24px);
}

.frame-form-img {
    width: clamp(292px, 33vw, 440px);
}

/* ------------------ Formulario ----------------- */
.form-grid {
    max-width: 1400px;

    /* La rejilla ocupa todo el ancho de su contenedor, y cada columna vale
       exactamente la mitad. El `minmax(0, 1fr)` le quita a la columna el piso
       de min-content: sin él, un <select> impone su opción más larga como
       ancho mínimo, y la columna del formulario cambia de tamaño según qué
       campos estén a la vista. Es lo que hacía que País y Estado se
       ensancharan al elegir México. */
    width: 100%;
    display: grid;
    grid-template-areas:
        'icon form'
        'contenido form';
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    justify-items: center;

    /* El padding de abajo es el aire entre el botón "Registrarme" y lo que
       sigue en la página. Sin él el botón queda al ras del borde de su
       sección, y al desplegarse los campos del perfil "Empresa" el
       formulario crece hasta encimarse con la tabla comparativa. */
    padding: 30px 30px clamp(32px, 5vw, 48px);
    column-gap: 40px;
    align-content: space-evenly;
}

.select-otro {
    display: inline-flex;
}

.form-container {
    max-width: 588px;
    width: 100%;
    grid-area: form;
}

.form-icon-container {
    max-width: 625px;
    width: 100%;
    gap: clamp(30px, 6vw, 35px);
    grid-area: icon;
}

.form-icon-container img {
    max-height: 130px !important;
    height: auto !important;
    max-width: 70% !important;
}

.form-text-container {
    max-width: 615px;
    width: 100%;
    grid-area: contenido;
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

.form-text-title {
    color: #03547e;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 4px;
}

.form-text-content {
    color: #545454;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
}

ol.form-text-content {
    padding-left: 20px;
}

.form-title-azul {
    color: #03547e;
    font-weight: 700;
}

.form-title-azulito {
    background: linear-gradient(90deg, #00a490 0%, #1db9fa 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

/* Input */
.container-input {
    width: -webkit-fill-available;
    width: -moz-available;
}

img.img-fluid {
    width: 34px !important;
    height: 34px !important;
    /* top: 50%;
    left: 10px; */
    /* transform: translateY(-50%); */
    margin-right: 15px;
}

.form-control,
.form-select {
    height: 45px !important;
    border-radius: 4px !important;
    border: 1px solid #d0d0d0;
    background: #fff;

    /* Placeholder */
    color: #545454;
    font-size: 15px;
}

.obligatorio {
    color: #565656;
    font-size: 16px;
    font-weight: 600;
}

.clic-tyc {
    color: #00548e;
    text-align: center;
    font-size: 16px;
    margin-inline: 5px;
}

.clic-tyc em {
    font-weight: 600;
}

/* El turquesa #00a490 sobre el degradado se queda en 2:1 y la liga se pierde.
   Con el acento de la edicion y el subrayado se distingue del texto que la
   rodea sin salirse de la identidad. */
.clic-tyc > .terminos-condiciones {
    color: var(--acento-edicion, #03547e);
    text-decoration: underline;
    font-weight: 600;
}

/* Botón registrarme */
.cursor-pointer span {
    color: #01558c;
    font-weight: 700;
    text-decoration-line: underline;
    cursor: pointer;
}

/* Botón "Registrarme" del formulario.

   Mide 358px donde quepan y se encoge al ancho disponible cuando no. El
   min() es lo que evita que se desborde de su columna en pantallas
   angostas. */
.btn-20 {
    width: min(358px, 100%) !important;
    max-width: 100%;
    font-size: 22px;
    border-color: transparent;
}

/* Tabla */
.titulo-siguiente-nivel {
    color: #02547d;
    font-style: normal;
    line-height: normal;
    margin-bottom: clamp(20px, 6vw, 30px);
    margin-top: clamp(27px, 6vw, 35px);
    margin-inline: 3%;
}

.titulo-siguiente-nivel h2 {
    font-family: Avenir black;
    text-align: center;
    font-size: clamp(33px, 5vw, 40px);
    line-height: normal;
    margin-bottom: 1rem;
}

.titulo-siguiente-nivel p {
    text-align: left;
    font-size: clamp(16px, 4vw, 24px);
    max-width: 844px;
    font-weight: 500;
    margin-inline: 15px;
}

/* ============================================================
   Tabla comparativa: Acceso de cortesía vs Match Empresarial
   ============================================================

   Una rejilla de tres columnas -el beneficio, y una marca por tipo de
   acceso- donde cada beneficio ocupa un renglón completo. El texto y sus
   dos marcas son celdas de la misma fila, así que la fila crece con el
   texto más alto y las marcas se quedan centradas frente a él.

   De ahí que aquí no haya alturas de fila ni de cabecera que cuadrar entre
   columnas: con columnas independientes, un texto que se va a dos renglones
   desplaza su columna y deja las palomitas fuera de línea.

   El ancho de 676px y la columna de Match de 199px son los del diseño
   original; debajo de ese ancho las columnas se encogen en vez de
   encimarse.
*/

.tabla-container {
    display: flex;
    justify-content: center;

    /* El margen superior es propio de la tabla y no depende de lo que venga
       arriba: en CDMX la precede el título "siguiente nivel", pero en GDL ese
       título está comentado y sin este margen la tabla quedaba pegada al
       formulario. */
    margin-top: clamp(24px, 5vw, 44px);
    margin-bottom: 20px;
}

.tabla-comparativa {
    --col-cortesia: clamp(70px, 13vw, 104px);
    --col-match: clamp(116px, 25vw, 199px);
    --fila: 42px;
    --relleno-lateral: clamp(12px, 3vw, 24px);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--col-cortesia) var(--col-match);
    grid-template-rows: repeat(var(--renglones, 6), auto);
    align-items: center;
    column-gap: clamp(8px, 2vw, 20px);

    box-sizing: border-box;
    width: 95%;
    max-width: 676px;
    padding: 24px var(--relleno-lateral) 20px;

    border-radius: 28px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

/* La tarjeta que destaca a Match va detrás de su columna y abarca todos los
   renglones, del encabezado al botón. Al ser una celda más de la rejilla
   crece con la tabla, sin alto propio que ajustar. */
.col-destacada {
    /* Fuera del flujo a propósito: una celda normal que abarcara toda la
       columna le cerraría el paso a las celdas que la rejilla coloca sola, y
       los encabezados y las marcas de Match se irían a otra columna. Estando
       absoluta sigue obedeciendo a `grid-column` y `grid-row`, que es lo que
       la deja calzada con su columna, pero ya no estorba el acomodo. */
    position: absolute;
    grid-column: 3;
    grid-row: 1 / -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Al estar absoluta, su caja llega hasta el relleno de la tarjeta grande
       y quedaba al ras de la orilla derecha. El margen de ese mismo tamaño la
       regresa al ancho de su columna, que es lo que la deja metida dentro con
       aire alrededor. Abajo baja un poco para no quedar apretada. */
    margin: 0 var(--relleno-lateral) -8px 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}

/* Todas las celdas van por encima de esa tarjeta. */
.tabla-comparativa > .celda {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: var(--fila);
    margin: 0;
}

.tabla-comparativa > .marca,
.tabla-comparativa > .pie {
    justify-content: center;
}

.beneficio {
    padding-block: 6px;
    color: #185c91;
    font-size: clamp(14px, 2.6vw, 20px);
    line-height: 1.25;
}

/* ---- Encabezado de cada columna --------------------------------- */

/* Se apoyan en la base de su fila para que los dos títulos queden al ras,
   aunque el de Match cargue además con la pastilla. */
.tabla-comparativa > .encabezado {
    flex-direction: column;
    justify-content: flex-end;
    align-self: stretch;
    gap: 10px;
    padding-bottom: 14px;
    text-align: center;
    color: #185c91;
    font-size: clamp(14px, 2.4vw, 20px);
    font-weight: 800;
    line-height: 1.15;
}

.titulo-match {
    justify-content: space-between;
    padding-top: 0;
}

/* La pastilla monta sobre el borde superior de la tarjeta, que es lo que la
   hace leer como etiqueta y no como parte del título. */
.ovalo-azul {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 154px;
    height: 35px;
    padding: 0 12px;
    margin-top: -32px;
    flex-shrink: 0;
    border-radius: 129px;
    background: linear-gradient(270deg, #03547e 0%, #01568c 51%, #0697d5 100%);
}

.texto-ovalo {
    max-width: 100%;
    text-align: center;
    color: #fff;
    font-size: clamp(12px, 2.2vw, 16px);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Las marcas -------------------------------------------------- */

.marca svg {
    width: clamp(20px, 4vw, 30px);
    height: auto;
}

/* ---- El botón al pie de cada columna ----------------------------- */

.tabla-container .boton-obtener-azul,
.tabla-container .boton-obtener-naranja {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 104.182px;
    height: 29.652px;
    min-height: 29.652px;
    flex-shrink: 0;

    border: none;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
}

.tabla-container .boton-obtener-naranja {
    background: #f07f1e;
}

.tabla-container .boton-obtener-azul {
    background: linear-gradient(270deg, #03547e 0%, #01568c 51%, #0697d5);
}

.tabla-comparativa > .pie {
    padding-top: 16px;
}

.boton,
a.boton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
}

a.boton:hover {
    text-decoration: none;
    color: #fff;
}

/* En pantalla angosta la columna de beneficios manda, y las otras dos se
   aprietan hasta su mínimo legible. */
@media (max-width: 688px) {
    .tabla-comparativa {
        --fila: 38px;
        --relleno-lateral: 12px;
        padding: 18px var(--relleno-lateral) 16px;
    }

    .tabla-comparativa > .encabezado {
        padding-bottom: 10px;
    }

    .tabla-container .boton-obtener-azul,
    .tabla-container .boton-obtener-naranja {
        max-width: 68px;
    }
}

/* ----------- Texto y preguntas -------- */
.faq {
    max-width: 770px;
    width: 95%;
    margin: 2rem auto;
    margin-bottom: 60px;
}

.faq h2 {
    color: #02547d;
    font-family: Avenir black;
    text-align: center;
    font-size: clamp(33px, 5vw, 40px);
    line-height: normal;
    margin-bottom: 1rem;
}

.faq-item {
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
    margin-bottom: 10px;
    background: white;
}

.faq-question {
    background: white;
    border: none;
    width: 100%;
    text-align: left;
    padding: 1rem;
    color: #03a591;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;

    font-size: clamp(24px, 5vw, 30px);
    font-style: normal;
    font-weight: 900;
    line-height: 150%;
}

.faq-question:hover {
    background-color: #f0f9f9;
}

.arrow {
    transition: transform 0.3s ease;
    left: 94%;
    position: absolute;
}

.faq-item.open .arrow {
    transform: rotate(90deg);
}

button:focus {
    outline: none;
}

.faq-answer {
    display: none;
    padding: 1rem 1rem;
    color: #333;
    font-size: 0.95rem;
}

.faq-item.open .faq-answer {
    display: block;
}

.faq-answer .pregunta {
    color: #02547d;
    font-size: clamp(16px, 5vw, 24px);
    font-style: normal;
    font-weight: 800;
    line-height: 150%; /* 24px */
}

.faq-answer .respuesta {
    color: #565656;
    font-size: clamp(16px, 5vw, 18px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    margin-bottom: 1.5rem;
}

/* Media Queries */
@media (max-width: 991px) {
    .form-grid {
        grid-template-areas:
            'icon'
            'form'
            'title'
            'contenido';
        /* Misma razón que en la rejilla de dos columnas: sin minmax(0, …) la
           columna crece hasta la opción más larga del <select>. */
        grid-template-columns: minmax(0, 1fr);
        padding-top: 22px;
    }
    .form-text-title {
        text-align: center;
        padding-bottom: 8px;
    }
    .form-container {
        max-width: 633px;
        margin-right: 0;
        padding: 25px 0 34px;
    }
    .btn-20 {
        max-width: 606px;
    }
    .fondo-img-edicion {
        width: 150%;
    }
}




@media (max-width: 480px) {
    .form-grid {
        padding: 0 11px clamp(28px, 7vw, 40px);
    }

    .form-text-title {
        padding-inline: 15%;
    }

    .btn-20 {
        max-width: 230px;
    }

    form .row {
        margin: 0;
    }

}





/* Transición */
@keyframes fall {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.2));
    }
}

@keyframes up {
    to {
        transform: scale(1);
    }
}

.crecer {
    transform: scale(0.95);
    animation: up 0.5s ease forwards;
}

.caer {
    opacity: 1;
    transform: translateY(100px) scale(1.2);
    filter: drop-shadow(0px 90px 38px #969696);
    animation: fall 1s ease forwards;
}

.caer:nth-child(3) {
    transform: translateY(50px) scale(1.1);
    filter: drop-shadow(0 40px 38px #bebdbd);
}

@media (max-width: 770px) {
    .caer {
        opacity: 0;
        transform: translateY(15px) scale(1.2);
        filter: drop-shadow(0px 10px 38px #969696);
        animation: fall 0.8s ease forwards;
    }
    .caer:nth-child(3) {
        transform: translateY(100px) scale(1.1);
        filter: drop-shadow(0 10px 38px #969696);
    }
}

/* ===================================================================
   Zonas de toque en pantalla chica
   ===================================================================
   Con el dedo, un objetivo de 30px de alto se falla seguido. Debajo de
   768px se suben a 44px, que es la medida que recomiendan tanto Apple
   como Google. En escritorio se quedan como están: ahí se apunta con el
   ratón y agrandarlos sólo engordaría el diseño.
   =================================================================== */

@media (max-width: 768px) {
    .lang-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding-inline: 18px;
    }

    .tabla-container .boton-obtener-azul,
    .tabla-container .boton-obtener-naranja {
        height: 44px;
        min-height: 44px;
        border-radius: 22px;
    }

    .boton,
    a.boton {
        min-height: 44px;
    }
}