/* FraMar.Soft · sitio público (Comercial, Industrial, Suite Comercial)
   Concepto: noche de marca + fotografía real. El color de acento de la página
   sigue al rubro elegido, con los mismos colores que usa el programa.
   Fuentes propias (la política de seguridad solo permite fuentes del mismo sitio):
   Archivo variable (peso 100-900, ancho 62-125 %) e IBM Plex Mono, ambas SIL OFL 1.1. */
@font-face{font-family:"Archivo";src:url("/static/sitio/fuentes/archivo-latin.woff2?v=1") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url("/static/sitio/fuentes/ibm-plex-mono-latin-400.woff2?v=1") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/sitio/fuentes/ibm-plex-mono-latin-600.woff2?v=1") format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{
  color-scheme:dark;
  /* Neutros grafito (sin tinte azul) */
  --fondo-rgb:20,19,18;
  --sup-rgb:32,30,28;
  --linea-rgb:235,226,212;
  --texto-rgb:243,240,235;
  --noche:#141312;
  --azul:#1C1B19;      /* superficie */
  --azul-2:#242220;
  --azul-3:#312E2B;
  /* Marca: celeste del logo, solo como acento */
  --cian:#00B3ED;
  --cian-claro:#5FD0F0;
  --cian-hover:#5FD0F0;
  --sobre-cian:#0E1112;
  /* Texto */
  --texto:#F3F0EB;
  --suave:#B9B2A8;
  --tenue:#8D867D;
  --linea:rgba(var(--linea-rgb),.12);
  --linea-fuerte:rgba(var(--linea-rgb),.26);
  /* Papel del ticket */
  --papel:#FBFBF9;
  --tinta-papel:#1B1A18;
  /* Acento por rubro (por defecto, la marca) */
  --rubro:var(--cian);
  --rubro-solido:#0A8FC2;
  --rubro-oscuro:#2A2724;
  /* Tipografía */
  --fuente:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* Medidas */
  --ancho:1240px;
  --radio:14px;
  --radio-chico:8px;
  --curva:cubic-bezier(.22,.8,.24,1);
}
/* Secciones claras para dar ritmo (mismos componentes, tokens invertidos) */
.claro{--fondo-rgb:242,241,237;--sup-rgb:255,255,255;--linea-rgb:40,34,28;--texto-rgb:26,25,23;
  --noche:#F2F1ED;--azul:#FFFFFF;--azul-2:#E9E7E2;--azul-3:#E4E1DB;
  --texto:#1A1917;--suave:#56524C;--tenue:#6B665E;--cian-claro:#036D97;--cian-hover:#38C5F3;
  --linea:rgba(var(--linea-rgb),.12);--linea-fuerte:rgba(var(--linea-rgb),.22);
  color-scheme:light;background:var(--noche);color:var(--texto)}
.claro .btn-borde{color:var(--texto);border-color:rgba(var(--linea-rgb),.3);background:#fff}
.claro .btn-borde:hover{border-color:var(--texto);background:#fff}
.claro .comparar-filas dd[data-antes]{color:#A23B35}
.claro .rubro-boton{background:#fff}
.claro .contexto{color:var(--suave)}
/* Colores reales de cada rubro en Suite Comercial */
[data-rubro="almacen"]{--rubro:#6F9BF5;--rubro-solido:#285CBA;--rubro-oscuro:#17334E}
[data-rubro="verduleria"]{--rubro:#4CC384;--rubro-solido:#257348;--rubro-oscuro:#153C2D}
[data-rubro="carniceria"]{--rubro:#EC7671;--rubro-solido:#AD3F3D;--rubro-oscuro:#382A2B}
[data-rubro="ferreteria"]{--rubro:#F39A55;--rubro-solido:#B85214;--rubro-oscuro:#25313B}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noche);color:var(--texto);font-family:var(--fuente);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--noche)}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--cian-claro);outline-offset:3px;border-radius:6px}
.saltar{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--texto);color:var(--noche);padding:10px 16px;border-radius:8px;font-weight:700}
.saltar:focus{left:16px}
.envoltura{max-width:var(--ancho);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Tipografía ---------- */
.titulo-xl{font-stretch:125%;font-weight:820;font-size:clamp(44px,7.4vw,104px);line-height:.92;letter-spacing:-.035em}
.titulo-l{font-stretch:118%;font-weight:780;font-size:clamp(32px,4.4vw,58px);line-height:1;letter-spacing:-.03em}
.titulo-m{font-stretch:112%;font-weight:740;font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.02em}
.bajada{font-size:clamp(17px,1.5vw,20px);color:var(--suave);max-width:58ch;line-height:1.55}
.contexto{display:inline-flex;align-items:center;gap:10px;color:var(--suave);font-weight:600;font-size:15px}
.contexto::before{content:"";width:28px;height:2px;background:var(--rubro);border-radius:2px;transition:background-color .6s}
.cifra{font-variant-numeric:tabular-nums}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;font-weight:680;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--curva)}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;flex:none}
.btn-principal{background:var(--cian);color:var(--sobre-cian)}
.btn-principal:hover{background:var(--cian-hover)}
.btn-rubro{background:var(--rubro-solido);color:#fff;transition:background-color .6s,transform .2s var(--curva)}
.btn-rubro:hover{filter:brightness(1.12)}
.btn-borde{border-color:var(--linea-fuerte);color:var(--texto);background:rgba(var(--sup-rgb),.4);backdrop-filter:blur(6px)}
.btn-borde:hover{border-color:var(--texto);background:rgba(var(--texto-rgb),.08)}
.btn-chico{min-height:40px;padding:0 18px;font-size:15px}
.enlace{color:var(--cian-claro);font-weight:650;text-decoration:none;border-bottom:1.5px solid rgba(95,214,245,.35);padding-bottom:1px;transition:border-color .2s}
.enlace:hover{border-color:var(--cian-claro)}

/* ---------- Encabezado ---------- */
/* El vidrio esmerilado va en una capa detrás: un backdrop-filter en el propio encabezado lo volvería el marco
   de los hijos fijos y el menú del celular (position:fixed) quedaría aplastado dentro de los 74 px del encabezado. */
.encabezado{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid var(--linea)}
.encabezado::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(var(--fondo-rgb),.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)}
.encabezado .envoltura{display:flex;align-items:center;gap:24px;min-height:74px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.marca img{width:44px;height:44px;border-radius:11px}
.marca b{display:block;font-stretch:118%;font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1}
.marca small{display:block;color:var(--suave);font-size:13px;font-weight:600;margin-top:3px}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav .nav-link{text-decoration:none;color:var(--suave);font-weight:620;font-size:15.5px;padding:9px 14px;border-radius:999px;transition:color .2s,background-color .2s}
.nav .nav-link:hover{color:var(--texto);background:rgba(var(--texto-rgb),.06)}
.nav .nav-link[aria-current="page"]{color:var(--texto);background:var(--azul-3)}
.nav .separa{width:1px;height:24px;background:var(--linea);margin:0 8px}
.nav .btn{margin-left:6px;color:var(--sobre-cian)}
.nav .btn:hover{background:var(--cian-hover)}
.menu-boton{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--linea);background:transparent;cursor:pointer;align-items:center;justify-content:center}
.menu-boton span:not(.solo-lector){display:block;width:20px;height:2px;background:var(--texto);border-radius:2px;position:relative;transition:transform .25s}
.menu-boton span:not(.solo-lector)::before,.menu-boton span:not(.solo-lector)::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--texto);border-radius:2px;transition:transform .25s,top .25s}
.menu-boton span:not(.solo-lector)::before{top:-6px}.menu-boton span:not(.solo-lector)::after{top:6px}
.menu-boton[aria-expanded="true"] span:not(.solo-lector){background:transparent}
.menu-boton[aria-expanded="true"] span:not(.solo-lector)::before{top:0;transform:rotate(45deg)}
.menu-boton[aria-expanded="true"] span:not(.solo-lector)::after{top:0;transform:rotate(-45deg)}

/* ---------- Hero con fotografía ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(860px,calc(100svh - 74px));display:flex;align-items:stretch}
.hero-fotos{position:absolute;inset:0;z-index:-2}
.hero-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;opacity:0;transform:scale(1.06);transition:opacity 1.4s ease}
.hero-fotos img.activa{opacity:1;animation:acercar 9s linear forwards}
@keyframes acercar{from{transform:scale(1.06)}to{transform:scale(1.14)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(var(--fondo-rgb),.97) 0%,rgba(var(--fondo-rgb),.9) 30%,rgba(var(--fondo-rgb),.45) 62%,rgba(var(--fondo-rgb),.2) 100%),
  linear-gradient(0deg,rgba(var(--fondo-rgb),1) 0%,rgba(var(--fondo-rgb),0) 28%)}
.hero .envoltura{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center;padding-block:72px 64px}
.hero-copia{display:flex;flex-direction:column;gap:26px;min-width:0}
.hero h1 span{display:block}
.hero h1 .tenue{color:var(--suave)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.confianza{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;margin:0;color:var(--suave);font-size:15px}
.confianza li{display:flex;align-items:center;gap:8px}
.confianza svg{width:17px;height:17px;color:var(--rubro);flex:none;transition:color .6s}
/* Entrada orquestada: el único movimiento automático de la carga */
.entra{animation:subir .9s var(--curva) both}
.entra-1{animation-delay:.05s}.entra-2{animation-delay:.16s}.entra-3{animation-delay:.27s}.entra-4{animation-delay:.42s}.entra-5{animation-delay:.56s}.entra-6{animation-delay:.7s}
@keyframes subir{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* Selector de escenas */
.escenas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.escenas button.escena{position:relative;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--linea);background:rgba(var(--sup-rgb),.55);backdrop-filter:blur(6px);cursor:pointer;overflow:hidden;color:var(--suave);font-weight:620;font-size:14.5px;transition:border-color .2s,color .2s}
.escenas button.escena img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.escenas button.escena[aria-pressed="true"]{color:var(--texto);border-color:var(--linea-fuerte)}
.escenas button.escena i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--rubro);transform:scaleX(0);transform-origin:0 50%}
.escenas button.escena[aria-pressed="true"] i{animation:progreso var(--duracion,7s) linear forwards}
.escenas.en-pausa button.escena i{animation-play-state:paused}
@keyframes progreso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pausa{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linea);background:transparent;border-radius:999px;padding:9px 14px;cursor:pointer;color:var(--suave);font-size:14px;font-weight:600}
.pausa:hover{color:var(--texto);border-color:var(--linea-fuerte)}
.pausa svg{width:14px;height:14px}
.nota-imagen{color:var(--tenue);font-size:13px}

/* Tarjeta de video vertical */
.video-tarjeta{position:relative;border-radius:26px;padding:10px;background:linear-gradient(160deg,rgba(var(--sup-rgb),.85),rgba(var(--fondo-rgb),.9));border:1px solid var(--linea-fuerte);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.video-tarjeta .pantalla{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/16;background:#000;max-width:100%}
.video-tarjeta video{width:100%;height:100%;object-fit:cover}
.video-tarjeta .reproducir{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:22px;border:0;cursor:pointer;background:linear-gradient(0deg,rgba(var(--fondo-rgb),.92) 0%,rgba(var(--fondo-rgb),0) 55%);text-align:center}
.video-tarjeta .reproducir .circulo{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--texto-rgb),.16);backdrop-filter:blur(8px);border:1px solid rgba(var(--texto-rgb),.4);margin-bottom:auto;margin-top:auto;transition:transform .3s var(--curva),background-color .3s}
.video-tarjeta .reproducir:hover .circulo{transform:scale(1.08);background:rgba(var(--texto-rgb),.26)}
.video-tarjeta .reproducir .circulo svg{width:26px;height:26px;margin-left:4px}
.video-tarjeta .reproducir strong{font-size:18px;font-stretch:110%}
.video-tarjeta .reproducir span{font-size:14px;color:var(--suave)}
.video-tarjeta .pie{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 8px 4px;font-size:13.5px;color:var(--suave)}
.video-tarjeta .pie a{color:var(--suave);font-weight:600}

/* ---------- Secciones ---------- */
.seccion{padding-block:clamp(72px,9vw,128px);position:relative}
.cabecera{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(36px,4vw,56px);max-width:760px}
.cabecera-fila{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,56px)}
.cabecera-fila .cabecera{margin-bottom:0}
.franja{background:var(--azul)}

