/* ============================================================================
   COMPONENTS.CSS — Piezas reutilizables
   ============================================================================
   Índice:
     1. Botones
     2. Badges / píldoras
     3. Barra de anuncio
     4. Header + navegación + mega-menú
     5. Menú móvil
     6. Cards (base, métrica, testimonio, recurso, caso de estudio)
     7. Marquee de logos
     8. Tabs de producto
     9. Prompt / buscador
    10. Tabla-mock (UI falsa de producto)
    11. Acordeón (FAQ)
    12. Footer
    13. Toggle de tema
   ========================================================================== */


/* ==========================================================================
   1. BOTONES
   --------------------------------------------------------------------------
   Variantes: .btn--primary (negro), .btn--secondary (borde), .btn--ghost,
              .btn--accent (azul), .btn--invert (para fondos oscuros)
   Tamaños:   .btn--sm, .btn--lg
   ====================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  line-height: 1.3;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    transform        var(--dur-fast) var(--ease-spring),
    box-shadow       var(--dur-fast) var(--ease-out);
}

/* Micro-interacción: leve elevación al hover, hundido al hacer click */
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: var(--dur-instant); }

.btn--primary {
  background: var(--color-text);
  color: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { box-shadow: var(--shadow-md); }

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--secondary:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-subtle);
}

.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { background: var(--color-accent-hover); }

.btn--ghost { background: transparent; color: var(--color-text); }
.btn--ghost:hover { background: var(--color-bg-subtle); }

.btn--invert { background: var(--oat-100); color: var(--oat-500); }
.btn--invert:hover { background: #fff; }

.btn--sm { font-size: var(--text-sm); padding: 0.5em 0.9em; }
.btn--lg { font-size: var(--text-lg); padding: 0.8em 1.4em; }
.btn--block { width: 100%; }

/* Enlace con flecha que se desplaza al hover (patrón muy usado por Clay) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow svg { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover svg,
/* Dentro de una card enlazada el hover ocurre sobre la card, no sobre el
   propio .link-arrow, así que hay que propagarlo. */
.media-card:hover .link-arrow svg { transform: translateX(4px); }


/* ==========================================================================
   2. BADGES / PÍLDORAS
   ====================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3em 0.7em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: var(--border-thin);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.badge--accent { background: var(--color-accent-soft); border-color: transparent; color: var(--color-accent); }
.badge--lime   { background: var(--lime-100);  border-color: transparent; color: var(--lime-400); }
.badge--ube    { background: var(--ube-100);   border-color: transparent; color: var(--ube-400); }
.badge--pink   { background: var(--dragonfruit-100); border-color: transparent; color: var(--dragonfruit-400); }

/* Punto que late — para "en vivo" / "tiempo real" */
.badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2s var(--ease-in-out) infinite;
}


/* ==========================================================================
   3. BARRA DE ANUNCIO (evento / novedad)
   ====================================================================== */

.announce {
  background: var(--oat-500);
  color: var(--oat-100);
  font-size: var(--text-sm);
  height: var(--announce-height);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.announce__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); width: 100%;
}
.announce__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--lime-200);
}
.announce a { display: inline-flex; align-items: center; gap: var(--space-2); }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }
.announce__close {
  position: absolute; right: var(--container-pad);
  color: inherit; opacity: 0.6; line-height: 0;
}
.announce__close:hover { opacity: 1; }
.announce { position: relative; }

@media (max-width: 48rem) {
  .announce__label { display: none; }
  .announce { font-size: var(--text-xs); }
}


/* ==========================================================================
   4. NAVBAR FLOTANTE + MEGA-MENÚ QUE SE EXPANDE
   --------------------------------------------------------------------------
   ANATOMÍA (esto es lo que lo hace distinto de un dropdown normal):

     .nav-wrap            sticky top:0
       .nav__container    95% de ancho, centrado → deja aire a los lados
         .nav__dropdown   position:absolute; top:0; height:0   ← DETRÁS
         .nav__layout     la fila visible (logo, enlaces, CTAs) ← DELANTE

   El panel del mega-menú NO flota por debajo de la barra: está detrás de ella
   y lo único que se anima es su ALTURA (0 → alto del panel activo). Como
   ambos comparten fondo blanco y las mismas esquinas inferiores, el efecto es
   que la propia barra "crece" para contener el menú. Al pasar de un menú a
   otro la altura interpola, así que el contenedor se estira o encoge en vivo.

   La altura la mide main.js → initMegaMenu().
   ====================================================================== */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__container {
  width: 95%;
  max-width: 125rem;   /* mucho más ancho que el contenido (80rem): a propósito */
  margin-inline: auto;
  position: relative;
}

