/* ==========================================================================
   QUIENES SOMOS — hoja de estilos
   Paleta extraída del diseño en Illustrator (LANDING.ai):
   --verde  #1a3b1e  (nav, footer, acentos)
   --rojo   #6b0f21  (acento cálido, botones secundarios)
   --crema  #f4f3f4  (fondos claros)
   --negro  #0d0d0d
   --blanco #ffffff
   ========================================================================== */

@font-face {
  font-family: 'StretchPro';
  src: url('../assets/fonts/StretchPro.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* solo viene en Regular/Italic (sin bold real) — donde se usa, el CSS fija
   font-weight:normal a propósito para que el navegador no intente un bold
   sintético (que con esta fuente se ve deforme) */
@font-face {
  font-family: 'CodecPro';
  src: url('../assets/fonts/CodecPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CodecPro';
  src: url('../assets/fonts/CodecPro-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  --verde: #1a3b1e;
  --verde-oscuro: #112613;
  --verde-cartas: #003300; /* verde exacto de impresión de las cartas físicas (QUIENES SOMOS CARTAS.pdf) */
  --rojo: #6b0f21;
  --crema: #f4f3f4;
  --negro: #0d0d0d;
  --blanco: #ffffff;

  /* StretchPro es la tipografía oficial del logo/empaque. Anton queda como
     respaldo por si la carga de la fuente falla o para textos muy largos. */
  --font-display: 'StretchPro', 'Anton', 'Archivo Black', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* párrafos de apertura de sección (section__lead) — más editorial que el
     cuerpo de texto normal en Inter */
  --font-lead: 'CodecPro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* red de seguridad global: cualquier componente con su propio display:flex
   o display:block (.btn, .reviews__panel, etc.) le gana en especificidad a
   la regla [hidden]{display:none} del navegador — así el atributo hidden
   siempre gana, sin tener que acordarse de pisarlo clase por clase */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--negro);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  /* Stretch Pro trae ligaduras (GSUB liga/dlig) pensadas para el isotipo
     ("OO" fundida en S⊂⊃MOS); aplicadas a texto normal fusionan "ee"/"rr"
     de forma no intencional (p. ej. "Green" se ve roto). Se desactivan. */
  font-variant-ligatures: none;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

button { font-family: inherit; cursor: pointer; border: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(26, 59, 30, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--blanco);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.navbar .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
}

.navbar__logo {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 1;
}

.navbar__logo img {
  height: 16px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* el menú se centra sobre el ancho total de la barra (position:absolute +
   translateX), no sobre el espacio libre entre logo y acciones — así queda
   siempre centrado en la página sin importar cuánto mida el logo. Ese mismo
   centrado ignora por completo cuánto mide el logo, así que en pantallas
   angostas-pero-todavía-"desktop" (ver @media más abajo, antes de que entre
   el menú mobile) el pill puede terminar montado encima del logo — por eso
   el punto de corte al menú mobile quedó bastante más arriba de lo que
   pediría el resto del layout, ver comentario en ese media query. */
.navbar__links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  flex-shrink: 0;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.navbar__links a {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.2s ease;
  touch-action: manipulation;
  white-space: nowrap;
}

.navbar__links a.active {
  background: rgba(255, 255, 255, 0.07);
}

.navbar__ig {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  flex-shrink: 0;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.navbar__ig svg { width: 19px; height: 19px; }

.navbar__burger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--blanco);
  flex-shrink: 0;
}

.navbar__burger svg { width: 22px; height: 22px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--negro);
  color: var(--blanco);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}

/* rotador de fotos genérico (crossfade) — lo usan el hero, la imagen de
   "El juego" y cada tile de la galería de Instagram: misma mecánica en los
   tres lugares (JS en initPhotoSliders) en vez de reinventarla por sitio.
   El markup del hero trae esta clase además de .hero__photo (que solo pone
   el degradado de abajo vía ::after — el position/overflow lo da esta). */
.slider {
  position: relative;
  overflow: hidden;
}

.slider__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.slider__slide.is-active { opacity: 1; }

.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.32) 35%, rgba(0,0,0,0.62) 100%);
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  pointer-events: none;
}

