/*
 * CSS personalizado
 * Autor: Giorgio Buffa
 * Versión: 1.1 (Grid responsivo corregido)
 * Descripción: Base de estilos con sistema de grid, utilidades y tipografía Aleo
 */

/*————————————————————————————————————————
  1. RESET & BOX-SIZING
————————————————————————————————————————*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;   /* Regla de oro */
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    line-height: var(--line-height);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-weight: 300;         /* Peso ligero de Aleo como base */
}

/*————————————————————————————————————————
  2. VARIABLES CSS
————————————————————————————————————————*/
:root {
    /* Colores */
    --color-primary:      #b08e68;
    --color-secondary:    #808080;
    --color-text:         #25282a;
    --color-bg:           #fdfdfd;
    --color-light:        #f0ece3;
    --color-dark:         #272b2d;
    --color-muted:        #afafaf;

    /* Tipografía */
    --font-base:          'Cinzel', 'Aleo', serif;
    --font-secondary:     'Gudea', sans-serif;
    --line-height:        1.6;
    --font-weight-normal: 400;
    --font-weight-bold:   700;

    /* Grid & Layout */
    --max-width:          1446px;
    --gutter:             10px;
    --cols-desktop:       8;
    --cols-tablet:        6;
    --cols-mobile:        4;

    /* Breakpoints */
    --bp-md: 768px;  /* ≥ md: tablets */
    --bp-lg: 992px;  /* ≥ lg: desktop */
}

/*————————————————————————————————————————
  3. TIPOGRAFÍA BASE
————————————————————————————————————————*/
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

h1 { font-size: clamp(2.8rem, 5vw, 3.5rem); margin-bottom: .5em; }
h2 { font-size: clamp(2.5rem,   4.5vw, 3rem);   margin-bottom: .5em; }
h3 { font-size: clamp(1.75rem,4vw,   2.5rem); margin-bottom: .5em; }
h4 { font-size: clamp(1.5rem, 3.5vw, 2rem);   margin-bottom: .5em; }
h5 { font-size: clamp(1.25rem,3vw,   1.75rem);margin-bottom: .5em; }
h6 { font-size: clamp(1rem,   2.5vw, 1.5rem); margin-bottom: .5em; }

p {
    font-family: var(--font-secondary);
    line-height: var(--line-height);
    margin-bottom: 1rem;
}

/* Enlaces */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color .2s ease-in-out;
}
a:hover,
a:focus {
    text-decoration: underline;
    color: var(--color-secondary);
}

/* Listas */
ul, ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}
li + li {
    margin-top: .5rem;
}

/*————————————————————————————————————————
  4. UTILIDADES DE TEXTO
————————————————————————————————————————*/
.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }
.text-justify { text-align: justify !important; }

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

.letter-spacing-1   { letter-spacing: 0.1rem !important; }
.letter-spacing-2   { letter-spacing: 0.3rem !important; }
.letter-spacing-3   { letter-spacing: 0.5rem !important; }
.letter-spacing-4   { letter-spacing: 0.7rem !important; }

.text-fw-normal   { font-weight: 400 !important; }
.text-fw-medium   { font-weight: 500 !important; }
.text-fw-bold     { font-weight: 700 !important; }
.text-fw-black    { font-weight: 900 !important; }

.text-uppercase    { text-transform: uppercase !important; }

.text-muted   { color: var(--color-muted) !important; }
.small        { font-size: 0.875rem !important; }

.italic       { font-style: italic !important; }

/* Espaciados rápidos */
.mt-0 { margin-top:     .1rem !important; }
.mt-1 { margin-top:     .5rem !important; }
.mt-2 { margin-top:     1rem !important; }
.mt-3 { margin-top:     1.5rem !important; }
.mt-4 { margin-top:     2rem !important; }
.mt-5 { margin-top:     2.5rem !important; }
.mt-6 { margin-top:     3rem !important; }
.mt-7 { margin-top:     3.5rem !important; }
.mb-0 { margin-bottom:  .1rem !important; }
.mb-1 { margin-bottom:  .5rem !important; }
.mb-2 { margin-bottom:  1rem  !important; }
.mb-3 { margin-bottom:  1.5rem   !important; }
.mb-4 { margin-bottom:  2rem !important; }
.mb-5 { margin-bottom:  2.5rem !important; }
.mb-6 { margin-bottom:  3rem !important; }
.mb-7 { margin-bottom:  3.5rem !important; }

