/* ===========================================================
   JuntoCompra — Componentes
   =========================================================== */

/* ═══ HEADER ══════════════════════════════════════════════ */
/* La cabecera va fija y SIN fondo propio, para que el degradado del
   hero pase por detrás sin corte. Al hacer scroll se vuelve sólida,
   porque debajo empieza el catálogo, que es claro. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--t), border-color var(--t), backdrop-filter var(--t);
}
.site-header.is-stuck{
  background:rgba(36,36,68,.92);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.08);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-block:clamp(10px,1.2vw,15px);
  min-height:72px;
}
/* Logo de la diseñadora (DISEÑO/LOGOS/LOGO LANDING.png).
   En el .ai va al mismo tamaño en cabecera y cierre: 142x66 sobre
   un artboard de 1080, es decir un 13,1% del ancho. */
.logo{
  display:block;
  flex:none;
  line-height:0;
}
.logo img{
  width:clamp(112px,10.3vw,132px);
  height:auto;
}
.logo--cta img{width:clamp(140px,13.1vw,168px)}
.header-actions{display:flex;align-items:center;gap:var(--s2)}

/* Botón-icono con contador (carrito, favoritos) */
.icon-btn{
  position:relative;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  color:var(--white);
  transition:background var(--t-fast);
}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn svg{width:20px;height:20px}
.icon-btn__count{
  position:absolute;top:3px;right:2px;
  min-width:18px;height:18px;padding:0 5px;
  display:none;place-items:center;
  background:var(--red);color:var(--white);
  border-radius:var(--r-pill);
  font-size:10.5px;font-weight:800;line-height:1;
}
.icon-btn__count[data-count]:not([data-count="0"]){display:grid}

/* ═══ HERO ════════════════════════════════════════════════ */
.hero{padding-block:calc(var(--header-h) + clamp(72px,11vw,150px)) clamp(64px,9vw,120px)}
.hero__title{margin-bottom:var(--s5)}
.hero__lead{margin-bottom:var(--s7)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* Enlace al listado completo, bajo el adelanto de la portada */
.cat-more{display:flex;justify-content:center;margin-top:var(--s8)}

/* ═══ CÓMO FUNCIONA — 5 pasos ═════════════════════════════ */
.steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--s4);
  margin-top:var(--s8);
}
.step{
  position:relative;
  padding:var(--s6) var(--s5) var(--s5);
  color:var(--white);
}
.step__num{
  position:absolute;top:var(--s4);left:var(--s4);
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);
  border:1px solid var(--glass-border);
  font-size:var(--fs-sm);font-weight:700;
}
.step__icon{
  width:44px;height:44px;margin:var(--s7) 0 var(--s5);
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}
.step__icon svg{width:21px;height:21px}
.step__title{font-size:var(--fs-h3);margin-bottom:var(--s2)}
.step__text{font-size:var(--fs-sm);line-height:1.5;color:rgba(255,255,255,.72)}

/* ═══ BARRA DE CATÁLOGO ═══════════════════════════════════ */
.catalog-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  margin:var(--s8) 0 var(--s6);
}
.search{
  position:relative;
  flex:0 1 340px;
}
.search svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--ink-40);pointer-events:none;
}
.search input{
  width:100%;
  padding:13px 18px 13px 44px;
  border:1px solid rgba(36,36,68,.12);
  border-radius:var(--r-pill);
  background:var(--white);
  font-size:var(--fs-sm);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.search input::placeholder{color:var(--ink-40)}
.search input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(216,56,92,.14);
}
/* Los dos filtros van uno debajo del otro, alineados a la derecha */
.catalog-bar__filters{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
}
.catalog-bar__filters .sort{justify-content:flex-start}
.sort{
  display:flex;align-items:center;gap:var(--s2);
  padding:11px 16px;
  border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;
  color:var(--ink-60);
  transition:background var(--t-fast);
}
/* Los desplegables del catálogo (categoría y orden) van sin caja
   propia: la píldora que los envuelve ya hace de campo. */
.sort select{
  border:0;background:none;
  font:inherit;font-weight:600;
  color:var(--ink);
  cursor:pointer;
  max-width:21ch;
  text-overflow:ellipsis;
}
.sort svg{flex:none}
.sort:hover{background:rgba(36,36,68,.06)}
.sort svg{width:17px;height:17px}

/* ═══ GRID DE PRODUCTOS ═══════════════════════════════════ */
.products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:var(--s5);
}

