/*
  Layout — estructura de página: contenedor central, header, hero,
  y la grilla de cada sección. Los estilos visuales de los componentes
  (botones, chips, tarjetas…) viven en components.css.
*/

.container {
  width: min(var(--max), calc(100% - var(--gutter)));
  margin-inline: auto;
}

/* Los enlaces del menú saltan a un ancla: se reserva el alto del header fijo
   para que el título de la sección no quede tapado. */
[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}

main {
  position: relative;
  width: 100%;
  background-color: var(--brand-soft);
}

/* — Header — */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--header-height);
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--header-height);
}

.site-header__logo {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  flex: none;
  text-decoration: none;
}

.site-header__logo img {
  width: 142px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.site-nav a {
  padding: 10px 11px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: var(--transition-control);
}

.site-nav a:hover {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

/* Este CTA se oculta en pantallas angostas; el del hero sigue disponible */
.site-header .btn {
  flex: none;
}

/* — Hero — */
.hero {
  width: 100%;
  background: var(--hero-ground);
}

.hero__stage {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: -23px 0 0 -48px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 13, 29, 0.28) 0%, rgba(2, 13, 29, 0.05) 54%, rgba(2, 13, 29, 0.02) 100%),
    linear-gradient(180deg, rgba(2, 13, 29, 0.02) 46%, rgba(2, 13, 29, 0.1) 74%, rgba(2, 13, 29, 0.58) 100%);
}

.hero__bags {
  position: absolute;
  z-index: 2;
  right: clamp(8px, 2.4vw, 64px);
  bottom: 0;
  height: min(88%, 580px);
  pointer-events: none;
}

.hero__bag-front {
  display: block;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 30px 30px rgba(1, 12, 28, 0.38));
}

.hero__bag-side {
  position: absolute;
  left: 730px;
  top: 237px;
  height: 64%;
  width: auto;
  transform: rotate(-1.6deg);
  filter: drop-shadow(0 26px 24px rgba(1, 12, 28, 0.34));
}

.hero__copy {
  position: absolute;
  z-index: 3;
  top: 104px;
  left: clamp(12px, 2vw, 32px);
  width: min(50vw, 660px);
}

.hero__wordmark {
  width: clamp(250px, 26vw, 410px);
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
}

.hero__title {
  margin: 0;
  color: var(--white);
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-hero);
  line-height: var(--leading-hero);
}

.hero__title span {
  display: block;
}

.hero__title .is-accent {
  color: var(--hero-accent);
}

.hero__cta {
  position: absolute;
  z-index: 4;
  bottom: clamp(24px, 4.2vw, 50px);
  left: clamp(32px, 5.7vw, 96px);
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: var(--radius-pill);
  color: var(--white);
  background: rgba(4, 19, 38, 0.76);
  box-shadow: 0 12px 28px rgba(1, 11, 24, 0.24);
  backdrop-filter: blur(10px);
  font-size: var(--text-small);
  font-weight: var(--weight-black);
  text-decoration: none;
  transition: var(--transition-control);
}

.hero__cta:hover {
  background: rgba(104, 104, 172, 0.92);
  transform: var(--lift-hover);
}

/* — Franja de atributos — */
.highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding-block: 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.highlights__item {
  display: grid;
  gap: 6px;
  align-content: start;
}

.highlights__item strong {
  color: var(--brand-deep);
  font-size: var(--text-body-sm);
}

.highlights__item span {
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

/* — Encabezado de sección reutilizable (eyebrow + título + descripción) — */
.section-intro {
  max-width: 650px;
  margin-bottom: 52px;
}

.eyebrow {
  margin: 0 0 17px;
  color: var(--brand-primary);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.section-intro__title {
  margin: 0 0 16px;
  color: var(--brand-deep);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-h2);
  line-height: var(--leading-heading);
}

.section-intro__description {
  max-width: 590px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
}

/* — Productos — */
.products {
  padding-block: var(--section-space);
}

.products__grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(28px, 4.6vw, 68px);
}

.catalog {
  margin-top: 88px;
}

.catalog__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: 26px;
}

.catalog__header h3 {
  margin: 0;
  color: var(--brand-deep);
  font-size: var(--text-h3-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-h3);
  line-height: 1.04;
}

.catalog__header p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-body);
}

/* — Calculadora — */
.calculator {
  background: var(--ice);
  padding-block: var(--section-space);
}

.calculator__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
  gap: var(--space-5);
  align-items: start;
}

.calculator__aside {
  min-width: 0;
  position: sticky;
  top: 96px;
}

.calculator__aside-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.calculator__disclaimer {
  max-width: 65ch;
  margin: 15px 6px 0;
  color: var(--muted-soft);
  font-size: var(--text-micro);
  line-height: var(--leading-body);
}

/* — Cinta de casos de uso (marquee) — */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 28px;
  padding-block: 24px;
}

