/* «Ver para creer» (dirección aprobada el 03-10, identidad aprobada el 04-10). Papel cálido de principio
   a fin; el ónix solo como escenario de un producto. Una idea por pantalla (Tribe), frases con aplomo
   (Collins) y cada solución mostrada como un producto (Apple). Ninguna promesa sin su pantalla: donde
   hay caso real se muestra el caso; donde no, un ejemplo con datos ficticios y rotulado como tal. */

body.vpc{background:var(--fondo)}
.vpc .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vpc-ancho{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.vpc-rotulo{margin:0;font:500 12.5px/1.4 var(--fuente-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.vpc-nota{margin:0;font:400 12.5px/1.5 var(--fuente-mono);color:#6E6A63}

/* Barra */
.vpc-barra{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--fondo) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.vpc-barra .vpc-ancho{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px}
.vpc-barra .marca img{display:block;width:clamp(120px,11vw,150px);height:auto}
.vpc-nav{display:flex;gap:clamp(14px,2.4vw,30px);font-size:15px;align-items:center}
.vpc-nav a{color:var(--texto-2);text-decoration:none}
.vpc-nav a[aria-current="page"]{color:var(--texto);font-weight:600}
.vpc-nav a:hover{color:var(--acento)}
.vpc-nav .vpc-llamada{color:#fff;background:var(--acento);border-radius:999px;padding:8px 16px;font-weight:600}
.vpc-nav .vpc-llamada:hover{color:#fff;background:#7a473c}
.vpc-nav .vpc-llamada{white-space:nowrap}
/* Menú del celular: <details>, funciona sin JavaScript */
.vpc-menu{display:none;position:relative}
.vpc-menu summary{list-style:none;cursor:pointer;font:500 13px/1 var(--fuente-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--linea);border-radius:999px;padding:10px 14px;background:var(--fondo-alto)}
.vpc-menu summary::-webkit-details-marker{display:none}
.vpc-menu[open] summary{border-color:var(--acento);color:var(--acento)}
.vpc-menu ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:8px;list-style:none;min-width:220px;background:var(--fondo-alto);border:1px solid var(--linea);border-radius:14px;box-shadow:0 24px 40px -24px rgba(17,19,24,.45);display:grid;gap:2px;z-index:20}
.vpc-menu ul a{display:block;padding:11px 12px;border-radius:8px;text-decoration:none;color:var(--texto);font-size:16px}
.vpc-menu ul a:hover,.vpc-menu ul a[aria-current="page"]{background:var(--fondo);color:var(--acento)}
@media (max-width:860px){.vpc-nav .vpc-nav-enlace{display:none}.vpc-menu{display:block}}
@media (max-width:480px){.vpc-nav .vpc-llamada{display:none}}


/* Portada de la página */
.vpc-hero{padding-block:clamp(64px,11vw,132px) clamp(36px,6vw,64px);display:grid;gap:22px;text-align:center;justify-items:center}
.vpc-hero h1{margin:0;font:400 clamp(52px,8.6vw,124px)/.98 var(--fuente-titulo);letter-spacing:-.01em;max-width:13ch;text-wrap:balance}
.vpc-hero p.vpc-bajada{max-width:60ch}
.vpc-bajada{margin:0;font-size:clamp(18px,1.55vw,22px);line-height:1.55;color:var(--texto-2)}
.vpc-indice{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:980px}
.vpc-indice a{display:inline-flex;gap:8px;align-items:baseline;text-decoration:none;color:var(--texto);background:var(--fondo-alto);border:1px solid var(--linea);border-radius:999px;padding:8px 14px;font-size:14.5px}
.vpc-indice a span{font:500 12px var(--fuente-mono);color:var(--acento)}
.vpc-indice a:hover{border-color:var(--acento)}

/* Lo que ya hicimos: cabeza de cartel */
.vpc-hecho{background:var(--oscuro-alto);color:var(--texto-claro);padding-block:clamp(64px,9vw,112px)}
.vpc-hecho .vpc-ancho{display:grid;gap:30px}
.vpc-hecho .vpc-rotulo{color:var(--senal)}
.vpc-hecho h2{margin:0;font:400 clamp(38px,5vw,68px)/1.02 var(--fuente-titulo);max-width:18ch}
.vpc-hecho .vpc-bajada{color:#CFC8BD;max-width:62ch}
.vpc-casos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.vpc-caso{grid-column:span 4;background:#202128;border:1px solid rgba(246,242,235,.1);border-radius:18px;padding:22px;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;color:inherit;text-decoration:none}
.vpc-caso.grande{grid-column:span 8;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto;align-items:center;gap:24px}
.vpc-caso:hover{border-color:rgba(184,115,82,.6)}
.vpc-caso b{font:400 26px/1.1 var(--fuente-titulo);color:var(--texto-claro)}
.vpc-caso p{margin:0;font-size:15px;color:#CFC8BD}
.vpc-caso .vpc-pie-caso{font:400 12.5px/1.5 var(--fuente-mono);color:#A9A298;border-top:1px solid rgba(246,242,235,.12);padding-top:10px}
.vpc-caso picture img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 24px 40px -24px rgba(0,0,0,.6)}
.vpc-caso .vpc-texto-caso{display:grid;gap:10px;align-content:start}
.vpc-sello{justify-self:start;font:500 12px/1 var(--fuente-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 10px;background:var(--senal);color:var(--oscuro)}
.vpc-sello.dictado{background:#E4DED5;color:var(--oscuro)}
.vpc-sello.disenado{background:transparent;color:#CFC8BD;box-shadow:inset 0 0 0 1px rgba(246,242,235,.3)}
.vpc-cifra{font:400 clamp(44px,5vw,64px)/1 var(--fuente-titulo);color:var(--texto-claro)}
.vpc-hecho .vpc-nota{color:#A9A298}
.vpc-hecho .provisorio{margin:0;font:500 12.5px/1.45 var(--fuente-mono);color:#E4DED5;border:1px dashed rgba(246,242,235,.35);padding:8px 10px;justify-self:start}
@media (max-width:1000px){.vpc-caso{grid-column:span 6}.vpc-caso.grande{grid-column:span 12}}
@media (max-width:640px){.vpc-caso,.vpc-caso.grande{grid-column:span 12;grid-template-columns:minmax(0,1fr)}}

/* Territorios */
.vpc-terr{padding-block:clamp(64px,9vw,120px);border-top:1px solid var(--linea);scroll-margin-top:64px}
.vpc-terr .vpc-ancho{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.vpc-terr:nth-of-type(even) .vpc-terr-texto{order:2}
.vpc-terr-texto{display:grid;gap:16px;align-content:start}
.vpc-terr-num{font:500 13px var(--fuente-mono);color:var(--acento)}
.vpc-terr h2{margin:0;font:400 clamp(36px,4.4vw,58px)/1.02 var(--fuente-titulo);text-wrap:balance}
.vpc-terr .vpc-promesa{margin:0;font:400 clamp(20px,1.8vw,25px)/1.3 var(--fuente-titulo);color:var(--texto-2)}
.vpc-terr ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:16px;color:var(--texto-2)}
.vpc-terr .vpc-mas{justify-self:start;color:var(--acento);font-weight:600;text-underline-offset:4px}
.vpc-escena{background:var(--fondo-suave);border-radius:24px;padding:clamp(18px,3vw,36px);display:grid;gap:14px;min-width:0}
.vpc-escena.noche{background:var(--oscuro-alto)}
.vpc-etiqueta{justify-self:start;font:500 12px/1 var(--fuente-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 10px;background:var(--fondo-alto);color:#55565D;box-shadow:inset 0 0 0 1px var(--linea)}
.vpc-etiqueta.real{background:var(--acento);color:#fff;box-shadow:none}
.vpc-escena.noche .vpc-etiqueta{background:transparent;color:#CFC8BD;box-shadow:inset 0 0 0 1px rgba(246,242,235,.3)}
.vpc-escena.noche .vpc-etiqueta.real{background:var(--senal);color:var(--oscuro);box-shadow:none}
.vpc-leyenda{margin:0;font:400 12.5px/1.5 var(--fuente-mono);color:#4E4F56}
.vpc-escena.noche .vpc-leyenda{color:#A9A298}
@media (max-width:900px){.vpc-terr .vpc-ancho{grid-template-columns:minmax(0,1fr)}.vpc-terr:nth-of-type(even) .vpc-terr-texto{order:0}}

/* Pantallas de ejemplo (en código, no imágenes) */
.app{background:#fff;color:var(--texto);border-radius:12px;box-shadow:0 26px 50px -30px rgba(17,19,24,.55),0 0 0 1px rgba(23,24,29,.08);font:400 13px/1.4 var(--fuente);overflow:hidden;min-width:0}
.app-barra{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--linea);font:500 12px var(--fuente-mono);color:#55565D}
.app-barra i{width:9px;height:9px;border-radius:50%;background:#E4DED5;display:inline-block}
.app-barra b{margin-left:auto;font-weight:500;color:var(--acento)}
.app-cuerpo{padding:14px;display:grid;gap:10px}
.app-fila{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.1fr);gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--linea);font-size:12.5px}
.app-fila.cab{font:500 12px var(--fuente-mono);letter-spacing:.05em;text-transform:uppercase;color:#6B675F}
.app-fila .m{font-family:var(--fuente-mono);font-variant-numeric:tabular-nums}
.chip{justify-self:start;font:500 12px/1 var(--fuente-mono);padding:5px 8px;border-radius:999px;background:rgba(47,107,79,.12);color:#2F6B4F;white-space:nowrap}
.chip.no{background:rgba(154,74,46,.12);color:#9A4A2E}
.chip.neutro{background:rgba(23,24,29,.06);color:#55565D}
.app-pie{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font:500 12px var(--fuente-mono);color:#55565D;background:var(--fondo)}
.paso-log{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:baseline;font:400 12.5px/1.45 var(--fuente-mono);padding:6px 0;border-bottom:1px dashed var(--linea)}
.paso-log .ok{color:#2F6B4F}.paso-log .en{color:var(--senal)}.paso-log .t{color:#6B675F}
.burbuja{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.4}
.burbuja.cli{justify-self:end;background:#DCF2D8;border-bottom-right-radius:4px}
.burbuja.bot{justify-self:start;background:#fff;border-bottom-left-radius:4px;box-shadow:0 0 0 1px var(--linea)}
.burbuja small{display:block;margin-top:4px;font:400 12px var(--fuente-mono);color:#6B675F}
.chat{background:#EFE7DD;border-radius:12px;padding:14px;display:grid;gap:8px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{background:var(--fondo);border-radius:10px;padding:12px;display:grid;gap:2px}
.kpi span{font:500 12px var(--fuente-mono);letter-spacing:.05em;text-transform:uppercase;color:#6B675F}
.kpi b{font:400 24px/1.1 var(--fuente-titulo)}
.kpi em{font:500 12px var(--fuente-mono);font-style:normal;color:#2F6B4F}
.grafico{width:100%;height:auto;display:block}
.cita{border-left:3px solid var(--senal);background:var(--fondo);padding:8px 12px;font:400 12.5px/1.45 var(--fuente-mono);color:#55565D}
.malla{display:grid;gap:8px}
.malla-fila{display:grid;grid-template-columns:7.5em minmax(0,1fr) 3.5em;gap:10px;align-items:center;font-size:13.5px}
.malla-barra{height:14px;border-radius:3px;background:var(--fondo-suave);position:relative}
.malla-barra i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--acento);width:calc(var(--h) / 40 * 100%)}
.malla-fila .m{font:500 12.5px var(--fuente-mono);text-align:right}
.clave{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.clave div{background:#202128;border-radius:12px;padding:12px 10px;display:grid;gap:4px;text-align:center}
.clave b{font:400 34px/1 var(--fuente-titulo);color:var(--senal)}
.clave span{font:500 12px var(--fuente-mono);letter-spacing:.04em;text-transform:uppercase;color:#E4DED5}
.clave small{font-size:12px;color:#A9A298}
@media (max-width:520px){.clave{grid-template-columns:repeat(2,minmax(0,1fr))}.clave div:last-child{grid-column:span 2}}
.alerta{background:#fff;border-radius:12px;padding:14px;display:grid;gap:8px;box-shadow:0 0 0 2px #9A4A2E}
.alerta b{font:400 20px/1.2 var(--fuente-titulo)}
.alerta p{margin:0;font-size:13.5px;color:#55565D}

/* Animación de «trabaja al entrar en vista». Todo se ve desde el primer cuadro: solo se marca. */
.vivo .app-fila:not(.cab),.vivo .paso-log,.vivo .burbuja{animation:marca .7s var(--ease) both;animation-delay:calc(var(--i,0) * 220ms)}
@keyframes marca{from{background-color:rgba(184,115,82,.18)}}
@media (prefers-reduced-motion:reduce){.vivo .app-fila,.vivo .paso-log,.vivo .burbuja{animation:none}}

/* Cierre y pie */
.vpc-cierre{padding-block:clamp(64px,9vw,120px);text-align:center;border-top:1px solid var(--linea)}
.vpc-cierre .vpc-ancho{display:grid;gap:20px;justify-items:center}
.vpc-cierre h2{margin:0;font:400 clamp(38px,5vw,66px)/1.02 var(--fuente-titulo);max-width:16ch}
.vpc-boton{display:inline-block;background:var(--acento);color:#fff;border-radius:999px;padding:14px 26px;font-weight:600;text-decoration:none}
.vpc-boton:hover{background:#7a473c}
.vpc-pie{background:var(--oscuro);color:#D8D2C8;padding-block:clamp(48px,7vw,88px) 40px}
.vpc-pie p{margin:0}
.vpc-pie-grilla{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.vpc-pie-nombre{font:400 clamp(56px,8vw,112px)/.9 var(--fuente-titulo);color:var(--texto-claro);letter-spacing:-.01em}
.vpc-pie-marca{display:grid;gap:12px;align-content:start}
.vpc-pie-titulo{font:500 12.5px/1 var(--fuente-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--senal);margin-bottom:14px!important}
.vpc-pie-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vpc-pie-col a{color:#E4DED5;text-decoration:none}
.vpc-pie-col a:hover,.vpc-pie-col a[aria-current="page"]{color:var(--texto-claro);text-decoration:underline;text-underline-offset:4px}
.vpc-pie-notas{grid-column:1/-1;display:grid;gap:4px;border-top:1px solid rgba(246,242,235,.14);padding-top:20px;font-size:14px;color:#A9A298}
@media (max-width:860px){.vpc-pie-grilla{grid-template-columns:repeat(3,minmax(0,1fr))}.vpc-pie-marca{grid-column:1/-1}}
@media (max-width:480px){.vpc-pie-grilla{grid-template-columns:repeat(2,minmax(0,1fr))}}


.vpc sup{font-size:max(12px,.6em)}
.vpc-hero .vpc-boton{margin-top:6px}
@media (max-height:760px){.vpc-hero{padding-block:48px 36px;gap:16px}.vpc-hero h1{font-size:clamp(48px,7vw,96px)}}

/* Aviso de cookies (src/js/cookies.js): solo aparece si hay ID de Google Analytics */
.vpc-cookies{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;max-width:560px;margin-inline:auto;background:var(--oscuro-alto);color:var(--texto-claro);border-radius:16px;padding:18px;display:grid;gap:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.vpc-cookies p{margin:0;font-size:15px;line-height:1.5}
.vpc-cookies a{color:var(--texto-claro);text-underline-offset:3px}
.vpc-cookies div{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.vpc-cookies button{font:600 15px/1 var(--fuente);border-radius:999px;padding:12px 18px;cursor:pointer;border:1px solid rgba(246,242,235,.4);background:transparent;color:var(--texto-claro)}
.vpc-cookies button[data-cookies="si"]{background:var(--senal);border-color:var(--senal);color:var(--oscuro)}
.vpc-pie-cookies{justify-self:start;margin-top:6px;font:400 14px/1.4 var(--fuente);color:#E4DED5;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}