/* ===========================
   VARIABLES GLOBALES
=========================== */
:root {
    --primary: #C41230;
    --primary-hover: rgba(196, 18, 48, 0.7);
    --secondary: #f0eeed;

    --radius: 0.75rem;
    --container-max: 1200px;
    --section-padding: 4rem;

    --text-dark: #1a1a1a;
    --text-light: #ffffff;

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

    --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;
}
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.section {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

/* 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; }

/* ===========================
   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; }

.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-center { display: flex; justify-content: center; align-items: center !important; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-col { display: flex; flex-direction: column; }
.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); }

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

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

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

.btn-secondary {
    background: var(--secondary);
    color: var(--text-dark);
}

/* ===========================
   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;
}

/* ===========================
   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; }
}