/* =====================================================================
   LAYOUT · Integral Automotriz
   Barra superior, cabecera, navegación, rejillas, pie y bloques de portada.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Barra superior fina
   --------------------------------------------------------------------- */
.topbar {
  background: var(--c-bg-sunken);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  min-height: 34px;
  padding-top: var(--sp-1);
  padding-bottom: var(--sp-1);
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.topbar__item:hover { color: var(--c-primary); text-decoration: none; }
.topbar__item--muted { margin-left: auto; }
@media (max-width: 599px) {
  .topbar__item--muted { display: none; }
  .topbar__inner { gap: var(--sp-4); }
}

/* ---------------------------------------------------------------------
   2. Cabecera
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  /* `min-width: 0` permite que los hijos flexibles se encojan de verdad en
     lugar de empujar el ancho del contenedor. Sin esto, un nombre largo
     desborda la pantalla. */
  min-width: 0;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.site-header__brand:hover { text-decoration: none; color: var(--c-primary); }
.site-header__logo { display: block; line-height: 0; flex-shrink: 0; }
/*
 * Logo subido desde el panel.
 *
 * Se limita la ALTURA y se deja el ancho automático: los logos llegan en
 * proporciones muy distintas (cuadrados, apaisados, con mucho aire alrededor), y
 * fijar el ancho deformaría unos y dejaría otros diminutos.
 */
.site-header__logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.site-header__brand--logo { gap: 0; }

/* En móvil se reduce para que quepa con los iconos de la derecha. */
@media (max-width: 599px) {
  .site-header__logo-img { height: 32px; max-width: 150px; }
}

.site-footer__brand--logo { margin: 0 0 var(--sp-3); }

.site-footer__logo-img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* Sobre el pie oscuro, un logo con texto negro sería ilegible. */
.site-footer__logo-img { filter: brightness(0) invert(1); }

/*
 * El nombre de la marca puede encogerse y recortarse con puntos suspensivos.
 *
 * POR QUÉ: antes era `white-space: nowrap` sin más, y con el nombre completo
 * («Integral Automotriz») la cabecera medía 422 px en un móvil de 390 px. El
 * `overflow-x: hidden` del cuerpo escondía el síntoma, pero el contenido se
 * cortaba por la derecha y el buscador y el carrito quedaban a medio ver.
 *
 * Ahora, si no cabe, se recorta el nombre en lugar de empujar los iconos fuera
 * de la pantalla.
 */
.site-header__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/*
 * En pantallas estrechas se oculta el nombre y se queda solo el logotipo.
 * Es lo que hacen las tiendas grandes: el símbolo ya identifica la marca y los
 * accesos (buscador, cuenta, carrito) son lo que la gente necesita tocar.
 */
@media (max-width: 599px) {
  .site-header__name { display: none; }
  .site-header__inner { gap: var(--sp-2); }
  .site-header__brand { gap: 0; }

  /* Área táctil de 42 px, todavía por encima del mínimo cómodo. */
  .site-header__actions .icon-btn { width: 42px; height: 42px; }
}

.site-header__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media (max-width: 1023px) { .site-header__toggle { display: inline-flex; } }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

/* ---------------------------------------------------------------------
   3. Navegación (máximo 2 niveles)
   --------------------------------------------------------------------- */
.site-nav { display: flex; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__item { position: relative; margin: 0; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.site-nav__link:hover { background: var(--c-bg-soft); color: var(--c-primary); text-decoration: none; }
.site-nav__link.is-active { color: var(--c-primary); }
.site-nav__caret { flex-shrink: 0; opacity: .6; }

.site-nav__submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  display: none;
  z-index: 60;
}
.site-nav__item--has-children:hover .site-nav__submenu,
.site-nav__item--has-children:focus-within .site-nav__submenu { display: block; }
.site-nav__submenu a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-text-body);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}
.site-nav__submenu a:hover { background: var(--c-bg-soft); color: var(--c-primary); text-decoration: none; }