/* ═══ TARJETA DE PRODUCTO ═════════════════════════════════ */
.pcard{
  display:flex;flex-direction:column;
  background:var(--surface-2);
  border-radius:var(--r-lg);
  padding:14px;
  transition:transform var(--t), box-shadow var(--t);
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}

/* — Media — */
.pcard__media{
  position:relative;
  aspect-ratio:4/3;
  background:var(--white);
  border-radius:var(--r-md);
  overflow:hidden;
  cursor:pointer;
}
/* Carril de la galería: una diapositiva por foto */
.pcard__track{
  display:flex;
  width:100%;height:100%;
  transition:transform .38s var(--ease);
}
.pcard__slide{
  flex:0 0 100%;
  min-width:0;
  display:grid;place-items:center;
}
.pcard__slide--solo{width:100%;height:100%}
.pcard__img{
  width:100%;height:100%;
  object-fit:contain;
  padding:14px 14px 26px;
}

/* Flechas: aparecen al pasar el ratón por encima de la foto.
   En pantallas táctiles no hay hover, así que se quedan fijas. */
.pcard__nav{
  position:absolute;top:50%;z-index:2;
  width:30px;height:30px;
  display:grid;place-items:center;
  transform:translateY(-50%);
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);
  color:var(--ink);
  box-shadow:0 2px 8px rgba(36,36,68,.18);
  opacity:0;
  transition:opacity .18s var(--ease), background var(--t-fast);
}
.pcard__nav--prev{left:9px}
.pcard__nav--next{right:9px}
.pcard__nav svg{width:15px;height:15px}
.pcard__nav:hover{background:#fff}
.pcard__media:hover .pcard__nav,
.pcard__nav:focus-visible{opacity:1}
@media (hover:none){
  .pcard__nav{opacity:1;background:rgba(255,255,255,.82)}
}
/* Provisional: sin fotografía real todavía */
.pcard__img--placeholder{
  display:grid;place-items:center;
  font-size:clamp(46px,7vw,66px);
  line-height:1;
  user-select:none;
}
.pcard__timer{
  position:absolute;top:11px;left:12px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:600;color:var(--ink-60);
}
.pcard__timer b{color:var(--red);font-weight:800}
.pcard__timer::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--red);
  animation:pulse 1.9s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Anillo circular de ahorro */
.pcard__save{
  position:absolute;top:10px;right:10px;
  width:52px;height:52px;
  display:grid;place-items:center;
  text-align:center;
}
.pcard__save svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pcard__save-track{fill:none;stroke:rgba(36,36,68,.12);stroke-width:2.5}
.pcard__save-arc{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.pcard__save-txt{position:relative;line-height:1}
.pcard__save-txt b{font-size:15px;font-weight:800;letter-spacing:-.03em}
.pcard__save-txt b sup{font-size:9px;font-weight:700;top:-.45em}
.pcard__save-txt span{display:block;font-size:6.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-60)}

.pcard__tools{
  position:absolute;right:10px;bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.pcard__tool{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  color:var(--ink);
  transition:background var(--t-fast), color var(--t-fast);
}
.pcard__tool:hover{background:rgba(36,36,68,.08)}
.pcard__tool svg{width:16px;height:16px}
.pcard__tool[aria-pressed="true"]{color:var(--red)}
.pcard__tool[aria-pressed="true"] svg{fill:currentColor}

/* Puntos centrados en la parte inferior. La caja mide 14px para que
   sean cómodos de pulsar, y su centro cae a 25px del borde inferior,
   la misma línea óptica que el corazón y compartir. */
.pcard__dots{
  position:absolute;left:50%;bottom:18px;z-index:2;
  transform:translateX(-50%);
  display:flex;gap:2px;
}
.pcard__dot{
  width:14px;height:14px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
}
.pcard__dot::before{
  content:'';
  width:5px;height:5px;border-radius:50%;
  background:rgba(36,36,68,.22);
  transition:background var(--t-fast), transform var(--t-fast);
}
.pcard__dot.is-on::before{background:var(--ink);transform:scale(1.18)}

/* — Cabecera de texto — */
.pcard__meta{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin:13px 2px 5px;
}
.pcard__cat{
  font-size:9.5px;font-weight:600;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--ink-40);
}
.pcard__rating{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;color:var(--red);
  white-space:nowrap;
}
/* Estrella maciza a la izquierda de la nota, del mismo rojo.
   En el .ai mide lo mismo que la altura de las cifras; el trazo del
   icono ocupa el 72% del viewBox, de ahí los 12px de caja. */
