/* =============================================================================
   shop-v2.css — the redesigned storefront.
   Loaded ONLY when SHOP_LAYOUT=v2, after style.css.

   Two jobs:
     1. Repaint the whole shop by overriding the variables style.css already
        uses, so the product page, cart and checkout match the new home instead
        of staying black. Only the handful of colours style.css hardcodes are
        patched by hand further down.
     2. Add the blocks the new home introduces (.v2-*).

   NurShield runs this same binary and never loads this file, so its storefront
   is untouched by anything in here.
   ========================================================================== */

:root {
  /* — repaint: same variable names style.css already reads — */
  --bg: #F4FBF7;
  --surface: #FFFFFF;
  --surface-2: #E4F6EE;
  --ink: #0B1A16;
  --muted: #5C776E;
  --line: #0B1A16;
  --teal: #0FA98C;
  --teal-soft: #0C8D74;
  --teal-dark: #0A7561;
  --blue: #0FA98C;
  --blue-dark: #0A7561;
  --sky: #0C8D74;
  --green: #0FA98C;
  --gold: #C8B870;
  --gold-dark: #B7A55C;
  --red: #E0483C;
  --on-accent: #FFFFFF;
  --shadow: 0 4px 0 var(--ink);

  /* — new to v2 — */
  --lime: #C8FF6B;
  /* --pop is the contrast colour: the blob behind the hero product and the
     waitlist block. It is sampled from the actual logo (logo-academy-mark.png,
     dominant #1DE0FF), not from style.css — the two do not match.
     It is a LIGHT colour: white text on it lands at 1.60:1, which is
     unreadable, so anything on top of --pop uses --pop-ink (11.21:1). */
  --pop: #1DE0FF;
  --pop-ink: #0B1A16;
  --display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}

/* style.css writes these few colours literally; without these the light
   repaint would leave dark patches behind. */
body { background: var(--bg); color: var(--ink); }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-footer { background: var(--surface); border-top: 1px solid var(--line); }
.nav-dropdown { background: var(--surface); border: 1px solid var(--line); }
.btn-primary { background: #FFFFFF; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn-primary:hover { background: var(--lime); box-shadow: 2px 2px 0 var(--ink); transform: translate(1px, 1px); }
.btn-disabled { background: #E7EEEB; color: #8A9C96; box-shadow: none; border: 1.5px solid #CBD8D3; }
.card, .panel, .atable { background: var(--surface); }
.logo-text { color: var(--ink); }
.logo-text .skin { color: var(--teal); }

/* ── shared bits ─────────────────────────────────────────────────────────── */
.v2-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal); font-weight: 800; display: block; }
.v2-sechead { margin-bottom: 28px; }
.v2-sechead h2 { font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 4vw, 40px); letter-spacing: -.01em; margin: 6px 0 8px; }
.v2-sechead p { color: var(--muted); max-width: 62ch; }

/* ── promo strip + running ribbon ────────────────────────────────────────── */
.v2-promo { background: var(--pop); color: var(--pop-ink); text-align: center;
  font-weight: 800; font-size: 13px; letter-spacing: .04em; padding: 11px 16px; }
.v2-mq { overflow: hidden; background: var(--ink); color: #fff;
  border-bottom: 1px solid var(--ink); padding: 9px 0; }
.v2-mq > div { display: flex; gap: 44px; width: max-content;
  animation: v2mq 34s linear infinite; font-weight: 800; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.v2-mq span::before { content: "\2726"; margin-right: 12px; }
@keyframes v2mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .v2-mq > div { animation: none; } }

/* ── hero ────────────────────────────────────────────────────────────────── */
.v2-hero { background: #BFEBDD; padding: 60px 0 72px; }
.v2-hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.v2-hero h1 { font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 5.2vw, 58px); line-height: 1.04; letter-spacing: -.02em; margin: 14px 0 16px; }
.v2-hero h1 em { font-style: normal;
  background: linear-gradient(var(--lime), var(--lime)) 0 88% / 100% .26em no-repeat; padding: 0 .06em; }
.v2-lead { color: #2C4A41; font-size: 17px; max-width: 52ch; margin-bottom: 24px; }
.v2-hero__facts { margin-top: 18px; font-size: 12.5px; color: #3C5A52; max-width: 46ch; }
.v2-hero__art { position: relative; display: grid; place-items: center; }
.v2-blob { position: absolute; width: 88%; aspect-ratio: 1/1; background: var(--c, var(--pop));
  border-radius: 54% 46% 58% 42% / 46% 56% 44% 54%; }

/* ── carrusel del hero ──────────────────────────────────────────────────────
   Las diapositivas se apilan y se cruzan con opacidad + un desplazamiento
   corto, en vez de una tira que se mueve: así todas las fotos están siempre en
   el documento a tamaño completo y el navegador las descarga todas. Con una
   tira dentro de overflow:hidden las considera fuera de pantalla y nunca las
   baja — es el error que ya nos costó una vez. */
.v2-slide { position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: translateX(28px); pointer-events: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.85,.3,1); }
.v2-slide.on { opacity: 1; transform: none; pointer-events: auto; z-index: 2; }
.v2-slide.out-left  { opacity: 0; transform: translateX(-28px); z-index: 1; }
.v2-slide.out-right { opacity: 0; transform: translateX(28px);  z-index: 1; }
.v2-hero__art { min-height: 380px; }
.v2-hero__art img { position: relative; z-index: 1; width: 74%; height: auto;
  object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0,0,0,.28)); }