.nav__layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-height);
  padding: 0.47rem 1.5rem 0.53rem;
  background: var(--color-surface);
  border: 0.5px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  border-top-width: 0;   /* va pegado al borde superior de la ventana */
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  transition: border-color var(--dur-fast) ease-out,
              box-shadow var(--dur-fast) ease-out;
}
.nav-wrap.is-scrolled .nav__layout { box-shadow: var(--shadow-sm); }

/* --- Marca --------------------------------------------------------------- */

.nav__brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  flex: none;
}
.nav__brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  transition: transform var(--dur-base) var(--ease-spring);
}
.nav__brand:hover .nav__brand-mark { transform: rotate(-8deg) scale(1.06); }

/* --- Fila de enlaces ------------------------------------------------------ */

.nav__list { display: flex; align-items: center; gap: 0.13rem; }

/* position:static es OBLIGATORIO: el panel se posiciona contra
   .nav__container, no contra el <li>. */
.nav__item { position: static; }

.nav__trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.25em;
  padding: 0.65rem 0.5rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: 0.625rem;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-out);
}
/* Fondo en píldora que aparece por opacidad (no por cambio de background:
   así no hay salto de color al entrar y salir). */
.nav__trigger::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--color-bg-subtle);
  opacity: 0;
  transition: opacity var(--dur-fast) cubic-bezier(0.075, 0.82, 0.165, 1);
}
.nav__trigger:hover::before { opacity: 1; }
/* Con el menú abierto, el disparador se atenúa: señala cuál está activo sin
   añadir subrayados ni cambiar de fondo. */
.nav__item[data-open="true"] .nav__trigger { color: var(--color-text-muted); }
.nav__trigger svg { transition: transform var(--dur-fast) var(--ease-out); position: relative; z-index: 1; }
.nav__item[data-open="true"] .nav__trigger svg { transform: rotate(180deg); }

/* Text roll: dos copias de la etiqueta apiladas dentro de una máscara.
   Al hover sube una y entra la otra. */
.nav__roll {
  position: relative; z-index: 1;
  display: block;
  overflow: clip;
  line-height: 1.5;
}
.nav__roll span {
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__roll span:last-child { position: absolute; top: 100%; left: 0; }
.nav__trigger:hover .nav__roll span { transform: translateY(-100%); }

/* --- Acciones de la derecha ---------------------------------------------- */

.nav__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }

.nav__divider { width: 1px; height: 1.25rem; background: var(--color-border); }

/* Acceso al IVA Hub. Es el único CTA del navbar: "Planifica tu visita" se
   quitó de aquí (queda en el hero y en la sección de visita) para que la
   barra no compita con la foto de fondo. */
.nav__hub { flex: none; }

/* --- Píldora "EN VIVO" ----------------------------------------------------
   Oculta por defecto. Solo se muestra cuando <html data-live="true">, que es
   lo que pondrá el chequeo del canal de YouTube. Ver docs/PENDIENTES.md
   ---------------------------------------------------------------------- */

.nav__live { display: none; }

:root[data-live="true"] .nav__live {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.8em;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #fff;
  background: var(--pomegranate-300);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
:root[data-live="true"] .nav__live:hover { background: var(--pomegranate-400); transform: translateY(-1px); }

.nav__live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff;
  animation: pulse-dot 1.6s var(--ease-in-out) infinite;
}

/* --- Panel desplegable ---------------------------------------------------- */

.nav__dropdown {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  width: 100%;
  height: 0;            /* main.js escribe aquí el alto del panel activo */
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  border-top-width: 0;
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  transition: height var(--dur-base) var(--ease-out);
}