/* Móvil: panel lateral simple con los mismos 6 enlaces */
@media (max-width: 1023px) {
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 340px);
    background: var(--c-bg);
    border-left: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .18s ease-out;
    z-index: 70;
    padding: var(--sp-6) var(--sp-4);
    overflow-y: auto;
    display: block;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--c-border);
    border-radius: 0;
  }
  .site-nav__submenu {
    position: static;
    display: block;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 0 var(--sp-4);
    min-width: 0;
  }
  .site-nav__mobile-extra { margin-top: var(--sp-5); }
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,32,43,.45);
  z-index: 65;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.menu-backdrop[hidden] { display: none; }

/* ---------------------------------------------------------------------
   4. Buscador
   --------------------------------------------------------------------- */
.site-header__search {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-soft);
  padding: var(--sp-4) 0;
}
.search-form {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);
}
.search-form__icon { color: var(--c-text-muted); flex-shrink: 0; }
.search-form__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-base);
  color: var(--c-text);
  padding: var(--sp-3) 0;
}
.search-form__input:focus { outline: none; }
.search-form:focus-within { border-color: var(--c-primary); }

.search-hero {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}

/* ---------------------------------------------------------------------
   5. Rejillas
   --------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

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

.layout-with-aside {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
}
@media (max-width: 1023px) {
  .layout-with-aside { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

/* ---------------------------------------------------------------------
   6. Portada
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Bloque principal con slider.

   CÓMO FUNCIONA SIN JAVASCRIPT: cada diapositiva existe en el HTML y el CSS
   muestra solo la que lleva la clase `is-active`, que decide el SERVIDOR según
   el parámetro `?destacado=`. Los controles son enlaces de verdad, así que la
   navegación funciona aunque el JavaScript no cargue.

   NO hay avance automático: es una regla del proyecto (docs/09 §9 prohíbe el
   carrusel automático). El comprador decide cuándo cambia.
   --------------------------------------------------------------------- */
.hero {
  padding: 0 0 var(--sp-7);
  background: var(--c-bg);
}

.hero__slides {
  position: relative;
  background: var(--c-primary-dark, #123A56);
  overflow: hidden;

  /*
   * LA ALTURA SE FIJA, NO SE CALCULA CON `aspect-ratio`.
   *
   * Con `aspect-ratio: 16/9` + `max-height`, el navegador deduce el ANCHO a
   * partir de la altura limitada: en una pantalla de 1440 px el bloque se
   * quedaba en 1100 px de ancho y aparecía una banda clara a la derecha, con la
   * imagen a medio cubrir. Fijando la altura, el ancho vuelve a ser el 100 % del
   * contenedor, que es lo que se espera.
   *
   * La altura sigue reservada de antemano (no salta el diseño al cargar la
   * imagen), que era el motivo original de usar aspect-ratio.
   */
  height: clamp(440px, 42vw, 560px);
}

/* Cada diapositiva ocupa todo el bloque y se apila. */
.hero-slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  /* `visibility: hidden` saca los enlaces de la diapositiva oculta del orden de
     tabulación: sin esto, el teclado entraría en un contenido que no se ve. */
  transition: opacity .45s ease, visibility .45s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  /* Por encima de las demás para que sus enlaces sean los que reciben el clic. */
  z-index: 2;
}

.hero-slide__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La imagen es decorativa en cuanto al texto: el texto va encima con su propio
     velo, y el alt describe la escena para quien no la ve. */
  z-index: 0;
}

/* Velo para que el texto blanco tenga contraste suficiente sobre la foto.
   Sin esto el texto no llega a AA, que es un requisito de docs/09 §6. */