/*————————————————————————————————————————
  5. BOTONES
————————————————————————————————————————*/
.btn {
    display: inline-block;
    padding: .75rem 1.5rem;
    border-radius: 5px;
    background-color: var(--color-primary);
    color: var(--color-light);
    font-family: var(--font-base);
    font-weight: var(--font-weight-bold);
    text-align: center;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}
.btn:hover,
.btn:focus {
    background-color: #9a7c5a; /* Un tono más oscuro y saturado del primario */
    transform: translateY(-2px);
}

/*————————————————————————————————————————
  6. CONTENEDOR CENTRAL
————————————————————————————————————————*/
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    /* Un "margen de seguridad" de 24px a cada lado */
    padding: 0 24px;
}

/*————————————————————————————————————————
  7. GRID CON CSS GRID (Mobile-First)
————————————————————————————————————————*/
.grid {
    display: grid;
    grid-gap: var(--gutter);
    /* DEFAULT (MÓVIL): El grid base es de 4 columnas */
    grid-template-columns: repeat(var(--cols-mobile), 1fr);
}

/* Estilo visual para las columnas */
.col {

}

/* --- CLASES DE COLUMNAS PARA MÓVIL (DEFAULT) --- */
/* Estas clases se aplican a menos que se sobreescriban en un breakpoint mayor */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }

/*————————————————————————————————————————
  8. MEDIA QUERIES & GRID RESPONSIVO
————————————————————————————————————————*/

/* --- TABLET: 6 COLUMNAS --- */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(var(--cols-tablet), 1fr);
    }
    /* Clases de columnas para tabletas (md) */
    .col-md-1 { grid-column: span 1; }
    .col-md-2 { grid-column: span 2; }
    .col-md-3 { grid-column: span 3; }
    .col-md-4 { grid-column: span 4; }
    .col-md-5 { grid-column: span 5; }
    .col-md-6 { grid-column: span 6; }
}

/* --- DESKTOP: 8 COLUMNAS --- */
@media (min-width: 992px) {
    .grid {
        grid-template-columns: repeat(var(--cols-desktop), 1fr);
    }
    /* Clases de columnas para desktop (lg) */
    .col-lg-1 { grid-column: span 1; }
    .col-lg-2 { grid-column: span 2; }
    .col-lg-3 { grid-column: span 3; }
    .col-lg-4 { grid-column: span 4; }
    .col-lg-5 { grid-column: span 5; }
    .col-lg-6 { grid-column: span 6; }
    .col-lg-7 { grid-column: span 7; }
    .col-lg-8 { grid-column: span 8; }
}

/* Offsets (globales por ahora, se podrían hacer responsivos si se necesita) */
.offset-1 { grid-column-start: 2; }
.offset-2 { grid-column-start: 3; }
.offset-3 { grid-column-start: 4; }
.offset-4 { grid-column-start: 5; }
.offset-5 { grid-column-start: 6; }
.offset-6 { grid-column-start: 7; }
.offset-7 { grid-column-start: 8; }

/*————————————————————————————————————————
  9. MEDIA & EMBEDS RESPONSIVOS
————————————————————————————————————————*/

/*
 * .img-fluid: Para imágenes responsivas.
 * Se asegura de que la imagen nunca sea más ancha que su contenedor.
 * El height: auto mantiene la proporción original.
 */
.img-fluid {
    max-width: 100%;
    height: auto;
    display: block; /* Elimina espacios extra debajo de la imagen */
}

/*
 * Para iframes (videos, mapas) responsivos.
 * Se necesita un contenedor extra con esta clase.
 * Mantiene la proporción 16:9, que es la más común para videos.
 */
.responsive-iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 por 16) */
}

.responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none; /* Elimina bordes no deseados */
}