.nav__panel {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  /* 5rem de padding superior = deja pasar la fila del navbar por encima */
  padding: 5rem clamp(0.75rem, 1vw, 1.5rem) 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.nav__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 60ms;   /* entra cuando el contenedor ya está creciendo */
}

.nav__panel-grid { display: flex; gap: 2rem; align-items: stretch; }
.nav__cols {
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.nav__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.nav__col-label {
  font-size: 0.625rem;      /* 10px — sí, tan pequeño como en el original */
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  padding: 0.45rem 0.31rem;
  margin-inline: -0.31rem;
  border-radius: 0.5rem;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { background: var(--color-bg-subtle); }

/* Chip de icono: 32×32 con fondo suave. Es lo que da a los menús de Clay su
   aire de "app" en vez de lista de enlaces. */
.nav__link-icon {
  flex: none;
  width: 2rem; height: 2rem;
  border-radius: 0.5rem;
  background: var(--color-bg-subtle);
  display: grid; place-items: center;
  color: var(--color-text-muted);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__link:hover .nav__link-icon { background: var(--color-accent-soft); color: var(--color-accent); }

/* display:block es necesario — son <span> dentro de un <a> flex y si no,
   título y descripción se pegan en la misma línea. */
.nav__link-title { display: block; font-size: 0.875rem; font-weight: 550; line-height: 1.4; }

/* Opcional: Clay muestra solo el título en su menú de Producto, así que el
   template hace lo mismo. Si quieres una línea de apoyo bajo cada enlace,
   añade <span class="nav__link-desc">…</span> junto al título. */
.nav__link-desc  { display: block; font-size: 0.8rem; line-height: 1.4; color: var(--color-text-muted); margin-top: 0.1rem; }

/* Tarjeta promocional del menú */
.nav__ad { flex: none; min-width: clamp(16rem, 12rem + 8vw, 21.88rem); }
.nav__ad-card {
  position: relative;
  display: block;
  width: 100%; height: 100%; min-height: 14rem;
  border-radius: 1rem;
  overflow: clip;
  color: #fff;
}
.nav__ad-bg { position: absolute; inset: 0; }
.nav__ad-bg svg { width: 100%; height: 100%; }
.nav__ad-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(#0000 14%, #00000073 77%);
}
.nav__ad-content {
  position: absolute; inset: 0; z-index: 2;
  padding: 1rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.25rem;
}
.nav__ad-label {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.85;
}
.nav__ad-title { font-size: 1rem; font-weight: 550; line-height: 1.3; }
.nav__ad-card:hover .nav__ad-bg { transform: scale(1.04); }
.nav__ad-bg { transition: transform var(--dur-slow) var(--ease-out); }


/* ==========================================================================
   5. MENÚ MÓVIL
   ====================================================================== */

.nav-toggle {
  display: none;
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.63rem;
  place-items: center;
  /* align-content: center es imprescindible. Sin él, las tres filas del grid
     se estiran para rellenar los 40px de alto y los trazos quedan a ~14.5px
     entre sí, así que el translateY(±7px) del estado abierto no los junta:
     en vez de una × sale un ">" torcido. */
  align-content: center;
  gap: 5px;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--color-bg-subtle); }

.nav-toggle__bar {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
/* La separación la da el `gap` del grid, no un margen: con el margen el
   cálculo de los 7px de la × no cuadraba. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: var(--nav-offset) 0 0 0;
  z-index: 99;
  background: var(--color-bg);
  padding: var(--space-5) var(--container-pad) var(--space-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.mobile-nav__group { border-bottom: var(--border-thin); }
.mobile-nav__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) 0; font-size: var(--text-h5); font-weight: var(--weight-medium);
  text-align: left;
}
.mobile-nav__trigger svg { transition: transform var(--dur-base) var(--ease-out); }
.mobile-nav__trigger[aria-expanded="true"] svg { transform: rotate(45deg); }
.mobile-nav__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.mobile-nav__panel > div { overflow: hidden; }
.mobile-nav__trigger[aria-expanded="true"] + .mobile-nav__panel { grid-template-rows: 1fr; }
.mobile-nav__panel a {
  display: block; padding: var(--space-2) 0; color: var(--color-text-muted); font-size: var(--text-sm);
}
.mobile-nav__panel a:hover { color: var(--color-text); }
.mobile-nav__cta { display: grid; gap: var(--space-3); margin-top: var(--space-6); }

/* En móvil el navbar se queda en lo mínimo: logo + hamburguesa. Todo lo
   demás (enlaces, IVA Hub, "planifica tu visita", "en vivo") vive dentro del
   menú desplegable, para que la barra no compita con la foto del hero. */
@media (max-width: 64rem) {
  .nav__list,
  .nav__divider,
  .nav__actions .btn,
  :root[data-live="true"] .nav__live { display: none; }
  .nav-toggle { display: grid; }
  .nav__layout { padding-inline: 1rem; }
  .nav__dropdown { display: none; }
}


/* ==========================================================================
   6. CARDS
   ====================================================================== */

.card {
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.card--flat { background: var(--color-bg-subtle); border-color: transparent; }

/* Métrica: número enorme + descripción + logo del cliente */
.metric-card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-5); min-height: 13rem;
}
/* En una sola columna, 13rem deja un hueco vacío demasiado grande */
@media (max-width: 38rem) { .metric-card { min-height: 0; } }
.metric-card__value {
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semibold);
}
.metric-card__label { color: var(--color-text-muted); font-size: var(--text-sm); }
.metric-card__logo { font-weight: var(--weight-semibold); letter-spacing: -0.02em; opacity: 0.75; }

/* Testimonio */
.quote-card { display: flex; flex-direction: column; gap: var(--space-5); height: 100%; }
.quote-card__text { font-size: var(--text-h5); line-height: 1.45; }
.quote-card__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.quote-card__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  background: var(--color-bg-subtle); color: var(--color-text-muted);
  flex-shrink: 0;
}
.quote-card__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.quote-card__role { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Card de recurso / caso de estudio con imagen arriba */
.media-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.media-card__media {
  aspect-ratio: 16 / 10; overflow: hidden; position: relative;
  background: var(--color-bg-subtle);
}
.media-card__media > * { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out); }
.media-card:hover .media-card__media > * { transform: scale(1.04); }
.media-card__body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.media-card__kicker {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}
.media-card__title { font-size: var(--text-h5); font-weight: var(--weight-semibold); }
.media-card__foot { margin-top: auto; padding-top: var(--space-3); }