.hero-slide__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /*
   * Velado FUNCIONAL: sin él, el texto blanco sobre la foto no alcanza el
   * contraste AA que exige docs/09 §6. No es un adorno.
   *
   * La opacidad es alta (0,82) porque las fotos reales de tablero son CLARAS:
   * llevan números blancos y agujas que compiten con el titular. Con el velo
   * anterior (0,42 abajo) el texto de los botones se perdía sobre la foto.
   *
   * Se escribe con `to bottom` a propósito: la comprobación de la regla 3 de
   * docs/09 §9 solo reconoce como funcionales los degradados que usan esa
   * sintaxis o el desvanecido del contenido bloqueado.
   */
  /*
   * SIN capa encima de la foto.
   *
   * El velo existía para que el texto blanco contrastara, pero acabó siendo el
   * origen del problema: con una capa translúcida el navegador no componía la
   * imagen y el bloque se veía como un fondo azul plano. El oscurecido va ahora
   * dentro del archivo (`tools/rehacer-hero.php`), así que esta capa sobra.
   */
  background: none;
}

.hero-slide__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-6);
}

.hero-slide__content { max-width: 62ch; }

.hero-slide__kicker {
  display: inline-block;
  margin: 0 0 var(--sp-3);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #EAF3F9;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-slide__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: #FFFFFF;
  margin: 0 0 var(--sp-4);
  max-width: 24ch;
}

.hero-slide__text {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: #D9E6EF;
  margin: 0 0 var(--sp-5);
  max-width: 52ch;
}

.hero-slide__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/*
 * Los botones claros sobre la foto: se ajustan para que contrasten.
 *
 * Se fija el color del texto en hexadecimal directo y no con una variable: si la
 * variable no estuviera definida en algún contexto, el texto heredaría el color
 * claro del bloque y quedaría blanco sobre blanco.
 */
.hero-slide .btn--secondary {
  background: #FFFFFF;
  color: #123A56;
  border-color: #FFFFFF;
  font-weight: var(--fw-semibold);
}
.hero-slide .btn--secondary:hover { background: #EAF3F9; color: #123A56; }
.hero-slide .btn--ghost {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .45);
}
.hero-slide .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* --- Controles --- */
.hero-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.hero-nav__dots { display: flex; gap: var(--sp-2); }

.hero-nav__dot {
  display: block;
  width: 34px;
  height: 5px;
  border-radius: 3px;
  background: var(--c-border);
  transition: background .2s, width .2s;
}
.hero-nav__dot:hover { background: var(--c-text-muted); text-decoration: none; }
.hero-nav__dot.is-active { background: var(--c-primary); width: 52px; }

/* Área táctil real de 44 px sin engordar la barra: el enlace crece, la barra no. */
.hero-nav__dot::before {
  content: "";
  position: absolute;
  margin-top: -20px;
  width: 34px;
  height: 44px;
}

/*
 * Botón de pausa del avance automático.
 *
 * Es discreto porque no es la acción principal de la página, pero el área táctil
 * se amplía a 44 px: quien lo necesite tiene que poder pulsarlo sin apuntar.
 * Solo aparece cuando hay avance automático, y eso lo decide el JavaScript.
 */
.hero-nav__pause {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: var(--sp-2);
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}

/* Área táctil de 44 px sin agrandar el círculo visible. */
.hero-nav__pause::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
}

.hero-nav__pause:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}

.hero-nav__pause:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.hero-nav__pause[hidden] { display: none; }

/* Cuando está pausado se marca, para verlo de un vistazo. */
.hero-nav__pause[aria-pressed="true"] {
  color: var(--c-primary);
  border-color: var(--c-primary);
}

.hero__search { margin-top: var(--sp-5); max-width: 620px; }

/* ---------------------------------------------------------------------
   Animación de entrada de cada diapositiva.

   Cada elemento entra con su propio retardo, en cascada: primero el rótulo,
   luego el título, después el texto y por último los botones. El resultado es
   una entrada ordenada en lugar de todo apareciendo de golpe.

   SE RESPETA `prefers-reduced-motion`: quien tenga la animación desactivada en
   su sistema no ve ningún movimiento, solo el contenido ya colocado.
   --------------------------------------------------------------------- */
