/* ===========================================================
   JuntoCompra — Base: reset, tipografía, layout, secciones
   =========================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 14px)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.55;
  letter-spacing:var(--track-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
/* El atributo `hidden` lo pisa cualquier regla de autor con `display`.
   Sin esto, los bloques flex de la ventana de acceso seguían viéndose. */
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:var(--track-heading);line-height:1.08}
p{margin:0}

:where(a,button,input,summary):focus-visible{
  outline:2.5px solid var(--red);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Layout ────────────────────────────────────────────── */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(48px,6vw,80px)}

/* ── Tipografía de sección ─────────────────────────────── */
.display{
  font-size:var(--fs-hero);
  letter-spacing:var(--track-display);
  line-height:1.04;
  font-weight:800;
}
/* La marca y el término de búsqueda viven dentro del mismo H1 —uno solo por
   página—, pero en una línea menor: así el titular grande sigue siendo el que
   diseñó la diseñadora y no se toca la jerarquía visual. */
.hero__kicker{
  display:block;
  font-family:var(--font);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.3;
  color:rgba(255,255,255,.72);
  margin-bottom:var(--s4);
}

.display .thin{font-weight:300}
.display .red{color:var(--red)}

.h2{
  font-size:var(--fs-h2);
  letter-spacing:var(--track-display);
  line-height:1.08;
  text-align:center;
}
.h2 .thin{font-weight:300}
.h2 .red{color:var(--red)}

.lead{
  font-size:var(--fs-lead);
  color:var(--ink-60);
  max-width:56ch;
  line-height:1.6;
}
.lead--center{margin-inline:auto;text-align:center}

.eyebrow{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--ink-40);
}

/* ── Superficies oscuras ───────────────────────────────── */
.dark{
  position:relative;
  background:var(--ink);
  color:var(--white);
  isolation:isolate;
}
.dark .lead{color:rgba(255,255,255,.72)}
.dark .eyebrow{color:rgba(255,255,255,.55)}

/* Resplandor mesh rojo del diseño original */
.glow{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow::before,.glow::after{
  content:'';position:absolute;border-radius:50%;
  background:radial-gradient(circle, var(--red-glow) 0%, rgba(209,55,90,0) 68%);
  filter:blur(40px);
}
.glow::before{width:78vw;height:78vw;top:-26%;right:-24%;opacity:1}
.glow::after{width:58vw;height:58vw;bottom:-14%;left:-18%;opacity:.72}
.glow i{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle, var(--red-glow) 0%, rgba(209,55,90,0) 66%);
  filter:blur(50px);
  width:46vw;height:46vw;top:32%;left:26%;opacity:.5;
}

/* Mesh de la sección "cómo funciona": gris azulado a la izquierda,
   rosa saturado a la derecha. Valores tomados del .ai original. */
.mesh{
  position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(62% 74% at 90% 82%, #d26077 0%, rgba(210,96,119,0) 62%),
    radial-gradient(58% 66% at 74% 18%, #ca687b 0%, rgba(202,104,123,0) 60%),
    radial-gradient(50% 62% at  4% 14%, #9ea0ad 0%, rgba(158,160,173,0) 62%),
    radial-gradient(46% 56% at  8% 94%, #8d8e9d 0%, rgba(141,142,157,0) 60%),
    radial-gradient(36% 44% at 30% 52%, #242444 0%, rgba(36,36,68,0) 68%),
    var(--ink);
}

/* Mesh del bloque de cierre. Tres manchas medidas sobre el .ai:
   una pequeña arriba-izquierda, una grande y saturada a la derecha,
   y otra abajo-izquierda que se cuela por detrás del footer. */
/* Mesh del bloque "¿Por qué JuntoCompra?". Cuatro manchas reconstruidas
   invirtiendo la capa de cristal de las tarjetas sobre el .ai:
   una en el borde izquierdo, una grande a la derecha y dos compactas
   en el eje central (arriba del título y detrás del CTA). */
.mesh--bento{
  background:
    radial-gradient(20% 31% at  0% 59%,
      rgba(216,56,92,.90) 0%,  rgba(216,56,92,.83) 20%, rgba(216,56,92,.68) 40%,
      rgba(216,56,92,.50) 60%, rgba(216,56,92,.23) 80%, rgba(216,56,92,0) 100%),
    radial-gradient(33% 57% at 77% 40%,
      rgba(216,56,92,1) 0%,    rgba(216,56,92,.97) 22%, rgba(216,56,92,.82) 42%,
      rgba(216,56,92,.58) 62%, rgba(216,56,92,.27) 81%, rgba(216,56,92,0) 100%),
    radial-gradient(12% 20% at 38%  5%,
      rgba(216,56,92,.95) 0%,  rgba(216,56,92,.87) 20%, rgba(216,56,92,.72) 40%,
      rgba(216,56,92,.53) 60%, rgba(216,56,92,.25) 80%, rgba(216,56,92,0) 100%),
    radial-gradient(12% 19% at 38% 82%,
      rgba(216,56,92,.95) 0%,  rgba(216,56,92,.87) 20%, rgba(216,56,92,.72) 40%,
      rgba(216,56,92,.53) 60%, rgba(216,56,92,.25) 80%, rgba(216,56,92,0) 100%),
    var(--ink);
}

.mesh--cta{
  background:
    /* abajo-izquierda: se cuela por detrás del footer */
    radial-gradient(26% 27% at 2% 70%,
      rgba(216,56,92,.97) 0%,  rgba(216,56,92,.93) 32%,
      rgba(216,56,92,.74) 55%, rgba(216,56,92,.40) 78%,
      rgba(216,56,92,0) 100%),
    /* la grande de la derecha, detrás del titular */
    radial-gradient(33% 34% at 77% 29%,
      rgba(216,56,92,1) 0%,    rgba(216,56,92,.95) 32%,
      rgba(216,56,92,.76) 55%, rgba(216,56,92,.42) 78%,
      rgba(216,56,92,0) 100%),
    /* arriba-izquierda, más tenue */
    radial-gradient(19% 17% at 13% 19%,
      rgba(216,56,92,.68) 0%,  rgba(216,56,92,.64) 32%,
      rgba(216,56,92,.50) 55%, rgba(216,56,92,.27) 78%,
      rgba(216,56,92,0) 100%),
    var(--ink);
}

/* ── Cristal ───────────────────────────────────────────── */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}
@supports not (backdrop-filter:blur(1px)){
  .glass{background:rgba(255,255,255,.16)}
}

/* ── Botones ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.7em;
  border-radius:var(--r-pill);
  font-size:var(--fs-body);
  font-weight:600;
  letter-spacing:var(--track-body);
  transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--red);color:var(--white)}
.btn--primary:hover{background:var(--red-hover);box-shadow:0 6px 18px rgba(216,56,92,.32)}

.btn--glass{
  background:var(--glass-strong);color:var(--white);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}
.btn--glass:hover{background:rgba(255,255,255,.26)}

.btn--ink{background:var(--ink);color:var(--white)}
.btn--ink:hover{background:var(--ink-80)}

/* Acción secundaria sobre fondo claro: no compite con la primaria. */
.btn--ghost{
  background:transparent;color:var(--ink-60);
  border:1px solid rgba(36,36,68,.16);
}
.btn--ghost:hover{background:rgba(36,36,68,.05);color:var(--ink)}

.btn--block{display:flex;width:100%}