/* ============================================================
   RAVANTIA NEXUS v2 - sistema visual portado de Claude Design
   (Ravantia Nexus Website Redesign · Home/Caso/Precios .dc.html)
   Tema oscuro técnico-editorial: negro cálido + crema + ámbar + salmón
   ============================================================ */

@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/plex-mono-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/barlow-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/barlow-500.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/barlow-600.woff2') format('woff2');font-weight:600;font-display:swap;}

:root{
  --bg:#070708; --bg2:#0D0D10; --panel:#121216;
  --line:rgba(237,237,230,.12); --line2:rgba(237,237,230,.2);
  --ink:#EDEDE6; --ink2:#98988E; --ink3:#5c5c55;
  --amber:#F5A524; --salmon:#F0906B; --blue:#8FB8E8;
  --serif:'Instrument Serif',serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --body:'Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::selection{background:var(--amber);color:var(--bg);}
img{max-width:100%;display:block;}
a{color:var(--blue);}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
input[type="range"]{accent-color:var(--amber);}

@keyframes rvPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}
@keyframes rvBlink{0%,100%{opacity:1}50%{opacity:.2}}

/* ---- hero: pin (sticky) del banner + reveal del texto al cerrarse el apretón ---- */
.hero-track{position:relative;}
.hero-stage{position:sticky;top:0;height:100vh;min-height:600px;display:flex;align-items:flex-start;overflow:hidden;}
/* pin activo solo en desktop y sin reduced-motion: da recorrido para ver TODA la animación de las manos */
@media (min-width:720px) and (prefers-reduced-motion:no-preference){
  .hero-track{height:340vh;}
  /* texto oculto hasta que las manos se cierran en apretón (lo revela v2.js según el progreso del scroll) */
  .hero-stage .hero-copy{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
  .hero-stage .anno{opacity:0;transition:opacity .7s ease .1s;}
  .hero-stage.copy-in .hero-copy{opacity:1;transform:none;}
  .hero-stage.copy-in .anno{opacity:1;}
}
/* pantallas de poca altura: compacta el H1/lead del hero para que el CTA no se corte
   (el H1 .disp.xl nativo mide ~485px y no cabe bajo el header en viewports <=840px) */
@media (min-width:720px) and (max-height:840px){
  .hero-stage .hero-copy .disp.xl{font-size:clamp(50px,6.6vw,82px);line-height:1.02;}
  .hero-stage .hero-copy .lead{font-size:16px;line-height:1.5;margin-top:14px;}
}

/* ---- hero: campo denso de anillos concéntricos expandiéndose en loop infinito (capa detrás de las manos) ---- */
@keyframes rvRipple{
  0%{transform:translate(-50%,-50%) scale(.03);opacity:0}
  7%{opacity:.5}
  85%{opacity:.42}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
.hero-ripple{position:absolute;left:60%;top:49%;width:0;height:0;pointer-events:none;z-index:1;}
.hero-ripple span{position:absolute;left:0;top:0;width:1120px;height:1120px;border-radius:50%;
  border:1px solid rgba(237,237,230,.32);
  transform:translate(-50%,-50%) scale(.03);opacity:0;
  animation:rvRipple 21.6s linear infinite;}
.hero-ripple span:nth-child(1){animation-delay:0s}
.hero-ripple span:nth-child(2){animation-delay:-1.8s}
.hero-ripple span:nth-child(3){animation-delay:-3.6s}
.hero-ripple span:nth-child(4){animation-delay:-5.4s;border-color:rgba(240,144,107,.3)}
.hero-ripple span:nth-child(5){animation-delay:-7.2s}
.hero-ripple span:nth-child(6){animation-delay:-9s}
.hero-ripple span:nth-child(7){animation-delay:-10.8s}
.hero-ripple span:nth-child(8){animation-delay:-12.6s;border-color:rgba(240,144,107,.3)}
.hero-ripple span:nth-child(9){animation-delay:-14.4s}
.hero-ripple span:nth-child(10){animation-delay:-16.2s}
.hero-ripple span:nth-child(11){animation-delay:-18s}
.hero-ripple span:nth-child(12){animation-delay:-19.8s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---- grano de película ---- */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.04;
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');}

/* ---- layout ---- */
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;position:relative;}
.sec{padding:100px 24px;border-top:1px solid var(--line);position:relative;}
.sec.alt{background:var(--bg2);}
.sec.first{border-top:none;}

/* ---- tipografía ---- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--salmon);margin:0 0 20px;display:flex;align-items:center;gap:10px;text-transform:uppercase;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--salmon);animation:rvBlink 2.4s infinite;flex:none;}
h1.disp{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(42px,6.6vw,92px);line-height:1.02;margin:0 0 28px;color:var(--ink);text-wrap:balance;}
h1.disp.xl{font-size:clamp(52px,8.6vw,124px);line-height:.98;max-width:13ch;}
h2.disp{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.08;margin:0 0 28px;color:var(--ink);}
h2.disp.it{font-style:italic;text-wrap:balance;}
h3.serif{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 10px;color:var(--ink);}
.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ink2);max-width:60ch;margin:0 0 40px;}
.prose{max-width:68ch;font-size:17px;line-height:1.7;color:var(--ink2);}
.prose p{margin:0 0 18px;} .prose p:last-child{margin-bottom:0;}
.prose strong,.prose em{color:var(--ink);}
.mono{font-family:var(--mono);}
.m10{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink2);}
.m11{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink2);}

/* ---- anotaciones técnicas ---- */
.anno{position:absolute;font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.14em;display:flex;align-items:center;gap:8px;}
.anno .ln{display:inline-block;width:34px;height:1px;background:var(--line2);}
.anno .o{display:inline-block;width:6px;height:6px;border:1px solid rgba(237,237,230,.3);border-radius:50%;}
.anno .o.salmon{border-color:rgba(240,144,107,.7);}
.anno .o.blue{border-color:var(--blue);}
@media (max-width:820px){.anno{display:none!important;}}

/* ---- listas › ---- */
.ticks{display:flex;flex-direction:column;gap:16px;max-width:68ch;font-size:16px;line-height:1.65;color:var(--ink2);}
.ticks>div{display:flex;gap:14px;}
.ticks .t{color:var(--amber);font-family:var(--mono);flex:none;}
.ticks strong{color:var(--ink);}
.ticks .mnum{color:var(--ink);font-family:var(--mono);}

/* ---- botones ---- */
.btn-amber{display:inline-block;background:var(--amber);color:var(--bg);text-decoration:none;font-family:var(--mono);font-size:14px;font-weight:500;padding:16px 26px;border:none;cursor:pointer;transition:background .2s;}
.btn-amber:hover{background:var(--ink);}
.btn-line{display:inline-block;border:1px solid rgba(237,237,230,.25);color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:14px;padding:16px 26px;transition:all .2s;background:none;cursor:pointer;}
.btn-line:hover{border-color:var(--amber);color:var(--amber);}
.btn-glass{display:inline-block;padding:18px 34px;font-family:var(--mono);font-size:14px;font-weight:500;color:var(--bg);text-decoration:none;background:linear-gradient(160deg,rgba(245,165,36,.96),rgba(245,165,36,.8));border:1px solid rgba(237,237,230,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 42px rgba(245,165,36,.25);backdrop-filter:blur(8px);border-radius:999px;transition:box-shadow .3s;}
.btn-glass:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 60px rgba(245,165,36,.4);}

/* ---- nav ---- */
.nav-head{position:sticky;top:0;z-index:60;background:rgba(7,7,8,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav-head .bar{max-width:1280px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.22em;color:var(--ink);text-decoration:none;}
.brand b{color:var(--amber);font-weight:500;}
.nav-links{display:flex;align-items:center;gap:28px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;white-space:nowrap;}
.nav-links a{color:var(--ink2);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links .lang{color:var(--blue);border:1px solid var(--line);border-radius:999px;padding:4px 12px;}
.nav-links .lang:hover{border-color:var(--blue);color:var(--blue);}
.nav-links .cta{background:var(--amber);color:var(--bg);padding:10px 18px;font-weight:500;}
.nav-links .cta:hover{background:var(--ink);color:var(--bg);}
.cta-mobile{display:none;font-family:var(--mono);font-size:11px;background:var(--amber);color:var(--bg);text-decoration:none;padding:9px 14px;font-weight:500;}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:11px;padding:8px 12px;cursor:pointer;}
@media (max-width:1120px){
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:20px 24px;gap:18px;}
  .nav-links.open{display:flex;}
  .cta-mobile{display:inline-flex;margin-left:auto;}
  .menu-btn{display:block;}
}

/* ---- paneles con ticks de esquina ---- */
.panel{position:relative;border:1px solid var(--line);background:var(--bg2);}
.panel.p3{background:var(--panel);}
.tick-tl,.tick-tr,.tick-bl,.tick-br{position:absolute;width:12px;height:12px;pointer-events:none;}
.tick-tl{top:-1px;left:-1px;border-top:1px solid var(--ink2);border-left:1px solid var(--ink2);}
.tick-tr{top:-1px;right:-1px;border-top:1px solid var(--ink2);border-right:1px solid var(--ink2);}
.tick-bl{bottom:-1px;left:-1px;border-bottom:1px solid var(--ink2);border-left:1px solid var(--ink2);}
.tick-br{bottom:-1px;right:-1px;border-bottom:1px solid var(--ink2);border-right:1px solid var(--ink2);}
.panel.bright .tick-tl,.panel.bright .tick-tr,.panel.bright .tick-bl,.panel.bright .tick-br{width:14px;height:14px;border-color:var(--ink);}

/* ---- hero glow ---- */
.glow{position:absolute;width:520px;height:520px;background:radial-gradient(circle,rgba(245,165,36,.12),transparent 65%);filter:blur(45px);animation:rvPulse 8s ease-in-out infinite;pointer-events:none;}

/* ---- stats strip ---- */
.stats-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2);}
.stats-strip .in{max-width:1280px;margin:0 auto;padding:36px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;}
.stat{border-left:1px solid var(--line);padding-left:18px;}
.stat .v{font-family:var(--mono);font-size:38px;color:var(--amber);}
.stat .v small{font-size:16px;color:var(--ink2);}
.stat .l{font-size:13px;color:var(--ink2);line-height:1.5;margin-top:4px;}

/* ---- glow cards (pasos/retainers) ---- */
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.gcard{position:relative;}
.gcard .halo{position:absolute;inset:20% 15%;filter:blur(45px);pointer-events:none;}
.gcard.a .halo{background:rgba(245,165,36,.10);} .gcard.s .halo{background:rgba(240,144,107,.08);} .gcard.b .halo{background:rgba(143,184,232,.08);}
.gcard .brd{position:relative;padding:1px;height:100%;}
.gcard.a .brd{background:linear-gradient(160deg,rgba(245,165,36,.5),rgba(237,237,230,.08) 40%,rgba(237,237,230,.08));}
.gcard.s .brd{background:linear-gradient(160deg,rgba(240,144,107,.45),rgba(237,237,230,.08) 40%,rgba(237,237,230,.08));}
.gcard.b .brd{background:linear-gradient(160deg,rgba(143,184,232,.45),rgba(237,237,230,.08) 40%,rgba(237,237,230,.08));}
.gcard .in{background:var(--panel);padding:30px 26px;height:100%;}
.gcard .step{font-family:var(--mono);font-size:11px;letter-spacing:.18em;margin-bottom:16px;}
.gcard.a .step{color:var(--amber);} .gcard.s .step{color:var(--salmon);} .gcard.b .step{color:var(--blue);}
.gcard h3{font-family:var(--serif);font-weight:400;font-size:28px;margin:0 0 12px;color:var(--ink);}
.gcard p{font-size:14px;line-height:1.6;color:var(--ink2);margin:0 0 22px;}
.gcard .price{font-family:var(--mono);font-size:20px;color:var(--ink);}
.gcard .fine{font-family:var(--mono);font-size:11px;color:var(--ink2);margin-top:6px;}
.gcard ul{list-style:none;padding:0;margin:0;font-size:13.5px;color:var(--ink2);line-height:1.7;}
.gcard ul li::before{content:'› ';color:var(--amber);font-family:var(--mono);}

/* ---- tablas ---- */
.tbl-wrap{position:relative;border:1px solid rgba(237,237,230,.14);background:var(--bg2);overflow-x:auto;}
.tbl{width:100%;border-collapse:collapse;min-width:640px;}
.tbl th{text-align:left;padding:16px 22px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2);font-weight:400;border-bottom:1px solid rgba(237,237,230,.14);}
.tbl th.r{text-align:right;}
.tbl td{padding:14px 22px;font-size:14px;color:var(--ink2);border-bottom:1px solid rgba(237,237,230,.08);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--panel);}
.tbl .svc{font-size:14.5px;font-weight:500;color:var(--ink);}
.tbl .pr{font-family:var(--mono);color:var(--amber);text-align:right;white-space:nowrap;}
.tbl .badge{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--salmon);border:1px solid rgba(240,144,107,.45);padding:2px 7px;margin-left:8px;vertical-align:middle;}
.tbl-cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.12em;margin-top:10px;}