.hero__content > * { pointer-events: auto; }

.hero__title {
  display: inline-block;
  max-width: 92vw;
  box-sizing: border-box;
  /* dos sombras superpuestas (una ajustada + una amplia) en vez de una sola
     — le da más profundidad/peso al logo que una sombra plana, para que
     sea lo primero que pega fuerte al entrar al sitio */
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55)) drop-shadow(0 16px 46px rgba(0, 0, 0, 0.35));
  /* arranca bien chico (0.45) y con "back out" (el 1.56 en el segundo
     valor) se pasa un poco de tamaño antes de asentar en 1 — ese pequeño
     rebote es lo que hace que el logo se sienta "potente" al aparecer, en
     vez de solo desvanecerse */
  animation: hero-logo-reveal 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes hero-logo-reveal {
  from { opacity: 0; transform: scale(0.45) translateY(28px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.hero__title img {
  width: clamp(170px, 48vw, 760px);
  max-width: 100%;
  height: auto;
  display: block;
}

.hero__tagline {
  margin-top: 30px;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 640px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 36px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: transform 0.15s ease, background 0.15s ease;
  touch-action: manipulation;
}

.btn:active { transform: scale(0.97); }

/* Las dos cartas del hero ("Conocer más" + "Comprar") son PNG exportados
   directamente de Illustrator por el cliente — no recreadas en CSS, para
   garantizar 100% fidelidad de tipografía. El ancho usa clamp() en vez de
   min(320px, 78vw): con dos cartas en fila (no una) esa fórmula las hacía
   casi tan anchas como la pantalla y se apilaban una encima de otra en
   mobile, tapándose y bloqueando el click de la de abajo. */
.hero-card-btn {
  display: block;
  width: clamp(128px, 38vw, 320px);
  flex-shrink: 0;
  touch-action: manipulation;
}

.hero-card-btn img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 3vw, 24px);
  /* sombra de carta apoyada sobre la mesa, no un recorte plano tipo PNG */
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, 0.55), 0 8px 18px -8px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
}

.btn--dark {
  background: var(--verde);
  color: var(--blanco);
}

.btn--outline {
  background: transparent;
  color: var(--blanco);
  border: 2px solid var(--blanco);
}

/* mismo botón "fantasma" que .btn--outline, pero para fondos claros
   (reseñas vive sobre --crema, no sobre una foto oscura como el hero) */
.btn--outline-dark {
  background: transparent;
  color: var(--verde);
  border: 2px solid var(--verde);
}

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

/* flex-wrap:nowrap a propósito — con las cartas en clamp() ya caben siempre
   lado a lado; permitir wrap es lo que las apilaba y tapaba en mobile */
.hero__cta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 24px);
  flex-wrap: nowrap;
}

/* ---------- Tira animada (marquee) ---------- */
/* franja entre el hero y "El juego" (ref: tira mov2.ai): una sola frase en
   loop horizontal continuo sobre fondo --verde, no el wordmark repetido de
   la versión anterior (esa no funcionaba visualmente). El track se arma en
   JS (initMarquee) repitiendo la frase varias veces y duplicándola una vez
   más entera — animar translateX de 0 a -50% deja la segunda mitad
   exactamente donde arrancó la primera, sin salto visible. Velocidad
   pensada para que se alcance a leer, no solo para que se note el motion. */
.marquee {
  overflow: hidden;
  background: var(--verde);
  /* separada del hero a propósito — sin este margen queda pegada a las
     fotos del hero, sin aire; el hero en sí no se toca */
  margin-top: clamp(32px, 6vw, 64px);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: clamp(18px, 2.6vw, 28px) 0;
  animation: marquee-scroll 60s linear infinite;
}

.marquee__phrase {
  flex-shrink: 0;
  font-family: var(--font-display);
  color: var(--blanco);
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.marquee__dot {
  flex-shrink: 0;
  color: #ffd9a8;
  font-size: clamp(16px, 2.2vw, 26px);
  margin: 0 clamp(20px, 3vw, 40px);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .hero__title { animation: none; }
}

/* ---------- Secciones home ---------- */
.section {
  padding: 128px 0;
}

.section--verde {
  background: var(--verde);
  color: var(--blanco);
}

.section__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: 12px;
}

