/* ===========================
   VARIABLES GLOBALES
=========================== */
:root {
    --primary: #C41230;
    --primary-hover: rgba(196, 18, 48, 0.7);
    --primary-20: hsla(238, 100%, 62%, 0.2);
    --secondary: #f0eeed;
    --tertiary: hsla(198, 74%, 51%, 1);
    --tertiary-hover: hsla(198, 74%, 51%, 0.7);

    --border-primary: hsla(0, 0%, 75%, 0.1);

    --shadow-primary: hsla(0, 0%, 0%, 0.4);
    --shadow-xs: 0 1px 2px var(--shadow-primary);
    --shadow-l: 0 3px 12px var(--shadow-primary);

    --radius: 0.75rem;
    --radius-m: clamp(0.63rem, calc(-0.19vw + 0.79rem), 0.75rem);

    --container-max: 1200px;
    --section-padding: 3rem;

    --text-dark: #1a1a1a;
    --text-light: #ffffff;
    --text-body: hsla(0, 0%, 25%, 1);
    --text-title: hsla(0, 0%, 100%, 1);

    --dark-5: hsla(0, 0%, 0%, 0.05);
    --dark-10: hsla(0, 0%, 0%, 0.1);
    --dark-40: hsla(0, 0%, 0%, 0.4);
    --dark-60: hsla(0, 0%, 0%, 0.6);

    --error: hsla(351, 95%, 56%, 1);
    --error-10: hsla(351, 95%, 56%, 0.1);
    --success: hsla(134, 61%, 41%, 1);
    --success-10: hsla(134, 61%, 41%, 0.1);

    --gap-sm: 1rem;
    --gap-md: 2rem;
    --gap-lg: 4rem;

    --space-2xs: clamp(0.51rem, calc(0.16vw + 0.48rem), 0.62rem);
    --space-xs: clamp(0.64rem, calc(0.35vw + 0.57rem), 0.88rem);
    --space-s: clamp(0.8rem, calc(0.65vw + 0.67rem), 1.24rem);
    --space-m: clamp(1rem, calc(1.11vw + 0.78rem), 1.75rem);

    --text-xs: clamp(0.79rem, calc(-0.23vw + 0.84rem), 0.63rem);
    --text-s: clamp(0.89rem, calc(-0.07vw + 0.9rem), 0.84rem);
    --text-m: clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem);
    --text-l: clamp(1.13rem, calc(0.55vw + 1.01rem), 1.5rem);
    --text-xl: clamp(1.27rem, calc(1.09vw + 1.05rem), 2rem);
    --text-2xl: clamp(1.42rem, calc(1.84vw + 1.06rem), 2.66rem);
    --text-3xl: clamp(1.6rem, calc(2.89vw + 1.02rem), 3.55rem);
    --text-4xl: clamp(1.8rem, calc(4.34vw + 0.93rem), 4.74rem);
}

/* Breakpoint 480px */
@media (min-width: 480px) {
    :root {
        --container-max: 480px;
    }
}
/* Breakpoint 640px */
@media (min-width: 640px) {
    :root {
        --container-max: 640px;
    }
}/* Breakpoint 768px */
@media (min-width: 768px) {
    :root {
        --container-max: 768px;
    }
}
/* Breakpoint 1024px */
@media (min-width: 1024px) {
    :root {
        --container-max: 1024px;
    }
}
/* Breakpoint 1280px */
@media (min-width: 1280px) {
    :root {
        --container-max: 1280px;
    }
}
/* Breakpoint 1536px */
@media (min-width: 1536px) {
    :root {
        --container-max: 1536px;
    }
}


/* ===========================
   RESET SUAVE
=========================== */
*, *::before, *::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===========================
   CONTENEDORES Y SECCIONES
=========================== */
.section-container {
    max-width: var(--container-max) !important;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
	padding-top: var(--section-padding) !important;
    padding-bottom: var(--section-padding);
}
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Override suave para Oxygen */
.ct-section-inner-wrap {
    max-width: var(--max-width);
    padding-left: 2rem;
    padding-right: 2rem;
}