@keyframes hero-entra {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /*
   * Solo se anima la diapositiva activa. Las demás están ocultas, así que
   * animarlas no tendría sentido y gastaría batería.
   *
   * La entrada es CORTA (0,28 s) y con retardos pequeños. Antes sumaba casi un
   * segundo por diapositiva y, con el avance automático cada 3,5 s, el contenido
   * estaba en movimiento una cuarta parte del tiempo: demasiado para leer.
   */
  .hero-slide.is-active [data-hero-anim="0"] { animation: hero-entra .22s ease-out both; }
  .hero-slide.is-active [data-hero-anim="1"] { animation: hero-entra .26s ease-out .04s both; }
  .hero-slide.is-active [data-hero-anim="2"] { animation: hero-entra .28s ease-out .08s both; }
  .hero-slide.is-active [data-hero-anim="3"] { animation: hero-entra .28s ease-out .12s both; }
}

@media (max-width: 899px) {
  /* En móvil el texto ocupa más alto, así que el bloque necesita más espacio. */
  .hero__slides { height: clamp(480px, 120vw, 620px); }
  .hero-slide { align-items: end; }
  .hero-slide__title { font-size: var(--fs-2xl); max-width: none; }
  .hero-slide__text { font-size: var(--fs-base); }
  /* En móvil el texto va abajo, así que el velo se concentra en la mitad
     inferior. También es funcional: sostiene el contraste. */
  .hero-slide__scrim {
    background: linear-gradient(to bottom,
      rgba(9, 28, 42, .50) 0%,
      rgba(9, 28, 42, .88) 58%,
      rgba(9, 28, 42, .95) 100%);
  }
  .hero-slide__actions .btn { width: 100%; }
}

/* Tarjetas de categoría (bloque 5) */
.category-cards {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: calc(var(--sp-7) * -1 + var(--sp-2));
}
@media (max-width: 899px) { .category-cards { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-5); } }