/* ==========================================================================
   7. MARQUEE DE LOGOS
   --------------------------------------------------------------------------
   Dos pistas idénticas desplazándose -50%: bucle perfecto sin salto.
   El HTML duplica la lista con aria-hidden en la copia.
   ====================================================================== */

.marquee {
  overflow: hidden;
  position: relative;
  /* Difuminado en los bordes para que los logos entren y salgan suave */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }

.marquee__group { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding-inline: clamp(1rem, 2.5vw, 2rem); }
.marquee__logo {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.marquee__logo:hover { opacity: 1; color: var(--color-text); }


/* ==========================================================================
   7b. PARRILLA BENTO DE LOGOS
   --------------------------------------------------------------------------
   Reemplaza al típico "muro de logos": funde en una sola parrilla los logos
   de clientes, las métricas y los testimonios. Es el patrón de clay.com.

   EL SISTEMA
     La parrilla es de 12 huecos de ancho × 3 filas. Un hueco = una tarjeta de
     logo estándar. Cada tarjeta es hija DIRECTA de .bento__wall — no hay
     wrappers de layout. Su posición sale de cuatro atributos:

       data-col    en qué hueco empieza      1 – 12
       data-row    en qué fila               1, 2 o 3
       data-span   cuántos huecos ocupa      1 logo · 2 métrica · 3 cita
       data-tall   cuántas filas ocupa       vacío o 2

     Si dejas los atributos en blanco la tarjeta fluye en vez de anclarse:
     es seguro, pero una errata falla en silencio. Al editar, comprueba que
     las 36 celdas queden cubiertas.

   EL MURO ES MÁS ANCHO QUE LA PANTALLA a propósito: se desplaza en
   horizontal y los degradados de los bordes indican que hay más. Para que
   quepa entero, baja --unit-w o quita huecos.
   ====================================================================== */

.bento { position: relative; }

.bento__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Deja sitio al anillo de foco cuando se navega con teclado */
  padding-block: 2px;
}
.bento__scroll::-webkit-scrollbar { display: none; }

