/* FlowXR · demo comercial · manual de marca v2 "Nube de puntos", tema Noche.
   Reglas: el fosforo solo rellena (accion principal, foco, punto medido); dato en mono;
   filetes de 1 px; sin degradados ni glow; la interfaz acompana a la arquitectura. */
:root{
  color-scheme:dark;
  --paper:#0B0C0B; --surface:#141715; --sunk:#060706; --raised:#1B1E1C;
  --glass:rgba(16,18,17,.9); --glass-strong:rgba(16,18,17,.96); --scrim:rgba(0,0,0,.55);
  --ink:#E7ECE6; --muted:#9A9E99; --faint:#80847F;
  --line:#2A2D2A; --line-soft:rgba(231,236,230,.14); --line-ctrl:#666A65;
  --phosphor:#A9B857; --phosphor-strong:#DAF77E; --on-phosphor:#0B0C0B;
  --ring:0 0 0 4px rgba(169,184,87,.32);
  --red:#E57A63;
  --body:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"Azeret Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:150ms; --t-mid:250ms; --t-slow:600ms;
  --tap:44px;
  --gutter:clamp(16px,3vw,32px);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
button,a{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{text-decoration:none}
:focus-visible{outline:2px solid var(--phosphor);outline-offset:2px}
.mono{font-family:var(--mono)}
.rot{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.chico{width:16px;height:16px}
#bServicios .ic{fill:currentColor;stroke:none;width:16px;height:16px}

/* ---------------------------------------------------------------- lienzo */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;outline:none}
#gl.arrastrando{cursor:grabbing}

/* ---------------------------------------------------------------- carga */
#carga{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:20px;background:var(--paper);transition:opacity var(--t-slow) var(--ease),visibility 0s linear var(--t-slow);opacity:0;visibility:hidden}
#carga.on{opacity:1;visibility:visible;transition:opacity var(--t-mid) var(--ease)}
#carga p{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.iso{width:72px;height:72px;color:var(--ink)}
.iso circle{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){.iso g circle{animation:respira 2.6s var(--ease) infinite;animation-delay:calc(var(--i) * 60ms)}}
@keyframes respira{0%,100%{opacity:.3;transform:scale(.68)}45%{opacity:1;transform:scale(1)}}

/* ---------------------------------------------------------------- cabecera */
#cabecera{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:16px;padding:calc(14px + var(--safe-t)) var(--gutter) 14px;pointer-events:none}
#cabecera>*{pointer-events:auto}
.marca{display:block;width:112px;color:var(--ink);line-height:0;flex:none}
.marca svg{width:100%;height:auto}
.etiqueta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-soft);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:4px;padding:5px 8px}
.acciones{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn-texto{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border-radius:var(--r-md);font-size:14px;font-weight:500;color:var(--ink);background:var(--glass);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background var(--t-fast),border-color var(--t-fast)}
.btn-texto:hover{background:var(--glass-strong);border-color:var(--line-ctrl)}
#bIdioma{font-family:var(--mono);font-size:12px;letter-spacing:.06em;min-width:44px;justify-content:center}
.btn-contorno{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 16px;border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--ink);background:var(--glass);border:1px solid var(--line-ctrl);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn-contorno:hover{border-color:var(--ink);background:var(--glass-strong)}
.btn-contorno:active,.btn-primario:active{transform:scale(.98)}
.punto{width:8px;height:8px;border-radius:50%;background:var(--phosphor);flex:none}
.btn-primario{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 20px;border-radius:var(--r-md);background:var(--phosphor);color:var(--on-phosphor);font-size:16px;font-weight:600;transition:background var(--t-fast),transform var(--t-fast)}
.btn-primario:hover{background:var(--phosphor-strong)}
.btn-primario:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-primario .ic{transition:transform var(--t-mid) var(--ease)}
.btn-primario:hover .ic{transform:translateX(3px)}
.btn-icono{width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:var(--r-md);color:var(--ink);transition:background var(--t-fast)}
.btn-icono:hover{background:rgba(var(--ink-rgb),.08)}
.btn-icono:disabled{opacity:.35;cursor:default}
.btn-enlace{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--phosphor);padding:0}
.btn-enlace:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------------------------------------------------------------- portada */
#heroe{position:fixed;z-index:15;left:var(--gutter);bottom:calc(var(--gutter) + var(--safe-b));width:min(540px,calc(100vw - 2 * var(--gutter)));padding:28px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease),visibility 0s linear var(--t-slow)}
#heroe h1{margin-top:12px;font-size:clamp(30px,3.6vw,46px);line-height:1.04;letter-spacing:-.035em;font-weight:600}
#heroe .bajada{margin-top:12px;font-size:clamp(16px,1.4vw,19px);line-height:1.45;color:var(--muted);max-width:30em}
#heroe .pie{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12px;line-height:1.45;color:var(--faint)}
#heroe .botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pista-arrastre{display:flex;align-items:center;gap:10px;margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pista-arrastre i{position:relative;width:28px;height:8px;flex:none}
.pista-arrastre i::before,.pista-arrastre i::after{content:"";position:absolute;top:1px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.pista-arrastre i::before{left:0;opacity:.45}
.pista-arrastre i::after{left:0}
@media (prefers-reduced-motion:no-preference){.pista-arrastre i::after{animation:desliza 2.4s var(--ease) infinite}}
@keyframes desliza{0%{transform:translateX(0);opacity:0}15%{opacity:1}70%{transform:translateX(22px);opacity:1}100%{transform:translateX(22px);opacity:0}}
body:not(.fase-heroe) #heroe{opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){body.fase-heroe.listo #heroe{animation:entra .9s var(--ease) both .15s}}
@keyframes entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- sello (estado real vs propuesta) */
.sello{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--glass-strong);border:1px solid var(--line-soft);border-radius:4px;padding:6px 9px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sello::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--phosphor)}
.sello.es-foto::before,.sello.izq::before{border-radius:1px;background:var(--muted)}
#sello{position:fixed;z-index:14;left:50%;top:calc(70px + var(--safe-t));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);transition:opacity var(--t-mid) var(--ease)}
body.comparando #sello{opacity:0}

/* ---------------------------------------------------------------- comparador */
#comparador{position:fixed;inset:0;z-index:12;pointer-events:none}
#comparador .sello{position:absolute;top:calc(70px + var(--safe-t))}
#comparador .izq{right:calc(100% - var(--x,50%) + 14px)}
#comparador .der{left:calc(var(--x,50%) + 14px)}
#divisor{position:absolute;top:0;bottom:0;left:var(--x,50%);width:44px;margin-left:-22px;pointer-events:auto;cursor:ew-resize;touch-action:none;outline:none}
#divisor::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,var(--ink) 0 2px,transparent 2px 7px);opacity:.9}
#divisor .asa{position:absolute;left:0;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:var(--paper);border:1px solid var(--ink);display:grid;place-items:center;transition:transform var(--t-fast) var(--ease),background var(--t-fast)}
#divisor .asa svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#divisor:hover .asa,#divisor.activo .asa{transform:scale(1.08);background:var(--phosphor);border-color:var(--phosphor)}
#divisor:hover .asa svg,#divisor.activo .asa svg{stroke:var(--on-phosphor)}
#divisor:focus-visible .asa{box-shadow:var(--ring)}

/* ---------------------------------------------------------------- pistas contextuales */
#pista{position:fixed;z-index:25;left:50%;top:calc(112px + var(--safe-t));transform:translate(-50%,-8px);width:max-content;max-width:calc(100vw - 32px);padding:10px 14px;border-radius:var(--r-md);background:var(--glass-strong);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:14px;line-height:1.4;display:flex;align-items:center;gap:10px;opacity:0;visibility:hidden;transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility 0s linear var(--t-mid);pointer-events:none}
#pista::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--phosphor);flex:none}
#pista.on{opacity:1;transform:translate(-50%,0);visibility:visible;transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}
#aviso{position:fixed;z-index:70;left:50%;top:calc(76px + var(--safe-t));transform:translateX(-50%);padding:10px 14px;border-radius:var(--r-md);background:var(--glass-strong);border:1px solid var(--red);font-size:14px;display:none;max-width:calc(100vw - 32px)}
#aviso.on{display:block}

/* ---------------------------------------------------------------- capitulo (cada espacio cuenta un servicio) */
#capitulo{position:fixed;z-index:17;left:var(--gutter);bottom:calc(var(--dock-h,96px) + 28px + var(--safe-b));width:min(400px,calc(100vw - 2 * var(--gutter)));padding:14px 18px 18px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
body.fase-heroe #capitulo{opacity:0;transform:translateY(16px);visibility:hidden;pointer-events:none}
#capitulo.cambia{opacity:0;transform:translateY(8px);transition-duration:var(--t-fast)}
.cap-cab{display:flex;align-items:center;width:100%;min-height:32px;gap:8px;text-align:left}
.cap-cab .rot{flex:1;color:var(--muted)}
.cap-cab .sep{margin:0 8px;opacity:.6}
.cap-cab .ic{color:var(--muted);transition:transform var(--t-mid) var(--ease)}
#capitulo .cap-rot{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--phosphor);margin-top:6px;display:flex;align-items:center;gap:8px}
#capitulo .cap-rot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--phosphor);flex:none}
#capitulo h2{margin-top:8px;font-size:clamp(20px,2.2vw,26px);line-height:1.12;letter-spacing:-.02em;font-weight:600}
#capitulo #capD{margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted)}
.cap-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cap-acciones:empty{display:none}
.cap-acciones .btn-primario,.cap-acciones .btn-contorno{min-height:44px;font-size:15px}
#capitulo.plegado .cap-rot,#capitulo.plegado #capD,#capitulo.plegado .cap-acciones{display:none}
#capitulo.plegado h2{font-size:17px;margin-top:4px}
#capitulo.plegado .cap-cab .ic{transform:rotate(180deg)}
#capitulo.final{border-color:var(--phosphor)}

/* ---------------------------------------------------------------- dock */
#dock{position:fixed;z-index:18;left:50%;bottom:calc(16px + var(--safe-b));transform:translateX(-50%);width:min(760px,calc(100vw - 2 * var(--gutter)));display:grid;gap:8px;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
body.fase-heroe #dock{opacity:0;transform:translate(-50%,24px);pointer-events:none;visibility:hidden}
.barra{display:flex;align-items:center;gap:6px;padding:6px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.modo{position:relative;display:grid;grid-template-columns:repeat(4,1fr);flex:none;padding:3px;border-radius:var(--r-md);background:var(--sunk);border:1px solid var(--line);margin:0 4px}
.modo button{position:relative;z-index:1;height:38px;min-width:72px;padding:0 10px;border-radius:7px;font-size:14px;font-weight:600;color:var(--muted);transition:color var(--t-mid) var(--ease)}
.modo button[aria-checked="true"],.modo button:hover{color:var(--ink)}
.modo .indicador{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 4);border-radius:7px;background:var(--raised);border:1px solid var(--line-ctrl);transform:translateX(calc(var(--m,2) * 100%));transition:transform var(--t-mid) var(--ease)}
.btn-siguiente{margin-left:auto;flex:1 1 auto;min-width:0;max-width:300px;height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 14px 0 16px;border-radius:var(--r-md);background:var(--phosphor);color:var(--on-phosphor);transition:background var(--t-fast),transform var(--t-fast)}
.btn-siguiente[hidden]{display:none}
.btn-siguiente:hover{background:var(--phosphor-strong)}
.btn-siguiente:active{transform:scale(.98)}
.btn-siguiente:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-siguiente .txt{display:grid;text-align:left;min-width:0}
.btn-siguiente .rot{color:var(--panel);font-size:11px;line-height:1.1}
.btn-siguiente #sigNombre{font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-siguiente .ic{transition:transform var(--t-mid) var(--ease)}
.btn-siguiente:hover .ic{transform:translateX(3px)}
#progreso{display:flex;justify-content:center;flex-wrap:wrap;gap:2px;justify-self:center;padding:2px 8px;border-radius:999px;background:var(--glass);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#progreso button{width:20px;height:20px;display:grid;place-items:center;border-radius:50%}
#progreso button::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.35;transition:transform var(--t-mid) var(--ease),background var(--t-mid),opacity var(--t-mid)}
#progreso button.visto::before{opacity:.85}
#progreso button[aria-current="step"]::before{background:var(--phosphor);opacity:1;transform:scale(1.5)}
#progreso button.fin::before{border-radius:1px;transform:rotate(45deg)}
#progreso button.fin[aria-current="step"]::before{transform:rotate(45deg) scale(1.5)}
#progreso button:hover::before{opacity:1}

