/* =========================================================================
   TECNOEA - utilidades.css
   Mini sistema de grid + utilidades propio, inspirado en Bootstrap pero
   100% autocontenido (sin depender de ningún CDN externo). Esto evita que
   el sitio se vea "roto" o sin estilos si el navegador no tiene acceso a
   internet o algún CDN está bloqueado.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. RESET BÁSICO
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }
input { font-family: inherit; }

/* -------------------------------------------------------------------------
   2. CONTENEDOR Y GRID (basado en flexbox + gap, sin negative margins)
   ------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.row.g-3 { gap: 1rem; }
.row.g-4 { gap: 1.5rem; }
.row.text-center { text-align: center; }

/* Columnas: mobile-first. Por defecto ocupan todo el ancho. */
[class*="col-"] { flex: 1 1 100%; max-width: 100%; }

.col-6      { flex: 1 1 calc(50% - 0.5rem);  max-width: calc(50% - 0.5rem); }
.col-12     { flex: 1 1 100%; max-width: 100%; }

@media (min-width: 768px) {
    .col-md-3  { flex: 1 1 calc(25% - 0.75rem); max-width: calc(25% - 0.75rem); }
    .col-md-4  { flex: 1 1 calc(33.333% - 0.667rem); max-width: calc(33.333% - 0.667rem); }
    .col-md-6  { flex: 1 1 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
}

@media (min-width: 992px) {
    .col-lg-2  { flex: 1 1 calc(16.666% - 0.834rem); max-width: calc(16.666% - 0.834rem); }
    .col-lg-3  { flex: 1 1 calc(25% - 0.75rem); max-width: calc(25% - 0.75rem); }
    .col-lg-4  { flex: 1 1 calc(33.333% - 0.667rem); max-width: calc(33.333% - 0.667rem); }
    .col-lg-5  { flex: 1 1 calc(41.666% - 0.584rem); max-width: calc(41.666% - 0.584rem); }
    .col-lg-6  { flex: 1 1 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
    .col-lg-7  { flex: 1 1 calc(58.333% - 0.417rem); max-width: calc(58.333% - 0.417rem); }
    .d-lg-block { display: block !important; }
    .order-lg-2 { order: 2; }
    .order-lg-3 { order: 3; }
}

.order-2 { order: 2; }
.order-3 { order: 3; }

/* -------------------------------------------------------------------------
   3. FLEX / DISPLAY UTILITIES
   ------------------------------------------------------------------------- */
.d-flex { display: flex; }
.d-none { display: none; }
@media (min-width: 768px) {
    .d-md-flex { display: flex !important; }
    .d-md-none { display: none !important; }
}
.flex-wrap { flex-wrap: wrap; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.align-items-center { align-items: center; }
.text-center { text-align: center; }
.text-end { text-align: right; }
@media (min-width: 768px) {
    .text-md-end { text-align: right; }
}
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.position-relative { position: relative; }

/* -------------------------------------------------------------------------
   4. ESPACIADO
   ------------------------------------------------------------------------- */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.6rem; }
.mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.6rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.py-4 { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.6rem; }
.pt-5 { padding-top: 3rem; }
@media (min-width: 768px) {
    .p-md-5 { padding: 3rem; }
}

/* -------------------------------------------------------------------------
   5. TIPOGRAFÍA / COLOR UTILS
   ------------------------------------------------------------------------- */
.fs-5 { font-size: 1.1rem; }
.fw-semibold { font-weight: 600; }
.small { font-size: 0.85rem; }
.text-muted { color: var(--color-texto-secundario); }
.text-primary { color: var(--color-primario); }
.text-white { color: #fff; }
.text-dark { color: var(--color-texto); }
.text-decoration-none { text-decoration: none; }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

/* -------------------------------------------------------------------------
   6. BOTONES GENÉRICOS
   ------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radio-sm);
    padding: 0.55rem 1.1rem;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transicion-rapida);
}

/* -------------------------------------------------------------------------
   7. NAVBAR (menú principal con toggle responsive, sin JS de Bootstrap)
   ------------------------------------------------------------------------- */
.navbar { padding: 0; }
.navbar-toggler {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 6px 10px;
    display: none;
}
.navbar-toggler-icon {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: relative;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 0;
}
.navbar-toggler-icon::before { top: -6px; }
.navbar-toggler-icon::after { top: 6px; }

.navbar-nav {
    display: flex;
    flex-wrap: wrap;
}
.nav-item { display: block; }

@media (max-width: 991px) {
    .navbar-toggler { display: block; }
    .navbar-collapse { display: none; width: 100%; }
    .navbar-collapse.abierto { display: block; }
    .navbar-nav { flex-direction: column; }
}

/* -------------------------------------------------------------------------
   8. ÍCONOS (sustituyen a Bootstrap Icons: simples círculos/letras o emoji)
   La clase .icono envuelve un emoji o caracter para mantener tamaño
   y alineación consistentes sin depender de una fuente de iconos externa.
   ------------------------------------------------------------------------- */
.icono {
    display: inline-block;
    line-height: 1;
    font-style: normal;
}

/* -------------------------------------------------------------------------
   9. IMAGEN PLACEHOLDER (sustituye fotos externas de Unsplash)
   Genera un fondo decorativo con degradado + emoji centrado, sin
   depender de ninguna imagen externa.
   ------------------------------------------------------------------------- */
.placeholder-img {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.4rem;
    border-radius: var(--radio-md);
    width: 100%;
    height: 100%;
    min-height: 140px;
}