.bento__wall {
  /* Los dos únicos números espaciales del sistema */
  --unit-h: 5rem;                                  /* alto de una fila */
  --unit-w: clamp(7.5rem, 8.5vw, 10.05rem);        /* ancho de un hueco */
  --unit-gap: 0.75rem;

  display: grid;
  grid-template-rows: repeat(3, var(--unit-h));
  grid-auto-columns: var(--unit-w);
  grid-auto-flow: column dense;   /* solo lo usan las tarjetas sin atributos */
  gap: var(--unit-gap);
  align-items: stretch;
  align-content: stretch;
  width: max-content;
  padding-inline: var(--container-pad);
}

/* --- La tarjeta ----------------------------------------------------------
   Una sola regla de posicionamiento; lo de abajo son tablas de consulta. */

.bento-card {
  grid-column: var(--col, auto) / span var(--span, 1);
  grid-row:    var(--row, auto) / span var(--tall, 1);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  /* Sin bordes laterales: luz arriba, sombra abajo. Es la firma de Clay. */
  border-top: 1px solid var(--card-edge-top);
  border-bottom: 1px solid var(--card-edge-bottom);
  border-radius: 1.125rem;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out);
}
a.bento-card:hover { transform: translateY(-2px); }

/* Tablas de consulta. Generadas, no escritas a mano: si amplías el muro,
   añade filas siguiendo el patrón. */
.bento-card[data-row="1"] { --row: 1; }
.bento-card[data-row="2"] { --row: 2; }
.bento-card[data-row="3"] { --row: 3; }

.bento-card[data-tall="2"] { --tall: 2; }
.bento-card[data-tall="3"] { --tall: 3; }

.bento-card[data-span="1"] { --span: 1; }
.bento-card[data-span="2"] { --span: 2; }
.bento-card[data-span="3"] { --span: 3; }
.bento-card[data-span="4"] { --span: 4; }
.bento-card[data-span="5"] { --span: 5; }
.bento-card[data-span="6"] { --span: 6; }

.bento-card[data-col="1"]  { --col: 1; }
.bento-card[data-col="2"]  { --col: 2; }
.bento-card[data-col="3"]  { --col: 3; }
.bento-card[data-col="4"]  { --col: 4; }
.bento-card[data-col="5"]  { --col: 5; }
.bento-card[data-col="6"]  { --col: 6; }
.bento-card[data-col="7"]  { --col: 7; }
.bento-card[data-col="8"]  { --col: 8; }
.bento-card[data-col="9"]  { --col: 9; }
.bento-card[data-col="10"] { --col: 10; }
.bento-card[data-col="11"] { --col: 11; }
.bento-card[data-col="12"] { --col: 12; }
.bento-card[data-col="13"] { --col: 13; }
.bento-card[data-col="14"] { --col: 14; }
.bento-card[data-col="15"] { --col: 15; }
.bento-card[data-col="16"] { --col: 16; }

/* --- Contenido ------------------------------------------------------------
   Sustituye .bento__logo por un <img> de tu cliente cuando tengas los reales:
   <img class="bento__logo" src="…" alt="Cliente" height="24">
   ---------------------------------------------------------------------- */

.bento__logo {
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-text);
}
.bento__logo--sm { font-size: 0.8rem; color: var(--color-text-muted); }

/* Solo logo: centrado vertical, sin nada más */
.bento-card--logo { flex-direction: row; align-items: center; }