#propuestas{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#propuestas[hidden]{display:none}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:4px 14px 4px 4px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:14px;font-weight:500;transition:border-color var(--t-fast),background var(--t-fast)}
.chip img{width:56px;height:38px;object-fit:cover;border-radius:var(--r-sm);display:block}
.chip .letra{font-family:var(--mono);font-size:12px;color:var(--muted)}
.chip:hover{border-color:var(--line-ctrl)}
.chip[aria-checked="true"]{border-color:var(--phosphor);background:var(--glass-strong)}
.chip[aria-checked="true"] .letra{color:var(--phosphor)}
@media (prefers-reduced-motion:no-preference){#propuestas.llama .chip{animation:llama 1.6s var(--ease) 2}}
@keyframes llama{50%{border-color:var(--phosphor)}}

/* ---------------------------------------------------------------- hojas (dialog) */
dialog.hoja{position:fixed;margin:auto;width:min(560px,calc(100vw - 32px));max-height:min(86vh,820px);padding:0;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);border:1px solid var(--line);overflow:hidden;display:none;flex-direction:column}
dialog.hoja.ancha{width:min(880px,calc(100vw - 32px))}
dialog.hoja[open]{display:flex}
dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media (prefers-reduced-motion:no-preference){dialog.hoja[open]{animation:abre var(--t-mid) var(--ease)}dialog[open]::backdrop{animation:velo var(--t-mid) var(--ease)}}
@keyframes abre{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes velo{from{opacity:0}}
.hoja-cab{display:flex;align-items:flex-start;gap:16px;padding:24px 24px 16px}
.hoja-cab>div{flex:1}
.hoja-cab h2{margin-top:8px;font-size:clamp(22px,3vw,28px);line-height:1.12;letter-spacing:-.02em;font-weight:600}
.cerrar{margin:-8px -8px 0 0}
.regla{height:8px;margin:0 24px;background:repeating-linear-gradient(90deg,var(--line-ctrl) 0 1px,transparent 1px 8px);opacity:.6;flex:none}
.hoja-cuerpo{padding:20px 24px 24px;overflow:auto;display:grid;gap:28px}
.hoja-pie{display:flex;gap:12px;flex-wrap:wrap}
.hoja-pie.dos>*{flex:1 1 180px}
.texto{color:var(--muted);font-size:16px;line-height:1.55}
.grid-salas{padding:20px 24px 24px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tarjeta-sala{display:grid;gap:8px;text-align:left;padding:0;border-radius:var(--r-md)}
.tarjeta-sala .foto{position:relative;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--sunk)}
.tarjeta-sala img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow) var(--ease)}
.tarjeta-sala:hover img{transform:scale(1.04)}
.tarjeta-sala .n{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.tarjeta-sala .t{font-size:15px;font-weight:600;line-height:1.2}
.tarjeta-sala .visto{position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--paper)}
.tarjeta-sala[aria-current="true"] .foto{border-color:var(--phosphor);box-shadow:0 0 0 1px var(--phosphor)}

.estado{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.estado i{width:9px;height:9px;border-radius:50%;flex:none}
.estado.mostrado i{background:var(--phosphor)}
.estado.disponible i{border:1.5px solid var(--ink)}
.estado .nota{color:var(--muted);margin-left:auto}
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tarjeta{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--paper)}
.tarjeta img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--sunk)}
.tarjeta>div{padding:14px 14px 6px;display:grid;align-content:start;gap:6px}
.tarjeta h3,.publico h3,.aliado h3{font-size:17px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.tarjeta p,.aliado p{font-size:14px;line-height:1.5;color:var(--muted)}
.publicos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.publico{border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:grid;align-content:start;gap:8px}
.publico ul{list-style:none;display:grid;gap:8px;margin-top:4px}
.publico li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:var(--muted)}
.publico li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--ink)}
.aliado{display:grid;gap:6px;padding-top:4px}
.elige{border:0;display:grid;gap:8px}
.elige legend{margin-bottom:8px}
.elige label{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--line-ctrl);cursor:pointer;font-size:15px;transition:border-color var(--t-fast),background var(--t-fast)}
.elige input{appearance:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-ctrl);display:grid;place-items:center;flex:none}
.elige input:checked{border-color:var(--phosphor)}
.elige input:checked::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--phosphor)}
.elige label:has(input:checked){border-color:var(--phosphor);background:rgba(var(--acc-rgb),.06)}
.elige input:focus-visible{outline:none;box-shadow:var(--ring)}
.correo{font-size:15px;letter-spacing:.02em;color:var(--ink);padding:14px;border-radius:var(--r-md);background:var(--sunk);border:1px solid var(--line);text-align:center}
.sin-js,.sin-webgl{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted);font-size:16px;line-height:1.5}

/* ---------------------------------------------------------------- telefono */
@media (max-width:720px){
  .tarjetas{grid-template-columns:1fr}
  .tarjeta{grid-template-columns:120px 1fr;grid-template-rows:none}
  .tarjeta img{height:100%;aspect-ratio:auto}
  .publicos{grid-template-columns:1fr}
  .estado .nota{margin-left:0;flex-basis:100%}
}
@media (max-width:640px){
  .etiqueta{display:none}
  .marca{width:96px}
  #bServicios span{display:none}
  #bServicios{width:40px;padding:0;justify-content:center}
  .btn-contorno{padding:0 12px}
  #heroe{left:12px;right:12px;width:auto;bottom:calc(12px + var(--safe-b));padding:20px}
  #heroe .botones>*{flex:1 1 100%}
  #dock{width:calc(100vw - 16px);bottom:calc(6px + var(--safe-b));gap:4px}
  .barra{flex-wrap:wrap;gap:4px}
  .modo{flex:1 1 auto;margin:0}
  .modo button{min-width:0;padding:0 6px}
  .btn-siguiente{order:5;flex:1 1 100%;max-width:none}
  #capitulo{left:8px;right:8px;width:auto;bottom:calc(var(--dock-h,120px) + 14px + var(--safe-b));padding:12px 14px 14px}
  #capitulo h2{font-size:19px}
  #capitulo #capD{font-size:14px}
  #propuestas .chip{min-height:44px;font-size:13px}
  #propuestas .chip img{width:44px;height:30px}
  #sello{top:calc(64px + var(--safe-t));max-width:calc(100vw - 32px)}
  #comparador .sello{top:calc(64px + var(--safe-t));font-size:10px;max-width:calc(50vw - 24px);white-space:normal}
  dialog.hoja,dialog.hoja.ancha{width:100vw;max-width:100vw;max-height:88vh;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
  @media (prefers-reduced-motion:no-preference){dialog.hoja[open]{animation:sube var(--t-mid) var(--ease)}}
  .hoja-cab{padding:20px 16px 12px}
  .regla{margin:0 16px}
  .hoja-cuerpo,.grid-salas{padding:16px 16px calc(20px + var(--safe-b))}
  .grid-salas{grid-template-columns:1fr 1fr}
}
@keyframes sube{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:360px){.btn-contorno span{font-size:13px}.marca{width:84px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:1ms!important;animation:none!important}}

#cabecera,#dock,#capitulo .cap-cab,#heroe .botones,#comparador,.chip{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (max-width:640px){
  #capitulo{padding:10px 14px 12px}
  #capitulo .cap-rot{margin-top:2px;font-size:11px}
  #capitulo h2{font-size:18px;margin-top:4px}
  #capitulo #capD{font-size:13.5px;margin-top:4px}
  .cap-acciones{margin-top:10px}
  .cap-acciones .btn-primario,.cap-acciones .btn-contorno{min-height:40px;font-size:14px;padding:0 14px}
  #pista{top:calc(104px + var(--safe-t));font-size:13px}
  #progreso button{width:18px;height:18px}
}
@media (max-width:640px){
  #propuestas{flex-wrap:nowrap;gap:6px}
  #propuestas .chip{flex:1 1 0;min-width:0;min-height:40px;padding:0 10px;gap:6px;font-size:12.5px}
  #propuestas .chip img{display:none}
  #propuestas .chip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
#capNum:empty+.sep{display:none}

/* ---------------------------------------------------------------- v2 (informe del forastero) */
.estado .nota:empty{display:none}
.ct-botones{display:grid;gap:10px}
.ct-botones a{justify-content:space-between}
.ct-correo{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.ct-correo .mono{color:var(--ink)}
.ct-correo .btn-enlace{min-height:32px;font-size:13px}
[data-idioma]{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
@media (min-width:421px){.hoja-pie [data-idioma]{display:none}}
@media (max-width:420px){#bIdioma{display:inline-flex}}
.chip[aria-checked="true"] .letra{background:var(--phosphor);color:var(--on-phosphor);border-radius:4px;padding:1px 6px}
.chip[aria-checked="false"]{opacity:.82}
.chip[aria-checked="false"]:hover{opacity:1}
body.final .modo{display:none}
.grid-salas h3{grid-column:1/-1;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400;margin-top:8px}
.grid-salas h3:first-child{margin-top:0}
.grid-salas{padding-bottom:40px}
@media (max-width:640px){
  #heroe .pista-arrastre{display:none}
  #heroe .botones{flex-wrap:nowrap}
  #heroe .botones>*{flex:1 1 auto;min-height:46px;font-size:15px;padding:0 12px}
  #heroe .bajada{font-size:15px}
  #comparador .sello{font-size:11px;white-space:nowrap;max-width:none}
}

/* ---------------------------------------------------------------- v3: aliados, Colombia, contacto real */
.publico .txt{font-size:14px;line-height:1.5;color:var(--muted)}
.publico .btn-enlace{justify-self:start}
.colombia{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);padding:12px}
.colombia img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);display:block;background:var(--sunk)}
.colombia>div{display:grid;gap:6px;align-content:start}
.colombia h3{font-size:17px;line-height:1.2;font-weight:600}
.colombia .txt{font-size:14px;line-height:1.5;color:var(--muted)}
.hoja-foto{width:100%;height:180px;object-fit:cover;display:block;flex:none}
.ct-persona{font-size:14px;color:var(--muted)}
.ct-botones a{min-height:48px}
.ct-botones .btn-contorno{justify-content:space-between;padding:0 16px}
@media (max-width:720px){.colombia{grid-template-columns:1fr}.colombia img{aspect-ratio:16/9}.hoja-foto{height:140px}}
/* etiquetas del comparador ancladas a los bordes: nunca se cortan; se ocultan si la linea les pasa por encima */
#comparador .izq{left:12px;right:auto}
#comparador .der{right:12px;left:auto}
#comparador .sello{transition:opacity var(--t-fast)}
#comparador.sin-izq .izq,#comparador.sin-der .der{opacity:0}

#aliados .publicos{grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){#aliados .publicos{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- v4: "What we do" visual */
.svc .hoja-cuerpo{gap:32px}
.svc .tarjetas{grid-template-columns:repeat(3,1fr);gap:12px}
.svc .tarjeta{position:relative;display:block;padding:0;text-align:left;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--paper);cursor:pointer;transition:border-color var(--t-fast),transform var(--t-mid) var(--ease)}
.svc .tarjeta img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--sunk);transition:transform var(--t-slow) var(--ease)}
.svc .tarjeta img.mitad{position:absolute;top:0;left:0;clip-path:inset(0 0 0 50%)}
.svc .tarjeta:has(img.mitad)::after{content:"";position:absolute;top:0;left:50%;width:2px;margin-left:-1px;height:0;padding-bottom:75%;background:repeating-linear-gradient(to bottom,var(--ink) 0 2px,transparent 2px 6px)}
.svc .tarjeta .pie-t{display:grid;gap:2px;padding:12px 44px 14px 14px}
.svc .tarjeta b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.svc .tarjeta .pie-t span{font-size:13.5px;line-height:1.4;color:var(--muted)}
.svc .tarjeta>.ic{position:absolute;right:12px;bottom:16px;color:var(--phosphor);transition:transform var(--t-mid) var(--ease)}
.svc .tarjeta:hover{border-color:var(--phosphor)}
.svc .tarjeta:hover img{transform:scale(1.04)}
.svc .tarjeta:hover>.ic{transform:translateX(3px)}
.svc .publicos{grid-template-columns:1fr 1fr;gap:12px}
.svc .publico{padding:18px;gap:10px;background:var(--paper)}
.svc .publico .frase{font-size:clamp(19px,2vw,24px);line-height:1.18;letter-spacing:-.02em;font-weight:600}
.svc .publico .btn-enlace{min-height:32px}
.svc .publico .btn-enlace .ic{width:16px;height:16px}
.svc .fichas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.svc .ficha{position:relative;display:grid;align-content:start;gap:4px;min-height:96px;padding:14px 40px 14px 14px;text-align:left;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);cursor:pointer;overflow:hidden;transition:border-color var(--t-fast)}
.svc .ficha b{font-size:15px;font-weight:600}
.svc .ficha span{font-size:13px;color:var(--muted);line-height:1.35}
.svc .ficha>.ic{position:absolute;right:12px;top:14px;width:18px;height:18px;color:var(--muted);transition:color var(--t-fast),transform var(--t-mid) var(--ease)}
.svc .ficha:hover{border-color:var(--phosphor)}
.svc .ficha:hover>.ic{color:var(--phosphor);transform:translateX(2px)}
.svc .ficha.con-foto{padding-top:0}
.svc .ficha.con-foto img{width:calc(100% + 54px);margin:0 -40px 8px -14px;height:64px;object-fit:cover;display:block}
.svc .ficha.con-foto>.ic{top:auto;bottom:14px}
@media (max-width:720px){
  .svc .tarjetas{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;gap:10px}
  .svc .tarjeta{flex:0 0 78%;scroll-snap-align:start;display:block;grid-template-columns:none}
  .svc .tarjeta img{height:auto;aspect-ratio:4/3}
  .svc .publicos{grid-template-columns:1fr}
  .svc .fichas{grid-template-columns:1fr 1fr}
}