/* ---------- Vitrina por rubro ---------- */
.vitrina{position:relative;overflow:hidden;isolation:isolate}
.vitrina::before{content:"";position:absolute;inset:-20% -10% auto;height:90%;z-index:-1;background:radial-gradient(ellipse at 70% 30%,var(--rubro-oscuro),transparent 65%);opacity:.9;transition:background .8s}
.rubros{display:flex;gap:8px;flex-wrap:wrap}
.rubro-boton{display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border-radius:999px;border:1px solid var(--linea);background:rgba(var(--sup-rgb),.7);cursor:pointer;text-align:left;transition:border-color .3s,background-color .3s}
.rubro-boton img{width:40px;height:40px;border-radius:50%;background:var(--papel);padding:5px;object-fit:contain}
.rubro-boton strong{display:block;font-size:16px;line-height:1.2}
.rubro-boton small{display:block;color:var(--tenue);font-size:13px}
.rubro-boton:hover{border-color:var(--linea-fuerte)}
.rubro-boton[aria-pressed="true"]{border-color:var(--rubro);background:var(--rubro-oscuro)}
.rubro-boton[aria-pressed="true"] small{color:var(--suave)}

.mostrador{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:center}
.notebook{position:relative;min-width:0}
.notebook .marco{position:relative;border-radius:16px 16px 6px 6px;padding:12px 12px 14px;background:linear-gradient(180deg,#3A3633,#1A1816);border:1px solid var(--linea-fuerte);box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4) inset}
.notebook .marco::before{content:"";position:absolute;top:5px;left:50%;width:6px;height:6px;border-radius:50%;background:#4A4541;transform:translateX(-50%)}
.notebook .capturas{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#0E1B28;max-width:100%}
.notebook .capturas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.015);transition:opacity .6s ease,transform .9s var(--curva)}
.notebook .capturas img.activa{opacity:1;transform:none}
.notebook .base{height:16px;margin:0 -4%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#3E3A36,#22201E);position:relative}
.notebook .base::after{content:"";position:absolute;left:50%;top:0;width:18%;height:6px;transform:translateX(-50%);background:#1A1816;border-radius:0 0 8px 8px}
/* Productos del rubro que flotan alrededor de la notebook */
.flotantes{position:absolute;inset:0;pointer-events:none}
.flotante{position:absolute;width:clamp(54px,6vw,78px);aspect-ratio:1;border-radius:22px;background:var(--papel);padding:10px;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);opacity:0;transform:translateY(16px) scale(.85)}
.flotante img{width:100%;height:100%;object-fit:contain}
.flotante.visible{animation:aparecer .7s var(--curva) forwards,flotar 6s ease-in-out .7s infinite alternate}
.flotante:nth-child(1){left:-3%;top:8%}
.flotante:nth-child(2){left:6%;bottom:6%;--retraso:.1s}
.flotante:nth-child(3){right:-2%;top:-6%}
.flotante:nth-child(4){right:12%;bottom:-4%}
@keyframes aparecer{to{opacity:1;transform:none}}
@keyframes flotar{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-12px) rotate(2deg)}}

/* Ticket de la venta de ejemplo */
.ticket-zona{display:flex;flex-direction:column;gap:14px;min-width:0}
.ticket{background:var(--papel);color:var(--tinta-papel);font-family:var(--mono);font-size:13px;line-height:1.55;padding:20px 18px 26px;border-radius:4px 4px 0 0;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  -webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 5.5px,#000 6px) 0 0/12px 100% repeat-x;mask:radial-gradient(circle 6px at 50% 100%,transparent 5.5px,#000 6px) 0 0/12px 100% repeat-x}
.ticket.imprime{animation:imprimir .9s steps(14,end) both}
@keyframes imprimir{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.ticket .cab{text-align:center;padding-bottom:10px;border-bottom:1px dashed #9AA6B2;margin-bottom:10px}
.ticket .cab b{display:block;font-size:14px}
.ticket .cab span{color:#5E6B78;font-size:12px}
.ticket .linea{display:flex;justify-content:space-between;gap:10px}
.ticket .detalle{color:#5E6B78;font-size:12px;margin-bottom:4px}
.ticket .total{display:flex;justify-content:space-between;border-top:1px dashed #9AA6B2;margin-top:8px;padding-top:10px;font-weight:600;font-size:17px}
.ticket .total b{color:var(--rubro-solido);transition:color .6s}
.ticket .gracias{text-align:center;color:#5E6B78;font-size:12px;margin-top:10px}
.ticket-zona .leyenda{display:flex;flex-direction:column;gap:6px}
.ticket-zona .leyenda strong{font-size:17px;line-height:1.35}
.ticket-zona .leyenda small{color:var(--tenue);font-size:13px}

/* ---------- Herramientas ---------- */
.herramientas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linea)}
.herramienta{display:flex;flex-direction:column;gap:10px;padding:30px 28px 34px 0;border-bottom:1px solid var(--linea)}
.herramienta:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--linea)}
.herramienta .icono{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--azul-3);color:var(--rubro);transition:color .6s,background-color .3s}
.herramienta .icono svg{width:24px;height:24px}
.herramienta h3{font-size:20px;font-stretch:108%;font-weight:720}
.herramienta p{color:var(--suave);font-size:16px;max-width:38ch}

/* ---------- Flujo (secuencia real) ---------- */
.flujo-bloque{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.foto-recorte{position:relative;border-radius:var(--radio);overflow:hidden;aspect-ratio:4/3.4;max-width:100%}
.foto-recorte img{width:100%;height:100%;object-fit:cover}
.foto-recorte figcaption{position:absolute;left:16px;bottom:16px;right:16px;font-size:13px;color:var(--suave);background:rgba(var(--fondo-rgb),.72);backdrop-filter:blur(6px);padding:8px 12px;border-radius:8px;width:max-content;max-width:calc(100% - 32px)}
.pasos{list-style:none;margin:0;padding:0;counter-reset:paso;position:relative;display:flex;flex-direction:column;gap:6px}
.pasos::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--linea)}
.pasos::after{content:"";position:absolute;left:21px;top:22px;width:2px;height:calc(var(--avance,0) * (100% - 44px));background:var(--rubro);transition:height 1.2s var(--curva),background-color .6s}
.paso{counter-increment:paso;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:14px 0}
.paso::before{content:counter(paso);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:760;font-size:18px;background:var(--azul-2);border:2px solid var(--linea-fuerte);color:var(--suave);position:relative;z-index:1;transition:background-color .5s,border-color .5s,color .5s}
.paso.hecho::before{background:var(--rubro-solido);border-color:var(--rubro);color:#fff}
.paso h3{font-size:21px;font-stretch:108%;margin-top:8px}
.paso p{color:var(--suave);margin-top:4px;max-width:42ch}

/* ---------- Panel de Suite Comercial ---------- */
.suite-panel{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--linea-fuerte);background:linear-gradient(135deg,var(--azul-2) 0%,var(--noche) 60%);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);isolation:isolate}
.suite-panel::before{content:"";position:absolute;right:-12%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--rubro-oscuro),transparent 70%);z-index:-1;transition:background .8s}
.suite-panel .copia{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:20px}
.suite-panel .marca-suite{display:flex;align-items:center;gap:14px}
.suite-panel .marca-suite img{width:54px;height:54px;border-radius:13px}
.suite-panel .marca-suite b{font-size:24px;font-stretch:115%;display:block;line-height:1.1}
.suite-panel .marca-suite small{color:var(--suave);font-size:14px}
.acciones-suite{padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:10px;justify-content:center;border-left:1px solid var(--linea);background:rgba(var(--fondo-rgb),.35)}
.accion{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;border:1px solid var(--linea);background:rgba(var(--sup-rgb),.6);text-decoration:none;cursor:pointer;text-align:left;width:100%;transition:border-color .2s,background-color .2s,transform .25s var(--curva)}
.accion:hover{border-color:var(--linea-fuerte);background:rgba(var(--sup-rgb),.7);transform:translateX(3px)}
.accion:active{transform:translateX(3px) scale(.985)}
.accion .ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--azul-3);color:var(--cian-claro)}
.accion .ico svg{width:22px;height:22px}
.accion strong{display:block;font-size:16.5px;line-height:1.25}
.accion small{display:block;color:var(--suave);font-size:14px}
.accion .flecha{width:18px;height:18px;color:var(--tenue)}
.accion.destacada{background:var(--cian);border-color:var(--cian);color:var(--sobre-cian)}
.accion.destacada .ico{background:rgba(4,18,30,.12);color:var(--sobre-cian)}
.accion.destacada small{color:rgba(4,18,30,.72)}
.accion.destacada .flecha{color:var(--sobre-cian)}
.accion.destacada:hover{background:var(--cian-hover)}
.suite-panel .pie-panel{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px clamp(28px,4vw,56px);border-top:1px solid var(--linea);background:rgba(var(--fondo-rgb),.45)}
.suite-panel .pie-panel p{color:var(--suave);font-size:15.5px;max-width:62ch}

/* ---------- Planes ---------- */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:18px;padding:30px 28px;border-radius:var(--radio);background:var(--azul);border:1px solid var(--linea);transition:border-color .3s,transform .4s var(--curva)}
.plan:hover{border-color:var(--linea-fuerte);transform:translateY(-4px)}
.plan.destacado{background:linear-gradient(180deg,var(--azul-3),var(--azul) 70%);border-color:var(--cian)}
.plan .sello{position:absolute;top:-13px;left:26px;background:var(--cian);color:var(--sobre-cian);font-weight:740;font-size:13px;padding:4px 12px;border-radius:999px}
.plan .nombre{display:flex;align-items:center;gap:12px}
.plan .nombre .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--azul-3);color:var(--cian-claro)}
.plan .nombre .ico svg{width:22px;height:22px}
.plan h3{font-size:24px;font-stretch:115%}
.plan .para{color:var(--suave);font-size:15.5px}
.precio{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.precio strong{font-stretch:112%;font-weight:800;font-size:clamp(36px,3.6vw,46px);letter-spacing:-.03em;line-height:1}
.precio span{color:var(--suave);font-size:16px}
.plan .moneda{color:var(--suave);font-size:13.5px;margin-top:-10px}
.plan .sucursal{padding:12px 14px;border-radius:10px;background:rgba(var(--fondo-rgb),.5);border:1px solid var(--linea);font-size:15px}
.plan .sucursal span{color:var(--suave);display:block;font-size:13.5px}
.plan .sucursal b{font-weight:700}
.plan dl{margin:0;display:grid;gap:10px}
.plan dl div{display:flex;justify-content:space-between;gap:12px;font-size:15.5px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.plan dt{color:var(--suave)}
.plan dd{margin:0;font-weight:680}
.plan .incluye{display:flex;flex-direction:column;gap:8px;font-size:15px}
.plan .incluye span{display:flex;align-items:center;gap:8px}
.plan .incluye svg{width:17px;height:17px;color:var(--cian-claro);flex:none}
.plan .btn{margin-top:auto;width:100%}
.planes-extra{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;margin-top:20px}
.caja-extra{padding:22px 24px;border-radius:var(--radio);border:1px solid var(--linea);background:rgba(var(--sup-rgb),.6);display:flex;flex-direction:column;gap:10px}
.caja-extra b{font-size:16.5px}
.caja-extra p{color:var(--suave);font-size:15.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:4px 0 0}
.chips li{font-size:14px;padding:6px 12px;border-radius:999px;background:var(--azul-3);color:var(--texto)}
.caja-extra.mp{flex-direction:row;align-items:center;gap:16px}
.caja-extra.mp svg{width:34px;height:34px;color:var(--cian-claro);flex:none}
/* «Recomendá y ahorrá»: ocupa todo el ancho debajo de las dos cajas (los porcentajes salen de Facturación). */
.caja-extra.recomenda{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;border-color:rgba(var(--ahorro-rgb,91,209,146),.45)}
.caja-extra.recomenda svg{width:34px;height:34px;color:var(--ahorro,#5BD192);flex:none}
html[data-tema="claro"] .caja-extra.recomenda svg{color:#145A37}
.nota-planes{color:var(--tenue);font-size:14px;margin-top:18px;max-width:90ch}
.cotizacion{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:24px 28px;border-radius:var(--radio);border:1px dashed var(--linea-fuerte)}
.cotizacion b{font-size:18px;display:block}
.cotizacion p{color:var(--suave)}

/* ---------- Banda fotográfica (Industrial / Comercial) ---------- */
.banda-foto{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;min-height:480px;display:flex;align-items:flex-end}
.banda-foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);transition:transform 1.6s var(--curva)}
.banda-foto:hover>img{transform:scale(1.08)}
.banda-foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--fondo-rgb),.95) 0%,rgba(var(--fondo-rgb),.75) 42%,rgba(var(--fondo-rgb),.1) 75%)}
.banda-foto .copia{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:18px;max-width:640px}
.banda-foto .ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Industrial: plano de planta ---------- */
.plano{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:stretch}
.plano-dibujo{position:relative;border-radius:var(--radio);border:1px solid var(--linea-fuerte);background:
  linear-gradient(rgba(var(--linea-rgb),.05) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,rgba(var(--linea-rgb),.05) 1px,transparent 1px) 0 0/24px 24px,
  var(--azul);overflow:hidden;min-width:0}
