/* ============================================================
   SISTEMA DE UTILIDADES CSS PROPIO
   Reemplazo ligero de Bootstrap, hecho a la medida.
   Úsalo junto a tu styles.css principal:

   <link rel="stylesheet" href="css/utilidades.css">
   <link rel="stylesheet" href="css/styles.css">

   (utilidades.css primero, styles.css después,
   así tus estilos propios pueden sobreescribir si hace falta)
   ============================================================ */

/* ============================================================
   1. VARIABLES GLOBALES (CSS Custom Properties)
   ------------------------------------------------------------
   Son como "cajitas" donde guardas valores que usarás muchas
   veces (colores, espaciados, tamaños). Si mañana quieres
   cambiar el color principal de todo el sitio, solo lo cambias
   AQUÍ una vez, y se actualiza en todos lados donde lo uses.

   Se usan así en cualquier parte de tu CSS:
   color: var(--color-primario);
   ============================================================ */
:root {
    /* Colores - cámbialos por la paleta de tu proyecto */
    --color-primario: #0aa0ff;
    --color-secundario: #1e293b;
    --color-texto: #1f2937;
    --color-texto-claro: #e9e9e9;
    --color-fondo: #00296b;
    --color-fondo-alterno: #f9fafb;
    --color-borde: #e5e7eb;

    /* Espaciados - basados en múltiplos de 8px (estándar de diseño) */
    --espacio-xs: 0.5rem; /* 8px  */
    --espacio-sm: 1rem; /* 16px */
    --espacio-md: 1.5rem; /* 24px */
    --espacio-lg: 2.5rem; /* 40px */
    --espacio-xl: 4rem; /* 64px */

    /* Ancho máximo del contenido (como el .container de Bootstrap) */
    --container-max: 1200px;
    --container-padding: 1rem;

    /* Bordes redondeados, para reutilizar el mismo estilo siempre */
    --radio-sm: 6px;
    --radio-md: 12px;
    --radio-lg: 20px;

    /* Transición estándar, para que todo se sienta consistente */
    --transicion: all 0.3s ease;
}

/* ============================================================
   2. RESET BÁSICO
   ------------------------------------------------------------
   Cada navegador trae márgenes y estilos por defecto distintos
   (títulos, listas, etc). Este reset "empareja la cancha" para
   que tu diseño se vea igual en todos los navegadores.
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* box-sizing: border-box evita que el padding/border
     "agranden" el tamaño real de un elemento. Sin esto,
     un div de 300px con padding de 20px termina midiendo
     340px real, lo cual rompe layouts constantemente. */
}

body {
    font-family: "Roboto", sans-serif;
    color: var(--color-texto);
    background-color: var(--color-fondo);
    line-height: 1.6; /* mejora la legibilidad de los párrafos */
    -webkit-font-smoothing: antialiased; /* texto más suave en Mac/iOS */
    overflow-x: hidden; /* evita scroll horizontal por errores de diseño */
}

img {
    max-width: 100%; /* evita que una imagen se salga de su contenedor */
    display: block; /* quita el espacio fantasma que dejan las imágenes */
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

/* ============================================================
   3. VARIABLES DEL SISTEMA DE GRID
   ------------------------------------------------------------
   Aquí definimos los "breakpoints" (los anchos de pantalla donde
   el diseño cambia) y el ancho máximo del container en cada uno.
   Son los mismos valores que usa Bootstrap por defecto, para que
   si ya tienes experiencia con Bootstrap, todo se comporte igual.

   sm  = celulares en horizontal / tablets chicas   (>= 576px)
   md  = tablets                                    (>= 768px)
   lg  = laptops                                    (>= 992px)
   xl  = pantallas grandes                          (>= 1200px)
   xxl = pantallas muy grandes                       (>= 1400px)
   ============================================================ */
:root {
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;

    --grid-columnas: 12; /* el grid siempre se divide en 12 columnas */
    --grid-gutter-x: 1.5rem; /* espacio horizontal entre columnas (24px) */
    --grid-gutter-y: 0; /* espacio vertical entre filas cuando el row se envuelve */
}

/* ============================================================
   4. CONTAINER
   ------------------------------------------------------------
   Igual que en Bootstrap, tienes 3 variantes:

   .container        -> ancho máximo fijo que cambia por breakpoint
                         (el contenido "salta" de tamaño en cada
                         breakpoint, no es fluido)
   .container-fluid  -> siempre ocupa el 100% del ancho disponible
   .container-{bp}   -> se vuelve fluido HASTA cierto breakpoint,
                         y de ahí en adelante se limita
                         (ej: .container-lg es 100% hasta lg,
                         y de ahí en adelante tiene max-width fijo)
   ============================================================ */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    width: 100%;
    margin-inline: auto;
    padding-inline: calc(var(--grid-gutter-x) * 0.5);
    /* el padding es la mitad del gutter, porque el .row de adentro
     le resta ese mismo espacio con márgenes negativos (ver abajo) */
}

