/* 1. Variables y base: rem para tamaños y espacios; porcentajes para el ancho. */
:root {
  --red: #cd1821;
  --ink: #070809;
  --muted: #505660;
  --line: #e7eaf0;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --content-width: 90rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #fff;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible {
  outline: .1875rem solid #efaf27;
  outline-offset: .25rem;
}
img { display: block; max-inline-size: 100%; block-size: auto; }

/* 2. Navegación: logo, menú y acceso comparten una fila flexible.
   El subtítulo del logo y el indicador activo permanecen en el flujo. */
.header { background: linear-gradient(110deg, #ce1b22, #c91720); color: #fff; }
.nav-wrap {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  max-inline-size: calc(var(--content-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding: .875rem var(--gutter);
}
.brand {
  display: flex;
  flex-direction: column;
  flex: 0 1 15rem;
  min-inline-size: 10rem;
  padding: .375rem .625rem 0;
  border: .0625rem solid #fff;
  font-size: clamp(1.625rem, 2vw, 2rem);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.brand small {
  align-self: flex-start;
  padding: .2em .25em;
  margin-block-end: -.7em;
  background: #cd1921;
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .3em;
  line-height: 1;
}
nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2vw, 2rem);
  margin-inline-start: auto;
}
nav a, nav button {
  padding: .875rem 0;
  border: 0;
  border-block-end: .0625rem solid transparent;
  background: none;
  color: inherit;
  font-size: .875rem;
  white-space: nowrap;
}
nav a[aria-current] { border-block-end-color: currentColor; }
nav button:hover, .account-button:hover { opacity: .8; }
.account-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 0 0 clamp(1rem, 2vw, 2rem);
  border: 0;
  border-inline-start: .0625rem solid #ffffff65;
  background: none;
  color: inherit;
}
.account-button svg {
  inline-size: 1.8125rem;
  block-size: 1.8125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.menu-toggle { display: none; }

/* 3. Banner: dos elementos Flexbox sin superposición ni alturas fijas.
   La imagen crece con su columna y conserva su proporción original. */
.hero { background: #fff; }
.hero-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2.5rem);
  padding: clamp(3rem, 5vw, 6rem) var(--gutter);
  background: #f5f7f9 url("fondo-banner.png") center / cover no-repeat;
}
.copy {
  order: 0;
  flex: 1 1 42%;
  min-inline-size: 0;
  max-inline-size: 40rem;
}
.hero-laptop {
  order: 1;
  flex: 1 1 54%;
  min-inline-size: 0;
  inline-size: 54%;
  max-inline-size: 49rem;
  align-self: center;
  object-fit: contain;
}
.eyebrow {
  margin: 0 0 1.375rem;
  color: var(--red);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .25em;
  line-height: 1.5;
}
h1 {
  margin: 0;
  font-size: clamp(2rem, 1rem + 2vw, 3.5rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.04em;
  overflow-wrap: break-word;
}
/* El ancho disponible controla los saltos, incluso con texto ampliado. */
.title-break, .desktop-break { display: none; }
.title-rule {
  inline-size: min(40%, 13.125rem);
  block-size: .25rem;
  margin-block: 1.625rem 1.375rem;
  background: var(--red);
}
.hero-subtitle {
  margin: 0 0 1rem;
  color: #434952;
  font-size: clamp(1.0625rem, .8rem + .5vw, 1.375rem);
  font-weight: 650;
  line-height: 1.4;
}
.intro {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, .8rem + .35vw, 1.25rem);
  line-height: 1.5;
}

/* 4. Beneficios: las tarjetas saltan de fila cuando falta espacio.
   Cada icono mantiene su tamaño; el texto ocupa el ancho restante. */
.benefits {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 2vw, 2rem);
  padding: clamp(1.75rem, 3vw, 3rem) var(--gutter);
  background: #f9fafb;
}
.benefits article {
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
  flex: 1 1 18rem;
  min-inline-size: 0;
}
.benefits article > div { min-inline-size: 0; max-inline-size: 30rem; }
.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 clamp(3.5rem, 4vw, 4.0625rem);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--red);
  background: #fff0f3;
  font-size: 2rem;
}
.benefits h2 {
  margin: .2rem 0 .375rem;
  font-size: clamp(1.0625rem, .8rem + .5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
}
.benefits p {
  margin: 0;
  color: #555b65;
  font-size: clamp(.875rem, .7rem + .35vw, 1.0625rem);
  line-height: 1.5;
}

/* 5. Ventanas: el botón de cierre también participa en el flujo Flexbox.
   El navegador gestiona la posición de dialog; no se fija su ubicación. */
dialog {
  inline-size: min(31.25rem, calc(100% - 2rem));
  max-block-size: calc(100dvh - 2rem);
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border: 0;
  border-radius: 1.125rem;
  overflow: auto;
  box-shadow: 0 1.875rem 6.25rem #0003;
}
dialog[open] { display: flex; flex-direction: column; align-items: flex-start; }
dialog::backdrop { background: #101c2c99; }
.close {
  align-self: flex-end;
  padding: 0 .25rem;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.8125rem;
  line-height: 1;
}
dialog h2 { margin: 0; font-size: 1.6875rem; line-height: 1.25; }
dialog > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.primary {
  padding: .9375rem 1.3125rem;
  border: .0625rem solid var(--red);
  border-radius: .5rem;
  background: var(--red);
  color: #fff;
  font-size: .875rem;
  font-weight: 650;
}
.primary:hover { background: #ac111a; }

/* 6. Tableta y móvil: menú desplegable y banner apilado.
   El punto de cambio también coincide con el cierre del menú en JavaScript. */
@media (max-width: 47.5rem) {
  .nav-wrap { flex-wrap: wrap; gap: 1rem; padding-block: 1rem 1.375rem; }
  .brand { flex: 0 1 11rem; font-size: 1.625rem; }
  .account-button { margin-inline-start: auto; padding: 0; border: 0; }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;
    padding: .25rem .5rem;
    border: .0625rem solid #ffffff80;
    border-radius: .3125rem;
    background: none;
    color: #fff;
    font-size: 1.25rem;
  }
  nav {
    display: none;
    flex: 1 0 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }
  nav.open { display: flex; }
  nav a, nav button { padding: .8125rem 0; text-align: start; white-space: normal; }
  nav a[aria-current] { border-block-end-color: transparent; font-weight: 700; }
  .hero-main { flex-direction: column; gap: 1.5rem; padding-block: 2.375rem 1.25rem; }
  .copy { flex: 0 1 auto; inline-size: 100%; max-inline-size: 38rem; }
  .hero-laptop { flex: 0 1 auto; inline-size: 100%; max-inline-size: 34.375rem; }
  .eyebrow { font-size: .6875rem; }
  h1 { font-size: clamp(1.875rem, 1.2rem + 3vw, 2.75rem); }
  .title-rule { inline-size: 9rem; margin-block: 1.375rem 1.125rem; }
  .benefits { padding-block: 1.625rem; }
}

/* Respeta la preferencia del usuario de reducir el movimiento. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Pantallas estrechas: el logo dispone de su propia fila para evitar desbordes
   al aumentar el tamaño de letra del navegador. */
@media (max-width: 24rem) {
  .brand { flex-basis: 100%; min-inline-size: 0; max-inline-size: 15rem; }
  .account-button { margin-inline-start: 0; }
  .menu-toggle { margin-inline-start: auto; }
}
.copy, .benefits article > div, dialog { overflow-wrap: anywhere; }

/* Sección independiente: el puente de perfiles.js adapta su altura real. */
.profiles-frame { display: block; inline-size: 100%; border: 0; }

/* Perfil mayorista independiente: altura sincronizada por mayorista.js. */
.wholesale-frame { display: block; inline-size: 100%; border: 0; }

/* Perfil distribuidor: altura sincronizada con su contenido independiente. */
.distributor-frame { display: block; inline-size: 100%; border: 0; }

/* Perfil cliente: altura sincronizada con su contenido independiente. */
.client-frame { display: block; inline-size: 100%; border: 0; }

/* Alta y activación: altura sincronizada con el componente independiente. */
.activation-frame { display: block; inline-size: 100%; border: 0; }

/* Soporte técnico: altura sincronizada con su contenido independiente. */
.support-frame { display: block; inline-size: 100%; border: 0; }