.section--verde .section__eyebrow { color: #ffd9a8; }
.flip-section .section__eyebrow { color: #ffd9a8; }
.flip-section .section__lead { color: rgba(255, 255, 255, 0.75); }

.section__title {
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.05;
  max-width: 760px;
  overflow-wrap: break-word;
  hyphens: auto;
}

.section__lead {
  margin-top: 24px;
  font-family: var(--font-lead);
  font-size: 18px;
  line-height: 1.65;
  max-width: 580px;
  font-weight: normal;
  text-align: justify;
}

/* el isotipo de Soriak insertado dentro de un párrafo debe leerse como una
   palabra más de la frase, no como un logo pegado — más chico que el
   tamaño por defecto de .brand-mark (pensado para las líneas cortas del
   footer) y sin permitir que quede solo al inicio o final de línea. */
/* logo real del juego (con la O fundida de "S⊂⊃MOS") sustituyendo el texto
   "Quienes Somos" dentro de un título — nunca se retipea el nombre */
.title-logo {
  display: inline-block;
  height: 0.72em;
  width: auto;
  vertical-align: baseline;
  transform: translateY(0.06em);
}

/* cuando el logo ocupa el título completo (sin texto alrededor) se ve mejor
   como bloque a ancho natural en vez de a la altura del texto */
.title-logo--block {
  display: block;
  height: auto;
  width: clamp(220px, 30vw, 380px);
  transform: none;
}

.section__lead .brand-mark {
  height: 1em;
  margin: 0 0.15em;
}

/* evita que el logo quede aislado al final/inicio de línea, separado de
   "por"/"para" — el trío se mueve como una sola unidad al hacer wrap */
.brand-mark-wrap {
  white-space: nowrap;
}

/* Cómo se juega */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 72px;
}

.step {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  padding: 40px 30px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.step__number {
  font-family: var(--font-display);
  font-size: 30px;
  color: #ffd9a8;
  opacity: 0.85;
}

.step__title {
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 20px 0 10px;
}

.step__text {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.75;
}

/* Reglas de oro (copy real de la caja) — composición editorial: título +
   lista compacta, en vez de 3 tarjetas con relleno que dejaban aire vacío */
.section--tight { padding: 80px 0; }

.rules-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: start;
  margin-top: 28px;
}

.rules-layout__title { max-width: none; }

.rules {
  margin-top: 0;
}

.rule {
  padding: 20px 0;
  border-top: 1px solid rgba(13, 13, 13, 0.14);
}

.rule:last-child {
  border-bottom: 1px solid rgba(13, 13, 13, 0.14);
}

.rule__title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--verde);
  margin-bottom: 10px;
}

.rule__text {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  max-width: 440px;
}

/* Cartas interactivas (hover para voltear, inspirado en We Met At A Bar) */
.flip-section { background: var(--negro); color: var(--blanco); }

.flip-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
  perspective: 1200px;
}