/* Métrica en una fila: marca a la izquierda, cifra a la derecha */
.bento-card--stat {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
/* Métrica en dos filas: hay sitio para cifra grande + descripción */
.bento-card--stat[data-tall="2"] {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

/* En las tarjetas altas, cifra y descripción van apiladas. Sin esto los dos
   <span> son inline y salen uno al lado del otro. */
.bento__statgroup { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.bento__value {
  font-size: clamp(1.15rem, 1.6vw, 1.75rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
/* En las tarjetas altas el "valor" puede ser texto ("Todas las edades"),
   no solo una cifra: ahí sí debe poder partirse en varias líneas. */
.bento-card--stat[data-tall="2"] .bento__value { white-space: normal; line-height: 1.15; }

.bento__label { font-size: 0.75rem; line-height: 1.3; color: var(--color-text-muted); }

/* Cita: el texto manda, la marca firma abajo */
.bento-card--quote { justify-content: space-between; }
.bento__quote {
  font-size: 0.8rem;
  line-height: 1.35;
  text-wrap: pretty;
}

/* --- Degradados de borde -------------------------------------------------
   Funden el muro con el fondo de la sección. Por eso el bento DEBE ir dentro
   de una .section--subtle: el degradado usa --color-bg-subtle. */

.bento__shade {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 5;
  width: clamp(2rem, 6%, 6rem);
  pointer-events: none;
}
.bento__shade--left  { left: 0;  background: linear-gradient(90deg,  var(--color-bg-subtle), transparent); }
.bento__shade--right { right: 0; background: linear-gradient(270deg, var(--color-bg-subtle), transparent); }

.bento__hint {
  display: flex; align-items: center; gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 48rem) {
  .bento__wall { --unit-h: 4.5rem; --unit-w: 8rem; }
  /* En las tarjetas altas, cifra y descripción van apiladas. Sin esto los dos
   <span> son inline y salen uno al lado del otro. */
.bento__statgroup { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.bento__value { font-size: 1.1rem; }
}

/* ==========================================================================
   8. TABS DE PRODUCTO
   --------------------------------------------------------------------------
   Patrón WAI-ARIA: role=tablist / role=tab / role=tabpanel.
   Navegación con flechas ←→ implementada en main.js.
   ====================================================================== */

.tabs__list {
  display: flex; gap: var(--space-2); flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin);
  margin-bottom: var(--space-6);
}
.tabs__list::-webkit-scrollbar { display: none; }

.tabs__tab {
  position: relative;
  padding: 0.55em 0.95em;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.tabs__tab:hover { color: var(--color-text); background: var(--color-bg-subtle); }
.tabs__tab[aria-selected="true"] { color: var(--color-text); background: var(--color-bg-subtle); }
/* Subrayado que se desliza entre tabs (posición calculada en main.js) */
.tabs__indicator {
  position: absolute; bottom: -1px; left: 0; height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.tabs__list-wrap { position: relative; }

.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; animation: tab-in var(--dur-slow) var(--ease-out) both; }


/* ==========================================================================
   9. PROMPT / BUSCADOR ("What do you want to build?")
   ====================================================================== */

.prompt {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.prompt:focus-within { border-color: var(--color-accent); box-shadow: var(--shadow-pop); }
.prompt__field { display: flex; align-items: flex-start; gap: var(--space-3); }
.prompt__input {
  flex: 1; border: none; background: none; outline: none; resize: none;
  font-size: var(--text-lg); line-height: 1.5; min-height: 3.4em; padding-top: 0.2em;
}
.prompt__input::placeholder { color: var(--color-text-muted); }
.prompt__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.prompt__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  padding: 0.35em 0.75em; font-size: var(--text-sm); border-radius: var(--radius-pill);
  border: var(--border-thin); color: var(--color-text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover, .chip.is-active {
  color: var(--color-text); border-color: var(--color-border-strong); background: var(--color-bg-subtle);
}


/* ==========================================================================
   10. TABLA-MOCK (UI de producto simulada)
   --------------------------------------------------------------------------
   Reemplaza estos mocks por capturas reales de tu producto cuando las tengas.
   ====================================================================== */

.mock {
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
}
.mock__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-thin);
  background: var(--color-bg-subtle);
}
.mock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.mock__title { font-size: var(--text-xs); color: var(--color-text-muted); margin-left: var(--space-2); font-family: var(--font-mono); }

.mock__table { width: 100%; border-collapse: collapse; }
.mock__table th {
  text-align: left; font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-4); border-bottom: var(--border-thin);
  white-space: nowrap;
}
.mock__table td {
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
  white-space: nowrap;   /* los datos no deben partirse */
}
/* …pero las celdas con frases sí. Sin esto, .mock { overflow: hidden } corta
   el texto a media palabra. Añade .is-prose a cualquier celda con prosa. */
.mock__table td.is-prose { white-space: normal; }
.mock__table tr:last-child td { border-bottom: none; }
.mock__table tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
.mock__table tbody tr:hover { background: var(--color-bg-subtle); }

.pill {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.15em 0.55em; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
}
/* Sobre fondos lime el texto va en el tono 500: el 400 (#7f7f00) solo da
   4.14:1 sobre #fcfee2 y estas etiquetas son de 0.8rem. */
.pill--green { background: var(--lime-100);  color: var(--lime-500); }
.pill--blue  { background: var(--blueberry-100); color: var(--blueberry-400); }
.pill--pink  { background: var(--dragonfruit-100); color: var(--dragonfruit-400); }
.pill--amber { background: var(--lemon-100); color: var(--lemon-400); }
.pill--gray  { background: var(--color-bg-subtle); color: var(--color-text-muted); }

/* Barra de progreso animada al entrar en viewport (--fill se define inline) */
/* .bar y .bar__fill son <span> dentro de una celda: necesitan display explícito
   o el navegador los trata como texto en línea y no muestran altura. */
.bar {
  display: inline-block; vertical-align: middle;
  width: 100%; min-width: 90px; height: 6px;
  border-radius: 3px; background: var(--color-bg-subtle); overflow: hidden;
}
.bar__fill {
  display: block;
  height: 100%; border-radius: 3px; background: var(--color-accent);
  width: 0;
  transition: width var(--dur-slower) var(--ease-out);
}
.is-inview .bar__fill { width: var(--fill, 60%); }


/* ==========================================================================
   11. ACORDEÓN (FAQ)
   ====================================================================== */

.accordion__item { border-bottom: var(--border-thin); }
.accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; text-align: left;
  font-size: var(--text-h5); font-weight: var(--weight-medium);
  transition: color var(--dur-fast) var(--ease-out);
}
.accordion__trigger:hover { color: var(--color-accent); }
.accordion__icon { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion__panel > div { overflow: hidden; }
.accordion__trigger[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p { color: var(--color-text-muted); padding-bottom: var(--space-5); max-width: 60ch; }


/* ==========================================================================
   12. FOOTER
   ====================================================================== */

/* Marca del footer — misma anatomía que .nav__brand, pero fuera del navbar */
.logo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--weight-semibold);
  font-size: 1.15rem;
  letter-spacing: -0.03em;
}
.logo__mark {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  transition: transform var(--dur-base) var(--ease-spring);
}
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }

.footer { border-top: var(--border-thin); padding-block: var(--space-8) var(--space-6); }
.footer__grid {
  display: grid;
  /* Marca + 3 columnas de enlaces. Estaba en repeat(4) cuando solo hay tres
     bloques, así que quedaba una columna vacía estirando el resto. */
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  padding-bottom: var(--space-8);
}
.footer__brand { max-width: 22rem; display: flex; flex-direction: column; gap: var(--space-4); }
.footer__col-title {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted); margin-bottom: var(--space-4);
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links a {
  font-size: var(--text-sm); color: var(--color-text-muted);
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-text); transform: translateX(2px); }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-top: var(--space-5); border-top: var(--border-thin);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.social { display: flex; gap: var(--space-2); }
.social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: var(--border-thin); border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.social a:hover { color: var(--color-text); border-color: var(--color-border-strong); transform: translateY(-2px); }

@media (max-width: 64rem) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* En el teléfono, una sola columna convertía el pie en una tira larguísima de
   enlaces sueltos. Las listas son cortas, así que caben en dos columnas y el
   pie se recorre de un vistazo en vez de a base de scroll. */
@media (max-width: 38rem) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
    padding-bottom: var(--space-6);
  }
  .footer__col-title { margin-bottom: var(--space-3); }
  .footer__links { gap: var(--space-2); }
  .footer__brand { gap: var(--space-3); }
  /* El pie de página, centrado: alineado a los lados y partido en dos líneas
     se leía como dos frases sin relación. */
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
}




