/* ========= Base / Normalización ========= */
:root {
  --anim-duration: 600ms; /* Default animation duration */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; display: block; }

/* Contenedor */
.container { max-width: 1100px; margin-inline: auto; padding-inline: 24px;}
.container-nopadding { padding-inline: 0; }

/* ========= Grid mínimo (12 col) ========= */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.col-12 { grid-column: span 12; }
.col-9  { grid-column: span 9; }
.col-8  { grid-column: span 8; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

@media (max-width: 900px) {
  .md-col-12 { grid-column: span 12; }
  .md-col-9  { grid-column: span 12; }
  .md-col-8  { grid-column: span 12; }
  .md-col-7  { grid-column: span 12; }
  .md-col-6  { grid-column: span 12; }
  .md-col-5  { grid-column: span 12; }
  .md-col-4  { grid-column: span 12; }
  .md-col-3  { grid-column: span 12; }
}

/* ========= Margin Utilities ========= */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }

/* ========= Padding Utilities ========= */
.pt-1 { padding-top: 1rem; }
.pt-2 { padding-top: 2rem; }
.pt-3 { padding-top: 3rem; }
.pt-4 { padding-top: 4rem; }

.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-3 { padding-bottom: 3rem; }
.pb-4 { padding-bottom: 4rem; }

/* ========= Utilidades genéricas ========= */
.hidden { display: none !important; }
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,1px,1px); white-space:nowrap; border:0;
}

/* Botones mínimos (sin branding) */
.btn {
  display:inline-block; padding:.7rem 1rem; border-radius:10px; border:1px solid #e5e7eb;
  background:#fff; color:#0f172a; font-weight:600; text-decoration:none; cursor:pointer;
}
.btn:hover { filter: brightness(0.97); }

/* Overlay genérico (para modales/lightboxes) */
.ui-overlay {
  position:fixed; inset:0; background: rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition: opacity .18s ease;
  z-index: 999;
}
.ui-overlay.is-open { opacity:1; pointer-events:auto; }


/* ========= Transiciones con IntersectionObserver ========= */

/* Utilidades mínimas (ejemplo) */
.u-mb-32 { margin-bottom: 2rem; }

/* Estado inicial de los elementos animables */
[data-anim] {
  opacity: 0;
  transition: opacity var(--anim-duration, 600ms) ease, transform var(--anim-duration, 600ms) ease;
  will-change: transform, opacity;
}

/* Cuando entra en viewport */
[data-anim].is-inview {
  opacity: 1;
  transform: none;
}

/* Variantes */
[data-anim="fade-in"]      { transform: none; }
[data-anim="slide-up"]  { transform: translateY(2rem); }
[data-anim="slide-down"]  { transform: translateY(-2rem); }
[data-anim="slide-left"]{ transform: translateX(2rem); }
[data-anim="slide-right"]  { transform: translateX(-2rem); }
[data-anim="zoom-in"]   { transform: scale(.96); }

.is-inview[data-anim="zoom-in"] { transform: scale(1); }

/* Stagger (retardos declarativos) */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="200"] { transition-delay: .2s; }
[data-delay="300"] { transition-delay: .3s; }
[data-delay="400"] { transition-delay: .4s; }

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}