.pcard__rating svg{
  width:12px;height:12px;
  flex:none;
  margin-top:-1px;
}
.pcard__rating span{color:var(--ink);font-weight:700}
.pcard__title{
  font-size:15px;font-weight:800;
  margin:0 2px 5px;
  letter-spacing:var(--track-heading);
}
.pcard__desc{
  font-size:11.5px;line-height:1.45;color:var(--ink-60);
  margin:0 2px 13px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ═══ TABLA DE TRAMOS — versión tarjeta ═══════════════════ */
.tiers{
  background:var(--surface);
  border-radius:var(--r-md);
  padding:13px 14px 15px;
  margin-bottom:14px;
}
.tiers__head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:800;
  margin-bottom:9px;
}
.tier{
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:10px;
  min-height:30px;
}
.tier__label{font-size:10.5px;font-weight:600;color:var(--ink-60);white-space:nowrap}
.tier__bar{
  position:relative;
  height:5px;
  background:var(--track);
  border-radius:var(--r-pill);
}
.tier__fill{
  position:absolute;inset:0 auto 0 0;
  background:var(--red);
  border-radius:var(--r-pill);
  transition:width .5s var(--ease);
}
.tier__price{font-size:11px;font-weight:600;color:var(--ink-60);white-space:nowrap}

/* Estado */
.tier.is-done .tier__price{color:var(--ink)}
.tier.is-current .tier__label,
.tier.is-current .tier__price{color:var(--ink);font-weight:800}

/* Marcador "87 Uds." sobre la barra del tramo actual.
   Va en dos piezas: el contenedor es un punto sin tamaño clavado justo
   donde termina el relleno rojo, y de ahí sale el tallo. La etiqueta se
   desplaza sobre ese punto para no salirse de la barra, pero el tallo
   se queda siempre en el sitio exacto. */
.tier__marker{
  position:absolute;
  bottom:100%;
  width:0;height:0;
  pointer-events:none;
  z-index:1;
}
.tier__marker::after{
  content:'';
  position:absolute;left:-.75px;bottom:0;
  width:1.5px;height:6px;
  background:var(--ink);
}
.tier__marker-chip{
  position:absolute;bottom:6px;
  transform:translateX(var(--mx,-50%));
  padding:2.5px 6px;
  background:var(--ink);color:var(--white);
  border-radius:5px;
  font-size:8.5px;font-weight:700;line-height:1.2;
  white-space:nowrap;
}

/* ═══ PRECIO ══════════════════════════════════════════════ */
.pcard__price{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);
  margin:0 2px;
}
.price__now{
  font-size:27px;font-weight:800;
  letter-spacing:-.035em;line-height:1;
}
.price__was{
  font-size:12.5px;font-weight:500;
  color:var(--red);
  text-decoration:line-through;
  margin-left:6px;
}
.price__save{
  font-size:11px;font-weight:700;
  margin:5px 2px 0;
}
.pcard__join{
  padding:.62em 1.05em;
  border-radius:var(--r-sm);
  font-size:12.5px;font-weight:600;
}

.pcard__notes{
  margin:12px 2px 0;
  padding-top:11px;
  border-top:1px solid rgba(36,36,68,.09);
  display:grid;gap:4px;
}
.pcard__note{
  position:relative;
  padding-left:11px;
  font-size:10.5px;line-height:1.4;color:var(--ink-60);
}
.pcard__note::before{
  content:'';position:absolute;left:0;top:.5em;
  width:4px;height:4px;border-radius:50%;background:var(--red);
}
.pcard__note--strong{color:var(--ink);font-weight:700}

/* ═══ BENTO — ¿Por qué JuntoCompra? ═══════════════════════ */
/* Rejilla de 4 columnas; la tarjeta del titular ocupa 2.
   Proporciones tomadas del .ai: tarjeta casi cuadrada (218x204 sobre
   un ancho de contenido de 926), separación de 18px. */
.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.65vw,21px);
}
.bento__lead{
  grid-column:span 2;
  display:grid;align-content:center;
  padding:var(--s7) 26px;
}
.bento__lead h2{font-size:clamp(1.9rem,3.5vw,2.75rem);letter-spacing:var(--track-display);text-align:left}
.bento__lead .red{color:var(--red)}
.feature{
  display:flex;flex-direction:column;
  padding:27px 24px 46px;
  color:var(--white);
}
.feature__icon{
  width:44px;height:44px;margin-bottom:45px;
  flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
}
.feature__icon svg{width:21px;height:21px}
.feature h3{font-size:1.35rem;margin-bottom:var(--s3)}
.feature p{font-size:var(--fs-sm);line-height:1.5;color:rgba(255,255,255,.72)}