/* ---- meta badges (casos) ---- */
.meta-badges{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;}
.meta-badges span{border:1px solid var(--line2);padding:7px 13px;color:var(--ink2);}
.meta-badges .hot{border-color:rgba(245,165,36,.5);color:var(--amber);}

/* ---- demo headers ---- */
.demo-head{padding:16px 22px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);}
.demo-head .t{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink2);}
.demo-head .live{font-family:var(--mono);font-size:10px;color:var(--salmon);display:flex;align-items:center;gap:7px;}
.demo-head .live i{width:6px;height:6px;border-radius:50%;background:var(--salmon);animation:rvBlink 1.8s infinite;}
.fig-cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.12em;margin-top:10px;}

/* ---- footer ---- */
.site-foot{border-top:1px solid var(--line);padding:28px 24px;}
.site-foot .in{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink2);letter-spacing:.06em;}
.site-foot a{color:var(--ink2);text-decoration:none;}
.site-foot a:hover{color:var(--ink);}
.site-foot .en{color:var(--blue);}
.site-foot nav{display:flex;flex-wrap:wrap;gap:20px;}

/* ---- formulario (lead) ---- */
.leadform{display:grid;gap:16px;margin-top:40px;text-align:left;max-width:560px;margin-left:auto;margin-right:auto;}
.leadform label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2);display:block;margin-bottom:6px;text-transform:uppercase;}
.leadform input,.leadform textarea{width:100%;font-family:var(--body);font-size:15px;padding:12px 14px;background:var(--panel);border:1px solid var(--line2);color:var(--ink);}
.leadform input:focus,.leadform textarea:focus{border-color:var(--amber);outline:none;}
.leadform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:640px){.leadform .row2{grid-template-columns:1fr;}}
.leadform .note{font-family:var(--mono);font-size:10.5px;color:var(--ink3);letter-spacing:.04em;}
.leadform .status{font-family:var(--mono);font-size:12px;color:var(--amber);min-height:18px;}

