/* ============================================================
   BASE & RESET
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--clr-text);
  background: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img, video {
  display: block;
  max-width: 100%;
}

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

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: var(--font);
}

ul, ol {
  list-style: none;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.section {
  padding-block: var(--sp-12);
}

.section--lg {
  padding-block: var(--sp-16);
}

@media (max-width: 768px) {
  .section { padding-block: var(--sp-8); }
  .section--lg { padding-block: var(--sp-10); }
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

/* ============================================================
   IMAGE RATIO SYSTEM
   Uso: <div class="img-ratio img-ratio--hero"> <img> o <div class="img-ratio__placeholder"> </div>
   ============================================================ */

.img-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.img-ratio > img,
.img-ratio > .img-ratio__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.img-ratio > img {
  object-fit: cover;
  display: block;
}

.img-ratio > .img-ratio__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1. Premium / Hero — 12:5 desktop, 9:14 mobile */
.img-ratio--hero         { aspect-ratio: 12 / 5; }
@media (max-width: 768px) {
  .img-ratio--hero       { aspect-ratio: 9 / 14; }
}

/* 2. Default horizontal / mosaico — 3:2 */
.img-ratio--h            { aspect-ratio: 3 / 2; }

/* 3. Cuadrado — 1:1 */
.img-ratio--square       { aspect-ratio: 1 / 1; }

/* 4. Detail vertical corto — 10:11 */
.img-ratio--detail-v     { aspect-ratio: 10 / 11; }

/* Benefits 4-column grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 1024px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .benefits-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Scroll snap row */
.scroll-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--sp-2);
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { scroll-snap-align: start; }

@media (min-width: 768px) {
  .scroll-row { grid-auto-columns: 320px; }
}

@media (min-width: 1024px) {
  .scroll-row--expand {
    grid-auto-flow: unset;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
  }
  .scroll-row--4 {
    grid-auto-flow: unset;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
  }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.heading-xl {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.heading-lg {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.heading-md {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.heading-sm {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.body-lg { font-size: var(--text-md); line-height: 1.65; }
.body { font-size: var(--text-base); line-height: 1.6; }
.body-sm { font-size: var(--text-sm); line-height: 1.55; }
.caption { font-size: var(--text-xs); line-height: 1.4; letter-spacing: 0.02em; }

.text-muted { color: var(--clr-text-2); }
.text-faint { color: var(--clr-text-3); }
.text-primary { color: var(--clr-primary); }

/* ============================================================
   SECTION HEADER
   ============================================================ */

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  gap: var(--sp-4);
}
@media (max-width: 480px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
  }
}

.section-header__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: var(--sp-1);
}

.section-header__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--clr-text);
  line-height: 1.2;
}

.section-header__link {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  transition: opacity var(--dur-fast) var(--ease);
}
.section-header__link:hover { opacity: 0.75; }
.section-header__link svg { transition: transform var(--dur-fast) var(--ease); }
.section-header__link:hover svg { transform: translateX(3px); }

/* ============================================================
   VISIBILITY UTILS
   ============================================================ */

.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}