/* =========================================================================
   TRAZENIA · COMPONENTES
   Geometría de ruta de plotter: grosor constante, esquinas rectas, extremos
   redondeados. Nada de sombras difusas ni bordes de 16 px.
   ========================================================================= */

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: clamp(14px, 1.8vw, 22px);
  background: transparent;
  transition: background var(--medio) var(--curva),
              border-color var(--medio) var(--curva),
              padding var(--medio) var(--curva);
  border-bottom: 1px solid transparent;
}

/* Con el menú de móvil abierto la cabecera tiene que ser opaca: si sigue
   transparente, el logo y el botón se ven encima del texto del panel. */
.cabecera.con-menu {
  background: var(--grafito);
  border-bottom-color: var(--linea);
}

.cabecera.fija {
  background: color-mix(in srgb, var(--grafito) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--linea);
  padding-block: 12px;
}

.cabecera__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Misma razón que el botón: la marca tiene que seguir visible con el menú
   abierto, para que se vea que sigues en el sitio. */
.marca { display: flex; align-items: center; gap: 12px; position: relative; z-index: 95; }
.marca svg { height: 26px; width: auto; }
.marca__isotipo { height: 30px; width: 30px; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }

.nav__enlace {
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris-claro);
  position: relative;
  padding-block: 6px;
  transition: color var(--rapido) var(--curva);
}

.nav__enlace::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ambar);
  transform: translateY(-50%) scale(0);
  transition: transform var(--rapido) var(--curva);
}

.nav__enlace:hover,
.nav__enlace:focus-visible { color: var(--hueso); }
.nav__enlace:hover::before { transform: translateY(-50%) scale(1); }

.nav__enlace.activo { color: var(--turquesa); }
.nav__enlace.activo::before { transform: translateY(-50%) scale(1); background: var(--turquesa); }

/* Botón hamburguesa: dos trazos que se cruzan en Z */
.menu-btn {
  display: none;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--linea);
  cursor: pointer;
  padding: 0;
  position: relative;
  /* Por encima del panel (z-index 90), que es hermano suyo dentro de la
     cabecera: si no, el menú abierto lo tapa y la ✕ para cerrar no se ve. */
  z-index: 95;
}
.menu-btn span {
  position: absolute;
  left: 11px;
  width: 18px; height: 2px;
  background: var(--hueso);
  border-radius: 2px;
  transition: transform var(--rapido) var(--curva), opacity var(--rapido);
}
.menu-btn span:nth-child(1) { top: 15px; }
.menu-btn span:nth-child(2) { top: 25px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------- botones */
.btn {
  --btn-fondo: transparent;
  --btn-tinta: var(--tinta);
  --btn-borde: var(--linea);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--btn-fondo);
  color: var(--btn-tinta);
  border: 1px solid var(--btn-borde);
  border-radius: var(--radio);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}

/* El relleno entra como un trazo desde la izquierda, no como un fundido */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-relleno, var(--turquesa));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio) var(--curva);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn__nodo {
  width: var(--trazo-nodo);
  height: var(--trazo-nodo);
  border-radius: 50%;
  background: currentColor;
  flex: none;
  transition: transform var(--medio) var(--curva);
}
.btn:hover .btn__nodo { transform: translateX(3px); }

/* Señal: el único elemento ámbar de la pantalla */
.btn--senal {
  --btn-fondo: var(--ambar);
  --btn-tinta: var(--grafito);
  --btn-borde: var(--ambar);
  --btn-relleno: var(--hueso);
  font-weight: 600;
}
.btn--senal:hover { color: var(--grafito); }

.btn--linea { --btn-relleno: var(--turquesa); }
.btn--linea:hover,
.btn--linea:focus-visible { color: var(--grafito); border-color: var(--turquesa); }

.btn--fantasma { --btn-borde: transparent; --btn-relleno: transparent; padding-inline: 0; }
.btn--fantasma:hover { color: var(--turquesa); }

