/* WINSI · sitio público, versión 3 (17-19 oct 2026)
   ADN de las referencias que eligió Álvaro: Fin (objeto de marca enorme con conversaciones flotando, letra grande y ligera),
   ElevenLabs (el agente se prueba ahí mismo, orbes por agente), PolyAI (negro con partículas), Clay (paneles de color con su objeto),
   y de la versión preliminar del 14-oct: vino, sol oro-naranja-brasa, grano y los teléfonos.
   Radios: 28px paneles, 18px tarjetas, píldora para todo lo que se toca. */

@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/schibsted-normal-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-normal-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --oro: #FFC629; --oro-hover: #F0B30A; --tinta: #141413; --oro-texto: #7A5A00; --resalte: #FFE08A;
  --naranja: #FF8A1E; --brasa: #F2542D; --vino: #3A0B0C; --vino-2: #52100F; --noche: #1A0807;
  --hueso: #FFFBF4; --crema: #FFF8E8; --papel: #F6F0E4;
  --texto: #141413; --texto-2: #5E5546; --linea: rgba(20, 20, 19, .12);
  --display: "Schibsted Grotesk", "Hanken Grotesk", ui-sans-serif, sans-serif;
  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ancho: 1260px; --margen: clamp(20px, 5vw, 64px); --nav: 68px;
  --sale: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 12px); scrollbar-color: #C9A97A var(--hueso); }
body { font-family: var(--sans); font-size: 18px; line-height: 1.55; color: var(--texto); background: var(--hueso); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--oro); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 8px; }
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--hueso); }
::-webkit-scrollbar-thumb { background: #D6BF98; border-radius: 99px; border: 3px solid var(--hueso); }
.i { width: 22px; height: 22px; flex: none; fill: currentColor; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: var(--hueso); padding: 10px 16px; border-radius: 99px; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--oro); color: var(--tinta); font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap; transition: background .25s, transform .25s var(--sale), box-shadow .25s; }
.boton:hover { background: var(--oro-hover); transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(255, 150, 20, .6); }
.boton:active { transform: translateY(1px) scale(.985); }
.boton .i { width: 20px; height: 20px; }
.boton-claro { background: rgba(255, 248, 232, .1); color: var(--crema); box-shadow: inset 0 0 0 1.5px rgba(255, 248, 232, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.boton-claro:hover { background: rgba(255, 248, 232, .18); box-shadow: inset 0 0 0 1.5px var(--crema); }
.boton-linea { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(20, 20, 19, .28); }
.boton-linea:hover { background: rgba(20, 20, 19, .05); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.boton-chico { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* ---------- Navegación ---------- */
.centinela { position: absolute; top: 0; height: 40px; width: 1px; }
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav); transition: background .35s, box-shadow .35s, color .35s; color: var(--tinta); }
.nav.sobre-oscuro { color: var(--crema); }
.nav.solida { background: rgba(255, 251, 244, .82); color: var(--tinta); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--linea); }
.nav-in { max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 var(--margen); display: flex; align-items: center; gap: 32px; }
.logo-svg { height: 26px; width: auto; overflow: visible; }
.logo-w { stroke: var(--oro); }
.js .nav .logo-w { stroke-dasharray: 400; stroke-dashoffset: 400; animation: traza .7s cubic-bezier(.65, 0, .35, 1) .2s forwards; }
@keyframes traza { to { stroke-dashoffset: 0; } }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 15.5px; font-weight: 600; }
.nav-links a { text-decoration: none; opacity: .78; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }

/* ---------- Comunes ---------- */
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.centro { text-align: center; } .centro .titulo, .centro .entrada { margin-left: auto; margin-right: auto; }
.titulo { font-size: clamp(40px, 5.4vw, 80px); line-height: .98; max-width: 16ch; }
.entrada { margin-top: 22px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: var(--texto-2); max-width: 52ch; }
.oscuro { color: var(--crema); }
.oscuro .entrada { color: rgba(255, 240, 220, .78); }
section { position: relative; }

/* ---------- Sol (de la preliminar) ---------- */
.sol { position: absolute; left: 62%; top: 52%; width: 110vmax; height: 110vmax; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 120, .55) 0%, rgba(255, 138, 30, .45) 12%, rgba(242, 84, 45, .32) 24%, rgba(82, 16, 15, 0) 46%); filter: blur(8px); }

