@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url('./../fonts/Barlow-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Barlow'
        /* font-family: 'Neue Haas Display', 'Arial', sans-serif; */
        /* font-weight: 400; */
}

body {
    background: #ffffff;

    min-height: 100vh;
    display: grid;
    /* overflow: hidden; */
    grid-template-rows: auto 1fr;
}


.site-header {
    padding: 16px 32px;
    background-color: #cd1111;
}

.site-header__nav {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}

.site-header__button {
    text-decoration: none;
    padding: 8px 12px;
    color: white;
    background-color: #c09454;
    border-radius: 6px;

    line-height: 1.5;
}

.site-header__button:hover {
    background-color: #8c6e34;
}

.site-header__logo {
    height: 50px;
    margin-right: auto;
}

.error {
    position: absolute;
    right: 10px;
    text-align: center;
    background-color: rgb(244, 244, 244);
    border-radius: 6px;
    color: #eb0000 !important;
    margin: 16px auto 16px auto;
    padding: 12px;
    opacity: 0;

    animation: fadeInOut 10s ease-in-out;
}

.success {
    position: absolute;
    right: 10px;
    text-align: center;
    background-color: green;
    border-radius: 6px;
    color: #fbfbfb !important;
    margin: 16px auto 16px auto;
    padding: 12px;
    opacity: 0;

    animation: fadeInOut 10s ease-in-out;
}

/* CREO ANIMACION PARA LOS MENSAJES DE ESTADO */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        right: -100px;
    }

    10% {
        right: 10px;
        opacity: 1;
    }

    90% {
        right: 10px;
        opacity: 1;
    }

    100% {
        right: -100px;
        opacity: 0;
    }
}

/* CELULARES */
@media (max-width: 600px) {

    .site-header {
        padding: 12px 25px;
    }

    .site-header__nav {
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .site-header__logo {
        height: 30px;
    }

    .site-header__button {
        padding: 7px 10px;
        font-size: 0.7rem;
        line-height: 1.1;
        white-space: nowrap;
    }

    .error,
    .success {
        left: 12px;
        right: 12px;
        max-width: 90vw;
        font-size: 0.9rem;
        padding: 10px;
        margin: 12px auto;
    }
}


/*  */
/* =========================================================
   BASE COMÚN DE PÁGINAS
   Mantiene mobile como base y mejora tablet / PC
========================================================= */

:root {
    --color-rojo: #cb1524;
    --color-rojo-header: #cb1524;
    --color-dorado: #c09454;
    --color-dorado-hover: #c09454;
    --color-blanco: #ffffff;

    --page-bg-image: none;

    --logo-mobile: 200px;
    --logo-desktop: 200px;

    --content-padding-mobile: 2rem 0;
    --content-padding-desktop: 2rem;
    --content-gap-mobile: 2rem;
    --content-gap-desktop: 1rem;

    --form-max-width: 520px;
    --form-bg: var(--color-rojo);
    --form-title-size-mobile: 1.8rem;
    --form-title-size-desktop: 2.2rem;

    --message-bg: var(--color-dorado);
    --message-border: #cb1524;
    --message-max-width: 560px;
    --message-height-desktop: 350px;
}

body {
    min-height: 100dvh;
    overflow-x: hidden;

    background-color: #ffffff;
    background-image: var(--page-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: var(--color-blanco);
}

.site-header {
    /* background-color: var(--color-rojo-header); */

    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 44%), linear-gradient(180deg, #e31313 0%, #b90000 100%);
    color: #ffffff;


}

.site-header__button {
    /* background-color: var(--color-dorado); */
    background: linear-gradient(180deg, #c09454 0%, #a77720 100%);
}

.site-header__button:hover {
    background-color: var(--color-dorado-hover);
}

/* Layout principal compartido */
#content-main {
    display: grid;
    /* grid-template-rows: auto 1fr; */
    align-content: center;
    justify-content: center;
    justify-items: center;

    gap: var(--content-gap-mobile);
    padding: var(--content-padding-mobile);

    position: relative;
}

#logo {
    width: var(--logo-mobile);
    max-width: 82vw;
    height: auto;
}

/* Formularios compartidos */
form {
    width: min(90vw, var(--form-max-width));

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 1rem;

    /* background-color: var(--form-bg); */
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22) 0%, transparent 44%), linear-gradient(180deg, #e31313 0%, #b90000 100%);

    border-radius: 25px;
    border: 1px solid var(--color-blanco);

    padding: 1rem;
}

form h1 {
    text-align: center;
    font-size: var(--form-title-size-mobile);
    line-height: 1.05;
    font-weight: 700;
}

form label {
    font-weight: 500;
}

form input {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--color-blanco);
}

form select {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--color-blanco);
    color: #606060;
    background-color: var(--color-blanco);
}

form button {
    align-self: center;

    width: auto;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;

    /* background-color: var(--color-dorado); */

    background: linear-gradient(180deg, #c09454 0%, #a77720 100%);

    color: var(--color-blanco);

    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

form button:hover {
    background-color: var(--color-dorado-hover);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Tarjetas de mensaje compartidas */
#content-mensaje {
    width: min(90vw, var(--message-max-width));

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    background: var(--message-bg);
    border-radius: 12px;
    border: 1px solid var(--message-border);

    padding: 1rem;
}

/* Tablet / PC */
@media (min-width: 768px) {
    #content-main {
        gap: var(--content-gap-desktop);
        padding: var(--content-padding-desktop);
    }

    #logo {
        width: var(--logo-desktop);
    }

    form {
        width: 100%;
        padding: 1.5rem 2rem;
        gap: 1.2rem;
    }

    form h1 {
        font-size: var(--form-title-size-desktop);
    }

    form label {
        font-size: 1.1rem;
    }

    form input {
        font-size: 1rem;
        padding: 10px;
    }

    form select {
        font-size: 1rem;
        padding: 10px;
    }

    form button {
        font-size: 1.2rem;
        padding: 10px 18px;
    }

    #content-mensaje {
        width: min(50vw, var(--message-max-width));
        min-height: var(--message-height-desktop);
    }
}

/* Pantallas bajas: notebooks/tablets horizontales */
@media (min-width: 768px) and (max-height: 720px) {
    #content-main {
        padding: 1rem;
        gap: 0.6rem;

    }

    #logo {
        width: min(var(--logo-desktop), 170px);
    }

    #content-mensaje {
        min-height: auto;
        padding: 1rem;


    }
}