.marquee-track__item {
  flex: none;
  color: var(--muted-soft);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.marquee-track__dot {
  flex: none;
  color: var(--border-strong);
}

/* — Empresas — */
.companies {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(48px, 9vw, 120px);
  align-items: start;
  padding-block: var(--section-space);
}

.companies__copy {
  max-width: 520px;
}

.companies__copy .section-intro__description {
  margin-bottom: 28px;
}

.companies__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.companies__list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  color: var(--brand-deep);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
}

/* — Preguntas frecuentes — */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(48px, 9vw, 120px);
  align-items: start;
  padding-block: var(--section-space);
  border-top: 1px solid var(--border);
}

.faq-list {
  border-top: 1px solid var(--border);
}

/* — CTA final de contacto — */
.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: var(--section-space);
  padding: clamp(34px, 5vw, 62px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--brand-soft);
}

.cta-banner__title {
  max-width: 620px;
  margin: 0 0 15px;
}

.cta-banner__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 10px;
}

/* — Footer — */
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: 52px 62px;
}

.site-footer__brand {
  display: grid;
  gap: 4px;
  text-decoration: none;
}

.site-footer__brand strong {
  color: var(--brand-deep);
  font-size: var(--text-h4);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  line-height: 1;
}

.site-footer__brand span {
  color: var(--brand-primary);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-strong);
  letter-spacing: 0.08em;
}

.site-footer__tagline {
  max-width: 380px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: start;
  gap: 10px 20px;
  color: var(--muted);
  font-size: var(--text-caption);
}

.footer-nav a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   Responsive
   Tres cortes:
   1024px — portátiles y tablets en horizontal: se aprieta el ritmo vertical.
    860px — tablet vertical y móvil grande: las grillas pasan a una columna
            y el hero deja de ser una superposición para volverse una columna
            (texto → bolsa → botón).
    560px — teléfono: tipografías y espaciados de teléfono, header compacto.
   ========================================================================== */

/* — Portátiles y tablets en horizontal — */
@media (max-width: 1024px) {
  :root {
    --section-space: var(--section-space-sm);
  }

  .hero__copy {
    top: 80px;
    width: min(56vw, 560px);
  }

  .hero__bags {
    height: min(80%, 480px);
  }

  /* La bolsa de 1 kg está posicionada en píxeles fijos para la composición
     de escritorio; por debajo de este ancho estorba más de lo que aporta. */
  .hero__bag-side {
    display: none;
  }
}

/* — Tablet vertical y móvil grande — */
@media (max-width: 860px) {
  .products__grid,
  .calculator__grid,
  .companies,
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .calculator__aside {
    position: static;
  }

  .highlights {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header .btn {
    display: none;
  }

  /* Hero apilado: el texto deja de competir con la fotografía del producto */
  .hero__stage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 44px calc(var(--gutter) / 2) 40px;
  }

  .hero__scrim {
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(2, 13, 29, 0.62) 0%,
      rgba(2, 13, 29, 0.28) 38%,
      rgba(2, 13, 29, 0.2) 62%,
      rgba(2, 13, 29, 0.62) 100%
    );
  }

  .hero__copy {
    position: static;
    width: 100%;
  }

  .hero__bags {
    position: static;
    order: 2;
    align-self: center;
    height: min(48vh, 360px);
    margin-top: 28px;
  }

  .hero__bag-front {
    margin-inline: auto;
  }

  .hero__cta {
    position: static;
    order: 3;
    margin-top: 28px;
  }
}

/* — Teléfono — */
@media (max-width: 560px) {
  :root {
    --gutter: var(--gutter-sm);
    --section-space: 62px;
    --text-hero: clamp(30px, 8.2vw, 40px);
    --text-h2: clamp(27px, 7.2vw, 36px);
    --text-h3-lg: clamp(23px, 6vw, 30px);
    --text-h3: clamp(21px, 5.4vw, 26px);
  }

  .highlights {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .companies__list {
    grid-template-columns: 1fr;
  }

  .section-intro {
    margin-bottom: 34px;
  }

  /* Header compacto: el menú pasa a una fila deslizable en vez de dos filas */
  .site-header .container {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block: 10px;
  }

  .site-header__logo img {
    width: 112px;
  }

  .site-nav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-left: 0;
    gap: 2px;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    flex: none;
    padding: 8px 10px;
    font-size: var(--text-micro);
  }

  .hero__stage {
    padding-block: 34px 32px;
  }

  .hero__wordmark {
    width: min(58vw, 196px);
    margin-bottom: 12px;
  }

  .hero__bags {
    height: min(40vh, 290px);
  }

  .catalog {
    margin-top: 56px;
  }

  .catalog__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .catalog__header p {
    max-width: none;
  }

  .cta-banner__actions {
    width: 100%;
  }

  .cta-banner__actions .btn {
    flex: 1 1 160px;
  }

  .site-footer {
    flex-direction: column;
    gap: var(--space-4);
  }

  .footer-nav {
    justify-content: flex-start;
  }
}