/* Ambiente de color del sitio.
   El fondo nunca es negro plano: una capa fija con tres focos de color de marca
   vive detrás de todo, y cada sección puede teñir su propia franja con .tinte.
   Todo son gradientes en capas propias, sin repintar en cada scroll, y no toca
   la sección protegida de scroll/animación. */

/* --- capa de fondo global, fija y detrás de todo --- */
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(85% 55% at 82% -6%,  rgba(59,130,246,.27), transparent 62%),
    radial-gradient(70% 50% at 4% 14%,   rgba(127,215,255,.16), transparent 64%),
    radial-gradient(90% 55% at 46% 104%, rgba(99,165,255,.23), transparent 62%),
    var(--bg);
}
/* velo muy tenue que da profundidad y evita el gris plano al hacer scroll */
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,9,13,.45), rgba(7,9,13,0) 30%,
                                     rgba(7,9,13,0) 70%, rgba(7,9,13,.45));
}

/* --- tinte por sección ---------------------------------------------------
   Uso: <section class="section tinte" style="--t1:#63a5ff">
   Opcionales: --t2 (segundo foco), --tx/--ty (posición), --ti (intensidad). */
.tinte{position:relative; isolation:isolate}
.tinte::before{
  content:""; position:absolute; inset:-22% 0; z-index:-1; pointer-events:none;
  /* el color se apaga en los extremos y se solapa con el de la sección de al
     lado: el paso de una a otra se lee como una mezcla, no como una costura */
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  background:
    radial-gradient(62% 58% at var(--tx,18%) var(--ty,22%),
      color-mix(in srgb, var(--t1,#3b82f6) calc(var(--ti,1) * 34%), transparent), transparent 70%),
    radial-gradient(52% 50% at var(--tx2,86%) var(--ty2,78%),
      color-mix(in srgb, var(--t2, var(--t1,#3b82f6)) calc(var(--ti,1) * 22%), transparent), transparent 72%);
  filter:blur(6px);
}

/* Bordes que no cortan: en vez de una línea de lado a lado, una hebra que
   nace y muere en los extremos. Se aplica a las franjas que sí necesitan
   separación estructural. */
.claims, .localnav, .strip, .specs{border-color:transparent !important; position:relative}
.claims::after, .localnav::after, .strip::after, .specs::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.11) 22%,
                                    rgba(255,255,255,.11) 78%, transparent);
}
.specs::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.11) 22%,
                                    rgba(255,255,255,.11) 78%, transparent);
}

/* --- realces de color en piezas concretas --- */
.aeo__item{
  border-color:color-mix(in srgb, var(--t1,#3b82f6) 26%, rgba(255,255,255,.1));
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.aeo__item:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--t1,#3b82f6) 55%, transparent);
  box-shadow:0 18px 50px rgba(0,0,0,.45),
             0 0 40px color-mix(in srgb, var(--t1,#3b82f6) 22%, transparent);
}
.pasos li,.cards a,.care .card{
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pasos li:hover,.cards a:hover,.care .card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--t1,#3b82f6) 50%, transparent);
  box-shadow:0 16px 46px rgba(0,0,0,.4),
             0 0 34px color-mix(in srgb, var(--t1,#3b82f6) 18%, transparent);
}
.pasos b{color:color-mix(in srgb, var(--t1,#63a5ff) 90%, #fff)}

@media (prefers-reduced-motion:reduce){
  .aeo__item,.pasos li,.cards a,.care .card{transition:none}
}

/* --- paleta por sección -------------------------------------------------
   Los valores viven aquí y no en atributos style: mantiene el HTML limpio y
   evita que un porcentaje de posición se confunda con un claim del producto
   en el validador de contenido. */
.phero.tinte      { --t1:#63a5ff; --t2:#7fd7ff; --tx:16%; --ty:26%; --tx2:84%; --ty2:88% }
#galeria.tinte    { --t1:#63a5ff; --t2:#7fd7ff; --tx:12%; --ty:30%; --tx2:88%; --ty2:70% }
#esencial.tinte   { --t1:#7c6bff; --t2:#63a5ff; --tx:14%; --ty:18% }
#como-funciona.tinte { --t1:#3b82f6; --tx:78%; --ty:20% }
#uso-diario.tinte { --t1:#7fd7ff; --tx:82%; --ty:70% }
#filtro.tinte     { --t1:#38bdf8; --t2:#3b82f6; --tx:18%; --ty:74% }
#cuidado.tinte    { --t1:#5eead4; --t2:#3b82f6; --tx:79%; --ty:24% }
#preguntas.tinte  { --t1:#8b6fd0; --t2:#63a5ff; --tx:20%; --ty:30% }
#guias-relacionadas.tinte { --t1:#63a5ff; --t2:#7c6bff; --tx:76%; --ty:26% }

/* home, biblioteca y soporte */
#producto.tinte   { --t1:#63a5ff; --t2:#7fd7ff; --tx:78%; --ty:22% }
#cierre.tinte     { --t1:#3b82f6; --t2:#7c6bff; --tx:50%; --ty:60%; --ti:1.2 }
#hub.tinte        { --t1:#7fd7ff; --t2:#63a5ff; --tx:16%; --ty:34% }
#areas.tinte      { --t1:#7c6bff; --tx:80%; --ty:26% }
#preguntas-hub.tinte { --t1:#38bdf8; --tx:18%; --ty:70% }
#estandar.tinte   { --t1:#5eead4; --tx:76%; --ty:30% }
#producto-hub.tinte { --t1:#63a5ff; --tx:24%; --ty:40% }
#intro-soporte.tinte { --t1:#63a5ff; --tx:80%; --ty:24% }
#garantia.tinte   { --t1:#7fd7ff; --tx:14%; --ty:62% }
#seguir.tinte     { --t1:#7c6bff; --t2:#63a5ff; --tx:74%; --ty:30% }
#articulo.tinte   { --t1:#7fd7ff; --t2:#7c6bff; --tx:14%; --ty:12%; --tx2:88%; --ty2:64% }
#vitrina.tinte    { --t1:#63a5ff; --t2:#7fd7ff; --tx:20%; --ty:40%; --tx2:82%; --ty2:66% }
#espacios.tinte   { --t1:#7c6bff; --t2:#63a5ff; --tx:80%; --ty:20% }
#aprender.tinte   { --t1:#38bdf8; --t2:#7c6bff; --tx:18%; --ty:34% }
#controles.tinte  { --t1:#7fd7ff; --t2:#3b82f6; --tx:22%; --ty:34% }
#filtro-home.tinte{ --t1:#38bdf8; --t2:#3b82f6; --tx:20%; --ty:70% }
#noche.tinte     { --t1:#7c6bff; --t2:#63a5ff; --tx:78%; --ty:26% }
/* filtro de repuesto (/filtros/) */
#filtro-hero.tinte     { --t1:#38bdf8; --t2:#3b82f6; --tx:78%; --ty:40%; --tx2:14%; --ty2:80% }
#esencial-filtro.tinte { --t1:#7c6bff; --t2:#63a5ff; --tx:14%; --ty:18% }
#etapas.tinte          { --t1:#63a5ff; --t2:#7fd7ff; --tx:20%; --ty:60% }
#ficha.tinte           { --t1:#3b82f6; --tx:80%; --ty:22% }
#cambio.tinte          { --t1:#5eead4; --t2:#3b82f6; --tx:18%; --ty:30% }
#senales.tinte         { --t1:#7fd7ff; --tx:82%; --ty:60% }
#preguntas-filtro.tinte{ --t1:#8b6fd0; --t2:#63a5ff; --tx:20%; --ty:30% }
#guias-filtro.tinte    { --t1:#63a5ff; --t2:#7c6bff; --tx:76%; --ty:26% }
#cierre-filtro.tinte   { --t1:#38bdf8; --t2:#3b82f6; --tx:50%; --ty:60%; --ti:1.2 }
/* hub editorial y artículos */
#relacionadas.tinte { --t1:#63a5ff; --t2:#7c6bff; --tx:78%; --ty:30% }
#producto-cta.tinte { --t1:#38bdf8; --t2:#3b82f6; --tx:20%; --ty:40% }
#grupo-1.tinte{--t1:#63a5ff;--tx:16%;--ty:30%}  #grupo-2.tinte{--t1:#7c6bff;--tx:80%;--ty:26%}
#grupo-3.tinte{--t1:#38bdf8;--tx:20%;--ty:66%}  #grupo-4.tinte{--t1:#5eead4;--tx:76%;--ty:30%}
#grupo-5.tinte{--t1:#7fd7ff;--tx:18%;--ty:36%}  #grupo-6.tinte{--t1:#8b6fd0;--tx:78%;--ty:64%}