* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            #1c1c1c,
            #050505 60%
        );

    color: white;

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

}


.pagina {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}


/* =========================
   HEADER
========================= */

.header {

    padding: 25px 7%;

    border-bottom:
        1px solid rgba(212, 175, 55, 0.2);

}


.marca {

    display: flex;

    align-items: center;

    gap: 12px;

}


.logo {

    width: 48px;

    height: 48px;

    object-fit: contain;

}


.marca h1 {

    margin: 0;

    font-size: 21px;

    letter-spacing: 4px;

    color: #d4af37;

}


.marca span {

    font-size: 11px;

    letter-spacing: 5px;

    color: #aaa;

}


/* =========================
   PRINCIPAL
========================= */

.principal {

    width: min(100%, 850px);

    margin: auto;

    padding: 70px 25px;

    text-align: center;

}


.etiqueta {

    color: #d4af37;

    letter-spacing: 4px;

    font-size: 11px;

    font-weight: bold;

}


.presentacion h2 {

    margin: 12px 0;

    font-size:
        clamp(
            42px,
            8vw,
            70px
        );

    letter-spacing: 8px;

}


.descripcion {

    max-width: 550px;

    margin: 0 auto;

    color: #aaa;

    line-height: 1.6;

}


/* =========================
   BUSCADOR
========================= */

.buscador-card {

    margin: 45px auto 0;

    width: min(100%, 520px);

    padding: 35px;

    background: rgba(20, 20, 20, 0.9);

    border:
        1px solid rgba(212, 175, 55, 0.3);

    border-radius: 14px;

    box-shadow:
        0 20px 60px
        rgba(0, 0, 0, 0.4);

}


.buscador-card h3 {

    margin-top: 0;

    font-size: 24px;

}


.buscador-card p {

    color: #999;

}


#formBusqueda {

    display: flex;

    gap: 10px;

    margin-top: 25px;

}


#codigo {

    flex: 1;

    min-width: 0;

    padding: 15px;

    background: #080808;

    color: white;

    border:
        1px solid #333;

    border-radius: 8px;

    outline: none;

    font-size: 16px;

}


#codigo:focus {

    border-color: #d4af37;

}


#formBusqueda button,
.carnet-button {

    background: #d4af37;

    color: black;

    border: none;

    border-radius: 8px;

    padding: 0 22px;

    font-weight: bold;

    cursor: pointer;

}


#formBusqueda button:hover,
.carnet-button:hover {

    filter: brightness(1.1);

}


/* =========================
   ESTADO
========================= */

.estado {

    margin-top: 18px;

    min-height: 20px;

    color: #aaa;

    font-size: 14px;

}


.estado.error {

    color: #ff7777;

}


.estado.correcto {

    color: #d4af37;

}


/* =========================
   RESULTADO
========================= */

.resultado {

    width: min(100%, 650px);

    margin: 35px auto 0;

    padding: 25px;

    background: #101010;

    border:
        1px solid rgba(212, 175, 55, 0.35);

    border-radius: 14px;

}


.oculto {

    display: none !important;

}


.resultado-persona {

    display: flex;

    align-items: center;

    gap: 25px;

    text-align: left;

}


.foto-persona {

    width: 130px;

    height: 130px;

    object-fit: cover;

    background: #050505;

    border:
        2px solid #d4af37;

    border-radius: 10px;

}


.tipo {

    display: inline-block;

    padding: 5px 10px;

    border:
        1px solid #d4af37;

    border-radius: 20px;

    color: #d4af37;

    font-size: 11px;

    letter-spacing: 2px;

}


.datos-persona h3 {

    margin: 10px 0 5px;

    font-size: 26px;

}


.datos-persona p {

    margin: 7px 0;

    color: #aaa;

}


.codigo-persona {

    color: white !important;

}


.carnet-button {

    margin-top: 15px;

    height: 42px;

    padding: 0 20px;

}


/* =========================
   FOOTER
========================= */

