/* =========================
    Reset, variables de color y tipografía,
    y utilidades generales del sitio.
   ========================= */

/* ── RESET ── */

/* Elimina márgenes y espacios automáticos del navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configuración general del documento */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* Estilo general del sitio */
body {
    font-family: 'DM Sans', Arial, Helvetica, sans-serif;
    background-color: #1a1a18;
    color: #f0ede4;
    line-height: 1.6;
    /* Espacio para que el header fijo no tape el contenido */
    padding-top: 70px;
}

/* Multimedia adaptable */
img,
video,
iframe {
    max-width: 100%;
}

/* Evita deformación y espacios inferiores en imágenes */
img {
    height: auto;
    display: block;
}

/* Enlaces sin subrayado */
a {
    text-decoration: none;
}

/* Viñetas dentro del bloque */
ul {
    list-style-position: inside;
}

/* ── VARIABLES DE COLOR Y TIPOGRAFÍA ── */

:root {
    --color-fondo:        #1a1a18;
    --color-superficie:   #222220;
    --color-superficie-2: #2c2c29;
    --color-borde:        #38382f;
    --color-dorado:       #c9a84c;
    --color-dorado-claro: #e0be7c;
    --color-texto:        #f0ede4;
    --color-texto-suave:  #a09d90;
    --color-texto-tenue:  #6b6860;
    --fuente-display:     'Playfair Display', Georgia, serif;
    --fuente-cuerpo:      'DM Sans', Arial, sans-serif;
    --radio-sm:           6px;
    --radio-md:           12px;
    --radio-lg:           20px;
    --radio-pill:         100px;
}

/* ── UTILIDADES GENERALES ── */

/* Contenedor centrado */
.container {
    width: min(90%, 1200px);
    margin: 0 auto;
}

/* Separación general entre secciones */
section,
aside {
    padding: 64px 0;
}

/* Estilo base para títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-texto);
    margin-bottom: 15px;
    font-family: var(--fuente-display);
    line-height: 1.2;
}

/* Separación entre párrafos */
p {
    margin-bottom: 15px;
    color: var(--color-texto-suave);
}

/* Etiqueta superior de sección */
.section-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dorado);
    margin-bottom: 10px;
}

/* Badge de sección */
.section-badge {
    display: inline-block;
    background-color: rgba(201, 168, 76, 0.12);
    color: var(--color-dorado);
    border: 1px solid var(--color-dorado);
    padding: 5px 14px;
    border-radius: var(--radio-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}