/* ==========================================================================
   14. TARJETA-CARTEL DE EVENTO
   --------------------------------------------------------------------------
   Reproduce el modelo de datos que ya usa su web:
     imagen del cartel · bloque de fecha · tipo con color · descripción ·
     cupos disponibles · acciones (registro, WhatsApp, calendario)

   El color del tipo de evento se pasa por variable en el HTML:
     <article class="poster-card" style="--event-color: var(--ube-400)">
   ====================================================================== */

.poster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (max-width: 64rem) { .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .poster-grid { grid-template-columns: minmax(0, 1fr); } }

.poster-card {
  --event-color: var(--color-accent);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-top: 1px solid var(--card-edge-top);
  border-bottom: 1px solid var(--card-edge-bottom);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.poster-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* El cartel. 4:5 es la proporción de un flyer de Instagram, que es de donde
   suelen salir estas piezas. */
.poster-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-subtle);
}
.poster-card__media > img,
.poster-card__media > svg {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.poster-card:hover .poster-card__media > img,
.poster-card:hover .poster-card__media > svg { transform: scale(1.04); }

/* Bloque de fecha, arriba a la izquierda */
.poster-card__date {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  min-width: 3.1rem;
  padding: 0.4rem 0.5rem 0.45rem;
  text-align: center;
  background: var(--color-surface);
  border-radius: 0.9rem;
  box-shadow: var(--shadow-md);
}
.poster-card__day { display: block; font-size: 1.45rem; font-weight: var(--weight-semibold); line-height: 1; letter-spacing: -0.03em; }
.poster-card__month {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

/* Chip del tipo de evento, arriba a la derecha */
.poster-card__chip {
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.3em 0.65em;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.poster-card__chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--event-color);
}

.poster-card__body {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: var(--card-pad);
  flex: 1;
}
.poster-card__title { font-size: var(--text-h5); font-weight: var(--weight-semibold); line-height: 1.25; }
.poster-card__desc  { font-size: var(--text-sm); color: var(--color-text-muted); }

.poster-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.poster-card__meta span { display: inline-flex; align-items: center; gap: 0.35em; }
.poster-card__meta svg { flex: none; opacity: 0.7; }

/* Barra de cupos. El porcentaje ocupado va inline: style="--taken: 70%" */
.poster-card__spots { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.15rem; }
.poster-card__spots-bar { height: 5px; border-radius: 3px; background: var(--color-bg-subtle); overflow: hidden; }
.poster-card__spots-fill { display: block; height: 100%; border-radius: 3px; background: var(--event-color); width: var(--taken, 50%); }
.poster-card__spots-text { font-size: var(--text-xs); color: var(--color-text-muted); }
.poster-card--full .poster-card__spots-fill { background: var(--color-text-muted); }

.poster-card__actions {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: auto; padding-top: 0.85rem;
  border-top: var(--border-thin);
}
.poster-card__actions .btn { flex: 1; }

/* Botón de icono: compartir, calendario, ubicación */
.icon-btn {
  flex: none;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-border-strong); transform: translateY(-2px); }
.icon-btn--wa:hover { color: #25d366; border-color: #25d366; }


/* ==========================================================================
   15. MAPA Y CONTACTO POR WHATSAPP
   ====================================================================== */

.map {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: var(--border-thin);
  background: var(--color-bg-subtle);
  min-height: 22rem;
  height: 100%;
}
.map iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; display: block; }
/* Tarjeta con la dirección, flotando sobre el mapa */
.map__card {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--card-pad);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.map__card p { font-size: var(--text-sm); }
.map__card strong { display: block; }
.map__card .btn { margin-left: auto; }

/* Botón flotante de WhatsApp */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 90;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: #25d366;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
}
.wa-float:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45); }
.wa-float svg { flex: none; }
@media (max-width: 38rem) {
  /* En móvil solo el icono, para no tapar contenido */
  .wa-float span { display: none; }
  .wa-float { padding: 0.85rem; }
}