/* ── estilos/b/base.css ── */
/* Lo que el prototipo traía en la hoja de su página (SITIOS-BC): sin esto, un elemento con hidden y display propio se vería. */
[hidden] { display: none !important; }
html { color-scheme: light; }
/* ═══ TeamOn · sitio B (prototipo v3, 20-oct-2026) ═══ tokens del sitio A + lo propio de B.
   Un solo look por decisión (secciones que alternan Tinta y claro): todos los colores explícitos. */
@font-face { font-family: "Space Grotesk"; src: url("fuentes/space-grotesk-v22-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fuentes/inter-v20-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --cobalto: #2b59e0; --cobalto-prof: #1b34c8; --cielo: #4fc3f7; --cielo-suave: #d9f1fd; --cielo-marca: #bfe9fb;
  --tinta: #16181d; --tinta-2: #4b5060; --tinta-3: #6b7185; --hueso: #f0f0f5; --hueso-2: #b9bdcc; --hueso-3: #8c91a6;
  --ground: #f7f8fc; --surface: #ffffff; --line: #d9dce8; --line-soft: #e8eaf3; --chip: #e9eefc; --chip-ink: #1b34c8; --wash: #eef3ff;
  --base: #0a0a14; --base-2: #14161f; --base-3: #1c1f2b; --line-o: #262a36; --line-o2: #343949;
  --verde: #2f8f4e; --verde-bg: #e6f4ea; --verde-o: #66bb6a; --naranja: #b8620a; --naranja-bg: #fff4e5; --ambar: #ffa726;
  --g1: #2b59e0; --g2: #4fc3f7;
  --shadow: 0 1px 2px rgba(22,24,29,.06), 0 8px 24px rgba(43,89,224,.08);
  --shadow-lg: 0 2px 4px rgba(22,24,29,.05), 0 24px 56px rgba(43,89,224,.16);
  --r: 12px; --r-lg: 22px; --barra: 0px;
  --font-d: "Space Grotesk", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-b: Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --suave: cubic-bezier(.2,.9,.25,1.02); --spring: cubic-bezier(.34,1.35,.64,1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--tinta); font-family: var(--font-b); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--font-d); letter-spacing: -.02em; text-wrap: balance; margin: 0; line-height: 1.12; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
.sec { padding-block: 56px; }
@media (min-width: 900px) { .sec { padding-block: 96px; } .wrap { padding-inline: 32px; } }
.oscuro { background: var(--base); color: var(--hueso); }
.oscuro h2, .oscuro h3 { color: #fff; }
/* títulos de sección */
.h2 { font-size: clamp(31px, 8.2vw, 50px); line-height: 1.12; max-width: 16ch; }
.lead { font-size: 17.5px; color: var(--tinta-2); max-width: 58ch; }
.oscuro .lead { color: var(--hueso-2); }
.cab { display: grid; gap: 14px; margin-bottom: 28px; }
@media (min-width: 900px) { .cab { margin-bottom: 44px; } }
/* resaltes: bloque Cielo (sobre oscuro) y marcador en la mitad baja (sobre claro) */
mark { color: inherit; background: none; }
.oscuro mark, .hero mark, .cierre mark { background: var(--cielo); color: var(--tinta); padding: 0 .12em; margin: 0 -.02em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.claro mark, mark.m { background: var(--cielo-marca); color: var(--tinta); padding: 0 .1em; margin: 0 -.02em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cierre mark { background: var(--cielo); color: var(--tinta); }
/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px/1.2 var(--font-b); color: #fff; background: var(--cobalto); border: 0; border-radius: 999px; padding: 15px 24px; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 24px rgba(43,89,224,.28); }
.btn .arr { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--cobalto); display: grid; place-items: center; flex: none; margin-right: -8px; }
.btn .arr svg { width: 15px; height: 15px; }
.btn.cielo { background: var(--cielo); color: var(--tinta); box-shadow: 0 12px 30px rgba(79,195,247,.3); }
.btn.cielo .arr { background: var(--tinta); color: var(--cielo); }
.btn.tinta { background: var(--tinta); color: #fff; box-shadow: 0 12px 30px rgba(22,24,29,.25); }
.btn.tinta .arr { background: var(--cielo); color: var(--tinta); }
.btn.ghost { background: transparent; color: var(--cobalto); border: 1.5px solid var(--line); box-shadow: none; }
.btn.ghost .arr { background: var(--chip); color: var(--cobalto); }
.oscuro .btn.ghost { color: var(--hueso); border-color: var(--line-o2); }
.oscuro .btn.ghost .arr { background: var(--base-3); color: var(--cielo); }
.btn.grande { font-size: 18px; padding: 19px 30px; }
.btn.ancho { width: 100%; }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } .btn.ghost:hover { border-color: var(--cobalto); background: var(--wash); } }
.btn:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; }
/* el CTA principal llama la atención cada cuatro segundos: late, suelta un aro y lo barre un brillo */
.btn.late { position: relative; background-image: linear-gradient(110deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 62%); background-size: 260% 100%; background-position: 115% 0; background-repeat: no-repeat;
  animation: late 4s cubic-bezier(.34,1.35,.64,1) infinite 1s, brillo-btn 4s ease-in-out infinite 1s; }
.btn.late::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: aro 4s ease-out infinite 1s; }
@keyframes late { 0%, 22%, 100% { transform: scale(1); } 6% { transform: scale(1.07); } 12% { transform: scale(.985); } 17% { transform: scale(1.02); } }
@keyframes brillo-btn { 0%, 50% { background-position: 115% 0; } 82%, 100% { background-position: -70% 0; } }
@keyframes aro { 0%, 4% { box-shadow: 0 0 0 0 rgba(79,195,247,.7); } 45%, 100% { box-shadow: 0 0 0 28px rgba(79,195,247,0); } }
.btn.late.cobalto::after { animation-name: aro-c; }
@keyframes aro-c { 0%, 4% { box-shadow: 0 0 0 0 rgba(43,89,224,.6); } 45%, 100% { box-shadow: 0 0 0 28px rgba(43,89,224,0); } }
@media (prefers-reduced-motion: reduce) { .btn.late, .btn.late::after { animation: none; } }
/* listas con palomita */
.puntos { display: grid; gap: 12px; }
.puntos li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px; align-items: start; font-size: 17.5px; line-height: 1.45; }
.puntos li svg { width: 26px; height: 26px; color: var(--verde); margin-top: 1px; }
.oscuro .puntos li svg { color: var(--cielo); }
.puntos li b { font-weight: 650; }
/* aparecer al hacer scroll */
.js [data-revela] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .9s var(--suave); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-revela].en { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-revela] { opacity: 1; transform: none; transition: none; } }
/* ══ EL TELÉFONO (la pieza del sitio A, rev. 9.21: pantalla viva encima de su imagen fija) ══ */
.fone { position: relative; flex: none; width: var(--fw, 280px); aspect-ratio: 1290 / 2796; height: auto;
  background: linear-gradient(155deg, #3a3f52 0%, #12141d 24%, #0a0a14 70%, #22263a 100%);
  border-radius: calc(var(--fw, 280px) * 38 / 280); padding: calc(var(--fw, 280px) * 7 / 280);
  box-shadow: 0 2px 3px rgba(22,24,29,.16), 0 30px 70px rgba(10,10,20,.38), 0 0 0 1px rgba(255,255,255,.10) inset; }
.fone .scr { position: relative; height: 100%; width: 100%; overflow: hidden; border-radius: calc(var(--fw, 280px) * 31 / 280); background: #0a0a14; }
.fone .isla { position: absolute; top: calc(var(--fw, 280px) * 8 / 280); left: 50%; transform: translateX(-50%); width: 30%; height: calc(var(--fw, 280px) * 17 / 280); background: #06070c; border-radius: 999px; z-index: 6; }
.fone .quieta { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.fone iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.fone iframe.lista { opacity: 1; }
/* ══ la barra fija del teléfono ══ una cápsula de vidrio oscuro con el CTA adentro (no un cuadro blanco de lado a lado) */
.barra-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 55; padding: 6px; border-radius: 999px;
  background: rgba(22,24,29,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 44px rgba(10,10,20,.42), 0 2px 6px rgba(10,10,20,.25), 0 0 0 1px rgba(255,255,255,.08) inset;
  transform: translateY(140%); transition: transform .34s var(--suave); }
.barra-cta.ve { transform: none; }
.barra-cta[hidden] { display: none; }
.barra-cta .btn { width: 100%; box-shadow: none; }
@media (min-width: 768px) { .barra-cta { display: none; } }
/* pie */
footer { background: var(--base); color: var(--hueso-2); padding: 44px 0 calc(40px + var(--barra)); font-size: 14px; }
footer .foot { display: grid; gap: 22px; }
footer .brand svg { height: 32px; width: auto; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer nav a { color: var(--hueso); text-decoration: none; font-weight: 500; }
footer nav a:hover { text-decoration: underline; }
footer .legal { display: grid; gap: 6px; font-size: 12.5px; color: var(--hueso-3); max-width: 70ch; }
footer .legal a { color: var(--hueso-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── estilos/bc/nav_timon.css ── */
  .nav { position: sticky; top: 12px; z-index: 50; padding: 12px 16px 0; max-width: 1152px; margin: 0 auto; }
  .nav-in {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: var(--shadow);
  }
  .nav .logo { display: inline-flex; align-items: center; gap: 9px; height: 36px; text-decoration: none; }
  .nav .logo .tm-word { height: 19px; width: auto; display: block; }

  /* ══ EL TIMÓN ══ La marca tiene dos lecturas y son la misma pieza.
     EN REPOSO es un BOTÓN DE ENCENDIDO: el aro con su hueco arriba y el vástago.
     EN CUANTO HAY SCROLL es un TIMÓN: el aro cierra el hueco, el vástago deja de
     existir y la rueda —ocho cabillas iguales— gira en el sentido en que vas:
     horario si bajas, antihorario si subes, tan rápido como te muevas.
     AL SOLTAR tiene física de ruleta: conserva la velocidad que le diste y la va
     perdiendo por fricción; ya lenta, sigue de largo hacia el mismo lado hasta
     entrar en la muesca (múltiplo de 45°) frenando parejo. Sólo cuando se detiene
     el aro vuelve a abrir su hueco arriba y la cabilla que quedó hasta arriba
     crece hacia adentro y se convierte en el vástago. Cuál de las ocho es depende
     de hasta dónde llegó. Un empujón muy chico no da vuelta: la muesca lo jala de
     regreso (hasta 12°), como cualquier rueda con retenes.

     Por eso las ocho cabillas son líneas completas de r=7 a r=26.5 y lo que cambia
     es cuánto se dibuja: normalmente sólo el tramo de afuera (r=16→26.5, una
     cabilla); la que queda arriba (.rey) se dibuja entera hasta r=26, que es
     exactamente el vástago del logo. Cero elementos que aparezcan o desaparezcan.

     Capas encimadas sobre el mismo eje: .sway (vaivén perpetuo de ±1.2°),
     .rueda (el giro por scroll, desde JS), .spin (los gestos) y .arranque (el
     asentamiento al cargar).

     Origen de giro: con un viewBox que no arranca en 0 0, `transform-origin` en px
     o en % se resuelve distinto según el motor y el eje queda fuera de la marca.
     Se amarra a la geometría: el círculo .eje (invisible) centra la caja del grupo
     y entonces fill-box + 50% 50% es el centro real en cualquier navegador.

     El degradado de las cabillas va en #gsp, que el JS contragira: así el color de
     la marca se queda quieto aunque la rueda dé vueltas y el vástago siempre tiene
     su color, caiga la cabilla que caiga. */
  /* Sin overflow:visible. El viewBox es -30 -30 60 60 y lo más externo del
     dibujo llega a r=26.5 con trazo 6.2, o sea 29.6: cabe de sobra. Con
     overflow visible, el filtro drop-shadow del estado .lit y los
     transform-box:fill-box de la animación dejaban que Chrome rasterizara
     fuera de la caja del SVG. isolation:isolate le da al filtro su propio
     contexto para que no se desborde. */
  .tm { width: 34px; height: 34px; display: block; flex: none; overflow: hidden; isolation: isolate; }
  .tm .sway, .tm .rueda, .tm .spin, .tm .arranque { transform-box: fill-box; transform-origin: 50% 50%; }
  /* peso de rueda para los gestos: carga hacia atrás, pasa de largo y asienta */
  .tm { --peso: cubic-bezier(.45, -.08, .25, 1.06); }
  @supports (animation-timing-function: linear(0, 1)) {
    .tm { --peso: linear(0, -0.011 3%, -0.03 7%, -0.024 11%, 0.008 15%, 0.075 21%, 0.19 28%, 0.35 35%, 0.53 42%, 0.70 49%, 0.83 56%, 0.92 62%, 0.98 68%, 1.018 75%, 1.03 81%, 1.019 88%, 1.005 94%, 1); }
  }

  /* ── los dos estados de la marca ──────────────────────────────── */
  /* el aro es un círculo con pathLength 360: 1 unidad = 1 grado. En reposo se
     dibujan 270° y el hueco de 90° queda centrado arriba; rodando se cierra. */
  .tm .ring { stroke-dasharray: 270 90; stroke-dashoffset: 45; }
  .tm.rodando .ring { stroke-dasharray: 360 0; stroke-dashoffset: 90; }
  /* cabilla: sólo el tramo de afuera. La de arriba (.rey) se dibuja entera. */
  .tm .sp { stroke-dasharray: 10.5 9; stroke-dashoffset: -9; stroke-width: 5.8; }   /* sólo el tramo de r=16 a r=26.5 */
  .tm .sp.rey { stroke-dasharray: 19 .5; stroke-dashoffset: 0; stroke-width: 6.2; } /* entera, de r=7 a r=26: el vástago */
  .tm .surge, .tm .surge-stem { opacity: 0; stroke: #f4feff; stroke-width: 5.4; }
  .tm .surge-stem { stroke: #a8e9ff; stroke-width: 5.9; }

  @media (prefers-reduced-motion: no-preference) {
    /* el aro cierra rápido (arrancaste) y abre despacio (te detuviste);
       el vástago crece y se retrae con la misma calma */
    .tm .ring { transition: stroke-dasharray .42s ease, stroke-dashoffset .42s ease; }
    .tm.rodando .ring { transition-duration: .18s; }
    .tm .sp { transition: stroke-dasharray .34s cubic-bezier(.2, .9, .3, 1), stroke-dashoffset .34s cubic-bezier(.2, .9, .3, 1), stroke-width .34s ease; }

    /* 1 · encendido al cargar: crece el aro y prenden las cabillas del eje hacia
       afuera; al soltar la animación, la de arriba se estira y sale el vástago.
       Relleno backwards a propósito: al terminar suelta el valor y las
       transiciones de arriba pueden trabajar. */
    .tm .ring { animation: tm-aro .8s cubic-bezier(.4, 0, .2, 1) .1s backwards; }
    .tm .sp { animation: tm-cabilla .4s ease-out backwards; animation-delay: calc(var(--i) * .055s + .42s); }
    .tm .arranque { animation: tm-asienta 1.2s cubic-bezier(.2, .9, .25, 1) .42s both; }
    .logo .tm { animation: tm-flash 1.1s ease-out .75s 1; }

    /* 2 · vaivén perpetuo: el barco fondeado también se mece */
    .tm .sway { animation: tm-vaiven 11s ease-in-out infinite alternate; }

    /* 3 · gestos. Cada uno arranca y termina en el logo canónico. */
    .tm.empujon .spin { animation: tm-empujon 1.15s ease-in-out both; }
    .tm.banda .spin { animation: tm-vuelta 1.6s both; animation-timing-function: var(--peso); }
    .tm.avante .spin { animation: tm-vuelta-doble 2.5s both; animation-timing-function: var(--peso); }

    /* 4 · con el circuito cerrado la corriente da la vuelta entera al aro y, al
       llegar arriba, el hueco se abre y el vástago sale encendido */
    .tm.surge-on .surge { animation: tm-corriente 1.3s cubic-bezier(.35, 0, .35, 1) both; }
    .tm.surge-on .surge-stem { animation: tm-vastago 1.3s ease-out both; }
    .logo .tm.lit { filter: drop-shadow(0 0 5px rgba(79, 195, 247, .7)); }
    .logo .tm { transition: filter .7s ease; }
    .logo:hover .tm, .logo:focus-visible .tm { filter: drop-shadow(0 0 6px rgba(79, 195, 247, .8)); }
  }

  @keyframes tm-aro { from { stroke-dasharray: 0 360; } to { stroke-dasharray: 270 90; } }
  @keyframes tm-cabilla { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tm-asienta { 0% { rotate: -26deg; } 100% { rotate: 0deg; } }
  @keyframes tm-vaiven { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
  @keyframes tm-flash {
    0%, 40% { filter: drop-shadow(0 0 0 rgba(79,195,247,0)); }
    62% { filter: drop-shadow(0 0 10px rgba(79,195,247,.95)); }
    100% { filter: drop-shadow(0 0 0 rgba(79,195,247,0)); }
  }
  /* empujas una cabilla y la rueda se recentra sola, con su peso */
  @keyframes tm-empujon {
    0% { rotate: 0deg; } 18% { rotate: -21deg; } 42% { rotate: 7deg; }
    62% { rotate: -2.6deg; } 80% { rotate: 1deg; } 100% { rotate: 0deg; }
  }
  @keyframes tm-vuelta { from { rotate: 0deg; } to { rotate: 360deg; } }
  @keyframes tm-vuelta-doble { from { rotate: 0deg; } to { rotate: 720deg; } }
  /* la luz entra arriba (posición 270 de 360), da la vuelta entera y sale arriba */
  @keyframes tm-corriente {
    0% { opacity: 0; stroke-dashoffset: -240; }
    8% { opacity: 1; }
    72% { opacity: 1; stroke-dashoffset: -618; }
    82%, 100% { opacity: 0; stroke-dashoffset: -630; }
  }
  @keyframes tm-vastago { 0%, 80% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .tm .ring, .tm .sp { animation: none; } }
  .nav ul { display: flex; gap: 21px; white-space: nowrap; list-style: none; margin: 0; padding: 0; }
  .nav ul a { font: 600 15px var(--font-b); color: var(--tinta-2); text-decoration: none; }
  .nav ul a:hover { color: var(--tinta); }
  .nav .acts { display: flex; gap: 8px; align-items: center; }
  .btn.sm { font-size: 14.5px; padding: 11px 16px; }
  .btn.sm .arr { width: 26px; height: 26px; }
  /* Móvil: en la barra mandan las pestañas. El botón de «Anótame» se va porque
     hay uno en el hero justo debajo y otro al pie de cada sección. */
  @media (max-width: 600px) {
    .nav { padding: 8px 12px 0; }
    .nav-in { padding: 6px 10px 6px 12px; gap: 8px; }
    .nav .acts { display: none; }
    .nav ul { gap: 12px; }
    .nav ul a { font-size: 14.5px; letter-spacing: -.01em; }
  }
  @media (max-width: 420px) {
    .nav .logo .tm-word { height: 16px; }
    .nav .logo { gap: 6px; }
    .nav { padding: 8px 8px 0; }
  }
  /* SITIOS-BC: a 360 px las dos pestañas no cabían (la página medía 366 px en WebKit; en el prototipo también) */
  @media (max-width: 380px) {
    .nav ul { gap: 9px; }
    .nav ul a { font-size: 13.5px; }
  }

/* ── estilos/bc/wa.css ── */
  /* ── WhatsApp: el botón oficial (F1-259k, 13-oct-2026). El logo oficial de WhatsApp, sin tocar, en
     blanco sobre el verde de WhatsApp (#25D366): se reconoce a la primera (el de antes, verde oscuro
     con el ícono de chat del sitio, «se ve muy opaco», Gabriel). Solo icono siempre: con texto era un
     segundo CTA compitiendo en cada pantalla con el CTA de la sección; como icono es mueble, no botón.
     Lo que se mueve es el botón (un aro que se abre dos veces cuando sale la invitación) y la
     invitación; el logo nunca se anima, ni se recolorea, ni se combina con otra marca (reglas de marca
     de Meta). 56 px: el tamaño de un botón flotante (antes 48). */
  .wa-float {
    position: fixed; right: 16px; bottom: calc(16px + var(--barra, 0px)); z-index: 60; display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; text-decoration: none;
    box-shadow: 0 8px 20px rgba(7, 54, 26, .26), 0 2px 5px rgba(7, 54, 26, .16);
  }
  .wa-float svg { width: 30px; height: 30px; display: block; }
  .wa-float::before {      /* el aro */
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
  }
  @media (hover: hover) {
    .wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(7, 54, 26, .3), 0 3px 7px rgba(7, 54, 26, .18); }
  }
  .wa-float:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; }
  @media (prefers-reduced-motion: no-preference) {
    .wa-float.llama::before { animation: wa-aro 1.5s ease-out 2; }
  }
  @keyframes wa-aro {
    from { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
    to { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  }
  /* la invitación (F1-259k): un globo blanco arriba del botón, con su colita hacia él. teamon.js le
     pone el texto de la página y la muestra una vez por visita; sin JS no sale. */
  .wa-invita {
    position: fixed; right: 16px; bottom: calc(84px + var(--barra, 0px)); z-index: 61;
    width: max-content; max-width: min(272px, calc(100vw - 32px));
    display: flex; align-items: flex-start; gap: 4px;
    background: #fff; color: var(--tinta); border-radius: 16px; padding: 12px 6px 13px 15px;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .08);
    opacity: 0; transform: translateY(8px) scale(.97); transform-origin: 88% 100%;
    transition: opacity .22s ease, transform .22s ease;
  }
  .wa-invita[hidden] { display: none; }
  .wa-invita.visible { opacity: 1; transform: none; }
  .wa-invita::after {
    content: ""; position: absolute; right: 22px; bottom: -6px; width: 12px; height: 12px;
    background: #fff; border-radius: 2px; transform: rotate(45deg);
  }
  .wa-invita a { position: relative; z-index: 1; color: var(--tinta-2); text-decoration: none; font: 500 14.5px/1.4 var(--font-b); }
  .wa-invita a b { display: block; margin-bottom: 1px; font: 700 15px/1.3 var(--font-d); color: var(--tinta); }
  .wa-invita a:hover span, .wa-invita a:focus-visible span { text-decoration: underline; }
  .wa-invita a:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 4px; border-radius: 6px; }
  .wa-cierra {
    position: relative; z-index: 1; flex: none; display: grid; place-items: center;
    width: 28px; height: 28px; margin: -5px 0 0; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--tinta-3); cursor: pointer;
  }
  .wa-cierra svg { width: 14px; height: 14px; }
  .wa-cierra:hover { background: rgba(22, 24, 29, .06); color: var(--tinta); }
  .wa-cierra:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 1px; }
  @media (prefers-reduced-motion: reduce) {
    .wa-invita { transform: none; transition: opacity .15s linear; }
  }
  .link { display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--font-b); color: var(--cobalto); text-decoration: none; }
  .link svg { width: 16px; height: 16px; }
  .link:hover { text-decoration: underline; }
  @media (prefers-reduced-motion: no-preference) {
    .btn { transition: transform .15s ease, background .15s ease; }
    .btn:hover { transform: translateY(-1px); }
  }
  .wa-float { transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease, bottom .2s ease, visibility 0s linear 0s; }
  .escribiendo .wa-float { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, bottom .2s ease, visibility 0s linear .25s; }
  .dudas-a-la-vista .wa-float { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, bottom .2s ease, visibility 0s linear .25s; }
  .escribiendo .wa-invita, .dudas-a-la-vista .wa-invita { opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s; }

  /* Sitio B (Gabriel, 20-oct): latido constante del botón — dos golpes y un aro que se abre, cada 2.6 s. Se anima el botón, no el logo. */
  @media (prefers-reduced-motion: no-preference) {
    .wa-float { animation: wa-late 2.6s ease-in-out infinite; }
    .wa-float::before { animation: wa-aro-siempre 2.6s ease-out infinite; }
    .wa-float.llama { animation: wa-late .9s ease-in-out infinite; }
  }
  @keyframes wa-late { 0%, 30%, 100% { transform: scale(1); } 8% { transform: scale(1.1); } 16% { transform: scale(.97); } 24% { transform: scale(1.06); } }
  @keyframes wa-aro-siempre { 0%, 6% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 60%, 100% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } }

/* ── estilos/bc/fone_wa.css ── */
  /* ══ EL TELÉFONO DE WHATSAPP (del sitio A, rev. 9.20: el chat como se abre WhatsApp, compuesto a 280 px) ══ */
  .sb { display: flex; align-items: center; gap: 5px; padding: 7px 15px 5px; font: 600 10.5px var(--font-b); color: #fff; flex: none; }
  .sb b { font-weight: 700; letter-spacing: .01em; }
  .sb .sp { flex: 1; }
  .sb .sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; }
  .sb .sig i { display: block; width: 2.5px; background: currentColor; border-radius: 1px; }
  .sb .sig i:nth-child(1) { height: 3px; } .sb .sig i:nth-child(2) { height: 5px; }
  .sb .sig i:nth-child(3) { height: 7px; } .sb .sig i:nth-child(4) { height: 9px; }
  .sb .bat { width: 20px; height: 10px; border: 1.2px solid currentColor; border-radius: 3px; padding: 1.4px; position: relative; }
  .sb .bat::after { content: ""; position: absolute; right: -3px; top: 3px; width: 1.6px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; }
  .sb .bat i { display: block; height: 100%; width: 72%; background: currentColor; border-radius: 1px; }
  .sb .wf { width: 12px; height: 12px; }

  /* ── conversación estilo WhatsApp ─────────────────────────────── */
  .wa .sb { background: #075e54; color: #fff; padding-top: 9px; }
  .wa-top {
    display: flex; align-items: center; gap: 8px; flex: none;
    background: #075e54; color: #fff; padding: 5px 11px 9px;
  }
  .wa-top .bk { width: 15px; height: 15px; flex: none; opacity: .95; }
  .wa-top .av { width: 29px; height: 29px; border-radius: 50%; background: #0a0a14; display: grid; place-items: center; flex: none; }
  .wa-top .av svg { width: 18px; height: 18px; }
  .wa-top .nm { display: grid; line-height: 1.15; min-width: 0; margin-right: auto; }
  .wa-top .nm b { font: 600 13px var(--font-b); letter-spacing: .005em; }
  .wa-top .nm small { font-size: 10px; opacity: .82; }
  .wa-top .ic { width: 16px; height: 16px; flex: none; opacity: .95; }
  .wa-body {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    padding: 12px 8px 9px;
    background-color: #e7dfd6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23cfc4b8' stroke-width='1.1' stroke-linecap='round' opacity='.6'%3E%3Ccircle cx='17' cy='15' r='5'/%3E%3Cpath d='M52 11h11M57.5 5.5v11'/%3E%3Cpath d='M7 47c4.5-7 11-7 15.5 0'/%3E%3Ccircle cx='68' cy='44' r='3.4'/%3E%3Cpath d='M31 70h13M37.5 63.5v13'/%3E%3Cpath d='M67 74c3.5-4.5 8-4.5 11.5 0'/%3E%3Cpath d='M78 26l5 5-5 5-5-5z'/%3E%3C/g%3E%3C/svg%3E");
  }
  .wa-day { flex: none; align-self: center; background: rgba(255,255,255,.86); color: #55606a; font: 600 9px var(--font-b); letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 7px; box-shadow: 0 1px 1px rgba(11,20,26,.08); }
  .b {
    position: relative; align-self: flex-start; max-width: 86%;
    background: #fff; border-radius: 8px; padding: 6px 8px 5px;
    font-size: 11.6px; line-height: 1.38; color: #111b21;
    box-shadow: 0 1px .6px rgba(11,20,26,.14);
  }
  .b::after { content: ""; position: absolute; top: 0; left: -7px; width: 8px; height: 12px; background: #fff; clip-path: polygon(100% 0, 0 0, 100% 100%); }
  .b + .b::after, .b.cont::after { display: none; }
  .b.out { align-self: flex-end; background: #d9fdd3; }
  .b.out::after { left: auto; right: -7px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%); display: block; }
  .b p + p { margin-top: 4px; }
  .b .al { display: inline-block; font: 700 9px var(--font-b); letter-spacing: .07em; text-transform: uppercase; color: #b8620a; margin-bottom: 2px; }
  .b .clip { display: inline-flex; align-items: center; gap: 4px; color: #027eb5; font-weight: 600; }
  .b .clip svg { width: 11px; height: 11px; }
  /* botón de acción (WhatsApp Business permite un CTA con enlace bajo el mensaje) */
  .b .cta-wa { clear: both; display: flex; cursor: default; align-items: center; justify-content: center; gap: 6px;
    margin: 6px -8px -5px; padding: 8px 6px; border-top: 1px solid rgba(17,27,33,.10);
    font: 600 11.5px var(--font-b); color: #027eb5; text-decoration: none; }
  .b .cta-wa svg { width: 13px; height: 13px; }
  .b .t { float: right; display: inline-flex; align-items: center; gap: 2px; margin: 3px 0 0 9px; font-size: 9px; color: rgba(17,27,33,.45); }
  .b .t svg { width: 13px; height: 13px; color: #53bdeb; }
  .wa-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px 9px; background: #e7dfd6; }
  .wa-bar .fld { flex: 1; display: flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 6px 10px; box-shadow: 0 1px 1px rgba(11,20,26,.08); }
  .wa-bar .fld svg { width: 15px; height: 15px; color: #8696a0; flex: none; }
  .wa-bar .fld i { flex: 1; font-style: normal; font-size: 11px; color: #a8b3ba; }
  .wa-bar .mic { width: 31px; height: 31px; border-radius: 50%; background: #00a884; display: grid; place-items: center; flex: none; }
  .wa-bar .mic svg { width: 15px; height: 15px; color: #fff; }
  @media (prefers-reduced-motion: no-preference) {
    .b { animation: pop .38s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--n, 0) * .55s + .7s); }
    .b.out { animation-delay: 0s; }
  }
  @keyframes pop { from { opacity: 0; transform: translateY(9px) scale(.97); } to { opacity: 1; transform: none; } }
  .wa-hilo { flex: none; display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
  .alertas { max-height: none; overflow: visible; padding-left: 0; margin-left: 0; transition: none; }
  .alertas .b { opacity: 1; transform: none; }
  .fone.wa { --fw: 280px; zoom: tan(atan2(min(284px, 74vw), 280px)); }
  .fone.wa .scr { display: flex; flex-direction: column; background: #ece5dd; color: var(--tinta); }
  @media (min-width: 900px) { .fone.wa { zoom: tan(atan2(300px, 280px)); } }

/* ── estilos/b/sitio.css ── */
/* ══ HERO ══ oscuro, el titular grande encima de todo, el CTA al centro y la foto con el teléfono encima */
.hero { position: relative; background: var(--base); color: var(--hueso); overflow: hidden; padding: 22px 0 0; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(620px 520px at 8% -6%, rgba(43,89,224,.55), transparent 60%), radial-gradient(420px 380px at 84% 6%, rgba(79,195,247,.28), transparent 60%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, var(--line-o2) 1.1px, transparent 1.6px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 100%); mask-image: linear-gradient(to bottom, transparent 30%, #000 100%); }
.hero .wrap { display: grid; gap: 26px; }
.hero .texto { display: grid; gap: 24px; }
.hero h1 { font-size: clamp(42px, 11.6vw, 68px); line-height: 1.1; letter-spacing: -.035em; color: #fff; max-width: 12ch; }
.hero .lead { font-size: clamp(17px, 4.4vw, 19px); color: rgba(240,240,245,.82); max-width: 40ch; }
.hero .lead .ico { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 8px; background: rgba(79,195,247,.16); color: var(--cielo); vertical-align: -.35em; margin: 0 .06em; }
.hero .lead .ico svg { width: .9em; height: .9em; }
.hero .cta { display: grid; justify-items: center; padding: 8px 0 2px; }
.hero .cta .btn { width: 100%; max-width: 380px; }
.hero .visual { position: relative; width: 100%; max-width: 460px; margin: 18px auto 0; padding-bottom: 6%; }
.hero .foto { position: relative; width: 80%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.hero .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.hero .foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,20,.55), transparent 45%); }
.hero .fone { position: absolute; right: 0; bottom: 0; --fw: clamp(150px, 43vw, 205px); z-index: 2; }
.hero .suelo { height: 46px; background: linear-gradient(to bottom, transparent, var(--ground)); margin-top: -46px; position: relative; z-index: 3; display: none; }
@media (min-width: 900px) {
  .hero { padding: 40px 0 0; }
  .hero .wrap { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; padding-bottom: 84px; }
  .hero .texto { gap: 30px; }
  .hero h1 { font-size: clamp(56px, 5.6vw, 76px); line-height: 1.14; }
  .hero .cta { justify-items: start; }
  .hero .visual { width: 100%; max-width: 470px; margin: 0 0 0 auto; padding-bottom: 0; }
  .hero .foto { width: 82%; }
  .hero .fone { right: -4%; bottom: -10%; --fw: 225px; }
}
/* ══ DESCRIPCIÓN ══ claro: cinco bloques, cada uno con su teléfono; en escritorio alternan lado */
.que { background: var(--ground); padding-bottom: 0; }
.que .cab { text-align: center; justify-items: center; }
.que .cab .h2 { max-width: 18ch; }
.bloques { display: grid; gap: 54px; }
.bloque { display: grid; gap: 16px; }
.bloque .num { font: 500 54px/1 var(--font-d); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px var(--cobalto); }
.bloque h3 { font-size: clamp(27px, 7.2vw, 38px); line-height: 1.06; }
.bloque .texto p { font-size: 17.5px; color: var(--tinta-2); max-width: 44ch; }
.bloque .tel { display: flex; justify-content: center; align-items: flex-start; padding: 28px 0 10px; position: relative; }
.bloque:nth-child(odd) .tel { justify-content: flex-start; padding-left: 3%; }
.bloque:nth-child(even) .tel { justify-content: flex-end; padding-right: 3%; }
.bloque .tel::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 70%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(43,89,224,.14), transparent); pointer-events: none; }
.bloque .fone { --fw: min(284px, 74vw); }
@media (min-width: 900px) {
  .bloques { gap: 40px; }
  .bloque { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
  .bloque .texto { display: grid; gap: 16px; align-content: center; }
  .bloque .tel, .bloque:nth-child(odd) .tel, .bloque:nth-child(even) .tel { padding: 0; justify-content: center; }
  .bloque:nth-child(even) .tel { order: -1; }
  .bloque .fone { --fw: 300px; }
}
/* el cierre con la foto a sangre y la frase encima */
.cierre { position: relative; overflow: hidden; margin-top: 56px; aspect-ratio: 4 / 5; max-height: 720px; background: var(--base); }
.cierre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.cierre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,20,.88) 0%, rgba(10,10,20,.35) 48%, transparent 75%); }
.cierre .frase { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 20px 36px; color: #fff; }
.cierre h3 { font-size: clamp(28px, 7.6vw, 48px); line-height: 1.14; max-width: 16ch; }
@media (min-width: 900px) { .cierre { aspect-ratio: 21 / 9; max-height: 620px; margin-top: 80px; } .cierre img { object-position: 50% 22%; } .cierre .frase { padding: 0 48px 52px; max-width: 1120px; margin: 0 auto; } }
/* ══ CÓMO FUNCIONA ══ oscuro, tres pasos */
.pasos { display: grid; gap: 18px; }
.paso { background: var(--base-2); border: 1px solid var(--line-o); border-radius: 22px; overflow: hidden; display: grid; }
.paso .media { position: relative; aspect-ratio: 4 / 3; background: var(--base-3); overflow: hidden; }
.paso .media img { width: 100%; height: 100%; object-fit: cover; }
.paso .media.tel { display: flex; justify-content: center; align-items: flex-start; background: radial-gradient(70% 90% at 50% 0%, rgba(43,89,224,.45), var(--base-3) 70%); padding-top: 26px; }
.paso .media.tel .fone { --fw: 200px; }
.paso .txt { padding: 22px 22px 26px; display: grid; gap: 8px; }
.paso .n { font: 600 14px/1 var(--font-d); letter-spacing: .14em; text-transform: uppercase; color: var(--cielo); }
.paso h3 { font-size: 24px; }
.paso p { color: var(--hueso-2); font-size: 16.5px; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 22px; } .paso .media { aspect-ratio: 4 / 3.4; } .paso .media.tel .fone { --fw: 210px; } }
/* ══ EQUIPO ══ claro: la trabajadora de fondo, el plan con su foto encima */
.equipo .dos { display: grid; gap: 26px; }
.escena { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--base-3); }
.escena img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.escena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 50%, rgba(10,10,20,.5)); pointer-events: none; }
.escena .fone { position: absolute; right: 5%; bottom: 5%; --fw: clamp(150px, 46vw, 220px); z-index: 2; }
.escena .eti { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); color: var(--tinta); border-radius: 999px; padding: 8px 14px 8px 10px; font: 600 13.5px/1 var(--font-b); box-shadow: var(--shadow); }
.escena .eti i { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(47,143,78,.2); }
@media (min-width: 900px) { .equipo .dos { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; } .escena { max-width: 470px; justify-self: end; } .escena .fone { --fw: 230px; right: 6%; bottom: 6%; } }
/* ══ VENTAS ══ oscuro: el teléfono grande con sus datos flotando alrededor */
.ventas .dos { display: grid; gap: 30px; }
.ventas .escenario { position: relative; display: grid; justify-items: center; gap: 18px; padding: 24px 0 10px; }
.ventas .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ventas .escenario::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 80%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(43,89,224,.42), transparent); pointer-events: none; }
.ventas .fone { --fw: min(290px, 74vw); }
.flot { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--tinta); border-radius: 14px; padding: 10px 14px; font: 600 13.5px/1.2 var(--font-b); box-shadow: 0 16px 40px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s ease, transform .8s var(--spring); }
.flot svg { width: 20px; height: 20px; color: var(--cobalto); flex: none; }
.flot b { display: block; font-size: 15px; }
.flot small { display: block; font-weight: 500; color: var(--tinta-3); font-size: 12.5px; margin-top: 2px; }
.flot.ambar svg { color: var(--naranja); }
.en .flot { opacity: 1; transform: none; }
.flot.f1 { transition-delay: .5s; }
.flot.f2 { transition-delay: .9s; }
.flot.f3 { transition-delay: 1.3s; }
@media (min-width: 900px) { .ventas .dos { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; } .ventas .fone { --fw: 300px; } .ventas .escenario { display: flex; justify-content: center; padding: 30px 0; }
  .ventas .fone { --fw: 280px; } .ventas .chips { display: contents; } .flot { position: absolute; max-width: 190px; } .flot.f1 { left: -7%; top: 30%; } .flot.f2 { right: -7%; top: 52%; } .flot.f3 { left: -5%; bottom: 10%; } }
/* ══ VERSUS ══ claro: comparación de arrastre (antes / después) */
.versus .dos { display: grid; gap: 26px; }
.comp { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: var(--shadow-lg); user-select: none; -webkit-user-select: none; touch-action: pan-y; --x: 50%; }
.comp .capa { position: absolute; inset: 0; }
.comp .capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.comp .antes img { filter: grayscale(1) contrast(1.08) brightness(.86); transform: scale(1.02); animation: cctv-zoom 14s ease-in-out infinite alternate; }
@keyframes cctv-zoom { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.comp .antes::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px); pointer-events: none; }
.comp .antes::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55)); pointer-events: none; }
.comp .cam { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.55); padding: 8px 10px; border-radius: 8px; }
.comp .cam i { width: 8px; height: 8px; border-radius: 50%; background: #ef5350; animation: rec 1.2s steps(2, start) infinite; }
@keyframes rec { to { opacity: 0; } }
.comp .nadie { position: absolute; left: 12px; bottom: 12px; font: 500 12.5px/1.3 var(--font-b); color: rgba(255,255,255,.75); background: rgba(0,0,0,.5); padding: 7px 10px; border-radius: 8px; }
.comp .despues { clip-path: inset(0 0 0 var(--x)); }
.comp .despues img { filter: saturate(1.05); }
.comp .despues::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--cielo); border-radius: 22px; pointer-events: none; }
.comp .tag { position: absolute; top: 12px; font: 700 11.5px/1 var(--font-b); letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px; border-radius: 8px; }
.comp .tag.ant { left: 12px; top: auto; bottom: 48px; color: #fff; background: rgba(0,0,0,.55); }
.comp .tag.des { right: 12px; color: var(--tinta); background: var(--cielo); }
.comp .cal { position: absolute; right: 12px; top: 44px; display: grid; justify-items: end; color: #fff; text-align: right; background: rgba(10,10,20,.72); padding: 8px 12px; border-radius: 12px; backdrop-filter: blur(6px); }
.comp .cal b { font: 600 30px/1 var(--font-d); letter-spacing: -.03em; color: var(--cielo); }
.comp .cal small { font: 600 10.5px/1 var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-top: 3px; }
.comp .sub { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 6px; }
.comp .sub span { justify-self: start; max-width: 100%; font: 500 13.5px/1.35 var(--font-b); color: #fff; background: rgba(10,10,20,.78); padding: 8px 12px; border-radius: 10px; backdrop-filter: blur(6px); }
.comp .sub span b { color: var(--cielo); font-weight: 700; }
.comp .sub .plan { color: var(--tinta); background: rgba(255,255,255,.94); }
.comp .sub .plan b { color: var(--cobalto); }
.comp .divisor { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 0 18px rgba(0,0,0,.45); pointer-events: none; }
.comp .divisor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E"); background-size: 24px; background-position: center; background-repeat: no-repeat; }
.comp input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; z-index: 5; }
.comp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100%; }
.comp input[type="range"]::-moz-range-thumb { width: 60px; height: 100%; }
.versus .frase { font-family: var(--font-d); font-size: clamp(24px, 6.6vw, 34px); line-height: 1.2; letter-spacing: -.02em; max-width: 18ch; }
@media (max-width: 599px) { .comp { width: calc(100% + 32px); margin-inline: -16px; border-radius: 0; } .comp .cal b { font-size: 24px; } .comp .sub span { font-size: 12.5px; padding: 6px 10px; } .comp .cal { top: 40px; padding: 6px 10px; } .comp .nadie { display: none; } .versus .frase { padding-inline: 0; } }
@media (min-width: 900px) { .versus .dos { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 48px; } }
/* ══ DATOS ══ oscuro: siete fichas vivas */
.datos .fichas { display: grid; gap: 14px; }
.ficha { position: relative; background: var(--base-2); border: 1px solid var(--line-o); border-radius: 20px; padding: 20px 18px 18px; display: grid; gap: 10px; overflow: hidden; transition: transform .4s var(--suave), border-color .4s; }
.ficha::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 100% 0%, rgba(43,89,224,.22), transparent 60%); pointer-events: none; opacity: 0; transition: opacity .5s; }
.ficha.en::before { opacity: 1; }
@media (hover: hover) { .ficha:hover { transform: translateY(-3px); border-color: var(--line-o2); } }
.ficha .ico { position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(79,195,247,.14); color: var(--cielo); }
.ficha .ico svg { width: 24px; height: 24px; }
.ficha .cifra { position: relative; font: 500 clamp(50px, 13vw, 64px)/1 var(--font-d); letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ficha .cifra small { font: 600 clamp(18px, 4.6vw, 22px)/1.1 var(--font-d); letter-spacing: -.01em; color: var(--hueso-2); }
.ficha .cifra .n { color: var(--cielo); }
.ficha .dice { font-size: 16px; line-height: 1.42; color: var(--hueso); }
.ficha .hace { font-size: 15px; line-height: 1.42; font-style: italic; color: var(--cielo); }
.ficha .fuente { font-size: 12px; color: var(--hueso-3); }
/* micrográficas */
.g-puntos { display: flex; gap: 6px; flex-wrap: wrap; }
.g-puntos i { width: 18px; height: 18px; border-radius: 50%; background: var(--line-o2); transition: background .35s, transform .5s var(--spring); transition-delay: calc(var(--i) * 70ms); }
.en .g-puntos i.si { background: var(--cielo); transform: scale(1.12); box-shadow: 0 0 14px rgba(79,195,247,.5); }
.g-barra { position: relative; height: 12px; border-radius: 6px; background: var(--line-o2); overflow: visible; }
.g-barra i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--cobalto), var(--cielo)); transition: width 1.2s var(--suave) .2s; }
.en .g-barra i { width: var(--w); }
.g-barra::after { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; background: rgba(255,255,255,.5); }
.g-barra b { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font: 600 11px/1 var(--font-b); letter-spacing: .08em; color: var(--hueso-3); white-space: nowrap; }
.g-tres { display: grid; gap: 8px; }
.g-tres div { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font: 500 13px/1 var(--font-b); color: var(--hueso-2); }
.g-tres i { display: block; height: 10px; border-radius: 5px; background: var(--line-o2); overflow: hidden; }
.g-tres i::after { content: ""; display: block; height: 100%; width: 0; border-radius: 5px; background: var(--cielo); transition: width 1.1s var(--suave); transition-delay: calc(var(--i) * 160ms + .2s); }
.en .g-tres i::after { width: var(--w); }
.g-tres b { font: 600 15px/1 var(--font-d); color: #fff; font-variant-numeric: tabular-nums; min-width: 4.2ch; text-align: right; }
.g-arco { width: 84px; height: 84px; }
.g-arco svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.g-arco .fondo { fill: none; stroke: var(--line-o2); stroke-width: 9; }
.g-arco .valor { fill: none; stroke: var(--cielo); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.4s var(--suave) .2s; }
.en .g-arco .valor { stroke-dashoffset: calc(251.3 * (1 - var(--p))); }
.g-fila { display: flex; align-items: center; gap: 16px; }
.g-pers { display: flex; gap: 10px; }
.g-pers svg { width: 34px; height: 40px; color: var(--line-o2); transition: color .4s; transition-delay: calc(var(--i) * 120ms); }
.en .g-pers svg.si { color: var(--cielo); }
@media (min-width: 700px) { .datos .fichas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .datos .fichas { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .ficha:last-child { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 36px; align-items: center; padding: 26px 32px; }
  .ficha:last-child .ico { grid-row: 1 / 4; align-self: center; }
  .ficha:last-child .g-fila { grid-column: 2; }
  .ficha:last-child .dice, .ficha:last-child .hace, .ficha:last-child .fuente { grid-column: 2; max-width: 64ch; } }
/* el control, en Cielo */
.control { background: var(--cielo); color: var(--tinta); }
.control .wrap { display: grid; gap: 18px; justify-items: start; }
.control h2 { font-size: clamp(30px, 8vw, 48px); line-height: 1.04; max-width: 18ch; }
.control p { font-size: 18px; max-width: 46ch; color: rgba(22,24,29,.78); }
/* ══ PREGUNTAS ══ claro */
.preguntas .grupo { margin-top: 26px; }
.preguntas .grupo h3 { font: 600 13px/1 var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 10px; }
.preguntas details { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; margin-bottom: 8px; }
.preguntas summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; font: 600 17px/1.3 var(--font-d); letter-spacing: -.01em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--chip); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b34c8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; transition: transform .3s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 18px; color: var(--tinta-2); font-size: 16px; line-height: 1.55; max-width: 64ch; }
.preguntas details p b { color: var(--tinta); font-weight: 650; }
.preguntas .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (min-width: 900px) { .preguntas .cuerpo { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; } .preguntas .cab { position: sticky; top: 100px; } .preguntas .grupo:first-child { margin-top: 0; } }