.flip-card {
  aspect-ratio: 1.86 / 1;
  cursor: pointer;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card__inner,
.flip-card:focus-visible .flip-card__inner,
.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

/* frente y dorso son ambos la carta completa exportada de Illustrator
   (mismo criterio que el resto del sitio: imagen real, no recreada en CSS)
   — padding:0 en los dos, si no la imagen queda enmarcada dentro del
   padding:20px de .flip-card__face y se ve una carta dentro de otra */
.flip-card__front {
  background: var(--verde);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0;
}

.flip-card__back {
  background: var(--blanco);
  transform: rotateY(180deg);
  padding: 0;
}

.flip-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "Let's talk about it": la única carta blanca del mazo, colores invertidos
   frente al resto (dorso blanco/verde, frente verde/blanco) */
.flip-card--talk .flip-card__front {
  background: var(--blanco);
  border-color: rgba(0, 51, 0, 0.15);
}

/* el fondo de esta cara nunca debería verse (la imagen la cubre 100%,
   sin holgura) — pero se fija igual al mismo verde exacto del export de
   Illustrator (--verde, no --verde-cartas) por si algún navegador deja
   un borde de un subpíxel por redondeo */
.flip-card--talk .flip-card__back {
  background: var(--verde);
  color: var(--blanco);
}

.flip-section__hint {
  margin-top: 20px;
  font-size: 13px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Intro "El juego": texto + foto editorial grande, en vez de dejar el lado
   derecho vacío junto al bloque de texto */
.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.intro__text { min-width: 0; }

/* rotador de fotos (clase .slider en el HTML) en vez de un <img> único —
   ver .slider/.slider__slide más arriba */
.intro__image {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 440px;
  border-radius: var(--radius);
}

/* Galería */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.gallery img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Redes / footer */
.footer {
  background: var(--verde-oscuro);
  color: var(--blanco);
  padding: 96px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* marca Soriak: logotipo original, nunca deformado (siempre por height + width:auto).
   height mayor a 1em porque el wordmark está recortado a su cap-height real
   (sin el aire de ascendentes/descendentes que sí tiene el texto de alrededor);
   a 1em se veía chico y desproporcionado frente al cuerpo de texto. */
.brand-mark {
  display: inline-block;
  height: 1.35em;
  width: auto;
  vertical-align: middle;
  margin: 0 0.15em;
  flex-shrink: 0;
  position: relative;
  top: -0.05em;
}

/* sobre fondos oscuros (footer verde) el logo negro se invierte a blanco */
.brand-mark--on-dark {
  filter: brightness(0) invert(1);
}

.footer__brand { font-family: var(--font-display); font-size: 22px; }
.footer__brand img { height: 22px; width: auto; display: block; }
.footer__tag { margin-top: 10px; opacity: 0.7; font-size: 14px; max-width: 320px; }

.footer__handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  opacity: 0.8;
}

.footer__social {
  display: flex;
  gap: 16px;
}

.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.footer__social svg { width: 17px; height: 17px; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  font-size: 13px;
  opacity: 0.6;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer__legal a { opacity: 0.85; transition: opacity 0.2s ease; }

/* ---------- Página de producto ---------- */
.product {
  padding: 72px 0 128px;
}

.product__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
}

.product__gallery-main {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--verde);
  aspect-ratio: 4 / 5;
  position: relative;
}

.product__gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product__gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--negro);
}
.product__gallery-nav--prev { left: 14px; }
.product__gallery-nav--next { right: 14px; }

.product__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.product__thumbs button {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  background: var(--verde);
  border: 2px solid transparent;
  opacity: 0.6;
}
.product__thumbs button.active { border-color: var(--rojo); opacity: 1; }
.product__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product__info__eyebrow {
  color: var(--rojo);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 13px;
  text-transform: uppercase;
}

.product__title {
  font-size: clamp(30px, 3.6vw, 44px);
  margin-top: 12px;
  line-height: 1.05;
}

.product__badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #4a4a4a;
  border: 1px solid rgba(13, 13, 13, 0.16);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}

/* la única badge-pill que vive sobre fondo oscuro (footer verde-oscuro) — los
   tonos grises de .badge-pill quedan casi invisibles ahí. Fill sólido en
   --rojo (el vinotinto de marca, ya usado en eyebrows/estrellas) + texto
   crema en vez de un borde fino: se lee como una etiqueta/sello real. */
/* el rojo sólido no funcionaba ahí — mucho peso para un pill suelto sobre
   el verde oscuro. En vez de inventar otro color, replica la etiqueta de
   advertencia real que trae la caja física (fondo claro, texto y borde
   negro) — es el mismo texto exacto, así que tiene sentido que se vea
   como la misma etiqueta en vez de como un acento de color cualquiera */
.badge-pill--warning {
  background: var(--crema);
  color: var(--negro);
  border-color: var(--negro);
}

.product__price {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 44px);
  margin-top: 24px;
}

.product__price small {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #6a6a6a;
  text-transform: uppercase;
  margin-top: 6px;
  letter-spacing: 0.01em;
}

.product__buy-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.product__note {
  margin-top: 18px;
  font-size: 13px;
  color: #6a6a6a;
}