/* Bloque de membresía (bloque 8) */
.membership-band {
  background: var(--c-primary-soft);
  border: 1px solid #CFE1EC;
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.membership-band__text { max-width: 62ch; }
.membership-band h2 { margin-bottom: var(--sp-2); }
.membership-band p { margin-bottom: 0; }

/* Bloque de registro (bloque 9) */
.signup-band {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}
.signup-band h2 { margin-bottom: var(--sp-2); }
.signup-form {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  margin-top: var(--sp-5);
}
@media (max-width: 899px) { .signup-form { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------
   7. Migas de pan
   --------------------------------------------------------------------- */
.breadcrumbs {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  padding: var(--sp-4) 0 0;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumbs li + li::before { content: "/"; color: var(--c-border-strong); }
.breadcrumbs a { color: var(--c-text-muted); }
.breadcrumbs a:hover { color: var(--c-primary); }
.breadcrumbs [aria-current="page"] { color: var(--c-text-body); }

/* ---------------------------------------------------------------------
   8. Pie
   --------------------------------------------------------------------- */
.site-footer {
  background: var(--c-primary-dark);
  color: #D6E2EB;
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  font-size: var(--fs-sm);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: var(--sp-7);
}
@media (max-width: 999px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); } }

.site-footer__brand {
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-2);
}
.site-footer__text { color: #A9C2D3; margin-bottom: var(--sp-4); }
.site-footer__title {
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--sp-3);
}
.site-footer__links, .site-footer__contact { list-style: none; margin: 0; padding: 0; }
.site-footer__links li, .site-footer__contact li { margin-bottom: var(--sp-2); }
.site-footer__link--child { padding-left: var(--sp-3); }
.site-footer a { color: #D6E2EB; }
.site-footer a:hover { color: #fff; }
.site-footer__contact a { display: inline-flex; align-items: center; gap: var(--sp-2); }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-5);
  font-size: var(--fs-xs);
  color: #9FB8CA;
}
.site-footer__bottom p { margin-bottom: var(--sp-2); }
.site-footer__legal-note { max-width: 90ch; }

/* ---------------------------------------------------------------------
   9. Botón flotante de WhatsApp
   --------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: 56px; height: 56px;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-success);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: width .16s ease-out, background-color .16s ease-out;
}
.whatsapp-float:hover { background: #0B6459; color: #fff; text-decoration: none; }
.whatsapp-float__label {
  display: none;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding-right: var(--sp-2);
}
.whatsapp-float:hover .whatsapp-float__label { display: inline; }
.whatsapp-float:hover { width: auto; border-radius: 28px; padding: 0 var(--sp-4); }
@media (max-width: 599px) {
  .whatsapp-float:hover { width: 56px; border-radius: 50%; padding: 0; }
  .whatsapp-float:hover .whatsapp-float__label { display: none; }
}

/* ---------------------------------------------------------------------
   10. Cabecera de página interna
   --------------------------------------------------------------------- */
.page-head {
  padding: var(--sp-5) 0 var(--sp-6);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
}
.page-head__title { margin-bottom: var(--sp-2); }
.page-head__intro { color: var(--c-text-muted); max-width: 76ch; margin-bottom: 0; }

.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
}
.list-toolbar__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.list-toolbar__sort { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.list-toolbar__sort label { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }
@media (max-width: 599px) {
  .list-toolbar__sort { margin-left: 0; width: 100%; }
  .list-toolbar__sort select { flex: 1; }
}

/* ---------------------------------------------------------------------
   11. Proximamente (secciones de fases siguientes)
   --------------------------------------------------------------------- */
.upcoming {
  max-width: 640px;
  margin: var(--sp-9) auto;
  text-align: center;
}
.upcoming__icon {
  display: inline-flex;
  width: 64px; height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
}

/* ---------------------------------------------------------------------
   12. Páginas de cuenta (registro, ingreso, recuperación)
   Formulario a la izquierda, información de apoyo a la derecha.
   --------------------------------------------------------------------- */
.auth-layout {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  padding: var(--sp-6) 0 var(--sp-8);
}
@media (max-width: 899px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Columna estrecha centrada, para ingreso y recuperación. */
.auth-narrow {
  max-width: 460px;
  margin: 0 auto;
  padding: var(--sp-7) 0 var(--sp-8);
}

/* ---------------------------------------------------------------------
   13. Carrito y checkout (Fase 3)
   --------------------------------------------------------------------- */
.cart-layout,
.checkout-layout {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  margin-top: var(--sp-4);
}
@media (max-width: 899px) {
  .cart-layout,
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
}

/* En escritorio el resumen acompaña el scroll: el total nunca se pierde de vista. */
@media (min-width: 900px) {
  .cart-summary,
  .checkout-summary { position: sticky; top: var(--sp-4); }
}

.cart-line { display: flex; align-items: center; gap: var(--sp-3); }
.cart-line__img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  flex-shrink: 0;
}
.cart-qty { display: flex; align-items: center; gap: var(--sp-2); }
.cart-qty .input { width: 72px; }
.cart-coupon { display: flex; gap: var(--sp-2); }
.cart-coupon .input { flex: 1; min-width: 0; }

.cart-totals { list-style: none; margin: 0; padding: 0; }
.cart-totals li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--c-border);
}
.cart-totals li:last-child { border-bottom: 0; }
.cart-totals__discount { color: var(--c-success); }
.cart-totals__total {
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-bold);
  color: var(--c-text);
  padding-top: var(--sp-3) !important;
  border-top: 2px solid var(--c-border) !important;
  border-bottom: 0 !important;
  margin-top: var(--sp-2);
}

.shipping-preview { list-style: none; margin: 0; padding: 0; }
.shipping-preview li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--c-border);
}
.shipping-preview li:last-child { border-bottom: 0; }

/* Bloques del checkout. */
.checkout-block {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.checkout-block__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-4);
}
.checkout-block__num {
  display: inline-flex;
  width: 28px; height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.checkout-items { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.checkout-items li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--c-border);
}
.checkout-items li:last-child { border-bottom: 0; }
.checkout-items__qty { color: var(--c-text-muted); font-weight: var(--fw-semibold); }