/* los puntos */
.v2-dots { position: absolute; z-index: 4; left: 50%; bottom: -26px;
  transform: translateX(-50%); display: flex; gap: 8px; }
.v2-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent; cursor: pointer;
  transition: background .2s, transform .2s; }
.v2-dots button[aria-selected] { background: var(--ink); transform: scale(1.15); }
.v2-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .v2-slide { transition: none; } }

.v2-hero__tag { position: absolute; z-index: 3; right: 0; bottom: -6px;
  background: var(--surface); border: 1.5px solid var(--ink); border-radius: 16px;
  padding: 12px 18px; box-shadow: 4px 4px 0 var(--ink); }
.v2-hero__tag b { display: block; font-size: 22px; color: var(--teal); letter-spacing: -.02em; }
.v2-hero__tag small { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) {
  .v2-hero__in { grid-template-columns: 1fr; gap: 32px; }
  .v2-hero__art { order: -1; }
  .v2-blob { width: 82%; }
}

/* ── trust band ──────────────────────────────────────────────────────────── */
.v2-trust { background: var(--surface); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 22px 0; }
.v2-trust__in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  text-align: center; font-size: 12.5px; color: var(--muted); }
.v2-trust__in b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }
@media (max-width: 760px) { .v2-trust__in { grid-template-columns: repeat(2, 1fr); gap: 22px; } }

/* ── catalog ─────────────────────────────────────────────────────────────── */
.v2-shop { padding: 64px 20px; }
.v2-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.v2-filters a { border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 16px;
  font-size: 13px; font-weight: 700; background: var(--surface); transition: .16s; }
.v2-filters a:hover { background: var(--c, var(--lime)); }
.v2-filters a.on { background: var(--ink); color: #fff; }

.v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .v2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v2-grid { grid-template-columns: 1fr; } }

.v2-card { display: flex; flex-direction: column; background: var(--surface);
  border: 1.5px solid var(--ink); border-radius: 18px; overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink); transition: .2s; }
.v2-card:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.v2-card__ph { aspect-ratio: 1/1; background: var(--surface-2); position: relative;
  display: grid; place-items: center; overflow: hidden; }
/* The colour is revealed BEHIND the product, which only works because the
   photos are cut out. A photo with its own background would hide it. */
.v2-card__blob { position: absolute; width: 88%; aspect-ratio: 1/1; background: var(--c);
  border-radius: 54% 46% 58% 42% / 46% 56% 44% 54%;
  transform: scale(.35); opacity: 0;
  transition: transform .5s cubic-bezier(.2,.85,.3,1), opacity .35s ease; }
.v2-card:hover .v2-card__blob, .v2-card:focus-visible .v2-card__blob {
  transform: scale(1) rotate(10deg); opacity: 1; }
.v2-card__ph img { position: relative; z-index: 1; width: 64%; height: auto; max-height: 70%;
  object-fit: contain; transition: transform .5s cubic-bezier(.2,.85,.3,1); }