/* Acordeón */
.accordion { margin-top: 48px; border-top: 1px solid #d9d7d5; }

.accordion__item { border-bottom: 1px solid #d9d7d5; }

.accordion__trigger {
  width: 100%;
  background: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.accordion__icon { font-size: 22px; transition: transform 0.2s ease; }
.accordion__item.open .accordion__icon { transform: rotate(45deg); }

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.accordion__panel p {
  padding-bottom: 20px;
  margin: 0;
  line-height: 1.6;
  color: #3a3a3a;
  font-size: 15px;
}

/* mockup del Ticket Dorado, chico, dentro del panel — genera expectativa
   antes de leer de qué se trata. width/height en el <img> reservan el
   espacio correcto desde el primer render (evita que el acordeón "salte"
   de tamaño cuando la imagen termina de cargar). */
.ticket-teaser {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 4px 0 18px;
  border-radius: 8px;
}

.includes-list {
  list-style: none;
  margin: 0;
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.includes-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #3a3a3a;
}

.includes-list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
}

/* ---------- Reseñas verificadas ---------- */
.reviews__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center;
  margin-top: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.12);
}

.reviews__summary-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.reviews__average {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  color: var(--verde);
}

.reviews__stars {
  color: var(--rojo);
  font-size: 17px;
  letter-spacing: 0.05em;
}

.reviews__stars--static { display: block; margin-bottom: 4px; }

.reviews__count {
  font-size: 13px;
  color: #6a6a6a;
  margin-top: 2px;
}

.reviews__distribution {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 220px;
}

.reviews__dist-row {
  display: grid;
  grid-template-columns: 30px 1fr 22px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #6a6a6a;
}

.reviews__dist-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(13, 13, 13, 0.08);
  overflow: hidden;
}

.reviews__dist-fill {
  display: block;
  height: 100%;
  background: var(--rojo);
  border-radius: 999px;
}

.reviews__summary-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ----- modal de verificación + formulario ----- */
.reviews__panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(13, 13, 13, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.reviews__panel-inner {
  position: relative;
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.reviews__panel-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #9a9a9a;
}

.reviews__step-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 20px;
  color: var(--verde);
  margin-bottom: 8px;
}

.reviews__step-text {
  font-size: 14px;
  line-height: 1.55;
  color: #6a6a6a;
  margin-bottom: 20px;
}

.reviews__input,
.reviews__textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(13, 13, 13, 0.18);
  background: var(--crema);
  margin-bottom: 14px;
}

.reviews__textarea { min-height: 110px; resize: vertical; }

.reviews__error {
  min-height: 1.2em;
  color: var(--rojo);
  font-size: 13px;
  margin-top: 10px;
}

.reviews__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #4a4a4a;
  margin-bottom: 8px;
}

.reviews__label-optional { text-transform: none; font-weight: 500; color: #9a9a9a; }

.reviews__star-input {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}

.reviews__star-btn {
  background: none;
  border: none;
  padding: 2px;
  font-size: 30px;
  line-height: 1;
  color: var(--rojo);
  cursor: pointer;
  transition: transform 0.1s ease;
}

/* ----- listado público ----- */
.reviews__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
  scroll-margin-top: 90px;
}

.reviews__card {
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: var(--radius);
  padding: 24px;
}

.reviews__card > .reviews__stars {
  display: block;
  margin-bottom: 12px;
}

.reviews__card-comment {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
}

.reviews__card-meta {
  font-size: 12px;
  color: #9a9a9a;
}

.reviews__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #6a6a6a;
  padding: 40px 0;
}

.reviews__load-more {
  display: block;
  margin: 32px auto 0;
}

/* ---------- Sección "Comunidad" (home): reseñas compactas + galería IG ---------- */
.community__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 32px;
}

/* versión chica del resumen de reseñas: sin distribución de estrellas ni
   listado — solo promedio + los dos botones, apilados en vez del grid de
   3 columnas que usa la versión completa de producto.html */
.reviews--compact .reviews__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.reviews--compact .reviews__summary-actions { flex-direction: row; flex-wrap: wrap; }

.community__gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.community__gallery-grid a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}

/* rotador de fotos (clase .slider en el HTML) en vez de un <img> único —
   cada tile va cambiando entre varias fotos, no queda fija */
