/* =============================================
   MYDSAC — Hoja de Estilos Principal
   Diseño basado en mydsac.com
   ============================================= */

/* --- Variables --- */
:root {
    /* Paleta real mydsac.com */
    --navy:          #0d4772;
    --navy-dark:     #093352;
    --sky:           #50adef;
    --sky-dark:      #2f8fd4;
    --red-cta:       #c0392b;
    --red-cta-dark:  #a93226;
    --maroon:        #661411;
    --gray-light:    #f0f0f0;
    --text:          #555555;
    --text-dark:     #222222;
    --border:        #dddddd;
    --white:         #ffffff;
    --gold:          #e6aa21;

    /* Fondo de página y estados de navegación (reales) */
    --body-bg:       #f9f9f9;
    --nav-active-bg: #daebfb;
    --heading-color: #222222;

    /* Backward compatibility */
    --color-primary:    #0d4772;
    --color-primary-d:  #093352;
    --color-accent:     #e6aa21;
    --color-accent-d:   #c8880a;
    --color-text:       #555555;
    --color-text-light: #777777;
    --color-bg:         #f0f0f0;
    --color-white:      #ffffff;
    --color-border:     #dddddd;

    --font-heading: 'Oswald', sans-serif;
    --font-body:    'Roboto', sans-serif;
    --shadow-sm:    0 2px 8px rgba(0,0,0,.08);
    --shadow-md:    0 6px 24px rgba(0,0,0,.12);
    --shadow-lg:    0 12px 40px rgba(0,0,0,.16);
    --radius:       4px;
    --radius-lg:    8px;
    --transition:   .3s ease;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text); line-height: 1.7; background: var(--body-bg); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1,h2,h3,h4,h5 { font-family: var(--font-heading); font-weight: 300; color: var(--heading-color); line-height: 1.3; }

/* --- Utilidades --- */
/* Ancho medido en mydsac.com: la columna de contenido es de 1130px
   (contenedor 1170 - 20px de padding a cada lado). */
.container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 20px; }
/* En el original las bandas de contenido son blancas sobre un body #f9f9f9. */
.section { padding: 60px 0; background: var(--white); }
.section--alt { background: var(--gray-light); }

.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-header h2 { font-size: 1.9rem; color: var(--navy); margin: .4rem 0 1rem; }
.section-header p { color: var(--text); max-width: 620px; margin: 0 auto; }

.section-tag {
    display: inline-block; background: rgba(26,58,107,.1);
    color: var(--navy); font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .25rem .8rem; border-radius: 50px; margin-bottom: .5rem;
}

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.6rem; border-radius: var(--radius);
    font-family: var(--font-heading); font-weight: 600; font-size: .88rem;
    cursor: pointer; border: 2px solid transparent;
    transition: var(--transition); text-align: center;
}
.btn--primary    { background: var(--sky); color: var(--white); border-color: var(--sky); }
.btn--primary:hover { background: var(--sky-dark); border-color: var(--sky-dark); }
.btn--outline    { background: transparent; color: var(--white); border-color: var(--white); }
.btn--outline:hover { background: var(--white); color: var(--navy); }
.btn--outline-dark { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline-dark:hover { background: var(--navy); color: var(--white); }
.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--sky); color: var(--white); }
.btn--nav { background: var(--sky); color: var(--white) !important; padding: .45rem 1.1rem; border-radius: var(--radius); }
.btn--nav:hover { background: var(--sky-dark); }
.btn--gray { background: #888888; color: var(--white); border-color: #888888; }
.btn--gray:hover { background: #6f6f6f; border-color: #6f6f6f; }
.btn--block { width: 100%; justify-content: center; }