/* .container normal: va cambiando su max-width en cada breakpoint */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* .container-fluid: siempre 100%, nunca se limita */
.container-fluid {
    max-width: 100%;
}

/* .container-{bp}: fluido hasta ese breakpoint, luego se limita */
@media (min-width: 576px) {
    .container-sm {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container-md {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container-lg {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container-xl {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1320px;
    }
}

/* ============================================================
   5. ROW Y COLUMNAS (el corazón del sistema de grid)
   ------------------------------------------------------------
   Funciona igual que Bootstrap: usas un .row como "fila", y
   adentro pones .col-* para dividir el espacio en hasta 12
   columnas.

   Ejemplo:
   <div class="row">
     <div class="col-6">Mitad</div>
     <div class="col-6">Mitad</div>
   </div>

   ¿Por qué margin negativo en .row y padding en .col?
   Es el mismo truco que usa Bootstrap: así el primer y último
   elemento de la fila quedan alineados con el .container,
   y el "gutter" (espacio entre columnas) se reparte parejo.
   ============================================================ */
.row {
    display: flex;
    flex-wrap: wrap; /* si no caben las columnas, bajan de línea */
    margin-inline: calc(var(--grid-gutter-x) * -0.5);
    row-gap: var(--grid-gutter-y);
}

.row > * {
    padding-inline: calc(var(--grid-gutter-x) * 0.5);
}

/* .col sin número = todas las columnas se reparten el espacio
   disponible EN PARTES IGUALES automáticamente */
.col {
    flex: 1 0 0%; /* crece, no se encoge más de su base, base = 0 */
}

/* .col-auto = la columna solo ocupa el ancho de su contenido,
   no se estira ni se encoge */
.col-auto {
    flex: 0 0 auto;
    width: auto;
}

/* Columnas de ancho fijo (base, sin breakpoint) del 1 al 12.
   El número indica cuántas de las 12 columnas ocupa.
   Ej: .col-4 ocupa 4/12 = 33.33% del ancho de la fila. */
.col-1 {
    flex: 0 0 auto;
    width: 8.333333%;
}
.col-2 {
    flex: 0 0 auto;
    width: 16.666667%;
}
.col-3 {
    flex: 0 0 auto;
    width: 25%;
}
.col-4 {
    flex: 0 0 auto;
    width: 33.333333%;
}
.col-5 {
    flex: 0 0 auto;
    width: 41.666667%;
}
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.col-7 {
    flex: 0 0 auto;
    width: 58.333333%;
}
.col-8 {
    flex: 0 0 auto;
    width: 66.666667%;
}
.col-9 {
    flex: 0 0 auto;
    width: 75%;
}
.col-10 {
    flex: 0 0 auto;
    width: 83.333333%;
}
.col-11 {
    flex: 0 0 auto;
    width: 91.666667%;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

/* Offsets base: empujan la columna hacia la derecha dejando
   espacio vacío, sin necesidad de una columna vacía extra.
   Ej: .offset-3 deja 3/12 columnas de espacio antes de empezar. */
.offset-1 {
    margin-left: 8.333333%;
}
.offset-2 {
    margin-left: 16.666667%;
}
.offset-3 {
    margin-left: 25%;
}
.offset-4 {
    margin-left: 33.333333%;
}
.offset-5 {
    margin-left: 41.666667%;
}
.offset-6 {
    margin-left: 50%;
}
.offset-7 {
    margin-left: 58.333333%;
}
.offset-8 {
    margin-left: 66.666667%;
}
.offset-9 {
    margin-left: 75%;
}
.offset-10 {
    margin-left: 83.333333%;
}
.offset-11 {
    margin-left: 91.666667%;
}

/* ============================================================
   6. COLUMNAS RESPONSIVE (col-sm-*, col-md-*, col-lg-*, etc.)
   ------------------------------------------------------------
   Esto es lo que te permite decir cosas como:
   "en móvil ocupa todo el ancho (col-12), pero desde tablet
   (md) en adelante solo ocupa la mitad (col-md-6)".

   Ejemplo real:
   <div class="col-12 col-md-6 col-lg-4">
     En móvil: 100% ancho
     En tablet (md+): 50% ancho
     En laptop (lg+): 33.33% ancho
   </div>

   Bootstrap usa "mobile-first": defines el diseño para móvil
   primero (sin prefijo), y luego usas col-md-*, col-lg-*, etc.
   para ir cambiando el layout en pantallas MÁS GRANDES.
   ============================================================ */
@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
    }
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }
    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }
    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }
    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }
    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }
    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-sm-0 {
        margin-left: 0%;
    }
    .offset-sm-1 {
        margin-left: 8.333333%;
    }
    .offset-sm-2 {
        margin-left: 16.666667%;
    }
    .offset-sm-3 {
        margin-left: 25%;
    }
    .offset-sm-4 {
        margin-left: 33.333333%;
    }
    .offset-sm-5 {
        margin-left: 41.666667%;
    }
    .offset-sm-6 {
        margin-left: 50%;
    }
    .offset-sm-7 {
        margin-left: 58.333333%;
    }
    .offset-sm-8 {
        margin-left: 66.666667%;
    }
    .offset-sm-9 {
        margin-left: 75%;
    }
    .offset-sm-10 {
        margin-left: 83.333333%;
    }
    .offset-sm-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
    }
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    .col-md-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-md-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }
    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-md-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }
    .col-md-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-md-0 {
        margin-left: 0%;
    }
    .offset-md-1 {
        margin-left: 8.333333%;
    }
    .offset-md-2 {
        margin-left: 16.666667%;
    }
    .offset-md-3 {
        margin-left: 25%;
    }
    .offset-md-4 {
        margin-left: 33.333333%;
    }
    .offset-md-5 {
        margin-left: 41.666667%;
    }
    .offset-md-6 {
        margin-left: 50%;
    }
    .offset-md-7 {
        margin-left: 58.333333%;
    }
    .offset-md-8 {
        margin-left: 66.666667%;
    }
    .offset-md-9 {
        margin-left: 75%;
    }
    .offset-md-10 {
        margin-left: 83.333333%;
    }
    .offset-md-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
    }
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }
    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }
    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }
    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }
    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-lg-0 {
        margin-left: 0%;
    }
    .offset-lg-1 {
        margin-left: 8.333333%;
    }
    .offset-lg-2 {
        margin-left: 16.666667%;
    }
    .offset-lg-3 {
        margin-left: 25%;
    }
    .offset-lg-4 {
        margin-left: 33.333333%;
    }
    .offset-lg-5 {
        margin-left: 41.666667%;
    }
    .offset-lg-6 {
        margin-left: 50%;
    }
    .offset-lg-7 {
        margin-left: 58.333333%;
    }
    .offset-lg-8 {
        margin-left: 66.666667%;
    }
    .offset-lg-9 {
        margin-left: 75%;
    }
    .offset-lg-10 {
        margin-left: 83.333333%;
    }
    .offset-lg-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
    }
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }
    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }
    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }
    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }
    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }
    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-xl-0 {
        margin-left: 0%;
    }
    .offset-xl-1 {
        margin-left: 8.333333%;
    }
    .offset-xl-2 {
        margin-left: 16.666667%;
    }
    .offset-xl-3 {
        margin-left: 25%;
    }
    .offset-xl-4 {
        margin-left: 33.333333%;
    }
    .offset-xl-5 {
        margin-left: 41.666667%;
    }
    .offset-xl-6 {
        margin-left: 50%;
    }
    .offset-xl-7 {
        margin-left: 58.333333%;
    }
    .offset-xl-8 {
        margin-left: 66.666667%;
    }
    .offset-xl-9 {
        margin-left: 75%;
    }
    .offset-xl-10 {
        margin-left: 83.333333%;
    }
    .offset-xl-11 {
        margin-left: 91.666667%;
    }
}