/* ===========================
   TIPOGRAFÍA
=========================== */
.text-xs { font-size: var(--text-xs); }
.text-s { font-size: var(--text-s); }
.text-m { font-size: var(--text-m); }
.text-l { font-size: var(--text-l); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

.text-center { text-align: center !important; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-success { color: var(--success); }
.text-error { color: var(--error); }

.text-light { color: var(--light); }

h1 { padding-bottom: var(--space-m);}

/* ===========================
   ESPACIADOS
=========================== */
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }

.mr-4 { margin-right: 1rem; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.pt-1 { padding-top: .25rem; }
.pt-2 { padding-top: .5rem; }
.pt-4 { padding-top: 1rem; }
.pt-8 { padding-top: 2rem; }
.pb-1 { padding-bottom: .25rem; }
.pb-2 { padding-bottom: .5rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-8 { padding-bottom: 2rem; }
.pl-4 { padding-left: 1rem; }
.pl-8 { padding-left: 2rem; }
.pr-4 { padding-right: 1rem; }
.pr-8 { padding-right: 2rem; }

/* ===========================
   FLEX Y GRID
=========================== */
.flex { display: flex; }
.flex-end { display: flex; align-items: flex-end !important; }
.flex-center { display: flex; justify-content: center; align-items: center !important; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-row { display: flex; flex-direction: row !important; align-items: center;}
.flex-col { display: flex; flex-direction: column; align-items: flex-start;}
.flex-stretch { align-items: stretch; }
.flex-stretch > div { flex: 1; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
.grid-gap-lg { gap: var(--gap-lg); }

.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }

/* ===========================
   BOTONES
=========================== */
.btn {
    display: inline-block;
    padding: var(--space-xs) var(--space-xs);
    margin-bottom: var(--space-s);
    border-radius: var(--radius-m);
    border: 0;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}

.btn-primary {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--text-light);
}

.btn-primary:hover {
    background: var(--primary-hover);
    color: #fff;
}

.btn-secondary {
    background: var(--secondary);
    color: var(--text-dark);
}
.btn-tertiary {
    background: var(--tertiary);
    color: var(--text-light);
}
.btn-tertiary:hover {
    background: var(--tertiary-hover);
    color: #fff;
}

/* ===========================
   COMPONENTES
=========================== */
.card {
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.hero {
    padding: 6rem 0;
    background: var(--secondary);
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.25rem;
    opacity: .8;
}

.logo {
	max-height: 70px;
}

/* ===========================
   DIMENSIONES
=========================== */
.full-width {
    width: 100%;
}

/* ===========================
   VARIOS
=========================== */
.rounded-full {
    border-radius: 9999px;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .text-xl { font-size: 1.5rem; }
    .hero-title { font-size: 2.2rem; }
}

/* ===========================
   INPUT - SELECT
=========================== */
.input {
    padding: var(--space-xs) var(--space-xs);
    margin-bottom: var(--space-s);
    background: var(--dark-5);
    color: var(--text-body);
    /*font-size: var(--text-s);*/
    font-weight: 500;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: all 0.25s ease-in-out;
    appearance: none;
    outline: 0;
}
.input:focus {
    background: var(--primary-20);
    border-color: var(--primary);
    box-shadow: var(--shadow-l);
}
.input:hover {
    border-color: var(--primary);
    background: transparent;
    box-shadow: var(--shadow-l);
}
.input::placeholder {
    color: var(--dark-40);
}
.input:invalid {
    border-color: var(--error);
    background: var(--error-10);
}
.input:disabled {
    cursor: not-allowed;
    opacity: .75;
    box-shadow: none;
    background: var(--dark-10);
}
.input:checked {
    background: var(--dark-60);    
}
.select {
    padding: var(--space-xs) var(--space-s);
    margin-bottom: var(--space-s);
    background: var(--dark-5);
    color: var(--text-body);
    /*font-size: var(--text-s);*/
    font-weight: 500;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: all 0.25s ease-in-out;
    outline: 0;
}
.select:focus {
    background: var(--primary-20);
    border-color: var(--primary);
}
.select:hover {
    border-color: var(--primary);
}
.select::placeholder {
    color: var(--dark-40);
}
.select:invalid {
    border-color: var(--error);
    background: var(--error-10);
}
.select:disabled {
    cursor: not-allowed;
    opacity: .75;
    box-shadow: none;
    background: var(--dark-10);
}

/* ===========================
   LINK
=========================== */
.link {
    color: var(--primary);
    /*font-size: var(--text-m);
    font-weight: 600;
    letter-spacing: 0.05rem;
    box-shadow: 0 2px 0 var(--primary-20);*/
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}
.link:hover {
    color: var(--primary);
    box-shadow: 0 2px 0 var(--primary-40);
    text-decoration: underline;
}
.link:focus {
    background: var(--primary-10);
}
.link-primary {
    color: var(--primary) !important;
}
.link-secondary {
    color: var(--secondary);
    border-color: var(--secondary-20);
}
.link-tertiary {
    color: var(--tertiary) !important;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}
.link-tertiary:hover {
    box-shadow: 0 2px 0 var(--primary-40);
    text-decoration: underline;
}
.link-error {
    color: var(--error) !important;
}
.link-success {
    color: var(--success) !important;
}

/* ===========================
   VARIOS
=========================== */
#login-form {
    display: flex;
}
#login-form button {
    display: inline-block;
    padding: var(--space-xs) var(--space-xs);
    margin-bottom: var(--space-s);
    border-radius: var(--radius-m);
    border: 0;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}
#login-form button {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--text-light);
}
#login-form button.rwmb-password-toggle {
    background: none;
    border: none;
}
#login-form input {
    padding: var(--space-xs) var(--space-xs);
    margin-bottom: var(--space-s);
    background: var(--dark-5);
    color: var(--text-body);
    /*font-size: var(--text-s);*/
    font-weight: 500;
    border-radius: var(--radius-m);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xs);
    transition: all 0.25s ease-in-out;
    /*appearance: none;*/
    outline: 0;
}