/* ---------------------------------------------------------------- v5: tres capas (FlowXR · del fundador · aliadas) */
.svc .fundador{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.svc .ficha .rot{color:var(--muted)}
.svc .ficha.app b{font-size:18px;letter-spacing:-.01em}
.svc .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.svc .chips i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:4px 8px;border-radius:4px;border:1px solid var(--line-ctrl);color:var(--ink)}
.svc .aliadas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc .aliada{position:relative;display:block;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--paper);color:var(--ink);transition:border-color var(--t-fast)}
.svc .aliada img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--sunk);transition:transform var(--t-slow) var(--ease)}
.svc .aliada .pie-t{display:grid;gap:3px;padding:12px 44px 14px 14px}
.svc .aliada b{font-size:17px;font-weight:600}
.svc .aliada .pie-t>span:last-child{font-size:13.5px;line-height:1.4;color:var(--muted)}
.svc .aliada>.ic{position:absolute;right:12px;bottom:16px;width:18px;height:18px;color:var(--muted)}
.svc .aliada:hover{border-color:var(--ink)}
.svc .aliada:hover img{transform:scale(1.03)}
@media (max-width:720px){.svc .fundador,.svc .aliadas{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- v6: a quien le hablamos */
.svc .audiencia{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.svc .audiencia span{font-size:15px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line-ctrl);background:var(--paper)}
.svc .no-competimos{font-size:16px;line-height:1.45;color:var(--ink);margin-bottom:14px;max-width:46em}
#heroe>.rot{color:var(--ink)}

/* ---------------------------------------------------------------- v7: cada panorama es una seccion de la landing */
.cap-iso{width:16px;height:16px;color:var(--ink);flex:none}
.cap-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cap-chips:empty{display:none}
.cap-chips span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:4px 8px;border-radius:4px;border:1px solid var(--line-ctrl);color:var(--ink);background:var(--panel)}
#capitulo.plegado .cap-chips{display:none}
@media (max-width:640px){.cap-chips{margin-top:8px}.cap-chips span{font-size:10.5px;padding:3px 7px}}

/* ---------------------------------------------------------------- v8: pintar para revelar, fases */
body.pintando #gl{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Ccircle cx='28' cy='28' r='24' fill='none' stroke='%23A9B857' stroke-width='2'/%3E%3Ccircle cx='28' cy='28' r='3' fill='%23A9B857'/%3E%3C/svg%3E") 28 28,crosshair}
#pintaUI{position:fixed;z-index:19;left:50%;bottom:calc(var(--dock-h,96px) + 28px + var(--safe-b));transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--phosphor);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:15px;font-weight:500;white-space:nowrap;max-width:calc(100vw - 24px)}
#pintaUI[hidden]{display:none}
#pintaUI .btn-contorno{min-height:36px;padding:0 14px;border-radius:999px}
#pintaUI .pincel{width:12px;height:12px;border-radius:50%;background:var(--phosphor);flex:none}
@media (prefers-reduced-motion:no-preference){#pintaUI{animation:respiraUI 2.4s var(--ease) infinite}#pintaUI .pincel{animation:late 1.2s var(--ease) infinite}}
@keyframes respiraUI{50%{box-shadow:0 0 0 6px rgba(var(--acc-rgb),.12)}}
@keyframes late{50%{transform:scale(1.5)}}
#capitulo.esperando{opacity:0;transform:translateY(12px);pointer-events:none}
@media (prefers-reduced-motion:no-preference){#capitulo.premio{animation:premio .9s var(--ease)}}
@keyframes premio{0%{opacity:0;transform:translateY(18px) scale(.97)}60%{opacity:1;transform:none;border-color:var(--phosphor)}100%{border-color:var(--line-soft)}}
#progreso button.revelado::before{background:var(--phosphor);opacity:.9}
#progreso button.revelado[aria-current="step"]::before{box-shadow:0 0 0 3px rgba(var(--acc-rgb),.28)}
.fases{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.fases li{display:flex;align-items:center;gap:8px}
.fases li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--phosphor);flex:none}
.fases li+li::before{margin-left:10px;box-shadow:-18px 0 0 -3px var(--line-ctrl)}
.fases li+li{padding-left:12px;position:relative}
.fases li+li::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--line-ctrl)}
@media (max-width:640px){
  #pintaUI{font-size:13px;gap:8px;padding:6px 6px 6px 12px;white-space:normal}
  .modo button{padding:0 4px;font-size:13px}
  .fases{font-size:11px}
}

/* ---------------------------------------------------------------- v9: fases en What we do, Colombia, carpinteria */
.svc .fases-svc{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.svc .fases-svc a,.svc .fases-svc button{position:relative;display:grid;align-content:start;gap:4px;width:100%;height:100%;min-height:112px;padding:12px 12px 14px;text-align:left;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);cursor:pointer;transition:border-color var(--t-fast),transform var(--t-mid) var(--ease)}
.svc .fases-svc .n{font-family:var(--mono);font-size:11px;color:var(--phosphor);letter-spacing:.06em}
.svc .fases-svc b{font-size:15px;font-weight:600}
.svc .fases-svc span:not(.n){font-size:13px;line-height:1.35;color:var(--muted)}
.svc .fases-svc .ic{position:absolute;right:10px;top:12px;width:16px;height:16px;color:var(--muted)}
.svc .fases-svc a:hover,.svc .fases-svc button:hover{border-color:var(--phosphor);transform:translateY(-2px)}
.svc .fases-svc li:nth-child(4) button{border-color:var(--line-ctrl)}
.co-chips{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.cap-acciones .madera{border-color:rgba(var(--acc-rgb),.55)}
@media (max-width:720px){.svc .fases-svc{grid-template-columns:1fr 1fr}.svc .fases-svc li:first-child{grid-column:1/-1}}

/* ---------------------------------------------------------------- v10: compartir */
.que-compartir{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:var(--r-md);background:var(--sunk);border:1px solid var(--line)}
.que-compartir button{min-height:40px;border-radius:7px;font-size:14px;font-weight:600;color:var(--muted)}
.que-compartir button[aria-checked="true"]{background:var(--raised);color:var(--ink);border:1px solid var(--line-ctrl)}
.qr{width:min(260px,70vw);aspect-ratio:1;margin:0 auto;padding:14px;border-radius:var(--r-lg);background:#fff;box-shadow:0 0 0 6px rgba(var(--acc-rgb),.35)}
.qr svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){dialog[open] .qr{animation:qrEntra .6s var(--ease)}}
@keyframes qrEntra{from{transform:scale(.9) rotate(-2deg);opacity:0}}
.qr-url{text-align:center;font-size:14px;color:var(--ink);margin-top:-12px}
.con-codigo{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;color:var(--muted);cursor:pointer}
.con-codigo[hidden]{display:none}
.con-codigo input{width:18px;height:18px;accent-color:var(--phosphor)}
.nfc{width:100%}
.nfc[hidden]{display:none}
.texto.chico{font-size:13px;text-align:center}
@media (max-width:640px){#bCompartir span{display:none}#bCompartir{width:40px;padding:0;justify-content:center}}

/* ---------------------------------------------------------------- v11: vitrina del ecosistema (ultimo paso) */
#ecosistema{position:fixed;z-index:17;left:50%;top:calc(64px + var(--safe-t));bottom:calc(var(--dock-h,96px) + 24px + var(--safe-b));transform:translateX(-50%);width:min(980px,calc(100vw - 2 * var(--gutter)));overflow:auto;padding:22px;border-radius:var(--r-lg);background:var(--glass-strong);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:grid;align-content:start;gap:10px}
#ecosistema[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){#ecosistema:not([hidden]){animation:abre .6s var(--ease)}}
#ecosistema h2{font-size:clamp(26px,3.4vw,40px);line-height:1.05;letter-spacing:-.03em;font-weight:600}
.eco-d{color:var(--muted);font-size:16px;line-height:1.45;max-width:40em}
.eco-cuenta{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--phosphor)}
.eco-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
body.final #capitulo,body.final #sello,body.final #pintaUI{display:none}
@media (max-width:720px){
  #ecosistema{width:calc(100vw - 16px);padding:16px;top:calc(58px + var(--safe-t))}
}

/* ---------------------------------------------------------------- v12: hoja de aliada */
.al-lema{margin-top:8px;font-size:16px;font-style:italic;color:var(--muted)}
.al-juntos{padding:14px;border-radius:var(--r-md);border:1px solid var(--phosphor);background:rgba(var(--acc-rgb),.05);display:grid;gap:6px}
.al-juntos .rot{color:var(--phosphor)}
.al-juntos p:last-child{font-size:16px;line-height:1.45}
.al-otros{display:flex;flex-wrap:wrap;gap:12px}
#dAliado .hoja-foto{height:200px;object-position:top}
.svc button.aliada{padding:0;text-align:left;width:100%;cursor:pointer}

/* ---------------------------------------------------------------- v13: correcciones de los perfiles */
#capitulo.compacto #capD,#capitulo.compacto .cap-acciones{display:none}
#capitulo.compacto h2{font-size:18px}
.marca.tu-marca{width:auto}
.tu-logo{display:inline-flex;gap:6px;font:700 18px/1 var(--body);letter-spacing:.18em;color:var(--ink);padding:10px 14px;border:1.5px solid var(--ink);border-radius:4px;background:var(--panel)}
.tu-logo b{font-weight:400}
@media (prefers-reduced-motion:no-preference){.marca.tu-marca{animation:premio .8s var(--ease)}}
.ct-empieza{font-size:14px;line-height:1.5;color:var(--ink);padding:12px 14px;border-left:2px solid var(--phosphor);background:rgba(var(--acc-rgb),.05)}
.svc .fases-svc{grid-template-columns:repeat(4,1fr)}
#ecosistema{bottom:auto;max-height:calc(100vh - 64px - var(--dock-h,96px) - 40px - var(--safe-t) - var(--safe-b));max-height:calc(100dvh - 64px - var(--dock-h,96px) - 40px - var(--safe-t) - var(--safe-b))}
.eco-cta>*{min-height:48px}
@media (max-width:720px){
  .svc .tarjetas{display:grid;grid-template-columns:1fr;overflow:visible;margin:0;padding:0}
  .svc .tarjeta{flex:none}
  .svc .fases-svc{grid-template-columns:1fr 1fr}
  .svc .fases-svc li:first-child{grid-column:auto}
  #pintaUI{top:calc(104px + var(--safe-t));bottom:auto}
}

@media (max-width:640px){#divisor .asa{top:36%}#capitulo.plegado .cap-cab{min-height:28px}}

/* v7: propuesta clara, paneles disciplinados y navegación directa */
.v7-nav{position:fixed;z-index:40;top:10px;left:50%;translate:-50% 0;display:flex;gap:4px;padding:4px;background:rgba(244,245,242,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:var(--r-md)}.v7-nav button{min-height:44px;padding:0 12px;font:12px var(--mono);color:var(--ink)}
.hero-compare{--proposal:35%;position:relative;width:min(820px,calc(100vw - 32px));aspect-ratio:2/1;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow-2)}.hero-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-propuesta{clip-path:inset(0 0 0 var(--proposal))}.hero-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.hero-compare::after{content:"";position:absolute;top:0;bottom:0;left:var(--proposal);width:2px;background:var(--phosphor);pointer-events:none}.hero-today,.hero-proposal{position:absolute;bottom:12px;padding:5px 8px;background:var(--glass-strong);font:11px var(--mono)}.hero-today{left:12px}.hero-proposal{right:12px}.hero-notice,.hero-example{font:11px var(--mono);margin:8px 0 0}.hero-example{color:var(--muted)}
.fp{width:292px}.fp-c{width:292px}.fp-cab{min-height:64px}.fp-n{display:block}.fp-k{display:none}.fp-t{font-size:15px}.fp-cuerpo{grid-template-rows:0fr}.fp.abre .fp-cuerpo{grid-template-rows:1fr}.fp-mas{font:10px var(--mono);text-transform:uppercase}.fp.abre .fp-mas{transform:none;color:var(--phosphor)}
.sv-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line);margin-bottom:10px}.sv-paq-lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.sv-paq{display:block;padding:16px}.sv-der{margin-top:12px}.sv-lim,.sv-mensual,.sv-incluye-ant{display:none}.sv-que li{font-size:13px}.sv-que li:nth-child(n+5){display:none}
.allies-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.ally-card{display:grid;gap:10px;color:var(--ink);text-decoration:none;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg)}.ally-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md)}.ally-card span{color:var(--muted);font-size:14px}
@media(max-width:900px){.sv-paq-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.v7-nav{top:auto;bottom:10px;width:calc(100vw - 16px);justify-content:space-around}.v7-nav button{font-size:10px;padding:0 6px}.sv-paq-lista,.allies-grid{grid-template-columns:1fr}.fp{width:min(292px,calc(100vw - 40px))}.fp-c{width:min(292px,calc(100vw - 40px))}#heroe{overflow:auto;padding-bottom:80px}.hero-compare{width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- v14 · intro: 3 s en negro con el logo (Ruben 2026-09-25) ---- */
#carga{background:#000;transition:opacity 900ms var(--ease),visibility 0s linear 900ms}
#carga .intro-logo{width:min(280px,58vw);color:var(--ink);opacity:1}
#carga .intro-logo svg{width:100%;height:auto;display:block}
@media (prefers-reduced-motion:no-preference){
  #carga.on .intro-logo{animation:introLogo 3s cubic-bezier(.2,.8,.2,1) both}
  #carga:not(.on) .intro-logo{transform:scale(1.04);opacity:0;transition:transform 900ms var(--ease),opacity 700ms var(--ease)}
}
@keyframes introLogo{0%{opacity:0;transform:scale(.96)}30%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1.01)}}

/* ---- v15 · el verde de la marca en el intro (Ruben 2026-09-25: "integra algo del verde en la marca con alguna animacion") ----
   Un barrido fosforo recorre la nube de puntos de abajo hacia arriba (como un escaneo) y el anillo central queda encendido.
   El anillo del logo de la cabecera tambien queda en fosforo, igual que en el favicon. */
#carga .intro-logo svg .k,.marca svg .k{stroke:var(--phosphor)}
#carga .intro-logo svg g g circle:nth-child(-n+3){--f:0}
#carga .intro-logo svg g g circle:nth-child(n+4):nth-child(-n+8){--f:1}
#carga .intro-logo svg g g circle:nth-child(n+9):nth-child(-n+12){--f:2}
#carga .intro-logo svg g g circle:nth-child(n+13):nth-child(-n+17){--f:3}
#carga .intro-logo svg g g circle:nth-child(n+18){--f:4}
@media (prefers-reduced-motion:no-preference){
  #carga.on .intro-logo svg g g circle{animation:introPunto 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--f) * 120ms + 450ms)}
  #carga.on .intro-logo svg .k{transform-box:fill-box;transform-origin:center;animation:introAnillo 3s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes introPunto{0%,100%{fill:currentColor}35%{fill:var(--phosphor)}}
@keyframes introAnillo{0%,30%{stroke:currentColor;transform:scale(1)}55%{stroke:var(--phosphor);transform:scale(1.25)}75%,100%{stroke:var(--phosphor);transform:scale(1)}}

/* ---- v16 · intro pintable (Ruben 2026-09-25: "la opcion de pintar la pantalla... desde el intro de inicio") ---- */
#cargaLienzo{position:absolute;inset:0;width:100%;height:100%;display:none;touch-action:none;cursor:crosshair}
#carga.pintable{background:transparent;place-content:stretch}
#carga.pintable #cargaLienzo{display:block}
#carga.pintable .intro-logo{position:absolute;left:50%;top:50%;translate:-50% -50%;pointer-events:none;transition:opacity 500ms var(--ease)}
#carga.pintando .intro-logo,#carga.abriendo .intro-logo{opacity:0 !important}
#carga .intro-pista{display:none}
#carga.pintable .intro-pista{display:flex;align-items:center;gap:10px;position:absolute;left:50%;bottom:max(64px,calc(env(safe-area-inset-bottom) + 48px));translate:-50% 0;pointer-events:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:opacity 400ms var(--ease)}
#carga.pintable .intro-pista i{width:10px;height:10px;border-radius:50%;background:var(--phosphor);box-shadow:0 0 0 0 rgba(169,184,87,.5);animation:introPulso 1.6s ease-out infinite}
#carga.pintando .intro-pista,#carga.abriendo .intro-pista{opacity:0}
#carga.pintable .intro-logo{animation:none}
@keyframes introPulso{0%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.55)}100%{box-shadow:0 0 0 16px rgba(var(--acc-rgb),0)}}
#carga:not(.on) #cargaLienzo{pointer-events:none}