@media (min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0%;
    }
    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.333333%;
    }
    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.666667%;
    }
    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.666667%;
    }
    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.333333%;
    }
    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.666667%;
    }
    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.333333%;
    }
    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.666667%;
    }
    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-xxl-0 {
        margin-left: 0%;
    }
    .offset-xxl-1 {
        margin-left: 8.333333%;
    }
    .offset-xxl-2 {
        margin-left: 16.666667%;
    }
    .offset-xxl-3 {
        margin-left: 25%;
    }
    .offset-xxl-4 {
        margin-left: 33.333333%;
    }
    .offset-xxl-5 {
        margin-left: 41.666667%;
    }
    .offset-xxl-6 {
        margin-left: 50%;
    }
    .offset-xxl-7 {
        margin-left: 58.333333%;
    }
    .offset-xxl-8 {
        margin-left: 66.666667%;
    }
    .offset-xxl-9 {
        margin-left: 75%;
    }
    .offset-xxl-10 {
        margin-left: 83.333333%;
    }
    .offset-xxl-11 {
        margin-left: 91.666667%;
    }
}

/* ============================================================
   7. GUTTERS (espaciado entre columnas)
   ------------------------------------------------------------
   Por defecto el gutter es de 1.5rem, pero puedes cambiarlo
   por fila con estas clases, igual que en Bootstrap:

   .g-0     -> sin espacio entre columnas (pegadas)
   .g-1..5  -> espacio horizontal Y vertical
   .gx-*    -> solo espacio horizontal (entre columnas)
   .gy-*    -> solo espacio vertical (entre filas cuando envuelve)
   ============================================================ */