footer {

    text-align: center;

    padding: 25px;

    color: #555;

    font-size: 11px;

    letter-spacing: 2px;

}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 600px) {

    .principal {

        padding:
            50px
            18px;

    }


    #formBusqueda {

        flex-direction: column;

    }


    #formBusqueda button {

        height: 50px;

    }


    .resultado-persona {

        flex-direction: column;

        text-align: center;

    }

}

/* =========================
   ACCIONES PRINCIPALES
========================= */

.acciones-principales {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 30px;

}


.accion-principal {

    padding: 13px 22px;

    border-radius: 8px;

    font-weight: bold;

    cursor: pointer;

}


.accion-principal.principal {

    background: #d4af37;

    color: #000;

    border: 1px solid #d4af37;

}


.accion-principal.secundaria {

    background: transparent;

    color: white;

    border: 1px solid #444;

}


/* =========================
   HACERSE SOCIO
========================= */

.seccion-socio {

    width: min(100%, 520px);

    margin: 45px auto 0;

}


.socio-card {

    background: rgba(20, 20, 20, 0.95);

    border: 1px solid rgba(212, 175, 55, 0.3);

    border-radius: 14px;

    padding: 35px;

    text-align: left;

}


.socio-card h3 {

    font-size: 28px;

    margin: 10px 0;

}


.socio-card > p {

    color: #999;

    line-height: 1.5;

}


.volver {

    background: transparent;

    border: none;

    color: #d4af37;

    cursor: pointer;

    padding: 0;

    font-size: 14px;

}


#formSocio {

    display: flex;

    flex-direction: column;

    gap: 18px;

    margin-top: 25px;

}


#formSocio label {

    display: flex;

    flex-direction: column;

    gap: 8px;

    color: #bbb;

    font-size: 14px;

}


#formSocio input {

    width: 100%;

    padding: 13px;

    background: #080808;

    color: white;

    border: 1px solid #333;

    border-radius: 8px;

}


.preview-socio {

    width: 150px;

    height: 150px;

    margin: 0 auto;

    object-fit: cover;

    border-radius: 10px;

    border: 2px solid #d4af37;

}


.registrar-socio {

    height: 50px;

    background: #d4af37;

    color: black;

    border: none;

    border-radius: 8px;

    font-weight: bold;

    cursor: pointer;

}

/* =========================
   BOTÓN YA SOY SOCIO
========================= */

.ya-socio {
    display: block;

    margin: 22px auto 0;

    padding: 12px 22px;

    background: transparent;

    border: 1px solid rgba(212, 175, 55, 0.6);

    border-radius: 8px;

    color: #d4af37;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

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


.ya-socio:hover {

    background: #d4af37;

    color: #000;

    border-color: #d4af37;

    transform: translateY(-2px);

}


.ya-socio:active {

    transform: translateY(0);

}


/* =========================
   FORMULARIO DE SOCIO
========================= */

.seccion-socio {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: 30px;

}


.socio-card {

    width: 100%;

    max-width: 520px;

    padding: 35px;

    background: #111;

    border: 1px solid rgba(212, 175, 55, 0.35);

    border-radius: 16px;

    box-sizing: border-box;

}


.socio-card label {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-top: 20px;

    color: #d4af37;

    font-size: 14px;

    font-weight: 600;

}


.socio-card input {

    width: 100%;

    padding: 13px;

    background: #080808;

    border: 1px solid #333;

    border-radius: 8px;

    color: white;

    font-size: 15px;

    box-sizing: border-box;

    outline: none;

    transition: border-color 0.2s;

}


.socio-card input:focus {

    border-color: #d4af37;

}


/* =========================
   SELECTOR DE FOTO
========================= */

.socio-card input[type="file"] {

    padding: 12px;

    background: #080808;

    border: 1px dashed rgba(212, 175, 55, 0.7);

    cursor: pointer;

    color: #aaa;

}


/* BOTÓN INTERNO DEL SELECTOR */

.socio-card input[type="file"]::file-selector-button {

    margin-right: 15px;

    padding: 9px 14px;

    border: none;

    border-radius: 6px;

    background: #d4af37;

    color: #000;

    font-weight: bold;

    cursor: pointer;

}


.socio-card input[type="file"]::file-selector-button:hover {

    background: #f0c94f;

}


/* =========================
   VISTA PREVIA DE LA FOTO
========================= */

.preview-socio {

    display: block;

    width: 160px;

    height: 160px;

    margin: 25px auto 10px;

    object-fit: cover;

    border-radius: 12px;

    border: 2px solid #d4af37;

    background: #000;

}


/* =========================
   BOTÓN REGISTRAR
========================= */

.registrar-socio {

    width: 100%;

    margin-top: 25px;

    padding: 14px;

    border: none;

    border-radius: 8px;

    background: #d4af37;

    color: #000;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    transition:
        transform 0.2s,
        background 0.2s;

}


.registrar-socio:hover {

    background: #f0c94f;

    transform: translateY(-2px);

}


.registrar-socio:active {

    transform: translateY(0);

}


/* =========================
   BOTÓN VOLVER
========================= */

.volver {

    background: transparent;

    border: none;

    color: #aaa;

    cursor: pointer;

    padding: 5px 0;

    font-size: 14px;

}


.volver:hover {

    color: #d4af37;

}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 600px) {

    .socio-card {

        padding: 25px 20px;

    }


    .preview-socio {

        width: 140px;

        height: 140px;

    }

}