/* CTA del bloque, centrado bajo la rejilla */
.bento__cta{
  display:flex;justify-content:center;
  margin-top:clamp(28px,3.2vw,40px);
}
.bento__cta .btn{padding:.92em 3.4em;font-size:.9rem}

/* El bento respira algo menos por arriba que por abajo, como en el .ai */
.bento-section{padding-block:clamp(56px,6.3vw,80px) clamp(72px,8vw,102px)}

/* ═══ OPINIONES ═══════════════════════════════════════════ */
.reviews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s4);
  margin-top:var(--s8);
}
.review{padding:var(--s6);color:var(--white)}
.review__stars{display:flex;gap:3px;margin-bottom:var(--s4)}
.review__stars svg{width:14px;height:14px;color:var(--white)}
.review h3{font-size:var(--fs-body);margin-bottom:var(--s2)}
.review p{font-size:var(--fs-sm);line-height:1.55;color:rgba(255,255,255,.72)}
.review__author{
  margin-top:var(--s4);
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.55);
}

/* ═══ FAQ ═════════════════════════════════════════════════ */
.faq{max-width:820px;margin:var(--s8) auto 0;display:grid;gap:var(--s3)}
.faq details{
  border-radius:var(--r-lg);
  background:var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  overflow:hidden;
}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s6);
  font-size:var(--fs-body);font-weight:700;
  color:var(--white);
  cursor:pointer;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';
  font-size:22px;font-weight:400;line-height:1;
  color:var(--red);
  transition:transform var(--t);
  flex:none;
}
.faq details[open] summary::after{content:'×';transform:rotate(90deg)}
.faq p{
  padding:0 var(--s6) var(--s5);
  font-size:var(--fs-sm);line-height:1.65;
  color:rgba(255,255,255,.72);
}

/* ═══ CTA FINAL ═══════════════════════════════════════════ */
.cta-final{
  text-align:center;
  /* El bloque de cierre del diseño es una banda alta y despejada:
     el mesh es el protagonista y el texto flota en el centro. */
  padding-block:clamp(96px,18.5vw,240px) clamp(56px,8vw,110px);
}
/* El titular de cierre es mayor que el del resto de secciones.
   Onest corre más ancha que Coolvetica, así que va un punto por debajo
   del tamaño literal del .ai para ocupar el mismo bloque óptico. */
.cta-final .h2{font-size:clamp(2.2rem,4.8vw,3.8rem)}
.cta-final .btn{padding:1.02em 2.1em;font-size:.95rem}
.cta-final .badge{
  display:inline-block;
  padding:9px 19px;margin-bottom:var(--s6);
  border-radius:var(--r-pill);
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  font-size:var(--fs-sm);font-weight:600;
  color:var(--white);
}
.cta-final .h2{margin-bottom:var(--s7)}
.cta-final .logo{
  display:block;
  width:max-content;
  margin:clamp(56px,7.5vw,96px) auto 0;
}

/* ═══ FOOTER ══════════════════════════════════════════════ */
.site-footer{
  margin:0 var(--gutter);
  padding:var(--s9) clamp(24px,5vw,64px) var(--s8);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:rgba(255,255,255,.08);
  border:1px solid var(--glass-border);
  border-bottom:0;
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  color:var(--white);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:var(--s8) var(--s6);
  max-width:var(--container);
  margin-inline:auto;
}
.footer__brand h2{font-size:1.4rem;margin-bottom:var(--s3)}
.footer__brand p{font-size:var(--fs-sm);color:rgba(255,255,255,.62);max-width:34ch}
.footer__social{display:flex;gap:var(--s2);margin-top:var(--s5)}
.footer__social a{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);
  color:var(--ink);
  transition:transform var(--t-fast);
}
.footer__social a:hover{transform:translateY(-2px)}
.footer__social svg{width:17px;height:17px}
.footer__col h3{
  font-size:var(--fs-body);
  margin-bottom:var(--s4);
}
.footer__col li+li{margin-top:9px}
.footer__col a{
  font-size:var(--fs-sm);
  color:rgba(255,255,255,.68);
  transition:color var(--t-fast);
}
.footer__col a:hover{color:var(--white)}
.footer__legal{
  max-width:var(--container);
  margin:var(--s8) auto 0;
  padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.5);
}