.g-0 {
    --grid-gutter-x: 0;
    --grid-gutter-y: 0;
}
.gx-0 {
    --grid-gutter-x: 0;
}
.gy-0 {
    --grid-gutter-y: 0;
}
.g-1 {
    --grid-gutter-x: 0.5rem;
    --grid-gutter-y: 0.5rem;
}
.gx-1 {
    --grid-gutter-x: 0.5rem;
}
.gy-1 {
    --grid-gutter-y: 0.5rem;
}
.g-2 {
    --grid-gutter-x: 1rem;
    --grid-gutter-y: 1rem;
}
.gx-2 {
    --grid-gutter-x: 1rem;
}
.gy-2 {
    --grid-gutter-y: 1rem;
}
.g-3 {
    --grid-gutter-x: 1.5rem;
    --grid-gutter-y: 1.5rem;
}
.gx-3 {
    --grid-gutter-x: 1.5rem;
}
.gy-3 {
    --grid-gutter-y: 1.5rem;
}
.g-4 {
    --grid-gutter-x: 2rem;
    --grid-gutter-y: 2rem;
}
.gx-4 {
    --grid-gutter-x: 2rem;
}
.gy-4 {
    --grid-gutter-y: 2rem;
}
.g-5 {
    --grid-gutter-x: 3rem;
    --grid-gutter-y: 3rem;
}
.gx-5 {
    --grid-gutter-x: 3rem;
}
.gy-5 {
    --grid-gutter-y: 3rem;
}

/* ============================================================
   8. ALINEACIÓN DENTRO DEL ROW
   ------------------------------------------------------------
   Controlan cómo se acomodan las columnas dentro de la fila,
   igual que las clases de Bootstrap con el mismo nombre.
   ============================================================ */

/* Alineación vertical de las columnas dentro del row */
.align-items-start {
    align-items: flex-start;
}
.align-items-center {
    align-items: center;
}
.align-items-end {
    align-items: flex-end;
}

/* Alineación horizontal de las columnas dentro del row */
.justify-content-start {
    justify-content: flex-start;
}
.justify-content-center {
    justify-content: center;
}
.justify-content-end {
    justify-content: flex-end;
}
.justify-content-between {
    justify-content: space-between;
}
.justify-content-around {
    justify-content: space-around;
}

/* Alineación individual de UNA sola columna (sobreescribe al row) */
.align-self-start {
    align-self: flex-start;
}
.align-self-center {
    align-self: center;
}
.align-self-end {
    align-self: flex-end;
}

/* Orden visual de una columna, sin cambiar el orden en el HTML.
   Útil por ejemplo si en móvil quieres que la imagen se vea
   antes que el texto, aunque en el HTML esté después. */
.order-first {
    order: -1;
}
.order-last {
    order: 999;
}
.order-0 {
    order: 0;
}
.order-1 {
    order: 1;
}
.order-2 {
    order: 2;
}
.order-3 {
    order: 3;
}
.order-4 {
    order: 4;
}
.order-5 {
    order: 5;
}
.order-6 {
    order: 6;
}
.order-7 {
    order: 7;
}
.order-8 {
    order: 8;
}
.order-9 {
    order: 9;
}
.order-10 {
    order: 10;
}
.order-11 {
    order: 11;
}
.order-12 {
    order: 12;
}