/* =========================
   BIENVENIDA DEL SOCIO
========================= */

.seccion-bienvenida {

    width: 100%;

    display: flex;

    justify-content: center;

    padding: 30px 0;

}


.bienvenida-card {

    width: 100%;

    max-width: 850px;

    text-align: center;

}


.bienvenida-card h2 {

    color: #ffffff;

    font-size: 32px;

    margin-bottom: 30px;

}


/* =========================
   CARNET
========================= */

.contenedor-carnet {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 30px;

}


.carnet-socio {

    width: 100%;

    max-width: 760px;

    height: 440px;

    border: none;

    border-radius: 15px;

    background: #000;

}


/* =========================
   INFORMACIÓN
========================= */

.info-socio {

    max-width: 650px;

    margin: 0 auto;

    padding: 25px;

    background: #111;

    border: 1px solid rgba(212, 175, 55, 0.4);

    border-radius: 14px;

    text-align: left;

}


.info-socio h3 {

    margin-top: 0;

    margin-bottom: 20px;

    color: #d4af37;

}


.info-linea {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

    border-bottom: 1px solid #292929;

}


.info-linea:last-child {

    border-bottom: none;

}


.info-linea span {

    color: #888;

}


.info-linea strong {

    color: #fff;

}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 700px) {

    .carnet-socio {

        height: 380px;

    }


    .info-linea {

        flex-direction: column;

        gap: 5px;

    }

}

/* =========================
   BENEFICIOS
========================= */

.seccion-beneficios {

    width: 100%;

    max-width: 850px;

    margin: 35px auto 0;

    text-align: left;

}


.seccion-beneficios h3 {

    color: #d4af37;

    font-size: 24px;

    margin-bottom: 5px;

}


.descripcion-beneficios {

    color: #999;

    margin-bottom: 20px;

}


.lista-beneficios {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );

    gap: 20px;

}


.beneficio {

    overflow: hidden;

    background: #111;

    border: 1px solid
        rgba(212, 175, 55, 0.35);

    border-radius: 12px;

}


.beneficio-imagen {

    width: 100%;

    height: 150px;

    object-fit: cover;

    display: block;

}


.beneficio-contenido {

    padding: 20px;

}


.beneficio h4 {

    color: #fff;

    margin-top: 0;

}


.beneficio p {

    color: #aaa;

    line-height: 1.5;

}


.beneficio-enlace {

    display: inline-block;

    margin-top: 10px;

    padding: 10px 15px;

    background: #d4af37;

    color: #000;

    text-decoration: none;

    font-weight: bold;

    border-radius: 6px;

}