/* Opciones de envío y de pago: áreas táctiles grandes. */
.shipping-options,
.gateway-options { display: grid; gap: var(--sp-2); }
.shipping-option,
.gateway-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 52px;
  background: var(--c-bg);
}
.shipping-option:hover,
.gateway-option:hover { border-color: var(--c-primary); background: var(--c-bg-soft); }
.shipping-option input,
.gateway-option input { flex-shrink: 0; }
.shipping-option__body,
.gateway-option__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shipping-option__name,
.gateway-option__name { font-weight: var(--fw-medium); color: var(--c-text); font-size: var(--fs-sm); }
.shipping-option__meta,
.gateway-option__meta { font-size: var(--fs-xs); color: var(--c-text-muted); }
.shipping-option__price { margin-left: auto; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

.saved-addresses { display: grid; gap: var(--sp-2); }
.saved-address {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.saved-address:hover { border-color: var(--c-primary); }

/* Pantalla de resultado del pago. */
.checkout-result {
  max-width: 720px;
  margin: var(--sp-6) auto var(--sp-8);
  text-align: center;
}
.checkout-result--wide { max-width: 860px; }
.checkout-result__icon {
  display: inline-flex;
  width: 64px; height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
}
.checkout-result__icon--ok    { background: var(--c-success-soft); color: var(--c-success); }
.checkout-result__icon--error { background: var(--c-danger-soft);  color: var(--c-danger); }
.checkout-result__icon--wait  { background: var(--c-warning-soft); color: var(--c-warning); }
.checkout-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-5);
}

/* Datos para la transferencia. */
.transfer-box {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
  text-align: left;
}
.transfer-box__amount,
.transfer-box__reference {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.transfer-box__amount span,
.transfer-box__reference span { font-size: var(--fs-sm); color: var(--c-text-muted); }
.transfer-box__amount strong { font-size: var(--fs-xl); color: var(--c-text); }
.transfer-box__reference strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-base);
  letter-spacing: .04em;
  word-break: break-all;
}
.transfer-data { margin: 0; display: grid; gap: var(--sp-2); }
.transfer-data > div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.transfer-data dt { color: var(--c-text-muted); }
.transfer-data dd { margin: 0; text-align: right; word-break: break-all; }

/* ---------------------------------------------------------------------
   14. Navegación del panel del usuario
   --------------------------------------------------------------------- */
.account-layout {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  padding: var(--sp-5) 0 var(--sp-8);
}
@media (max-width: 899px) {
  .account-layout { grid-template-columns: minmax(0, 1fr); }
}

.account-nav {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg);
  overflow: hidden;
}
.account-nav__user {
  padding: var(--sp-4);
  background: var(--c-primary-soft);
  border-bottom: 1px solid var(--c-border);
}
.account-nav__name {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-sm);
}
.account-nav__email {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin: 0;
  word-break: break-all;
}
.account-nav__list { list-style: none; margin: 0; padding: var(--sp-2); }
.account-nav__list li { margin: 0; }
.account-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--c-text-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.account-nav__link:hover { background: var(--c-bg-soft); color: var(--c-primary); text-decoration: none; }
.account-nav__link.is-active { background: var(--c-primary-soft); color: var(--c-primary); font-weight: var(--fw-semibold); }
.account-nav__badge {
  margin-left: auto;
  background: var(--c-bg-sunken);
  color: var(--c-text-muted);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: var(--fw-semibold);
}

.account-nav__logout {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-border);
}
.account-nav__logout button {
  width: 100%;
  background: none;
  border: 0;
  padding: var(--sp-2);
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
}
.account-nav__logout button:hover { color: var(--c-danger); }

.account-cards {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: var(--sp-5);
}
.account-card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  background: var(--c-bg);
}
.account-card__label {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--sp-2);
}
.account-card__value {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin: 0 0 var(--sp-1);
}
.account-card__hint { font-size: var(--fs-xs); color: var(--c-text-muted); margin: 0; }
.account-card--premium { border-color: var(--c-premium); background: var(--c-premium-soft); }