.plano-dibujo svg{width:100%;height:auto;display:block}
.zona rect{fill:rgba(var(--sup-rgb),.85);stroke:rgba(95,214,245,.35);stroke-width:1.5;transition:fill .3s,stroke .3s}
.zona text{fill:var(--suave);font-family:var(--fuente);font-size:15px;font-weight:650;transition:fill .3s}
.zona text.sub{font-size:11.5px;font-weight:500;fill:var(--tenue)}
.zona{cursor:pointer;outline:none}
.zona:hover rect,.zona:focus-visible rect{stroke:var(--cian-claro)}
.zona.activa rect{fill:rgba(0,179,237,.18);stroke:var(--cian);stroke-width:2}
.zona.activa text{fill:var(--texto)}
.zona:focus-visible rect{stroke-width:3}
.recorrido{fill:none;stroke:var(--cian);stroke-width:2;stroke-dasharray:6 10;opacity:.55;animation:circular 2.2s linear infinite}
@keyframes circular{to{stroke-dashoffset:-32}}
.plano-detalle{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,36px);border-radius:var(--radio);background:var(--azul);border:1px solid var(--linea)}
.plano-detalle .icono{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:rgba(0,179,237,.14);color:var(--cian-claro)}
.plano-detalle .icono svg{width:28px;height:28px}
.plano-detalle h3{font-size:26px;font-stretch:112%}
.plano-detalle p{color:var(--suave)}
.plano-detalle ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.plano-detalle li{display:flex;gap:10px;align-items:flex-start}
.plano-detalle li svg{width:18px;height:18px;color:var(--cian-claro);flex:none;margin-top:4px}
.plano-detalle .contador{color:var(--tenue);font-size:13.5px;margin-top:auto}
.plano-lista{display:none}
.aviso{display:flex;gap:12px;align-items:flex-start;color:var(--suave);font-size:14.5px;padding:14px 16px;border-radius:10px;background:rgba(0,179,237,.06);border:1px solid var(--linea)}
.aviso svg{width:20px;height:20px;color:var(--cian-claro);flex:none;margin-top:2px}

.trio-fotos{display:grid;grid-template-columns:1.3fr .8fr .9fr;gap:16px;align-items:stretch}
.trio-fotos figure{margin:0;position:relative;border-radius:var(--radio);overflow:hidden;min-height:280px}
.trio-fotos img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.trio-fotos figcaption{position:absolute;z-index:1;left:14px;bottom:14px;right:14px;font-weight:650;font-size:15px;text-shadow:0 1px 12px rgba(0,0,0,.6)}
/* Velo inferior: la leyenda se lee sobre cualquier foto, en los dos temas */
.trio-fotos figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(0deg,rgba(14,13,12,.74),rgba(14,13,12,0));pointer-events:none}

.video-grande{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--linea-fuerte);aspect-ratio:16/9;background:#000;max-width:100%}
.video-grande video{width:100%;height:100%;object-fit:cover}
.video-grande .reproducir{position:absolute;inset:0;border:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:clamp(20px,3vw,36px);background:linear-gradient(0deg,rgba(var(--fondo-rgb),.9),rgba(var(--fondo-rgb),0) 60%);text-align:left;flex-wrap:wrap}
.video-grande .reproducir strong{display:block;font-size:clamp(20px,2.2vw,28px);font-stretch:112%}
.video-grande .reproducir span{color:var(--suave);font-size:15px}
.video-grande .circulo{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--cian);color:var(--sobre-cian);flex:none;transition:transform .3s var(--curva)}
.video-grande .reproducir:hover .circulo{transform:scale(1.07)}
.video-grande .circulo svg{width:30px;height:30px;margin-left:4px}

.ecosistema{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.eco{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,40px);border-radius:var(--radio);border:1px solid var(--linea);background:var(--azul)}
.eco p{color:var(--suave)}
.eco .btn{align-self:flex-start;margin-top:auto}

/* ---------- Suite: hero de detalle ---------- */
.suite-hero{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(48px,6vw,88px) clamp(56px,7vw,96px)}
.suite-hero::before{content:"";position:absolute;inset:-30% -20% auto 30%;height:120%;z-index:-1;background:radial-gradient(ellipse at center,var(--rubro-oscuro),transparent 65%);transition:background .8s}
.suite-hero .envoltura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,64px);align-items:center}
.volver{display:inline-flex;align-items:center;gap:8px;color:var(--suave);text-decoration:none;font-weight:600;font-size:15px}
.volver:hover{color:var(--texto)}
.volver svg{width:16px;height:16px}
.suite-hero .copia{display:flex;flex-direction:column;gap:22px;min-width:0}
.suite-hero .identidad{display:flex;align-items:center;gap:14px}
.suite-hero .identidad img{width:58px;height:58px;border-radius:14px}
.suite-hero .identidad span{color:var(--suave);font-size:15px;font-weight:600}
.dispositivos{position:relative;min-width:0;padding-bottom:6%}
.dispositivos .telefono{position:absolute;right:-2%;bottom:0;width:27%;border-radius:22px;padding:6px;background:#1A1816;border:1px solid var(--linea-fuerte);box-shadow:0 30px 60px -20px rgba(0,0,0,.9);animation:flotar 7s ease-in-out infinite alternate}
.dispositivos .telefono .pantalla{border-radius:17px;overflow:hidden;aspect-ratio:9/19;background:#000;max-width:100%}
.dispositivos .telefono video,.dispositivos .telefono img{width:100%;height:100%;object-fit:cover}
.dispositivos .notebook{width:88%}
.lado-cita{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-left:3px solid var(--rubro);background:rgba(var(--sup-rgb),.6);border-radius:0 12px 12px 0;transition:border-color .6s}
.lado-cita strong{font-size:19px;font-stretch:108%}
.lado-cita p{color:var(--suave);font-size:15.5px}

.funciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.funcion{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--radio);background:var(--azul);border:1px solid var(--linea)}
.funcion .icono{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--azul-3);color:var(--rubro);transition:color .6s}
.funcion .icono svg{width:25px;height:25px}
.funcion h3{font-size:20px;font-stretch:108%}
.funcion p{color:var(--suave);font-size:16px}

.activar{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding:clamp(28px,4vw,48px);border-radius:22px;background:linear-gradient(120deg,var(--rubro-oscuro),var(--azul-2));border:1px solid var(--linea-fuerte);transition:background .8s}
.activar p{color:var(--suave);margin-top:10px}

