/* lg-profundidad.css — compartido por 20 páginas.
   Antes estaba copiado dentro de cada HTML. Edítalo AQUÍ y cambia en todas. */
/* ═══════════════════════════════════════════════
     LG DEPTH 2026 — capa de profundidad compartida
     Luz de escena · grano · materiales · micro-acabados
  ═══════════════════════════════════════════════ */

  /* ── Luz de escena: key light cenital + rebote cálido + viñeta cine ── */
  body::before{content:'';position:fixed;inset:0;z-index:9590;pointer-events:none;background:radial-gradient(110% 55% at 50% -12%,rgba(234,234,232,.05),transparent 62%),radial-gradient(70% 45% at 88% 112%,rgba(232,186,30,.04),transparent 65%),radial-gradient(140% 140% at 50% 45%,transparent 64%,rgba(0,0,0,.26) 100%);}

  /* ── Grano de película global ── */
  body::after{content:'';position:fixed;inset:0;width:100%;height:100%;z-index:9600;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:280px 280px;opacity:.05;mix-blend-mode:overlay;}

  /* ── Scrollbar, selección y accent de marca ── */
  html{scrollbar-width:thin;scrollbar-color:#3a3a3a #161616;}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:#161616;}
  ::-webkit-scrollbar-thumb{background:#3a3a3a;border:3px solid #161616;}
  ::-webkit-scrollbar-thumb:hover{background:#E8BA1E;}
  ::-webkit-scrollbar-corner{background:#161616;}
  ::selection{background:#E8BA1E;color:#161616;text-shadow:none;}
  :root{accent-color:#E8BA1E;}
  input,textarea{caret-color:#E8BA1E;}

  /* ── Micro-tipografía óptica ── */
  body{font-kerning:normal;text-rendering:optimizeLegibility;font-synthesis:none;}
  .stat__num,.numero__val,.strip__num,.stats__num{font-variant-numeric:lining-nums tabular-nums;}

  /* ── Profundidad de dos luces en display XXL ── */
  h1,h2{text-shadow:0 1px 0 rgba(255,255,255,.05),0 2px 3px rgba(0,0,0,.35),0 18px 45px rgba(0,0,0,.38);}
  .contact.is-white h2,.contacto.is-white h2{text-shadow:none;}

  /* ── Los CTAs se encienden: sombra de color contenida ── */
  .btn-line,.btn-outline,.navbar__cta,.card__submit,.contacto__send,.contact__send,.ctp-submit,.svc-cta,.ins-cta,.hlnk--main,.btn-primary{box-shadow:0 0 0 0 rgba(232,186,30,0);transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease,cubic-bezier(.16,1,.3,1)),letter-spacing .35s,opacity .3s,box-shadow .45s var(--ease,cubic-bezier(.16,1,.3,1));}
  .btn-line:hover,.btn-outline:hover,.navbar__cta:hover,.card__submit:hover,.contacto__send:hover,.contact__send:hover,.ctp-submit:hover,.svc-cta:hover,.ins-cta:hover,.hlnk--main:hover,.btn-primary:hover{box-shadow:0 12px 36px -12px rgba(232,186,30,.35),0 2px 10px -4px rgba(232,186,30,.18);}

  /* ── Tags: borde que se enciende con halo corto ── */
  .svc__tag,.svc-tag,.servicio__tag,.case-card__tag,.case__tags span,.acm-item__tags span,.tag{transition:border-color .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,transform .5s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .5s ease;}
  .svc__tag:hover,.svc-tag:hover,.servicio__tag:hover,.tag:hover{box-shadow:inset 0 0 10px -6px rgba(232,186,30,.35),0 0 14px -8px rgba(232,186,30,.5);}

  /* ── Membership card: material con luz, halo y sombras en capas ── */
  .card-wrap{position:relative;}
  .card-wrap::before{content:'';position:absolute;inset:-14% -20%;z-index:-1;pointer-events:none;background:radial-gradient(58% 55% at 50% 45%,rgba(232,186,30,.09),transparent 70%);}
  .membership-card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 34%),linear-gradient(180deg,#1f1f1f,#191919);box-shadow:inset 0 1px 0 rgba(234,234,232,.08),0 1px 1px rgba(0,0,0,.3),0 4px 8px rgba(0,0,0,.28),0 16px 32px rgba(0,0,0,.34),0 56px 110px rgba(0,0,0,.5),0 0 90px -30px rgba(232,186,30,.12);}
  .card__input{background:rgba(22,22,22,.55);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 0 rgba(234,234,232,.04);}

  /* ── Marquees que se funden en la penumbra ── */
  .ticker,.brands,.marcas{position:relative;}
  .ticker::before,.ticker::after,.brands::before,.brands::after,.marcas::before,.marcas::after{content:'';position:absolute;top:0;bottom:0;width:clamp(60px,12vw,160px);z-index:6;pointer-events:none;}
  .ticker::before{left:0;background:linear-gradient(to right,#1d1d1d,transparent);}
  .ticker::after{right:0;background:linear-gradient(to left,#1d1d1d,transparent);}
  .brands::before,.marcas::before{left:0;background:linear-gradient(to right,#161616,transparent);}
  .brands::after,.marcas::after{right:0;background:linear-gradient(to left,#161616,transparent);}

  /* ── El footer amarillo irradia hacia la sección anterior ── */

  /* ── Formulario: el punto de conversión es el más iluminado ── */
  .cfield::after{transition:transform .45s var(--ease,cubic-bezier(.16,1,.3,1)),box-shadow .4s ease;}
  .cfield:focus-within::after{box-shadow:0 0 18px 1px rgba(232,186,30,.3);}
  .cfield:focus-within{background:linear-gradient(to top,rgba(232,186,30,.045),transparent 65%);}
  .contact.is-white .cfield:focus-within{background:linear-gradient(to top,rgba(232,186,30,.1),transparent 65%);}
  .contact.is-white .cfield:focus-within::after{box-shadow:0 0 14px 1px rgba(232,186,30,.35);}

  /* ── Focus visible brutalista de doble anillo ── */
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #E8BA1E;outline-offset:3px;}
  :where(a,button):focus:not(:focus-visible){outline:none;}
  :is(input,textarea,select):focus-visible{outline:1px solid #E8BA1E;outline-offset:0;}

  /* ── Subrayado wipe bicolor en links de texto plano ── */
  :where(main) a:not([class]){text-decoration:none;background-image:linear-gradient(currentColor,currentColor),linear-gradient(#E8BA1E,#E8BA1E);background-size:100% 1px,0% 1px;background-position:100% calc(100% - .08em),0 calc(100% - .08em);background-repeat:no-repeat;padding-bottom:.12em;transition:background-size .45s cubic-bezier(.22,1,.36,1);}
  :where(main) a:not([class]):hover{background-size:0% 1px,100% 1px;}


  /* ── Footer sin animación de entrada: wordmark y gif siempre visibles ── */
  /* ── Selector de idioma del footer (ES activo · EN listo para cuando toque) ── */
  @media (prefers-reduced-motion:reduce){body::after{animation:none;}}