/* ============================================================
   9. UTILIDADES DE FLEXBOX (para alinear cosas rápido)
   ------------------------------------------------------------
   Estas son como las clases "d-flex", "justify-content-*" y
   "align-items-*" de Bootstrap, pero abreviadas.
   ============================================================ */
.flex {
    display: flex;
}

.flex-columna {
    display: flex;
    flex-direction: column; /* apila los elementos verticalmente */
}

.flex-centrado {
    display: flex;
    align-items: center; /* centra verticalmente */
    justify-content: center; /* centra horizontalmente */
}

.flex-entre {
    display: flex;
    align-items: center;
    justify-content: space-between; /* separa elementos a los extremos
                                      (típico en navbars: logo a la
                                      izquierda, menú a la derecha) */
}

.flex-wrap {
    flex-wrap: wrap; /* permite que los elementos "bajen de línea"
                       si no caben, en vez de desbordarse */
}

.gap-xs {
    gap: var(--espacio-xs);
}
.gap-sm {
    gap: var(--espacio-sm);
}
.gap-md {
    gap: var(--espacio-md);
}
.gap-lg {
    gap: var(--espacio-lg);
}

/* ============================================================
   10. UTILIDADES DE ESPACIADO (margin / padding rápidos)
   ------------------------------------------------------------
   En vez de escribir "margin-bottom: 24px" cada vez en tu CSS,
   usas la clase directo en el HTML: <div class="mb-md">
   Esto es el mismo concepto que usan Bootstrap y Tailwind.
   ============================================================ */

/* Margin bottom (mb) - muy usado para separar secciones/elementos */
.mb-xs {
    margin-bottom: var(--espacio-xs);
}
.mb-sm {
    margin-bottom: var(--espacio-sm);
}
.mb-md {
    margin-bottom: var(--espacio-md);
}
.mb-lg {
    margin-bottom: var(--espacio-lg);
}
.mb-xl {
    margin-bottom: var(--espacio-xl);
}
.mb-3 {
    margin-bottom: var(--espacio-sm);
}

/* Padding en secciones completas (ej: <section class="py-lg">) */
.py-sm {
    padding-block: var(--espacio-sm);
} /* padding-block = arriba y abajo */
.py-md {
    padding-block: var(--espacio-md);
}
.py-lg {
    padding-block: var(--espacio-lg);
}
.py-xl {
    padding-block: var(--espacio-xl);
}

/* ============================================================
   11. UTILIDADES DE TEXTO
   ============================================================ */
.text-centro {
    text-align: center;
}
.text-claro {
    color: var(--color-texto-claro);
}

.text-oscuro {
    color: var(--color-texto);
}

/* Tamaños de texto responsive automáticos con clamp():
   clamp(mínimo, preferido, máximo)
   El texto crece/decrece solo según el ancho de pantalla,
   SIN necesidad de un media query por cada tamaño. */
.titulo-hero {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.titulo-seccion {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
}

/* ============================================================
   12. BREAKPOINTS DE REFERENCIA (para cuando SÍ necesites
      escribir tus propios media queries personalizados)
   ------------------------------------------------------------
   Estos son los tamaños estándar más usados en la industria.
   Cópialos y pégalos cuando necesites ajustar algo específico
   que estas utilidades no cubran.

   @media (max-width: 1024px) { ... }   -> Tablets grandes / laptops chicas
   @media (max-width: 768px)  { ... }   -> Tablets
   @media (max-width: 480px)  { ... }   -> Celulares
   ============================================================ */

/* ============================================================
   13. BOTÓN BASE (ejemplo de componente reutilizable)
   ------------------------------------------------------------
   Un ejemplo de cómo construir tus propios "componentes",
   igual que Bootstrap tiene su .btn.
   ============================================================ */
.boton {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    background-color: var(--color-texto-claro);
    color: var(--color-fondo);
    border: none;
    border-radius: 40px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicion); /* usa la variable de transición global */
}

.boton:hover {
    transform: translateY(-2px); /* sube ligeramente al pasar el mouse */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.boton-outline {
    background-color: transparent;
    color: var(--color-primario);
    border: 2px solid var(--color-primario);
}