:root{
    --white:#FFFFFF;
    --blush:#FFF0F7;
    --blush-deep:#FCE0EF;
    --pink:#F9A8D4;
    --pink-deep:#EC4899;
    --purple:#C084FC;
    --purple-soft:#A855F7;
    --purple-deep:#6B2192;
    --lavender:#F3D9FA;
    --ink:#4A1942;
    --ink-soft:#6b5877;
    --navy:#16305C;
    --brass:#AD8A4E;
    --line: rgba(255,255,255,0.10);
    --shadow: 0 20px 60px -20px rgba(219,39,119,0.32);
    --tornasol: linear-gradient(115deg, #F9E4EC 0%, #F9A8D4 24%, #EC4899 46%, #E879C1 62%, #C084FC 80%, #F3D9FA 100%);
    --font-display: 'Fraunces', serif;
    --font-body: 'Manrope', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* ---- Liquid Glass (usado tal cual dentro del héroe) ---- */
    --glass-fill: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(249,168,212,0.28) 45%, rgba(192,132,252,0.30) 100%);
    --glass-fill-strong: linear-gradient(135deg, rgba(236,72,153,0.85), rgba(192,132,252,0.85));
    --glass-border: 1px solid rgba(255,255,255,0.65);
    --glass-shadow: 0 4px 14px -6px rgba(126,34,206,0.28), 0 26px 50px -26px rgba(74,25,66,0.4), inset 0 1.5px 0 rgba(255,255,255,0.8), inset 0 -6px 14px -8px rgba(236,72,153,0.16);
    --glass-shadow-strong: 0 6px 18px -6px rgba(219,39,119,0.4), 0 30px 56px -24px rgba(74,25,66,0.5), inset 0 1.5px 0 rgba(255,255,255,0.55);
    --glass-blur: blur(18px) saturate(180%);

    /* ---- Nova Glass: todo lo que va DESPUÉS del héroe ----
       fondo SIEMPRE blanco, con tarjetas de vidrio líquido transparente encima,
       siguiendo al pie de la letra el JSON/CSS de referencia del cliente. */
    --void:#EEF5FF;
    --panel:#F4F9FF;
    --panel-2:#FFFFFF;
    --edge: rgba(107,33,146,0.12);
    --edge-bright: rgba(107,33,146,0.30);
    --text-hi:#6B2192;
    --text-lo:#6b5877;
    --neon-pink:#EC4899;
    --neon-purple:#C084FC;
    --dark-glass-fill: rgba(255,255,255,0.25);
    --dark-glass-fill-strong: rgba(255,255,255,0.55);
    --dark-glass-border: 1px solid rgba(255,255,255,0.4);
    --dark-glass-shadow: 0 20px 60px rgba(100,150,255,0.15), inset 0 1px 1px rgba(255,255,255,0.8);
    --dark-glass-blur: blur(30px);
    --dark-glass-radius: 32px;
  }

  /* Reusable liquid-glass surface: translucent fill + blur + specular highlight sweep */
  .glass{
    position:relative;
    background:var(--glass-fill);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:var(--glass-border);
    box-shadow:var(--glass-shadow);
    overflow:hidden;
  }
  .glass::after{
    content:'';
    position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.06) 22%, rgba(255,255,255,0) 40%);
    mix-blend-mode:overlay;
  }
  .glass-dark{
    background:var(--glass-fill-strong);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
    border:1px solid rgba(255,255,255,0.35);
    box-shadow:var(--glass-shadow-strong);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:radial-gradient(circle at top, #ffffff, #eef5ff 50%, #dfeeff);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }
  .page-bg-video{
    position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
    z-index:-2;
  }
  .page-bg-overlay{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,240,247,0.6) 100%);
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  .container{max-width:1240px;margin:0 auto;padding:0 32px;}
  h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em;color:var(--text-hi);}
  ::selection{background:var(--pink);color:#fff;}

  @media (prefers-reduced-motion: reduce){
    /* la barra de noticias (#stripTrack) queda fuera a propósito: la clienta la quiere
       transitando siempre, igual que los videos, sin importar esta preferencia. */
    *:not(#stripTrack){animation-duration:0.01ms !important; animation-iteration-count:1 !important;}
    *{transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- NAV ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:20px 0;
    /* sin barra: nada de fondo/blur/borde aquí. el logo y los botones flotan
       directo sobre la página, cada uno con su propio vidrio, sin rectángulo
       detrás que los una en una franja. */
    background:none;
    transition:padding .35s ease;
  }
  .nav.scrolled{
    padding:5px 0;
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;}
  .brand{display:flex;align-items:center;gap:10px;}
  .brand-logo{height:56px;width:auto;display:block;transform-origin:left center;transition:transform .35s ease;}
  .nav.scrolled .brand-logo{transform:scale(0.75);}
  .foot-brand-logo{height:42px;width:auto;display:block;filter:brightness(0) invert(1);opacity:0.95;}
  .nav-links{display:flex;gap:10px;align-items:center;}

  /* ---------- NAV LINK BUTTONS (Uiverse.io by doniaskima, adapted to liquid glass) ---------- */
  .nav-btn{
    position:relative; overflow:hidden; display:block;
    border-radius:999px; padding:9px 18px;
    font-family:var(--font-body); font-weight:700; font-size:14.5px; color:#fff;
    background:rgba(255,255,255,0.14);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    border:1px solid rgba(255,255,255,0.4);
    box-shadow:0 8px 22px -12px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.45);
    text-decoration:none;
  }
  .nav-btn::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%);
    mix-blend-mode:overlay;
  }
  .nav-btn-original{
    position:absolute; inset:0; display:grid; place-content:center;
    background:transparent; color:inherit;
    transition:transform .3s cubic-bezier(.87,0,.13,1);
    font-weight:700; font-size:14.5px; white-space:nowrap;
  }
  /* al dejar el héroe, el texto de los botones pasa a morado (color del logo) para seguir legible sobre fondos más claros */
  .nav.past-hero .nav-btn{color:var(--purple-deep); transition:color .3s ease;}
  .nav-btn:hover .nav-btn-original{ transform:translateY(100%); }
  .nav-btn-letters{ display:inline-flex; white-space:nowrap; }
  .nav-btn-letters span{
    opacity:0; transform:translateY(-10px);
    transition:transform .2s cubic-bezier(.87,0,.13,1), opacity .2s;
  }
  .nav-btn-letters span:nth-child(2n){ transform:translateY(10px); }
  .nav-btn:hover .nav-btn-letters span{ opacity:1; transform:translateY(0); }
  .nav-btn:hover .nav-btn-letters span:nth-child(2){transition-delay:0.03s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(3){transition-delay:0.06s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(4){transition-delay:0.09s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(5){transition-delay:0.12s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(6){transition-delay:0.15s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(7){transition-delay:0.18s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(8){transition-delay:0.21s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(9){transition-delay:0.24s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(10){transition-delay:0.27s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(11){transition-delay:0.3s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(12){transition-delay:0.33s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(13){transition-delay:0.36s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(14){transition-delay:0.39s;}
  .nav-btn:hover .nav-btn-letters span:nth-child(15){transition-delay:0.42s;}
  @media (max-width:980px){
    .nav-links{display:none;}
  }
  .nav-cta{
    position:relative; overflow:hidden;
    background:var(--glass-fill-strong);
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    color:#fff; padding:13px 28px; border-radius:100px; font-weight:700; font-size:15.5px;
    border:1px solid rgba(255,255,255,0.45);
    box-shadow:var(--glass-shadow-strong);
    transition:transform .25s, box-shadow .25s;
  }
  .nav-cta::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%);
    mix-blend-mode:overlay;
  }
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(219,39,119,0.65);}
  .nav-toggle{display:none;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;align-items:flex-end;
    padding-top:112px; padding-bottom:clamp(48px,9vh,96px);
    background:var(--white) url('/assets/hero-avatar.webp') center/cover no-repeat;
    overflow:hidden;
  }
  .hero-video{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;}
  .hero-video-overlay{display:none;}
  /* velo apenas perceptible: casi transparente a media altura para que el video
     se siga viendo vívido, un poco más presente arriba (para el nav) y abajo
     (donde vive el texto). Nada de manto oscuro: un susurro, no una máscara. */
  .hero-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(60% 50% at 30% 92%, rgba(8,5,13,0.34), transparent 70%),
      linear-gradient(180deg, rgba(8,5,13,0.24) 0%, rgba(8,5,13,0.04) 26%, rgba(8,5,13,0.05) 55%, rgba(8,5,13,0.4) 100%);
  }
  .hero-bloom{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(48% 38% at 68% 18%, rgba(255,79,166,0.16), transparent 70%);
    mix-blend-mode:screen;
  }
  .hero-textcard{position:relative; z-index:2;}
  .hero-bg-photo{position:absolute; inset:0; z-index:0; opacity:0; filter:saturate(0.7) blur(1px);}
  .hero-bg-photo img{width:100%;height:100%;object-fit:cover;}
  .hero-bg-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg, var(--white) 0%, rgba(255,255,255,0.7) 30%, transparent 60%, var(--white) 100%);}
  #hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0;}
  .hero-inner{position:relative; z-index:3; display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:40px; width:100%;}

  @keyframes blurRise{
    from{opacity:0; filter:blur(16px); transform:translateY(28px);}
    to{opacity:1; filter:blur(0); transform:translateY(0);}
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:14px;
    font-family:var(--font-mono); color:rgba(244,238,248,0.85);
    font-size:clamp(16px,2.1vw,22px); font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
    margin-bottom:26px;
    opacity:0; animation:blurRise 1.05s cubic-bezier(.2,.7,.2,1) .32s forwards;
  }
  .eyebrow .tick{width:22px; height:1px; background:linear-gradient(90deg, transparent, var(--neon-pink)); flex:none;}
  .eyebrow .tick:last-child{background:linear-gradient(90deg, var(--neon-pink), transparent);}
  .hero h1{
    font-size:clamp(42px,5.4vw,72px);line-height:1.02;margin-bottom:22px;letter-spacing:-0.02em;
    color:#fff; font-weight:600;
    opacity:0; animation:blurRise 1.05s cubic-bezier(.2,.7,.2,1) .42s forwards;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--pink);
  }
  .hero p.lead{
    font-family:var(--font-body);font-style:normal;font-weight:600;
    font-size:19px;line-height:1.6;letter-spacing:0;
    color:#fff;
    max-width:460px;margin-bottom:34px;
    opacity:0; animation:blurRise 1.05s cubic-bezier(.2,.7,.2,1) .54s forwards;
  }
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap; opacity:0; animation:blurRise 1.05s cubic-bezier(.2,.7,.2,1) .66s forwards;}
  .btn-primary{
    position:relative; overflow:hidden;
    background:var(--glass-fill-strong);
    background-size:200% 200%;
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    color:#fff;padding:16px 30px;border-radius:100px;font-weight:700;font-size:15px;
    display:inline-flex;align-items:center;gap:10px;
    border:1px solid rgba(255,255,255,0.45);
    box-shadow:var(--glass-shadow-strong);
    transition:transform .3s, background-position .6s, box-shadow .3s;
  }
  .btn-primary::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%);
    mix-blend-mode:overlay;
  }
  .btn-primary:hover{transform:translateY(-3px);background-position:100% 0;box-shadow:0 20px 40px -10px rgba(219,39,119,0.6), inset 0 1px 0 rgba(255,255,255,0.5);}
  .btn-ghost{
    position:relative; overflow:hidden;
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 26px;border-radius:100px;font-weight:700;font-size:15px;color:var(--text-hi);
    background:var(--dark-glass-fill);
    -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    border:var(--dark-glass-border);
    box-shadow:var(--dark-glass-shadow);
    transition:all .3s;
  }
  .btn-ghost::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 28%, rgba(255,255,255,0) 45%);
    mix-blend-mode:overlay;
  }
  .btn-ghost:hover{border-color:var(--neon-pink);transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 30px 60px -28px rgba(0,0,0,0.7), 0 0 50px -16px rgba(255,79,166,0.45);}
  .hero-visual{position:relative; height:520px;}

  @keyframes blurRiseCenterX{
    from{opacity:0; filter:blur(16px); transform:translateX(-50%) translateY(28px);}
    to{opacity:1; filter:blur(0); transform:translateX(-50%) translateY(0);}
  }
  .scroll-cue{
    position:absolute; bottom:34px; left:50%; z-index:4;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:var(--font-mono); color:rgba(244,238,248,0.62); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
    opacity:0; animation:blurRiseCenterX 1.05s cubic-bezier(.2,.7,.2,1) .8s forwards;
  }
  .scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--neon-pink),transparent);animation:scrolldown 1.8s infinite;}
  @keyframes scrolldown{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}50.1%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

  /* ---------- FEATURE STRIP ---------- */
  .strip{
    border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
    background:transparent;
    overflow:hidden;
    padding:26px 0;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .strip-track{
    display:flex; align-items:stretch; gap:20px; width:max-content;
    animation:kf-slide 46s linear infinite;
  }
  @keyframes kf-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  .strip:hover .strip-track{animation-play-state:paused;}
  .strip-item{
    padding:18px 26px; display:flex; align-items:center; gap:14px;
    flex:none; width:280px;
    background:var(--dark-glass-fill);
    -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    border-radius:16px;
    border:var(--dark-glass-border);
    box-shadow:var(--dark-glass-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .strip-item:hover{
    transform:translateY(-3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 34px 64px -26px rgba(0,0,0,0.75), 0 0 54px -16px rgba(255,79,166,0.45);
  }
  .strip-ic{width:38px;height:38px;flex:none;border-radius:10px;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));display:flex;align-items:center;justify-content:center;color:#fff; box-shadow:0 4px 14px -3px rgba(255,79,166,0.55);}
  .strip-item p{font-size:14px;font-weight:700;color:var(--text-hi);}
  .strip-item span{display:block;font-size:12.5px;color:var(--text-lo);font-weight:500;}

  /* ---------- GENERIC SECTION ---------- */
  section{padding:52px 0;}
  .section-head{max-width:640px;margin-bottom:64px;}

  /* ---------- WAVE TEXT: letras de los títulos ondulando ----------
     Amplitud reducida a propósito: con -20px las letras de una línea se
     encimaban con la línea de arriba en títulos de varias líneas (el interlineado
     de los encabezados no tiene tanto espacio libre). Con -5px y algo más de
     interlineado, el vaivén se nota sin que ninguna letra invada la línea vecina. */
  .wave-text{display:block; line-height:1.35 !important;}
  .wave-text .wv-word{display:inline-block; white-space:nowrap;}
  .wave-text .wv{display:inline-block; animation:wave-letters 2s ease-in-out infinite;}
  @keyframes wave-letters{
    0%, 100%{transform:translateY(0);}
    50%{transform:translateY(-5px);}
  }
  .kicker{color:var(--neon-pink);font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;display:block;}
  .section-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.15;margin-bottom:16px;}
  .section-head p{color:var(--text-lo);font-size:16.5px;line-height:1.7;}
  .reveal{opacity:0; transform:translateY(46px); filter:blur(0); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;}
  .reveal.in{opacity:1; transform:translateY(0); filter:blur(0);}
  .reveal[data-reveal="left"]{transform:translateX(-46px);}
  .reveal[data-reveal="left"].in{transform:translateX(0);}
  .reveal[data-reveal="right"]{transform:translateX(46px);}
  .reveal[data-reveal="right"].in{transform:translateX(0);}
  .reveal[data-reveal="scale"]{transform:scale(0.93);}
  .reveal[data-reveal="scale"].in{transform:scale(1);}
  .reveal[data-reveal="blur"]{transform:translateY(16px); filter:blur(9px);}
  .reveal[data-reveal="blur"].in{transform:translateY(0); filter:blur(0);}

  /* ---------- PHILOSOPHY ---------- */
  /* sin fondo ni blur propios: el video queda nítido, solo las tarjetas de abajo llevan vidrio */
  .philosophy{background:transparent;}
  .philosophy .container{display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center;}
  .ph-visual{position:relative; border-radius:32px; overflow:hidden; aspect-ratio:4/5; background:var(--panel-2); border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);}
  .ph-photo{width:100%;height:100%;object-fit:cover;transform:scale(1.14);will-change:transform; filter:saturate(1.08);}
  .ph-photo-overlay{position:absolute; inset:0; background:linear-gradient(200deg, rgba(8,5,13,0.35), transparent 55%); pointer-events:none;}
  .ph-glass-badge{
    position:absolute; left:20px; bottom:20px; z-index:2;
    background:var(--dark-glass-fill-strong); -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);
    color:var(--text-hi); font-family:var(--font-display); font-style:italic; font-weight:500; font-size:16.5px;
    padding:11px 20px; border-radius:100px;
  }
  .ph-copy{
    position:relative;
    background:var(--dark-glass-fill); -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);
    border-radius:var(--dark-glass-radius); padding:48px 44px;
  }
  .ph-copy h2{margin-bottom:20px;}
  .ph-copy p{color:var(--text-lo);font-size:16.5px;line-height:1.75;margin-bottom:18px;}
  .ph-list{margin-top:28px;display:flex;flex-direction:column;gap:16px;}
  .ph-list li{list-style:none;display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--text-hi);font-weight:600;}
  .check{flex:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:2px;}

  /* ---------- RECOMENDACIONES (tarjetas que giran) ---------- */
  .recs{background:transparent;}
  .recs-note{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-lo);background:var(--dark-glass-fill); border:var(--dark-glass-border); border-radius:14px;padding:14px 18px;margin-bottom:36px;max-width:640px;}
  .recs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .rec-card{
    position:relative; perspective:1400px; min-height:360px; cursor:pointer;
    border-radius:32px; outline-offset:4px;
  }
  .rec-card-inner{
    position:relative; width:100%; height:100%; min-height:360px;
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
    transform-style:preserve-3d;
  }
  .rec-card.flipped .rec-card-inner{transform:rotateY(180deg);}
  @media (hover:hover){ .rec-card:hover .rec-card-inner{transform:rotateY(180deg);} }
  .rec-face{
    position:absolute; inset:0; border-radius:32px;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    display:flex; flex-direction:column; overflow:hidden;
    border:var(--dark-glass-border);
    /* evita la línea blanca de antialiasing que Chrome dibuja en bordes redondeados
       dentro de un contexto 3D (preserve-3d): forzamos su propia capa de composición */
    transform:translateZ(0); -webkit-transform:translateZ(0);
    will-change:transform;
  }
  .rec-front{
    background:var(--panel-2);
    box-shadow:var(--dark-glass-shadow);
    transition:box-shadow .35s, transform .35s, border-color .35s;
  }
  .rec-card:hover .rec-front{transform:translateY(-6px) translateZ(0); border-color:var(--edge-bright); box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 34px 64px -26px rgba(0,0,0,0.8), 0 0 60px -16px rgba(255,79,166,0.4);}
  .rec-photo-wrap{position:relative; height:56%; flex:none; overflow:hidden; background:linear-gradient(155deg,var(--panel-2),var(--void)); border-radius:32px 32px 0 0;}
  .rec-photo{display:block; width:100%;height:100%;object-fit:cover; position:relative; z-index:1;}
  .rec-photo-fallback{
    position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(155deg, rgba(255,79,166,0.20), rgba(178,107,255,0.24));
  }
  .rec-ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;box-shadow:0 0 30px -6px rgba(255,79,166,0.6);}
  .rec-front-body{padding:18px 22px 20px; display:flex; flex-direction:column; flex:1; gap:6px;}
  .rec-group{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--neon-pink);}
  .rec-front h3{font-size:17.5px;line-height:1.28;color:var(--text-hi);margin-bottom:auto;}
  .rec-flip-hint{margin-top:12px;font-size:12px;font-weight:700;color:var(--text-lo);display:inline-flex;align-items:center;gap:6px;}
  .rec-back{
    background:rgba(255,255,255,0.55);
    -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    color:var(--ink); transform:rotateY(180deg) translateZ(0); justify-content:center; padding:30px 26px;
    border-color:rgba(255,255,255,0.6);
  }
  .rec-back h3{color:var(--text-hi);font-size:17.5px;margin-bottom:10px;line-height:1.3;}
  .rec-back p{color:var(--ink-soft);font-size:14px;line-height:1.6;}
  .rec-read{margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:100px;font-weight:800;font-size:13.5px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));box-shadow:0 14px 30px -12px rgba(219,39,119,0.6);transition:transform .25s, box-shadow .25s;}
  .rec-read:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(219,39,119,0.75);}
  .rec-read:focus-visible{outline:2px solid var(--neon-pink);outline-offset:3px;}
  @media (max-width:980px){ .recs-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .recs-grid{grid-template-columns:1fr;} .rec-card, .rec-card-inner{min-height:320px;} }
  @media (prefers-reduced-motion:reduce){ .rec-card-inner{transition-duration:.01ms;} }

  /* ---------- PRICING ---------- */
  .pricing{position:relative; overflow:hidden; background:transparent;}
  .pricing .container, .process .container{position:relative; z-index:1;}
  .price-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
  .price-tab{padding:10px 20px;border-radius:100px;font-size:13.5px;font-weight:700;color:var(--text-lo);background:var(--dark-glass-fill);border:var(--dark-glass-border);cursor:pointer;transition:all .25s;}
  .price-tab.active{background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));color:#fff;border-color:transparent; box-shadow:0 10px 26px -8px rgba(255,79,166,0.5);}
  .price-panel{display:none;}
  .price-panel.active{display:block;}
  .lab-note{
    background:var(--dark-glass-fill); border:var(--dark-glass-border); border-radius:32px; padding:30px 28px 8px;
    box-shadow:var(--dark-glass-shadow);
  }
  .lab-note .price-note:first-child{margin-top:0;}
  .price-table{width:100%; border-collapse:collapse; background:var(--panel-2); border:1px solid var(--edge); border-radius:18px; overflow:hidden;}
  .price-table tr{border-bottom:1px solid var(--edge);}
  .price-table tr:last-child{border-bottom:none;}
  .price-table tr:nth-child(even){background:rgba(255,255,255,0.03);}
  .price-table td{padding:16px 22px; font-size:15.5px; font-weight:700; color:var(--text-hi);}
  .price-table td:last-child{text-align:right; font-weight:800; color:var(--neon-pink); white-space:nowrap; font-family:var(--font-body); font-style:normal; font-size:15.5px;}
  .price-note{margin-top:22px; font-size:14.5px; font-weight:700; color:var(--text-hi); display:flex; gap:10px; align-items:flex-start; line-height:1.6;}
  .price-promo{background:var(--dark-glass-fill-strong); border-radius:18px; padding:6px;}
  .price-promo .price-table{border:none; background:transparent;}
  .price-promo .price-table tr:nth-child(even){background:rgba(255,255,255,0.05);}
  .price-promo .price-table tr{background:rgba(255,255,255,0.02);}

  /* ---------- PROCESS ---------- */
  .process{position:relative; overflow:hidden; background:transparent;}
  .proc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
  .proc-grid::before{content:'';position:absolute;top:26px;left:12%;right:12%;height:1px;background:repeating-linear-gradient(90deg, var(--edge) 0 8px, transparent 8px 16px);}
  .proc-step{padding:0 20px;position:relative;}
  .proc-num{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:19px;margin-bottom:24px;position:relative;z-index:1;box-shadow:0 0 30px -6px rgba(255,79,166,0.55);}
  .proc-step h3{font-size:17.5px;margin-bottom:10px;color:var(--text-hi);}
  .proc-step p{font-size:14px;color:var(--text-lo);line-height:1.6;}

  /* ---------- AMBIENT VIDEO CTA ---------- */
  .ambient{position:relative; overflow:hidden; padding:0; background:var(--void);}
  .ambient-wrap{position:relative; min-height:600px; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--void);}
  .ambient video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  /* sin velo: el video se ve tal cual. la tarjeta trae su propio cristal opaco,
     eso basta para leerla sin oscurecer el resto del video. */
  .ambient-vignette{display:none;}
  .ambient-content{position:relative; z-index:2; max-width:640px; padding:44px 40px; color:var(--ink);
    background:rgba(255,255,255,0.72); backdrop-filter:blur(30px) saturate(140%); -webkit-backdrop-filter:blur(30px) saturate(140%); border-radius:32px; border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);}
  .ambient-content .kicker{color:#8A0F49;}
  .ambient-content h2{color:var(--text-hi); font-size:clamp(26px,3.2vw,38px); margin-bottom:16px; font-style:italic;}
  .ambient-content p{color:var(--ink-soft); font-size:16px; line-height:1.7; margin-bottom:28px;}
  .btn-white{
    position:relative; overflow:hidden;
    background:var(--dark-glass-fill-strong); -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);
    color:var(--text-hi); padding:16px 30px; border-radius:100px; font-weight:700; font-size:15px; display:inline-flex; gap:10px; align-items:center; transition:transform .3s, box-shadow .3s;
  }
  .btn-white::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 28%, rgba(255,255,255,0) 45%);
    mix-blend-mode:overlay;
  }
  .btn-white:hover{transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 46px -18px rgba(0,0,0,0.6), 0 0 50px -14px rgba(255,79,166,0.5);}

  /* ---------- TEAM ---------- */
  .team{background:transparent;}
  .team-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;}
  .team-copy{
    position:relative;
    background:var(--dark-glass-fill); -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);
    border-radius:var(--dark-glass-radius); padding:48px 44px;
  }
  .team-photo{border-radius:32px; aspect-ratio:3/3.6; background:var(--panel-2); position:relative; overflow:hidden; border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);}
  .team-photo-img{width:100%;height:100%;object-fit:cover;object-position:center 15%;}
  .team-photo .badge{
    position:absolute; bottom:20px; left:20px; right:auto; max-width:80%; border-radius:18px; padding:15px 20px;
    background:var(--dark-glass-fill-strong); -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);
  }
  .team-photo .badge p{font-weight:800; color:var(--text-hi); font-size:15px;}
  .team-photo .badge span{font-size:12.5px; color:var(--ink-soft);}
  .team-copy blockquote{font-family:var(--font-display); font-style:italic; font-size:24px; line-height:1.5; color:var(--text-hi); margin-bottom:26px;}
  .team-copy .cred{display:flex; gap:14px; align-items:center; margin-bottom:30px;}
  .cred-dot{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple)) center/cover;flex:none;}
  .cred-name{font-weight:800;color:var(--text-hi);font-size:15px;}
  .cred-role{font-size:13px;color:var(--text-lo);}
  .cred-legal{font-size:11.5px;color:var(--text-lo);opacity:0.8;margin-top:2px;letter-spacing:0.01em;}
  .tag-row{display:flex;gap:10px;flex-wrap:wrap;}
  .tag{background:var(--dark-glass-fill);border:var(--dark-glass-border);padding:8px 16px;border-radius:100px;font-size:13px;font-weight:600;color:var(--text-lo);}

  /* ---------- TRUST GALLERY ---------- */
  .gallery{position:relative; overflow:hidden; background:transparent;}
  .gallery .section-head{position:relative; z-index:1;}
  .gallery-tag{position:absolute; left:16px; bottom:16px; background:var(--dark-glass-fill-strong); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.6); color:var(--text-hi); font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:100px;}

  /* ---------- CARRUSEL DE INSTALACIONES: ACORDEÓN ----------
     Adaptado del carrusel que pasó la clienta (tarjetas que se expanden en fila
     al pasar el mouse o estar activas, texto grande que entra desde la
     izquierda). Se conserva esa mecánica y timing tal cual. A petición de la
     clienta se quitó por completo el degradado de color que el código original
     ponía encima de cada foto (y el filtro que las desaturaba): las fotos se
     ven en su color natural, sin ninguna capa encima, solo con el texto.
     --height/--width se acotan para vivir dentro de una sección (el original
     usaba 80vh pensado para ocupar toda la pantalla). No se copió el reset de
     <body>/<html> del código porque rompería el resto del sitio. */
  .ig-carousel{
    --ig-height: min(44vh, 340px);
    --ig-width: min(76vw, 280px);
    display:grid;
    transform:translate3d(0,0,0.1px);
    margin-top:24px;
  }
  .ig-carousel__list{
    display:flex;
    overflow:hidden;
    list-style:none;
    padding:2em 0 0.5em;
    margin:0;
    contain:layout;
    isolation:isolate;
  }
  .ig-carousel__item{
    display:grid;
    position:relative;
    align-content:start;
    margin:0 8px;
    padding:0;
    flex:1 1 10%;
    height:var(--ig-height);
    overflow:hidden;
    background:rgba(255,255,255,0.2);
    border-radius:16px;
    transform:translate3d(0,0,0.1px);
    box-shadow: rgba(0,0,0,0.4) 0 3px 15px 2px, rgba(0,0,0,0.2) 0 12px 28px 0, rgba(0,0,0,0.1) 0 2px 4px 0, rgba(255,255,255,0.05) 0 0 0 1px inset;
    contain:layout;
    isolation:isolate;
    cursor:pointer;
  }
  .ig-carousel__item,
  .ig-carousel__item *{
    transition: all .5s cubic-bezier(.4,0,.2,1);
    user-select:none;
  }
  .ig-carousel__item:hover{
    flex-basis: calc( var(--ig-width) / 2 );
    transition: all 0.3s ease;
  }
  .ig-carousel__item[data-active]{
    flex-basis: var(--ig-width);
    flex-grow: 0;
  }
  .ig-carousel__image{
    display:block; position:absolute; width:var(--ig-width); height:100%;
    left:50%; top:50%; transform:translate(-50%,-50%); z-index:-1;
    aspect-ratio:2/3; object-fit:cover;
  }

  .ig-carousel__contents{
    display:flex; flex-direction:column-reverse; justify-content:start;
    min-height:140px; padding:1em; z-index:2;
    background-image: radial-gradient( ellipse at 0px 0px, rgba(0,0,0,0.4) 20%, transparent 50% );
    background-size:170% 160px; background-repeat:no-repeat;
    position:absolute; top:0; left:0;
  }
  .ig-carousel__name{
    margin:0; line-height:1.15; opacity:0; transform:translateX(-200px);
    transition-duration:1s; max-width:18em;
    color:#fff; font-family:var(--font-display); font-size:1.5em; font-weight:600;
    letter-spacing:.4px; text-shadow:0 1px 0 rgba(0,0,0,0.3);
  }
  [data-active] .ig-carousel__contents *{ transform:translateX(0px); transition-duration:.66s; opacity:1; }
  [data-active] .ig-carousel__contents .ig-carousel__name{ transition-delay:.1s; }

  .ig-carousel__nav{ margin-top:18px; display:flex; justify-content:center; gap:14px; }
  .ig-btn{
    --size:44px; flex:none; width:var(--size); height:var(--size); border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--dark-glass-fill); border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);
    color:var(--text-hi); font-size:20px; cursor:pointer;
    opacity:0.7; transition:opacity 250ms cubic-bezier(.215,.61,.355,1);
  }
  .ig-btn:hover{opacity:1;}
  .ig-dots{display:flex; gap:8px; justify-content:center; margin-top:16px;}
  .ig-dot{width:8px;height:8px;border-radius:50%;background:var(--edge-bright);border:none;cursor:pointer;padding:0;transition:background .25s, transform .25s;}
  .ig-dot.active{background:var(--neon-pink); transform:scale(1.3);}
  @media screen and (max-width:800px){
    .ig-carousel__item{flex-basis:15%;}
  }
  @media screen and (max-width:600px){
    .ig-carousel{--ig-width:min(70vw,240px);}
    .ig-carousel__item{flex-basis:10%; margin:0 4px; border-radius:10px;}
    .ig-carousel__item[data-active]{flex-basis:60%; flex-grow:0;}
  }
  @media (prefers-reduced-motion:reduce){ .ig-carousel__item, .ig-carousel__item *{transition-duration:.01ms;} }

  /* ---------- TESTIMONIALS ---------- */
  .testi{background:transparent;}
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .testi-card{
    background:var(--dark-glass-fill); border:var(--dark-glass-border); border-radius:32px; padding:30px 26px;
    box-shadow:var(--dark-glass-shadow);
    transition:box-shadow .35s ease, transform .35s ease, border-color .35s ease;
  }
  .testi-card:hover{ transform:translateY(-4px); border-color:var(--edge-bright); box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 30px 60px -26px rgba(0,0,0,0.7), 0 0 50px -18px rgba(178,107,255,0.4); }
  .testi-stars{color:var(--neon-pink); font-size:14px; letter-spacing:2px; margin-bottom:16px;}
  .testi-card p{font-size:15px; line-height:1.7; color:var(--text-hi); margin-bottom:22px;}
  .testi-who{display:flex;align-items:center;gap:12px;}
  .testi-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));}
  .testi-name{font-weight:800;font-size:13.5px;color:var(--text-hi);}
  .testi-loc{font-size:12px;color:var(--text-lo);}

  /* ---------- STANDARDS BANNER ---------- */
  .standards{position:relative; min-height:480px; display:flex; align-items:center; overflow:hidden;}
  .standards-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.18); will-change:transform;}
  .standards-duotone{position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(10,8,14,0.72) 0%, rgba(10,8,14,0.42) 40%, rgba(10,8,14,0.12) 65%, rgba(10,8,14,0) 85%);}
  .standards-content{position:relative; z-index:2; max-width:640px; padding:70px 32px;}
  .standards-content h2{color:#fff; font-size:clamp(26px,3.4vw,40px); margin:14px 0 16px;}
  .standards-content p{color:rgba(255,255,255,0.88); font-size:16px; line-height:1.7; margin-bottom:38px;}
  .standards-stats{display:flex; gap:40px; flex-wrap:wrap;}
  .standards-stats strong{display:block; font-family:var(--font-display); font-size:34px; color:#fff; margin-bottom:4px;}
  .standards-stats span{font-size:13px; color:rgba(255,255,255,0.8); font-weight:600;}

  /* ---------- FLOATING WHATSAPP CHATBOT ---------- */
  .wa-float{
    position:fixed; right:24px; bottom:24px; z-index:200;
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 20px 14px 14px; border-radius:100px;
    background:linear-gradient(135deg, rgba(37,211,102,0.55), rgba(18,140,126,0.55));
    -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
    border:1px solid rgba(255,255,255,0.55);
    box-shadow:0 10px 22px -8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
    color:#fff; font-weight:800; font-size:14.5px;
    transition:transform .3s, box-shadow .3s;
    overflow:hidden;
  }
  .wa-float::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%);
    mix-blend-mode:overlay;
  }
  .wa-float:hover{transform:translateY(-4px) scale(1.03); box-shadow:0 16px 30px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);}
  .wa-float .wa-ic{
    width:34px;height:34px;border-radius:50%;flex:none;
    background:rgba(255,255,255,0.25); display:flex;align-items:center;justify-content:center;font-size:18px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .wa-float .wa-pulse{
    position:absolute; inset:0; border-radius:100px; border:1.5px solid rgba(255,255,255,0.55);
    animation:wa-pulse 2.4s infinite;
  }
  @keyframes wa-pulse{0%{opacity:0.7;transform:scale(1);}100%{opacity:0;transform:scale(1.18);}}
  @media (max-width:640px){
    .wa-float{right:16px; bottom:16px; padding:12px 18px 12px 12px; font-size:13.5px;}
    .wa-float .wa-ic{width:30px;height:30px;font-size:16px;}
  }

  /* ---------- FAQ ---------- */
  .faq{background:transparent;}
  .faq-list{max-width:780px;}
  .faq-item{border-bottom:1px solid var(--edge);}
  .faq-q{padding:24px 4px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:700; color:var(--text-hi); font-size:16px;}
  .faq-plus{width:26px;height:26px;flex:none;border-radius:50%;background:var(--dark-glass-fill);border:var(--dark-glass-border);display:flex;align-items:center;justify-content:center;transition:transform .3s;color:var(--neon-pink);font-size:16px;}
  .faq-item.open .faq-plus{transform:rotate(45deg);}
  .faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.22,.68,0,1); font-size:14.5px; color:var(--text-lo); line-height:1.7;}
  .faq-a > div{min-height:0; overflow:hidden;}
  .faq-item.open .faq-a{grid-template-rows:1fr;}
  .faq-item.open .faq-a > div{padding-bottom:24px;}

  /* ---------- FINAL CTA ---------- */
  .final-cta{
    background:transparent;
    text-align:center; color:var(--text-hi); position:relative; overflow:hidden; padding:96px 0;
  }
  .final-ring{position:absolute; border-radius:50%; border:1.5px solid rgba(178,107,255,0.22);}
  .final-ring.r1{width:640px;height:640px; top:-260px; right:-220px;}
  .final-ring.r2{width:420px;height:420px; bottom:-200px; left:-140px; border-color:rgba(255,79,166,0.18);}
  .final-dot{position:absolute; width:70px;height:70px;border-radius:50%; background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple)); right:14%; bottom:18%; box-shadow:0 0 50px -8px rgba(255,79,166,0.6); opacity:0.9;}
  .final-cta .kicker{color:var(--neon-pink);}
  .final-cta h2{color:var(--text-hi); font-size:clamp(30px,4vw,48px); margin-bottom:18px; position:relative; z-index:1;}
  .final-cta p{color:var(--text-lo); font-size:17px; max-width:520px; margin:0 auto 40px; position:relative; z-index:1;}

  .btn3d-grid{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; margin-bottom:36px;}
  .btn-3d{
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--dark-glass-fill); color:var(--text-hi);
    -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    padding:18px 32px; border-radius:16px; font-weight:800; font-size:15px;
    box-shadow: var(--dark-glass-shadow);
    transform:translateY(0); transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    border:var(--dark-glass-border);
  }
  .btn-3d::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 28%, rgba(255,255,255,0) 45%);
    mix-blend-mode:overlay;
  }
  .btn-3d:hover{transform:translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 30px 56px -24px rgba(0,0,0,0.75), 0 0 50px -16px rgba(255,79,166,0.4);}
  .btn-3d:active{transform:translateY(1px);}
  /* cada botón se tiñe de un color distinto al pasar el mouse o estar activo, para diferenciarlos de un vistazo */
  .btn-3d-whatsapp:hover, .btn-3d-whatsapp:focus-visible, .btn-3d-whatsapp:active{background:rgba(37,211,102,0.85); color:#fff; border-color:rgba(255,255,255,0.5);}
  .btn-3d-precios:hover, .btn-3d-precios:focus-visible, .btn-3d-precios:active{background:rgba(59,130,246,0.85); color:#fff; border-color:rgba(255,255,255,0.5);}
  .btn-3d-instalaciones:hover, .btn-3d-instalaciones:focus-visible, .btn-3d-instalaciones:active{background:rgba(249,168,212,0.85); color:var(--purple-deep); border-color:rgba(255,255,255,0.6);}
  .btn-3d-primary{
    background:var(--glass-fill-strong);
    color:#fff;
    box-shadow: var(--glass-shadow-strong);
    border:1px solid rgba(255,255,255,0.4);
  }
  .btn-3d-primary:hover{box-shadow: 0 0 60px -12px rgba(255,79,166,0.7), inset 0 1px 0 rgba(255,255,255,0.2);}
  .btn-3d-primary:active{transform:translateY(1px);}

  .final-info{display:flex; flex-direction:column; align-items:center; gap:14px; position:relative; z-index:1; max-width:900px; width:100%; margin:0 auto;}
  .final-info-row{display:flex; gap:28px; justify-content:center; flex-wrap:wrap; font-size:16.5px; color:var(--text-hi); font-weight:800;}
  .hours-title{font-size:13px; font-weight:800; letter-spacing:.04em; color:var(--text-hi); text-transform:uppercase;}
  /* siete columnas parejas, siempre en una sola fila; en pantallas angostas
     se recorre con scroll horizontal en vez de saltar a una segunda línea */
  .hours-table{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px; width:100%;}
  .hours-day{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    min-width:0; width:100%; padding:12px 8px;
    background:var(--dark-glass-fill); -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    border:var(--dark-glass-border); border-radius:16px; box-shadow:var(--dark-glass-shadow);
  }
  .hours-day-label{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--neon-pink);}
  .hours-day-time{font-size:12px; font-weight:700; color:var(--text-hi); text-align:center; line-height:1.3; word-break:break-word;}
  @media (max-width:720px){
    .hours-table{display:flex; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
    .hours-day{flex:0 0 104px; width:104px;}
  }

  /* ---------- SOCIAL CONTACT CARD (Uiverse.io by vinodjangid07, adapted) ---------- */
  .contact-widgets{
    display:flex; gap:24px; align-items:flex-start; justify-content:center; flex-wrap:wrap;
    max-width:900px; margin:36px auto 0; position:relative; z-index:1;
  }
  .contact-widgets .map-card{ flex:1 1 420px; margin:0; }
  .social-card{
    position:relative; width:200px; height:200px; flex:none;
    background:var(--panel-2); border-radius:30px; overflow:hidden;
    box-shadow:0 20px 50px -20px rgba(0,0,0,0.7);
    transition:all 1s ease-in-out; border:2px solid rgba(255,255,255,0.14);
  }
  .social-bg{
    position:absolute; inset:0; background-color:var(--pink-deep);
    background-image:linear-gradient(43deg, var(--pink-deep) 0%, var(--purple-soft) 46%, var(--lavender) 100%);
  }
  .social-logo{
    position:absolute; right:50%; bottom:50%; transform:translate(50%, 50%);
    transition:all .6s ease-in-out;
  }
  .social-logo-svg{ fill:#fff; width:32px; height:32px; display:block; }
  .social-icon{ display:inline-block; width:22px; height:22px; }
  .social-icon-svg{ fill:rgba(255,255,255,0.8); color:rgba(255,255,255,0.8); width:100%; height:100%; transition:all .5s ease-in-out; }
  .social-box{
    position:absolute; padding:10px; text-align:right;
    background:rgba(255,255,255,0.389);
    border-top:2px solid rgb(255,255,255); border-right:1px solid white;
    border-radius:10% 13% 42% 0%/10% 12% 75% 0%;
    box-shadow:rgba(100,100,111,0.364) -7px 7px 29px 0px;
    transform-origin:bottom left; transition:all 1s ease-in-out;
    text-decoration:none; color:inherit;
  }
  .social-box::before{
    content:""; position:absolute; inset:0; border-radius:inherit;
    opacity:0; transition:all .5s ease-in-out;
  }
  .social-box:hover .social-icon-svg{ fill:#fff; color:#fff; }
  .social-box1{ width:70%; height:70%; bottom:-70%; left:-70%; }
  .social-box1::before{ background:radial-gradient(circle at 30% 107%, var(--lavender) 0%, var(--pink) 5%, var(--pink-deep) 60%, var(--purple) 90%); }
  .social-box1:hover::before{ opacity:1; }
  .social-box1:hover .social-icon-svg{ filter:drop-shadow(0 0 5px white); }
  .social-box2{ width:50%; height:50%; bottom:-50%; left:-50%; transition-delay:.2s; }
  .social-box2::before{ background:radial-gradient(circle at 30% 107%, var(--lavender) 0%, var(--purple-soft) 90%); }
  .social-box2:hover::before{ opacity:1; }
  .social-box2:hover .social-icon-svg{ filter:drop-shadow(0 0 5px white); }
  .social-box3{ width:30%; height:30%; bottom:-30%; left:-30%; transition-delay:.4s; }
  .social-box3::before{ background:radial-gradient(circle at 30% 107%, var(--pink) 0%, var(--purple-deep) 90%); }
  .social-box3:hover::before{ opacity:1; }
  .social-box3:hover .social-icon-svg{ filter:drop-shadow(0 0 5px white); }
  .social-box4{ width:10%; height:10%; bottom:-10%; left:-10%; transition-delay:.6s; pointer-events:none; }
  .social-card:hover{ transform:scale(1.06); }
  .social-card:hover .social-box{ bottom:-1px; left:-1px; }
  .social-card:hover .social-logo{ transform:translate(58px, -46px); }
  @media (max-width:720px){
    .contact-widgets{ flex-direction:column; align-items:center; }
    .contact-widgets .map-card{ width:100%; max-width:420px; }
  }

  .map-card{
    max-width:640px; margin:36px auto 0; position:relative; z-index:1; text-align:left;
    background:var(--dark-glass-fill); -webkit-backdrop-filter:var(--dark-glass-blur); backdrop-filter:var(--dark-glass-blur);
    border-radius:32px; border:var(--dark-glass-border); box-shadow:var(--dark-glass-shadow);
    padding:22px;
  }
  .map-card-note{display:flex; flex-direction:column; gap:10px; font-size:13.5px; color:var(--text-lo); line-height:1.6; margin-bottom:16px;}
  .map-card-note span{display:block;}
  .map-card-note span:first-child{font-weight:800; color:var(--text-hi);}
  .map-card iframe{width:100%; height:280px; border-radius:16px; display:block;}
  .map-card-cta{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-weight:700; font-size:14px; color:var(--neon-pink);}
  @media (max-width:560px){
    .map-card{padding:16px;}
    .map-card iframe{height:220px;}
  }

  /* ---------- FOOTER ---------- */
  footer{background:linear-gradient(160deg,#7A2065,var(--purple-deep)); color:rgba(255,255,255,0.75); padding:48px 0 22px;}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,0.12);}
  .foot-brand{font-family:var(--font-display); color:#fff; font-size:22px; margin-bottom:12px;}
  .foot-grid p.desc{font-size:13.5px; line-height:1.6; max-width:280px; color:rgba(255,255,255,0.65);}
  .foot-col h4{color:#fff; font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px;}
  .foot-col a{display:block; font-size:14px; margin-bottom:10px; color:rgba(255,255,255,0.68); transition:color .25s;}
  .foot-col a:hover{color:var(--pink);}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:18px; font-size:13px; color:rgba(255,255,255,0.5); flex-wrap:wrap; gap:14px;}
  .foot-socials{display:flex; gap:12px;}
  .foot-socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;transition:background .25s;}
  .foot-socials a:hover{background:var(--pink-deep);}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .nav-links{display:none;}
    .hero-inner{grid-template-columns:1fr;}
    /* el bloque visual del héroe está vacío: en pantallas chicas solo empujaba el texto */
    .hero-visual{display:none;}
    /* el recorte vertical del video se queda con la doctora, no con el fondo */
    .hero-video{object-position:78% 26%;}
    .hero-textcard{border-radius:24px; margin:0 -4px;}
    .hero{min-height:100svh; align-items:flex-start; padding-top:126px; padding-bottom:32px;}
    /* la flecha de bajar chocaba con el enlace: en pantallas chicas sobra */
    .scroll-cue{display:none;}
    .hero-inner{gap:0;}
    .hero-actions{gap:12px;}
    .hero-actions .btn-primary,.hero-actions .btn-whatsapp,.hero-actions .btn-call{flex:1 1 150px; justify-content:center;}
    .philosophy .container, .team-grid{grid-template-columns:1fr;}
    .testi-grid{grid-template-columns:1fr;}
    .proc-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
    .proc-grid::before{display:none;}
    .foot-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
  }
  @media (max-width:560px){
    section{padding:40px 0;}
    .proc-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .hero{padding-top:120px;}
    .strip-item{width:230px; padding:16px 20px;}
    /* menos contenido en el héroe: que quepa sin chocar con el botón flotante de WhatsApp */
    .hero-actions{flex-direction:column;}
    .hero-actions .btn-whatsapp,.hero-actions .btn-call{flex:1 1 auto; width:100%;}
    /* el texto del kicker se parte en dos líneas en pantallas angostas: las líneas
       decorativas a los lados quedan raras al envolver, mejor solo el texto */
    .eyebrow .tick{display:none;}
  }

  /* ---------- COOKIES / AVISO DE PRIVACIDAD ---------- */
  .legal-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:500;
    display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
    background:rgba(74,25,66,0.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    color:#fff; padding:16px 24px; box-shadow:0 -8px 30px -10px rgba(0,0,0,0.4);
    transform:translateY(120%); transition:transform .5s ease;
  }
  .legal-bar.show{transform:translateY(0);}
  .legal-bar p{margin:0; font-size:13.5px; line-height:1.6; max-width:640px; color:rgba(255,255,255,0.9);}
  .legal-bar a{color:var(--pink); text-decoration:underline; cursor:pointer;}
  .legal-bar-actions{display:flex; gap:10px; flex:none;}
  .legal-btn{border:none; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:100px;}
  .legal-btn-accept{background:var(--pink-deep); color:#fff;}
  .legal-btn-reject{background:transparent; color:rgba(255,255,255,0.75); border:1px solid rgba(255,255,255,0.35);}
  @media (max-width:640px){ .legal-bar{flex-direction:column; align-items:stretch; text-align:left;} .legal-bar-actions{justify-content:flex-end;} }

  .legal-modal-overlay{
    position:fixed; inset:0; z-index:600; background:rgba(74,25,66,0.55);
    display:none; align-items:center; justify-content:center; padding:24px;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  .legal-modal-overlay.open{display:flex;}
  .legal-modal{
    background:#fff; border-radius:20px; max-width:640px; width:100%; max-height:80vh; overflow-y:auto;
    padding:32px; box-shadow:0 30px 60px -12px rgba(74,25,66,0.4); position:relative;
  }
  .legal-modal h3{margin:0 0 14px; font-size:22px; color:var(--purple-deep);}
  .legal-modal h4{font-family:var(--font-body); font-size:14px; color:var(--pink-deep); margin:18px 0 6px;}
  .legal-modal p, .legal-modal li{font-size:14px; line-height:1.7; color:#6b5877;}
  .legal-modal-close{position:absolute; top:18px; right:18px; width:32px;height:32px;border-radius:50%; border:none; background:var(--blush); color:var(--purple-deep); font-size:16px; cursor:pointer;}

  /* ---------- LEYENDA COFEPRIS ---------- */
  .cofepris-note{
    display:flex; align-items:flex-start; gap:8px; margin-top:14px; font-size:12px;
    color:rgba(255,255,255,0.55); line-height:1.6; max-width:340px;
  }

  /* ============ AÑADIDOS 10K (sin tocar la identidad) ============ */

  /* botón rojo de Llamadas, con el mismo vidrio líquido de la marca */
  .btn-call{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(220,38,38,0.90), rgba(153,27,27,0.90));
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    color:#fff; padding:16px 30px; border-radius:100px; font-weight:700; font-size:15px;
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid rgba(255,255,255,0.45);
    box-shadow:0 10px 22px -8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
    transition:transform .3s, box-shadow .3s;
  }
  .btn-call::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%);
    mix-blend-mode:overlay;
  }
  .btn-call:hover{transform:translateY(-3px); box-shadow:0 16px 30px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);}

  /* botón verde de WhatsApp para "Agenda cita", junto al rojo de Llamadas */
  .btn-whatsapp{
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, rgba(37,211,102,0.92), rgba(11,110,79,0.92));
    -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
    color:#fff; padding:16px 30px; border-radius:100px; font-weight:700; font-size:15px;
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid rgba(255,255,255,0.45);
    box-shadow:0 10px 22px -8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
    transition:transform .3s, box-shadow .3s;
  }
  .btn-whatsapp::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0) 50%);
    mix-blend-mode:overlay;
  }
  .btn-whatsapp:hover{transform:translateY(-3px); box-shadow:0 16px 30px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5);}

  /* galería: el clip real del consultorio y la tira de fotos */
  .gallery-film{
    position:relative; margin:0 0 20px; border-radius:32px; overflow:hidden;
    box-shadow:var(--dark-glass-shadow); aspect-ratio:16/9;
    background:var(--panel-2);
    border:var(--dark-glass-border);
  }
  .gallery-film video{width:100%; height:100%; object-fit:cover; display:block;}
  .gallery-film figcaption{margin:0;}

  /* salto al contenido, para teclado y lectores de pantalla */
  .skip-link{
    position:absolute; left:16px; top:-90px; z-index:900;
    background:var(--purple-deep); color:#fff; padding:12px 22px;
    border-radius:0 0 14px 14px; font-weight:700; font-size:14px;
    transition:top .25s ease;
  }
  .skip-link:focus{top:0;}

  /* foco visible en toda la página */
  a:focus-visible, button:focus-visible, .price-tab:focus-visible, .faq-q:focus-visible, .rec-card:focus-visible{
    outline:3px solid var(--pink-deep); outline-offset:3px; border-radius:6px;
  }

  /* la página nunca se arrastra de lado */
  html{overflow-x:hidden; overflow-x:clip;}
  body{overflow-x:hidden; overflow-x:clip;}

  /* áreas táctiles cómodas en pantallas de dedo */
  @media (pointer:coarse){
    .btn-primary,.btn-whatsapp,.btn-ghost,.btn-white,.btn-3d,.btn-call,.nav-cta,.price-tab,.legal-btn{
      min-height:46px; display:inline-flex; align-items:center; justify-content:center;
    }
    .faq-q{min-height:56px;}
  }

  /* pausa total cuando la pestaña está oculta */
  body.paused *, body.paused *::before, body.paused *::after{animation-play-state:paused !important;}

  /* movimiento reducido, honrado de verdad */
  @media (prefers-reduced-motion: reduce){
    /* los videos SIEMPRE se ven: la doctora los quiere permanentes.
       el movimiento reducido solo apaga los adornos, no el contenido.
       la barra de noticias (#stripTrack) tampoco se apaga: ver la exclusión arriba. */
    .reveal{opacity:1 !important; transform:none !important; filter:none !important;}
  }

  [hidden]{display:none !important;}

  /* ============ MICROINTERACCIONES HECHAS A MANO ============ */

  /* grano de película: una sola capa fija y sutil sobre TODA la página,
     para que las secciones planas de abajo tengan la misma textura del video. */
  .grain{
    position:fixed; inset:0; z-index:6; 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='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  }
  @media (prefers-reduced-motion:reduce){ .grain{opacity:.035;} }

  /* regla de latón que se dibuja sola bajo cada kicker, al entrar en pantalla */
  .kicker{position:relative; display:inline-block;}
  .kicker::after{
    content:''; position:absolute; left:0; bottom:-7px; height:2px; width:100%;
    background:linear-gradient(90deg,var(--brass),transparent);
    transform:scaleX(0); transform-origin:left center;
    transition:transform 1.1s cubic-bezier(.16,.84,.2,1) .15s;
  }
  .reveal.in .kicker::after, .kicker.reveal.in::after{transform:scaleX(1);}
  @media (prefers-reduced-motion:reduce){ .kicker::after{transition-duration:.01ms;} }

  /* costura entre secciones: un hilo que cruza la página, cosido a mano */
  .thread{display:none;}
  .thread svg{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1240px,92%); height:46px;}
  .thread path{fill:none; stroke:var(--pink); stroke-width:1.4; stroke-dasharray:1 9; stroke-linecap:round; opacity:.55;}
  .thread .knot{fill:var(--purple); opacity:.5;}

  /* topografía de la visita: curvas de nivel muy tenues, solo en Instalaciones */
  .topo{position:absolute; left:-4%; right:-4%; top:-8%; height:420px; z-index:0; pointer-events:none; opacity:.22;}
  .topo path{fill:none; stroke:var(--purple); stroke-width:1;}
  .topo{animation:topobreathe 60s ease-in-out -14s infinite;}
  @keyframes topobreathe{0%,100%{transform:scale(1) translateY(0);}50%{transform:scale(1.025) translateY(-6px);}}
  @media (prefers-reduced-motion:reduce){ .topo{animation:none;} }
  /* misma topografía, apenas insinuada: para que Precios y Proceso no queden lisas
     sin repetir el protagonismo que tiene en Instalaciones */
  .topo.faint{opacity:.09;}

  /* palabras que responden al cursor en los títulos de sección.
     el desplazamiento lo pone el JS directo en .style.transform (no una variable CSS):
     así funciona igual en cualquier navegador, sin depender de que resuelva var() en vivo. */
  .mw{
    display:inline-block;
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }