/*==============================================================*/
/*  G.CURSOS — GESTIÓN DE CAPACITACIÓN                          */
/*  Archivo: gcursos_acceso.css                                 */
/*  Descripción: Identidad visual de acceso y credenciales      */
/*                                                              */
/*  Copyright © 2026 Octavio López Garza                        */
/*  Autor: Octavio López Garza                                  */
/*  Versión: 1.0                                                */
/*  Creación: 12/08/2026                                        */
/*  Envío: 1                                                    */
/*  Proyecto: G.CURSOS                                          */
/*==============================================================*/

:root
    {
        --gc-azul: #0b67b2;
        --gc-azul-oscuro: #082c55;
        --gc-azul-profundo: #061f3d;
        --gc-verde: #59b957;
        --gc-texto: #18324f;
        --gc-gris: #6f7d8e;
        --gc-linea: #d7e0e8;
        --gc-blanco: #ffffff;
    }

*
    {
        box-sizing: border-box;
    }

html,
body
    {
        width: 100%;
        min-height: 100%;
        margin: 0;
    }

body
    {
        min-height: 100vh;

        display: flex;
        flex-direction: column;

        background:
            radial-gradient(circle at 7% 18%, rgba(11, 103, 178, 0.08) 0 2px, transparent 3px) 0 0 / 18px 18px,
            linear-gradient(135deg, rgba(11, 103, 178, 0.08) 0 8%, transparent 8% 78%, rgba(11, 103, 178, 0.05) 78% 82%, transparent 82%),
            linear-gradient(145deg, #f7fbfe 0%, #ffffff 48%, #f5f9fc 100%);

        color: var(--gc-texto);

        font-family: Arial, Helvetica, sans-serif;
    }

.gc-barra-superior
    {
        min-height: 64px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 38px;

        background: linear-gradient(110deg, var(--gc-azul-profundo), var(--gc-azul-oscuro));

        color: #ffffff;

        font-size: 16px;
    }

.gc-barra-superior-izquierda,
.gc-barra-superior-derecha
    {
        display: flex;
        align-items: center;
        gap: 10px;
    }

.gc-icono-linea
    {
        width: 20px;
        height: 20px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        font-size: 18px;
    }

.gc-principal
    {
        flex: 1;

        width: 100%;

        display: grid;
        grid-template-columns: minmax(480px, 1.15fr) minmax(420px, 0.85fr);
        align-items: center;

        gap: 60px;

        padding: 54px 7vw 48px 7vw;
    }

.gc-presentacion
    {
        min-width: 0;
    }

.gc-marca
    {
        display: flex;
        align-items: center;

        gap: 24px;

        margin-bottom: 22px;
    }

.gc-logo-simbolo
    {
        position: relative;

        width: 118px;
        height: 108px;

        flex: 0 0 118px;
    }

.gc-libro
    {
        position: absolute;

        left: 14px;
        bottom: 4px;

        width: 78px;
        height: 70px;

        border: 7px solid var(--gc-verde);
        border-top: 0;
        border-radius: 0 0 14px 14px;

        transform: skewY(4deg);

        background:
            linear-gradient(90deg, #e8f7ee 0 47%, #ffffff 47% 53%, #eaf5ff 53%);
    }

.gc-libro::after
    {
        content: "";

        position: absolute;

        top: -1px;
        left: 50%;

        width: 5px;
        height: 61px;

        background: var(--gc-azul);
    }

.gc-birrete
    {
        position: absolute;

        top: 4px;
        left: 14px;

        width: 82px;
        height: 34px;

        background: var(--gc-azul-oscuro);

        clip-path: polygon(50% 0, 100% 36%, 50% 72%, 0 36%);
    }

.gc-birrete::after
    {
        content: "";

        position: absolute;

        top: 17px;
        left: 64px;

        width: 3px;
        height: 33px;

        background: var(--gc-azul-oscuro);
    }

.gc-check
    {
        position: absolute;

        right: 0;
        bottom: 7px;

        width: 38px;
        height: 38px;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 4px solid #ffffff;
        border-radius: 50%;

        background: var(--gc-azul);
        color: #ffffff;

        font-size: 22px;
        font-weight: bold;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

.gc-marca-texto
    {
        min-width: 0;
    }

.gc-producto
    {
        color: var(--gc-azul);

        font-size: clamp(48px, 5vw, 78px);
        font-weight: 700;
        letter-spacing: 4px;
        line-height: 0.95;

        white-space: nowrap;
    }

.gc-subproducto
    {
        margin-top: 14px;

        color: #737d8b;

        font-size: 18px;
        letter-spacing: 8px;

        white-space: nowrap;
    }

.gc-separador
    {
        width: 220px;
        height: 2px;

        margin: 28px 0 28px 160px;

        background: linear-gradient(90deg, transparent, var(--gc-azul), transparent);
    }

.gc-lema
    {
        margin-left: 130px;

        color: #122f50;

        font-size: 22px;
        font-weight: 600;
    }

.gc-lema span
    {
        color: var(--gc-verde);

        padding: 0 7px;
    }

.gc-beneficios
    {
        max-width: 760px;

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

        margin-top: 34px;

        border: 1px solid #e0e7ed;
        border-radius: 14px;

        background: rgba(255, 255, 255, 0.86);

        box-shadow: 0 6px 22px rgba(20, 55, 85, 0.05);
    }

.gc-beneficio
    {
        position: relative;

        min-height: 92px;

        display: grid;
        grid-template-columns: 48px 1fr;
        align-items: center;

        gap: 12px;

        padding: 18px 20px;
    }

.gc-beneficio:not(:last-child)::after
    {
        content: "";

        position: absolute;

        top: 20%;
        right: 0;

        width: 1px;
        height: 60%;

        background: #dbe3ea;
    }

.gc-beneficio-icono
    {
        color: var(--gc-azul);

        font-size: 36px;

        text-align: center;
    }

.gc-beneficio:nth-child(2) .gc-beneficio-icono,
.gc-beneficio:nth-child(2) strong
    {
        color: var(--gc-verde);
    }

.gc-beneficio strong
    {
        display: block;

        margin-bottom: 4px;

        color: var(--gc-azul);

        font-size: 16px;
    }

.gc-beneficio small
    {
        display: block;

        color: var(--gc-gris);

        font-size: 12px;
        line-height: 1.35;
    }

.gc-panel
    {
        width: 100%;
        max-width: 510px;

        justify-self: end;

        padding: 30px 54px 42px 54px;

        border: 1px solid #d9e1e7;
        border-radius: 22px;

        background: rgba(255, 255, 255, 0.96);

        box-shadow: 0 16px 40px rgba(21, 48, 75, 0.12);
    }

.gc-seguridad
    {
        width: 108px;
        height: 108px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin: -10px auto 18px auto;

        border: 3px solid #eef1f4;
        border-radius: 50%;

        box-shadow: inset 0 0 0 3px #dff0d8;

        color: var(--gc-azul);

        font-size: 44px;
    }

.gc-panel h1
    {
        margin: 0 0 10px 0;

        color: #08294c;

        font-size: 31px;
        line-height: 1.15;

        text-align: center;
    }

.gc-panel-descripcion
    {
        margin: 0 0 26px 0;

        color: var(--gc-gris);

        font-size: 17px;
        line-height: 1.45;

        text-align: center;
    }

.gc-campo
    {
        position: relative;

        margin-bottom: 18px;
    }

.gc-campo input
    {
        width: 100%;
        height: 58px;

        margin: 0;
        padding: 0 46px 0 56px;

        border: 1px solid #cfd8e2;
        border-radius: 10px;

        background: #ffffff;

        color: #40536a;

        font: normal 16px Arial, Helvetica, sans-serif;

        outline: none;
    }

.gc-campo input:focus
    {
        border-color: var(--gc-azul);

        box-shadow: 0 0 0 3px rgba(11, 103, 178, 0.10);
    }

.gc-campo-icono
    {
        position: absolute;

        top: 0;
        left: 17px;

        height: 58px;

        display: flex;
        align-items: center;

        color: #7d8da0;

        font-size: 24px;
    }

.gc-requerido
    {
        position: absolute;

        top: 19px;
        right: -18px;

        color: #e53935;

        font-size: 15px;
    }

.gc-boton
    {
        width: 100%;
        min-height: 58px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 10px;

        margin: 8px 0 0 0;
        padding: 10px 20px;

        border: 0;
        border-radius: 10px;

        background: linear-gradient(180deg, #1176d2, #0860b4);

        color: #ffffff;

        font: bold 19px Arial, Helvetica, sans-serif;

        cursor: pointer;

        box-shadow: 0 5px 12px rgba(8, 96, 180, 0.18);
    }

.gc-boton:hover
    {
        background: linear-gradient(180deg, #0e6fc7, #07569f);
    }

.gc-enlaces
    {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        gap: 12px 22px;

        margin-top: 28px;

        font-size: 14px;
    }

.gc-enlaces a
    {
        color: #0068bd;

        text-decoration: underline;
    }

.gc-enlaces a:hover
    {
        color: #004f91;
    }

.gc-ayuda
    {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 24px;
        height: 24px;

        border-radius: 50%;

        background: #2f93e4;
        color: #ffffff;

        font-size: 15px;
        font-weight: bold;

        text-decoration: none !important;
    }

.gc-aviso
    {
        margin-bottom: 18px;
        padding: 11px 13px;

        border-radius: 8px;

        font-size: 13px;
        line-height: 1.45;
    }

.gc-error
    {
        border: 1px solid #e5baba;

        background: #fff1f1;
        color: #843939;
    }

.gc-exito
    {
        border: 1px solid #b9dbc7;

        background: #eef8f2;
        color: #356447;
    }

.gc-etiqueta
    {
        display: block;

        margin: 0 0 6px 2px;

        color: #334b64;

        font-size: 13px;
        font-weight: bold;
    }

.gc-panel .gc-etiqueta + .gc-campo
    {
        margin-top: 0;
    }

.gc-pie
    {
        min-height: 70px;

        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;

        gap: 24px;

        padding: 0 38px;

        background: linear-gradient(110deg, var(--gc-azul-profundo), var(--gc-azul-oscuro));

        color: #ffffff;

        font-size: 13px;
    }

.gc-pie-centro
    {
        text-align: center;
    }

.gc-pie-derecha
    {
        text-align: right;
    }

.gc-pie a
    {
        color: #ffffff;

        text-decoration: none;
    }

.gc-pie a:hover
    {
        text-decoration: underline;
    }

@media (max-width: 1050px)
    {
        .gc-principal
            {
                grid-template-columns: 1fr;

                gap: 34px;

                padding-top: 38px;
            }

        .gc-presentacion
            {
                max-width: 760px;

                margin: 0 auto;
            }

        .gc-panel
            {
                justify-self: center;
            }
    }

@media (max-width: 680px)
    {
        .gc-barra-superior
            {
                min-height: 54px;

                padding: 0 16px;

                font-size: 12px;
            }

        .gc-barra-superior-derecha
            {
                display: none;
            }

        .gc-principal
            {
                padding: 26px 16px 30px 16px;
            }

        .gc-marca
            {
                gap: 12px;
            }

        .gc-logo-simbolo
            {
                transform: scale(0.78);
                transform-origin: left center;

                width: 92px;
                flex-basis: 92px;
            }

        .gc-producto
            {
                font-size: 42px;
                letter-spacing: 2px;
            }

        .gc-subproducto
            {
                font-size: 11px;
                letter-spacing: 4px;
            }

        .gc-separador,
        .gc-lema
            {
                margin-left: 0;
            }

        .gc-lema
            {
                font-size: 17px;
            }

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

        .gc-beneficio:not(:last-child)::after
            {
                top: auto;
                right: 8%;
                bottom: 0;
                left: 8%;

                width: 84%;
                height: 1px;
            }

        .gc-panel
            {
                padding: 26px 24px 32px 24px;
            }

        .gc-panel h1
            {
                font-size: 26px;
            }

        .gc-panel-descripcion
            {
                font-size: 15px;
            }

        .gc-pie
            {
                grid-template-columns: 1fr;

                gap: 8px;

                padding: 16px;

                text-align: center;
            }

        .gc-pie-derecha
            {
                text-align: center;
            }
    }