/* ----------------------------------------------------------------- chips */
.chip {
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-media);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento);
}
.etiqueta::before {
  content: "";
  width: 22px;
  height: var(--trazo-grosor);
  background: currentColor;
  border-radius: 2px;
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(140px, 18vh, 210px);
  padding-bottom: clamp(40px, 6vh, 72px);
  overflow: hidden;
  background: var(--grafito);
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 60%;
  opacity: 0.92;
}
/* La imagen se apaga hacia la izquierda para dejar el aire de la tipografía */
.hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--grafito) 22%, color-mix(in srgb, var(--grafito) 62%, transparent) 52%, transparent 78%),
    linear-gradient(to top, var(--grafito) 2%, transparent 42%);
}

.hero__caja { position: relative; z-index: 1; width: 100%; }

.hero__titulo { max-width: 15ch; }
.hero__titulo em { font-style: normal; color: var(--turquesa); }
/* El punto final del tagline es el nodo ámbar del logotipo */
.hero__punto { color: var(--ambar); }

.hero__lede { margin-top: clamp(22px, 3vw, 34px); max-width: 50ch; }
.hero__acciones { margin-top: clamp(30px, 4vw, 44px); gap: 14px; }

.hero__pie {
  margin-top: clamp(44px, 7vw, 84px);
  padding-top: 22px;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: space-between;
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta-debil);
}
.hero__scroll i {
  display: block;
  width: 1px; height: 26px;
  background: linear-gradient(var(--turquesa), transparent);
  animation: bajar 2.4s var(--curva) infinite;
}

/* ------------------------------------------------- índice de líneas (home) */
.indice { border-top: 0; }

.indice__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  padding-block: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--linea);
  position: relative;
  isolation: isolate;
  transition: padding-inline var(--medio) var(--curva);
}

/* Al pasar el cursor, el renglón se ilumina desde la izquierda como un trazo */
.indice__fila::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--acento-tenue), transparent 62%);
  opacity: 0;
  transition: opacity var(--medio) var(--curva);
}
.indice__fila:hover::before { opacity: 1; }
.indice__fila:hover { padding-inline: clamp(10px, 1.6vw, 24px); }

.indice__num {
  font-family: var(--mono);
  font-size: var(--t-12);
  letter-spacing: 0.1em;
  color: var(--tinta-debil);
  transition: color var(--rapido) var(--curva);
}
.indice__fila:hover .indice__num { color: var(--turquesa); }

.indice__nombre {
  display: block;
  font-family: var(--display);
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: clamp(1.625rem, 3.6vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--tinta);
  transition: color var(--rapido) var(--curva);
}
.indice__fila:hover .indice__nombre { color: var(--turquesa); }

.indice__promesa {
  display: block;
  text-wrap: pretty;
  color: var(--tinta-media);
  font-size: var(--t-16);
  margin-top: 8px;
  max-width: 46ch;
}

.indice__flecha {
  width: 44px; height: 44px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--tinta-debil);
  flex: none;
  transition: border-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva),
              transform var(--medio) var(--curva);
}
.indice__fila:hover .indice__flecha {
  border-color: var(--turquesa);
  color: var(--turquesa);
  transform: rotate(-45deg);
}

/* La miniatura solo existe en móvil; en escritorio ese trabajo lo hace .previa */
.indice__miniatura { display: none; }

/* Vista previa flotante que sigue al cursor: solo en escritorio con puntero fino */
.previa {
  position: fixed;
  top: 0; left: 0;
  width: 340px;
  aspect-ratio: 3 / 2;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transform: translate3d(-50%, -50%, 0) scale(0.94);
  transition: opacity var(--rapido) var(--curva), transform var(--medio) var(--curva);
}
.previa.viva { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.previa img { width: 100%; height: 100%; object-fit: cover; }
.previa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--grafito) 70%, transparent), transparent 60%);
}

/* --------------------------------------------------------- ficha de agente */
.ficha {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(24px, 2.6vw, 34px);
  position: relative;
  overflow: hidden;
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}

/* El trazo turquesa del borde superior se dibuja al entrar el cursor */
.ficha::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  height: 2px; width: 100%;
  background: var(--turquesa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio) var(--curva);
}
.ficha:hover::before { transform: scaleX(1); }
.ficha:hover { border-color: var(--acento-linea); transform: translateY(-3px); }

.ficha__nombre { margin-bottom: 10px; }
.ficha__hace { color: var(--tinta-media); }