/* ── estilos/b/tarjetas.css ── */
/* ══ TEST y REGISTRO ══ páginas propias: una tarjeta con barra de avance, como «¿Es para ti?» del sitio A (rev. 9.4) */
.anotarme { background: linear-gradient(180deg, var(--wash), var(--ground)); padding-block: 26px 70px; }
.anotarme .wrap { max-width: 720px; }
.anotarme .head { display: grid; gap: 10px; margin-bottom: 22px; text-align: center; justify-items: center; }
.anotarme .head h1 { font-size: clamp(28px, 7.6vw, 44px); line-height: 1.06; max-width: 20ch; }
.anotarme .head .lead { font-size: 16.5px; }
.paso-card { scroll-margin-top: 92px; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.barra { height: 4px; background: var(--line-soft); }
.barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g1), var(--g2)); border-radius: 0 3px 3px 0; transition: width .5s cubic-bezier(.3,.9,.3,1); }
.paso-in { padding: 24px 22px 24px; }
@media (min-width: 640px) { .paso-in { padding: 30px 34px 28px; } }
.pf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pf-cuenta { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.pf-atras { display: inline-flex; align-items: center; gap: 5px; font: 600 13px var(--font-b); color: var(--tinta-3); background: 0; border: 0; padding: 0; cursor: pointer; }
.pf-atras svg { width: 13px; height: 13px; }
.pf-atras:hover { color: var(--cobalto); }
.pf-atras[hidden] { visibility: hidden; display: inline-flex !important; pointer-events: none; }
.pf-pista { position: relative; min-height: 150px; }
.pf { display: none; }
.pf.on { display: grid; gap: 14px; align-content: start; }
@media (prefers-reduced-motion: no-preference) { .pf.on { animation: pf-entra .42s cubic-bezier(.2,.9,.3,1) both; } @keyframes pf-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } }
.pf-q { font: 700 clamp(22px, 5.8vw, 29px)/1.18 var(--font-d); letter-spacing: -.022em; color: var(--tinta); max-width: 24ch; text-wrap: balance; }
.pf-h { font-size: 15px; line-height: 1.5; color: var(--tinta-2); max-width: 46ch; margin-top: -4px; }
.pf input[type="text"], .pf input[type="tel"] { width: 100%; font: 400 clamp(18px, 2vw, 22px) var(--font-b); color: var(--tinta); background: 0; padding: 8px 2px 12px; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; appearance: none; }
.pf input:focus { outline: 0; border-bottom-color: var(--cobalto); }
.pf input::placeholder { color: #b6bbcb; }
.pf .err { font: 600 13px var(--font-b); color: var(--naranja); min-height: 18px; margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-block; padding: 11px 17px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font: 500 15px/1.2 var(--font-b); color: var(--tinta); cursor: pointer; transition: border-color .15s, background .15s; }
.pill:hover span { border-color: var(--cobalto); }
.pill input:checked + span { border-color: var(--cobalto); background: var(--wash); color: var(--cobalto-prof); font-weight: 600; }
.pill input:focus-visible + span { outline: 3px solid var(--cielo); outline-offset: 2px; }
.pf input.otro { margin-top: 2px; }
.pf-pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.pf-pie .enter { font: 500 12.5px var(--font-b); color: var(--tinta-3); }
.pf-pie .enter b { font-weight: 700; color: var(--tinta-2); background: var(--hueso); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
@media (max-width: 640px) { .pf-pie .enter { display: none; } .pf-pie .btn { width: 100%; } }
.pf-pie .dudas-wa { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 2px; font: 600 14px var(--font-b); color: var(--verde); text-decoration: none; }
.pf-pie .dudas-wa svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .pf-pie .dudas-wa { margin: 0 auto; } }
.quiz-op { display: grid; gap: 9px; }
.quiz-op button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: 1.5px solid var(--line); border-radius: 13px; padding: 14px 15px; font: 500 15.5px/1.35 var(--font-b); color: var(--tinta); transition: border-color .15s, background .15s; }
.quiz-op button:hover, .quiz-op button[aria-pressed="true"] { border-color: var(--cobalto); background: var(--wash); }
.quiz-op button .k { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--hueso); border: 1px solid var(--line); font: 700 11px var(--mono); color: var(--tinta-3); }
.quiz-op button:hover .k, .quiz-op button[aria-pressed="true"] .k { background: var(--chip); border-color: var(--chip); color: var(--cobalto-prof); }
@media (hover: none) { .quiz-op button .k { display: none; } }
/* veredicto / gracias */
.veredicto { display: none; }
.veredicto.on { display: block; }
.veredicto .paso-in { display: grid; gap: 16px; }
.ver-si { display: flex; align-items: center; gap: 11px; font: 700 clamp(22px, 5.6vw, 30px)/1.15 var(--font-d); letter-spacing: -.022em; color: var(--tinta); }
.ver-si .ok { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--verde-bg); color: var(--verde); display: grid; place-items: center; }
.ver-si .ok svg { width: 22px; height: 22px; }
.ver-si .ok.no { background: var(--chip); color: var(--cobalto); }
.ver-pq { display: grid; gap: 9px; }
.ver-pq li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--tinta-2); }
.ver-pq li svg { width: 20px; height: 20px; color: var(--verde); margin-top: 2px; }
.ver-pq li b { color: var(--tinta); font-weight: 600; }
.ver-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
.link { display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--font-b); color: var(--cobalto); text-decoration: none; background: 0; border: 0; padding: 0; cursor: pointer; }
.link:hover { text-decoration: underline; }
.done { display: none; padding: 34px 26px; text-align: center; }
.done.on { display: grid; gap: 12px; justify-items: center; }
.paso-card.sent > .barra, .paso-card.sent > .paso-in { display: none; }
.paso-card.sent .done { display: grid; gap: 12px; justify-items: center; }
.done .ok { width: 56px; height: 56px; border-radius: 50%; background: var(--verde-bg); color: var(--verde); display: grid; place-items: center; }
.done .ok svg { width: 28px; height: 28px; }
.done h3 { font-size: clamp(24px, 6vw, 30px); }
.done p { color: var(--tinta-2); max-width: 40ch; }
.done .btn { margin-top: 8px; }
.fine { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--tinta-3); text-align: center; max-width: 66ch; margin-inline: auto; }
.fine a { color: var(--tinta-2); }
.anotarme .despues { margin: 44px 0 0; text-align: center; font: 700 12px var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.after-3 { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: paso; }
.after-3 li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.after-3 li::before { counter-increment: paso; content: counter(paso); width: 30px; height: 30px; border-radius: 50%; background: var(--chip); color: var(--cobalto-prof); font: 700 13px/30px var(--font-d); text-align: center; }
.after-3 li b { display: block; font-weight: 650; grid-column: 2; }
.after-3 li span { grid-column: 2; }
.after-3 li span { font-size: 14px; color: var(--tinta-2); }
html.sin-js .pf { display: grid; gap: 14px; margin-bottom: 26px; }
.pf-q[tabindex]:focus, .ver-si:focus, .done:focus { outline: none; }