/* praxist.co — estilos compartidos por index.html, proveedores.html y companias.html */
:root {
  --carbon: #1b1b22;
  --carbon-2: #24242d;
  --carbon-3: #2f2f3a;
  --noche: #131318;
  --morado: #5b21b6;
  --morado-hover: #4c1d95;
  --morado-claro: #a78bfa;
  --lila: #ede7fb;
  --ambar: #d97706;
  --pizarra: #3f4a5a;
  --bruma: #f2f2f5;
  --blanco: #ffffff;
  --borde: #dcdce3;
  --texto: #1b1b22;
  --texto-2: #5f5f6b;
  --texto-3: #85858f;
  --sobre-oscuro: #f2f2f5;
  --sobre-oscuro-2: #b4b4c0;
  --linea-oscura: rgba(242,242,245,.09);
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Onest", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --ancho: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bruma); color: var(--texto); font-family: var(--cuerpo); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
.etiqueta { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); }
.oscuro .etiqueta { color: var(--morado-claro); }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--blanco); color: var(--texto); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.saltar:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--morado-claro); outline-offset: 3px; border-radius: 4px; }
.sello-ia { display: inline-block; vertical-align: 2px; margin-left: 8px; font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--morado); background: var(--lila); padding: 2px 8px; border-radius: 999px; }
.oscuro .sello-ia { color: #fff; background: var(--morado); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; font-size: .98rem; text-decoration: none; border-radius: 12px; padding: 14px 20px; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.boton:active { transform: translateY(1px); }
.boton.sin-enlace { cursor: default; }
.boton.sin-enlace:active { transform: none; }
.boton-marca { background: var(--morado); color: #fff; }
.boton-marca:hover { background: var(--morado-hover); }
.boton-claro { background: transparent; color: var(--sobre-oscuro); border-color: rgba(242,242,245,.28); }
.boton-claro:hover { border-color: rgba(242,242,245,.6); }
.boton-borde { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton-borde:hover { border-color: var(--texto-3); }
.boton svg { width: 18px; height: 18px; flex: none; }

/* ---------- Franja: para quién es ---------- */
.franja { background: var(--noche); border-bottom: 1px solid rgba(242,242,245,.06); }
.franja .envoltura { display: flex; align-items: stretch; gap: 4px; height: 38px; overflow-x: auto; scrollbar-width: none; }
.franja .envoltura::-webkit-scrollbar { display: none; }
.franja a { display: inline-flex; align-items: center; padding-inline: 12px; font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sobre-oscuro-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.franja a:first-child { padding-left: 0; }
@media (max-width: 480px) { .franja .envoltura { gap: 0; } .franja a { letter-spacing: .03em; font-size: .68rem; padding-inline: 8px; } .franja .solo-ancho { display: none; } }
.franja a:hover { color: var(--sobre-oscuro); }
.franja a[aria-current="page"] { color: #fff; border-bottom-color: var(--morado-claro); }

/* ---------- Barra ---------- */
.barra { position: sticky; top: 0; z-index: 20; background: rgba(27,27,34,.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(242,242,245,.08); }
.barra .envoltura { display: flex; align-items: center; gap: 24px; height: 68px; }
.barra .logo img { height: 26px; width: auto; }
.barra .menu-escritorio { display: flex; gap: 2px; margin-left: auto; }
.barra nav a { color: var(--sobre-oscuro-2); text-decoration: none; font-weight: 500; font-size: .93rem; padding: 8px 11px; border-radius: 9px; }
.barra nav a:hover { color: var(--sobre-oscuro); background: rgba(242,242,245,.06); }
.barra .boton { padding: 10px 16px; font-size: .92rem; }
.menu-movil { display: none; }
.menu-movil summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--sobre-oscuro); border: 1px solid rgba(242,242,245,.16); }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary svg { width: 22px; height: 22px; }
.menu-movil .cerrar, .menu-movil[open] .abrir { display: none; }
.menu-movil[open] .cerrar { display: block; }
.menu-movil nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--carbon); border-bottom: 1px solid rgba(242,242,245,.1); padding: 8px 20px 20px; display: grid; gap: 2px; box-shadow: 0 24px 40px rgba(0,0,0,.35); }
.menu-movil nav a { font-size: 1.05rem; padding: 13px 4px; border-radius: 0; border-bottom: 1px solid rgba(242,242,245,.07); color: var(--sobre-oscuro); }
.menu-movil nav .boton { margin-top: 14px; justify-content: center; border-bottom: 0; padding: 14px 20px; }

/* ---------- Portada ---------- */
.portada { background: var(--carbon); color: var(--sobre-oscuro); position: relative; overflow: hidden; }
.portada .trazo { position: absolute; inset: 0; pointer-events: none; }
.portada .trazo svg { position: absolute; right: -8%; top: -10%; width: 62%; height: 130%; }
.portada > .envoltura { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding-block: 64px 72px; }
.portada .sello-marca { height: 24px; width: auto; }
.portada .para-quien { display: inline-flex; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--morado-claro); border: 1px solid rgba(167,139,250,.35); border-radius: 999px; padding: 5px 12px; }
.portada h1 { font-family: var(--cuerpo); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(2.5rem, 5.6vw, 4.5rem); margin-top: 24px; }
.portada h1.largo { font-size: clamp(2rem, 4.1vw, 3.3rem); line-height: 1.08; }
.portada h1 em { font-style: normal; color: var(--morado-claro); }
.portada .claim { margin-top: 24px; font-size: clamp(1.06rem, 1.6vw, 1.2rem); color: var(--sobre-oscuro-2); max-width: 48ch; }
.portada .claim b { color: var(--sobre-oscuro); font-weight: 600; }
.portada .claim + .claim { margin-top: 14px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Portada de proveedores (17/09): ilustración de Praxist + flujo de tareas */
.portada-prov > .envoltura { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); padding-block: 56px 64px; row-gap: 28px; }
.portada-prov h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); margin-top: 20px; }
.portada-prov h1 em { display: block; }
.heroe-ilus { margin: 0; position: relative; }
.ilus-praxist { width: 100%; height: auto; display: block; overflow: visible; }
.ilus-praxist .orbita { fill: none; stroke: rgba(167,139,250,.35); stroke-width: 1.5; stroke-dasharray: 6 8; }
.ilus-praxist .orbita.tenue { stroke: rgba(167,139,250,.18); }
.ilus-praxist .conector { stroke: rgba(167,139,250,.45); stroke-width: 1.5; stroke-dasharray: 3 6; fill: none; }
.ilus-praxist .chispas circle, .ilus-praxist .chispas path { fill: #a78bfa; opacity: .7; }
.ilus-praxist .sombra { fill: rgba(0,0,0,.35); }
.ilus-praxist .patas path { fill: none; stroke: #5b21b6; stroke-width: 12; stroke-linecap: round; }
.ilus-praxist .pies circle { fill: #5b21b6; }
.ilus-praxist .panza { fill: rgba(167,139,250,.18); }
.ilus-praxist .cabeza { fill: #6d28d9; }
.ilus-praxist .ojo-blanco { fill: #f7f5ff; }
.ilus-praxist .pupila { fill: #15151b; }
.ilus-praxist .brillo { fill: #fff; }
.ilus-praxist .ojitos circle { fill: #f7f5ff; opacity: .85; }
.ilus-praxist .sonrisa { fill: none; stroke: #15151b; stroke-width: 4.5; stroke-linecap: round; }
.ilus-praxist .diadema { fill: none; stroke: #a78bfa; stroke-width: 8; stroke-linecap: round; }
.ilus-praxist .audifono { fill: #a78bfa; }
.ilus-praxist .microfono { fill: none; stroke: #a78bfa; stroke-width: 5; stroke-linecap: round; }
.ilus-praxist .objeto { fill: #15151b; stroke: #a78bfa; stroke-width: 2.5; }
.ilus-praxist .objeto-lineas { fill: none; stroke: #f2f2f5; stroke-width: 3; stroke-linecap: round; opacity: .8; }
.ilus-praxist .objeto-lineas-relleno { fill: #2f2f3a; }
.ilus-praxist .objeto-acento { fill: #a78bfa; stroke: none; }
.ilus-praxist .objeto-acento-relleno { fill: #a78bfa; }
.ilus-praxist .objeto-acento-linea { fill: none; stroke: #a78bfa; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ilus-praxist .objeto-claro { fill: rgba(242,242,245,.7); }
.ilus-praxist .llave { fill: none; stroke: #f2f2f5; stroke-width: 9; stroke-linecap: round; }
.ilus-praxist .el-caja { fill: #24242d; stroke: rgba(167,139,250,.45); stroke-width: 1.5; }
.ilus-praxist .el-ico { fill: none; stroke: #f2f2f5; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ilus-praxist .el-ico .acento { stroke: #a78bfa; }
.ilus-praxist .el-ico .acento-relleno { fill: #a78bfa; stroke: none; }
.ilus-praxist .el-ico .blanco-relleno { fill: rgba(242,242,245,.55); stroke: none; }
.ilus-praxist .flota { animation: flotar 5s ease-in-out infinite; }
.ilus-praxist .e2 .flota { animation-delay: -.8s; } .ilus-praxist .e3 .flota { animation-delay: -1.6s; } .ilus-praxist .e4 .flota { animation-delay: -2.4s; } .ilus-praxist .e5 .flota { animation-delay: -3.2s; } .ilus-praxist .e6 .flota { animation-delay: -4s; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .ilus-praxist .flota { animation: none; } }
.flujo-tareas { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; counter-reset: none; }
.etapa { position: relative; background: rgba(242,242,245,.04); border: 1px solid rgba(242,242,245,.1); border-radius: 20px; padding: 20px 20px 18px; display: grid; gap: 10px; align-content: start; }
.etapa:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 30px; width: 12px; height: 12px; border-top: 2px solid var(--morado-claro); border-right: 2px solid var(--morado-claro); transform: rotate(45deg); z-index: 1; }
.etapa-num { font-family: var(--mono); font-size: .72rem; color: var(--morado-claro); }
.etapa h3 { font-size: 1.15rem; color: #fff; letter-spacing: -.015em; }
.etapa ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.etapa ul li { font-size: .82rem; font-weight: 500; color: var(--sobre-oscuro); background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.25); border-radius: 999px; padding: 4px 11px; }
.heroe-remate { grid-column: 1 / -1; text-align: center; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; font-size: clamp(1.1rem, 2.2vw, 1.55rem); color: #fff; text-wrap: balance; margin-top: 6px; }
.heroe-remate em { font-style: normal; color: var(--morado-claro); }
.portada-chats .titulo-grande { font-family: var(--cuerpo); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-top: 20px; }
.portada-chats .titulo-grande em { font-style: normal; color: var(--morado-claro); }
@media (max-width: 980px) {
  .portada-prov > .envoltura { grid-template-columns: 1fr; }
  .heroe-ilus { max-width: 520px; justify-self: center; width: 100%; }
  .flujo-tareas { grid-template-columns: 1fr; }
  .etapa:not(:last-child)::after { right: auto; left: 30px; top: auto; bottom: -13px; transform: rotate(135deg); }
}

/* Portada de compañías (17/09): del usuario al proveedor, con la plataforma en la mitad */
.portada-comp > .envoltura { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; padding-block: 56px 64px; gap: 48px; }
.portada-comp .heroe-texto { max-width: 640px; }
.portada-comp h1.largo { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.enc-flujo { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 26px 24px; border-radius: 26px; background: rgba(242,242,245,.04); border: 1px solid rgba(242,242,245,.1); }
.enc-punta { display: grid; justify-items: center; gap: 8px; text-align: center; width: auto; }
.enc-ico { width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center; background: var(--carbon-2); border: 1px solid rgba(242,242,245,.14); color: #fff; }
.enc-ico.morado { background: var(--morado); border-color: var(--morado); box-shadow: 0 12px 30px rgba(91,33,182,.5); }
.enc-ico svg { width: 30px; height: 30px; }
.enc-punta b { font-family: var(--display); font-weight: 600; font-size: 1rem; color: #fff; }
.enc-nota { font-size: .82rem; color: var(--sobre-oscuro-2); }
.enc-camino { position: relative; width: 100%; min-height: 360px; }
.enc-linea { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(167,139,250,.35), var(--morado-claro), rgba(167,139,250,.35)); border-radius: 3px; }
.enc-plataforma { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: grid; justify-items: center; text-align: center; gap: 4px; background: var(--carbon); border: 1.5px solid var(--morado-claro); border-radius: 18px; padding: 12px 18px 12px 14px; box-shadow: 0 16px 40px rgba(91,33,182,.45); }
.enc-plataforma img { width: 36px; height: 36px; border-radius: 10px; }
.enc-plataforma b { font-family: var(--display); font-weight: 600; font-size: 1rem; color: #fff; display: block; }
.enc-plataforma span { font-size: .78rem; color: var(--sobre-oscuro-2); }
.enc-paquete { display: none; position: absolute; top: calc(50% + 30px); left: 0; z-index: 1; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--carbon-2); border: 1px solid rgba(167,139,250,.35); animation: enc-viaja 4s ease-in-out infinite; }
.enc-paquete span { font-family: var(--mono); font-size: .62rem; color: var(--sobre-oscuro-2); background: rgba(167,139,250,.12); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
@keyframes enc-viaja { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 210px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .enc-paquete { animation: none; left: calc(50% - 105px); top: calc(50% + 30px); } }
.enc-paso { position: absolute; left: 50%; top: var(--x); transform: translate(-50%, -50%); z-index: 2; display: grid; justify-items: center; gap: 6px; }
.enc-paso i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--carbon); border: 2px solid var(--morado-claro); color: var(--morado-claro); }
.enc-paso i svg { width: 20px; height: 20px; }
.enc-paso small { position: absolute; top: 13px; right: 56px; white-space: nowrap; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sobre-oscuro-2); }
@media (max-width: 860px) {
  .enc-flujo { padding: 22px 16px; }

  .enc-camino { min-height: 380px; }



  .enc-plataforma { padding: 10px 14px 10px 10px; }

}

/* Compañías (17/09): línea de tiempo + diagrama de mejoras */
.tl-comp { list-style: none; display: grid; gap: 18px; position: relative; }
.tl-item { display: grid; grid-template-columns: 124px 52px minmax(0, 1fr); align-items: start; gap: 0 18px; position: relative; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 150px; top: 52px; bottom: -22px; width: 2px; background: linear-gradient(var(--morado), rgba(91,33,182,.25)); }
.tl-tiempo { justify-self: end; margin-top: 12px; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--morado); background: var(--lila); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.tl-punto { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--morado); color: #fff; box-shadow: 0 0 0 6px var(--blanco), 0 10px 24px rgba(91,33,182,.3); z-index: 1; }
.tl-punto svg { width: 24px; height: 24px; }
.tl-caja { position: relative; background: var(--bruma); border: 1px solid var(--borde); border-radius: 20px; padding: 20px 22px; display: grid; gap: 8px; }
.tl-num { font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); }
.tl-caja h3 { font-size: 1.12rem; letter-spacing: -.015em; }
.tl-caja p { color: var(--texto-2); font-size: .95rem; }
.tl-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tl-chips li { font-size: .78rem; font-weight: 500; color: var(--morado); background: var(--blanco); border: 1px solid #d9ccf7; border-radius: 999px; padding: 4px 11px; }
.tl-sello { position: absolute; top: -12px; right: 18px; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--morado); border-radius: 999px; padding: 5px 12px; box-shadow: 0 8px 20px rgba(91,33,182,.35); }
/* Línea de tiempo con color, ilustraciones y movimiento (17/09) */
.tl-item.p1 { --acento: #5b21b6; --suave: #ede7fb; }
.tl-item.p2 { --acento: #0f5b66; --suave: #dff1f3; }
.tl-item.p3 { --acento: #3f4a5a; --suave: #e6ebf2; }
.tl-item.p4 { --acento: #d97706; --suave: #fdf1de; }
.tl-item .tl-tiempo { color: var(--acento); background: var(--suave); }
.tl-item .tl-punto { background: linear-gradient(145deg, var(--acento), #1b1b22); }
.tl-item .tl-caja { background: linear-gradient(160deg, var(--blanco) 0%, var(--suave) 140%); border-color: color-mix(in srgb, var(--acento) 28%, var(--borde)); border-left: 4px solid var(--acento); }
.tl-item .tl-chips li { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 35%, #fff); }
.tl-item .tl-sello { background: var(--acento); }
.tl-item:not(:last-child)::before { background: linear-gradient(var(--acento), rgba(91,33,182,.2)); }
.tl-punto::after { content: ""; position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--acento); opacity: .5; animation: tl-pulso 2.6s ease-out infinite; }
.tl-item.p2 .tl-punto::after { animation-delay: .6s; } .tl-item.p3 .tl-punto::after { animation-delay: 1.2s; } .tl-item.p4 .tl-punto::after { animation-delay: 1.8s; }
@keyframes tl-pulso { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.tl-punto { position: relative; }
.mini { margin-top: 12px; border-radius: 14px; background: var(--blanco); border: 1px solid color-mix(in srgb, var(--acento) 18%, var(--borde)); padding: 14px; }
/* 01 canales */
.mini-canales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 8px 10px; align-items: center; }
.canal { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: var(--pizarra); background: var(--bruma); border-radius: 999px; padding: 6px 12px 6px 8px; animation: canal-entra 3.2s ease-in-out infinite; }
.canal svg { width: 16px; height: 16px; color: var(--acento); }
.canal.c2 { animation-delay: .35s; } .canal.c3 { animation-delay: .7s; } .canal.c4 { animation-delay: 1.05s; }
@keyframes canal-entra { 0%, 60%, 100% { transform: translateX(0); box-shadow: none; } 20% { transform: translateX(6px); box-shadow: 0 6px 16px rgba(91,33,182,.22); } }
.mini-destino { grid-column: 3; grid-row: 1 / 3; position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: var(--carbon); }
.mini-destino i { position: absolute; inset: 0; border-radius: 18px; border: 2px solid var(--acento); animation: tl-pulso 2.4s ease-out infinite; }
/* 02 red de proveedores */
.mini-red { display: grid; gap: 8px; position: relative; }
.prov { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--bruma); border-radius: 12px; padding: 7px 10px; font-size: .82rem; }
.prov-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--acento); }
.prov-ico svg { width: 16px; height: 16px; }
.prov b { font-weight: 600; color: var(--texto); }
.prov-estado { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; }
.prov-estado.ok { color: #0f5b66; background: #d7eef1; }
.prov-estado.espera { color: var(--texto-2); background: #e9e9ef; animation: parpadeo 1.4s ease-in-out infinite; }
@keyframes parpadeo { 50% { opacity: .45; } }
.mini-reloj { justify-self: end; margin-top: 2px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .74rem; color: #fff; background: var(--acento); border-radius: 999px; padding: 4px 12px; box-shadow: 0 8px 20px rgba(15,91,102,.35); }
.mini-reloj i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: parpadeo 1s steps(2, end) infinite; }
/* 03 tablero */
.mini-tablero { display: grid; gap: 10px; }
.tb-fila { display: grid; grid-template-columns: 10px 140px minmax(0, 1fr); gap: 10px; align-items: center; font-size: .8rem; color: var(--texto-2); }
.tb-luz { width: 10px; height: 10px; border-radius: 50%; }
.tb-luz.verde { background: #0f5b66; } .tb-luz.lila { background: var(--morado-claro); } .tb-luz.ambar { background: var(--ambar); animation: parpadeo 1.6s ease-in-out infinite; }
.tb-barra { height: 10px; border-radius: 6px; background: var(--bruma); position: relative; overflow: hidden; }
.tb-barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 6px; background: var(--color, #0f5b66); animation: tb-crece 2.4s ease-out infinite; transform-origin: left; }
.tb-fila:nth-child(2) .tb-barra { --color: #a78bfa; }
.tb-barra.ambar::after { background: var(--ambar); }
@keyframes tb-crece { 0% { transform: scaleX(.15); } 55%, 100% { transform: scaleX(1); } }
/* 04 alerta y escalamiento */
.mini-alerta { display: grid; gap: 12px; justify-items: start; }
.alerta-punto { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; color: #92400e; background: var(--suave); border: 1px solid #f4d9b0; border-radius: 999px; padding: 6px 14px 6px 10px; animation: parpadeo 1.8s ease-in-out infinite; }
.alerta-punto svg { width: 18px; height: 18px; color: var(--ambar); }
.cadena { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .78rem; }
.cadena span { background: var(--bruma); border-radius: 999px; padding: 5px 11px; font-weight: 600; color: var(--pizarra); }
.cadena span.fin { color: #fff; background: var(--acento); }
.cadena i { font-style: normal; color: var(--ambar); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tl-punto::after, .canal, .mini-destino i, .prov-estado.espera, .mini-reloj i, .tb-luz.ambar, .tb-barra::after, .alerta-punto { animation: none; } }
@media (max-width: 860px) { .mini-canales { grid-template-columns: minmax(0, 1fr) auto; } .tb-fila { grid-template-columns: 10px 110px minmax(0, 1fr); } }

.mejoras { margin-top: 44px; }
.mejoras-titulo { text-align: center; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--morado); margin-bottom: 18px; }
.mejoras-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; position: relative; }
.mejora { background: var(--bruma); border: 1px solid var(--borde); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.mejora-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lila); color: var(--morado); }
.mejora-ico svg { width: 21px; height: 21px; }
.mejora b { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -.015em; }
.mejora p { color: var(--texto-2); font-size: .92rem; }
.mejoras-centro { grid-column: 1 / -1; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 20px; border-radius: 20px; background: radial-gradient(90% 140% at 50% 0%, rgba(91,33,182,.5) 0%, rgba(91,33,182,0) 70%), var(--carbon); color: var(--sobre-oscuro); position: relative; }
.mejoras-centro::before, .mejoras-centro::after { content: ""; position: absolute; left: 50%; width: 2px; height: 16px; background: var(--morado); }
.mejoras-centro::before { top: -16px; } .mejoras-centro::after { bottom: -16px; }
.mejoras-centro img { width: 46px; height: 46px; border-radius: 13px; }
.mejoras-centro b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: #fff; }
.mejoras-centro span { font-size: .86rem; color: var(--sobre-oscuro-2); }
.letrero { margin-top: 36px; display: flex; align-items: center; gap: 18px; border-radius: 22px; padding: 22px 26px; background: linear-gradient(160deg, #f6f2fd 0%, var(--lila) 100%); border: 1px solid #d9ccf7; }
.letrero-ico { flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--morado); color: #fff; }
.letrero-ico svg { width: 26px; height: 26px; }
.letrero p { color: var(--pizarra); font-size: 1.05rem; }
.letrero b { color: var(--texto); font-weight: 600; }
@media (max-width: 860px) {
  .tl-item { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; }
  .tl-item::before { left: 25px !important; top: 58px; }
  .tl-tiempo { grid-column: 2; justify-self: start; margin: 0 0 2px; }
  .tl-punto { grid-row: 1 / 3; }
  .tl-caja { grid-column: 2; }
  .tl-sello { position: static; justify-self: start; }
  .mejoras-grid { grid-template-columns: 1fr; }
  .letrero { flex-direction: column; align-items: flex-start; padding: 20px; }
}

/* Compañías (17/09): y si tu proveedor también usa Praxist */
.puente { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 34px; }
.puente-lado { display: grid; justify-items: center; gap: 8px; width: 140px; }
.puente-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--carbon-2); border: 1px solid rgba(242,242,245,.14); color: #fff; }
.puente-ico.morado { background: var(--morado); border-color: var(--morado); box-shadow: 0 12px 30px rgba(91,33,182,.45); }
.puente-ico svg { width: 28px; height: 28px; }
.puente-lado b { font-family: var(--display); font-weight: 600; font-size: .98rem; color: #fff; }
.puente-medio { position: relative; min-height: 90px; display: grid; place-items: center; }
.puente-linea { position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, var(--morado-claro) 0 14px, transparent 14px 24px); }
.puente-praxist { position: relative; display: flex; align-items: center; gap: 10px; background: var(--carbon); border: 1.5px solid var(--morado-claro); border-radius: 16px; padding: 10px 16px 10px 12px; box-shadow: 0 14px 34px rgba(91,33,182,.45); }
.puente-praxist img { width: 34px; height: 34px; border-radius: 10px; }
.puente-praxist span { font-size: .86rem; color: var(--sobre-oscuro); }
.ventajas-red { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.ventajas-red li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; background: rgba(242,242,245,.04); border: 1px solid rgba(242,242,245,.09); border-radius: 16px; padding: 16px 18px; }
.vr-num { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(167,139,250,.14); border: 1px solid rgba(167,139,250,.3); color: var(--morado-claro); font-family: var(--mono); font-size: .78rem; }
.ventajas-red b { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -.015em; color: #fff; display: block; margin-bottom: 3px; }
.ventajas-red p { color: var(--sobre-oscuro-2); font-size: .92rem; }
.cierre-red { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; border-radius: 24px; padding: 30px 34px; background: linear-gradient(160deg, rgba(91,33,182,.55) 0%, rgba(91,33,182,.15) 100%); border: 1px solid rgba(167,139,250,.4); }
.cierre-red > div { display: grid; gap: 8px; max-width: 640px; }
.cierre-red h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -.02em; color: #fff; }
.cierre-red p { color: var(--sobre-oscuro-2); }
@media (max-width: 860px) {
  .puente { grid-template-columns: 1fr; justify-items: center; }
  .puente-medio { min-height: 120px; width: 100%; }
  .puente-linea { left: 50%; right: auto; top: 0; bottom: 0; height: auto; width: 3px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, var(--morado-claro) 0 14px, transparent 14px 24px); }
  .ventajas-red { grid-template-columns: 1fr; }
  .cierre-red { padding: 24px 20px; }
}

/* Chats de ejemplo */
.chats { display: grid; gap: 16px; margin: 0; }
.chat { background: var(--carbon-2); border: 1px solid var(--linea-oscura); border-radius: 20px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.35); display: grid; gap: 10px; }
.chat + .chat { margin-left: 40px; }
.chats .chat:first-child { margin-right: 40px; }
.chat-cab { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(242,242,245,.08); }
.chat-cab img { width: 32px; height: 32px; border-radius: 9px; }
.chat-cab div { display: grid; line-height: 1.3; }
.chat-cab b { font-size: .9rem; }
.chat-cab span { font-size: .76rem; color: var(--sobre-oscuro-2); }
.en-vivo { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--morado-claro); white-space: nowrap; }
.en-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--morado-claro); animation: latido 1.8s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(167,139,250,.55); } 70% { box-shadow: 0 0 0 8px rgba(167,139,250,0); } 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); } }
@media (prefers-reduced-motion: reduce) { .en-vivo::before { animation: none; } }
.mensaje { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: .88rem; line-height: 1.42; }
.mensaje small { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 3px; opacity: .75; }
.mensaje.otro { background: var(--carbon-3); color: var(--sobre-oscuro); border-bottom-left-radius: 4px; }
.mensaje.ia { justify-self: end; background: var(--morado); color: #fff; border-bottom-right-radius: 4px; }
.adjunto { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--sobre-oscuro-2); }
.adjunto i { display: grid; place-items: center; width: 46px; height: 34px; border-radius: 8px; background: #3a3a46; font-style: normal; flex: none; }
.placa { font-family: var(--mono); font-size: .7rem; background: #f7d23e; color: #1b1b22; border: 1px solid #1b1b22; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.servicio { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.28); border-radius: 12px; padding: 10px 12px; font-size: .8rem; }
.servicio b { font-family: var(--mono); font-weight: 500; font-size: .76rem; }
.estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--morado-claro); margin-left: auto; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--morado-claro); }
.cronometro { display: flex; align-items: center; gap: 14px; background: var(--morado); color: #fff; border-radius: 14px; padding: 12px 16px; }
.cronometro b { font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1; }
.cronometro span { font-size: .84rem; line-height: 1.35; }
.nota-ejemplo { font-size: .72rem; color: #8a8a96; text-align: right; }

/* ---------- Secciones ---------- */
[id] { scroll-margin-top: 68px; }
.bloque { padding-block: 64px; }
.blanco { background: var(--blanco); border-block: 1px solid var(--borde); }
.oscuro { background: var(--carbon); color: var(--sobre-oscuro); }
.bloque-cab { display: grid; gap: 12px; max-width: 780px; margin-bottom: 36px; }
.bloque-cab h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.bloque-cab p { color: var(--texto-2); font-size: 1.08rem; max-width: 62ch; }
.oscuro .bloque-cab p { color: var(--sobre-oscuro-2); }
.remate { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-size: clamp(1.2rem, 2.3vw, 1.6rem); text-wrap: balance; margin-top: 52px; max-width: 30ch; }
.remate em { font-style: normal; color: var(--morado); }
.oscuro .remate em { color: var(--morado-claro); }

/* Una plataforma, toda la operación */
.presentacion { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.presentacion .bloque-cab { margin-bottom: 0; }
.presentacion .fuerte { font-weight: 600; color: var(--texto); }
.tareas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 2px solid var(--carbon); }
.tareas li { display: flex; align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--borde); font-weight: 500; }
.tareas li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--lila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b21b6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tareas-remate { grid-column: 1 / -1; }

/* El problema: así funciona hoy */
.cadena { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; }
.cadena li { display: inline-flex; align-items: center; gap: 8px; }
.cadena li:not(:last-child)::after { content: "→"; color: var(--texto-3); font-size: 1.1rem; }
.cadena span { display: inline-flex; align-items: center; gap: 8px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 999px; padding: 9px 16px; font-weight: 500; white-space: nowrap; }
.cadena .manual span { border-color: rgba(217,119,6,.45); background: #fdf6ec; }
.cadena .manual span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); }
.leyenda-manual { display: flex; align-items: center; gap: 8px; margin-top: 26px; color: var(--texto-2); font-size: .92rem; }
.leyenda-manual::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); }

/* Dos experiencias / rutas */
.experiencias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.experiencia { display: grid; gap: 14px; align-content: start; padding: 34px; border-radius: 22px; text-decoration: none; background: var(--blanco); border: 1px solid var(--borde); transition: border-color .15s, transform .15s; }
.experiencia:hover { border-color: var(--morado); transform: translateY(-2px); }
.experiencia.oscura { background: var(--carbon); color: var(--sobre-oscuro); border-color: var(--carbon); }
.experiencia .etiqueta { color: var(--morado); }
.experiencia.oscura .etiqueta { color: var(--morado-claro); }
.experiencia h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.experiencia p { color: var(--texto-2); }
.experiencia.oscura p { color: var(--sobre-oscuro-2); }
.experiencia .fuerte { color: var(--texto); font-weight: 600; }
.experiencia.oscura .fuerte { color: var(--sobre-oscuro); }
.experiencia .ir { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--morado); margin-top: 6px; }
.experiencia.oscura .ir { color: var(--morado-claro); }
.experiencia .ir svg { width: 18px; height: 18px; }

/* Cómo funciona: diagrama + pasos */
.diagrama { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-bottom: 18px; }
.diagrama li { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.diagrama li:not(:last-child)::after { content: ""; position: absolute; top: 27px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 2px; background: repeating-linear-gradient(90deg, var(--texto-3) 0 6px, transparent 6px 11px); }
.diagrama .nodo { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--blanco); border: 1px solid var(--borde); color: var(--carbon); }
.diagrama .nodo svg { width: 24px; height: 24px; }
.diagrama .nodo.px { background: var(--carbon); border-color: var(--carbon); }
.diagrama .nodo.px img { width: 30px; height: 30px; }
.diagrama b { font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; }
.diagrama .praxist b { color: var(--morado); }
.diagrama-remate { text-align: center; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 34px 0 64px; }
.diagrama-remate em { font-style: normal; color: var(--morado); }

.pasos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: paso; }
.paso { counter-increment: paso; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 20px; padding: 22px; }
.paso::before { content: counter(paso, decimal-leading-zero); font-family: var(--mono); font-size: .8rem; color: var(--morado); }
.paso h3 { font-size: 1.06rem; letter-spacing: -.015em; }
.paso .burbujas { display: grid; gap: 8px; align-content: start; background: var(--bruma); border-radius: 14px; padding: 12px; }
.paso .canal { font-family: var(--mono); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); }
.burbuja { max-width: 92%; padding: 8px 12px; border-radius: 13px; font-size: .88rem; line-height: 1.4; }
.burbuja.otro { background: var(--blanco); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.burbuja.ia { justify-self: end; background: var(--morado); color: #fff; border-bottom-right-radius: 4px; }
.burbuja small { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.burbuja-fotos { display: flex; gap: 6px; }
.burbuja-fotos i { width: 38px; height: 30px; border-radius: 7px; background: #d6d6de; display: grid; place-items: center; }
.burbuja-fotos i svg { width: 15px; height: 15px; }
.paso p { color: var(--texto-2); font-size: .94rem; }

/* Todo lo que puede hacer (operación) */
.capacidades { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.capacidad { background: var(--bruma); border: 1px solid var(--borde); border-radius: 18px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.blanco .capacidad { background: var(--bruma); }
.capacidad .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--lila); color: var(--morado); display: grid; place-items: center; margin-bottom: 6px; }
.capacidad .ico svg { width: 22px; height: 22px; }
.capacidad h3 { font-size: 1rem; letter-spacing: -.01em; }
.capacidad p { color: var(--texto-2); font-size: .93rem; }
.capacidad.cierre { background: var(--carbon); border-color: var(--carbon); color: var(--sobre-oscuro); }
.capacidad.cierre .ico { background: var(--morado); color: #fff; }
.capacidad.cierre p { color: var(--sobre-oscuro-2); }

/* De la operación a la administración */
.administracion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: 20px; padding: 30px; display: grid; gap: 12px; align-content: start; }
.tarjeta h3 { font-size: 1.2rem; letter-spacing: -.015em; }
.tarjeta p { color: var(--texto-2); }
.tarjeta .subtitulo { font-size: .92rem; font-weight: 600; color: var(--texto); }
.fichas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fichas li { font-size: .88rem; font-weight: 500; background: var(--bruma); border: 1px solid var(--borde); border-radius: 999px; padding: 5px 12px; }
.oscuro .fichas li { background: var(--carbon-2); border-color: var(--linea-oscura); color: var(--sobre-oscuro); }

/* KPIs */
.kpis { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.kpis .bloque-cab { margin-bottom: 0; }
.preguntas { list-style: none; display: grid; gap: 10px; }
.preguntas li { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--carbon-2); border: 1px solid var(--linea-oscura); border-radius: 14px; padding: 16px 20px; font-family: var(--display); font-weight: 600; letter-spacing: -.015em; font-size: clamp(.98rem, 1.6vw, 1.12rem); }
.preguntas li::after { content: ""; flex: none; width: 54px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 20' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 17l10-6 9 4 11-9 9 5 13-9'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Módulos */
.a-medida { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: 52px; }
.a-medida .bloque-cab { margin-bottom: 0; }
.a-medida .lema { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.25; max-width: 18ch; padding-left: 20px; border-left: 3px solid var(--morado); }
.modulos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.modulo { background: var(--bruma); border: 1px solid var(--borde); border-radius: 20px; padding: 28px; display: grid; gap: 12px; align-content: start; }
.modulo-cab { display: flex; align-items: center; gap: 14px; }
.modulo .ico { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--blanco); border: 1px solid var(--borde); color: var(--carbon); }
.modulo.operacion .ico { background: var(--lila); border-color: var(--lila); color: var(--morado); }
.modulo .ico svg { width: 23px; height: 23px; }
.modulo .grupo-mod { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); display: block; }
.modulo h3 { font-size: 1.12rem; letter-spacing: -.015em; }
.modulo p { color: var(--texto-2); font-size: .96rem; }
.modulo p b { color: var(--texto); font-weight: 600; }
.modulo .fichas li { background: var(--blanco); }
.modulo .extra-ia { border-top: 1px dashed var(--borde); padding-top: 12px; margin-top: 4px; }
.modulo.ancho { grid-column: 1 / -1; }

/* Cuánto cuesta */
.cuesta { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: 30px 34px; border-radius: 20px; background: var(--lila); border: 1px solid #d9ccf7; }
.cuesta > div { display: grid; gap: 6px; max-width: 640px; }
.cuesta .etiqueta { color: var(--morado); }
.cuesta h3 { font-size: clamp(1.2rem, 2.3vw, 1.6rem); letter-spacing: -.02em; }
.cuesta p { color: var(--pizarra); }

/* Productos especiales para proveedores: se nombran solo en la demostración */
.especiales { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 34px 36px; border-radius: 20px; background: var(--carbon); color: var(--sobre-oscuro); position: relative; overflow: hidden; }
.especiales::after { content: ""; position: absolute; right: -40px; top: -60px; width: 90px; height: 260px; background: var(--morado); opacity: .45; transform: rotate(32deg); pointer-events: none; }
.especiales > div { display: grid; gap: 10px; max-width: 640px; position: relative; z-index: 1; }
.especiales .boton { position: relative; z-index: 1; }
.etiqueta-especial { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--morado-claro); }
.especiales h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -.02em; }
.especiales p { color: var(--sobre-oscuro-2); }

/* IA en el centro */
.ia-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(242,242,245,.14); }
.ia-tres > div { padding: 30px 30px 8px 0; display: grid; gap: 14px; align-content: start; }
.ia-tres > div + div { padding-left: 30px; border-left: 1px solid rgba(242,242,245,.1); }
.ia-tres h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--morado-claro); }
.ia-tres .fichas li { font-size: .92rem; }

/* Por qué */
.razones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.razon { border-radius: 20px; padding: 32px; background: var(--blanco); border: 1px solid var(--borde); display: grid; gap: 12px; align-content: start; }
.razon.destacada { background: var(--carbon); color: var(--sobre-oscuro); border-color: var(--carbon); grid-row: span 2; align-content: space-between; }
.razon.destacada p { color: var(--sobre-oscuro-2); }
.razon.destacada h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.razon h3 { font-size: 1.2rem; letter-spacing: -.015em; }
.razon .antetitulo { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--morado); }
.razon.destacada .antetitulo { color: var(--morado-claro); }
.razon p { color: var(--texto-2); }
.razon p.fuerte { color: var(--texto); font-weight: 600; }
.razon.destacada p.fuerte { color: var(--sobre-oscuro); }
.direccion { font-family: var(--mono); font-size: 1rem; color: var(--sobre-oscuro); background: var(--carbon-2); border: 1px solid rgba(242,242,245,.1); border-radius: 12px; padding: 14px 16px; }
.direccion span { color: var(--morado-claro); }
.navegador { border-radius: 14px; overflow: hidden; border: 1px solid rgba(242,242,245,.12); background: var(--carbon-2); }
.navegador-barra { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(242,242,245,.08); }
.navegador-barra i { display: flex; gap: 5px; }
.navegador-barra i::before, .navegador-barra i::after, .navegador-barra i span { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #454552; display: block; }
.navegador .direccion { flex: 1; min-width: 0; font-size: .86rem; padding: 7px 12px; border-radius: 8px; background: var(--carbon); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navegador-cuerpo { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 16px; }
.navegador-cuerpo .lateral { display: grid; gap: 8px; align-content: start; }
.navegador-cuerpo .tu-logo { height: 30px; border: 1.5px dashed rgba(167,139,250,.6); border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--morado-claro); }
.navegador-cuerpo .raya { height: 8px; border-radius: 4px; background: #34343f; }
.navegador-cuerpo .raya.corta { width: 60%; }
.navegador-cuerpo .principal { display: grid; gap: 10px; align-content: start; }
.navegador-cuerpo .fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.navegador-cuerpo .fila span { height: 44px; border-radius: 8px; background: #2c2c37; }
.navegador-cuerpo .fila span:first-child { background: rgba(167,139,250,.22); }
.navegador-pie { font-size: .74rem; color: var(--sobre-oscuro-2); text-align: right; padding: 0 16px 12px; }

/* Equipo */
.equipo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.equipo-grid .bloque-cab { margin-bottom: 0; }
.personas { display: grid; gap: 16px; }
.persona { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px; border: 1px solid var(--borde); border-radius: 18px; background: var(--bruma); }
.inicial { width: 64px; height: 64px; border-radius: 18px; background: var(--carbon); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; }
.persona:nth-child(2) .inicial { background: var(--morado); }
.persona b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.015em; display: block; }
.persona span { color: var(--texto-2); font-size: .92rem; }
.persona .inicial { color: #fff; font-size: 1.2rem; }
.persona { background: var(--blanco); }

/* Contacto */
.contacto { background: var(--carbon); color: var(--sobre-oscuro); position: relative; overflow: hidden; }
.contacto .envoltura { position: relative; display: grid; gap: 22px; justify-items: start; padding-block: 64px; }
.contacto .sello-marca { height: 24px; width: auto; }
.contacto h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 18ch; }
.contacto p { color: var(--sobre-oscuro-2); font-size: 1.1rem; max-width: 52ch; }
.contacto p b { color: var(--sobre-oscuro); font-weight: 600; }
.contacto .acciones { align-items: center; margin-top: 8px; }
.correo { font-family: var(--mono); font-size: clamp(.98rem, 2vw, 1.15rem); color: var(--morado-claro); text-decoration: none; border-bottom: 1px solid rgba(167,139,250,.4); }
.correo:hover { border-bottom-color: var(--morado-claro); }
.contacto .trazo { position: absolute; right: -4%; bottom: -30%; width: 42%; height: 150%; pointer-events: none; }

/* Contacto + quiénes somos en una sola sección (17/09) */
.contacto .envoltura.contacto-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; justify-items: stretch; }
.contacto-texto { display: grid; gap: 22px; justify-items: start; position: relative; z-index: 1; }
.equipo-contacto { position: relative; z-index: 1; display: grid; gap: 12px; background: rgba(36,36,45,.88); border: 1px solid var(--linea-oscura); border-radius: 22px; padding: 28px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.equipo-contacto .etiqueta { color: var(--morado-claro); }
.equipo-contacto h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); max-width: none; }
.equipo-contacto > p { font-size: .98rem; color: var(--sobre-oscuro-2); max-width: none; }
.equipo-contacto .personas { margin-top: 8px; gap: 12px; }
.equipo-contacto .persona { background: var(--carbon); border-color: var(--linea-oscura); padding: 14px; grid-template-columns: 52px minmax(0, 1fr); }
.equipo-contacto .inicial { width: 52px; height: 52px; border-radius: 15px; font-size: 1.05rem; background: var(--carbon-3); }
.equipo-contacto .persona:nth-child(2) .inicial { background: var(--morado); }
.equipo-contacto .persona b { color: var(--sobre-oscuro); font-size: .98rem; }
.equipo-contacto .persona span { color: var(--sobre-oscuro-2); }
.equipo-contacto .persona .inicial { color: #fff; }
@media (max-width: 980px) { .contacto .envoltura.contacto-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 720px) { .equipo-contacto { padding: 22px 18px; } }

/* Pie */
.pie { background: var(--noche); color: var(--sobre-oscuro-2); font-size: .88rem; padding-bottom: env(safe-area-inset-bottom, 0px); }
.pie .envoltura { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 32px; padding-block: 36px; }
.pie .marca-pie { display: grid; gap: 6px; }
.pie img { height: 20px; width: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; }
.pie a { color: var(--sobre-oscuro); text-decoration: none; }
.pie a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .barra .menu-escritorio a { padding-inline: 8px; font-size: .88rem; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capacidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .barra .menu-escritorio, .barra > .envoltura > .boton { display: none; }
  .menu-movil { display: block; margin-left: auto; }
  .portada > .envoltura { grid-template-columns: 1fr; gap: 48px; padding-block: 60px 76px; }
  .portada .trazo svg { width: 110%; right: -40%; }
  .presentacion, .kpis, .equipo-grid { grid-template-columns: 1fr; gap: 40px; }
  .experiencias, .administracion, .modulos-grid, .razones { grid-template-columns: 1fr; }
  .modulo.ancho { grid-column: auto; }
  .razon.destacada { grid-row: auto; gap: 24px; }
  .a-medida { grid-template-columns: 1fr; }
  .ia-tres { grid-template-columns: 1fr; }
  .ia-tres > div, .ia-tres > div + div { padding: 26px 0 22px; border-left: 0; }
  .ia-tres > div + div { border-top: 1px solid rgba(242,242,245,.1); }
  .diagrama { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .diagrama li:nth-child(3)::after { display: none; }
  .pie .envoltura { grid-template-columns: 1fr; justify-items: start; }
  .pie nav { justify-content: flex-start; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .bloque { padding-block: 48px; }
  .chat + .chat, .chats .chat:first-child { margin: 0; }
  .chat { padding: 14px; }
  .mensaje { max-width: 94%; }
  .tareas { grid-template-columns: 1fr; }
  .pasos, .capacidades { grid-template-columns: 1fr; }
  .diagrama { grid-template-columns: 1fr; row-gap: 0; justify-items: start; }
  .diagrama li { grid-template-columns: 48px auto; justify-items: start; align-items: center; gap: 14px; text-align: left; padding-bottom: 22px; }
  .diagrama li:not(:last-child)::after, .diagrama li:nth-child(3)::after { display: block; top: 52px; bottom: 2px; left: 23px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--texto-3) 0 5px, transparent 5px 9px); }
  .diagrama .nodo { width: 48px; height: 48px; border-radius: 14px; }
  .diagrama-remate { text-align: left; margin: 20px 0 44px; }
  .experiencia, .tarjeta, .modulo, .razon { padding: 24px; }
  .cuesta, .especiales { padding: 26px 22px; }
  .contacto .envoltura { padding-block: 48px; }
  .contacto .trazo { display: none; }
  .preguntas li::after { display: none; }
}

/* ---------- Ronda 2 del inicio (16/09) ---------- */
/* Selector de páginas: tres botones tipo pastilla */
.franja .envoltura { height: 48px; align-items: center; }
.selector { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(242,242,245,.05); border: 1px solid rgba(242,242,245,.08); }
.selector a, .selector a:first-child { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; border-bottom: 0; font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--sobre-oscuro-2); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.selector a:hover { color: #fff; background: rgba(242,242,245,.08); }
.selector a[aria-current="page"] { color: #fff; background: var(--morado); box-shadow: 0 0 0 1px rgba(167,139,250,.35) inset; }
@media (max-width: 480px) {
  .franja .envoltura { padding-inline: 12px; }
  .selector { gap: 2px; padding: 3px; }
  .selector a, .selector a:first-child { padding: 0 9px; font-size: .62rem; letter-spacing: .03em; height: 28px; }
}

/* Portada: beneficios, tiempo entre chats y aviso de fotos */
.beneficios { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; }
.beneficios li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--sobre-oscuro); background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.28); border-radius: 999px; padding: 6px 14px 6px 12px; }
.beneficios li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--morado-claro); }
.chats .tiempo { display: flex; align-items: center; gap: 12px; justify-self: center; background: var(--morado); color: #fff; border-radius: 999px; padding: 9px 18px 9px 12px; font-size: .88rem; line-height: 1.3; box-shadow: 0 12px 30px rgba(91,33,182,.45); position: relative; z-index: 1; margin-block: -4px; }
.chats .tiempo svg { width: 22px; height: 22px; flex: none; }
.chats .tiempo b { font-weight: 700; }
.fotos-chat { justify-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--carbon-3); border-radius: 14px; border-bottom-left-radius: 4px; padding: 8px; }
.fotos-chat i { width: 44px; height: 36px; border-radius: 8px; background: #3a3a46; display: grid; place-items: center; }
.fotos-chat i svg { width: 16px; height: 16px; }
.fotos-chat span { font-family: var(--mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sobre-oscuro-2); padding-inline: 4px; }
.aviso-fotos { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; background: rgba(242,242,245,.04); border: 1px solid rgba(167,139,250,.3); border-radius: 18px; padding: 20px 24px; }
.aviso-fotos .aviso-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--morado); color: #fff; display: grid; place-items: center; }
.aviso-fotos .aviso-ico svg { width: 24px; height: 24px; }
.aviso-fotos p { color: var(--sobre-oscuro-2); font-size: 1.02rem; }
.aviso-fotos b { color: var(--sobre-oscuro); font-weight: 600; }

/* Cómo funciona: pasos que también hace Praxist */
.diagrama .tambien .nodo { position: relative; background: var(--lila); border: 1.5px dashed var(--morado); color: var(--morado); }
.diagrama .tambien b { color: var(--morado); }
.diagrama .marca-tambien { position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 2px var(--blanco); }
.leyenda-tambien { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; color: var(--texto-2); font-size: .95rem; text-align: center; }
.leyenda-tambien .muestra { flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--lila); border: 1.5px dashed var(--morado); }
.imagina { margin-top: 48px; padding: 36px; border-radius: 22px; background: var(--carbon); color: var(--sobre-oscuro); text-align: center; display: grid; gap: 10px; justify-items: center; }
.imagina .pregunta { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.3rem, 2.8vw, 2rem); line-height: 1.2; text-wrap: balance; max-width: 28ch; }
.imagina .remate { margin-top: 0; color: var(--sobre-oscuro-2); font-size: clamp(1rem, 1.8vw, 1.2rem); max-width: 40ch; }
.imagina .remate em { color: var(--morado-claro); }
#experiencias .cuesta { margin-top: 16px; }
.cuesta.cuesta-sola { margin-top: 0; }
#experiencias .cuesta h3 { font-size: clamp(1.4rem, 2.8vw, 2rem); letter-spacing: -.02em; }
#experiencias .cuesta { position: relative; overflow: hidden; background: radial-gradient(90% 140% at 100% 0%, rgba(91,33,182,.5) 0%, rgba(91,33,182,0) 60%), var(--carbon); border-color: var(--carbon); box-shadow: 0 24px 60px rgba(91,33,182,.22); }
#experiencias .cuesta > * { position: relative; z-index: 1; }
#experiencias .cuesta .etiqueta { color: var(--morado-claro); }
#experiencias .cuesta h3 { color: #fff; }
#experiencias .cuesta p { color: var(--sobre-oscuro-2); }
#experiencias .cuesta-factores li { color: #fff; background: rgba(242,242,245,.07); border-color: rgba(242,242,245,.16); }
#experiencias .cuesta-factores li::before { background: var(--morado-claro); }
.cuesta-factores { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cuesta-factores li { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .88rem; color: var(--morado); background: var(--blanco); border: 1px solid #d9ccf7; border-radius: 999px; padding: 5px 13px 5px 11px; }
.cuesta-factores li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--morado); }
#cuanto-cuesta .cuesta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.02em; }

/* Cómo funciona (17/09): anillo con Praxist al centro */
.como-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.como-grid .bloque-cab { margin-bottom: 0; }
.anillo-remate { display: grid; gap: 8px; margin-top: 22px; padding: 22px 24px; border-radius: 18px; background: var(--carbon); color: var(--sobre-oscuro); }
.anillo-remate .pregunta { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-size: clamp(1.15rem, 2vw, 1.45rem); text-wrap: balance; color: var(--sobre-oscuro); max-width: none; }
.anillo-remate .remate { margin: 0; font-family: var(--cuerpo); font-weight: 500; font-size: 1rem; color: var(--sobre-oscuro-2); max-width: none; }
.anillo-remate em { font-style: normal; color: var(--morado-claro); }
.anillo { --n: 64px; position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 34px auto 50px; }
.anillo-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anillo-svg .pista { fill: none; stroke: var(--lila); stroke-width: 7; }
.anillo-svg .arco { fill: none; stroke: var(--morado); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.anillo-svg .radio { fill: none; stroke: #b9a6e8; stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.anillo-svg .rama { fill: none; stroke: var(--morado); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.anillo-svg .viajero circle { fill: var(--morado-claro); stroke: #fff; stroke-width: .6; }
.anillo-svg .viajero { transform-box: view-box; transform-origin: 50% 50%; animation: dar-vuelta 7s linear infinite; }
@keyframes dar-vuelta { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .anillo-svg .viajero { animation: none; transform: rotate(45deg); } }
.an { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 8px; text-align: center; transform: translate(-50%, calc(var(--n) / -2)); }
.an.arriba { left: 50%; top: 10%; } .an.derecha { left: 90%; top: 50%; } .an.abajo { left: 50%; top: 90%; } .an.izquierda { left: 10%; top: 50%; }
.an.factura { left: 84%; top: 90%; --n: 52px; }
.an .nodo { position: relative; width: var(--n); height: var(--n); border-radius: 18px; display: grid; place-items: center; background: var(--blanco); border: 1px solid var(--borde); color: var(--carbon); box-shadow: 0 8px 20px rgba(27,27,34,.08); }
.an .nodo svg { width: 26px; height: 26px; }
.an b { font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; max-width: 17ch; background: var(--blanco); padding: 3px 7px; border-radius: 7px; }
.an small { font-size: .74rem; color: var(--morado); line-height: 1.3; max-width: 18ch; margin-top: -6px; background: var(--blanco); padding: 0 6px 2px; border-radius: 6px; }
.an .num { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--morado); color: #fff; font-style: normal; font-family: var(--mono); font-size: .7rem; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--blanco); }
.an.centro { left: 50%; top: 50%; --n: 104px; }
.an.centro .nodo.px { border-radius: 30px; background: var(--carbon); border-color: var(--carbon); box-shadow: 0 0 0 10px rgba(237,231,251,.9), 0 18px 40px rgba(91,33,182,.35); }
.an.centro .nodo.px img { width: 52px; height: 52px; }
.an .nodo.tambien { background: var(--lila); border: 1.5px dashed var(--morado); color: var(--morado); border-radius: 15px; }
.an .nodo.tambien svg { width: 22px; height: 22px; }
.an .marca-tambien { position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 2px var(--blanco); }
.an.factura b { color: var(--morado); }
.anillo-svg .carril { fill: none; stroke: var(--morado-claro); stroke-width: 3; vector-effect: non-scaling-stroke; }
.anillo-svg .foto-viaja rect { fill: var(--morado); }
.anillo-svg .foto-viaja circle { fill: none; stroke: #fff; stroke-width: .7; }
.anillo-svg .foto-viaja { animation: foto-cruza 3.2s ease-in-out infinite; }
@keyframes foto-cruza { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(57px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .anillo-svg .foto-viaja { animation: none; } }
.chip-wa { position: absolute; z-index: 2; left: 29%; top: 50%; transform: translate(-50%, -155%); font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--morado); background: var(--blanco); border: 1px solid #cdbdf2; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.aviso-tecnico { margin-top: 92px; border-radius: 18px; background: var(--lila); border: 1px solid #d9ccf7; padding: 18px 20px; display: grid; gap: 12px; }
.ruta-wa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pizarra); }
.ruta-wa span { background: var(--blanco); border-radius: 999px; padding: 3px 9px; }
.ruta-wa .wa { background: var(--morado); color: #fff; }
.ruta-wa i { font-style: normal; color: var(--morado); }
.aviso-cuerpo { display: flex; align-items: center; gap: 14px; }
.aviso-cuerpo .aviso-ico { flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--morado); color: #fff; display: grid; place-items: center; }
.aviso-cuerpo .aviso-ico svg { width: 22px; height: 22px; }
.aviso-cuerpo p { color: var(--pizarra); font-size: .98rem; line-height: 1.5; }
.aviso-cuerpo b { color: var(--texto); font-weight: 600; }
.extras-flujo { display: grid; gap: 12px; margin-top: 18px; }
/* Tarjeta protagonista del técnico (17/09) */
.tecnico-card { position: relative; overflow: hidden; margin-top: 22px; border-radius: 24px; padding: 26px 26px 22px; color: var(--sobre-oscuro); background: radial-gradient(120% 90% at 100% 0%, rgba(91,33,182,.55) 0%, rgba(91,33,182,0) 60%), var(--carbon); box-shadow: 0 24px 60px rgba(91,33,182,.28); display: grid; gap: 10px; }
.tecnico-card::after { content: ""; position: absolute; right: -50px; bottom: -80px; width: 90px; height: 260px; background: var(--morado); opacity: .35; transform: rotate(32deg); pointer-events: none; }
.tecnico-sello { position: relative; z-index: 1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: rgba(167,139,250,.18); border: 1px solid rgba(167,139,250,.4); border-radius: 999px; padding: 4px 11px 4px 9px; }
.tecnico-sello svg { width: 14px; height: 14px; }
.tecnico-card h3 { position: relative; z-index: 1; font-size: clamp(1.35rem, 2.4vw, 1.8rem); letter-spacing: -.02em; line-height: 1.12; color: #fff; }
.tecnico-card h3 em { font-style: normal; color: var(--morado-claro); }
.bloque-cab .tecnico-card > p { position: relative; z-index: 1; color: var(--sobre-oscuro-2); font-size: 1rem; max-width: none; }
.tecnico-flujo { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(20px, 1fr) auto minmax(20px, 1fr) auto; align-items: start; gap: 0 8px; margin: 12px 0 4px; padding: 16px 14px 12px; border-radius: 18px; background: rgba(242,242,245,.05); border: 1px solid rgba(242,242,245,.08); }
.tf-paso { display: grid; justify-items: center; gap: 8px; text-align: center; }
.tf-paso b { font-family: var(--mono); font-weight: 500; font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sobre-oscuro-2); line-height: 1.3; max-width: 12ch; }
.tf-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--carbon-3); border: 1px solid rgba(242,242,245,.12); color: #fff; }
.tf-ico svg { width: 22px; height: 22px; }
.tf-burbuja { display: flex; gap: 4px; padding: 7px; border-radius: 14px 14px 14px 4px; background: var(--morado); box-shadow: 0 10px 24px rgba(91,33,182,.5); }
.tf-burbuja i { width: 26px; height: 32px; border-radius: 6px; background: rgba(255,255,255,.22); display: grid; place-items: center; color: #fff; }
.tf-burbuja i svg { width: 14px; height: 14px; }
.tf-wa b { color: var(--morado-claro); }
.tf-linea { position: relative; align-self: start; margin-top: 22px; height: 2px; background: repeating-linear-gradient(90deg, rgba(167,139,250,.6) 0 6px, transparent 6px 11px); }
.tf-linea i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--morado-claro); box-shadow: 0 0 0 3px rgba(167,139,250,.25); animation: tf-viaja 1.8s ease-in-out infinite; }
.tf-wa + .tf-linea i { animation-delay: .9s; }
@keyframes tf-viaja { from { left: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tf-linea i { animation: none; left: calc(50% - 4px); } }
.tecnico-beneficios { position: relative; z-index: 1; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tecnico-beneficios li { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .86rem; color: #fff; background: rgba(242,242,245,.07); border: 1px solid rgba(242,242,245,.14); border-radius: 999px; padding: 5px 13px 5px 10px; }
.tecnico-beneficios li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--morado-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b22' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
/* Facturación: aclaración al pasar el mouse o tocar */
button.an.factura { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.factura-tip { position: absolute; bottom: calc(var(--n) + 14px); left: 50%; width: 220px; transform: translate(-50%, 6px); background: var(--blanco); color: var(--texto); border: 1.5px solid var(--morado); border-radius: 14px; padding: 10px 12px; font-size: .86rem; line-height: 1.4; text-align: left; box-shadow: 0 16px 36px rgba(91,33,182,.22); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, transform .18s, visibility .18s; z-index: 5; }
.factura-tip strong { color: var(--morado); }
.factura-tip::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--blanco); border-right: 1.5px solid var(--morado); border-bottom: 1.5px solid var(--morado); transform: translateX(-50%) rotate(45deg); }
.an.factura:hover .factura-tip, .an.factura:focus .factura-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 1100px) { .factura-tip { left: auto; right: -10px; transform: translate(0, 6px); } .an.factura:hover .factura-tip, .an.factura:focus .factura-tip { transform: translate(0, 0); } .factura-tip::after { left: auto; right: 22px; transform: rotate(45deg); } }
.an.factura:hover .nodo.tambien, .an.factura:focus .nodo.tambien { background: var(--morado); color: #fff; border-style: solid; }
.an.factura:focus { outline: none; }
@media (max-width: 720px) {
  .tecnico-card { padding: 22px 18px 18px; }
  .tf-ico { width: 40px; height: 40px; }
  .tf-burbuja i { width: 20px; height: 26px; }
  .factura-tip { left: auto; right: -10px; transform: translate(0, 6px); width: 200px; }
  .an.factura:hover .factura-tip, .an.factura:focus .factura-tip { transform: translate(0, 0); }
  .factura-tip::after { left: auto; right: 22px; transform: rotate(45deg); }
}
.bloque-cab .extras-flujo p.ruta-wa { font-size: .66rem; color: var(--pizarra); max-width: none; }
.bloque-cab .extras-flujo .aviso-cuerpo p { font-size: .95rem; line-height: 1.5; color: var(--pizarra); max-width: none; }
.extra-flujo { border-radius: 18px; background: var(--lila); border: 1px solid #d9ccf7; padding: 16px 18px; display: grid; gap: 10px; }
@media (max-width: 980px) {
  .como-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  .anillo { --n: 48px; width: min(calc(100% - 64px), 330px); margin: 34px auto 84px; }
  .an .nodo { border-radius: 14px; }
  .an .nodo svg { width: 20px; height: 20px; }
  .an b { font-size: .58rem; letter-spacing: .02em; max-width: 14ch; padding: 2px 5px; }
  .an small { font-size: .62rem; max-width: 12ch; }
  .an.derecha b, .an.izquierda b { max-width: 12ch; }
  .an .num { width: 18px; height: 18px; font-size: .6rem; top: -6px; left: -6px; }
  .an.centro { --n: 76px; }
  .an.centro .nodo.px { border-radius: 22px; box-shadow: 0 0 0 7px rgba(237,231,251,.9), 0 12px 30px rgba(91,33,182,.3); }
  .an.centro .nodo.px img { width: 38px; height: 38px; }
  .an.factura { --n: 40px; left: 86%; }
  .chip-wa { font-size: .5rem; padding: 1px 5px; left: 30%; }
  .aviso-tecnico { margin-top: 104px; }
  .aviso-cuerpo { align-items: flex-start; }
  .anillo-svg .pista { stroke-width: 6; }
}

/* Dos experiencias (17/09): título = para quién, descripción, ventajas en un renglón */
.experiencia .titulo-exp { text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.01em; line-height: 1.15; }
.experiencia .para-quien-exp { line-height: 1.55; }
.experiencia.lila { background: linear-gradient(160deg, #f6f2fd 0%, var(--lila) 100%); border-color: #cdbdf2; }
.experiencia.lila:hover { border-color: var(--morado); }
.experiencia.lila .titulo-exp { color: var(--morado); }
.experiencia.lila p { color: var(--pizarra); }
.experiencia.lila .ventajas li { background: var(--blanco); border: 1px solid #d9ccf7; }
.experiencia .para-quien-exp b { color: var(--texto); font-weight: 600; }
.experiencia.oscura .para-quien-exp b { color: var(--sobre-oscuro); }
.experiencia .ventajas { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 2px; }
.experiencia .ventajas li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 600; font-size: .9rem; color: var(--morado); background: var(--lila); border-radius: 999px; padding: 5px 13px 5px 11px; }
.experiencia .ventajas li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.experiencia.oscura .ventajas li { color: var(--sobre-oscuro); background: rgba(167,139,250,.14); border: 1px solid rgba(167,139,250,.3); }
.experiencia.oscura .ventajas li::before { background: var(--morado-claro); }
@media (max-width: 1100px) { .experiencia .ventajas { flex-wrap: wrap; } }

/* Proveedores (17/09): flujo completo de «¿Cómo funciona?» */
.entradas { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; padding-bottom: 64px; }
.entradas-titulo { grid-column: 1 / -1; text-align: center; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--morado); }
.entrada { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; background: var(--bruma); border: 1px solid var(--borde); border-radius: 20px; padding: 20px 18px; }
.entrada-num { font-family: var(--mono); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); }
.entrada-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--carbon); color: #fff; }
.entrada-ico svg { width: 24px; height: 24px; }
.entrada b { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -.015em; }
.entrada p { color: var(--texto-2); font-size: .92rem; }
.entradas-unen { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64px; }
.entradas-unen path { fill: none; stroke: var(--morado); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }

.lt { list-style: none; position: relative; display: grid; gap: 30px; max-width: 1080px; margin: 0 auto; padding-top: 8px; }
.lt::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 30px; width: 2px; transform: translateX(-50%); background: linear-gradient(var(--morado), var(--morado-claro)); }
.lt-paso { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; }
.lt-num { grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--morado); color: #fff; font-family: var(--mono); font-size: .78rem; box-shadow: 0 0 0 6px var(--blanco), 0 8px 20px rgba(91,33,182,.35); }
.lt-paso.izq .lt-tarjeta { grid-column: 1; grid-row: 1; } .lt-paso.izq .lt-grafica { grid-column: 3; grid-row: 1; }
.lt-paso.der .lt-tarjeta { grid-column: 3; grid-row: 1; } .lt-paso.der .lt-grafica { grid-column: 1; grid-row: 1; }
.lt-tarjeta { display: flex; gap: 14px; align-items: flex-start; background: var(--blanco); border: 1px solid var(--borde); border-radius: 20px; padding: 18px 20px; box-shadow: 0 12px 30px rgba(27,27,34,.06); }
.lt-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--lila); color: var(--morado); }
.lt-ico svg { width: 23px; height: 23px; }
.lt-ico.grande { width: 56px; height: 56px; border-radius: 17px; background: var(--morado); color: #fff; }
.lt-num-txt { font-family: var(--mono); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--morado); }
.lt-tarjeta h3 { font-size: 1.06rem; letter-spacing: -.015em; margin: 2px 0 4px; }
.lt-tarjeta p { color: var(--texto-2); font-size: .93rem; }
.lt-grafica { display: grid; }
.lt-paso.izq .lt-grafica { justify-items: start; } .lt-paso.der .lt-grafica { justify-items: end; }
.lt-marco { position: relative; display: inline-grid; max-width: 100%; }
.lt-marco > div { display: grid; }
.lt-sobre { position: relative; z-index: 3; width: max-content; max-width: 260px; display: flex; align-items: flex-start; gap: 8px; margin: -16px 0 0; padding: 10px 13px; border-radius: 14px; background: var(--blanco); color: var(--texto); border: 1.5px solid var(--morado); font-size: .82rem; font-weight: 600; line-height: 1.35; box-shadow: 0 14px 30px rgba(91,33,182,.25); }
.lt-sobre svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--morado); }
.lt-paso.izq .lt-sobre { justify-self: end; transform: translateX(28px) rotate(-2deg); }
.lt-paso.der .lt-sobre { justify-self: start; transform: translateX(-28px) rotate(2deg); }
@media (max-width: 1240px) { .lt-paso.izq .lt-sobre { transform: translateX(0) rotate(-2deg); } .lt-paso.der .lt-sobre { transform: translateX(0) rotate(2deg); } }
@media (max-width: 860px) {
  .lt-paso.izq .lt-sobre, .lt-paso.der .lt-sobre { justify-self: stretch; max-width: none; width: auto; margin: -14px 12px 0; transform: none; }
}
.chat-flujo { color: var(--sobre-oscuro); width: min(100%, 380px); padding: 14px; gap: 8px; box-shadow: 0 18px 40px rgba(27,27,34,.18); margin: 0 !important; }
.chat-flujo .chat-cab { padding-bottom: 10px; }
.chat-flujo .chat-cab img { width: 28px; height: 28px; }
.chat-flujo .mensaje { font-size: .84rem; }
.pieza { width: min(100%, 340px); background: var(--carbon); color: var(--sobre-oscuro); border-radius: 18px; padding: 16px; box-shadow: 0 18px 40px rgba(27,27,34,.18); display: grid; gap: 10px; }
.pieza-titulo { font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--morado-claro); }
.pieza-cab { display: flex; align-items: center; gap: 5px; padding-bottom: 10px; border-bottom: 1px solid rgba(242,242,245,.08); }
.pieza-dot { width: 7px; height: 7px; border-radius: 50%; background: #454552; }
.pieza-cab b { margin-left: 8px; font-size: .78rem; font-weight: 600; color: var(--sobre-oscuro-2); }
.pieza-fila { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-size: .82rem; background: var(--carbon-2); border-radius: 10px; padding: 9px 10px; }
.pieza-fila.tenue { opacity: .55; }
.pieza .mono { font-family: var(--mono); font-size: .74rem; }
.pieza .ok { font-size: .72rem; font-weight: 600; color: #1b1b22; background: var(--morado-claro); border-radius: 999px; padding: 2px 8px; }
.barra-costo { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 10px; font-size: .78rem; color: var(--sobre-oscuro-2); }
.barra-costo i { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #3a3a46 var(--p), transparent var(--p)); }
.barra-costo:first-of-type i { background: linear-gradient(90deg, #6b6b78 var(--p), transparent var(--p)); }
.barra-costo.margen span { color: #fff; font-weight: 600; }
.pieza-ok { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: #1b1b22; background: var(--morado-claro); border-radius: 999px; padding: 4px 11px 4px 8px; }
.pieza-ok svg { width: 13px; height: 13px; }
.barra-costo.margen i { background: linear-gradient(90deg, var(--morado-claro) var(--p), transparent var(--p)); }
.pieza-doc { position: relative; width: min(100%, 260px); background: var(--blanco); color: var(--texto); border: 1px solid var(--borde); box-shadow: 0 18px 40px rgba(27,27,34,.12); padding: 18px 18px 22px; }
.pieza-doc .pieza-titulo { color: var(--morado); }
.linea-doc { height: 8px; border-radius: 4px; background: var(--bruma); }
.linea-doc.corta { width: 55%; } .linea-doc.media { width: 75%; }
.sello-doc { position: absolute; right: 16px; bottom: 14px; transform: rotate(-12deg); font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--morado); border: 2.5px solid var(--morado); border-radius: 8px; padding: 2px 10px; background: rgba(237,231,251,.85); }
.estado-doc { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .86rem; color: #fff; background: var(--morado); border-radius: 999px; padding: 5px 12px 5px 9px; }
.estado-doc svg { width: 15px; height: 15px; }
.caso-hogar { margin-top: 44px; border-radius: 26px; padding: 28px; background: linear-gradient(160deg, #f6f2fd 0%, var(--lila) 100%); border: 1px solid #d9ccf7; display: grid; gap: 20px; }
.caso-hogar-cab { display: flex; align-items: center; gap: 16px; }
.caso-hogar-cab .etiqueta { color: var(--morado); }
.caso-hogar-cab h3 { font-size: clamp(1.2rem, 2.3vw, 1.6rem); letter-spacing: -.02em; margin-top: 2px; }
.caso-hogar-chats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.caso-hogar-chats .chat-flujo { width: 100%; }
.caso-hogar .nota-ejemplo { color: var(--texto-3); }
@media (max-width: 860px) {
  .lt { gap: 28px; }
  .entradas { grid-template-columns: 1fr; padding-bottom: 36px; }
  .entradas-unen { display: none; }
  .entradas::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 30px; border-left: 2px dashed var(--morado); }
  .lt::before { left: 22px; transform: none; }
  .lt-paso { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; align-items: start; }
  .lt-num { grid-column: 1; grid-row: 1; }
  .lt-paso.izq .lt-tarjeta, .lt-paso.der .lt-tarjeta { grid-column: 2; grid-row: 1; }
  .lt-paso.izq .lt-grafica, .lt-paso.der .lt-grafica { grid-column: 2; grid-row: 2; justify-items: start; }
  .caso-hogar { padding: 20px 16px; }
  .caso-hogar-chats { grid-template-columns: 1fr; }
}

/* Proveedores (17/09): frentes administrativos */
.frentes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#administracion:not(.blanco) .frente:not(.f-direccion) { background: var(--blanco); }
#administracion:not(.blanco) .frente-visual { background: var(--bruma); }
.frente { background: var(--bruma); border: 1px solid var(--borde); border-radius: 22px; padding: 22px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; }
.frente-cab { display: flex; align-items: center; gap: 12px; }
.frente-ico { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--morado); color: #fff; }
.frente-ico svg { width: 22px; height: 22px; }
.frente h3 { font-size: 1.12rem; letter-spacing: -.015em; }
.frente p { color: var(--texto-2); font-size: .93rem; line-height: 1.55; }
.frente-visual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px; padding: 12px; }
.v-fila { width: 100%; display: grid; grid-template-columns: 128px 1fr; gap: 10px; align-items: center; font-size: .76rem; color: var(--texto-2); }
.v-barra { height: 8px; border-radius: 5px; background: linear-gradient(90deg, var(--morado-claro) var(--p), var(--bruma) var(--p)); }
.v-estado { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.v-estado svg { width: 12px; height: 12px; }
.v-estado.ok { color: var(--morado); background: var(--lila); }
.v-estado.alerta { color: #92400e; background: #fdf1de; }
.v-estado.pendiente { color: var(--pizarra); background: var(--bruma); }
.v-servicios { display: grid; gap: 4px; }
.v-servicios span, .v-docfila span:first-child { font-family: var(--mono); font-size: .7rem; color: var(--texto-2); }
.v-servicios span { background: var(--bruma); border-radius: 6px; padding: 2px 8px; }
.v-flecha { color: var(--morado); font-weight: 700; }
.v-doc { display: grid; gap: 6px; justify-items: start; border: 1px dashed #cdbdf2; border-radius: 10px; padding: 8px 10px; }
.v-doc b { font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--morado); }
.v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-chips span { font-size: .76rem; font-weight: 500; background: var(--bruma); border-radius: 999px; padding: 3px 10px; }
.v-docfila { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.f-direccion { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 28px; align-items: center; background: radial-gradient(90% 140% at 100% 0%, rgba(91,33,182,.5) 0%, rgba(91,33,182,0) 60%), var(--carbon); border-color: var(--carbon); color: var(--sobre-oscuro); padding: 28px; }
.f-direccion .direccion-texto { display: grid; gap: 12px; }
.f-direccion h3 { color: #fff; font-size: 1.4rem; }
.f-direccion p { color: var(--sobre-oscuro-2); font-size: .98rem; }
.v-preguntas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.v-preguntas li { font-family: var(--display); font-weight: 600; font-size: .84rem; letter-spacing: -.01em; color: #fff; background: rgba(242,242,245,.07); border: 1px solid rgba(242,242,245,.14); border-radius: 999px; padding: 6px 13px; }
.v-grafica { background: rgba(242,242,245,.05); border: 1px solid rgba(242,242,245,.1); border-radius: 18px; padding: 18px; display: grid; gap: 14px; }
.v-barras { height: 130px; display: flex; align-items: flex-end; gap: 8px; }
.v-barras i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: #3a3a46; }
.v-barras i.actual { background: linear-gradient(var(--morado-claro), var(--morado)); }
.v-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v-kpis span { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--carbon-2); border-radius: 10px; padding: 8px 10px; }
.v-kpis b { font-family: var(--mono); font-weight: 500; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sobre-oscuro-2); }
.v-kpis em { font-style: normal; font-weight: 700; color: var(--morado-claro); }
@media (max-width: 980px) {
  .frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-direccion { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .frentes { grid-template-columns: 1fr; }
  .frente, .f-direccion { padding: 20px; }
  .v-fila { grid-template-columns: 110px 1fr; }
}

/* Proveedores (17/09): precio + productos especiales en una sola pieza */
.oferta-prov { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px rgba(91,33,182,.22); }
.oferta-lado { display: grid; gap: 12px; align-content: start; padding: 36px; }
.oferta-lado .boton { justify-self: start; margin-top: 6px; }
.oferta-valor { background: linear-gradient(160deg, #f6f2fd 0%, var(--lila) 100%); }
.oferta-valor .etiqueta { color: var(--morado); }
.oferta-valor h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.02em; }
.oferta-valor p { color: var(--pizarra); max-width: 48ch; }
.oferta-especial { position: relative; overflow: hidden; color: var(--sobre-oscuro); background: radial-gradient(100% 120% at 100% 0%, rgba(91,33,182,.6) 0%, rgba(91,33,182,0) 65%), var(--carbon); }
.oferta-especial::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 90px; height: 260px; background: var(--morado); opacity: .4; transform: rotate(32deg); pointer-events: none; }
.oferta-especial > * { position: relative; z-index: 1; }
.oferta-especial .etiqueta { color: var(--morado-claro); }
.oferta-especial h3 { font-size: clamp(1.25rem, 2.3vw, 1.6rem); letter-spacing: -.02em; color: #fff; }
.oferta-especial p { color: var(--sobre-oscuro-2); }
.oferta-regalo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--morado); color: #fff; box-shadow: 0 10px 24px rgba(91,33,182,.5); }
.oferta-regalo svg { width: 26px; height: 26px; }
@media (max-width: 860px) {
  .oferta-prov { grid-template-columns: 1fr; }
  .oferta-lado { padding: 26px 22px; }
}

/* Inicio (17/09): recorrido de un servicio, en línea y con Praxist debajo */
.recorrido { display: grid; gap: 10px; }
.recorrido-sentido { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-3); }
.recorrido-sentido::after { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--borde) 0 8px, transparent 8px 14px); }
.recorrido-sentido span { position: relative; padding-left: 20px; }
.recorrido-sentido span::before { content: "→"; position: absolute; left: 0; color: var(--morado); font-size: .9rem; }
.recorrido-sentido.vuelta { flex-direction: row-reverse; color: var(--texto-3); }
.recorrido-sentido.vuelta span { padding-left: 0; padding-right: 20px; }
.recorrido-sentido.vuelta span::before { content: "←"; left: auto; right: 0; }
.recorrido-fila { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.ract { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--bruma); border: 1px solid var(--borde); border-radius: 18px; padding: 18px 14px 16px; }
.ract-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--blanco); border: 1px solid var(--borde); color: var(--carbon); }
.ract-ico svg { width: 24px; height: 24px; }
.ract b { font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: -.015em; line-height: 1.2; }
.ract small { font-size: .82rem; color: var(--texto-2); }
.ract-flecha { position: absolute; right: -30px; top: 42px; width: 30px; height: 2px; background: var(--morado); }
.ract-flecha::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-right: 0; border-left: 9px solid var(--morado); }
.banda-praxist { margin-top: 4px; }
.banda-hilos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; height: 18px; }
.banda-hilos i { justify-self: center; width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--morado) 0 5px, transparent 5px 9px); }
.banda-cuerpo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; border-radius: 20px; padding: 16px 20px; background: radial-gradient(90% 160% at 0% 0%, rgba(91,33,182,.55) 0%, rgba(91,33,182,0) 60%), var(--carbon); color: var(--sobre-oscuro); }
.banda-cuerpo img { width: 34px; height: 34px; border-radius: 10px; }
.banda-cuerpo p { flex: 1; min-width: 220px; font-size: .98rem; color: var(--sobre-oscuro-2); }
.banda-cuerpo b { color: #fff; font-weight: 600; }
.banda-extra { position: relative; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .86rem; font-weight: 600; color: #fff; background: rgba(167,139,250,.16); border: 1.5px dashed var(--morado-claro); border-radius: 999px; padding: 7px 14px 7px 8px; cursor: pointer; }
.banda-extra-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--morado); color: #fff; }
.banda-extra-ico svg { width: 15px; height: 15px; }
.banda-extra .factura-tip { bottom: calc(100% + 12px); }
.banda-extra:hover .factura-tip, .banda-extra:focus .factura-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.banda-extra:focus { outline: none; }
@media (max-width: 860px) {
  .recorrido-fila { grid-template-columns: 1fr; gap: 26px; }
  .ract-flecha { right: auto; left: 50%; top: auto; bottom: -26px; width: 2px; height: 26px; transform: translateX(-50%); }
  .ract-flecha::after { right: auto; left: -5px; top: auto; bottom: -1px; border: 6px solid transparent; border-bottom: 0; border-top: 9px solid var(--morado); }
  .banda-hilos { grid-template-columns: 1fr; }
  .banda-hilos i:not(:first-child) { display: none; }
  .banda-cuerpo { padding: 16px; }
}

/* Página unificada (17/09) */
.portada-unica > .envoltura { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 48px; align-items: center; padding-block: 64px 72px; }
.portada-unica .heroe-texto { max-width: 620px; }
.portada-unica .claim + .claim { margin-top: 12px; }
.rueda-marco { position: relative; border-radius: 32px; padding: 18px; background: radial-gradient(70% 70% at 50% 40%, rgba(237,231,251,.85) 0%, rgba(242,242,245,0) 70%), var(--blanco); border: 1px solid var(--borde); box-shadow: 0 30px 70px rgba(27,27,34,.07); overflow: hidden; }
.rueda-marco::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(91,33,182,.14) 1.2px, transparent 1.2px); background-size: 26px 26px; opacity: .6; pointer-events: none; }
.rueda-marco::after { content: ""; position: absolute; right: -70px; top: -90px; width: 120px; height: 320px; background: var(--morado); opacity: .07; transform: rotate(32deg); pointer-events: none; }
.rueda-marco .rueda { position: relative; z-index: 1; }
@media (max-width: 720px) { .rueda-marco { padding: 12px; border-radius: 24px; } }
.portada-sola > .envoltura { grid-template-columns: minmax(0, 760px); padding-block: 72px 76px; }
.conversaciones { background: var(--carbon); color: var(--sobre-oscuro); }
.conversaciones .bloque-cab h2 { color: #fff; }
.conversaciones .bloque-cab p { color: var(--sobre-oscuro-2); }
.conversaciones .etiqueta { color: var(--morado-claro); }
.conv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.conv-tecnico { grid-column: 1 / -1; order: -1; margin-bottom: 8px; }
.conv-tecnico .tecnico-card { margin: 0; }
.conv-tecnico .tecnico-card h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.conv-tecnico .tecnico-flujo { max-width: 780px; }
.conv-grid .chats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.conv-grid .chat, .conv-grid .chat-flujo { width: 100%; max-width: none; margin: 0 !important; }
.conv-grid .chats .chat { order: 1; }
.conv-grid .chats .tiempo { order: 2; grid-column: 1 / -1; justify-self: center; margin: 2px 0 0; }
.conv-grid .chats .nota-ejemplo { order: 3; grid-column: 1 / -1; }
.conversaciones .caso-hogar { color: var(--texto); }
.conversaciones .caso-hogar-cab h3 { color: var(--texto); }
.conversaciones .caso-hogar .nota-ejemplo { color: var(--texto-3); }
.conv-grid .nota-ejemplo { grid-column: 1 / -1; }
.conversaciones .caso-hogar { margin-top: 26px; }
.conversaciones .caso-hogar-chats { gap: 16px; }
/* separación clara entre secciones */
.bloque + .bloque { border-top: 1px solid var(--borde); }
.conversaciones + .bloque, .bloque + .conversaciones { border-top: 0; }
@media (max-width: 860px) { .conv-grid, .conv-grid .chats { grid-template-columns: 1fr; } }
.portada-prov h2 { font-family: var(--cuerpo); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-top: 20px; color: #fff; }
.portada-prov h2 em { display: block; font-style: normal; color: var(--morado-claro); }
.portada-prov { border-top: 1px solid rgba(242,242,245,.08); }
.tecnico-en-flujo { max-width: 760px; margin: 40px auto 0; }
.tecnico-card > p { color: var(--sobre-oscuro-2); font-size: 1rem; max-width: none; }
/* Por qué Praxist (17/09): círculo con alas; la descripción aparece al pasar el cursor o tocar */
.pista-alas { font-family: var(--mono); font-size: .74rem !important; letter-spacing: .06em; text-transform: uppercase; color: var(--morado) !important; }
.pista-alas .con-toque { display: none; }
@media (hover: none) { .pista-alas .con-cursor { display: none; } .pista-alas .con-toque { display: inline; } }
.rueda { position: relative; height: 600px; margin-top: -24px; }
.rueda-lineas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rueda-lineas line { stroke: #cdbdf2; stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.rueda-centro { position: absolute; left: 50%; top: 50%; width: 410px; height: 410px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--carbon); display: grid; align-content: center; justify-items: center; gap: 14px; padding: 58px; box-shadow: 0 0 0 14px var(--lila), 0 0 0 15px #d9ccf7, 0 30px 70px rgba(91,33,182,.25); z-index: 1; }
.rueda-centro .navegador { width: 100%; }
.rueda-centro .navegador.grande .navegador-cuerpo { grid-template-columns: 82px 1fr; padding: 14px; gap: 12px; }
.rueda-centro .navegador.grande .fila span { height: 44px; }
.rueda-centro .navegador.grande .direccion { font-size: .82rem; }
.rueda-centro .pie-imagen { font-size: .9rem; }
.ala { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2; width: 250px; display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--texto); background: var(--blanco); border: 1px solid #d9ccf7; border-radius: 999px; padding: 8px 18px 8px 8px; cursor: pointer; box-shadow: 0 10px 26px rgba(27,27,34,.08); transition: background .18s, color .18s, border-color .18s, box-shadow .18s; }
.ala-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--lila); color: var(--morado); transition: background .18s, color .18s; }
.ala-ico svg { width: 21px; height: 21px; }
.ala-titulo { font-family: var(--display); font-weight: 600; font-size: .92rem; letter-spacing: -.015em; line-height: 1.2; }
.ala-desc { position: absolute; left: 50%; top: calc(100% + 12px); width: 280px; transform: translate(-50%, -6px); background: var(--blanco); color: var(--texto); border: 1.5px solid var(--morado); border-radius: 16px; padding: 14px 16px; font-size: .92rem; line-height: 1.45; box-shadow: 0 20px 44px rgba(91,33,182,.22); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, transform .18s, visibility .18s; }
.ala-desc::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; background: var(--blanco); border-left: 1.5px solid var(--morado); border-top: 1.5px solid var(--morado); transform: translateX(-50%) rotate(45deg); border-radius: 2px 0 0 0; }
.ala.abajo .ala-desc { top: auto; bottom: calc(100% + 12px); transform: translate(-50%, 6px); }
.ala.abajo .ala-desc::before { top: auto; bottom: -7px; transform: translateX(-50%) rotate(225deg); }
.ala:hover, .ala:focus-visible, .ala:focus { background: var(--morado); color: #fff; border-color: var(--morado); box-shadow: 0 14px 34px rgba(91,33,182,.35); z-index: 3; outline: none; }
.ala:hover .ala-ico, .ala:focus .ala-ico { background: #fff; color: var(--morado); }
.ala:hover .ala-desc, .ala:focus .ala-desc { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ala.derecha .ala-desc { left: auto; right: 0; transform: translate(0, -6px); }
.ala.derecha:hover .ala-desc, .ala.derecha:focus .ala-desc { transform: translate(0, 0); }
.ala.derecha .ala-desc::before { left: auto; right: 40px; transform: rotate(45deg); }
.ala.izquierda .ala-desc { left: 0; transform: translate(0, -6px); }
.ala.izquierda:hover .ala-desc, .ala.izquierda:focus .ala-desc { transform: translate(0, 0); }
.ala.izquierda .ala-desc::before { left: 40px; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .ala, .ala-desc, .ala-ico { transition: none; } }
@media (max-width: 980px) {
  .rueda { height: auto; display: grid; gap: 10px; justify-items: stretch; margin-top: 0; }
  .rueda-lineas { display: none; }
  .rueda-centro { position: relative; left: auto; top: auto; transform: none; width: min(100%, 340px); height: auto; aspect-ratio: 1; justify-self: center; padding: 42px; margin: 10px 0 28px; }
  .ala { position: relative; left: auto; top: auto; transform: none; width: 100%; border-radius: 18px; flex-wrap: wrap; padding: 8px 16px 8px 8px; }
  .ala-titulo { flex: 1; }
  .ala-desc, .ala.abajo .ala-desc { position: static; width: 100%; transform: none; display: none; opacity: 1; visibility: visible; background: transparent; color: inherit; border: 0; box-shadow: none; padding: 2px 6px 8px 54px; }
  .ala-desc::before { display: none; }
  .ala:hover .ala-desc, .ala:focus .ala-desc { display: block; transform: none; }
}
@media (max-width: 720px) {
  .rueda-centro { width: min(100%, 300px); padding: 34px; box-shadow: 0 0 0 10px var(--lila), 0 0 0 11px #d9ccf7, 0 20px 50px rgba(91,33,182,.22); }
  .rueda-centro .navegador.grande .navegador-cuerpo { grid-template-columns: 62px 1fr; padding: 10px; gap: 8px; }
  .rueda-centro .navegador.grande .fila span { height: 30px; }
  .rueda-centro .navegador.grande .direccion { font-size: .66rem; padding: 5px 8px; }
  .rueda-centro .navegador.grande .tu-logo { height: 28px; font-size: .56rem; }
  .rueda-centro .pie-imagen { font-size: .76rem; }
}

/* Por qué Praxist: imagen al centro y cuatro cajones iguales */
.razones-4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; grid-template-areas: "r1 img r3" "r2 img r4"; gap: 16px; }
.razones-4 .r1 { grid-area: r1; } .razones-4 .r2 { grid-area: r2; } .razones-4 .r3 { grid-area: r3; } .razones-4 .r4 { grid-area: r4; }
.razones-4 .razon { background: var(--bruma); padding: 26px; gap: 10px; }
.razones-4 .razon h3 { font-size: 1.08rem; }
.razones-4 .razon p { font-size: .95rem; }
.razones-4 .razon p b { color: var(--texto); font-weight: 600; }
.imagen-marca { grid-area: img; background: var(--carbon); border-radius: 22px; padding: 28px; display: grid; align-content: center; gap: 18px; }
.navegador.grande .direccion { font-size: .95rem; }
.navegador.grande .navegador-cuerpo { grid-template-columns: 100px 1fr; padding: 20px; gap: 16px; }
.navegador.grande .tu-logo { height: 40px; font-size: .7rem; }
.navegador.grande .fila span { height: 58px; }
.pie-imagen { text-align: center; color: var(--sobre-oscuro-2); font-size: .95rem; }
.pie-imagen b { color: var(--sobre-oscuro); font-weight: 600; }

@media (max-width: 980px) {
  .razones-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "img img" "r1 r2" "r3 r4"; }
}
@media (max-width: 720px) {
  .aviso-fotos { flex-direction: column; align-items: flex-start; padding: 20px; }
  .chats .tiempo { justify-self: stretch; border-radius: 16px; }
  .diagrama .marca-tambien { right: -7px; top: -7px; width: 18px; height: 18px; }
  .leyenda-tambien { justify-content: flex-start; text-align: left; }
  .imagina { padding: 26px 20px; }
  .razones-4 { grid-template-columns: 1fr; grid-template-areas: "img" "r1" "r2" "r3" "r4"; }
  .imagen-marca { padding: 18px; }
  .navegador.grande .navegador-cuerpo { grid-template-columns: 76px 1fr; padding: 14px; }
  .navegador.grande .direccion { font-size: .76rem; }
}

/* Tres pasos propios de cada página (broker / compañía) */
.tres { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: tres; border-top: 2px solid var(--carbon); }
.tres li { counter-increment: tres; padding: 26px 28px 8px 0; display: grid; gap: 10px; align-content: start; }
.tres li + li { padding-left: 28px; border-left: 1px solid var(--borde); }
.tres li::before { content: counter(tres, decimal-leading-zero); font-family: var(--mono); font-size: .8rem; color: var(--morado); }
.tres h3 { font-size: 1.15rem; letter-spacing: -.015em; }
.tres p { color: var(--texto-2); }
.experiencias.una { grid-template-columns: minmax(0, 1fr); }
.experiencias.una .experiencia { padding: 40px; }
.chats .chat.solo { margin: 0; }
.especiales .boton-claro { color: #fff; }
@media (max-width: 720px) {
  .tres { grid-template-columns: 1fr; }
  .tres li, .tres li + li { padding: 22px 0 14px; border-left: 0; }
  .tres li + li { border-top: 1px solid var(--borde); }
  .experiencias.una .experiencia { padding: 24px; }
  .navegador .direccion { font-size: .76rem; }
  .navegador-barra i { display: none; }
}