/* =========================================================
   Martín Del Valle · Editor de contenido
   Negro + violeta · Instrument Serif · vidrio y luz
   Colores y tipografías: todo en :root
   ========================================================= */

/* Tipografías servidas desde la propia web (subset latino: incluye ñ y tildes) */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/instrument-serif-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("assets/fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("assets/fonts/manrope.woff2") format("woff2"); }
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("assets/fonts/cabin.woff2") format("woff2"); }

:root {
  --bg:      #08070D;
  --bg-2:    #0E0C16;
  --prim:    #7B39FC;
  --prim-2:  #9156FF;
  --lila:    #CDB6FF;
  --text:    #F6F7F9;
  --muted:   rgba(246,247,249,.66);
  --muted-2: rgba(246,247,249,.46);
  --linea:   rgba(205,182,255,.12);
  --linea-2: rgba(205,182,255,.26);

  --vid-bg:     linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  --vid-sombra: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 60px -24px rgba(0,0,0,.8);
  --glow:       0 0 60px -14px rgba(123,57,252,.6);
  --grad-prim:  linear-gradient(180deg, #8F55FF, #6A2BF0);

  --serif: "Instrument Serif", Georgia, serif;
  --ui:    "Manrope", "Segoe UI", system-ui, sans-serif;
  --btn:   "Cabin", "Segoe UI", system-ui, sans-serif;
  --body:  "Inter", "Segoe UI", system-ui, sans-serif;
  --ease:  cubic-bezier(.16,1,.3,1);
}
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes gira { to { --giro: 360deg; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
b { font-weight: 500; color: var(--text); }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
::selection { background: var(--prim); color: #fff; }
:focus-visible { outline: 2px solid var(--prim-2); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 999; background: var(--prim); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.caja { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Fondo ambiental + grano + progreso ---------- */
.ambiente { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambiente i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(110px); opacity: .2; animation: deriva 26s ease-in-out infinite alternate; }
.ambiente i:nth-child(1) { background: #7B39FC; top: 20%; left: -18%; }
.ambiente i:nth-child(2) { background: #3A1E86; top: 55%; right: -20%; animation-duration: 32s; animation-delay: -8s; }
.ambiente i:nth-child(3) { background: #9156FF; bottom: -25%; left: 30%; opacity: .12; animation-duration: 38s; }
@keyframes deriva { to { transform: translate(8vw, -10vh) scale(1.15); } }
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progreso span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #7B39FC, #CDB6FF); box-shadow: 0 0 12px rgba(123,57,252,.8); }

/* =========================================================
   BOTONES
   ========================================================= */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 12px;
  font: 500 16px/1 var(--btn); color: #fff; white-space: nowrap; transition: background .25s, transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn--prim { background: var(--grad-prim); box-shadow: inset 0 0 0 1px rgba(205,182,255,.35), inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -6px rgba(123,57,252,.7), 0 0 50px -10px rgba(123,57,252,.6); }
.btn--prim:hover { background: linear-gradient(180deg, #9E6BFF, #7638FA); box-shadow: inset 0 0 0 1px rgba(205,182,255,.5), inset 0 1px 0 rgba(255,255,255,.4), 0 16px 40px -6px rgba(123,57,252,.85), 0 0 70px -8px rgba(145,86,255,.75); }
.btn--prim::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: brillo 4.5s ease-in-out infinite; }
@keyframes brillo { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn--osc { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px -10px rgba(0,0,0,.6); }
.btn--osc:hover { background: rgba(255,255,255,.12); border-color: var(--linea-2); }
.btn--full { width: 100%; }
.link { display: inline-flex; gap: 6px; font: 600 14.5px var(--ui); color: var(--text); transition: color .25s; }
.link span { transition: transform .3s var(--ease); }
.link:hover { color: var(--lila); }
.link:hover span { transform: translateX(4px); }

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.nav-in { max-width: 1440px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 36px; border: 1px solid transparent; border-radius: 18px;
  transition: background .4s, box-shadow .4s, border-color .4s, margin .4s var(--ease), padding .4s var(--ease), max-width .4s var(--ease); }
.nav.solida .nav-in { margin: 10px auto 0; max-width: 1180px; padding-top: 10px; padding-bottom: 10px; background: rgba(14,12,22,.6); border-color: rgba(205,182,255,.16);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 50px -12px rgba(0,0,0,.7), 0 0 40px -10px rgba(123,57,252,.35); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 15px var(--ui); letter-spacing: -.01em; }
.logo img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--prim-2), 0 0 18px rgba(145,86,255,.6); }
.nav-links { display: none; gap: 28px; font: 500 14px var(--ui); }
.nav-links a { position: relative; opacity: .82; transition: opacity .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--prim-2); box-shadow: 0 0 8px var(--prim-2); transform: scaleX(0); transition: transform .35s var(--ease); }
.nav-links a:hover, .nav-links a.activo { opacity: 1; }
.nav-links a.activo::after, .nav-links a:hover::after { transform: scaleX(1); }
.nav-acc { display: none; margin-left: auto; gap: 10px; }
.btn-n { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; font: 600 14px var(--ui); transition: background .2s, transform .3s var(--ease); }
.btn-n:hover { transform: translateY(-1px); }
.btn-n--claro { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.btn-n--claro:hover { background: rgba(255,255,255,.14); }
.btn-n--prim { background: var(--grad-prim); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 20px -4px rgba(123,57,252,.7); }

.hamb { margin-left: auto; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; border-radius: 10px; }
.hamb span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease); }
.hamb[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.hamb[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu-movil { position: fixed; inset: 0; z-index: 45; background: rgba(8,7,13,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 100px 24px 32px; display: flex; flex-direction: column; justify-content: space-between; }
.menu-movil[hidden] { display: none; }
.menu-movil nav { display: flex; flex-direction: column; }
.menu-movil nav a { font: 400 42px/1.25 var(--serif); padding: 10px 0; border-bottom: 1px solid var(--linea); animation: subeMenu .5s var(--ease) both; }
.menu-movil nav a:nth-child(2) { animation-delay: .05s; }
.menu-movil nav a:nth-child(3) { animation-delay: .1s; }
.menu-movil nav a:nth-child(4) { animation-delay: .15s; }
@keyframes subeMenu { from { opacity: 0; transform: translateY(16px); } }

/* =========================================================
   1 · HERO
   ========================================================= */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: #0b0b0d; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8,7,13,.15) 0%, rgba(8,7,13,.2) 30%, rgba(8,7,13,.62) 52%, rgba(8,7,13,.55) 80%, transparent 100%); }
.hero-fade { position: absolute; z-index: 1; inset: auto 0 0 0; height: 30%; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }
.hero-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 100px 20px 32px; }
.hero-txt { display: flex; flex-direction: column; align-items: center; }

/* Foto */
.hero-foto { position: relative; flex: none; width: min(240px, 64vw); aspect-ratio: 1; perspective: 1000px; }
.hero-foto img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease);
  box-shadow: 0 0 0 5px var(--bg), 0 40px 100px -10px rgba(123,57,252,.75), 0 0 140px -20px rgba(145,86,255,.7); }
.hero-foto::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -14%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(123,57,252,.55), transparent); filter: blur(14px); }
.hero-aro { position: absolute; inset: -9px; border-radius: 50%; background: conic-gradient(from var(--giro, 0deg), #7B39FC, #CDB6FF, #2B2344, #9156FF, #7B39FC); animation: gira 6s linear infinite; filter: drop-shadow(0 0 22px rgba(123,57,252,.6)); }
.orbita { position: absolute; inset: -16%; border-radius: 50%; border: 1px solid rgba(205,182,255,.22); transform: rotateX(72deg); animation: orbita 14s linear infinite; pointer-events: none; }
.orbita i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px #9156FF, 0 0 30px 8px rgba(123,57,252,.6); }
@keyframes orbita { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }

/* Línea de tiempo + aviso de entrega (solo compu, ver abajo) */
.tl, .aviso { display: none; }
@keyframes flota3d { 50% { translate: 0 -10px; } }

/* Texto */
.hero-t { font: 400 clamp(3rem, 13vw, 6rem)/1.04 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.hero-sub { margin-top: 20px; max-width: 560px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.76); }
.hero-sub b { font-weight: 500; }
.hero-btns { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-datos { margin-top: 34px; display: flex; justify-content: center; }
.hero-datos div { padding: 0 20px; border-left: 1px solid rgba(205,182,255,.2); }
.hero-datos div:first-child { padding-left: 0; border-left: 0; }
.hero-datos dt { font: 400 30px/1 var(--serif); color: #fff; }
.hero-datos dd { margin-top: 6px; font: 500 12.5px/1.25 var(--btn); color: var(--muted); }

/* Marquesina */
.hero-logos { position: relative; z-index: 2; padding: 0 20px 30px; text-align: center; }
.hero-logos p { font: 500 11px var(--ui); letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.marquesina { max-width: 900px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marq-pista { display: flex; width: max-content; gap: 40px; animation: desliza 26s linear infinite; }
.marquesina:hover .marq-pista { animation-play-state: paused; }
@keyframes desliza { to { transform: translateX(calc(-50% - 20px)); } }
.marq-pista li { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--ui); color: rgba(255,255,255,.82); white-space: nowrap; }
.marq-pista img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.hero-txt > *, .hero-logos { text-shadow: 0 1px 14px rgba(8,7,13,.85); }

/* Entrada del hero */
.ent { opacity: 0; transform: translateY(18px); animation: entra .9s var(--ease) forwards; }
.hero-foto.ent { transform: scale(.85); animation: entra 1.1s var(--ease) .05s forwards; }
.hero-txt .ent:nth-child(1) { animation-delay: .2s; }
.hero-txt .ent:nth-child(2) { animation-delay: .32s; }
.hero-txt .ent:nth-child(3) { animation-delay: .44s; }
.hero-txt .ent:nth-child(4) { animation-delay: .56s; }
.hero-logos.ent { animation-delay: .75s; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* =========================================================
   SECCIONES (base)
   ========================================================= */
.sec { position: relative; padding: 84px 0; }
.sec + .sec::before { content: ""; position: absolute; top: 0; left: 50%; width: min(900px, 80%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(205,182,255,.22), transparent); }
.cabeza { margin-bottom: 44px; }
.cabeza--c { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cabeza--split { display: grid; gap: 14px; }

/* Etiqueta de sección: número + texto, sin pastilla */
.tag { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 600 12px/1 var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--lila); }
.tag b { font: italic 400 20px/1 var(--serif); letter-spacing: 0; color: #fff; }
.tag::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, var(--lila), transparent); }
.cabeza--c .tag::before { content: ""; order: -1; width: 44px; height: 1px; background: linear-gradient(270deg, var(--lila), transparent); }

.h2 { font: 400 clamp(2.4rem, 9.5vw, 4.2rem)/1.05 var(--serif); letter-spacing: -.015em; text-wrap: balance; max-width: 15em; }
.h2 em, .hero-t em, .final-t em, .serv h3 em, .paquete h3 em { background: linear-gradient(100deg, #CDB6FF 0%, #fff 45%, #A57BFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(145,86,255,.4)); padding-right: .06em; }
.sub { margin-top: 16px; max-width: 34em; color: var(--muted); font-size: 16.5px; }
.cabeza--split .sub { margin-top: 0; }

.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.dentro { opacity: 1; transform: none; }

/* Tarjeta de vidrio (base compartida) */
.tray-top, .tray-fila, .serv, .paso, .enc, .faq details, .tabla-wrap, .filtros {
  position: relative; background: var(--vid-bg); border: 1px solid var(--linea); box-shadow: var(--vid-sombra);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.tray-top::after, .serv::after, .paso::after, .enc::after, .paquete::after, .garantia::after, .tabla-wrap::after, .pf-item:not(.ba)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(145deg, rgba(205,182,255,.5), rgba(123,57,252,.05) 35%, rgba(123,57,252,.04) 65%, rgba(205,182,255,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; transition: opacity .4s; }
.tray-top:hover::after, .serv:hover::after, .paso:hover::after, .enc:hover::after, .pf-item:not(.ba):hover::after { opacity: 1; }

/* Luz que sigue al cursor */
.luz { isolation: isolate; }
.luz::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(145,86,255,.16), transparent 45%); }
.luz:hover::before { opacity: 1; }

/* Inclinación 3D (la activa main.js) */
.js .rv.dentro.t3d, .t3d:not(.rv) { transform: perspective(1100px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateY(var(--lev, 0px));
  transition: opacity .9s var(--ease), transform .25s ease-out, border-color .3s, box-shadow .4s; }
.t3d:hover { --lev: -4px; }
.brillo3d { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .4s;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 48%, transparent 62%); background-size: 250% 250%; background-position: var(--gx, 50%) 50%; }
.t3d:hover .brillo3d { opacity: 1; }

/* Borde de luz que gira */
.gira-borde { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 4;
  background: conic-gradient(from var(--giro, 0deg), transparent 0deg, #CDB6FF 40deg, #7B39FC 80deg, transparent 140deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gira 7s linear infinite; }

/* =========================================================
   2 · TRAYECTORIA
   ========================================================= */
.tray { display: grid; gap: 14px; }
.tray-top { padding: 28px 24px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, rgba(145,86,255,.35), transparent 55%), radial-gradient(70% 90% at 0% 100%, rgba(58,30,134,.6), transparent 70%), var(--vid-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px -30px rgba(123,57,252,.55); }
.tray-top > * { position: relative; z-index: 1; }
.tray-top-cab { display: flex; align-items: center; gap: 16px; }
.tray-top-cab img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(8,7,13,.8), 0 0 0 4.5px var(--prim-2), 0 12px 30px rgba(123,57,252,.5); }
.tray-kick { font: 600 11.5px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--lila); }
.tray-top h3 { margin-top: 4px; font: 400 34px/1.05 var(--serif); }
.tray-num { margin-top: 26px; display: flex; align-items: baseline; gap: 12px; }
.tray-num span { font: 400 clamp(4.2rem, 18vw, 6.8rem)/.9 var(--serif); background: linear-gradient(180deg, #fff 30%, #B593FF); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(145,86,255,.45)); }
.tray-num small { font: 500 15px var(--btn); color: var(--muted); }
.tray-txt { margin-top: 14px; max-width: 32em; color: rgba(246,247,249,.78); font-size: 15px; }

.tray-lista { display: grid; gap: 10px; }
.tray-fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 18px; transition: opacity .9s var(--ease), transform .5s var(--ease), border-color .3s, box-shadow .4s; }
.tray-fila img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--linea-2); transition: transform .5s var(--ease); }
.tray-fila:hover { border-color: var(--linea-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -24px rgba(0,0,0,.8), var(--glow); }
.tray-fila:hover img { transform: scale(1.08) rotate(-4deg); }
.tray-n { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font: 700 15.5px var(--ui); }
.tray-n small { flex-basis: 100%; font: 500 12.5px var(--btn); color: var(--muted-2); }
.tray-c { text-align: right; }
.tray-c span { display: block; font: 400 32px/1 var(--serif); color: var(--lila); }
.tray-c small { font: 500 12px var(--btn); color: var(--muted-2); }
.verif { width: 16px; height: 16px; flex: none; }

.herr { margin-top: 30px; text-align: center; font: 500 14.5px var(--btn); color: rgba(246,247,249,.82); }
.herr span { display: block; margin-bottom: 8px; font: 600 11px var(--ui); letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); }
.herr i { font-style: normal; color: var(--prim-2); margin: 0 8px; }

/* =========================================================
   3 · PORTFOLIO
   ========================================================= */
.filtros { display: flex; gap: 6px; padding: 5px; margin: 0 auto 26px; width: max-content; max-width: 100%; border-radius: 16px; }
.filtros button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 11px; white-space: nowrap; font: 500 14.5px var(--btn); color: var(--muted); transition: background .3s, color .3s, box-shadow .3s; }
.filtros button span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: rgba(255,255,255,.08); font-size: 12px; }
.filtros button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.filtros button[aria-pressed="true"] { color: #fff; background: var(--grad-prim); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 24px -6px rgba(123,57,252,.8); }
.filtros button[aria-pressed="true"] span { background: rgba(255,255,255,.22); }

.pf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-flow: dense; }
.pf-item { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #0B0A12; border: 1px solid var(--linea);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.8); transition: opacity .9s var(--ease), transform .5s var(--ease), box-shadow .5s; }
.pf-item[hidden] { display: none; }
.pf-item:hover { box-shadow: 0 30px 70px -20px rgba(0,0,0,.85), 0 0 60px -12px rgba(123,57,252,.6); }
.pf-largo, .pf-mini { grid-column: span 2; }
.pf-largo video { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.pf-largo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(8,7,13,.7), transparent 45%); transition: opacity .4s; }
.vert { aspect-ratio: 9/16; }
.vert video { width: 100%; height: 100%; object-fit: cover; }
.vert::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(8,7,13,.55), transparent 22%, transparent 75%, rgba(8,7,13,.5)); }
.js .rv.dentro.vert:hover { transform: translateY(-6px); }
.pf-in { animation: pfEntra .6s var(--ease) both; }
@keyframes pfEntra { from { opacity: 0; transform: translateY(14px) scale(.97); } }

/* Etiqueta de tipo: texto con línea, sin pastilla */
.pf-tipo { position: absolute; z-index: 4; top: 14px; left: 16px; display: flex; align-items: center; gap: 8px; pointer-events: none;
  font: 700 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.8); transition: opacity .3s; }
.pf-tipo::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: var(--lila); box-shadow: 0 0 8px var(--prim-2); }
.pf-tipo i { font: italic 400 15px var(--serif); letter-spacing: 0; text-transform: none; color: var(--lila); }
.pf-largo .pf-tipo { top: auto; bottom: 18px; left: 20px; font-size: 12px; }

.sonido { position: absolute; z-index: 4; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(8,7,13,.5); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s; }
.sonido svg { width: 19px; height: 19px; }
.sonido .i-on { display: none; }
.sonido[aria-pressed="true"] { background: var(--prim); border-color: var(--prim-2); }
.sonido[aria-pressed="true"] .i-on { display: block; }
.sonido[aria-pressed="true"] .i-x { display: none; }

.play { position: absolute; z-index: 4; top: 50%; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 20px 50px rgba(0,0,0,.5); transition: transform .4s var(--ease), background .3s, opacity .3s; }
.play::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(205,182,255,.7); animation: onda 2.4s ease-out infinite; }
@keyframes onda { from { transform: scale(1); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.play svg { width: 34px; height: 34px; margin-left: 4px; }
.play:hover { transform: scale(1.08); background: var(--prim); }
.sonando .play, .sonando.pf-largo::before, .sonando .pf-tipo { opacity: 0; pointer-events: none; }

/* Antes / después */
.ba { aspect-ratio: 16/9; background: #000; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px rgba(145,86,255,1); pointer-events: none; z-index: 2; }
.ba::before { content: "‹ ›"; position: absolute; z-index: 3; top: 50%; left: var(--pos); width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-prim); color: #fff; font: 700 13px var(--ui); letter-spacing: 2px; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.5), 0 0 24px rgba(123,57,252,.7); }
.ba-r { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.ba-r::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 500px; }
.ba-et { position: absolute; top: 12px; z-index: 2; pointer-events: none; font: 700 10.5px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9); }
.ba-et--i { left: 14px; }
.ba-et--d { right: 14px; color: var(--lila); }

/* =========================================================
   4 · SERVICIOS
   ========================================================= */
.servs { display: grid; gap: 14px; }
.serv { border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: opacity .9s var(--ease), border-color .3s, box-shadow .4s, transform .5s var(--ease); }
.serv:hover { border-color: var(--linea-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px -24px rgba(0,0,0,.8), var(--glow); }
.serv > * { position: relative; z-index: 1; }
.serv > .gira-borde, .serv > .brillo3d { position: absolute; }
.serv--top { background: radial-gradient(80% 60% at 50% 0%, rgba(123,57,252,.22), transparent 70%), var(--vid-bg); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 40px 90px -30px rgba(123,57,252,.6); }
.serv-media { position: relative; overflow: hidden; background: #0B0A12; }
.serv-media--ancho { aspect-ratio: 16/9; }
.serv-media--ancho img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.serv-media--ancho::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,12,22,.85), transparent 50%); }
.serv:hover .serv-media img { transform: scale(1.05); }
.serv-media--clip { height: 340px; display: grid; place-items: center; perspective: 1000px;
  background: radial-gradient(55% 70% at 50% 100%, rgba(123,57,252,.6), transparent 70%), radial-gradient(50% 60% at 90% 0%, rgba(58,30,134,.7), transparent), #0B0A12; }
.serv-media--clip::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(205,182,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(205,182,255,.06) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.serv-tel { position: relative; height: 280px; aspect-ratio: 9/16; border-radius: 26px; padding: 5px; background: linear-gradient(160deg, #2B2344, #120F1C); transform: rotateY(-14deg) rotateX(4deg) rotateZ(2deg); transition: transform .8s var(--ease);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 70px -20px rgba(0,0,0,.9), 0 0 60px -10px rgba(123,57,252,.7); }
.serv:hover .serv-tel { transform: rotateY(-4deg) rotateX(2deg) rotateZ(0deg) translateY(-6px); }
.serv-tel video { width: 100%; height: 100%; object-fit: cover; border-radius: 21px; }
.serv-tel::after { content: ""; position: absolute; inset: 5px; border-radius: 21px; background: linear-gradient(125deg, rgba(255,255,255,.18), transparent 35%); pointer-events: none; }
.serv-flota { position: absolute; z-index: 2; padding: 10px 14px; border-radius: 12px; font: 400 22px/1 var(--serif); color: #fff; animation: flota3d 6s ease-in-out infinite;
  background: linear-gradient(180deg, rgba(40,32,66,.75), rgba(14,12,22,.8)); border: 1px solid rgba(205,182,255,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 20px 40px -10px rgba(0,0,0,.8); }
.serv-flota--a { top: 18%; left: 8%; }
.serv-flota--b { bottom: 16%; right: 8%; animation-delay: -3s; color: var(--lila); }
.serv-body { padding: 26px 24px; display: flex; flex-direction: column; flex: 1; }
.serv-kick { display: flex; align-items: center; gap: 10px; font: 600 11.5px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--lila); }
.serv-kick span { font: italic 400 20px/1 var(--serif); letter-spacing: 0; color: #fff; }
.serv h3, .paquete h3 { margin-top: 12px; font: 400 34px/1.05 var(--serif); letter-spacing: -.01em; }
.serv-txt { margin-top: 10px; color: var(--muted); font-size: 15px; }
.serv .link { margin-top: auto; padding-top: 18px; }
.serv--top .btn { margin-top: 24px; align-self: flex-start; }
.lista { margin-top: 18px; display: grid; gap: 11px; }
.lista li { position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.45; color: rgba(246,247,249,.88); }
.lista li::before { content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--grad-prim); box-shadow: 0 0 12px rgba(123,57,252,.6); }
.lista li::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.paquete { position: relative; margin-top: 14px; padding: 28px 24px; border-radius: 24px; display: grid; gap: 26px; overflow: hidden; border: 1px solid rgba(205,182,255,.3);
  background: radial-gradient(70% 140% at 100% 0%, rgba(123,57,252,.4), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(58,30,134,.7), transparent 70%), var(--bg-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px -30px rgba(123,57,252,.6); }
.paquete > * { position: relative; z-index: 1; }
.paquete > .gira-borde, .paquete > .brillo3d { position: absolute; }
.formula { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.f-pieza { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font: 500 13px var(--btn); color: rgba(246,247,249,.85); }
.f-pieza img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 14px 30px -8px rgba(0,0,0,.8); transition: transform .5s var(--ease); }
.f-pieza--v img { width: 40px; height: 72px; }
.paquete:hover .f-pieza:nth-child(1) img { transform: rotate(-4deg) translateY(-4px); }
.paquete:hover .f-pieza:nth-child(3) img { transform: translateY(-6px); }
.paquete:hover .f-pieza:nth-child(5) img { transform: rotate(5deg) translateY(-4px); }
.f-op { align-self: center; margin-bottom: 18px; font: 400 30px/1 var(--serif); color: var(--lila); }
.nota-c { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--muted-2); }

/* =========================================================
   5 · CÓMO FUNCIONA
   ========================================================= */
.pasos { position: relative; display: grid; gap: 14px; }
.paso { border-radius: 22px; overflow: hidden; transition: opacity .9s var(--ease), border-color .3s, box-shadow .4s, transform .5s var(--ease); }
.paso:hover { border-color: var(--linea-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px -24px rgba(0,0,0,.8), var(--glow); }
.paso > * { position: relative; z-index: 1; }
.paso > .brillo3d { position: absolute; }
.paso-vis { height: 170px; display: grid; place-items: center; padding: 20px; border-bottom: 1px solid var(--linea);
  background: radial-gradient(70% 90% at 50% 100%, rgba(123,57,252,.3), transparent 70%), rgba(8,7,13,.4); }
.paso-txt { padding: 22px 24px 26px; }
.paso-n { display: block; font: italic 400 22px/1 var(--serif); color: var(--lila); }
.paso h3 { margin-top: 10px; font: 700 19px/1.3 var(--ui); letter-spacing: -.01em; }
.paso p { margin-top: 8px; color: var(--muted); font-size: 15px; }

/* Escena 1: chat */
.v-chat { display: grid; gap: 8px; width: 100%; max-width: 250px; }
.v-burbuja { justify-self: end; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: #1F7A54; color: #fff; font: 500 12.5px/1.3 var(--body); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); }
.v-link { display: inline-flex; align-items: center; gap: 6px; background: #186145; color: #CFFBE5; }
.v-link svg { width: 15px; height: 15px; color: #FFD04D; }
.dentro .v-burbuja { animation: burbuja .6s var(--ease) both; }
.dentro .v-burbuja + .v-burbuja { animation-delay: .5s; }
@keyframes burbuja { from { opacity: 0; transform: translateY(10px) scale(.9); } }

/* Escena 2: edición */
.v-edit { position: relative; display: grid; gap: 7px; width: 100%; max-width: 250px; padding: 14px; border-radius: 12px; background: rgba(14,12,22,.8); border: 1px solid var(--linea-2); box-shadow: 0 20px 40px -12px rgba(0,0,0,.8); }
.v-pista, .tl-p { position: relative; display: block; height: 16px; border-radius: 4px; background: rgba(255,255,255,.04); }
.v-pista b, .tl-p b { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--b); border-radius: 4px; background: linear-gradient(180deg, #8F55FF, #5B24D6); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.v-pista--t b, .tl-p--t b { background: linear-gradient(180deg, #CDB6FF, #9D7BE8); }
.v-pista--a b, .tl-p--a b { background: repeating-linear-gradient(90deg, rgba(61,220,151,.8) 0 2px, rgba(61,220,151,.25) 2px 4px); box-shadow: none; }
.v-cab { position: absolute; top: 8px; bottom: 8px; left: 14px; width: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px #9156FF; animation: cabezal 5s linear infinite; }
@keyframes cabezal { to { left: calc(100% - 14px); } }

/* Escena 3: Drive */
.v-drive { display: grid; gap: 7px; width: 100%; max-width: 250px; }
.v-arch { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(14,12,22,.8); border: 1px solid var(--linea); font: 500 12.5px var(--body); color: rgba(246,247,249,.85); }
.v-arch i { width: 18px; height: 14px; border-radius: 3px; background: linear-gradient(180deg, #8F55FF, #5B24D6); }
.v-arch b { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #3DDC97; color: #08070D; font: 800 10px/1 var(--ui); }
.dentro .v-arch { animation: burbuja .5s var(--ease) both; }
.dentro .v-arch:nth-child(2) { animation-delay: .25s; }
.dentro .v-arch:nth-child(3) { animation-delay: .5s; }

/* =========================================================
   6 · POR QUÉ YO (tabla)
   ========================================================= */
.tabla-wrap { border-radius: 24px; overflow-x: auto; }
.tabla { position: relative; z-index: 1; width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.tabla th, .tabla td { padding: 18px 20px; text-align: center; border-bottom: 1px solid var(--linea); }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla thead th { font: 600 13px var(--btn); color: var(--muted); padding-top: 24px; padding-bottom: 20px; }
.tabla tbody th { text-align: left; font: 600 14.5px/1.35 var(--ui); color: var(--text); width: 34%; }
.tabla tbody tr { transition: background .3s; }
.tabla tbody tr:hover { background: rgba(255,255,255,.025); }
.tabla td { color: var(--muted); }
.tabla .t-yo { background: linear-gradient(180deg, rgba(123,57,252,.22), rgba(123,57,252,.12)); color: #fff; border-left: 1px solid rgba(205,182,255,.3); border-right: 1px solid rgba(205,182,255,.3); }
.tabla thead .t-yo { background: linear-gradient(180deg, rgba(145,86,255,.5), rgba(123,57,252,.22)); }
.t-yo-cab { display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--ui); color: #fff; }
.t-yo-cab img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--prim-2), 0 0 16px rgba(145,86,255,.7); }
.si, .no, .medio { display: inline-flex; align-items: center; gap: 8px; }
.si::before, .no::before, .medio::before { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--ui); }
.si::before { content: "✓"; background: var(--grad-prim); color: #fff; box-shadow: 0 0 12px rgba(123,57,252,.6); }
.no::before { content: "✕"; background: rgba(255,255,255,.07); color: var(--muted-2); }
.medio::before { content: "~"; background: rgba(255,255,255,.07); color: var(--muted); }
.t-yo .si { color: #fff; font-weight: 500; }

/* =========================================================
   7 · PARA QUIÉN ES
   ========================================================= */
.encaje { display: grid; gap: 14px; }
.enc { padding: 28px 24px; border-radius: 22px; transition: opacity .9s var(--ease), border-color .3s, box-shadow .4s, transform .5s var(--ease); }
.enc > * { position: relative; z-index: 1; }
.enc > .brillo3d { position: absolute; }
.enc h3 { font: 400 32px/1.1 var(--serif); margin-bottom: 20px; }
.enc ul { display: grid; gap: 14px; }
.enc li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.5; color: rgba(246,247,249,.86); }
.enc li::before { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/22px var(--ui); text-align: center; }
.enc--si { background: radial-gradient(90% 120% at 0% 0%, rgba(123,57,252,.25), transparent 60%), var(--vid-bg); }
.enc--si li::before { content: "✓"; background: var(--grad-prim); color: #fff; box-shadow: 0 0 12px rgba(123,57,252,.6); }
.enc--no { background: rgba(255,255,255,.02); }
.enc--no h3, .enc--no li { color: var(--muted); }
.enc--no li::before { content: "✕"; background: rgba(255,255,255,.07); color: var(--muted-2); }
.enc:hover { border-color: var(--linea-2); }

/* =========================================================
   8 · SIN RIESGO
   ========================================================= */
.garantia { position: relative; padding: 34px 24px; border-radius: 28px; overflow: hidden; border: 1px solid rgba(205,182,255,.3);
  background: radial-gradient(80% 120% at 0% 100%, rgba(123,57,252,.4), transparent 60%), radial-gradient(60% 100% at 100% 0%, rgba(58,30,134,.8), transparent), var(--bg-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 90px -30px rgba(123,57,252,.6); }
.garantia > * { position: relative; z-index: 1; }
.garantia > .gira-borde { position: absolute; }
.gar-sello { width: 64px; height: 64px; margin-bottom: 22px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: var(--grad-prim); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px -10px rgba(123,57,252,.8), 0 0 50px -6px rgba(145,86,255,.7); transform: rotate(-6deg); }
.gar-sello svg { width: 34px; height: 34px; }
.gar-lista { margin-top: 28px; display: grid; }
.gar-lista li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(205,182,255,.16); font-size: 16px; color: var(--muted); }
.gar-lista li:last-child { border-bottom: 1px solid rgba(205,182,255,.16); }
.gar-lista span { font: italic 400 22px/1 var(--serif); color: var(--lila); }

/* =========================================================
   9 · PREGUNTAS
   ========================================================= */
.faq-grid { display: grid; gap: 30px; }
.faq-lado .btn { margin-top: 24px; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 16px; transition: opacity .9s var(--ease), transform .9s var(--ease), border-color .3s, background .3s; }
.faq details[open] { border-color: var(--linea-2); background: linear-gradient(180deg, rgba(123,57,252,.12), rgba(255,255,255,.02)); }
.faq summary { list-style: none; cursor: pointer; position: relative; z-index: 1; padding: 19px 62px 19px 22px; font: 600 16px/1.4 var(--ui); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center; background: rgba(123,57,252,.18); color: var(--lila); font: 400 20px/1 var(--ui); transition: transform .35s var(--ease), background .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--grad-prim); color: #fff; box-shadow: 0 0 14px rgba(123,57,252,.7); }
.faq details > p, .faq-r { position: relative; z-index: 1; padding: 0 22px 20px; color: var(--muted); font-size: 15px; }
.faq-r p + p { margin-top: 10px; }

/* =========================================================
   10 · CTA FINAL
   ========================================================= */
.final { position: relative; overflow: hidden; padding: 110px 0 100px; margin-top: 30px; }
.final-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 32%, #000 70%, transparent 100%); }
.final-fade { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, rgba(8,7,13,.45), transparent); pointer-events: none; }
.final-in { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.final-yo { display: flex; align-items: center; gap: 12px; text-align: left; }
.final-yo img { width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--prim-2), 0 0 24px rgba(145,86,255,.7); }
.final-yo b { display: block; font: 700 15px var(--ui); }
.final-yo span { display: inline-flex; align-items: center; gap: 7px; font: 500 13px var(--btn); color: var(--muted); }
.final-yo i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 0 rgba(61,220,151,.6); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 8px rgba(61,220,151,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); } }
.final-t { margin-top: 26px; font: 400 clamp(2.4rem, 9vw, 4.4rem)/1.06 var(--serif); text-wrap: balance; }

/* =========================================================
   FOOTER
   ========================================================= */
.pie { padding: 36px 0 110px; border-top: 1px solid var(--linea); }
.pie-in { display: grid; gap: 18px; font-size: 14px; color: var(--muted); }
.pie ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie ul a { transition: color .2s; }
.pie ul a:hover { color: var(--text); }
.pie-c { color: var(--muted-2); font-size: 13px; }

.fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 30px -4px rgba(37,211,102,.6); transform: translateY(120px); transition: transform .5s var(--ease); }
.fab svg { width: 28px; height: 28px; }
.fab.visible { transform: none; }

/* =========================================================
   CELULAR
   ========================================================= */
@media (max-width: 479px) {
  .hero-btns { width: 100%; flex-direction: column; }
  .hero-btns .btn { width: 100%; }
  .hero-sub { font-size: 16.5px; }
  .hero-datos div { padding: 0 12px; }
  .hero-datos dt { font-size: 26px; }
  .hero-datos dd { font-size: 11.5px; }
  .filtros { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .filtros button { padding: 0 10px; font-size: 14px; }
  .f-pieza img { width: 72px; height: 41px; }
  .f-pieza--v img { width: 34px; height: 60px; }
  .f-op { font-size: 24px; }
}
@media (max-width: 959px) {
  .nav.solida .nav-in { margin: 8px 10px 0; padding: 8px 10px 8px 14px; }
}
@media (max-width: 700px) { .hero-video { object-position: 12% center; } }

/* =========================================================
   TABLET
   ========================================================= */
@media (min-width: 640px) {
  .caja { padding: 0 32px; }
  .hero-foto { width: 280px; }
  .tray { grid-template-columns: 1fr 1fr; }
  .servs { grid-template-columns: 1fr 1fr; }
  .serv--top { grid-column: 1 / -1; flex-direction: row; }
  .serv--top .serv-media { width: 44%; height: auto; min-height: 420px; }
  .serv--top .serv-body { padding: 34px; }
  .pf { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .pf-largo { grid-column: span 4; }
  .pf-mini { grid-column: span 2; }
  .encaje { grid-template-columns: 1.15fr 1fr; }
  .paquete { padding: 32px; }
}

/* =========================================================
   COMPU
   ========================================================= */
@media (min-width: 960px) {
  .nav-in { padding: 16px 64px; }
  .nav-links, .nav-acc { display: flex; }
  .hamb { display: none; }
  .caja { padding: 0 64px; }
  .sec { padding: 110px 0; }

  /* Hero en dos columnas; video espejado para que la luz quede detrás de la foto */
  .hero-video { transform: scaleX(-1); }
  .hero::before { background: linear-gradient(90deg, rgba(8,7,13,.6) 0%, rgba(8,7,13,.25) 45%, transparent 70%); }
  .hero-in { flex-direction: row-reverse; justify-content: space-between; gap: 96px; text-align: left; padding: 130px 64px 90px; }
  .hero-txt { flex: 1; max-width: 620px; align-items: flex-start; }
  .hero-t { font-size: clamp(3.8rem, 4.9vw, 5.4rem); }
  .hero-btns { justify-content: flex-start; }
  .hero-datos { justify-content: flex-start; margin-top: 42px; }
  .hero-datos dt { font-size: 36px; }
  .hero-foto { width: min(400px, 31vw); margin-right: 70px; }

  .tl { display: block; position: absolute; z-index: 3; left: -30%; bottom: -12%; width: 270px; padding: 12px 12px 14px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(40,32,66,.72), rgba(14,12,22,.8)); border: 1px solid rgba(205,182,255,.22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -12px rgba(0,0,0,.85), 0 0 40px -10px rgba(123,57,252,.55);
    transform: perspective(900px) rotateY(16deg) rotateX(6deg); animation: flota3d 7s ease-in-out infinite; }
  .tl-cab { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font: 500 11px var(--btn); color: var(--muted); font-variant-numeric: tabular-nums; }
  .tl-cab i { width: 7px; height: 7px; border-radius: 50%; background: #FF4D6D; box-shadow: 0 0 8px #FF4D6D; animation: parpadeo 1.2s steps(2) infinite; }
  .tl-tc { margin-left: auto; color: var(--lila); }
  .tl-pistas { position: relative; display: grid; gap: 6px; }
  .tl-cabezal { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px #9156FF; animation: cabezalTl 6s linear infinite; }
  .tl-cabezal::before { content: ""; position: absolute; top: -4px; left: -4px; border: 5px solid transparent; border-top-color: #fff; }

  .aviso { display: flex; align-items: center; gap: 12px; position: absolute; z-index: 3; right: -28%; bottom: 6%; width: 240px; padding: 12px 14px 12px 12px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(40,32,66,.75), rgba(14,12,22,.82)); border: 1px solid rgba(205,182,255,.22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -12px rgba(0,0,0,.85), 0 0 40px -10px rgba(123,57,252,.55);
    transform: perspective(900px) rotateY(-16deg) rotateX(4deg); animation: flota3d 8s ease-in-out infinite reverse; }
  .aviso-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #FFD04D; background: rgba(255,208,77,.14); box-shadow: inset 0 0 0 1px rgba(255,208,77,.25); }
  .aviso-ic svg { width: 20px; height: 20px; }
  .aviso-tx { flex: 1; display: grid; gap: 1px; }
  .aviso-tx b { font: 700 13.5px var(--ui); }
  .aviso-tx small { font: 500 11.5px var(--btn); color: var(--muted); }
  .aviso-barra { margin-top: 6px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
  .aviso-barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7B39FC, #3DDC97); transform-origin: 0 50%; animation: carga 5s var(--ease) infinite; }
  .aviso-ok { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #08070D; background: #3DDC97; box-shadow: 0 0 16px rgba(61,220,151,.7); animation: okPop 5s var(--ease) infinite; }
  .aviso-ok svg { width: 15px; height: 15px; }

  .cabeza--split { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 56px; }
  .cabeza--split .sub { justify-self: end; margin-bottom: 8px; max-width: 28em; }

  .tray { grid-template-columns: 1.05fr 1fr; gap: 16px; }
  .tray-top { padding: 40px; display: flex; flex-direction: column; }
  .tray-num { margin-top: auto; padding-top: 40px; }
  .tray-lista { gap: 12px; }
  .tray-fila { padding: 20px 26px 20px 20px; gap: 18px; }
  .tray-fila img { width: 60px; height: 60px; }
  .tray-c span { font-size: 40px; }

  .servs { grid-template-columns: 1.1fr 1fr; }
  .serv--top { grid-column: auto; grid-row: span 2; flex-direction: column; }
  .serv--top .serv-media { width: auto; min-height: 0; height: 380px; }
  .serv--top .serv-tel { height: 310px; }
  .servs .serv:not(.serv--top) { flex-direction: row; }
  .servs .serv:not(.serv--top) .serv-media--ancho { width: 44%; aspect-ratio: auto; flex: none; }
  .servs .serv:not(.serv--top) .serv-media--ancho::after { background: linear-gradient(to left, rgba(14,12,22,.6), transparent 40%); }
  .paquete { grid-template-columns: 1.1fr auto auto; align-items: center; gap: 40px; padding: 36px 40px; }

  .pf { grid-template-columns: repeat(12, 1fr); gap: 16px; }
  .pf-largo { grid-column: span 8; grid-row: span 2; }
  .pf-largo video { aspect-ratio: auto; }
  .pf-mini { grid-column: span 4; }
  .pf-clip { grid-column: span 3; }
  .pf-mini:nth-last-child(-n+2) { grid-column: span 6; }
  .pf[data-f="mini"] .pf-mini { grid-column: span 6; }
  .pf[data-f="largo"] .pf-largo { grid-column: 2 / span 10; }
  .pf[data-f="largo"] .pf-largo video { aspect-ratio: 16/9; }

  .pasos { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .pasos::before, .pasos::after { content: ""; position: absolute; z-index: 6; top: 170px; left: 3%; right: 3%; height: 2px; pointer-events: none; }
  .pasos::before { background: rgba(205,182,255,.12); }
  .pasos::after { background: linear-gradient(90deg, var(--prim), var(--lila)); box-shadow: 0 0 14px var(--prim-2); transform-origin: 0 50%; transform: scaleX(var(--llena, 0)); transition: transform 1.6s var(--ease) .3s; }
  .pasos.dentro::after { --llena: 1; }

  .encaje { gap: 16px; }
  .enc { padding: 36px; }
  .garantia { padding: 56px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
  .gar-lista { margin-top: 0; }

  .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
  .faq-lado { position: sticky; top: 110px; }

  .final { padding: 150px 0 140px; }
  .pie { padding-bottom: 40px; }
  .pie-in { grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; }
  .pie ul { justify-content: center; }
  .fab { display: none; }
}
@keyframes cabezalTl { to { left: 100%; } }
@keyframes parpadeo { 50% { opacity: .2; } }
@keyframes carga { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes okPop { 0%, 55% { transform: scale(0); opacity: 0; } 65% { transform: scale(1.2); opacity: 1; } 75%, 100% { transform: scale(1); opacity: 1; } }

/* Menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marq-pista { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marq-pista li[aria-hidden] { display: none; }
}