.v2-card:hover .v2-card__ph img { transform: translateY(-8px) scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .v2-card__blob, .v2-card__ph img { transition: none; }
}
.v2-flag { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--lime);
  border: 1.5px solid var(--ink); color: var(--ink); font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.v2-card__bd { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.v2-card__cat { font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.v2-card__bd h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 5px; }
.v2-card__desc { font-size: 12px; color: var(--muted); line-height: 1.45; margin-bottom: 12px; }
.v2-card__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.v2-card__price .price { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.v2-card__price .price-was { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.v2-card .btn { margin-top: auto; font-size: 13.5px; padding: 10px 14px; }
.v2-empty { color: var(--muted); }

/* ── shop by goal ────────────────────────────────────────────────────────── */
.v2-goals { background: var(--surface-2); border-top: 1px solid var(--line); padding: 64px 0; }
.v2-goals__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.v2-goal { background: var(--surface); border: 1.5px solid var(--ink); border-radius: 16px;
  padding: 24px 18px; text-align: center; transition: .18s; }
.v2-goal:hover { background: var(--c); transform: translateY(-3px); }
.v2-goal__dot { display: block; width: 30px; height: 30px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--c); border: 1.5px solid var(--ink); }
.v2-goal:hover .v2-goal__dot { background: var(--surface); }
.v2-goal b { font-size: 14px; }
@media (max-width: 900px) { .v2-goals__grid { grid-template-columns: repeat(2, 1fr); } }

/* ── waitlist ────────────────────────────────────────────────────────────── */
.v2-wait { padding: 64px 0 72px; }
.v2-wait__card { background: var(--pop); color: var(--pop-ink); border: 1.5px solid var(--ink);
  border-radius: 22px; padding: 44px; text-align: center; box-shadow: 5px 5px 0 var(--ink); }
.v2-wait__card .v2-eyebrow { color: #054A57; }
.v2-wait__card h2 { font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px); margin: 6px 0 8px; }
.v2-wait__card p { color: rgba(11,26,22,.78); max-width: 52ch; margin: 0 auto; }
.v2-wait__card small { color: rgba(11,26,22,.62); font-size: 11.5px; }
.v2-wait__form { display: flex; gap: 10px; max-width: 460px; margin: 22px auto 12px; flex-wrap: wrap; }
.v2-wait__form input[type=email] { flex: 1; min-width: 220px; background: #fff; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 13px 20px; font-size: 14px; outline: none; }
/* Botón oscuro sobre el cian: es lo único que debe pedir el clic aquí. */
.v2-wait__form .btn-gold { background: var(--ink); color: #fff;
  border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 rgba(11,26,22,.35); }
.v2-wait__form .btn-gold:hover { background: #0A7285; border-color: #0A7285; }
.v2-wait__msg { font-weight: 700; margin-top: 14px; }
.v2-wait__msg.ok { color: #0A4A2E; }
.v2-wait__msg.bad { color: #8C1D14; }
/* Honeypot: off-screen rather than display:none — some bots skip hidden fields. */
.v2-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── encabezado en pantallas chicas ──────────────────────────────────────────
   El encabezado ya se salía de la pantalla ANTES de este rediseño (se puede
   comprobar en la tienda clásica): el logo, el menú y las acciones no caben en
   390 px y empujan el documento, así que la página entera se arrastra de lado.
   Se arregla aquí y no en style.css a propósito — NurShield lee ese archivo y
   no vamos a cambiarle nada todavía. */
@media (max-width: 720px) {
  .header-inner { gap: 12px; height: auto; padding: 10px 0; flex-wrap: nowrap; min-width: 0; }
  .logo { min-width: 0; }
  .logo-text { font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
  .logo-mark { height: 32px; }
  .main-nav { gap: 12px; min-width: 0; overflow: hidden; }
  .main-nav > a, .nav-cats > span { font-size: 13px; white-space: nowrap; }
  .header-actions { gap: 10px; flex-shrink: 0; margin-left: auto; }
  .lang-switch { padding: 4px 8px; font-size: 12px; }
}
@media (max-width: 520px) {
  /* Con este ancho el desplegable de categorías ya no cabe. Se va: el mismo
     filtro vive completo en el bloque del catálogo, así que no se pierde nada. */
  .nav-cats { display: none; }
  .v2-wait__card { padding: 30px 20px; }
  .v2-shop { padding: 44px 16px; }
  .v2-hero { padding: 40px 0 52px; }
}

/* ═══ Join Us — página del programa de vendedoras ═════════════════════════
   El registro visual sigue el de una página de programa de lealtad: un solo
   fondo pastel de arriba a abajo, títulos serif centrados en minúsculas,
   pasos como círculos con icono, y la escalera como TABLA comparativa en vez
   de tarjetas sueltas — una tabla contesta "¿qué me llevo en cada nivel?" de
   un vistazo, tres tarjetas no.
   ====================================================================== */
.rs-page { background: #D8F3EA; }          /* un solo lienzo para toda la página */
.rs-page .rs-block { padding: 68px 20px; }

.rs-h2 { font-family: var(--display); font-weight: 400; text-align: center;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06; margin-bottom: 10px; }
.rs-sub { text-align: center; color: #35564D; max-width: 58ch;
  margin: 0 auto 40px; font-size: 15px; }

.rs-hero { background: transparent; padding: 60px 0 44px; text-align: center; }
.rs-lead { color: #2C4A41; font-size: 17px; max-width: 54ch; margin: 0 auto 26px; }
.rs-mq { border-top: 1px solid var(--ink); }

/* los cuatro pasos: círculo con contorno, etiqueta y texto corto */
.rs-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 26px; text-align: center; }
.rs-ico { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); }
.rs-ico svg { width: 34px; height: 34px; fill: none; stroke: var(--ink);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rs-steps b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 8px; }
.rs-steps p { font-size: 13.5px; color: #35564D; line-height: 1.55; max-width: 30ch; margin: 0 auto; }
@media (max-width: 900px) { .rs-steps { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 520px) { .rs-steps { grid-template-columns: 1fr; } }

/* la tabla de niveles */
.rs-tiers { padding: 68px 0; border-top: 1px solid rgba(11,26,22,.12); }
.rs-table-wrap { overflow-x: auto; }        /* en celular la tabla se desliza sola */
.rs-table { width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1.5px solid var(--ink); border-radius: 18px;
  overflow: hidden; box-shadow: 5px 5px 0 var(--ink); min-width: 560px; }
.rs-table th, .rs-table td { padding: 15px 16px; text-align: center;
  border-bottom: 1px solid rgba(11,26,22,.10); font-size: 14px; }
.rs-table thead th { background: var(--pop); color: var(--pop-ink);
  border-bottom: 1.5px solid var(--ink); }
.rs-table thead th + th { border-left: 1px solid rgba(11,26,22,.18); }
.rs-table__corner { background: var(--surface) !important; border-bottom: 1.5px solid var(--ink); }
.rs-th__name { display: block; font-size: 13px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; }
.rs-th__req { display: block; font-size: 11px; opacity: .72; margin-top: 2px; }
.rs-table tbody td:first-child, .rs-table tbody th:first-child { text-align: left;
  font-weight: 600; color: #24413A; }
.rs-table tbody tr:last-child td { border-bottom: none; }
.rs-table tbody tr:nth-child(even) { background: #F4FBF8; }
.rs-row-pct td { padding-top: 18px; padding-bottom: 18px; }
.rs-row-pct b { font-family: var(--display); font-weight: 400; font-size: 30px; }
.rs-tick { display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--lime); border: 1.5px solid var(--ink);
  font-size: 14px; font-weight: 800; }
.rs-no { color: #9BB0AB; }
.rs-note { margin-top: 20px; font-size: 12.5px; color: #4A6259; text-align: center; }

/* preguntas: encabezado a la izquierda, lista a la derecha */
.rs-faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: start; }
.rs-faq-head .rs-h2 { text-align: left; margin-bottom: 20px; }
.rs-faq { display: grid; gap: 10px; }
.rs-faq details { background: var(--surface); border: 1.5px solid var(--ink);
  border-radius: 14px; padding: 15px 20px; }
.rs-faq summary { font-weight: 700; font-size: 14.5px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.rs-faq summary::-webkit-details-marker { display: none; }
.rs-faq summary::after { content: "+"; font-weight: 800; font-size: 18px; line-height: 1; }
.rs-faq details[open] summary::after { content: "−"; }
.rs-faq p { margin-top: 12px; font-size: 14px; color: #35564D; line-height: 1.6; }
@media (max-width: 900px) { .rs-faq-grid { grid-template-columns: 1fr; gap: 24px; } }

/* registro */
.rs-signup { padding: 20px 0 80px; }
.rs-signup__card { background: var(--pop); color: var(--pop-ink); border: 1.5px solid var(--ink);
  border-radius: 22px; padding: 40px; max-width: 620px; margin: 0 auto; text-align: center;
  box-shadow: 5px 5px 0 var(--ink); }
.rs-signup__card .v2-eyebrow { color: #054A57; }
.rs-signup__card h2 { font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 36px); margin: 6px 0 8px; }
.rs-signup__card > p { color: rgba(11,26,22,.78); }
.rs-signup__card small { color: rgba(11,26,22,.62); font-size: 11.5px; }
.rs-form { display: grid; gap: 12px; margin: 22px 0 12px; text-align: left; }
.rs-form label { font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; display: grid; gap: 6px; }
.rs-form input { background: #fff; color: var(--ink); border: 1.5px solid var(--ink);
  border-radius: 12px; padding: 12px 14px; font-size: 15px; outline: none;
  font-weight: 400; letter-spacing: normal; text-transform: none; }
.rs-form .btn { margin-top: 6px; }
.rs-msg { font-weight: 700; margin-top: 12px; }
.rs-msg.ok  { color: #0A4A2E; }
.rs-msg.bad { color: #8C1D14; }

/* código de descuento en el carrito */
.promo-form { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.promo-form input { flex: 1; min-width: 140px; background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 16px; font-size: 14px; }
.promo-error { color: #8C1D14; font-size: 12.5px; margin-bottom: 10px; }
.sum-discount, .co-discount { color: #0A7561; font-weight: 700; }
.pill-status { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; }

/* ── Join Us · paquetes de entrada ─────────────────────────────────────────
   Las dos cuentas van una junto a la otra para que se comparen de un vistazo;
   el recomendado se marca en vez de esconderse detrás de un texto. */
.rs-packs { padding: 68px 0; border-top: 1px solid rgba(11,26,22,.12); }
.rs-pack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 860px; margin: 0 auto; }
.rs-pack { position: relative; background: var(--surface); border: 1.5px solid var(--ink);
  border-radius: 18px; padding: 28px 24px; box-shadow: 4px 4px 0 var(--ink);
  display: flex; flex-direction: column; }
.rs-pack--best { background: var(--pop); box-shadow: 6px 6px 0 var(--ink); }
.rs-pack__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 4px 14px; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; }
.rs-pack h3 { font-family: var(--display); font-weight: 400; font-size: 26px; margin-bottom: 6px; }
.rs-pack__what { font-size: 13px; color: #35564D; margin-bottom: 16px; }
.rs-pack--best .rs-pack__what { color: rgba(11,26,22,.78); }
.rs-pack__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.rs-pack__price b { font-family: var(--display); font-weight: 400; font-size: 46px; line-height: 1; }
.rs-pack__price span { font-size: 12.5px; color: #4A6259; }
.rs-pack--best .rs-pack__price span { color: rgba(11,26,22,.7); }
.rs-pack__math { font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; flex: 1; }
.rs-pack .btn { margin-top: auto; }
@media (max-width: 760px) { .rs-pack-grid { grid-template-columns: 1fr; } }

/* ── Join Us · hero a dos columnas ─────────────────────────────────────────
   El nombre juega con el de la marca ("aSkin to Glow" → "aSkin to Join Us"),
   así que el título se arma por partes y cada una recibe un trato distinto:
   sans compacta, una palabra chica girada, y serif enorme con el marcador. */
.rs-hero { padding: 52px 0 64px; text-align: left; }
.rs-hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
/* El logo manda en la columna izquierda: ocupa casi todo el ancho y el resto
   del texto se acomoda debajo, más compacto, para que no crezca de más. */
.rs-hero__logo { width: 100%; max-width: 480px; height: auto; margin: 0 0 6px -10px; }

.rs-title { margin: 8px 0 18px; line-height: .92; }
.rs-title span { display: block; }
.rs-title__a { font-size: clamp(34px, 5.2vw, 60px); font-weight: 800; letter-spacing: -.045em; }
.rs-title__to { font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.6vw, 30px); margin: 2px 0 2px 4px; transform: rotate(-6deg);
  transform-origin: left center; color: var(--accent); }
.rs-title__b { font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 6.2vw, 74px); letter-spacing: -.02em; width: max-content; max-width: 100%;
  background: linear-gradient(var(--lime), var(--lime)) 0 86% / 100% .22em no-repeat; }
.rs-hero .rs-lead { margin: 0 0 24px; }
.rs-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* los productos, con paralaje suave */
.rs-hero__art { position: relative; display: grid; place-items: center; min-height: 440px; }
.rs-hero__blob { position: absolute; width: 92%; aspect-ratio: 1/1; background: var(--pop);
  border-radius: 54% 46% 58% 42% / 46% 56% 44% 54%;
  transition: transform .5s cubic-bezier(.2,.85,.3,1); }
.rs-hero__shot { position: relative; z-index: 2; width: 100%; height: auto;
  filter: drop-shadow(0 22px 30px rgba(11,26,22,.30));
  transition: transform .5s cubic-bezier(.2,.85,.3,1); }
.rs-spark { position: absolute; z-index: 3; color: #fff; transition: transform .6s ease; }
.rs-spark svg { width: 100%; height: 100%; fill: currentColor; }
.rs-spark.s1 { width: 52px; height: 52px; left: 2%;  top: 6%; }
.rs-spark.s2 { width: 30px; height: 30px; right: 6%; bottom: 10%; color: var(--lime); }

@media (max-width: 900px) {
  .rs-hero__in { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .rs-hero__logo { margin-inline: auto; max-width: 340px; }
  .rs-title span, .rs-title__b { margin-inline: auto; }
  .rs-title__to { transform: none; }
  .rs-hero .rs-lead { margin-inline: auto; }
  .rs-hero__cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-hero__blob, .rs-hero__shot, .rs-spark { transition: none; }
}

/* ── Join Us · hero compacto, logo grande ─────────────────────────────────
   El logo ya dice "a Skin"; el título solo pone "to Join Us". Se reduce el
   alto del bloque pero el logo se queda mandando en su columna. */
.rs-page .rs-hero { padding: 26px 0 34px; }
.rs-hero__in { align-items: center; gap: 32px; }
.rs-hero__logo { width: 100%; max-width: 460px; margin: 0 0 -8px -14px; }
.rs-title { margin: 0 0 14px; }
.rs-title__to { margin: 0 0 0 6px; }
.rs-hero .rs-lead { font-size: 16px; margin-bottom: 20px; }
.rs-hero__art { min-height: 340px; }
/* Texto solo para lectores de pantalla: el h1 tiene que decir la frase completa
   aunque en pantalla la mitad la ponga el logo. */
.rs-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 900px) {
  .rs-hero__logo { max-width: 320px; margin: 0 auto -6px; }
}

/* El título sube al hueco transparente que el logo deja bajo "a Skin" — el
   gráfico ocupa solo el lado derecho, así que ahí no choca con nada. Es lo que
   permite recortar el alto del hero sin achicar el logo. */
.rs-page .rs-hero { padding: 18px 0 30px; }
.rs-hero__logo { margin-bottom: 0; }
.rs-title { margin-top: -76px; position: relative; z-index: 2; }
@media (max-width: 900px) { .rs-title { margin-top: -52px; } }

/* ── testimonios ──────────────────────────────────────────────────────────
   Se ajustan solos al número que haya: con una sola cita no queda una tarjeta
   perdida en una rejilla de tres. */
.v2-quotes { padding: 64px 0; border-top: 1px solid var(--line); }
.v2-quotes__grid { display: grid; gap: 18px; justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); }
.v2-quote { background: var(--surface); border: 1.5px solid var(--ink);
  border-radius: 18px; padding: 26px 24px; box-shadow: 4px 4px 0 var(--ink); margin: 0; }
.v2-quote__stars { color: var(--gold); font-size: 15px; letter-spacing: 3px; }
.v2-quote blockquote { margin: 12px 0 16px; font-size: 15px; line-height: 1.6; }
.v2-quote blockquote::before { content: "\201C"; }
.v2-quote blockquote::after  { content: "\201D"; }
.v2-quote figcaption b { display: block; font-size: 13.5px; }
.v2-quote figcaption span { font-size: 12px; color: var(--muted); }
.rs-page .v2-quotes { border-top: 1px solid rgba(11,26,22,.12); }

/* Igualar el alto del hero de Join Us con el de la tienda (512px en escritorio).
   El logo es lo que manda, así que se recorta ahí y se aprieta el espaciado.
   Los números salen de medir los dos heros, no a ojo. */
.rs-page .rs-hero { padding: 30px 0 36px; }
.rs-hero__logo { max-width: 360px; }
.rs-title { margin-top: -60px; }
.rs-title__b { font-size: clamp(38px, 5.4vw, 62px); }
.rs-title__to { font-size: clamp(18px, 2.2vw, 25px); }
.rs-hero .rs-lead { font-size: 15.5px; margin-bottom: 18px; max-width: 46ch; }
.rs-hero__art { min-height: 300px; }
@media (max-width: 900px) {
  .rs-page .rs-hero { padding: 22px 0 26px; }
  .rs-hero__logo { max-width: 240px; }
  .rs-title { margin-top: -38px; }
  .rs-hero__art { min-height: 240px; }
}

/* Segunda pasada: faltaban 84px en escritorio y 50px en celular. */
.rs-page .rs-hero { padding: 22px 0 26px; }
.rs-hero__logo { max-width: 300px; }
.rs-title { margin-top: -50px; }
.rs-hero .rs-lead { max-width: 54ch; }
@media (max-width: 900px) {
  .rs-page .rs-hero { padding: 18px 0 20px; }
  .rs-hero__logo { max-width: 210px; }
  .rs-title { margin-top: -32px; }
  .rs-hero__art { min-height: 210px; }
}

/* ── "Lo que NO lleva" ────────────────────────────────────────────────────── */
.v2-noblock { padding: 60px 0; border-top: 1px solid var(--line); background: var(--surface-2); }
.v2-noblock .v2-eyebrow { text-align: center; margin-bottom: 4px; }
.v2-nogrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 30px; }
.v2-no { background: var(--surface); border: 1.5px solid var(--ink); border-radius: 14px;
  padding: 20px 10px; text-align: center; }
.v2-no__x { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 10px;
  border-radius: 50%; border: 1.5px solid #C4453F; color: #C4453F; font-weight: 800; font-size: 14px; }
.v2-no span:last-child { font-size: 12px; font-weight: 700; line-height: 1.3; display: block; }
@media (max-width: 900px) { .v2-nogrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .v2-nogrid { grid-template-columns: repeat(2, 1fr); } }

/* El titular del catálogo manda; la leyenda va en letra chica debajo. */
.v2-shop .v2-sechead h2 { font-size: clamp(30px, 5vw, 52px); margin-bottom: 10px; }
.v2-shop .v2-sechead p { font-size: 13.5px; max-width: 56ch; }

/* ── Respaldo · las cifras ─────────────────────────────────────────────────── */
.v2-facts { padding: 60px 0; border-top: 1px solid var(--line); }
.v2-facts .v2-eyebrow, .v2-facts .rs-h2 { text-align: center; }
.v2-facts__grid { display: grid; gap: 22px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.v2-fact { border-left: 4px solid var(--pop); padding: 6px 0 6px 20px; }
.v2-fact b { display: block; font-family: var(--display); font-weight: 400;
  font-size: 38px; line-height: 1.05; margin-bottom: 6px; letter-spacing: -.02em; }
.v2-fact p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* En pantallas chicas el recuadro del precio se salía 8px: con el carrusel
   quedó posicionado contra la diapositiva, que ya ocupa todo el ancho. */
@media (max-width: 560px) {
  .v2-hero__tag { right: 0; bottom: -10px; padding: 10px 14px; }
  .v2-hero__tag b { font-size: 19px; }
}

/* La diapositiva que no está en cuadro se aparta 28px a la derecha; esos 28px
   empujaban el ancho del documento en pantallas chicas. `clip` los recorta sin
   crear un contenedor desplazable — con `hidden` el recuadro del precio, que
   cuelga por debajo, se habría cortado también. */
.v2-hero { overflow-x: clip; }

/* ── El guiño del empaque en el titular ────────────────────────────────────
   "nothing" escrito "noth[ig]n", con el mismo recuadro dorado que lleva el
   logotipo de aSkin to Glow. El dorado es el de la marca (--gold), aclarado
   desde el que se ve en la foto de la caja (#ACA472), que sale apagado por la
   luz cálida del estudio. */
.wm__word { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700; letter-spacing: -.02em; }
.wm__ig { display: inline-block; color: #9A8434; border: .085em solid #9A8434;
  border-radius: .06em; padding: 0 .1em .04em; margin: 0 .04em; line-height: 1;
  font-size: .82em; vertical-align: .06em; }

/* Los testimonios, siempre en una sola fila en escritorio. `grid-auto-flow:
   column` acomoda los que haya sin fijar un número: sirve igual con tres que
   con los cuatro que faltan. En celular se apilan. */
.v2-quotes__grid { grid-auto-flow: column; grid-auto-columns: 1fr;
  grid-template-columns: none; justify-content: stretch; }
.v2-quote { padding: 22px 20px; }
.v2-quote blockquote { font-size: 14px; }
@media (max-width: 900px) {
  .v2-quotes__grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; }
}

/* ── La tipografía de la marca ─────────────────────────────────────────────
   El empaque usa Century Gothic (Monotype, de paga): no se puede servir como
   fuente web. La pila la pide primero de forma LOCAL — quien tenga Office la
   tiene instalada y ve la letra real de la caja, sin que nosotros la
   distribuyamos. Los demás caen en Questrial, geométrica libre (OFL) que se
   auto-hospeda aquí, o en URW Gothic, que traen muchos Linux.  */
@font-face {
  font-family: 'Questrial';
  src: url('/static/fonts/questrial.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --marca: "Century Gothic", "URW Gothic", "Questrial", "Didact Gothic",
           "Avant Garde", "Apple SD Gothic Neo", system-ui, sans-serif;
}
/* Donde la marca habla: el logotipo del encabezado, los nombres de producto y
   el guiño del empaque. Los titulares grandes se quedan en serif — ese
   contraste es lo que hace que el bloque no se aplane. */
.logo-text            { font-family: var(--marca); letter-spacing: -.01em; }
.v2-card__bd h3       { font-family: var(--marca); }
.v2-hero__tag small   { font-family: var(--marca); }
.rs-pack h3           { font-family: var(--marca); }
.wm__word             { font-family: var(--marca); font-weight: 700; letter-spacing: -.01em; }

/* "nothign" con los colores del empaque: las letras en el teal de la caja y el
   recuadro "ig" en dorado. El teal muestreado (#549D8A) queda en 3.04:1 sobre
   el fondo — justo en el mínimo para texto grande, así que se usa un punto más
   oscuro (#3E8875, 4.01:1) y aguanta también si el titular se achica. */
.wm__word { color: #3E8875; }

/* En el teléfono la mancha del hero se salía del bloque: es un cuadrado atado
   al ANCHO del contenedor, y la foto de los tres productos es muy apaisada
   (1200×680), así que el cuadrado quedaba mucho más alto que la imagen y se
   derramaba. Aquí la mancha deja de ser cuadrada y se ajusta al contenedor,
   que crece con su propio relleno. */
@media (max-width: 900px) {
  .rs-hero__art { min-height: 0; padding: 11% 0; }
  .rs-hero__blob { width: 98%; height: 100%; aspect-ratio: auto; }
  .rs-hero__shot { width: 96%; }
  .rs-spark.s1 { width: 34px; height: 34px; top: 2%; }
  .rs-spark.s2 { width: 22px; height: 22px; bottom: 4%; }
}

/* ═══ Ficha de producto ════════════════════════════════════════════════════ */
.pd__top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; padding: 44px 20px 20px; align-items: start; }
@media (max-width: 900px) { .pd__top { grid-template-columns: 1fr; gap: 26px; } }

/* galería */
.pd__main { background: var(--surface-2); border: 1.5px solid var(--ink); border-radius: 18px;
  aspect-ratio: 1/1; display: grid; place-items: center; overflow: hidden; box-shadow: 4px 4px 0 var(--ink); }
.pd__main img { width: 78%; height: auto; object-fit: contain; }
.pd__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.pd__thumb { aspect-ratio: 1/1; background: var(--surface-2); border: 1.5px solid var(--ink);
  border-radius: 11px; overflow: hidden; cursor: pointer; padding: 6px; display: grid; place-items: center; }
.pd__thumb.on { box-shadow: inset 0 0 0 2px var(--pop); }
.pd__thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Los espacios que faltan se dibujan vacíos a propósito: así se ve cuántas
   fotos quedan por subir en vez de que la fila se vea "completa" con dos. */
.pd__thumb--empty { border-style: dashed; border-color: rgba(11,26,22,.28); cursor: default; }

/* caja de compra */
.pd__buy h1 { font-family: var(--display); font-weight: 400;
  font-size: clamp(28px, 4vw, 42px); line-height: 1.06; margin: 6px 0 10px; }
.pd__short { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.pd__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.pd__price .price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.pd__price .price-was { font-size: 16px; color: var(--muted); text-decoration: line-through; }
.pd__packs { border: 0; padding: 0; margin: 0 0 16px; }
.pd__packs legend { font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pd__pack { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--ink); border-radius: 14px;
  padding: 12px 16px; margin-bottom: 8px; cursor: pointer; transition: .16s; }
.pd__pack.on { background: var(--pop); }
.pd__pack input { accent-color: var(--ink); }
.pd__pack b { font-size: 18px; }
.pd__pack__u { font-size: 12.5px; color: var(--muted); }
.pd__pack.on .pd__pack__u { color: rgba(11,26,22,.7); }
.pd__pack__p { font-weight: 800; }
.pd__pack__s { background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 2px 8px; font-size: 11px; font-weight: 800; }
.pd__out { font-weight: 700; color: var(--muted); }
.pd__seals { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px;
  font-size: 12px; color: var(--muted); }
.pd__seals span { color: #C4453F; font-weight: 800; }

/* bloques de abajo */
.pd__claim, .pd__ing, .pd__facts, .pd__desc { padding: 54px 0; border-top: 1px solid var(--line); }
.pd__claim { background: var(--surface-2); text-align: center; }
.pd__claim .rs-sub { margin-inline: auto; }
.pd__ing__grid { display: grid; gap: 16px; margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pd__ing__card { background: var(--surface); border: 1.5px solid var(--ink); border-radius: 16px;
  padding: 22px; box-shadow: 4px 4px 0 var(--ink); }
.pd__ing__card b { display: block; font-size: 15px; margin-bottom: 8px; }
.pd__ing__card p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.pd__facts__grid { display: grid; gap: 16px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pd__facts__box { background: var(--surface); border: 1.5px solid var(--ink); border-radius: 16px; padding: 20px; }
.pd__facts__box h3 { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.pd__facts__box table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd__facts__box th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1.5px solid var(--ink); padding-bottom: 6px; }
.pd__facts__box td { padding: 8px 0; border-bottom: 1px solid rgba(11,26,22,.08); }
.pd__desc p { max-width: 68ch; color: var(--muted); line-height: 1.7; }

/* ── Galería: piezas apiladas, botón + y visor ────────────────────────────── */
.pd__main { position: relative; }
.pd__slide { margin: 0; display: none; place-items: center; width: 100%; height: 100%; }
.pd__slide.on { display: grid; }
.pd__slide img { width: 78%; height: auto; object-fit: contain; cursor: zoom-in; }
.pd__slide video { width: 74%; height: auto; border-radius: 12px; background: #000; }
.pd__zoom { position: absolute; right: 12px; bottom: 12px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; background: var(--surface);
  border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.pd__zoom:hover { background: var(--lime); }
.pd__thumbs { grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); }
.pd__play { font-size: 18px; color: var(--ink); }
.pd__thumb:has(.pd__play) { background: var(--pop); }

/* visor a pantalla completa */
.pd__lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.pd__lb::backdrop { background: rgba(11,26,22,.86); }
.pd__lb img { max-width: 92vw; max-height: 90vh; width: auto; height: auto;
  border-radius: 14px; display: block; }
.pd__lb__x { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px;
  border-radius: 50%; background: var(--surface); border: 1.5px solid var(--ink);
  font-size: 17px; cursor: pointer; z-index: 2; }
@media (max-width: 560px) { .pd__slide img { width: 92%; } .pd__slide video { width: 88%; } }

/* El marco era cuadrado y las fotos son verticales (826×1100), así que la
   imagen quedaba al 78% con aire a los lados. El marco pasa a 4:5 y la foto
   se ajusta a él con `contain` —no `cover`— porque estas fotos traen datos
   señalados en las orillas y recortarlas se los comería. */
.pd__main { aspect-ratio: 4 / 5; padding: 10px; }
.pd__slide { width: 100%; height: 100%; }
.pd__slide img { width: 100%; height: 100%; object-fit: contain; }
.pd__slide video { width: auto; height: 100%; max-width: 100%; }
/* En miniatura sí conviene recortar: llena el cuadro y se distingue mejor. */
.pd__thumb { padding: 0; }
.pd__thumb img { object-fit: cover; }

/* Con width/height al 100% la imagen se salía 5% del alto y el marco la
   recortaba. Con máximos se ajusta al lado que toque y nunca se pasa. */
.pd__slide img, .pd__slide video {
  width: auto; height: auto; max-width: 100%; max-height: 100%; }
.pd__slide { min-height: 0; min-width: 0; }

/* `max-height: 100%` no servía de nada: las diapositivas iban en el flujo y el
   porcentaje no tenía contra qué medirse. Fijándolas al marco, el límite ya se
   resuelve y la foto se ajusta al lado que toque. */
.pd__slide { position: absolute; inset: 10px; }
.pd__slide.on { display: grid; place-items: center; }

/* Chrome ignora `max-height:100%` cuando ya limitó el ancho y la imagen trae
   proporción propia: la deja en 763px dentro de una caja de 717. Con la caja
   al 100% y `contain`, el recuadro es exactamente el del marco y la foto se
   dibuja centrada adentro — nunca se pasa. */
.pd__slide img, .pd__slide video {
  width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }

/* Definitivo: la pieza se ancla al marco. Con position:absolute e inset:0 su
   caja ES la de la diapositiva, sin que la proporción intrínseca de la imagen
   pueda estirarla. `contain` la dibuja centrada y completa dentro. */
.pd__slide img, .pd__slide video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; max-width: none; max-height: none; }