/* ---------- Hero ---------- */
.hero { min-height: max(100svh, 760px); background: radial-gradient(120% 90% at 70% 40%, var(--vino-2) 0%, var(--vino) 38%, var(--noche) 80%); overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; }
.hero .w3d { position: absolute; top: 0; right: -4vw; width: 74vw; height: 100%; z-index: 0; }
.w-respaldo { display: none; }
.sin-3d .w-respaldo { display: block; }
.hero .w-respaldo { position: absolute; right: 4vw; top: 16%; width: 52vw; max-width: 760px; z-index: 0; }
.hero-in { position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: 0 auto; padding: calc(var(--nav) + 40px) var(--margen) clamp(48px, 7vh, 88px); }
.hero-titulo { font-size: clamp(56px, 8.2vw, 136px); line-height: .92; letter-spacing: -.05em; max-width: 9.5ch; color: var(--crema); }
.hero-pie { margin-top: clamp(28px, 4vh, 44px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.hero-bajada { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: rgba(255, 240, 220, .82); max-width: 34ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.flotantes { position: absolute; inset: 0; z-index: 1; pointer-events: none; max-width: 1400px; margin: 0 auto; }
.tarjeta { position: absolute; display: flex; flex-direction: column; gap: 4px; max-width: 300px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 251, 244, .9); color: #1C1712; font-size: 15.5px; line-height: 1.35;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tarjeta .quien { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #7A6A55; }
.tarjeta mark { background: var(--resalte); border-radius: 4px; padding: 0 3px; color: inherit; }
.tarjeta small { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #6B5E4C; }
.tarjeta small .i { width: 14px; height: 14px; }
.mini-w { width: 16px; height: 16px; border-radius: 5px; background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -170 260 210'%3E%3Cpath d='M14.55 -76.37 L49.10 -14.55 L89.10 -90.92 L125.47 -14.55 L183.66 -134.56' fill='none' stroke='%23FFC629' stroke-width='34' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; display: inline-block; }
.t-cliente { right: 40%; top: 24%; }
.t-agente { right: 8%; top: 46%; }
.t-evento { right: 30%; top: 70%; flex-direction: row; align-items: center; font-weight: 700; font-size: 14.5px; }
.t-evento .i { width: 18px; height: 18px; color: var(--oro-texto); }
.js .tarjeta { opacity: 0; transform: translateY(16px) scale(.97); animation: aparece .9s var(--sale) forwards; }
.js .t-cliente { animation-delay: 1.3s; } .js .t-agente { animation-delay: 2.1s; } .js .t-evento { animation-delay: 2.9s; }
@keyframes aparece { to { opacity: 1; transform: none; } }
.js .hero-titulo, .js .hero-pie { animation: sube 1.1s var(--sale) both; } .js .hero-pie { animation-delay: .15s; }
@keyframes sube { from { opacity: 0; transform: translateY(30px); filter: blur(8px); } }

/* ---------- Manifiesto ---------- */
.manifiesto { padding: clamp(110px, 16vw, 220px) var(--margen); max-width: 1180px; margin: 0 auto; }
.lectura { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.08; letter-spacing: -.035em; }
.lectura span { opacity: .14; transition: opacity .3s; }
.lectura span.on { opacity: 1; }

/* ---------- Orbes (ElevenLabs) ---------- */
.orbe { position: relative; border-radius: 50%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 30% 28%, #FFF1C4, var(--oro) 38%, var(--naranja) 70%, var(--brasa)); box-shadow: inset -12px -18px 40px rgba(120, 20, 0, .35), 0 30px 60px -30px rgba(200, 80, 0, .6); }
.orbe i { position: absolute; inset: -8%; border-radius: 50%; filter: blur(14px); animation: gira 12s linear infinite; }
.orbe i:nth-child(1) { background: radial-gradient(circle at 28% 26%, rgba(255, 252, 235, .95), rgba(255, 230, 150, .4) 22%, transparent 42%), radial-gradient(circle at 76% 64%, rgba(255, 90, 20, .85), transparent 40%); }
.orbe i:nth-child(2) { background: radial-gradient(circle at 70% 24%, rgba(255, 200, 60, .9), transparent 34%), radial-gradient(circle at 30% 78%, rgba(200, 40, 15, .8), transparent 42%); animation-duration: 17s; animation-direction: reverse; mix-blend-mode: soft-light; }
.orbe i:nth-child(3) { inset: 0; filter: none; mix-blend-mode: overlay; opacity: .55; animation: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes gira { to { transform: rotate(360deg); } }
.orbe-naranja { background: radial-gradient(circle at 30% 28%, #FFE0B8, #FFA14A 36%, #FF6A1A 68%, #C8320F); }
.orbe-brasa { background: radial-gradient(circle at 30% 28%, #FFD7C2, #FF8255 34%, #E83A1F 66%, #8E1A0B); }
.orbe-vino { background: radial-gradient(circle at 30% 28%, #FFC9A6, #E0563A 34%, #8A1A16 64%, #3A0B0C); }

/* ---------- Pruébalo ---------- */
.prueba { padding: 0 var(--margen) clamp(110px, 14vw, 180px); }
.prueba-in { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.preguntas-chip { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.preguntas-chip button { padding: 12px 18px; border-radius: 999px; background: var(--papel); font-size: 16px; font-weight: 600; text-align: left; box-shadow: inset 0 0 0 1px var(--linea); transition: background .25s, transform .25s var(--sale), box-shadow .25s; }
.preguntas-chip button:hover { background: #FFEBC2; transform: translateY(-1px); }
.preguntas-chip button[aria-pressed="true"] { background: var(--oro); box-shadow: none; }
.preguntas-chip button:disabled { opacity: .5; cursor: progress; }
.consola { position: relative; border-radius: 32px; padding: clamp(28px, 4vw, 56px); background: radial-gradient(120% 120% at 20% 0%, #FFE7B0 0%, #FFB45A 38%, #FF7A2E 68%, #E2401E 100%); overflow: hidden; isolation: isolate; min-height: 620px; display: grid; place-items: center; }
.consola::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.orbe-prueba { position: absolute; width: 460px; height: 460px; left: -120px; bottom: -150px; z-index: -1; opacity: .9; }
.widget { width: min(100%, 420px); border-radius: 26px; overflow: hidden; background: #F2F7EF; box-shadow: 0 40px 80px -30px rgba(90, 20, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .5); }
.widget-cab { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #F0F2F5; }
.widget-cab b { display: block; font-size: 16px; line-height: 1.2; }
.widget-cab small { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #54656F; }
.widget-cab small .i { width: 14px; height: 14px; color: #25D366; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #FFF4D4; color: var(--oro-texto); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.modo-chip { margin-left: auto; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: var(--oro); }
.widget-hilo { display: flex; flex-direction: column; gap: 8px; padding: 18px 14px; height: 440px; overflow-y: auto; scroll-behavior: smooth; }
.vacio { margin: auto; font-size: 15px; color: #667781; text-align: center; }
.msg { position: relative; max-width: 86%; padding: 8px 12px 22px; border-radius: 12px; font-size: 15.5px; line-height: 1.42; color: #111B21; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); animation: entra .45s var(--sale) both; }
.msg time { position: absolute; right: 10px; bottom: 5px; font-size: 11.5px; color: #667781; }
.msg.ent { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 4px; }
.msg.sal { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 4px; }
.msg .firma { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--oro-texto); margin-bottom: 3px; }
.msg mark { border-radius: 4px; padding: 0 3px; color: inherit; animation: asienta 2s ease-out both; background: var(--resalte); }
.msg .fuente { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; color: #54656F; }
.msg .fuente .i { width: 14px; height: 14px; }
.evento { align-self: center; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: #FFFFFF; font-size: 13.5px; font-weight: 600; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); animation: entra .45s var(--sale) both; }
.evento .i { width: 16px; height: 16px; color: var(--oro-texto); }
.escribiendo { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 12px; background: #FFFFFF; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: punto 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 40% { transform: translateY(-3px); opacity: .5; } }
@keyframes entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes asienta { 0%, 25% { background: var(--oro); } 100% { background: var(--resalte); } }

/* ---------- Agentes (Clay) ---------- */
.agentes { padding: clamp(110px, 14vw, 180px) 0; background: var(--papel); }
.paneles { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.panel { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(28px, 3vw, 44px); display: grid; isolation: isolate; min-height: 440px; }
.panel h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1; margin: 14px 0 12px; }
.panel p { font-size: 17px; line-height: 1.5; color: rgba(20, 20, 19, .72); max-width: 40ch; }
.etiqueta { display: inline-block; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: rgba(20, 20, 19, .08); }
.p-comercial { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: linear-gradient(135deg, #FFF2CF, #FFDCA0); align-items: center; min-height: 560px; }
.p-comercial .panel-objeto { position: relative; height: 100%; min-height: 460px; display: grid; place-items: center; }
.p-comercial .orbe { position: absolute; width: 380px; height: 380px; }
.tel { border-radius: 42px; padding: 9px; background: #121211; box-shadow: 0 40px 80px -30px rgba(60, 20, 0, .6), inset 0 0 0 1.5px #34322D; }
.tel img { border-radius: 34px; width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.tel-panel { position: relative; width: 250px; transform: rotate(4deg) translateY(40px); }
.p-campanas, .p-contenido, .p-ventas { grid-column: span 4; grid-template-rows: auto 1fr; }
.p-campanas { background: linear-gradient(160deg, #FFE4CC, #FFC59A); }
.p-contenido { background: linear-gradient(160deg, #FFD9CB, #FFAE92); }
.p-ventas { background: linear-gradient(160deg, #F4D2C8, #E6A49A); }
.p-campanas .panel-objeto, .p-contenido .panel-objeto, .p-ventas .panel-objeto { position: relative; margin-top: 26px; min-height: 230px; display: grid; place-items: center; }
.p-campanas .orbe, .p-contenido .orbe, .p-ventas .orbe { position: absolute; width: 210px; height: 210px; right: -40px; bottom: -60px; }
.mini-propuesta, .mini-calendario, .mini-cifras { position: relative; width: min(100%, 290px); background: rgba(255, 251, 244, .94); border-radius: 18px; padding: 16px; font-size: 14.5px; line-height: 1.4; box-shadow: 0 24px 40px -24px rgba(90, 30, 0, .55); }
.mini-propuesta { display: grid; gap: 6px; }
.mini-propuesta em { justify-self: start; font-style: normal; font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 99px; background: var(--oro); }
.mini-calendario { display: grid; gap: 8px; }
.mini-calendario li { display: flex; gap: 10px; } .mini-calendario b { width: 34px; color: var(--oro-texto); }
.mini-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-cifras span { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.mini-cifras small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--texto-2); letter-spacing: 0; }
.mini-cifras em { grid-column: 1 / -1; font-style: normal; font-size: 12.5px; color: var(--texto-2); }
.nota-meta { margin-top: 24px; font-size: 14.5px; color: var(--texto-2); }

/* ---------- Producto (vino con sol y teléfonos) ---------- */
.producto { padding: clamp(110px, 14vw, 180px) 0; background: linear-gradient(180deg, var(--noche) 0%, var(--vino) 60%, var(--vino-2) 100%); overflow: hidden; isolation: isolate; }
.producto .sol-bajo { left: 72%; top: 62%; z-index: -1; }
.producto-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chips li { font-size: 14.5px; font-weight: 600; padding: 9px 15px; border-radius: 999px; background: rgba(255, 198, 41, .12); color: var(--oro); box-shadow: inset 0 0 0 1px rgba(255, 198, 41, .3); }
.telefonos { position: relative; height: 660px; }
.telefonos .tel { position: absolute; width: 250px; will-change: transform; }
.telefonos .t1 { left: 2%; top: 70px; transform: rotate(-7deg); }
.telefonos .t2 { left: 31%; top: 0; z-index: 2; }
.telefonos .t3 { left: 60%; top: 90px; transform: rotate(7deg); }

/* ---------- Modos ---------- */
.modos { padding: clamp(110px, 14vw, 180px) 0; }
.modos-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.modos-orbe { display: grid; place-items: center; min-height: 420px; }
.orbe-modo { width: min(80vw, 400px); aspect-ratio: 1; transition: filter .8s var(--sale), transform .8s var(--sale), opacity .8s; }
.orbe-modo[data-modo="0"] { filter: grayscale(1) brightness(1.15); opacity: .45; transform: scale(.82); }
.orbe-modo[data-modo="1"] { filter: saturate(.85); transform: scale(.92); }
.orbe-modo[data-modo="2"] { filter: saturate(1.15); transform: scale(1.02); box-shadow: inset -12px -18px 40px rgba(120, 20, 0, .35), 0 0 120px 10px rgba(255, 140, 30, .45); }
.orbe-modo[data-modo="0"] i { animation-play-state: paused; }
.selector { margin-top: 36px; display: inline-flex; gap: 4px; padding: 5px; border-radius: 99px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
.selector button { min-height: 46px; padding: 0 22px; border-radius: 99px; font-weight: 700; font-size: 16px; color: var(--texto-2); transition: background .3s var(--sale), color .3s; }
.selector button[aria-selected="true"] { background: var(--oro); color: var(--tinta); }
.modo-panel { position: relative; margin-top: 28px; min-height: 160px; }
.modo { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--sale), transform .4s var(--sale); pointer-events: none; }
.modo.on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.modo h3 { font-size: 27px; line-height: 1.15; }
.modo p { margin-top: 10px; color: var(--texto-2); max-width: 46ch; }

/* ---------- Reglas (PolyAI) ---------- */
.reglas-sec { padding: 0 var(--margen) clamp(110px, 14vw, 180px); }
.caja-negra { position: relative; max-width: var(--ancho); margin: 0 auto; border-radius: 32px; overflow: hidden; isolation: isolate; background: #0E0C0B; color: var(--crema); padding: clamp(40px, 6vw, 88px); }
.polvo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.caja-negra .entrada { color: rgba(255, 240, 220, .72); }
.reglas { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; }
.reglas li { display: grid; gap: 6px; font-size: 16px; line-height: 1.5; color: rgba(255, 240, 220, .7); }
.reglas .i { width: 26px; height: 26px; color: var(--oro); margin-bottom: 8px; }
.reglas b { color: var(--crema); font-size: 18px; font-weight: 600; }

/* ---------- Giros ---------- */
.giros { padding: 0 0 clamp(90px, 11vw, 150px); overflow: hidden; }
.cinta { margin-top: clamp(40px, 5vw, 64px); display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta-pista { display: flex; flex: none; align-items: center; animation: corre 50s linear infinite; }
.giro { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding-right: clamp(20px, 3vw, 44px); flex: none; }
.giro span { font-family: var(--display); font-weight: 500; font-size: clamp(44px, 7vw, 108px); letter-spacing: -.05em; line-height: 1.1; white-space: nowrap; }
.giro img { width: clamp(84px, 10vw, 140px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.giro svg { width: clamp(34px, 4vw, 56px); color: var(--naranja); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- Precios (Fin) ---------- */
.precios { padding: clamp(110px, 14vw, 180px) 0; background: var(--papel); }
.planes { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 960px; }
.plan { border-radius: 28px; padding: 36px; background: var(--hueso); display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px var(--linea); }
.plan h3 { font-size: 30px; }
.plan-para { margin-top: 6px; color: var(--texto-2); font-size: 16.5px; }
.monto { margin: 28px 0 26px; font-family: var(--display); font-weight: 500; font-size: clamp(56px, 5.4vw, 76px); letter-spacing: -.05em; line-height: 1; display: flex; align-items: flex-start; flex-wrap: wrap; }
.moneda { font-size: .45em; margin: .14em .06em 0 0; }
.monto small { flex-basis: 100%; margin-top: 10px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--texto-2); }
.plan ul { display: grid; gap: 12px; margin-bottom: 32px; }
.plan li { display: flex; gap: 10px; font-size: 16.5px; }
.plan li .i { width: 20px; height: 20px; margin-top: 2px; color: var(--naranja); }
.plan .boton { margin-top: auto; width: 100%; }
.plan-plus { background: linear-gradient(160deg, #FFF1CF, #FFD69A); box-shadow: none; }
.letra { margin-top: 32px; max-width: 960px; display: grid; gap: 12px; font-size: 15px; color: var(--texto-2); }
.letra b { color: var(--tinta); }

/* ---------- Preguntas ---------- */
.preguntas { padding: clamp(100px, 12vw, 160px) 0; }
.preguntas-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.preguntas .titulo { position: sticky; top: calc(var(--nav) + 32px); }
.lista-preguntas details { border-bottom: 1px solid rgba(20, 20, 19, .16); }
.lista-preguntas summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-family: var(--display); font-weight: 500; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -.02em; line-height: 1.3; cursor: pointer; }
.lista-preguntas summary::-webkit-details-marker { display: none; }
.lista-preguntas summary .i { width: 24px; height: 24px; color: var(--naranja); transition: transform .35s var(--sale); }
.lista-preguntas details[open] summary .i { transform: rotate(45deg); }
.lista-preguntas details p { padding: 0 48px 26px 0; color: var(--texto-2); max-width: 62ch; }

/* ---------- Cierre (Fin) ---------- */
.cierre { padding: clamp(100px, 12vw, 170px) var(--margen) clamp(110px, 13vw, 180px); text-align: center; overflow: hidden; background: radial-gradient(70% 60% at 50% 45%, #FFE9C4 0%, var(--hueso) 70%); }
.cierre-titulo { display: grid; justify-items: center; font-size: clamp(64px, 11vw, 190px); line-height: .9; letter-spacing: -.055em; }
.cierre-w { position: relative; display: block; width: min(92vw, 760px); height: clamp(220px, 30vw, 440px); margin: -2% 0; }
.cierre-w .w3d { width: 100%; height: 100%; }
.cierre-w .w-respaldo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cierre-texto { margin: 36px auto 30px; max-width: 40ch; font-size: clamp(18px, 1.5vw, 22px); color: var(--texto-2); }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: rgba(255, 240, 220, .72); padding: 64px var(--margen) 40px; }
.pie-in { max-width: var(--ancho); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.pie-marca .logo-svg { height: 34px; color: var(--crema); }
.pie-marca p { margin-top: 10px; font-size: 15px; }
.pie-links { display: flex; flex-wrap: wrap; gap: 14px 28px; font-size: 15.5px; font-weight: 600; }
.pie-links a { text-decoration: none; color: rgba(255, 240, 220, .85); }
.pie-links a:hover { color: var(--oro); }
.pie-legal { max-width: var(--ancho); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 240, 220, .14); font-size: 13.5px; color: rgba(255, 240, 220, .6); }

/* ---------- Revelado ---------- */
.js .rv { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1s var(--sale), transform 1s var(--sale), filter 1s var(--sale); }
.js .rv.on { opacity: 1; transform: none; filter: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .p-campanas, .p-contenido, .p-ventas { grid-column: span 6; }
  .p-ventas { grid-column: 1 / -1; }
  .reglas { grid-template-columns: 1fr 1fr; }
  .t-cliente { right: 46%; }
}
@media (max-width: 900px) {
  :root { --nav: 62px; }
  body { font-size: 17px; }
  .nav-links { display: none; }
  .nav-in { justify-content: space-between; }
  .hero { min-height: max(100svh, 680px); }
  .hero .w3d { right: -10vw; width: 120vw; height: 62%; top: 4%; }
  .hero .w-respaldo { width: 86vw; right: 6vw; top: 12%; }
  .hero { display: block; }
  .hero .w3d { height: 52vh; top: 6vh; }
  .hero-in { padding-top: calc(52vh + 20px); }
  .t-cliente { right: auto; left: 5%; top: calc(var(--nav) + 8px); }
  .t-agente { right: 4%; left: auto; top: 37vh; max-width: 240px; font-size: 14px; }
  .t-evento { display: none; }
  .hero-pie { flex-direction: column; align-items: stretch; }
  .prueba-in, .producto-in, .modos-in, .preguntas-in { grid-template-columns: 1fr; }
  .consola { min-height: 0; padding: 22px; border-radius: 26px; }
  .p-comercial { grid-template-columns: 1fr; }
  .p-comercial .panel-objeto { min-height: 420px; }
  .p-campanas, .p-contenido, .p-ventas { grid-column: 1 / -1; min-height: 0; }
  .telefonos { height: 520px; margin-top: 10px; }
  .telefonos .tel { width: 200px; }
  .telefonos .t1 { left: -4%; top: 60px; } .telefonos .t2 { left: calc(50% - 100px); } .telefonos .t3 { left: auto; right: -4%; top: 70px; }
  .modos-orbe { min-height: 300px; order: 2; }
  .preguntas .titulo { position: static; }
}
@media (max-width: 600px) {
  .titulo { font-size: clamp(36px, 10.5vw, 50px); }
  .hero-titulo { font-size: clamp(52px, 15vw, 76px); }
  .acciones .boton { flex: 1 1 100%; }
  .widget-hilo { height: 400px; }
  .orbe-prueba { width: 300px; height: 300px; }
  .panel { padding: 26px; border-radius: 24px; }
  .p-comercial .orbe { width: 280px; height: 280px; }
  .tel-panel { width: 210px; }
  .telefonos { height: 440px; }
  .telefonos .tel { width: 170px; }
  .telefonos .t2 { left: calc(50% - 85px); }
  .selector { display: flex; } .selector button { flex: 1; padding: 0 10px; }
  .reglas { grid-template-columns: 1fr; gap: 26px; }
  .caja-negra { border-radius: 24px; padding: 34px 24px; }
  .planes { grid-template-columns: 1fr; }
  .plan { padding: 28px; }
  .lista-preguntas details p { padding-right: 0; }
  .pie-in { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; filter: none; transition: none; }
  .js .hero-titulo, .js .hero-pie, .js .tarjeta { animation: none; opacity: 1; transform: none; }
  .js .nav .logo-w { animation: none; stroke-dashoffset: 0; }
  .orbe i, .cinta-pista, .escribiendo i { animation: none; }
  .cinta { overflow-x: auto; }
  .lectura span { opacity: 1; }
}