.ficha__specs {
  margin-top: auto;
  padding-top: 22px;
  display: grid;
}
/* Cada renglon dibuja su propia regla: asi el bloque puede llevar aire arriba
   sin que el color de linea se convierta en una barra solida. */
.ficha__spec {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--linea);
}
.ficha__spec:last-child { border-bottom: 1px solid var(--linea); }
.ficha__spec dt {
  font-family: var(--mono);
  font-size: var(--t-12);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-debil);
  white-space: nowrap;
}
.ficha__spec dd {
  margin: 0;
  font-size: var(--t-14);
  color: var(--tinta);
  text-align: right;
}

.ficha__lista {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ficha__lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  font-size: var(--t-14);
  color: var(--tinta-media);
  line-height: 1.5;
}
.ficha__lista li::before {
  content: "";
  width: 14px;
  height: var(--trazo-grosor);
  background: var(--acento);
  border-radius: 2px;
  margin-top: 0.62em;
}

/* -------------------------------------------------------------- paquetes */
.paquete {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(26px, 2.8vw, 38px);
  background: var(--fondo);
  position: relative;
  transition: border-color var(--medio) var(--curva);
}
.paquete:hover { border-color: var(--acento-linea); }

.paquete--recomendado {
  border-color: var(--turquesa);
  background: var(--superficie);
}
.paquete__sello {
  position: absolute;
  top: -11px; left: clamp(26px, 2.8vw, 38px);
  background: var(--ambar);
  color: var(--grafito);
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}

.paquete__para {
  color: var(--tinta-media);
  margin-top: 14px;
  min-height: 3.2em;
}

.paquete__precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-block: 20px 4px;
}
.paquete__precio .moneda {
  font-family: var(--mono);
  font-size: var(--t-21);
  color: var(--tinta-debil);
}
.paquete__lista {
  list-style: none;
  margin: 26px 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--linea);
  padding-top: 24px;
}
.paquete__lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  font-size: var(--t-14);
  color: var(--tinta-media);
  line-height: 1.5;
}
.paquete__lista li::before {
  content: "";
  width: 8px; height: 8px;
  border: var(--trazo-grosor) solid var(--acento);
  border-radius: 50%;
  margin-top: 0.5em;
}
.paquete__cta { margin-top: auto; }

/* ---------------------------------------------------------------- método */
.metodo { display: grid; gap: 0; }
.metodo .paso:first-child { border-top: 0; }

.paso {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--linea);
  position: relative;
}
.paso:last-child { border-bottom: 1px solid var(--linea); }

/* El trazo vertical con su nodo: es el mismo dibujo del isotipo, de pie */
.paso__marca {
  position: relative;
  display: flex;
  align-items: center;
  align-self: start;
  gap: 11px;
}
.paso__marca::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 22px;
  bottom: calc(-1 * clamp(28px, 3.4vw, 44px) - 2px);
  width: var(--trazo-grosor);
  background: var(--linea);
}
.paso:last-child .paso__marca::before { display: none; }

.paso__nodo {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--grafito);
  border: var(--trazo-grosor) solid var(--acento);
  position: relative;
  z-index: 1;
}
.paso.visible .paso__nodo { background: var(--acento); }
.paso:last-child.visible .paso__nodo { background: var(--ambar); border-color: var(--ambar); }

.paso__num {
  font-family: var(--mono);
  font-size: var(--t-12);
  letter-spacing: 0.1em;
  color: var(--tinta-debil);
}
.paso__verbo {
  font-family: var(--display);
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: var(--t-26);
  letter-spacing: -0.015em;
  color: var(--acento);
  line-height: 1.1;
}
.paso__cuerpo { display: grid; gap: 10px; }
.paso__duracion { justify-self: start; }

/* ------------------------------------------------------------ compromisos */
.pruebas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.prueba {
  background: var(--fondo);
  padding: clamp(24px, 2.6vw, 34px);
  display: grid;
  gap: 10px;
  align-content: start;
}
.prueba__etiqueta { color: var(--tinta-media); font-size: var(--t-14); line-height: 1.45; }
.prueba:first-child .cifra { color: var(--ambar); }

/* -------------------------------------------------------------- imágenes */
.marco {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo-alt);
}
.marco img { width: 100%; height: 100%; object-fit: cover; }
.marco--3x2 { aspect-ratio: 3 / 2; }
.marco--16x9 { aspect-ratio: 16 / 9; }