/* ---------------------------------------------------------------- v4: casa tropical, etiqueta fija, aviso de falla */
/* etiqueta fija: nombre de la casa + "propuesta de diseno, no obra construida". Siempre visible. */
#casa{position:fixed;z-index:14;top:calc(58px + var(--safe-t));left:var(--gutter);right:var(--gutter);display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
#casa span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:var(--muted);background:var(--glass);border:1px solid var(--line-soft);border-radius:4px;padding:5px 8px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#casa .fijo{color:var(--ink);display:inline-flex;align-items:center;gap:8px}
#casa .fijo::before{content:"";width:7px;height:7px;flex:none;border-radius:1px;background:var(--muted)}
body.fase-heroe #casa{opacity:0}
/* los rotulos que vivian a 70px bajan lo que mida la etiqueta (la mide app.js en --casa-b) */
#sello,#comparador .sello{top:calc(var(--casa-b,70px) + 8px)}
#pista{top:calc(var(--casa-b,70px) + 52px)}
@media (max-width:640px){
  #casa{left:8px;right:8px;top:calc(54px + var(--safe-t));gap:4px}
  #casa span{font-size:10px;padding:4px 6px}
}
/* sin esfera final: solo modelo, sin selector de modos */
body.solo-modelo .modo{display:none}
/* aviso visible cuando una esfera (o el JSON) no cargo */
#falla{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));padding:22px 24px;border:1px solid var(--red);border-radius:var(--r-lg);background:var(--glass-strong);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:grid;gap:10px;justify-items:start}
#falla[hidden]{display:none}
#falla .rot{color:var(--red)}
#falla #fallaTxt{font-size:15px;line-height:1.5}
/* tarjeta de la vitrina sin foto: el isotipo de nube de puntos */
.svc .ficha:not(.con-foto) img{display:none}
@media (max-width:640px){#pintaUI{top:calc(var(--casa-b,70px) + 50px);bottom:auto}}
/* con el aviso de falla a la vista no se muestran rotulos ni modos del punto anterior */
body.con-falla #sello,body.con-falla .modo,body.con-falla #pintaUI,body.con-falla #comparador{display:none}
.svc a.ficha{text-decoration:none}
#ecoEjemplo{text-decoration:none;display:inline-flex;align-items:center}

/* ---------------------------------------------------------------- v4-C: paneles flotantes en 360, entradas y bloque final
   Tarjetas de DOM ancladas a una direccion de la esfera. El fosforo solo marca el ancla y lo que se puede tocar. */
#paneles{position:fixed;inset:0;z-index:16;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s}
#paneles.on{opacity:1;visibility:visible;transition-delay:0s}
.fp{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;opacity:var(--o,1);transition:opacity .35s var(--ease);will-change:transform}
.fp-ancla{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--phosphor);background:var(--panel)}
.fp-ancla::before{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--phosphor)}
.fp-ancla::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;margin-left:-.5px;background:rgba(var(--acc-rgb),.55)}
@media (prefers-reduced-motion:no-preference){.fp-ancla{animation:pulsoAncla 2.8s var(--ease) infinite}}
@keyframes pulsoAncla{0%,100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.32)}60%{box-shadow:0 0 0 9px rgba(var(--acc-rgb),0)}}
.fp-c{position:absolute;left:0;top:17px;width:min(292px,calc(100vw - 56px));transform:translateX(-50%);border-radius:var(--r-lg);background:var(--glass-strong);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 14px 40px rgba(0,0,0,.38);pointer-events:auto;overflow:hidden;transition:border-color var(--t-mid) var(--ease)}
.fp.lejos .fp-c{pointer-events:none}
@media (prefers-reduced-motion:no-preference){#paneles.on .fp-c{animation:fpEntra .8s var(--ease) calc(var(--i,0) * 130ms + 150ms) backwards}}
@keyframes fpEntra{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.96)}}
.fp-cab{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;text-align:left;color:var(--ink);touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
div.fp-cab{cursor:grab}
.fp-ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-ctrl);background:rgba(var(--ink-rgb),.05);color:var(--ink);transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.fp-ic .ic{width:18px;height:18px}
.fp-cab:hover .fp-ic,.fp-cab:focus-visible .fp-ic{border-color:var(--phosphor);color:var(--phosphor)}
.fp-tx{flex:1;min-width:0;display:grid;gap:2px}
.fp-k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.fp-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--phosphor);flex:none}
.fp-t{font-size:16px;line-height:1.2;font-weight:600;letter-spacing:-.015em}
.fp-n{display:none;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.fp-mas{flex:none;color:var(--muted);transition:transform var(--t-mid) var(--ease),color var(--t-fast)}
.fp-cab:hover .fp-mas{color:var(--phosphor)}
.fp.abre .fp-mas{transform:rotate(45deg)}
.fp-cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.fp.abre .fp-cuerpo{grid-template-rows:1fr}
.fp-int{overflow:hidden;min-height:0;padding:0 14px;display:grid;gap:10px;align-content:start}
.fp.abre .fp-int{padding:2px 14px 14px}
.fp-d{font-size:14px;line-height:1.45;color:var(--muted)}
.fp-li{list-style:none;display:grid;gap:6px;font-size:13.5px;line-height:1.4;color:var(--ink)}
.fp-li li{position:relative;padding-left:16px}
.fp-li li::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--phosphor)}
.fp-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.fp-acc>*{min-height:42px;font-size:14px;padding:0 14px;flex:1 1 auto}
.fp.abre .fp-c{border-color:rgba(var(--acc-rgb),.55)}
/* tarjeta: cerrada deja sólo el título; categoría y detalle aparecen al abrir */
.fp.carta:not(.abre) .fp-k,.fp.carta:not(.abre) .fp-cuerpo{display:none}
/* pin: etiqueta pequena (entradas de la llegada); al abrir se vuelve tarjeta */
.fp.pin:not(.abre) .fp-c{width:auto;border-radius:999px}
.fp.pin:not(.abre) .fp-cab{padding:6px 14px 6px 6px;gap:8px}
.fp.pin:not(.abre) .fp-k,.fp.pin:not(.abre) .fp-t{display:none}
.fp.pin:not(.abre) .fp-n{display:block}
.fp.pin:not(.abre) .fp-mas{display:none}
.fp.pin:not(.abre) .fp-ic{width:30px;height:30px}
.fp.pin:not(.abre) .fp-ic .ic{width:16px;height:16px}
.fp.salida .fp-ic{border-color:rgba(var(--acc-rgb),.5)}
/* bloque final: las tres salidas, abiertas */
.fp.fijo .fp-c{width:min(300px,calc(100vw - 56px));border-color:rgba(var(--acc-rgb),.4)}
.fp.fijo .fp-cab{padding:16px 16px 4px;align-items:flex-start}
.fp.fijo .fp-ic{width:40px;height:40px}
.fp.fijo .fp-t{font-size:20px;line-height:1.15;letter-spacing:-.02em}
.fp.fijo .fp-int{padding:6px 16px 16px}
.fp.fijo .fp-d{font-size:14.5px}
.fp.fijo .fp-acc{flex-direction:column}
.fp.fijo .fp-acc>*{width:100%}
/* flechas de borde: hacia el panel mas cercano que quedo fuera de la vista */
.borde{position:fixed;z-index:15;top:50%;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.borde.izq{left:8px}.borde.der{right:8px}
.borde .ic{width:16px;height:16px;color:var(--phosphor)}
.borde[hidden]{display:none}
/* el encabezado del bloque final */
#ecosistema{top:calc(64px + var(--safe-t));bottom:auto;max-height:none;overflow:visible;width:min(560px,calc(100vw - 2 * var(--gutter)));padding:18px 22px 20px;justify-items:center;text-align:center;gap:8px;z-index:17}
#ecosistema h2{font-size:clamp(26px,3vw,36px)}
#ecosistema .eco-d{max-width:34em;font-size:15px}
#ecosistema .eco-cta{justify-content:center;margin-top:6px}
#ecosistema .eco-cta>*{min-height:44px}
/* hoja "Que hacemos": lista de servicios */
.svc-items{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.svc-item{display:grid;align-content:start;gap:4px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.svc-item b{font-size:15px;font-weight:600;letter-spacing:-.005em}
.svc-item span{font-size:13.5px;line-height:1.45;color:var(--muted)}
#svcLista{display:grid;gap:32px}
.svc .fundador.dos{grid-template-columns:1fr 1fr}
.co-chips{margin:0}
@media (max-width:720px){.svc-items{grid-template-columns:1fr}.svc .fundador.dos{grid-template-columns:1fr}}
@media (max-width:640px){
  .fp-c{width:min(292px,calc(100vw - 48px))}
  .fp.fijo .fp-c{width:min(292px,calc(100vw - 48px))}
  #ecosistema{padding:14px 16px 16px;top:calc(58px + var(--safe-t))}
  #ecosistema .eco-d{font-size:14px}
  #ecosistema h2{font-size:24px}
  .borde{top:52%}
}
@media (prefers-reduced-motion:reduce){.fp-ancla,.fp-c{animation:none!important}}


@media (max-width:640px){body.panel-abierto #capitulo{opacity:0;visibility:hidden;pointer-events:none}}

/* ---------------------------------------------------------------- cocina 021 (Madarco): esfera propia; el tour se aparta */
body.cocina #capitulo,body.cocina #sello,body.cocina #pintaUI,body.cocina #dock,body.cocina #comparador,body.cocina #ecosistema{display:none}
#cocinaUI{position:fixed;z-index:16;left:50%;bottom:calc(20px + var(--safe-b,0px));transform:translateX(-50%);display:none}
body.cocina #cocinaUI{display:block}
#cocinaUI .btn-contorno{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;background:var(--glass-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#cocinaUI .ic{width:18px;height:18px}

/* ---------------------------------------------------------------- v5 · landing en 360 (Ruben 02-10): solo la imagen final, paneles expuestos, carrusel */
/* el revelado (selector de modos, pincel, comparador y sus demos) vive detras de la bandera REVELADO de app.js: sin ella no se ve */
body:not(.con-revelado) .solo-revelado{display:none!important}
/* barra minima: anterior · siguiente · puntos · "que quieres hacer?" */
.fila-prog{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
#bQue{width:30px;min-height:30px;height:30px;padding:0;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line-ctrl);color:var(--ink)}
#bQue .ic{width:16px;height:16px}
#bQue:hover{border-color:var(--phosphor)}
body.final #bQue{display:none}
@media (max-width:640px){
  .barra{flex-wrap:nowrap}
  .btn-siguiente{order:0;flex:1 1 auto;max-width:none}
}
/* paneles expuestos: grandes, abiertos desde el primer cuadro, mas contraste y jerarquia */
.fp.fijo.grande .fp-c{width:min(344px,calc(100vw - 48px));background:var(--panel);border-color:rgba(var(--acc-rgb),.5);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4)}
.fp.fijo.grande .fp-cab{padding:18px 18px 2px;gap:14px}
.fp.fijo.grande .fp-ic{width:44px;height:44px;background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.55);color:var(--phosphor)}
.fp.fijo.grande .fp-ic .ic{width:22px;height:22px}
.fp.fijo.grande .fp-k{color:var(--phosphor);font-size:11.5px}
.fp.fijo.grande .fp-t{font-size:22px;line-height:1.14;letter-spacing:-.025em;color:var(--ink)}
.fp.fijo.grande .fp-int{padding:8px 18px 18px;gap:12px}
.fp.fijo.grande .fp-d{font-size:15px;line-height:1.45;color:rgba(var(--ink-rgb),.88)}
.fp.fijo.grande .fp-li{font-size:14px;color:rgba(var(--ink-rgb),.94)}
.fp.fijo.grande .fp-acc{flex-direction:column;gap:8px;margin-top:4px}
.fp.fijo.grande .fp-acc>*{width:100%;min-height:46px;font-size:15px;font-weight:600}
.fp.fijo.grande .fp-acc .btn-contorno{border-color:var(--ink)}
@media (min-width:641px){#dock{width:min(440px,calc(100vw - 2 * var(--gutter)))}.btn-siguiente{max-width:none}}
/* telefono: el panel grande ocupa casi todo el ancho; la flecha de borde pasa a ser un chevron encima, sin rotulo (el nombre va en su aria-label) */
@media (max-width:640px){
  .borde{z-index:17;width:38px;min-height:56px;padding:0;justify-content:center;top:40%;background:var(--glass-strong);border-color:var(--phosphor)}
  .borde span{display:none}
  .borde.izq{left:3px}.borde.der{right:3px}
}
/* la pista de arrastre baja al pie (no tapa los paneles abiertos de arriba); en telefono no se muestra, como la del hero */
@media (min-width:641px){#pista{top:auto;bottom:calc(var(--dock-h,96px) + 30px + var(--safe-b));transform:translate(-50%,8px)}#pista.on{transform:translate(-50%,0)}}
@media (max-width:640px){#pista{display:none}}

/* ---------------------------------------------------------------- pagina "Servicios y planes" (#dServicios a pantalla completa) */
dialog.hoja.pagina{width:100vw;max-width:100vw;height:100vh;height:100dvh;height:100svh;max-height:100dvh;margin:0;inset:0;border:0;border-radius:0;background:var(--paper)}
dialog.hoja.pagina::backdrop{background:var(--paper)}
dialog.hoja.pagina .hoja-cab{align-items:center;padding:calc(18px + var(--safe-t)) var(--gutter) 16px;border-bottom:1px solid var(--line)}
dialog.hoja.pagina .hoja-cab h2{font-size:clamp(26px,3.4vw,44px);max-width:20em;line-height:1.06;letter-spacing:-.025em}
dialog.hoja.pagina .regla{display:none}
dialog.hoja.pagina .hoja-cuerpo{padding:36px var(--gutter) calc(72px + var(--safe-b));gap:0;align-content:start}
.pagina-col{width:100%;max-width:1060px;margin:0 auto;display:grid;gap:56px}
.pagina .sv-regla{margin-top:10px;font-size:16px;line-height:1.4;color:var(--muted)}
.sv-nav{display:flex;flex-wrap:wrap;gap:8px}
.sv-chip{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 14px;border:1px solid var(--line-ctrl);border-radius:999px;font-size:14px;font-weight:600;background:var(--surface);transition:border-color var(--t-fast)}
.sv-chip span{font-size:11px;color:var(--phosphor)}
.sv-chip:hover{border-color:var(--ink)}
#svcLista{display:grid;gap:56px}
.sv-paq-lista{list-style:none;display:grid;gap:16px}
.sv-paq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:clamp(20px,4vw,48px);padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);scroll-margin-top:12px}
.sv-izq{display:grid;align-content:start;gap:10px}
.sv-num{font-size:13px;letter-spacing:.06em;color:var(--phosphor)}
.sv-izq h3{font-size:clamp(24px,2.6vw,32px);line-height:1.08;letter-spacing:-.02em;font-weight:600}
.sv-nivel{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sv-para{font-size:15px;line-height:1.5;color:var(--muted)}
.sv-para b{display:block;margin-bottom:4px}
.sv-cta{margin-top:10px;justify-self:start}
.sv-der{display:grid;align-content:start;gap:14px}
.sv-incluye-ant{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.sv-que,.sv-lim ul{list-style:none;display:grid;gap:8px}
.sv-que li{position:relative;padding-left:20px;font-size:15px;line-height:1.45}
.sv-que li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--phosphor)}
.sv-mensual{font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--muted);padding-left:12px;border-left:2px solid var(--phosphor)}
.sv-lim{padding:14px 16px;border:1px solid var(--line-ctrl);border-radius:var(--r-md);background:var(--paper);display:grid;gap:8px}
.sv-lim li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.45;color:var(--ink)}
.sv-lim li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1.5px;background:var(--ink)}
.sv-nota{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted);max-width:52em}
.sv-nota:empty{display:none}
.sv-tabla{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.sv-tabla th,.sv-tabla td{padding:16px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line);font-size:15px;line-height:1.5}
.sv-tabla tr:first-child th,.sv-tabla tr:first-child td{border-top:0}
.sv-tabla th{width:28%;font-weight:600;color:var(--ink)}
.sv-tabla td{color:var(--muted)}
#sv-limites{padding:clamp(18px,3vw,28px);border:1px solid var(--line-ctrl);border-radius:var(--r-lg);background:var(--surface)}
.sv-limites-lista{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.sv-limites-lista li{position:relative;padding-left:18px;font-size:15px;line-height:1.45}
.sv-limites-lista li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1.5px;background:var(--ink)}
.sv-limites-lista li:first-child{font-weight:600}
#dServicios .hoja-pie [data-idioma]{display:none}
#svIdioma{font-family:var(--mono);font-size:12px;letter-spacing:.06em;min-width:44px;justify-content:center}
@media (max-width:760px){
  .sv-paq{grid-template-columns:1fr;padding:18px}
  .sv-limites-lista{grid-template-columns:1fr}
  .sv-tabla th,.sv-tabla td{display:block;width:auto;padding:12px 16px}
  .sv-tabla td{border-top:0;padding-top:0}
  .pagina-col,#svcLista{gap:40px}
  .sv-cta{justify-self:stretch}
}
@media (max-width:640px){
  dialog.hoja.pagina .hoja-cab{flex-wrap:wrap;gap:10px;padding:calc(12px + var(--safe-t)) 16px 12px}
  dialog.hoja.pagina .hoja-cab>div{order:2;flex:1 1 100%}
  dialog.hoja.pagina #svVolver{order:0;margin-right:auto}
  dialog.hoja.pagina .btn-icono.cerrar,dialog.hoja.pagina #svIdioma{order:1}
  dialog.hoja.pagina .hoja-cuerpo{padding:22px 16px calc(56px + var(--safe-b))}
}