/* ---- estimador ---- */
.est-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;align-items:start;}
.est-btn{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:11px 10px;cursor:pointer;text-align:center;background:transparent;color:var(--ink2);border:1px solid var(--line2);transition:all .2s;}
.est-btn.on{background:var(--amber);color:var(--bg);border-color:var(--amber);}
.est-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2);margin-bottom:14px;}
.est-check{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;color:var(--ink);}
.est-check input{accent-color:var(--amber);width:16px;height:16px;}
.est-check .mono-sub{font-family:var(--mono);font-size:12px;color:var(--ink2);}
.est-res{border:1px solid var(--line);background:var(--bg2);padding:22px 26px;position:relative;}
.est-res .t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink2);margin-bottom:10px;}
.est-res .v{font-family:var(--mono);font-size:22px;color:var(--ink2);}
.est-res .sub{font-size:13px;color:var(--ink3);margin-top:6px;}
.est-hero{position:relative;padding:1px;background:linear-gradient(160deg,rgba(245,165,36,.85),rgba(245,165,36,.2) 55%,rgba(237,237,230,.1));}
.est-hero .in{background:linear-gradient(180deg,#17130a,#121216 60%);padding:28px;position:relative;}
.est-hero .price{font-family:var(--mono);font-size:clamp(30px,3.4vw,42px);color:var(--amber);letter-spacing:-.01em;}
.est-hero .monthly{font-family:var(--mono);font-size:13px;color:var(--ink2);margin-top:8px;min-height:18px;}
.est-hero .desg{border-top:1px solid var(--line);margin-top:18px;padding-top:16px;font-size:13.5px;line-height:1.6;color:var(--ink2);}
.est-hero .desg b{color:var(--ink);font-weight:500;}

/* ---- FAQ ---- */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:36px 48px;max-width:1100px;}
.faq h3{font-size:16px;font-weight:600;margin:0 0 10px;color:var(--ink);font-family:var(--body);}
.faq p{font-size:14.5px;line-height:1.65;color:var(--ink2);margin:0;}

/* ---- reveals (JS marca html.js) ---- */
html.js [data-rv]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
html.js [data-rv].on{opacity:1;transform:none;}
html.js.motion-off [data-rv]{opacity:1;transform:none;transition:none;}

/* ---- kanban del RPN (caso monitoreo) ---- */
.oprow{display:grid;grid-template-columns:64px 1fr 52px;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;}
.oprow .nm{color:var(--ink2);}
.oprow .track{height:8px;background:rgba(237,237,230,.07);position:relative;overflow:hidden;}
.oprow .bar{height:100%;background:var(--amber);transition:width .7s ease,background .4s;}
.oprow .bar.over{background:var(--salmon);}
.oprow .thr{position:absolute;left:70%;top:-2px;bottom:-2px;width:1px;background:rgba(240,144,107,.5);}
.oprow .val{text-align:right;color:var(--ink);transition:color .4s;}
.oprow .val.over{color:var(--salmon);}

/* === SHOWCASE B3 === */
/* stack de paneles "ventana-en-ventana"; ver DESIGN-SPEC §3 */
.showcase{margin-bottom:26px;}
.showcase:last-child{margin-bottom:0;}

/* barra tipo browser-window */
.showcase-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--panel);}
.showcase-dots{display:flex;gap:6px;flex:none;}
.showcase-dots span{width:9px;height:9px;border-radius:50%;background:var(--line2);}
.showcase-dots span:nth-child(1){background:rgba(240,144,107,.55);} /* salmón */
.showcase-dots span:nth-child(2){background:rgba(245,165,36,.55);}  /* ámbar */
.showcase-dots span:nth-child(3){background:rgba(143,184,232,.55);} /* azul */
.showcase-url{flex:1;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink2);padding:6px 12px;border:1px solid var(--line);background:var(--bg2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* viewport del iframe: chico por defecto (preview) y crece con aspecto de
   monitor real al activarse (clase .is-active, la ponen TODOS los scripts que
   usan este componente: el inline de index.html/en/index.html Y
   assets/casos-pip.js en casos.html/caso-catalogo.html - por eso el tamaño
   activo vive en CSS con clamp(), no en JS por página, así el crecimiento
   funciona en las 4 páginas sin duplicar lógica). Reduced-motion: el
   kill-switch global (línea ~77) vuelve la transición instantánea. */
.showcase-viewport{position:relative;height:220px;overflow:hidden;background:var(--bg2);transition:height .55s cubic-bezier(.4,0,.2,1);}
.showcase-viewport iframe{width:100%;height:100%;border:0;display:block;pointer-events:none;}
.showcase-viewport.is-active{height:clamp(360px,46vw,640px);}
.showcase-viewport.is-active iframe{pointer-events:auto;}
@media (max-width:819px){
  .showcase-viewport{height:180px;}
  .showcase-viewport.is-active{height:clamp(280px,60vw,420px);}
}

/* overlay "toca para interactuar" */
.showcase-overlay{position:absolute;inset:0;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;background:rgba(7,7,8,.55);
  backdrop-filter:blur(3px);border:0;cursor:pointer;padding:0;margin:0;}
.showcase-overlay .m11{color:var(--ink);border:1px solid var(--line2);background:var(--bg2);
  padding:10px 18px;letter-spacing:.08em;transition:border-color .2s,color .2s;}
.showcase-overlay:hover .m11,.showcase-overlay:focus-visible .m11{border-color:var(--amber);color:var(--amber);}

/* pie de cada demo */
.showcase-foot{padding:22px 20px;border-top:1px solid var(--line);}
.showcase-note{font-family:var(--mono);font-size:11px;color:var(--ink3);line-height:1.6;margin:0 0 14px;letter-spacing:.02em;}

/* ---- grids con panel decorativo (PROBLEMA / QUIÉNES SOMOS): antes columna única
   con espacio muerto a la derecha; ahora texto + panel wireframe coherente con el
   sistema (círculos concéntricos, mono, ticks) ---- */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);gap:56px;align-items:center;}