.marco__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  background: linear-gradient(to top, color-mix(in srgb, var(--grafito) 88%, transparent), transparent);
  color: var(--gris-claro);
}

/* ------------------------------------------------------------- formulario */
.campo { display: grid; gap: 8px; position: relative; }

.campo__etiqueta {
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-debil);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-21);
  padding: 10px 0;
  border-radius: 0;
  transition: border-color var(--rapido) var(--curva);
}
.campo textarea { resize: vertical; min-height: 130px; font-size: var(--t-16); line-height: 1.6; }
.campo select { appearance: none; cursor: pointer; }
.campo select option { background: var(--grafito); color: var(--tinta); }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--tinta-debil); }

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  outline: none;
  border-bottom-color: var(--turquesa);
}
.campo:focus-within .campo__etiqueta { color: var(--turquesa); }

.campo--select::after {
  content: "";
  position: absolute;
  right: 4px; bottom: 22px;
  width: 8px; height: 8px;
  border-right: var(--trazo-grosor) solid var(--tinta-debil);
  border-bottom: var(--trazo-grosor) solid var(--tinta-debil);
  transform: rotate(45deg);
  pointer-events: none;
}

.campo__error {
  font-family: var(--mono);
  font-size: var(--t-12);
  letter-spacing: 0.06em;
  color: var(--ambar);
  min-height: 1em;
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-bottom-color: var(--ambar); }