/* ---------- Diálogo de video ---------- */
dialog.video-dialogo{width:min(960px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;border:1px solid var(--linea-fuerte);border-radius:18px;background:var(--azul);color:var(--texto);overflow:auto}
dialog.video-dialogo::backdrop{background:rgba(12,11,10,.82);backdrop-filter:blur(6px)}
dialog.video-dialogo[open]{animation:subir .4s var(--curva)}
.video-dialogo header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--linea)}
.video-dialogo header small{display:block;color:var(--suave);font-size:13.5px}
.video-dialogo .cerrar{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);background:transparent;cursor:pointer;display:grid;place-items:center;flex:none}
.video-dialogo .cerrar svg{width:18px;height:18px}
.video-dialogo video{width:100%;aspect-ratio:16/9;background:#000}
.video-dialogo .vertical{aspect-ratio:auto;max-height:70vh;margin:0 auto;width:auto}

/* ---------- Pie ---------- */
.pie-sitio{border-top:1px solid var(--linea);padding-block:48px 56px;margin-top:clamp(40px,6vw,80px)}
.pie-sitio .envoltura{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.pie-sitio h4{font-size:14px;color:var(--tenue);font-weight:650;margin-bottom:12px}
.pie-sitio ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.pie-sitio a{text-decoration:none;color:var(--suave)}
.pie-sitio a:hover{color:var(--texto)}
.pie-sitio .marca{margin-bottom:14px}
.pie-sitio p{color:var(--tenue);font-size:14.5px;max-width:36ch}


/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero .envoltura{grid-template-columns:minmax(0,1fr) 280px;gap:32px}
  .mostrador{grid-template-columns:minmax(0,1fr) 260px}
}
@media (max-width:1080px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;padding:12px max(20px,env(safe-area-inset-right,0px)) 20px max(20px,env(safe-area-inset-left,0px));background:var(--noche);border-bottom:1px solid var(--linea)}
  .nav.abierto{display:flex}
  .nav .nav-link{padding:12px 14px}
  .nav .separa{display:none}
  .nav .btn{margin:8px 0 0}
  .menu-boton{display:inline-flex}
}
@media (max-width:920px){
  .hero{min-height:0}
  .hero .envoltura{grid-template-columns:1fr;padding-block:56px 48px}
  .hero::after{background:linear-gradient(180deg,rgba(var(--fondo-rgb),.7) 0%,rgba(var(--fondo-rgb),.92) 55%,rgba(var(--fondo-rgb),1) 100%)}
  .video-tarjeta{max-width:340px;width:100%}
  .video-tarjeta .pantalla{aspect-ratio:4/5}
  .mostrador,.flujo-bloque,.plano,.suite-hero .envoltura,.planes-extra{grid-template-columns:1fr}
  .ticket-zona{max-width:420px}
  .suite-panel{grid-template-columns:1fr}
  .acciones-suite{border-left:0;border-top:1px solid var(--linea)}
  .herramientas,.funciones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .herramienta:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .herramienta:nth-child(2n){padding-left:24px;border-left:1px solid var(--linea)}
  .planes{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan.destacado{order:-1}
  .trio-fotos{grid-template-columns:1fr 1fr}
  .trio-fotos figure:first-child{grid-column:1/-1}
  .ecosistema{grid-template-columns:1fr}
  .pie-sitio .envoltura{grid-template-columns:1fr 1fr}
  .dispositivos .notebook{width:84%}
}
@media (max-width:600px){
  body{font-size:16px}
  .envoltura{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .marca b{font-size:19px}
  .hero .ctas .btn{flex:1 1 100%}
  .rubros{display:grid;grid-template-columns:1fr 1fr}
  .rubro-boton{padding-right:10px}
  .rubro-boton small{display:none}
  .herramientas,.funciones{grid-template-columns:1fr}
  .herramienta:nth-child(2n){padding-left:0;border-left:0}
  .banda-foto{min-height:520px}
  .banda-foto::after{background:linear-gradient(0deg,rgba(var(--fondo-rgb),.97) 0%,rgba(var(--fondo-rgb),.92) 58%,rgba(var(--fondo-rgb),.8) 80%,rgba(var(--fondo-rgb),.55) 100%)}
  .trio-fotos{grid-template-columns:1fr}
  .pie-sitio .envoltura{grid-template-columns:1fr}
  .flotante:nth-child(3),.flotante:nth-child(4){display:none}
  .escenas button.escena span{display:none}
  .escenas button.escena{padding-right:6px}
  .plano-dibujo .zona text.sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .hero-fotos img.activa{animation:none;transform:scale(1.04)}
  .recorrido{animation:none}
}

/* ---------- Industrial: atmósfera del hero ---------- */
.hero-rejilla{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(rgba(var(--linea-rgb),.06) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(90deg,rgba(var(--linea-rgb),.06) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);mask:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%)}
.barrido{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.barrido::before{content:"";position:absolute;top:-20%;bottom:-20%;width:22%;left:-30%;background:linear-gradient(90deg,transparent,rgba(95,214,245,.13),transparent);transform:skewX(-14deg);animation:barrer 8s ease-in-out 1.2s infinite}
@keyframes barrer{0%{left:-30%}55%,100%{left:120%}}
.area-industrial .hero::after{background:
  linear-gradient(90deg,rgba(var(--fondo-rgb),.97) 0%,rgba(var(--fondo-rgb),.88) 32%,rgba(var(--fondo-rgb),.4) 65%,rgba(var(--fondo-rgb),.25) 100%),
  linear-gradient(0deg,rgba(var(--fondo-rgb),1) 0%,rgba(var(--fondo-rgb),0) 30%)}
@media (prefers-reduced-motion:reduce){.barrido::before{animation:none;display:none}}
@media (max-width:920px){
  .area-industrial .hero::after{background:linear-gradient(180deg,rgba(var(--fondo-rgb),.8) 0%,rgba(var(--fondo-rgb),.9) 45%,rgba(var(--fondo-rgb),.97) 100%)}
}

/* ---------- Ajustes tras la revisión visual ---------- */
.video-tarjeta .reproducir{background:linear-gradient(0deg,rgba(var(--fondo-rgb),.85) 0%,rgba(var(--fondo-rgb),0) 30%)}
.video-tarjeta .reproducir>span:last-child{font-weight:600;color:var(--texto);background:rgba(var(--fondo-rgb),.8);padding:6px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.video-grande .reproducir{align-items:center;justify-content:center;background:rgba(var(--fondo-rgb),.12)}
/* Sobre fotos, los textos chicos usan el color de texto pleno (el gris suave se pierde contra la imagen) */
.portada .contexto,.hero .contexto,.banda-foto .contexto{color:var(--texto)}
.hero .nota-imagen{color:var(--suave)}
.trio-fotos figure{min-height:380px}
@media (min-width:921px){
  .banda-foto>img{left:34%;width:66%}
  .banda-foto::after{background:linear-gradient(90deg,rgba(var(--fondo-rgb),1) 0%,rgba(var(--fondo-rgb),1) 34%,rgba(var(--fondo-rgb),.55) 46%,rgba(var(--fondo-rgb),0) 62%)}
  .banda-foto{background:var(--noche)}
}
@media (max-width:600px){
  .plano-dibujo{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .plano-dibujo svg{min-width:600px}
  .plano-dibujo .zona text.sub{display:block}
  .trio-fotos figure{min-height:300px}
}

/* =====================================================================
   v2 · Portada fotográfica, demo sincronizada, personajes y calculadora
   ===================================================================== */
.btn-grande{min-height:56px;padding:0 28px;font-size:17px}

/* Encabezado transparente sobre la portada */
.con-portada .encabezado{transition:border-color .35s}
.con-portada .encabezado:not(.con-fondo){border-bottom-color:transparent}
.con-portada .encabezado:not(.con-fondo)::before{background:linear-gradient(180deg,rgba(var(--fondo-rgb),.88),rgba(var(--fondo-rgb),.4));backdrop-filter:none;-webkit-backdrop-filter:none}
.con-portada main{margin-top:-75px}

/* Portada */
.portada{position:relative;isolation:isolate;overflow:hidden;min-height:max(680px,min(100svh,940px));display:flex;flex-direction:column;justify-content:flex-end}
.portada-foto{position:absolute;inset:0;z-index:-2;overflow:hidden}
.portada-foto img{position:absolute;inset:-6% 0 auto;width:100%;height:112%;object-fit:cover;object-position:58% 40%;transform-origin:60% 45%;animation:portada-zoom 26s ease-in-out infinite alternate;will-change:transform}
@keyframes portada-zoom{from{scale:1.02}to{scale:1.12}}
.portada-luz{position:absolute;left:34%;top:18%;width:34%;height:52%;border-radius:40%;background:radial-gradient(closest-side,rgba(255,214,150,.42),rgba(255,214,150,0));mix-blend-mode:screen;filter:blur(18px);animation:luz-local 5.5s ease-in-out infinite}
@keyframes luz-local{0%,100%{opacity:.55}45%{opacity:.9}52%{opacity:.62}58%{opacity:.85}}
.portada::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(var(--fondo-rgb),.95) 0%,rgba(var(--fondo-rgb),.86) 36%,rgba(var(--fondo-rgb),.42) 60%,rgba(var(--fondo-rgb),.1) 80%,rgba(var(--fondo-rgb),.05) 100%),
  linear-gradient(0deg,rgba(var(--fondo-rgb),1) 2%,rgba(var(--fondo-rgb),0) 34%)}
.portada-contenido{display:flex;flex-direction:column;gap:24px;padding-block:150px 54px;width:100%}
.portada h1 span{display:block}
.portada h1 .tenue{color:var(--cian-claro)}
.portada .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-video{display:inline-flex;align-items:center;gap:12px;border:0;background:none;color:var(--texto);font-weight:650;font-size:16px;cursor:pointer;padding:6px 10px 6px 6px;border-radius:999px}
.btn-video span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(var(--texto-rgb),.5);transition:background-color .2s,transform .3s var(--curva)}
.btn-video:hover span{background:rgba(var(--texto-rgb),.12);transform:scale(1.06)}
.btn-video svg{width:16px;height:16px;margin-left:3px}
.nota-portada{color:var(--suave);font-size:15px}
.nota-portada a{color:var(--texto)}
.portada .bajada{color:#C9D7E4;max-width:52ch}

/* Cinta de funciones */
.cinta{position:relative;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:rgba(var(--fondo-rgb),.72);backdrop-filter:blur(8px);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta-pista{display:flex;width:max-content;animation:cinta 48s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta span{display:flex;align-items:center;gap:22px;padding:16px 0 16px 22px;color:var(--suave);font-weight:600;font-size:15px;white-space:nowrap}
.cinta span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--rubro);transition:background-color .6s}
@keyframes cinta{to{transform:translateX(-50%)}}

/* Escena de venta sincronizada */
.escena-venta{overflow:hidden;isolation:isolate}
.escena-venta::before{content:"";position:absolute;inset:0 -20% auto;height:70%;z-index:-1;background:radial-gradient(ellipse at 70% 20%,var(--rubro-oscuro),transparent 62%);transition:background .8s}
.venta-grilla{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:start}
.venta-lado{position:sticky;top:96px;display:flex;flex-direction:column;gap:8px}
.fases{list-style:none;margin:0;padding:0;counter-reset:fase;display:flex;flex-direction:column;gap:6px}
.fases li{counter-increment:fase;position:relative;padding:14px 16px 14px 56px;border-radius:14px;border:1px solid transparent;transition:background-color .4s,border-color .4s,opacity .4s;opacity:.85}
.fases li::before{content:counter(fase);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:750;font-size:14px;background:var(--azul-3);color:var(--suave);transition:background-color .4s,color .4s}
.fases b{display:block;font-size:17px;font-stretch:106%;line-height:1.3}
.fases span{display:block;color:var(--suave);font-size:14.5px;margin-top:3px}
.fases li.activa{opacity:1;background:rgba(var(--sup-rgb),.8);border-color:var(--linea-fuerte)}
.fases li.activa::before{background:var(--rubro-solido);color:#fff}
.fases li.hecha{opacity:.93}
.fases li.hecha::before{background:var(--rubro-oscuro);color:var(--rubro)}
.venta-pantalla{position:relative;min-width:0}
.venta-pantalla .pos{box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 0 1px var(--linea-fuerte)}
.personaje-demo{position:absolute;left:-34px;bottom:44px;height:230px;width:120px;z-index:4;pointer-events:none}
.personaje-demo img{position:absolute;left:0;bottom:0;height:100%;width:auto;opacity:0;transform:translateY(30px) scale(.92);transition:opacity .5s,transform .7s var(--curva);filter:drop-shadow(0 20px 24px rgba(0,0,0,.5))}
.personaje-demo img.activo{opacity:1;transform:none;animation:respira 4.5s ease-in-out .7s infinite}
.personaje-demo.festeja img.activo{animation:salta .6s var(--curva) 2}
@keyframes respira{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1deg)}}
@keyframes salta{0%,100%{transform:translateY(0)}40%{transform:translateY(-26px) rotate(3deg)}}
.globo{position:absolute;left:92px;top:2px;white-space:nowrap;background:#fff;color:#1E7A4C;font-weight:750;font-size:14px;padding:8px 14px;border-radius:14px 14px 14px 4px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .3s,transform .4s var(--curva)}
.personaje-demo.festeja .globo{opacity:1;transform:none}

/* Antes / Ahora */
.antes-cabecera{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:end;margin-bottom:28px}
.antes-cabecera .cabecera{margin-bottom:0}
/* Las caras entran y salen de costado: el recorte horizontal evita desplazamiento lateral en celulares */
.antes-ahora{overflow-x:clip}
.antes-personaje{position:relative;margin:0;height:300px}
.antes-personaje img{position:absolute;right:0;bottom:0;height:100%;width:auto;transition:opacity .5s,transform .6s var(--curva);filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.antes-personaje .cara-antes{opacity:0;transform:translateX(-14px) rotate(-3deg)}
.antes-ahora[data-modo="antes"] .cara-antes{opacity:1;transform:none;animation:duda 2.6s ease-in-out infinite}
.antes-ahora[data-modo="antes"] .cara-ahora{opacity:0;transform:translateX(14px) rotate(3deg)}
.antes-ahora[data-modo="ahora"] .cara-ahora{animation:respira 4.5s ease-in-out infinite}
@keyframes duda{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.comparar{border-radius:22px;border:1px solid var(--linea-fuerte);background:var(--noche);overflow:hidden}
.comparar-switch{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--linea);background:var(--azul)}
.comparar-switch button{flex:1;min-height:46px;border-radius:12px;border:0;background:transparent;color:var(--suave);font-weight:700;font-size:16px;cursor:pointer;transition:background-color .3s,color .3s}
.comparar-switch button[aria-pressed="true"]{background:var(--rubro-solido);color:#fff}
.comparar-switch button[data-modo="antes"][aria-pressed="true"]{background:#5A2E2E}
.comparar-filas{margin:0}
.comparar-filas>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;padding:20px 28px;border-bottom:1px solid var(--linea);align-items:baseline}
.comparar-filas>div:last-child{border-bottom:0}
.comparar-filas dt{font-weight:750;font-size:17px;font-stretch:108%}
.comparar-filas dd{margin:0;grid-column:2;grid-row:1;font-size:17px;transition:opacity .35s,transform .45s var(--curva)}
.comparar-filas dd[data-antes]{color:#E7B4B0}
.comparar-filas dd[data-antes]::before{content:"✕ ";font-weight:800}
.comparar-filas dd[data-ahora]::before{content:"✓ ";font-weight:800;color:var(--rubro)}
.comparar[data-modo="ahora"] dd[data-antes],.comparar[data-modo="antes"] dd[data-ahora]{opacity:0;transform:translateY(8px);pointer-events:none}
.comparar-filas>div:nth-child(2) dd{transition-delay:.04s}.comparar-filas>div:nth-child(3) dd{transition-delay:.08s}.comparar-filas>div:nth-child(4) dd{transition-delay:.12s}.comparar-filas>div:nth-child(5) dd{transition-delay:.16s}.comparar-filas>div:nth-child(6) dd{transition-delay:.2s}

/* Tarjetas de rubro con personajes */
.tarjetas-rubro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tarjeta-rubro{--t:#285CBA;--t-osc:#17334E;position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,var(--t-osc) 0%,var(--azul) 62%);border:1px solid var(--linea);transition:transform .45s var(--curva),border-color .3s}
.tarjeta-rubro[data-tono="verduleria"]{--t:#257348;--t-osc:#153C2D}
.tarjeta-rubro[data-tono="carniceria"]{--t:#AD3F3D;--t-osc:#382A2B}
.tarjeta-rubro[data-tono="ferreteria"]{--t:#B85214;--t-osc:#25313B}
.tarjeta-rubro::before{content:"";position:absolute;left:50%;top:34px;width:62%;aspect-ratio:1;border-radius:50%;background:var(--t);opacity:.55;transform:translateX(-50%);filter:blur(2px);transition:transform .5s var(--curva),opacity .3s}
.tarjeta-rubro img{position:relative;height:250px;width:auto;margin:22px auto 0;filter:drop-shadow(0 16px 18px rgba(0,0,0,.45));transition:transform .5s var(--curva)}
.tarjeta-rubro>div{position:relative;padding:18px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.tarjeta-rubro h3{font-size:22px;font-stretch:112%}
.tarjeta-rubro p{color:var(--suave);font-size:15.5px;flex:1}
.tarjeta-rubro .enlace{background:none;border:0;border-bottom:1.5px solid rgba(95,214,245,.35);cursor:pointer;font-size:15px;align-self:flex-start;padding:0 0 1px}
.tarjeta-rubro:hover{transform:translateY(-6px);border-color:var(--linea-fuerte)}
.tarjeta-rubro:hover img{transform:translateY(-8px) rotate(-2deg) scale(1.03)}
.tarjeta-rubro:hover::before{transform:translateX(-50%) scale(1.08);opacity:.75}

/* Calculadora de plan */
.calculadora{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr);gap:20px;align-items:stretch;padding:26px;border-radius:20px;border:1px solid var(--linea-fuerte);background:linear-gradient(135deg,var(--azul-2),var(--noche));margin-bottom:26px}
.calc-campo{display:flex;flex-direction:column;gap:12px;min-width:0}
.calc-campo label{font-weight:700;font-size:16px}
.calc-campo output[data-calc-ventas-salida]{font-size:30px;font-weight:800;font-stretch:112%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-campo input[type=range]{width:100%;accent-color:var(--cian);height:28px;cursor:pointer}
.calc-marcas{display:flex;justify-content:space-between;color:var(--tenue);font-size:12.5px}
.calc-marcas i{font-style:normal}
.calc-paso{display:flex;align-items:center;gap:14px}
.calc-paso button{width:48px;height:48px;border-radius:14px;border:1px solid var(--linea-fuerte);background:var(--azul-3);font-size:24px;font-weight:600;cursor:pointer}
.calc-paso button:hover{border-color:var(--texto)}
.calc-paso output{font-size:30px;font-weight:800;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
.calc-resultado{display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-radius:16px;background:rgba(0,179,237,.1);border:1px solid rgba(0,179,237,.4)}
.calc-resultado span{color:var(--suave);font-size:14px}
.calc-resultado b{font-size:22px;font-stretch:112%}
.calc-resultado strong{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:6px}
.calc-resultado small{color:var(--suave)}
.calc-resultado em{font-style:normal;color:var(--suave);font-size:13.5px;margin-top:6px}
.plan.recomendado{border-color:var(--cian);box-shadow:0 0 0 3px rgba(0,179,237,.25),0 30px 60px -30px rgba(0,179,237,.4);transform:translateY(-6px)}
.plan.recomendado::after{content:"Recomendado para vos";position:absolute;top:-13px;right:22px;background:var(--texto);color:var(--noche);font-weight:740;font-size:13px;padding:4px 12px;border-radius:999px}

/* Preguntas frecuentes */
.faq-grilla{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border-radius:14px;border:1px solid var(--linea);background:var(--noche);transition:border-color .3s}
.faq details[open]{border-color:var(--linea-fuerte)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-weight:700;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--suave);border-bottom:2px solid var(--suave);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--curva)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{padding:0 20px 20px;color:var(--suave);max-width:62ch}

/* Cierre */
.cierre{padding-block:clamp(40px,6vw,80px) clamp(72px,9vw,120px)}
.cierre-caja{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.cierre-elenco{width:min(820px,100%);height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.5));margin-bottom:6px}
.cierre .bajada{margin:0 auto}
.cierre .ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cierre-elenco.visible{animation:elenco-entra 1s var(--curva) both}
@keyframes elenco-entra{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}

/* Responsive v2 */
@media (max-width:1080px){
  .venta-grilla{grid-template-columns:1fr}
  .venta-lado{position:static}
  .fases{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .fases li{flex:0 0 240px;scroll-snap-align:start;border-color:var(--linea)}
  .personaje-demo{left:-10px;height:170px;bottom:50px}
  .globo{left:66px}
  .tarjetas-rubro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calculadora{grid-template-columns:1fr 1fr}
  .calc-resultado{grid-column:1/-1}
}
@media (max-width:920px){
  .con-portada main{margin-top:-75px}
  .portada::after{background:linear-gradient(180deg,rgba(var(--fondo-rgb),.74) 0%,rgba(var(--fondo-rgb),.84) 40%,rgba(var(--fondo-rgb),1) 90%)}
  .portada-foto img{object-position:62% 40%}
  .antes-cabecera{grid-template-columns:1fr 150px}
  .antes-personaje{height:200px}
  .faq-grilla{grid-template-columns:1fr}
}
@media (max-width:600px){
  .portada{min-height:640px}
  .portada-contenido{padding-block:120px 36px}
  .portada .ctas .btn{flex:1 1 100%}
  .comparar-filas>div{grid-template-columns:1fr;gap:6px;padding:16px 18px}
  .comparar-filas dd{grid-column:1;grid-row:2}
  .tarjetas-rubro{grid-template-columns:1fr 1fr;gap:12px}
  .tarjeta-rubro img{height:170px}
  .tarjeta-rubro>div{padding:14px 14px 18px}
  .tarjeta-rubro p{font-size:14px}
  .calculadora{grid-template-columns:1fr;padding:20px}
  .antes-cabecera{grid-template-columns:1fr}
  .antes-personaje{height:180px;order:-1}
  .personaje-demo{left:-10px;height:170px;bottom:50px}
  .globo{left:66px}
}
@media (prefers-reduced-motion:reduce){
  .portada-foto img,.portada-luz,.cinta-pista,.personaje-demo img.activo{animation:none}
}

/* v2 · Suite: demo dentro de la notebook y personaje */
.notebook .marco .pos-en-marco{border-radius:6px;box-shadow:none}
.dispositivos{position:relative}
.dispositivos .notebook{width:92%}
.hero-personaje{position:absolute;right:-4%;bottom:-2%;height:78%;width:auto;z-index:3;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));animation:respira 4.5s ease-in-out infinite;pointer-events:none}
.hero-personaje.cambia{animation:cambia-personaje .45s var(--curva)}
.hero-personaje.festeja{animation:salta .6s var(--curva) 2}
@keyframes cambia-personaje{0%{transform:translateY(0);opacity:1}40%{transform:translateY(24px) scale(.92);opacity:0}100%{transform:none;opacity:1}}
.activar{position:relative;overflow:hidden}
.activar-elenco{position:absolute;right:12px;bottom:-34px;width:min(520px,48%);height:auto;opacity:.95;filter:drop-shadow(0 18px 20px rgba(0,0,0,.45));pointer-events:none}
/* Texto y botón a la izquierda; el elenco ocupa la derecha sin taparlos */
.activar{flex-direction:column;align-items:flex-start;justify-content:center;gap:22px}
.activar>div{position:relative;max-width:52%}
.activar>.btn{position:relative;z-index:2}

/* v2 · Industrial: escenario con personajes */
.escenario-personajes{position:relative;margin:0;aspect-ratio:4/3.4;max-width:100%;border-radius:var(--radio);background:
  linear-gradient(rgba(var(--linea-rgb),.05) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(var(--linea-rgb),.05) 1px,transparent 1px) 0 0/28px 28px,var(--azul);border:1px solid var(--linea-fuerte);overflow:hidden}
.escenario-circulo{position:absolute;left:50%;top:54%;width:64%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,179,237,.32),rgba(0,179,237,0) 68%)}
.escenario-personajes img{position:absolute;bottom:4%;height:66%;width:auto;filter:drop-shadow(0 20px 22px rgba(0,0,0,.5))}
.escenario-personajes .p-izq{left:17%;animation:respira 4.8s ease-in-out infinite}
.escenario-personajes .p-der{right:16%;animation:respira 5.4s ease-in-out .8s infinite}
@media (max-width:920px){
  .hero-personaje{height:62%;right:0}
  .activar>div{max-width:none}
  .activar-elenco{position:relative;right:auto;bottom:auto;width:100%;margin:-10px 0 4px;order:-1}
}
@media (prefers-reduced-motion:reduce){
  .hero-personaje,.escenario-personajes img{animation:none}
}
.claro .herramienta .icono,.claro .funcion .icono{color:var(--rubro-solido)}
.claro .comparar-filas dd[data-ahora]::before,.claro .confianza svg{color:var(--rubro-solido)}
.escena-venta::before,.vitrina::before{opacity:.6}
/* Menos azul en fotos nocturnas y brillos */
.hero-fotos img,.banda-foto>img{filter:saturate(.72) sepia(.08)}
.suite-hero::before{opacity:.5}
.activar{background:linear-gradient(120deg,var(--azul-3),var(--azul-2))}
.venta-grilla>*{min-width:0}
@media (max-width:600px){.personaje-demo{display:none}}

/* =====================================================================
   Diálogos de los personajes (colores fijos: se leen en fondo claro u oscuro)
   ===================================================================== */
.habla,.globo,.globo-antes{--b-fondo:#FFFFFF;--b-texto:#1A1917;
  position:absolute;margin:0;background:var(--b-fondo);color:var(--b-texto);font-family:var(--fuente);font-weight:620;font-size:15px;line-height:1.35;
  padding:11px 15px;border-radius:16px;box-shadow:0 1px 0 rgba(0,0,0,.06),0 14px 34px -14px rgba(0,0,0,.55);border:1px solid rgba(0,0,0,.06);
  opacity:0;transform:translateY(8px) scale(.94);transition:opacity .28s ease,transform .38s var(--curva);pointer-events:none;z-index:5;text-wrap:pretty}
.habla.visible,.globo.visible,.globo-antes.visible{opacity:1;transform:none}
/* colita */
.habla::after,.globo::after,.globo-antes::after{content:"";position:absolute;width:16px;height:16px;background:var(--b-fondo);border-right:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06);transform:rotate(45deg)}
/* puntos de "escribiendo…" */
.escribiendo{display:inline-flex;gap:5px;padding:4px 2px}
.escribiendo i{width:7px;height:7px;border-radius:50%;background:#8D867D;animation:punto 1s ease-in-out infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
/* quien habla */
.habla-izq{left:5%;top:5%;max-width:50%;transform-origin:20% 100%}
.habla-izq::after{left:24%;bottom:-8px}
.habla-der{right:5%;top:5%;max-width:50%;transform-origin:80% 100%}
.habla-der::after{right:24%;bottom:-8px}
.escenario-personajes img.hablando{filter:drop-shadow(0 20px 22px rgba(0,0,0,.5)) brightness(1.05)}
.escenario-personajes img{transition:filter .3s}

/* Globo del personaje de la demo de venta */
.globo{left:84px;top:-6px;width:max-content;max-width:230px;white-space:normal;font-size:14px;border-radius:16px}
.globo::after{left:-7px;bottom:16px;transform:rotate(135deg)}
.globo.ok{--b-fondo:#1E7A4C;--b-texto:#fff;border-color:transparent}
.globo.ok::after{border-color:transparent}
.personaje-demo.festeja .globo{opacity:1;transform:none}

/* Globo del antes / ahora */
.globo-antes{right:62%;top:4%;width:max-content;max-width:240px;font-size:14.5px}
.globo-antes::after{right:-7px;bottom:18px;transform:rotate(-45deg)}
.antes-ahora[data-modo="antes"] .globo-antes{--b-fondo:#FFF4F2;--b-texto:#8A2D27;border-color:#F2D3CF}
.antes-ahora[data-modo="antes"] .globo-antes::after{border-color:#F2D3CF}

@media (max-width:600px){
  .habla{font-size:13.5px;padding:9px 12px;max-width:58%}
  .globo-antes{right:auto;left:0;top:-2%;max-width:62%;font-size:13.5px}
  .globo-antes::after{right:auto;left:auto;right:18px;bottom:-7px;transform:rotate(45deg)}
}
@media (prefers-reduced-motion:reduce){.escribiendo i{animation:none;opacity:.7}}
@media (max-width:1080px){.globo{left:60px;max-width:190px}}
.globo.globo-hero{left:auto;right:12%;top:auto;bottom:66%;z-index:4}
.globo.globo-hero::after{left:auto;right:18px;bottom:-7px;transform:rotate(45deg)}
.hero-personaje.festeja ~ .globo-hero{opacity:1;transform:none}
@media (max-width:600px){.globo.globo-hero{right:4%;bottom:70%;max-width:170px;font-size:13px}}

/* =====================================================================
   Encabezado · menús desplegables (hover en computadora, toque en celular)
   ===================================================================== */
.dd{position:relative}
.dd-cabeza{display:flex;align-items:center}
.dd .nav-link{padding-right:6px!important}
.dd-boton{display:inline-grid;place-items:center;width:28px;height:34px;margin-left:-4px;border:0;background:none;color:var(--suave);cursor:pointer;border-radius:8px}
.dd-boton:hover{color:var(--texto)}
.dd-boton .chev{width:16px;height:16px;transition:transform .3s var(--curva)}
.dd.abierto>.dd-cabeza .chev{transform:rotate(180deg)}
.dd.is-actual>.dd-cabeza .nav-link{color:var(--texto);background:var(--azul-3)}
.dd-panel{position:absolute;top:calc(100% + 12px);left:50%;z-index:60;width:600px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:10px;padding:10px;
  background:var(--azul);border:1px solid var(--linea-fuerte);border-radius:20px;box-shadow:0 30px 70px -24px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translate(-50%,10px) scale(.98);transform-origin:50% 0;transition:opacity .2s ease,transform .3s var(--curva),visibility 0s linear .3s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}  /* puente para no perder el hover */
.dd-panel::after{content:"";position:absolute;top:-7px;left:calc(50% - 7px);width:14px;height:14px;background:var(--azul);border-left:1px solid var(--linea-fuerte);border-top:1px solid var(--linea-fuerte);transform:rotate(45deg)}
.dd.abierto>.dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .35s var(--curva),visibility 0s}
.dd-destacado{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:236px;padding:16px;border-radius:14px;text-decoration:none;color:var(--texto);
  background:linear-gradient(160deg,var(--rubro-oscuro),var(--azul-2) 75%);isolation:isolate;transition:transform .3s var(--curva)}
.dd-destacado[data-tono="industrial"]{background:linear-gradient(160deg,#2B3A44,var(--azul-2) 75%)}
.dd-destacado img{position:absolute;right:-8px;top:8px;height:58%;width:auto;z-index:-1;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));transition:transform .45s var(--curva)}
.dd-destacado small{display:block;color:var(--suave);font-size:12px;font-weight:600}
.dd-destacado b{display:block;font-size:19px;font-stretch:110%;margin:2px 0 4px}
.dd-destacado>span>span{display:block;color:var(--suave);font-size:13.5px;line-height:1.4}
.dd-destacado em{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-style:normal;font-weight:700;font-size:13.5px;color:var(--cian-claro)}
.dd-destacado .ir{width:15px;height:15px;transition:transform .25s var(--curva)}
.dd-destacado:hover img{transform:translateY(-6px) rotate(-3deg)}
.dd-destacado:hover .ir{transform:translateX(3px)}
.dd-lista{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.dd-item{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;padding:11px 12px;border-radius:12px;text-decoration:none;color:var(--texto);background:none;border:0;width:100%;text-align:left;cursor:pointer;font:inherit;transition:background-color .2s}
.dd-item:hover,.dd-item:focus-visible{background:var(--azul-2)}
.dd-item b{display:block;font-size:15px;font-weight:700}
.dd-item small{display:block;color:var(--suave);font-size:13px;line-height:1.35;margin-top:1px}
.dd-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--azul-3);color:var(--cian-claro);transition:transform .25s var(--curva)}
.dd-ico svg{width:19px;height:19px}
.dd-item:hover .dd-ico{transform:scale(1.06)}
.dd.abierto .dd-item{animation:dd-entra .35s var(--curva) both}
.dd.abierto .dd-item:nth-child(2){animation-delay:.04s}.dd.abierto .dd-item:nth-child(3){animation-delay:.08s}.dd.abierto .dd-item:nth-child(4){animation-delay:.12s}.dd.abierto .dd-item:nth-child(5){animation-delay:.16s}
@keyframes dd-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav-cuenta{display:flex;align-items:center;gap:8px}
.nav-cuenta .btn{margin-left:0}
.btn-panel{gap:8px}
.btn-panel .dd-ico{width:auto;height:auto;background:none;color:inherit}
.btn-panel .dd-ico svg{width:16px;height:16px}
.dd-perfil{width:auto;height:44px;display:flex;align-items:center;gap:10px;padding:0 10px 0 4px;border-radius:999px;margin-left:0;color:var(--texto)}
.dd-perfil:hover{background:var(--azul-2)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cian);color:var(--sobre-cian);font-weight:800;font-size:13px}
.perfil-texto{display:flex;flex-direction:column;text-align:left;line-height:1.15}
.perfil-texto b{font-size:14px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perfil-texto small{font-size:12px;color:var(--suave)}
.dd-panel.dd-panel-cuenta{left:auto;right:0;width:310px;grid-template-columns:1fr;gap:2px;transform:translateY(10px) scale(.98);transform-origin:100% 0}
.dd.abierto>.dd-panel.dd-panel-cuenta{transform:none}
.dd-panel-cuenta::after{left:auto;right:28px}
.dd-salir{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--linea)}
.dd-salir .dd-ico{color:#E7958F}

@media (max-width:1080px){
  /* Bloqueo del fondo en el body: en <html> convertiría al body en su propio contenedor de scroll y el encabezado
     fijo (sticky) se iría de pantalla al abrir el menú con la página desplazada. */
  html.menu-abierto body{overflow:hidden}
  .nav{position:fixed;top:calc(74px + env(safe-area-inset-top,0px));bottom:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;gap:2px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
    background:var(--noche);border-top:1px solid var(--linea)}
  .nav.abierto{display:flex;animation:menu-baja .35s var(--curva)}
  @keyframes menu-baja{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .nav .nav-link{font-size:19px;font-weight:700;color:var(--texto);padding:14px 6px;border-radius:12px}
  .nav .nav-link[aria-current="page"],.dd.is-actual>.dd-cabeza .nav-link{background:none;color:var(--cian-claro)}
  .dd{border-bottom:1px solid var(--linea)}
  .dd-cabeza{justify-content:space-between}
  .dd .nav-link{flex:1}
  .dd-boton{width:48px;height:48px;border-radius:12px;background:var(--azul-2);color:var(--texto)}
  .dd-boton .chev{width:20px;height:20px}
  .dd-panel,.dd-panel.dd-panel-cuenta{position:static;width:auto;display:none;grid-template-columns:1fr;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:none;padding:0 0 14px;transition:none}
  .dd-panel::before,.dd-panel::after{display:none}
  .dd.abierto>.dd-panel{display:grid;transform:none;animation:menu-baja .3s var(--curva)}
  .dd-destacado{min-height:0;padding:16px 120px 16px 16px}
  .dd-destacado img{height:120%;top:auto;bottom:-30%;right:6px}
  .dd-item{padding:10px 6px}
  .nav>.nav-link{border-bottom:1px solid var(--linea);border-radius:0}
  .nav-cuenta{flex-direction:column;align-items:stretch;gap:10px;margin-top:18px}
  .nav-cuenta .btn{width:100%;min-height:50px;font-size:16px}
  .nav-cuenta>.nav-link{text-align:center;border:1px solid var(--linea-fuerte);border-radius:999px!important;padding:13px!important;font-size:16px!important}
  .dd-cuenta{border:1px solid var(--linea);border-radius:16px;padding:4px 8px}
  .dd-perfil{width:100%;justify-content:flex-start;height:56px}
  .dd-perfil .chev{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){.dd-panel,.dd.abierto .dd-item,.nav.abierto{transition:none;animation:none}}
.nav .btn-borde{color:var(--texto)}
.nav .btn-borde:hover{color:var(--texto)}

/* =====================================================================
   Integración con el programa: avisos, modo local y navegación de cuenta
   ===================================================================== */
.local-banner{background:#5A4300;color:#FFF3C4;text-align:center;font-size:13.5px;font-weight:650;padding:6px 16px}
.aviso-flash{max-width:var(--ancho);margin:16px auto 0;padding:0 max(20px,env(safe-area-inset-left,0px))}
.aviso-flash .notice{border-radius:12px;padding:12px 16px;font-weight:600;background:rgba(31,164,99,.14);border:1px solid rgba(31,164,99,.45);color:var(--texto)}
.sitio-publico .account-module-nav[hidden]{display:none!important}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;max-width:min(560px,calc(100% - 32px));padding:12px 18px;border-radius:12px;background:#1C1B19;color:#F3F0EB;border:1px solid rgba(235,226,212,.26);box-shadow:0 20px 50px -20px rgba(0,0,0,.7);font-weight:600}
.sin-suite{padding-block:clamp(56px,8vw,96px)}
.sin-suite p{color:var(--suave);font-size:18px}
.nota-guia{display:inline-flex;align-items:center;gap:8px;color:var(--texto);font-weight:650;text-decoration:none;border-bottom:1.5px solid rgba(var(--linea-rgb),.35)}
.nota-guia:hover{border-color:var(--texto)}
.cierre .acciones-suite{width:min(980px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;border:0;background:none;text-align:left;margin-top:8px}
@media (max-width:650px){.cierre .acciones-suite{grid-template-columns:1fr}}
.contador-perfil{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--cian);color:var(--sobre-cian);font-size:12px;font-weight:800;margin-left:6px}
.bloque{display:block}
.suite-hero-lado{display:flex;flex-direction:column;gap:28px;min-width:0}
.suite-hero .acciones-suite{padding:0;border:0;background:none}
.dd-titulo{display:block;padding:12px 12px 4px;color:var(--tenue);font-size:11.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--linea);margin-top:4px}
.dd-item.dd-item-simple{grid-template-columns:minmax(0,1fr);padding:8px 12px}
.dd-item.dd-item-simple b{font-weight:600;font-size:14.5px}
.dd-panel.dd-panel-cuenta{max-height:min(78vh,640px);overflow-y:auto}
.plan .precio.sin-precio strong{font-size:clamp(24px,2.4vw,30px)}
.calc-etiqueta{font-weight:700;font-size:16px}
.plan dd strong{font-weight:inherit}

/* Visor del video de la prueba (static/r19/commercial-video.js): pantalla completa, paleta grafito */
.suite-video-viewer{position:fixed;inset:0;width:100vw;width:100dvw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0E0D0C;color:#F3F0EB;overflow:hidden}
.suite-video-viewer[open]{display:flex;flex-direction:column}
.suite-video-viewer::backdrop{background:#0E0D0C}
.suite-video-screen{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;height:100%;background:#0E0D0C}
.suite-video-viewer header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left));flex:0 0 auto;background:#1C1B19;border-bottom:1px solid rgba(235,226,212,.12)}
.suite-video-viewer h2{margin:0;font-size:18px;line-height:1.3;color:#F3F0EB}
.suite-video-viewer header small{display:block;margin-top:4px;color:#BDB6AC;font-size:13px}
.suite-video-viewer button{min-height:44px;border:1px solid rgba(235,226,212,.3);border-radius:999px;background:#2A2825;color:#F3F0EB;padding:10px 18px;cursor:pointer;font:700 14px/1.3 var(--fuente)}
.suite-video-viewer button:hover{background:#353230}
.suite-video-stage{display:flex;flex:1;min-height:0;justify-content:center;align-items:center;padding:0 max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.suite-video-viewer .suite-video-stage video{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;background:#0E0D0C;border:0;border-radius:0}
.suite-video-viewer .suite-video-status{padding:0 20px;margin:8px 0 12px;font-size:14px;color:#D9D3CA}
.suite-video-status:empty{display:none}
html.suite-video-open{overflow:hidden}
@media (max-width:650px){.suite-video-viewer h2{font-size:16px}.suite-video-viewer header{padding-left:14px;padding-right:14px}}

/* =====================================================================
   Tema claro / oscuro · el sol pone el sitio claro y la luna lo vuelve oscuro.
   static/sitio/tema.js fija html[data-tema] antes de pintar; sitio.js maneja el interruptor.
   ===================================================================== */
.tema{--tema-boton:36px;--tema-alto:34px;position:relative;display:inline-flex;align-items:center;flex:none;padding:3px;border-radius:999px;border:1px solid var(--linea-fuerte);background:rgba(var(--texto-rgb),.05)}
html:not([data-tema]) .tema{display:none}  /* sin JavaScript no puede cambiar: no se ofrece */
.tema-opcion{position:relative;z-index:1;width:var(--tema-boton);height:var(--tema-alto);display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:none;color:var(--tenue);cursor:pointer;transition:color .3s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tema-opcion:hover{color:var(--texto)}
.tema-opcion:focus-visible{outline-offset:1px}
.tema-opcion svg{width:19px;height:19px;overflow:visible;pointer-events:none}
.tema-perilla{position:absolute;left:3px;top:3px;width:var(--tema-boton);height:var(--tema-alto);border-radius:999px;pointer-events:none;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
/* Dos discos apilados: el sol abajo y la luna arriba. Al pasar a oscuro la luna lo cubre desde una esquina
   (un eclipse); al pasar a claro se retira y deja ver el sol. Sin mezclar colores a mitad de camino. */
.tema-perilla::before,.tema-perilla::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tema-perilla::before{background:radial-gradient(circle at 34% 30%,#FFF3C9 0%,#FFD66B 46%,#F2AE1C 100%);box-shadow:0 2px 10px -2px rgba(222,140,0,.6),inset 0 -2px 4px rgba(176,96,0,.2);transition:box-shadow .35s ease,opacity 0s}
.tema-perilla::after{background:linear-gradient(150deg,#4A4540,#24211E);box-shadow:0 2px 8px -2px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.12);clip-path:circle(46px at 85% 15%);transition:clip-path .46s cubic-bezier(.4,0,.2,1),opacity 0s}
html[data-tema="claro"] .tema-perilla::after{clip-path:circle(0px at 85% 15%);opacity:0;transition:clip-path .46s cubic-bezier(.4,0,.2,1),opacity 0s linear .46s}
html[data-tema="oscuro"] .tema-perilla::before{opacity:0;box-shadow:0 2px 10px -2px rgba(222,140,0,0),inset 0 -2px 4px rgba(176,96,0,0);transition:box-shadow .3s ease,opacity 0s linear .46s}
html[data-tema="oscuro"] .tema-perilla{transform:translateX(var(--tema-boton))}
html[data-tema="claro"] .tema-opcion[data-tema-elegir="claro"]{color:#7A4100}
html[data-tema="oscuro"] .tema-opcion[data-tema-elegir="oscuro"]{color:#F7E9C2}
.tema-rayos{transform-box:view-box;transform-origin:50% 50%}
.tema-estrella{transform-box:fill-box;transform-origin:50% 50%}
/* Al tocar: la perilla se estira apenas en el viaje, el sol gira y abre sus rayos, la luna se mece y titila una estrella */
.tema.anima .tema-perilla::before,.tema.anima .tema-perilla::after{animation:perilla-estira .5s cubic-bezier(.3,.7,.4,1)}
html[data-tema="oscuro"] .tema.anima .tema-perilla::before,html[data-tema="oscuro"] .tema.anima .tema-perilla::after{transform-origin:0 50%}
html[data-tema="claro"] .tema.anima .tema-perilla::before,html[data-tema="claro"] .tema.anima .tema-perilla::after{transform-origin:100% 50%}
@keyframes perilla-estira{0%{transform:none}28%{transform:scale(1.16,.92)}62%{transform:scale(.98,1.02)}100%{transform:none}}
html[data-tema="claro"] .tema.anima .tema-sol{animation:sol-sale .7s cubic-bezier(.3,1.5,.5,1)}
html[data-tema="claro"] .tema.anima .tema-rayos{animation:rayos-abren .9s cubic-bezier(.2,.9,.3,1)}
html[data-tema="oscuro"] .tema.anima .tema-luna{animation:luna-mece .8s cubic-bezier(.3,1.4,.5,1)}
html[data-tema="oscuro"] .tema.anima .tema-estrella{animation:estrella-titila .9s ease .2s both}
@keyframes sol-sale{from{transform:scale(.45) rotate(-70deg)}to{transform:none}}
@keyframes rayos-abren{from{transform:rotate(-120deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes luna-mece{0%{transform:rotate(-80deg) scale(.5)}60%{transform:rotate(14deg) scale(1.08)}100%{transform:none}}
@keyframes estrella-titila{0%{transform:scale(0);opacity:0}55%{transform:scale(1.6) rotate(45deg);opacity:1}100%{transform:none;opacity:1}}
/* Lugar en el encabezado: a la derecha en computadora; junto al botón del menú en celulares */
@media (min-width:1081px) and (max-width:1199px){
  .encabezado .envoltura{gap:16px}
  .nav .nav-link{padding:9px 11px}
  .perfil-texto{display:none}
  .dd-perfil{padding-right:8px}
}
@media (max-width:1080px){
  .encabezado .envoltura{gap:10px}
  .tema{order:2;margin-left:auto;--tema-alto:38px}
  .menu-boton{order:3;margin-left:0}
}
@media (max-width:400px){
  .encabezado .envoltura{gap:8px}
  .marca b{font-size:18px}
  .menu-boton{width:44px;height:44px}
}
@media (max-width:359px){
  /* Pantallas muy angostas: se ve solo el tema actual y tocarlo pasa al otro */
  html[data-tema="claro"] .tema-opcion[data-tema-elegir="oscuro"],html[data-tema="oscuro"] .tema-opcion[data-tema-elegir="claro"]{display:none}
  html[data-tema] .tema-perilla{transform:none}
}
/* Cambio de tema: la página nueva se revela en círculo desde el interruptor (View Transitions, sitio.js) */
html.tema-revelando::view-transition-old(root),html.tema-revelando::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.tema-revelando::view-transition-new(root){z-index:2}
/* Contraste forzado (Windows): sin fondos de color, el tema elegido se marca con un borde del sistema */
@media (forced-colors:active){.tema-perilla{display:none}.tema-opcion[aria-pressed="true"]{border:2px solid Highlight}}

/* ---------- Tema claro: mismos componentes con tokens claros ---------- */
html[data-tema="claro"]{color-scheme:light;
  --fondo-rgb:250,249,246;--sup-rgb:255,255,255;--linea-rgb:40,34,28;--texto-rgb:26,25,23;
  --noche:#FAF9F6;--azul:#FFFFFF;--azul-2:#F1EFEA;--azul-3:#E8E5DF;
  --texto:#1A1917;--suave:#56524C;--tenue:#6B665E;--cian-claro:#036D97;--cian-hover:#38C5F3;
  --linea:rgba(var(--linea-rgb),.12);--linea-fuerte:rgba(var(--linea-rgb),.22);
  --rubro:#0A7FAD;--rubro-solido:#0A7FAD;--rubro-oscuro:#DDEFF6}
html[data-tema="claro"] [data-rubro="almacen"]{--rubro:#285CBA;--rubro-oscuro:#DCE6F8}
html[data-tema="claro"] [data-rubro="verduleria"]{--rubro:#257348;--rubro-oscuro:#DAEFE2}
html[data-tema="claro"] [data-rubro="carniceria"]{--rubro:#AD3F3D;--rubro-oscuro:#F6E0DF}
html[data-tema="claro"] [data-rubro="ferreteria"]{--rubro:#B85214;--rubro-oscuro:#F8E4D4}
/* Las franjas que en oscuro son claras pasan a un tono apenas más hondo para mantener el ritmo */
html[data-tema="claro"] .claro{--fondo-rgb:239,236,230;--noche:#EFECE6;--azul-2:#E7E3DC;--azul-3:#DFDAD2;background:var(--noche)}
/* Portada y héroes con foto: en claro el velo cubre un poco más, para que el texto oscuro no quede sobre la foto */
html[data-tema="claro"] .portada .bajada{color:#3F3B36}
html[data-tema="claro"] .hero .bajada{color:#3F3B36}
@media (min-width:921px){
  html[data-tema="claro"] .area-industrial .hero::after{background:
    linear-gradient(90deg,rgba(var(--fondo-rgb),.97) 0%,rgba(var(--fondo-rgb),.9) 34%,rgba(var(--fondo-rgb),.5) 62%,rgba(var(--fondo-rgb),.28) 100%),
    linear-gradient(0deg,rgba(var(--fondo-rgb),1) 0%,rgba(var(--fondo-rgb),0) 30%)}
}
html[data-tema="claro"] .con-portada .encabezado:not(.con-fondo)::before{background:linear-gradient(180deg,rgba(var(--fondo-rgb),.96),rgba(var(--fondo-rgb),.74))}
html[data-tema="claro"] .portada::after{background:
  linear-gradient(90deg,rgba(var(--fondo-rgb),.97) 0%,rgba(var(--fondo-rgb),.9) 36%,rgba(var(--fondo-rgb),.5) 58%,rgba(var(--fondo-rgb),.1) 80%,rgba(var(--fondo-rgb),0) 100%),
  linear-gradient(0deg,rgba(var(--fondo-rgb),1) 2%,rgba(var(--fondo-rgb),0) 34%)}
@media (max-width:920px){
  html[data-tema="claro"] .portada::after{background:linear-gradient(180deg,rgba(var(--fondo-rgb),.74) 0%,rgba(var(--fondo-rgb),.86) 40%,rgba(var(--fondo-rgb),1) 88%)}
  html[data-tema="claro"] .hero::after,html[data-tema="claro"] .area-industrial .hero::after{background:linear-gradient(180deg,rgba(var(--fondo-rgb),.78) 0%,rgba(var(--fondo-rgb),.92) 55%,rgba(var(--fondo-rgb),1) 100%)}
}
html[data-tema="claro"] .enlace,.claro .enlace,html[data-tema="claro"] .tarjeta-rubro .enlace{border-bottom-color:rgba(3,109,151,.35)}
html[data-tema="claro"] .enlace:hover,.claro .enlace:hover{border-bottom-color:var(--cian-claro)}
html[data-tema="claro"] .zona rect{stroke:rgba(3,109,151,.35)}
html[data-tema="claro"] .zona:hover rect,html[data-tema="claro"] .zona:focus-visible rect{stroke:var(--cian-claro)}
html[data-tema="claro"] .zona.activa rect{stroke:var(--cian)}
html[data-tema="claro"] .barrido::before{background:linear-gradient(90deg,transparent,rgba(0,150,200,.08),transparent)}
html[data-tema="claro"] .portada-luz{opacity:.35}
html[data-tema="claro"] .tarjeta-rubro{--t-osc:#DCE6F8}
html[data-tema="claro"] .tarjeta-rubro[data-tono="verduleria"]{--t-osc:#DAEFE2}
html[data-tema="claro"] .tarjeta-rubro[data-tono="carniceria"]{--t-osc:#F6E0DF}
html[data-tema="claro"] .tarjeta-rubro[data-tono="ferreteria"]{--t-osc:#F8E4D4}
html[data-tema="claro"] .dd-destacado[data-tono="industrial"]{background:linear-gradient(160deg,#DCE4E9,var(--azul-2) 75%)}
html[data-tema="claro"] .dd-salir .dd-ico{color:#B4443D}
html[data-tema="claro"] .pos-control button:hover{color:var(--texto);border-color:var(--texto)}
/* Sombras: en fondo claro, más cortas y de tono cálido */
html[data-tema="claro"] .venta-pantalla .pos{box-shadow:0 40px 80px -42px rgba(60,46,30,.38),0 0 0 1px var(--linea-fuerte)}
html[data-tema="claro"] .notebook .marco{box-shadow:0 46px 90px -50px rgba(60,46,30,.5),0 0 0 1px rgba(0,0,0,.4) inset}
html[data-tema="claro"] .video-tarjeta{box-shadow:0 30px 60px -36px rgba(60,46,30,.38)}
html[data-tema="claro"] .dd-panel{box-shadow:0 24px 60px -26px rgba(60,46,30,.38)}
html[data-tema="claro"] .flotante{box-shadow:0 14px 30px -16px rgba(60,46,30,.4)}
html[data-tema="claro"] .ticket{box-shadow:0 24px 50px -30px rgba(60,46,30,.42)}
html[data-tema="claro"] .dispositivos .telefono{box-shadow:0 26px 50px -24px rgba(60,46,30,.5)}
html[data-tema="claro"] .plan.recomendado{box-shadow:0 0 0 3px rgba(0,179,237,.25),0 24px 50px -30px rgba(0,110,160,.35)}
html[data-tema="claro"] :is(.personaje-demo img,.antes-personaje img,.tarjeta-rubro img,.cierre-elenco,.hero-personaje,.activar-elenco,.escenario-personajes img,.dd-destacado img){filter:drop-shadow(0 14px 16px rgba(72,56,38,.24))}
/* Fotos y videos: el texto que va sobre la imagen sigue claro sobre sombra oscura en los dos temas */
.video-tarjeta .pantalla,.video-grande,.trio-fotos figure{--fondo-rgb:20,19,18;--texto-rgb:243,240,235;--texto:#F3F0EB;--suave:#B9B2A8;color:var(--texto)}

/* =====================================================================
   Modo liviano (html[data-liviano], lo decide tema.js): equipos de 1 GB de RAM, de 2 núcleos o con
   ahorro de datos. Se ve la misma información, sin desenfoques, sombras filtradas ni movimientos
   decorativos sin fin, y el navegador no dibuja las secciones que todavía no están en pantalla.
   ===================================================================== */
html[data-liviano] *,html[data-liviano] *::before,html[data-liviano] *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-liviano] .encabezado::before{background:rgba(var(--fondo-rgb),.97)}
html[data-liviano] .btn-borde{background:var(--azul)}
html[data-liviano] .escenas button.escena{background:rgba(var(--sup-rgb),.94)}
html[data-liviano] .cinta{background:var(--noche)}
html[data-liviano] .foto-recorte figcaption,html[data-liviano] .video-tarjeta .reproducir>span:last-child{background:rgba(var(--fondo-rgb),.94)}
html[data-liviano] .video-tarjeta .reproducir .circulo{background:rgba(var(--texto-rgb),.28)}
html[data-liviano] dialog.video-dialogo::backdrop{background:rgba(12,11,10,.92)}
html[data-liviano] :is(.personaje-demo img,.antes-personaje img,.tarjeta-rubro img,.cierre-elenco,.hero-personaje,.activar-elenco,.escenario-personajes img,.dd-destacado img,.hero-fotos img,.banda-foto>img,.pos-cursor){filter:none!important}
html[data-liviano] .tarjeta-rubro::before{filter:none}
html[data-liviano] .portada-luz,html[data-liviano] .barrido{display:none}
html[data-liviano] .portada-foto img{animation:none;will-change:auto}
html[data-liviano] :is(.cinta-pista,.personaje-demo img.activo,.antes-ahora .cara-antes,.antes-ahora .cara-ahora,.hero-personaje,.escenario-personajes img,.dispositivos .telefono,.recorrido,.pos-control .pos-punto,.pos-estado-peso,.hero-fotos img.activa){animation:none!important}
html[data-liviano] .pos-estado-peso::before,html[data-liviano] .pos-cobrar:not(:disabled){animation:none}
html[data-liviano] .flotante.visible{animation:none;opacity:1;transform:none}
html[data-liviano] main>.seccion{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---------- Planes: pago mensual o anual, con el almacenero y su chanchito ----------
   El ciclo elegido se refleja con :has() aun sin JavaScript; sitio.js agrega data-ciclo para los
   navegadores sin :has() y para las animaciones. Los precios de ambos ciclos llegan del servidor. */
.planes-ciclo{--ahorro:#5BD192;--ahorro-rgb:91,209,146;--moneda:#F5C451;--moneda-borde:#C98E14}
html[data-tema="claro"] .planes-ciclo{--ahorro:#1E7A4C;--ahorro-rgb:30,122,76}
.planes-ciclo:not(:has(#ciclo-anual:checked)) [data-solo-anual]{display:none!important}
.planes-ciclo:has(#ciclo-anual:checked) [data-solo-mensual]{display:none!important}
.planes-ciclo[data-ciclo="mensual"] [data-solo-anual]{display:none!important}
.planes-ciclo[data-ciclo="anual"] [data-solo-mensual]{display:none!important}

.planes-cabecera{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"texto personaje" "ciclo personaje";column-gap:40px;align-items:end;margin-bottom:clamp(28px,3.4vw,44px)}
.planes-texto{grid-area:texto;margin-bottom:24px}

/* Interruptor mensual / anual */
.ciclo{grid-area:ciclo;position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,440px);min-width:0;margin:0;padding:5px;border:1px solid var(--linea-fuerte);border-radius:999px;background:rgba(var(--sup-rgb),.6);justify-self:start}
.ciclo input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ciclo label{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 16px;border-radius:999px;font-weight:720;font-size:16.5px;color:var(--suave);cursor:pointer;white-space:nowrap;transition:color .3s}
.ciclo label:hover{color:var(--texto)}
.ciclo-perilla{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--cian);box-shadow:0 10px 24px -12px var(--cian);transition:transform .5s cubic-bezier(.34,1.4,.5,1)}
#ciclo-anual:checked~.ciclo-perilla{transform:translateX(100%)}
.ciclo input:checked+label,.ciclo input:checked+label:hover{color:var(--sobre-cian)}
.ciclo input:focus-visible+label{outline:2px solid var(--cian-claro);outline-offset:4px}
.ciclo-ahorro{padding:3px 9px;border-radius:999px;background:rgba(var(--ahorro-rgb),.17);color:var(--ahorro);font-size:13px;font-weight:780;transition:background-color .3s,color .3s}
#ciclo-anual:checked+label .ciclo-ahorro{background:rgba(4,18,30,.16);color:var(--sobre-cian)}

/* El almacenero, su globo y el chanchito */
.planes-personaje{grid-area:personaje;position:relative;height:310px;pointer-events:none}
.planes-personaje .pose{position:absolute;bottom:6px;left:96px;height:262px;width:auto;opacity:0;transform:translateY(16px) scale(.94);transform-origin:50% 100%;transition:opacity .35s,transform .55s var(--curva);filter:drop-shadow(0 20px 24px rgba(0,0,0,.5))}
.planes-personaje .pose-festeja{left:88px}
.planes-personaje .pose.activa{opacity:1;transform:none}
.planes-personaje.respira .pose.activa{animation:respira 4.5s ease-in-out infinite}
.planes-personaje.festeja .pose.activa{animation:salta .6s var(--curva) 2}
.planes-globo{position:absolute;left:0;top:0;z-index:5;max-width:205px;margin:0;padding:10px 14px;border-radius:16px 16px 4px 16px;background:#FFFFFF;color:#1E7A4C;font-weight:750;font-size:14.5px;line-height:1.35;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);transform-origin:90% 100%}
.planes-globo.cambia{animation:globo-pop .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes globo-pop{0%{transform:scale(.86);opacity:.5}100%{transform:none;opacity:1}}
.chanchito{position:absolute;z-index:4;right:0;bottom:0;width:104px;height:auto;overflow:visible}
.ch-sombra{fill:rgba(0,0,0,.3)}
html[data-tema="claro"] .ch-sombra{fill:rgba(60,46,30,.16)}
.ch-cuerpo{fill:#F5AFC1}
.ch-brillo{fill:#FFFFFF;opacity:.24}
.ch-oreja{fill:#E8899F;stroke:#E8899F;stroke-width:8;stroke-linejoin:round}
.ch-pata{fill:#EE9BAF}
.ch-atras{fill:#D97C93}
.ch-cola{fill:none;stroke:#E8899F;stroke-width:6;stroke-linecap:round;transform-box:fill-box;transform-origin:0% 60%}
.ch-ranura{fill:#6B2A40}
.ch-mejilla{fill:#F1708F;opacity:.22;transition:opacity .4s}
.ch-pupila ellipse{fill:#2B1820}
.ch-luz{fill:#FFFFFF}
.ch-ojo{transform-box:fill-box;transform-origin:center;transition:opacity .2s}
.ch-pupila{transform:translate(var(--ox,0px),var(--oy,0px));transition:transform .25s ease-out}
.ch-ojo-feliz{fill:none;stroke:#2B1820;stroke-width:5;stroke-linecap:round;opacity:0;transition:opacity .2s}
.ch-hocico{fill:#EE93A9;stroke:#E07D96;stroke-width:2}
.ch-fosa{fill:#8E3B52}
.ch-boca{fill:none;stroke:#2B1820;stroke-width:3.5;stroke-linecap:round;transition:opacity .2s}
.ch-boca-feliz{fill:#8E3B52;opacity:0;transition:opacity .2s}
.ch-todo{transform-box:fill-box;transform-origin:50% 100%}
.ch-estrella{fill:var(--moneda);opacity:0;transform-box:fill-box;transform-origin:center}
.chanchito[data-humor="feliz"] .ch-ojo,.chanchito[data-humor="feliz"] .ch-boca{opacity:0}
.chanchito[data-humor="feliz"] .ch-ojo-feliz,.chanchito[data-humor="feliz"] .ch-boca-feliz{opacity:1}
.chanchito[data-humor="feliz"] .ch-mejilla{opacity:.85}
.chanchito.parpadea .ch-ojo{animation:parpadeo .2s ease-in-out}
.chanchito.traga .ch-todo{animation:traga .42s cubic-bezier(.3,1.5,.5,1)}
.planes-personaje.respira .ch-cola{animation:cola 3.4s ease-in-out infinite}
.planes-personaje.respira .chanchito[data-humor="feliz"] .ch-estrella{animation:brilla 1.8s ease-in-out infinite;animation-delay:calc(var(--i) * .45s)}
.planes-personaje.pausado,.planes-personaje.pausado *{animation-play-state:paused!important}
@keyframes parpadeo{50%{transform:scaleY(.12)}}
@keyframes traga{30%{transform:scale(1.09,.9)}62%{transform:scale(.96,1.06)}}
@keyframes cola{0%,72%,100%{transform:none}80%{transform:rotate(-16deg)}90%{transform:rotate(12deg)}}
@keyframes brilla{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.moneda-vuela,.moneda-vuela-y{position:absolute;left:0;top:0;z-index:3}
.moneda-vuela i{display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,var(--moneda) 55%,var(--moneda-borde));box-shadow:inset 0 0 0 2px var(--moneda-borde),0 6px 10px -4px rgba(0,0,0,.5);color:#7A4E00;font:800 12px/1 var(--fuente);font-style:normal}

/* Tarjetas: descuento, ahorro y sucursales del ciclo anual */
.plan-descuento{margin-left:auto;padding:5px 10px;border-radius:999px;background:rgba(var(--ahorro-rgb),.16);color:var(--ahorro);font-weight:780;font-size:14px;white-space:nowrap}
.plan .moneda s{color:var(--tenue)}
.plan-ahorro{margin:-8px 0 0;padding:10px 12px;border-radius:10px;background:rgba(var(--ahorro-rgb),.1);border:1px solid rgba(var(--ahorro-rgb),.3);font-size:14.5px;color:var(--suave)}
.plan-ahorro b{color:var(--ahorro)}
.planes-ciclo .plan .sucursal span:not(:first-child){color:var(--texto);font-size:15px}
.planes-ciclo.animando .plan :is([data-solo-anual],[data-solo-mensual]):not(.plan-descuento){animation:planes-entra .5s var(--curva) both;animation-delay:calc(var(--n,0) * 70ms)}
.planes-ciclo.animando .plan .plan-descuento{animation:planes-sello .6s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--n,0) * 70ms + 160ms)}
.planes-ciclo.animando :is([data-calc-total],[data-calc-periodo],[data-calc-detalle]){animation:planes-entra .5s var(--curva) both}
@keyframes planes-entra{from{opacity:0;transform:translateY(12px)}}
@keyframes planes-sello{from{opacity:0;transform:scale(.4) rotate(-14deg)}}

@media (max-width:1080px){
  .planes-cabecera{grid-template-columns:minmax(0,1fr) 280px;column-gap:24px}
  .planes-personaje{height:286px}
  .planes-personaje .pose{height:240px;left:80px}
  .planes-personaje .pose-festeja{left:72px}
  .chanchito{width:92px}
}
@media (max-width:700px){
  .planes-cabecera{grid-template-columns:minmax(0,1fr);grid-template-areas:"texto" "personaje" "ciclo"}
  .planes-texto{margin-bottom:6px}
  .planes-personaje{height:212px;width:100%;max-width:380px;justify-self:center}
  .planes-personaje .pose{height:190px;left:auto;right:84px}
  .planes-personaje .pose-festeja{right:80px}
  .planes-globo{top:14px;max-width:min(46%,190px);font-size:14px}
  .chanchito{width:78px}
  .ciclo{width:100%;margin-top:12px}
  .ciclo label{min-height:52px;padding:0 10px;font-size:15.5px}
}
@media (max-width:380px){
  .ciclo label{flex-direction:column;gap:3px;min-height:58px}
}
html[data-liviano] .planes-personaje .pose{filter:none!important}
html[data-liviano] .planes-personaje *{transition:none!important}
html[data-liviano] .planes-ciclo *,html[data-liviano] .planes-ciclo *::before{animation:none!important}
html[data-liviano] .ciclo-perilla{transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .planes-ciclo *{animation:none!important}
  .ciclo-perilla,.planes-personaje .pose{transition:none}
}

/* Sucursales sin cargo: el regalo de cada plan, a la vista (se configura en Facturación). */
.plan .sucursales-gratis{display:flex;align-items:center;gap:10px;margin:0;padding:11px 14px;border-radius:12px;background:linear-gradient(135deg,rgba(var(--ahorro-rgb,91,209,146),.2),rgba(var(--ahorro-rgb,91,209,146),.08));border:1px solid rgba(var(--ahorro-rgb,91,209,146),.45);color:var(--texto);font-size:15.5px;line-height:1.25}
.plan .sucursales-gratis svg{flex:none;width:22px;height:22px;color:var(--ahorro,#5BD192)}
.plan .sucursales-gratis b{font-weight:780;color:var(--ahorro,#5BD192)}
/* Tema claro: el verde de ahorro sobre su propio tinte daba 3,8:1. Este verde más profundo
   da al menos 5:1 sobre cualquier fondo claro de la tarjeta (WCAG AA pide 4,5:1). */
html[data-tema="claro"] .plan .sucursales-gratis b,html[data-tema="claro"] .plan .sucursales-gratis svg{color:#145A37}