/* Correccion v8: una navegacion legible y contenido que no compite con el recorrido. */
#cabecera{display:none}
.v7-nav{top:14px;left:var(--gutter);right:var(--gutter);translate:none;justify-content:center;background:var(--panel);border-color:rgba(244,245,242,.42);box-shadow:0 8px 28px rgba(0,0,0,.3)}
.v7-nav button,.v7-nav .v7-brand{color:var(--ink);min-height:44px;text-decoration:none;display:inline-flex;align-items:center;font:12px var(--mono);letter-spacing:.04em}
.v7-nav .v7-brand{position:absolute;left:14px;font-weight:700}.v7-nav #bIdioma{position:absolute;right:8px;color:var(--ink)}
/* centrado sin transform: la animacion "entra" termina en transform:none y antes mandaba el heroe fuera de pantalla */
#heroe{position:fixed;inset:0;z-index:15;margin:0;width:100%;height:100dvh;max-height:none;overflow:hidden;padding:0;border:0;border-radius:0;background:#182019;color:#fff}
#heroe h1{margin:10px 0 0;color:#fff;font-size:clamp(28px,4vw,52px);max-width:11.5em}
#heroe .botones{margin-top:18px;align-items:center}.hero-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.hero-compare{--proposal:50%;position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;border:0;border-radius:0;background:#182019;box-shadow:none}.hero-compare::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(5,8,6,.46),transparent 65%),linear-gradient(0deg,rgba(5,8,6,.62),transparent 52%);pointer-events:none}.hero-compare img{opacity:0;transition:opacity .45s ease}.hero-compare.is-ready img{opacity:1}.hero-propuesta{clip-path:inset(0 0 0 var(--proposal))}.hero-compare::after{z-index:4;left:var(--proposal);width:2px;background:#A9B857;box-shadow:0 0 0 1px rgba(8,10,9,.5)}.hero-compare input{z-index:6}.hero-handle{position:absolute;z-index:5;left:var(--proposal);top:50%;width:42px;height:42px;transform:translate(-50%,-50%);border:2px solid #A9B857;border-radius:50%;background:rgba(8,12,9,.7);box-shadow:0 3px 16px rgba(0,0,0,.35);pointer-events:none}.hero-handle::before,.hero-handle::after{content:"";position:absolute;top:14px;width:9px;height:9px;border-top:2px solid #A9B857;border-left:2px solid #A9B857}.hero-handle::before{left:11px;transform:rotate(-45deg)}.hero-handle::after{right:11px;transform:rotate(135deg)}.hero-today,.hero-proposal{z-index:5;bottom:clamp(20px,4vw,50px);padding:0;background:none;color:#fff;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 5px #000}.hero-today{left:clamp(20px,4vw,50px)}.hero-proposal{right:clamp(20px,4vw,50px)}.hero-copy{position:absolute;z-index:7;left:clamp(20px,5vw,76px);bottom:clamp(54px,10vh,120px);width:min(560px,calc(100vw - 40px))}.hero-honesty{margin:0;color:#dbe1d4;font:11px var(--mono);letter-spacing:.055em;text-transform:uppercase}.hero-tour{color:#fff;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#A9B857;white-space:nowrap}.hero-tour:focus-visible{outline:2px solid #A9B857;outline-offset:5px}.hero-brand{margin:14px 0 0;color:#dbe1d4;font:10px/1.35 var(--mono);letter-spacing:.04em}@media (prefers-reduced-motion:no-preference){.hero-compare:not(.interacted) .hero-handle{animation:heroNudge 1.1s var(--ease) .9s 1 both}@keyframes heroNudge{0%,100%{translate:0}35%{translate:12px}70%{translate:-8px}}}
#casa{top:72px;left:var(--gutter)}#casa .nom{display:none}#casa .fijo{color:#fff;background:rgba(8,10,9,.92);border-color:rgba(244,245,242,.35)}
.flowvantic-wordmark{min-height:0;place-content:center;text-align:center;background:#123b37;color:#f2f6ed}.flowvantic-wordmark b{font-size:clamp(28px,4vw,48px);letter-spacing:-.05em}.flowvantic-wordmark span{color:#d7e8df}.allies-back{justify-self:start}
/* Los paneles se mantienen alineados en la banda media; uno se abre al tocar. */
.fp.fijo.grande .fp-c{width:min(280px,calc(100vw - 40px));background:var(--panel)}
.fp.fijo.grande .fp-cab{padding:12px}.fp.fijo.grande .fp-t{font-size:17px;color:var(--ink)}.fp.fijo.grande .fp-d{font-size:13px;line-height:1.35}.fp.fijo.grande .fp-li{font-size:12px}.fp.fijo.grande .fp-acc>*{min-height:42px}
/* Tour: capitulo a la izquierda y paneles cerrados en una banda a su derecha. */
@media (min-width:641px){#capitulo{bottom:auto;top:50%;transform:translateY(-50%);width:min(310px,25vw)}.fp{top:50%!important;margin-left:max(340px,28vw)}body.tour .fp{top:0!important;margin-left:0}.fp.fijo.grande .fp-c{transform:translateX(-50%) translateY(-10px)}.fp:not(.abre) .fp-cuerpo{display:none}.fp:not(.abre) .fp-c{min-width:220px}}
@media (max-width:640px){.v7-nav{top:auto;bottom:0;left:0;right:0;width:100%;border-radius:0;justify-content:space-around;padding:4px 2px;z-index:40}.v7-nav .v7-brand{display:none}.v7-nav #bIdioma{position:static;order:5}.v7-nav button{font-size:10px;padding:0 5px}#dock{bottom:calc(64px + var(--safe-b));z-index:30}#capitulo{bottom:calc(var(--dock-h,96px) + 72px + var(--safe-b))}#casa{left:16px;right:16px}#casa .fijo{max-width:100%;white-space:normal;text-align:center;justify-content:center}#heroe{inset:0;width:100%;height:100dvh;padding:0}.hero-copy{left:20px;bottom:84px;width:calc(100vw - 40px)}#heroe h1{font-size:clamp(28px,9vw,38px)}.hero-compare{max-height:none}.hero-compare img{object-position:center 64%}.hero-handle{width:38px;height:38px}.hero-handle::before,.hero-handle::after{top:12px}.hero-today,.hero-proposal{top:72px;bottom:auto}.hero-today{left:20px}.hero-proposal{right:20px}.hero-links{display:grid;justify-items:start;gap:10px;margin-top:12px}.hero-brand{max-width:31ch}.fp.fijo.grande .fp-c{width:min(280px,calc(100vw - 44px))}}
/* v8 (INTEGRACION-FLOWXR): la tarjeta de paquete en la grilla nueva es UNA columna. La regla vieja de v4
   (.sv-paq a dos columnas .85fr/1.35fr con gap 48px) dejaba el texto en columnas de 54 y 85 px a 1440 y lo montaba. */
.sv-paq-lista{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))!important;gap:16px}
.sv-paq-lista .sv-paq{grid-template-columns:minmax(0,1fr)!important;gap:14px;padding:16px;align-content:start}
.sv-paq-lista .sv-izq,.sv-paq-lista .sv-der{grid-template-columns:minmax(0,1fr)!important;min-width:0}

/* Hero mobile: keep the sample CTA compact and clear of the fixed navigation. */
.hero-whatsapp{display:inline}
@media (max-width:640px){.hero-copy{bottom:calc(76px + var(--safe-b))}.hero-whatsapp{display:none}.btn-primario{min-height:44px;padding:10px 14px;font-size:14px;white-space:nowrap}}
@media (min-width:480px){.hero-whatsapp::before{content:'·';margin:0 6px}}
.sv-paq-lista .sv-paq h3,.sv-paq-lista .sv-paq h4{font-size:clamp(20px,1.6vw,24px);line-height:1.15;overflow-wrap:anywhere}
.sv-paq-lista .sv-lim{position:static!important}
/* El barrido del comparador es el gesto de bienvenida; el script lo cancela al tocarlo. */
@media (prefers-reduced-motion:no-preference){.hero-compare{transition:--proposal .8s var(--ease)}}
/* v8b (INTEGRACION-FLOWXR): menos texto a la vista. El capítulo del tour queda en rótulo + título + botón
   (la descripción larga no se muestra); la pista de arrastre se va cuando ya hay paneles; viñeta de paquete en 2 líneas. */
#capD{display:none}
body.listo:not(.fase-heroe) #pista{opacity:0;transition:opacity .6s 4s}
.sv-paq-lista .sv-que li{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sv-mas[open] .sv-que li{display:list-item;-webkit-line-clamp:unset;overflow:visible}
/* Revisión forastero: los datos del comparador quedan junto al divisor y el CTA explica el siguiente paso. */
.hero-brand{display:none}.hero-honesty{display:inline-block;padding:5px 7px;border-radius:4px;background:rgba(0,0,0,.74);color:#fff}.hero-today,.hero-proposal{top:clamp(72px,12vh,140px);bottom:auto}.hero-today{left:auto;right:calc(100% - var(--proposal) + 14px)}.hero-proposal{left:calc(var(--proposal) + 14px);right:auto}.hero-action-note,.hero-example{position:absolute;z-index:7;left:clamp(20px,5vw,76px);width:min(560px,calc(100vw - 40px));margin:0;color:#fff;font:11px/1.4 var(--mono);text-shadow:0 1px 3px #000}.hero-action-note{bottom:clamp(43px,7vh,84px)}.hero-example{bottom:clamp(20px,3vh,40px);color:#e7eadf}@media(max-width:640px){.hero-today{left:20px;right:auto}.hero-proposal{right:20px;left:auto}.hero-action-note{bottom:58px}.hero-example{bottom:34px}.hero-links{display:grid;justify-items:start;gap:10px;margin-top:12px}}
/* 5 paquetes: 3 + 2 centrados (no 4 + 1 suelto) */
@media (min-width:761px){.sv-paq-lista{display:flex!important;flex-wrap:wrap;justify-content:center}.sv-paq-lista .sv-paq{flex:0 1 300px}}

/* 03-10: la etiqueta de honestidad cabe entera en telefono (2 lineas) */
@media(max-width:640px){#sello{white-space:normal;text-align:center;line-height:1.35}}

/* 03-10: el cierre del héroe es un bloque único, siempre por encima de la navegación móvil. */
.hero-copy .hero-action-note,.hero-copy .hero-example{position:static;width:auto;margin:0;text-shadow:0 1px 3px #000}
.hero-copy .hero-action-note{margin-top:12px}.hero-copy .hero-example{margin-top:6px}
@media(max-width:640px){.hero-copy{left:20px;bottom:calc(76px + var(--safe-b));width:calc(100vw - 40px);display:grid;align-content:end;gap:0}#heroe h1{font-size:clamp(27px,8.2vw,34px);line-height:1.02}#heroe .botones{display:grid;justify-items:start;gap:12px;margin-top:14px;width:100%}.hero-links{display:grid;justify-items:start;gap:8px;margin:0;width:100%}.hero-tour{max-width:100%;white-space:normal}.hero-copy .hero-action-note{margin-top:0;font-size:11px;line-height:1.35}.hero-copy .hero-example{margin-top:5px;font-size:10px;line-height:1.3}}

/* 03-10 master-39: notas del heroe en flujo normal (no absolutas) para no encimarse con los enlaces */
.hero-copy .hero-action-note,.hero-copy .hero-example{position:static;width:auto;max-width:560px;margin:10px 0 0;bottom:auto}

/* v9 vision: ramas e incluye bajo el H1 */
.hero-copy .hero-ramas{margin:10px 0 0;color:#fff;font:600 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 4px #000}
.hero-copy .hero-incluye{margin:6px 0 0;color:#e7eadf;font:11px/1.4 var(--mono);letter-spacing:.03em;max-width:560px;text-shadow:0 1px 3px #000}
@media(max-width:640px){.hero-copy .hero-ramas{margin-top:8px;font-size:11px}.hero-copy .hero-incluye{margin-top:4px;font-size:10px;line-height:1.3}}

/* ===== v9c · paneles: el abierto va SIEMPRE arriba, entero en pantalla, con su imagen ===== */
.fp.abre{z-index:5}
body.panel-abierto #paneles{z-index:35}
.fp.abre .fp-c{overflow-y:auto;overscroll-behavior:contain}
.fp-img{position:relative;display:block;width:100%;aspect-ratio:21/9;max-height:34vh;padding:0;border-radius:12px;overflow:hidden;border:1px solid rgba(var(--ink-rgb),.16);background:#0d100e;cursor:zoom-in}
.fp-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.fp-img:hover img,.fp-img:focus-visible img{transform:scale(1.04)}
.fp-img:focus-visible{outline:2px solid var(--phosphor);outline-offset:2px}
.fp-rot{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:3px 8px;border-radius:6px;background:rgba(8,10,9,.72);color:#fff;font:600 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
#visorImg{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:16px;background:var(--panel);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#visorImg[hidden]{display:none}
#visorImg figure{position:relative;margin:0;width:min(80vw,820px);max-height:70vh;display:grid;gap:8px;padding:10px;border-radius:16px;background:var(--panel);border:1px solid rgba(var(--acc-rgb),.5);box-shadow:0 24px 70px rgba(0,0,0,.6)}
#visorImg img{width:100%;max-height:calc(70vh - 76px);object-fit:contain;border-radius:10px;background:#0d100e}
#visorImg figcaption{padding:0 6px 4px;font:11px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink)}
.visor-x{position:absolute;right:-10px;top:-10px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#101410;border:1px solid var(--phosphor);color:#fff;cursor:pointer}
@media(max-width:640px){#visorImg figure{width:min(86vw,520px)}.visor-x{right:-6px;top:-14px}}

/* ===== v9c · Services and plans: tarjetas con imagen, detalle desplegado ahi mismo ===== */
.svc .pagina-col{gap:44px;max-width:1120px}
.svc-grupo{display:grid;gap:16px}
.svc-gt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--phosphor);font-weight:500;display:flex;align-items:center;gap:12px}
.svc-gt::after{content:"";flex:1;height:1px;background:var(--line)}
.svc-grupo.destacado .svc-gt{font-size:13px}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.svc-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:border-color var(--t-mid) var(--ease)}
.svc-card:hover{border-color:var(--line-ctrl)}
.svc-card.abre{grid-column:1/-1;border-color:rgba(var(--acc-rgb),.55)}
.svc-cab{position:relative;display:grid;width:100%;text-align:left;color:var(--ink);cursor:pointer}
.svc-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0d100e}
.svc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.svc-cab:hover .svc-img img{transform:scale(1.035)}
.svc-tx{display:grid;gap:4px;padding:14px 52px 16px 16px}
.svc-n{font-size:18px;line-height:1.15;font-weight:600;letter-spacing:-.015em}
.svc-l{font-size:14px;line-height:1.4;color:var(--muted)}
.svc-precio{justify-self:start;margin-top:6px;padding:4px 10px;border-radius:999px;border:1px solid rgba(var(--acc-rgb),.55);color:var(--phosphor);font-size:11.5px;letter-spacing:.03em}
.svc-mas{position:absolute;right:12px;bottom:14px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-ctrl);color:var(--ink);transition:transform var(--t-mid) var(--ease),background var(--t-fast)}
.svc-cab:hover .svc-mas{background:var(--phosphor);color:var(--on-phosphor);border-color:var(--phosphor)}
.svc-card.abre .svc-mas{transform:rotate(45deg)}
.svc-grupo.destacado .svc-card.grande{grid-column:1/-1}
.svc-grupo.destacado .svc-card.grande .svc-cab{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
.svc-grupo.destacado .svc-card.grande .svc-img{aspect-ratio:auto;min-height:260px}
.svc-grupo.destacado .svc-card.grande .svc-tx{align-content:center;padding:28px 64px 28px 28px;gap:10px}
.svc-grupo.destacado .svc-card.grande .svc-n{font-size:clamp(26px,3vw,38px);letter-spacing:-.025em}
.svc-grupo.destacado .svc-card.grande .svc-l{font-size:17px}
.svc-card.abre:not(.grande) .svc-cab{grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:center}
.svc-card.abre:not(.grande) .svc-img{aspect-ratio:16/9}
.svc-det{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;padding:20px 20px 22px;border-top:1px solid var(--line)}
.svc-det[hidden]{display:none}
.svc-det>*{min-width:0}
.svc-det>.svc-antes-despues,.svc-det>.svc-items,.svc-det>.svc-acc,.svc-det>.sv-nota,.svc-det>.svc-rotulo{grid-column:1/-1}
.svc-para{font-size:15px;line-height:1.5;color:var(--muted)}
.svc-para b,.svc-que b{display:block;margin-bottom:6px}
.svc-nivel{grid-column:1/-1;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--phosphor)}
.svc-antes-despues{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svc-antes-despues figure{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9}
.svc-antes-despues img{display:block;width:100%;height:100%;object-fit:cover}
.svc-antes-despues figcaption{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:6px;background:var(--panel);color:var(--ink);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.svc-rotulo{font:11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.svc-acc{display:flex;flex-wrap:wrap;gap:10px}
.svc-acc>*{flex:0 1 auto}
.svc-no{border:1px solid var(--line);border-radius:var(--r-lg);padding:0 20px;background:var(--surface)}
.svc-no summary{min-height:56px;display:flex;align-items:center;cursor:pointer;font-size:16px;font-weight:600;list-style:none}
.svc-no summary::-webkit-details-marker{display:none}
.svc-no summary::after{content:"+";margin-left:auto;font:400 22px var(--mono);color:var(--phosphor)}
.svc-no[open] summary::after{content:"–"}
.svc-no[open]{padding-bottom:20px;display:grid;gap:16px}
.svc-no .sv-tabla{margin-top:4px}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-det{grid-template-columns:1fr}.svc-grupo.destacado .svc-card.grande .svc-cab{grid-template-columns:1fr}.svc-grupo.destacado .svc-card.grande .svc-img{aspect-ratio:16/9;min-height:0}.svc-grupo.destacado .svc-card.grande .svc-tx{padding:16px 56px 18px 16px}.svc-card.abre:not(.grande) .svc-cab{grid-template-columns:1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}.svc-antes-despues{gap:6px}.svc .pagina-col{gap:34px}.svc-acc>*{flex:1 1 100%}.svc-limites-lista,.sv-limites-lista{grid-template-columns:1fr}}
body.panel-abierto #capitulo{opacity:0;visibility:hidden;pointer-events:none}

/* ===== v9c · telefono: chips de acceso a los paneles, sobre la tarjeta del capitulo ===== */
#chipsPan{display:none}
.fp.movil-cerrado,.fp.movil-cerrado .fp-c{visibility:hidden;pointer-events:none}
@media(max-width:640px){
  #chipsPan.on{position:fixed;z-index:33;left:0;right:0;display:flex;gap:8px;padding:2px 12px 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
  #chipsPan.on::-webkit-scrollbar{display:none}
  .chip-pan{flex:1 1 0;min-width:96px;scroll-snap-align:start;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:4px 12px;border-radius:16px;text-align:left;line-height:1.12;background:var(--panel);border:1px solid rgba(var(--acc-rgb),.6);color:var(--ink);font-size:13.5px;font-weight:600;white-space:normal;box-shadow:0 6px 18px rgba(0,0,0,.4)}
  @media(max-width:440px){.chip-pan .ic{display:none}.chip-pan{justify-content:center;text-align:center}}
  .chip-pan .ic{color:var(--phosphor);width:18px;height:18px}
  .chip-pan:active{background:var(--phosphor);color:var(--on-phosphor)}
  .chip-pan:active .ic{color:var(--on-phosphor)}
}

@media(min-width:641px){
  #chipsPan.on{position:fixed;z-index:33;left:0;right:0;display:flex;justify-content:center;gap:10px;padding:2px 16px}
  .chip-pan{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;background:var(--panel);border:1px solid rgba(var(--acc-rgb),.6);color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.4)}
  .chip-pan .ic{color:var(--phosphor)}
  .chip-pan:hover{background:var(--phosphor);color:var(--on-phosphor)}.chip-pan:hover .ic{color:var(--on-phosphor)}
}

/* ===== v10 · portada = la compania + cuatro perfiles ===== */
.hero-compare::before{background:linear-gradient(90deg,rgba(5,8,6,.62),rgba(5,8,6,.2) 70%),linear-gradient(0deg,rgba(5,8,6,.78),rgba(5,8,6,.25) 62%)}
#heroe .hero-copy{width:min(680px,calc(100vw - 40px));bottom:clamp(64px,9vh,110px)}
.hero-rot{margin:12px 0 10px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#d3e48b}
#heroe h1{font-size:clamp(28px,4.4vw,56px);line-height:1.04;letter-spacing:-.03em}
.hero-linea{margin:12px 0 18px;font-size:clamp(15px,1.5vw,18px);line-height:1.4;color:#eef2ea}
.perfiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.perfil-btn{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 14px 8px 8px;border-radius:14px;background:rgba(8,12,9,.8);border:1px solid rgba(169,184,87,.6);color:#fff;font-size:15px;font-weight:600;line-height:1.15;text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.perfil-btn img{flex:none;width:48px;height:48px;border-radius:10px;object-fit:cover}
.perfil-btn:hover,.perfil-btn:focus-visible{background:#A9B857;color:#0B0C0B}
.perfil-btn:active{transform:scale(.98)}
.hero-sec{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 22px}
.hero-sec .hero-tour{min-height:36px;display:inline-flex;align-items:center;font-size:13.5px;font-weight:500;opacity:.92}
button.hero-tour{cursor:pointer;background:none;border:0;padding:0}
@media(min-width:1000px){#heroe .hero-copy{width:min(1040px,calc(100vw - 80px))}.perfiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){.perfil-btn{font-size:13px;gap:8px;padding:6px 10px 6px 6px;min-height:60px}.perfil-btn img{width:38px;height:38px}#heroe h1{font-size:clamp(25px,7.6vw,32px)}.hero-rot{font-size:10.5px;margin-top:8px}.hero-linea{margin:8px 0 12px;font-size:14px}.hero-sec{margin-top:8px}.hero-example{display:none}}
#bPerfil{font:10.5px var(--mono);letter-spacing:.04em;color:var(--phosphor,var(--phosphor));white-space:nowrap;min-height:44px;padding:0 8px}
#bPerfil[hidden]{display:none}
/* pantalla de perfil */
.per-pasos{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font:11.5px var(--mono);letter-spacing:.04em;color:var(--muted)}
.per-pasos li.on{color:var(--phosphor)}.per-pasos b{font-weight:500;margin-right:2px}
.per-acc{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.per-acc .btn-primario{min-width:min(100%,260px)}
.per-nota{font:12px/1.45 var(--mono);color:var(--muted);letter-spacing:.03em}
.svc-start{position:absolute;left:8px;top:8px;padding:4px 10px;border-radius:999px;background:var(--phosphor);color:var(--on-phosphor);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
/* planos y permisos: plegado, al final */
.svc-plegado{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:0 20px}
.svc-plegado>summary{display:grid;gap:4px;padding:16px 36px 16px 0;cursor:pointer;list-style:none;position:relative}
.svc-plegado>summary::-webkit-details-marker{display:none}
.svc-plegado>summary b{font-size:16px}.svc-plegado>summary span{font-size:14px;color:var(--muted);line-height:1.4}
.svc-plegado>summary::after{content:"+";position:absolute;right:0;top:14px;font:400 22px var(--mono);color:var(--phosphor)}
.svc-plegado[open]>summary::after{content:"–"}
.svc-plegado[open]{padding-bottom:20px}
.svc-plegado .svc-grid{margin-top:4px}
@media(max-width:560px){#bPerfil{font-size:9.5px;padding:0 4px}}
body.fase-heroe #sello{display:none}
@media(max-width:640px){.hero-handle{top:30%}}

/* v10: mientras el logo de carga se desvanece ya no intercepta toques (los botones de perfil quedan tocables ~1 s antes) */
#carga:not(.on){pointer-events:none}

/* ===================================================================== v11 · firma solida ===== */
:root{--muted:#B7BBB5;--faint:#9EA39C}
/* tipografia: la mono SOLO para datos (precio y rotulos de honestidad); el resto, sans */
.rot,.svc-gt,.per-pasos,.per-nota,.svc-nivel,.svc-glinea,.svc-credito,.pie-h,.sv-mensual,.sv-nota,.svc-rotulo{font-family:var(--body);letter-spacing:.01em;text-transform:none}
.rot{font-size:13px;font-weight:500;color:var(--muted)}
.svc-gt{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
/* marca: wordmark en sans 700 */
.v7-nav .v7-brand{font:700 21px var(--body)!important;letter-spacing:-.03em!important;text-transform:none}
.v7-nav button{font:500 14px var(--body)!important;letter-spacing:0!important}
.v7-nav #bIdioma{font:600 13px var(--mono)!important}
#bPerfil{font:500 12px var(--body)!important}
.wm-top{display:none}
@media(max-width:640px){
  .wm-top{display:block;position:fixed;z-index:41;left:16px;top:calc(12px + var(--safe-t));font:700 20px var(--body);letter-spacing:-.03em;color:#fff;text-decoration:none;text-shadow:0 1px 8px rgba(0,0,0,.6)}
  .v7-nav button{font-size:12px!important;padding:0 4px!important}
  #casa{top:calc(44px + var(--safe-t))}
}
/* honestidad: corta y discreta */
.hero-honesty{position:absolute;z-index:8;left:clamp(16px,4vw,50px);top:86px;margin:0;padding:4px 9px;border-radius:4px;background:rgba(0,0,0,.6);color:#e9eee3;font:10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.sello{font-size:10.5px;padding:4px 9px}
#sello{max-width:min(420px,calc(100vw - 32px))}
/* portada */
.hero-rango{margin:10px 0 0;font-size:clamp(15px,1.5vw,18px);line-height:1.4;color:#f0f3ec;max-width:46em}
.hero-linea{margin:8px 0 16px;font-size:14px;color:#d8dfd2}
#heroe{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:640px){
  #heroe{background:#0B0C0B}
  .hero-compare{inset:0 0 auto 0;height:36dvh;width:100%}
  .hero-compare::before{background:linear-gradient(0deg,#0B0C0B,rgba(11,12,11,0) 40%),linear-gradient(0deg,rgba(5,8,6,.2),rgba(5,8,6,.2))}
  .hero-honesty{top:auto;bottom:10px;left:12px;font-size:10px}
  .hero-today,.hero-proposal{top:calc(44px + var(--safe-t))!important;bottom:auto!important}
  #heroe .hero-copy{left:16px;right:16px;width:auto;top:auto;bottom:calc(64px + var(--safe-b));background:none}
  #heroe h1{font-size:clamp(26px,8vw,31px);line-height:1.05}
  .hero-rango{font-size:13.5px;margin-top:8px}
  .hero-linea{margin:6px 0 10px;font-size:13px}
  .hero-sec{margin-top:6px}
  .hero-sec .hero-tour{font-size:13px;min-height:32px}
}
.hero-pie{position:absolute;top:100dvh;left:0;right:0}
/* hoja: barra superior comun */
.hoja-nav{flex:none;display:flex;align-items:center;gap:16px;padding:calc(10px + var(--safe-t)) var(--gutter) 8px;border-bottom:1px solid var(--line)}
.hn-wm{font:700 21px var(--body);letter-spacing:-.03em;color:var(--ink);text-decoration:none;margin-right:6px}
.hn-links{display:flex;gap:2px;flex:1}
.hn-l{min-height:44px;padding:0 12px;font:500 14px var(--body);color:var(--muted);border-radius:var(--r-md)}
.hn-l:hover{color:var(--ink);background:rgba(var(--ink-rgb),.06)}
.hn-acc{display:flex;align-items:center;gap:8px;margin-left:auto}
.hn-acc .btn-icono{width:44px;height:44px}
dialog.hoja.pagina .hoja-cab{padding:18px var(--gutter) 14px}
dialog.hoja.pagina .hoja-cab>div{flex:1;min-width:0}
@media(max-width:640px){
  .hn-links{display:none}
  .hoja-nav{padding:calc(6px + var(--safe-t)) 12px 6px;gap:8px}
  .hn-wm{font-size:19px}
  .hn-acc .btn-contorno{min-height:36px;padding:0 10px;font-size:13px}
  .hn-acc .btn-texto{min-height:36px;min-width:36px}
  dialog.hoja.pagina .hoja-cab{padding:8px 16px 10px}
  dialog.hoja.pagina .hoja-cab h2{font-size:clamp(20px,6vw,24px)}
}
/* pie */
.pie{border-top:1px solid var(--line);margin-top:24px;padding:36px 0 28px;display:grid;gap:22px;color:var(--muted);font-size:14px}
.hero-pie{background:#0B0C0B;margin:0;padding:48px var(--gutter) 40px}
.pie-in{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:28px}
.pie-marca,.pie-nav,.pie-contacto{display:grid;gap:8px;align-content:start}
.pie-wm{font:700 24px var(--body);letter-spacing:-.03em;color:var(--ink)}
.pie-h{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pie-l{justify-self:start;min-height:32px;display:inline-flex;align-items:center;color:var(--muted);font:500 14px var(--body);text-decoration:none;text-align:left}
.pie-l:hover{color:var(--phosphor)}
.pie-lugar{color:var(--ink)}.pie-cap{font-size:13px;line-height:1.4}
.pie-ab{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.pie-c{font-size:12.5px;color:var(--faint)}
@media(max-width:700px){.pie-in{grid-template-columns:1fr;gap:18px}.pie{padding:28px 0 22px}}
/* about */
.ab-ficha{display:flex;align-items:center;gap:18px}
.ab-ic{flex:none;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:rgba(var(--acc-rgb),.14);border:1px solid rgba(var(--acc-rgb),.5);color:var(--phosphor);font:700 24px var(--body)}
.ab-ficha h3{font-size:clamp(26px,3vw,34px);letter-spacing:-.025em}.ab-cargo{color:var(--muted);font-size:16px;margin-top:2px}
.ab-lista{list-style:none;display:grid;gap:12px;max-width:42em}
.ab-lista li{position:relative;padding-left:22px;font-size:17px;line-height:1.45}
.ab-lista li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--phosphor)}
.ab-ej{max-width:42em;color:var(--muted);font-size:15px;line-height:1.5;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.about .pagina-col{gap:26px;max-width:760px}
.about .btn-primario{justify-self:start}
/* como funciona */
.como-pasos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.como-pasos li{display:grid;gap:6px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.como-n{color:var(--phosphor);font-size:13px}
.como-pasos b{font-size:19px;letter-spacing:-.01em}
.como-d{font-size:14.5px;line-height:1.5;color:var(--muted)}
.sv-como{display:grid;gap:14px}
@media(max-width:760px){.como-pasos{grid-template-columns:1fr}}
/* caso real */
.caso-card{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;border:1px dashed rgba(var(--acc-rgb),.6);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none}
.caso-card:hover{border-style:solid;background:var(--raised)}
.caso-ic{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:rgba(var(--acc-rgb),.12);color:var(--phosphor)}
.caso-ic .ic{width:26px;height:26px}
.caso-tx{display:grid;gap:3px;min-width:0}.caso-tx b{font-size:18px;letter-spacing:-.01em}.caso-tx span{font-size:14.5px;color:var(--muted)}
.caso-go{font-size:14px;font-weight:600;color:var(--phosphor);text-align:right}
@media(max-width:640px){.caso-card{grid-template-columns:auto 1fr;gap:12px}.caso-go{grid-column:1/-1;text-align:left}}
#ecosistema .caso-card{margin-top:14px;text-align:left}
/* tarjetas */
.svc-card{display:flex;flex-direction:column}
.svc-cab{flex:1;grid-template-rows:auto 1fr}
.svc-tx{align-content:start;grid-template-rows:auto auto 1fr;padding-right:62px}
.svc-pbox{align-self:end;display:grid;gap:3px;justify-items:start;margin-top:10px}
.svc-pbox .svc-precio{margin-top:0}
.svc-pnota{font-size:13px;line-height:1.35;color:var(--muted)}
.svc-mas{width:44px;height:44px;right:10px;bottom:10px}
#perLista{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));align-items:stretch}
#perLista .svc-card.abre{grid-column:1/-1}
@media(max-width:900px){#perLista{grid-template-columns:1fr}}
.svc-img.texto{display:grid;place-content:center;justify-items:center;gap:8px;aspect-ratio:16/7;background:linear-gradient(135deg,#171b18,#0f1210);color:var(--phosphor)}
.svc-img.texto .ic.grande{width:34px;height:34px}
.svc-partner{font:600 11.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.svc-llano{grid-column:1/-1;font-size:16.5px;line-height:1.5;color:var(--ink);max-width:46em}
.svc-credito{grid-column:1/-1;font-size:14.5px;color:var(--phosphor);margin-top:-6px}
.svc-glinea{margin-top:-6px;font-size:14.5px;color:var(--muted)}
.svc-no h4{margin-top:22px}
.svc-no .sv-limites-lista{margin-bottom:6px}
/* pasos del perfil: barra de 3 segmentos */
.per-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;max-width:560px;font-size:12.5px}
.per-pasos li{display:grid;gap:6px;color:var(--faint)}
.per-pasos li i{display:block;height:3px;border-radius:2px;background:var(--line)}
.per-pasos li.on{color:var(--ink)}.per-pasos li.on i{background:var(--phosphor)}
.per-pasos li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* pista de arrastre y carga */
#dragHint{position:fixed;z-index:26;left:50%;top:calc(112px + var(--safe-t));transform:translate(-50%,-6px);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(8,10,9,.88);border:1px solid rgba(169,184,87,.6);color:#fff;font-size:15px;font-weight:600;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
#dragHint.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
#dragHint .ic{width:22px;height:22px;color:var(--phosphor)}
@media(prefers-reduced-motion:no-preference){#dragHint.on .ic{animation:manoArrastra 1.6s var(--ease) infinite}@keyframes manoArrastra{0%,100%{transform:translateX(-5px)}50%{transform:translateX(7px)}}}
#cargando{position:fixed;z-index:27;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;background:rgba(8,10,9,.9);border:1px solid var(--line-soft);color:#fff;font-size:14px;font-weight:500;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s}
#cargando.on{opacity:1;visibility:visible}
#cargando i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--phosphor);animation:giraCarga .8s linear infinite}
@keyframes giraCarga{to{transform:rotate(360deg)}}
/* contacto */
.ct-col{max-width:720px;gap:22px}
.ct-directo{display:grid;gap:6px;justify-items:start}
.ct-lugar{color:var(--muted);font-size:15px}
.ct-dato{font-size:18px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(var(--acc-rgb),.6);text-underline-offset:4px;min-height:32px;display:inline-flex;align-items:center}
.ct-botones{display:grid;gap:10px}
.ct-botones>a[data-opcion]{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;min-height:62px;padding:10px 18px;text-align:left}
.ct-botones>a[data-opcion] .ic{grid-column:2;grid-row:1/3}
.ct-o-t{font-size:16px;font-weight:600}.ct-o-s{font-size:12.5px;font-weight:500;opacity:.78}
.ct-socios{margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* v11 · la linea del comparador nunca cruza el texto: se desvanece antes del titular */
.hero-compare::after{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 56%);mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 56%)}
.hero-handle{top:30%}
.hero-rango{max-width:60em}
@media(max-width:640px){.hero-compare::after{-webkit-mask-image:none;mask-image:none}.hero-handle{top:50%}}

/* v11: con antes/despues abierto, el par reemplaza a la imagen de la tarjeta (nunca la misma imagen dos veces) */
.svc-card.abre[data-antes] .svc-img{display:none}
.svc-card.abre[data-antes] .svc-cab{grid-template-columns:1fr!important}
@media(max-width:640px){
  dialog.hoja.pagina .hoja-cab h2{font-size:clamp(19px,5.4vw,22px);line-height:1.12}
  dialog.hoja.pagina .hoja-cab{padding:6px 16px 8px}
  .hoja-nav{padding:calc(4px + var(--safe-t)) 10px 4px}
  .per-pasos{margin-top:8px;gap:6px;font-size:12px}
  .hoja-cab .rot{font-size:12px}
}

@media(max-width:640px){#perRot{display:none}.hn-acc .btn-icono{width:40px;height:40px}}

/* ===== v11 · D portada en 360: la esfera viva es el fondo ===== */
#heroe{background:transparent!important;pointer-events:none}
#heroe .hero-copy,#heroe .hero-pie{pointer-events:none}
#heroe .perfil-btn,#heroe .hero-tour,#heroe .pie a,#heroe .pie button,#heroe .pie-l{pointer-events:auto}
.hero-compare{display:none!important}
body.sin-gl .hero-compare{display:block!important}
body.sin-gl #heroe{background:#182019!important;pointer-events:auto}
body.sin-gl #heroe .hero-copy,body.sin-gl #heroe .hero-pie{pointer-events:auto}
body.sin-gl .hero-vel{display:none}
body.sin-gl #dragHint{display:none}
.hero-vel{position:absolute;left:0;right:0;top:0;height:100dvh;z-index:3;pointer-events:none;background:linear-gradient(0deg,#0B0C0B 0,#0B0C0B 30%,rgba(11,12,11,.9) 52%,rgba(11,12,11,.5) 68%,rgba(11,12,11,0) 86%)}
#heroe .hero-copy{z-index:7}
.hero-honesty{z-index:8}
@media(max-width:640px){
  .hero-vel{background:linear-gradient(0deg,#0B0C0B 0,#0B0C0B 44%,rgba(11,12,11,.92) 58%,rgba(11,12,11,.5) 74%,rgba(11,12,11,0) 90%)}
  .hero-honesty{top:calc(52px + var(--safe-t));bottom:auto}
}
@media(max-height:700px) and (max-width:640px){
  #heroe h1{font-size:clamp(23px,7vw,27px)}
  .hero-rango{font-size:12.5px;margin-top:6px;line-height:1.32}
  .hero-linea{display:none}
  .perfil-btn{min-height:50px;padding:4px 8px 4px 5px;font-size:12.5px}
  .perfil-btn img{width:32px;height:32px}
  .hero-rot{margin:4px 0 6px;font-size:10px}
  .hero-sec{margin-top:4px}
  .hero-sec .hero-tour{min-height:30px;font-size:12.5px}
}
/* dragHint en la portada: por encima del degradado */
#dragHint{z-index:30}
/* iPhone: perfil con encabezado compacto (<=20 % del alto util) */
@media(max-width:640px){
  .per-pasos li span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .per-pasos{margin-top:6px;gap:6px}
  .per-pasos li{gap:0}
  dialog.hoja.pagina .hoja-cab h2{font-size:clamp(18px,5vw,21px)}
  dialog.hoja.pagina .hoja-cab{padding:4px 14px 6px}
  .hoja-nav{padding:calc(2px + var(--safe-t)) 8px 2px;gap:6px}
  .hn-wm{font-size:18px}
  .hn-acc .btn-contorno{min-height:34px}
  .hn-acc .btn-icono{width:38px;height:38px}
  #dPerfil .hoja-cab>div{padding-right:0}
}
/* safe-area en barra inferior y hojas */
@media(max-width:640px){.v7-nav{padding-bottom:calc(4px + var(--safe-b))}dialog.hoja .hoja-cuerpo{padding-bottom:calc(24px + var(--safe-b))}}
/* campos de texto: 16px para que Safari no haga zoom */
input,select,textarea{font-size:16px}
#gl{touch-action:none;overscroll-behavior:none}

#heroe{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0}

/* ===== v11 · iPhone: tactil, rendimiento, legibilidad ===== */
#recarga{position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);min-height:56px;padding:0 24px;border-radius:14px;background:var(--phosphor);color:var(--on-phosphor);font:600 17px var(--body);border:0}
#recarga[hidden]{display:none}
/* escena: nada desplaza ni rebota la pagina, nada se selecciona, sin menu de pulsacion larga */
html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
body.tour,body.cocina,body.fase-heroe{position:fixed;inset:0;width:100%;overflow:hidden;touch-action:none}
body.tour #heroe,body.cocina #heroe{pointer-events:none}
#gl,#paneles,#comparador,#pista,#dragHint,.borde{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#paneles,#pista,#dragHint,#cargando,.hero-vel,#sello,#casa{pointer-events:none}
#paneles .fp-c,#paneles .fp-c *{pointer-events:auto}
#dock,#capitulo,.v7-nav,#chipsPan,.perfil-btn,.hero-tour{touch-action:manipulation}
#heroe .perfil-btn,#heroe .hero-tour{pointer-events:auto;touch-action:manipulation}
/* telefono: sin desenfoque de fondo (carisimo en iOS); superficies solidas >= .9 salvo la barra Next */
@media(max-width:640px){
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .barra{-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;background:var(--panel)}
  :root{--glass:var(--panel);--glass-strong:var(--panel)}
  .fp-c,.fp.fijo.grande .fp-c{background:var(--panel)!important}
  #capitulo,#sello,.sello,.etiqueta,.chip,#progreso,#pista,.btn-contorno,.btn-texto{background:rgba(12,14,13,.94)}
  .hero-honesty{background:rgba(0,0,0,.82)}
  #visorImg{background:var(--panel)}
}

@media(max-width:640px) and (max-height:620px){dialog.hoja.pagina .hoja-cab h2{font-size:17px;line-height:1.1}.hn-acc .btn-contorno{min-height:32px;font-size:12px;padding:0 8px}.hn-acc .btn-icono{width:36px;height:36px}.hn-acc .btn-texto{min-height:32px}.hn-wm{font-size:17px}dialog.hoja.pagina .hoja-cab{padding:2px 14px 4px}.per-pasos{margin-top:4px}}

@media(max-width:640px) and (max-height:620px){.hoja-nav{padding:var(--safe-t) 8px 0;border-bottom:0}.hn-acc .btn-icono{width:34px;height:34px}.hn-acc .btn-contorno,.hn-acc .btn-texto{min-height:30px;height:30px}dialog.hoja.pagina .hoja-cab h2{font-size:16px}dialog.hoja.pagina .hoja-cab{padding:0 14px 4px}.per-pasos{margin-top:3px}}

/* ===== v11 · poster primero: la portada se ve y se toca al instante; la esfera hace fundido encima ===== */
#heroe::before{content:"";position:absolute;left:0;right:0;top:0;height:100dvh;z-index:1;background:#0B0C0B url(media/hero/portada-poster.webp) center/cover no-repeat;opacity:1;transition:opacity .9s var(--ease);pointer-events:none}
@media(max-width:640px),(max-aspect-ratio:1/1){#heroe::before{background-image:url(media/hero/portada-poster-v.webp)}}
body.esfera-lista #heroe::before,body.sin-gl #heroe::before,body:not(.fase-heroe) #heroe::before{opacity:0}
body.sin-gl #heroe::before{display:none}
body.fase-heroe #falla{display:none!important}

body.fase-heroe.listo #heroe{animation:entra .35s var(--ease) both!important}

/* v11 · FAQ, privacidad, terminos, que pasa despues */
.info .pagina-col{max-width:760px;gap:18px}
.info-cuerpo{display:grid;gap:14px}
.info-p{font-size:17px;line-height:1.55;color:var(--ink);max-width:44em}
.info-razon{font-size:13px;color:var(--faint)}
.faq-it{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:0 18px}
.faq-it summary{min-height:56px;display:flex;align-items:center;cursor:pointer;font-size:17px;font-weight:600;list-style:none;padding-right:34px;position:relative}
.faq-it summary::-webkit-details-marker{display:none}
.faq-it summary::after{content:"+";position:absolute;right:0;font:400 22px var(--mono);color:var(--phosphor)}
.faq-it[open] summary::after{content:"\2013"}
.faq-it p{padding:0 0 18px;font-size:16px;line-height:1.55;color:var(--muted)}
.ct-sig{display:grid;gap:8px;justify-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.sig-pasos{list-style:none;display:grid;gap:8px}
.sig-pasos li{display:flex;gap:12px;align-items:baseline;font-size:15.5px;line-height:1.4}

/* v11 · About con foto, avatar en contacto, boton + de 44 px */
.ab-cols{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center}
.ab-foto{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--surface)}
.ab-foto img{display:block;width:100%;height:100%;object-fit:cover}
.ab-tx{display:grid;gap:14px;justify-items:start}
.ab-p{font-size:17px;line-height:1.55;max-width:38em}
.ab-lugar{font-size:15px;line-height:1.5;color:var(--muted);max-width:38em}
.about .pagina-col{max-width:1000px}
@media(max-width:700px){.ab-cols{grid-template-columns:1fr}.ab-foto{max-height:45dvh;aspect-ratio:auto;height:45dvh}.ab-foto img{object-position:center 20%}}
.ct-persona{display:flex;align-items:center;gap:12px}
.ct-av{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;border:1px solid rgba(var(--acc-rgb),.6)}
.svc-mas{min-width:44px;min-height:44px;flex:none}

/* v12 · Services and prices: tres caminos */
.svc-aviso{font-size:16px;line-height:1.5;color:var(--ink);padding:14px 16px;border-left:3px solid var(--phosphor);background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0;max-width:52em}
.svc-frase{margin-top:-6px;font-size:17px;line-height:1.45;color:var(--ink)}
.svc-nota-camino{font-size:14.5px;line-height:1.45;color:var(--muted)}
.per-guia{font-size:15.5px;line-height:1.5;color:var(--ink)}
.per-guia .btn-enlace{font:600 15.5px var(--body);color:var(--phosphor);text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:0 4px}

/* ===== v12 · TEMAS: todo color sale de tokens. Oscuro (por defecto y explicito) y claro (marca Proposal). Sobre la esfera 360 el texto sigue claro sobre degradado oscuro. ===== */
:root{--panel:rgba(10,12,11,.94);--ink-rgb:231,236,230;--acc-rgb:169,184,87}
:root[data-theme="dark"]{color-scheme:dark;--panel:rgba(10,12,11,.94);--ink-rgb:231,236,230;--acc-rgb:169,184,87}
:root[data-theme="light"]{color-scheme:light;--paper:#F4F5F2;--surface:#FFFFFF;--sunk:#E9EBE6;--raised:#EEF0EB;--glass:rgba(255,255,255,.94);--glass-strong:rgba(255,255,255,.97);--scrim:rgba(16,18,17,.45);--ink:#101211;--muted:#535652;--faint:#6A6D68;--line:#DCDED9;--line-soft:rgba(16,18,17,.14);--line-ctrl:#8F928C;--phosphor:#5A6A24;--phosphor-strong:#46531B;--on-phosphor:#FFFFFF;--ring:0 0 0 4px rgba(90,106,36,.3);--red:#B4432E;--panel:rgba(255,255,255,.97);--ink-rgb:16,18,17;--acc-rgb:90,106,36}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){color-scheme:light;--paper:#F4F5F2;--surface:#FFFFFF;--sunk:#E9EBE6;--raised:#EEF0EB;--glass:rgba(255,255,255,.94);--glass-strong:rgba(255,255,255,.97);--scrim:rgba(16,18,17,.45);--ink:#101211;--muted:#535652;--faint:#6A6D68;--line:#DCDED9;--line-soft:rgba(16,18,17,.14);--line-ctrl:#8F928C;--phosphor:#5A6A24;--phosphor-strong:#46531B;--on-phosphor:#FFFFFF;--ring:0 0 0 4px rgba(90,106,36,.3);--red:#B4432E;--panel:rgba(255,255,255,.97);--ink-rgb:16,18,17;--acc-rgb:90,106,36}}
/* lo que sigue siendo oscuro en los dos temas (es imagen o va sobre la esfera) */
.hero-pie{background:var(--paper)!important}
.hero-pie .pie-wm,.hero-pie .pie-h{color:var(--ink)}
.v7-nav .v7-brand,.v7-nav button{color:var(--ink)!important}
.v7-nav{background:var(--glass)!important;border-color:var(--line-soft)!important}
.fp.fijo.grande .fp-c,.fp-c{background:var(--panel)!important}
.fp.fijo.grande .fp-t,.fp-t{color:var(--ink)!important}
.fp.fijo.grande .fp-d,.fp-d{color:var(--muted)!important}
.fp.fijo.grande .fp-li,.fp-li{color:var(--ink)!important}
.fp.fijo.grande .fp-k{color:var(--phosphor)!important}
.chip-pan{background:var(--panel)!important;color:var(--ink)!important}
.svc-card,.perfil-card{background:var(--surface)}
.btn-primario{color:var(--on-phosphor)}
#bTema{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
#bTema .ic,.hn-tema .ic{width:20px;height:20px}
.hn-tema{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line-soft)}
.tema-luna{display:none}
:root[data-theme="light"] .tema-sol{display:none}:root[data-theme="light"] .tema-luna{display:inline}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .tema-sol{display:none}:root:not([data-theme="dark"]) .tema-luna{display:inline}}
#sv-plans .svc-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

@media(max-width:640px){#capitulo,.etiqueta,.chip,#progreso,#pista,.btn-contorno,.btn-texto,.v7-nav #bIdioma,.v7-nav #bTema,.v7-nav #bPerfil{background:var(--panel)}.v7-nav{background:var(--panel)!important}.v7-nav button{background:transparent}.v7-nav #bIdioma,.v7-nav #bTema{border:1px solid var(--line-soft)}}

/* v12 · capacidades y a pedido */
.svc-caps{display:grid;gap:12px;margin-top:6px;padding-top:16px;border-top:1px dashed var(--line)}
.svc-caps-t{font:600 14px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.cap-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.cap-ic{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(var(--acc-rgb),.12);color:var(--phosphor)}
.cap-ic .ic{width:20px;height:20px}
.cap-tx{display:grid;gap:2px;min-width:0}.cap-tx b{font-size:15px;line-height:1.25}.cap-tx span{font-size:13.5px;line-height:1.4;color:var(--muted)}
.cap-card:target,.cap-card.resalta{border-color:var(--phosphor)}
.per-caps{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.per-caps:empty{display:none}
.per-caps-t{font:600 13px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.cap-chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-ctrl);color:var(--ink);font:500 14px var(--body);background:var(--surface)}
.cap-chip:hover{border-color:var(--phosphor);color:var(--phosphor)}

@media(max-width:640px){#svVolver span{display:none}#svVolver{min-width:40px;padding:0 10px}}

@media(max-width:640px){#bPerfil .pn{display:none}#bPerfil{padding:0 6px!important}}