.trampa {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* -------------------------------------------------------------- pie de sitio */
.pie {
  background: var(--fondo-alt);
  border-top: 1px solid var(--linea);
  padding-block: clamp(56px, 7vw, 96px) 32px;
  color: var(--tinta-media);
}
.pie__marca svg { height: 34px; width: auto; }
.pie__cols {
  display: grid;
  gap: clamp(32px, 4vw, 60px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .pie__cols { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pie__lista a { color: var(--tinta-media); font-size: var(--t-14); transition: color var(--rapido) var(--curva); }
.pie__lista a:hover { color: var(--turquesa); }

.pie__base {
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
}

/* ----------------------------------------------------------------- cierre */
.cierre {
  position: relative;
  overflow: hidden;
  background: var(--turquesa);
  color: var(--grafito);
}
.cierre .display { color: var(--grafito); }
.cierre .lede { color: color-mix(in srgb, var(--grafito) 76%, transparent); }
.cierre .chip { border-color: color-mix(in srgb, var(--grafito) 24%, transparent); color: color-mix(in srgb, var(--grafito) 72%, transparent); }
.cierre .mono { color: color-mix(in srgb, var(--grafito) 62%, transparent); }

/* Sobre turquesa el botón principal es grafito sólido; el ámbar entra al pasar
   el cursor y sigue siendo la única señal de la pantalla. */
.cierre .btn--solido {
  --btn-fondo: var(--grafito);
  --btn-tinta: var(--hueso);
  --btn-borde: var(--grafito);
  --btn-relleno: var(--ambar);
}
.cierre .btn--solido:hover,
.cierre .btn--solido:focus-visible { color: var(--grafito); }

.cierre .btn--tenue {
  --btn-tinta: var(--grafito);
  --btn-borde: color-mix(in srgb, var(--grafito) 28%, transparent);
  --btn-relleno: var(--grafito);
}
.cierre .btn--tenue:hover,
.cierre .btn--tenue:focus-visible { color: var(--hueso); border-color: var(--grafito); }

/* ----------------------------------------------------------------- migas */
.migas { padding-block: clamp(20px, 2.4vw, 30px) 0; }
/* Cuando la miga abre la pagina, es ella la que despeja la cabecera. */
.migas:first-child { padding-top: clamp(104px, 14vh, 148px); }
.migas:first-child + .seccion--primera { padding-top: clamp(26px, 3.2vw, 48px); }

.migas ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-family: var(--mono);
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.migas li { display: flex; align-items: center; gap: 10px; }
/* El separador es el mismo trazo corto de las etiquetas, no un signo tipografico. */
.migas li + li::before {
  content: "";
  width: 12px;
  height: var(--trazo-grosor);
  background: var(--linea);
  border-radius: 2px;
}
.migas a { color: var(--tinta-debil); transition: color var(--rapido) var(--curva); }
.migas a:hover { color: var(--acento); }
.migas [aria-current="page"] { color: var(--tinta-media); }

/* ------------------------------------------------------- burbuja whatsapp */
/* Grafito y turquesa, no el verde de WhatsApp: el glifo ya es reconocible por
   su forma, y un botón verde encima de esta paleta se vería pegado con cinta. */
.wa {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: color-mix(in srgb, var(--grafito) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  color: var(--turquesa);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7);
  transition: gap var(--medio) var(--curva),
              padding var(--medio) var(--curva),
              border-color var(--rapido) var(--curva),
              transform var(--medio) var(--curva),
              opacity var(--medio) var(--curva),
              visibility var(--medio) var(--curva);
}

/* Entra cuando el visitante ya empezó a leer, no encima del hero. Va con
   visibility, no solo con opacity: un botón invisible que sigue en el orden de
   tabulación es una trampa para quien navega con teclado o lector de pantalla. */
.js .wa { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; }
.js .wa.viva { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }

.wa__icono { display: grid; place-items: center; flex: none; }

.wa__texto {
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta);
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--medio) var(--curva), opacity var(--rapido) var(--curva);
}

.wa:hover,
.wa:focus-visible {
  border-color: var(--acento-linea);
  gap: 12px;
  padding-right: 22px;
}
.wa:hover .wa__texto,
.wa:focus-visible .wa__texto { max-width: 15rem; opacity: 1; }

/* En móvil la burbuja se queda redonda: el ancho de pantalla no sobra. */
@media (max-width: 560px) {
  .wa { height: 52px; padding: 0 14px; }
  .wa:hover { gap: 0; padding-right: 14px; }
  .wa:hover .wa__texto { max-width: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .wa { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
}

/* ---------------------------------------------------------------- tablas */
/* Solo se usan en el panel: ahí sí hay datos que comparar renglón contra renglón. */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}

.tablewrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-size: var(--t-14);
}

.tablewrap th,
.tablewrap td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.tablewrap thead th {
  font-family: var(--mono);
  font-size: var(--t-12);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-debil);
  font-weight: 500;
  background: var(--fondo-alt);
  white-space: nowrap;
}

.tablewrap tbody tr:last-child td { border-bottom: 0; }
.tablewrap tbody tr:hover td { background: var(--acento-tenue); }

.tablewrap td.name { color: var(--tinta); font-weight: 500; max-width: 34ch; }
.tablewrap td.why { color: var(--tinta-media); max-width: 44ch; }

.tablewrap form { display: inline; }

/* --------------------------------------------------------------- misc */
.regla {
  height: 1px;
  background: var(--linea);
  border: 0;
  margin: 0;
}

.cita {
  border-left: var(--trazo-grosor) solid var(--acento);
  padding-left: clamp(20px, 2.4vw, 32px);
  font-size: var(--t-21);
  line-height: 1.5;
  color: var(--tinta);
  max-width: 52ch;
}

.no-si {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
@media (min-width: 760px) { .no-si { grid-template-columns: 1fr 1fr; } }
.no-si > div { background: var(--fondo); padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 12px; align-content: start; }
.no-si__marca { font-family: var(--mono); font-size: var(--t-12); letter-spacing: 0.09em; text-transform: uppercase; }
.no-si__si .no-si__marca { color: var(--turquesa); }
.no-si__no .no-si__marca { color: var(--tinta-debil); }
.no-si__no p { color: var(--tinta-debil); }

/* ---------------------------------------------------------------- código QR */
/* Fondo claro y tamaño fijo: sobre el grafito del sitio, un QR invertido o
   demasiado chico no lo engancha la cámara del teléfono. */
.qr {
  display: inline-block;
  background: #fff;
  padding: 12px;
  border: 1px solid var(--linea);
  line-height: 0;
}

.qr svg {
  display: block;
  /* Tamaño fijo y no relativo: un QR por debajo de ~180px cuesta enfocarlo,
     y aquí no hay razón para que dependa del ancho de la ventana. */
  width: 216px;
  max-width: 100%;
  height: auto;
}