/* ===========================================================================
   ARLUMA · Ambiente
   --------------------------------------------------------------------------
   Capa de atmósfera: la textura, los pozos de luz y los acentos que sacan al
   sitio del negro plano.

   Va DESPUÉS de pages.css y ANTES de responsive.css. Todo lo de acá es
   decorativo y aditivo: si algún día molesta, se quita el <link> de este
   archivo y el sitio sigue funcionando igual, sólo que más sobrio.

   La regla que gobierna el archivo: NADA acá puede tapar contenido, robar
   clics ni bajar el contraste del texto. Todos los efectos van en
   pseudo-elementos con `pointer-events: none` y por debajo del contenido.

   Las tres intensidades están juntas arriba para poder subirlas o bajarlas
   sin ir a buscarlas por el archivo.
   =========================================================================== */

:root {
  --amb-grano:      0.035;   /* textura de grano sobre todo el sitio */
  --amb-halo:       0.075;   /* pozos de luz roja detrás de las secciones */
  --amb-superficie: 0.045;   /* brillo superior de las tarjetas */
}

/* ============================ TEXTURA DE GRANO ============================
   Un ruido finísimo sobre toda la página. No se ve como textura: se siente
   como que el negro tiene materia en vez de ser un color plano. Es lo que
   diferencia un fondo impreso de uno de pantalla.
   El SVG va incrustado, así que no pesa ni pide nada a la red.
   ========================================================================= */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--amb-grano);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ========================== POZOS DE LUZ POR SECCIÓN ======================
   Cada sección recibe un halo rojo muy tenue, alternando de qué lado entra la
   luz. Rompe la sucesión de rectángulos negros y, en una marca de
   iluminación, tiene sentido: la página se ve iluminada por focos.
   ========================================================================= */
main > section { position: relative; isolation: isolate; }

main > section::before {
  content: '';
  position: absolute;
  inset: -10% 0 0 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 62% at var(--halo-x, 18%) 0%,
              rgba(var(--brand-rgb), var(--amb-halo)), transparent 72%);
}
main > section:nth-of-type(even)::before { --halo-x: 82%; }

/* La portada ya tiene su propio resplandor: no le sumamos otro encima. */
main > section.hero-brand::before { background: none; }

/* ======================= SUPERFICIE DE LAS TARJETAS ======================
   Un degradado de luz que baja desde el borde superior. Las tarjetas dejan de
   ser rectángulos de color liso y pasan a tener volumen.
   ========================================================================= */
.product-card,
.card,
.pillar,
.cat-tile,
.store-card,
.checkout__aside,
.pdp__buy,
.faq details {
  background-image: linear-gradient(180deg,
    rgba(255, 255, 255, var(--amb-superficie)) 0%,
    transparent 42%);
}

/* Borde superior encendido: una línea de luz de un píxel, como el reflejo en
   el canto de un objeto. */
.product-card::before,
.cat-tile::after,
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  pointer-events: none;
  z-index: 3;
}
.pillar, .cat-tile { position: relative; }

/* Al pasar el mouse, esa línea se enciende en rojo. */
.product-card:hover::before { background: linear-gradient(90deg, transparent, var(--brand-soft), transparent); }

/* =========================== ACENTO EN LOS TÍTULOS =======================
   Una barra roja corta bajo cada encabezado de sección. Ordena la lectura y
   repite el color de marca sin pintar nada de rojo.
   ========================================================================= */
.section-head { position: relative; padding-bottom: var(--sp-4); }
.section-head::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), rgba(var(--brand-rgb), 0));
}

/* ============================== PRECIOS ==================================
   Estética de venta: el precio es lo que la gente busca con el ojo, así que
   se le da peso y un halo mínimo para que salte dentro de la tarjeta.
   ========================================================================= */
.price {
  text-shadow: 0 0 22px rgba(var(--brand-rgb), .35);
}
.price--lg {
  text-shadow: 0 0 32px rgba(var(--brand-rgb), .45);
}

/* Las etiquetas ganan un degradado sutil en vez de color plano. */
.badge--brand {
  background-image: linear-gradient(160deg, var(--brand-soft), var(--brand));
  box-shadow: 0 2px 10px -2px rgba(var(--brand-rgb), .55);
}

/* ============================== VIÑETA ===================================
   Oscurece apenas los bordes de la pantalla. Empuja la mirada hacia el centro,
   que es donde están los productos.
   ========================================================================= */
body {
  box-shadow: inset 0 0 200px 60px rgba(0, 0, 0, .55);
}

/* ====================== SEPARADORES ENTRE SECCIONES ======================
   Una línea que nace y muere en transparente, con un punto rojo al centro.
   Marca el cambio de sección sin cortar la página con una raya dura.
   ========================================================================= */
main > section + section::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(72%, 760px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10) 30%,
              rgba(var(--brand-rgb), .45) 50%, rgba(255, 255, 255, .10) 70%, transparent);
  pointer-events: none;
}
/* La primera sección después de la portada no lleva separador: ya está el
   propio corte del hero. */
main > section.hero-brand + section::after { display: none; }

/* ========================= AJUSTES POR DISPOSITIVO ======================= */
@media (max-width: 700px) {
  /* En celular la pantalla es chica: los efectos se bajan para que el
     contenido respire y no se sienta cargado. */
  :root { --amb-halo: 0.055; --amb-grano: 0.028; }
  body { box-shadow: inset 0 0 120px 30px rgba(0, 0, 0, .45); }
  .section-head::after { width: 44px; }
}

/* Quien pide menos movimiento suele pedir menos ruido visual en general. */
@media (prefers-reduced-motion: reduce) {
  :root { --amb-grano: 0; }
}

/* En impresión, nada de esto tiene sentido. */
@media print {
  body::after, main > section::before, main > section + section::after { display: none; }
  body { box-shadow: none; }
}