@media (max-width:900px){.art-grid{grid-template-columns:1fr;gap:36px;}}
.art-panel{position:relative;border:1px solid var(--line);background:var(--bg2);padding:18px;aspect-ratio:1/1;max-width:300px;}
.art-panel svg{width:100%;height:100%;display:block;}
@media (max-width:900px){.art-panel{max-width:220px;margin:0 auto;}}

/* ---- scroll hint del hero: guiño sutil en la posición inicial ---- */
.scroll-hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;opacity:.65;}
.scroll-hint .m11{letter-spacing:.24em;}
.scroll-hint .ln{width:1px;height:32px;background:linear-gradient(180deg,var(--ink2),transparent);animation:rvScrollHint 1.9s ease-in-out infinite;}
@keyframes rvScrollHint{0%{transform:scaleY(0);transform-origin:top;opacity:0}35%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}
.hero-stage.copy-in .scroll-hint{opacity:0;pointer-events:none;transition:opacity .5s ease;}
@media (max-width:819px){.scroll-hint{bottom:16px;}}

/* === MOTION B5 ===
   Hairlines de line-draw nuevas (ver assets/v2-motion.js). Estado por
   defecto = trazo completo (scaleX:1); GSAP las pone en scaleX:0 en JS
   antes de animarlas, así que sin JS / sin motion quedan visibles enteras
   (degradación segura, cero CLS). */
.gs-rule{display:block;width:64px;height:1px;background:var(--line2);margin-top:20px;}
.gs-rule-top{position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--line2);pointer-events:none;}
.est-hero .desg{position:relative;}