.community__gallery-grid .slider {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.community__ig-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--verde);
}

.community__ig-handle svg { width: 18px; height: 18px; flex-shrink: 0; }

/* óvalo de marca entre "Reglas de oro" y "Comunidad" — dos section--tight
   consecutivos suman 160px de relleno vacío (80px + 80px); el margin
   negativo lo muerde por los dos lados sin tocar el padding de ninguna de
   las dos secciones (que se usa igual en el resto del sitio), y de paso
   deja algo visual en medio del blanco en vez de aire puro */
.section-divider {
  display: flex;
  justify-content: center;
  margin: -32px 0;
  opacity: 0.3;
}

/* óvalo oficial recortado directamente del logo (logo2/logo-negro.png,
   teñido a --verde) — antes era un rect redondeado inventado a mano que no
   correspondía a la forma real de la "S⊂⊃MOS" fundida de la marca */
.section-divider__mark { height: 22px; width: auto; display: block; }

/* Estados hover agrupados aquí, detrás de (hover:hover) — en touch (celular)
   ":hover" suelto en un link hace que el primer tap solo "active" el hover
   y haga falta un segundo tap para navegar de verdad. Es la causa más común
   de "el botón no funciona" en mobile cuando el link en sí está bien. */
@media (hover: hover) and (pointer: fine) {
  .navbar__links a:hover { background: rgba(255, 255, 255, 0.10); }
  .navbar__ig:hover { background: rgba(255, 255, 255, 0.10); }
  .hero-card-btn:hover img { transform: translateY(-3px); }
  .btn--dark:hover { background: var(--verde-oscuro); }
  .btn--outline-dark:hover { background: var(--verde); color: var(--blanco); }
  .reviews__star-btn:hover { transform: scale(1.12); }
  .reviews__panel-close:hover { color: var(--negro); }
  .community__gallery-grid .slider:hover { transform: scale(1.05); opacity: 0.85; }
  .community__ig-handle:hover { opacity: 0.75; }
  .step:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.06);
  }
  .footer__social a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); }
  .footer__legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
}

/* Responsive */
/* el pill del menú (arriba) se centra sobre TODA la barra sin importar
   cuánto mida el logo — a un ancho angosto-pero-todavía-"desktop" eso lo
   hace terminar encima del logo, y "El juego" se parte en dos líneas
   dentro de su propio botón. El resto del layout (steps, intro, etc., más
   abajo en @media max-width:900px) recién necesita apilarse bastante más
   angosto que eso — por eso el navbar pasa a mobile en su propio punto de
   corte, más arriba, en vez de compartir el de todo lo demás. */
@media (max-width: 1180px) {
  .navbar .container { display: flex; justify-content: space-between; gap: 12px; }

  .navbar__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px 20px;
    margin: 0;
    background: rgba(17, 38, 19, 0.98);
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .navbar__links.is-open { display: flex; }
  .navbar__links a { text-align: center; padding: 14px 20px; }

  .navbar__burger { display: flex; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: auto; }
  .hero__photo { min-height: 360px; }

  .hero__content { padding: 20px; }

  .steps { grid-template-columns: 1fr 1fr; }
  .intro { grid-template-columns: 1fr; gap: 32px; }
  .intro__image { min-height: 320px; }
  .rules-layout { grid-template-columns: 1fr; gap: 24px; }
  .flip-cards { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .product__grid { grid-template-columns: 1fr; gap: 32px; }

  .reviews__summary { grid-template-columns: 1fr; gap: 24px; }
  .reviews__distribution { min-width: 0; }
  .reviews__list { grid-template-columns: 1fr; }
  .reviews__panel-inner { padding: 32px 24px; }

  .community__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .flip-cards { grid-template-columns: 1fr; }
  .flip-card { aspect-ratio: 1.6 / 1; }
  .container { padding: 0 20px; }

  .reviews__summary-main { flex-direction: column; align-items: flex-start; gap: 6px; }
  .reviews__summary-actions { flex-direction: row; flex-wrap: wrap; }
  .reviews__summary-actions .btn { flex: 1; }
}