/* popskn: estilos del sitio.
   Regla que manda: el efecto trae a la gente, la ficha vende. Todo lo "futurista"
   vive alrededor de la cara (HUD, rejilla, luz, puntos). Las tarjetas de producto
   son negro sobre blanco, sin efectos, legibles con el pulgar en dos segundos. */
:root {
  --bg: #030304;
  --bg-card: #0c0c0f;
  --line: #1c1c22;
  --line-hud: rgba(255, 45, 138, 0.35);
  --text: #f5f5f7;
  --muted: #a3a3ad;
  --pink: #ff2d8a;        /* brillo de los puntos y JOIN THE LIST */
  --pink-deep: #d71c75;   /* el punto del logo, medido */
  --cyan: #5ff2ff;        /* la luz fría del cyborg; solo acentos */
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --dot: clamp(16px, 4.6vw, 24px);   /* núcleo del punto; el área que se toca (48 px) es mayor */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.mono { font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; }

/* Partículas (canvas) detrás de todo */
.particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.9; }

/* Fondo: una rejilla fina que se desvanece y una luz que respira detrás de la cara.
   Solo transform/opacity animados: barato en teléfonos. */
.bg-grid {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 38%, #000 20%, transparent 75%);
}
.bg-glow {
  position: fixed; left: 50%; top: 32%; width: 90vmin; height: 90vmin; z-index: -2; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,45,138,0.16) 0%, rgba(95,242,255,0.05) 40%, transparent 68%);
  animation: glow 9s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  50% { transform: translate(-52%, -48%) scale(1.15); opacity: 1; }
}

/* Cabecera: la marca, el sonido y JOIN THE LIST. */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 0 14px; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 500; font-size: 32px; letter-spacing: -0.02em; text-decoration: none; line-height: 1; }
.brand .dot { color: var(--pink-deep); text-shadow: 0 0 12px rgba(255,45,138,0.7); }
.top-right { display: flex; align-items: center; gap: 14px; }
.join-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
  color: var(--pink); text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.join-link:hover { text-shadow: 0 0 10px rgba(255,45,138,0.8); }
.sound {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent;
  color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.sound svg { width: 16px; height: 16px; }
.sound[aria-pressed="true"] { color: var(--pink); border-color: var(--line-hud); }
.sound .off { display: none; }
.sound[aria-pressed="false"] .on { display: none; }
.sound[aria-pressed="false"] .off { display: block; }
@media (min-width: 900px) {
  .brand { font-size: 48px; }
  .join-link { font-size: 15px; letter-spacing: 0.3em; }
  .top { padding: 26px 0 20px; }
}

/* Escenario: la cara a la izquierda y el panel a la derecha en escritorio; en el
   teléfono, una sola columna y el panel es una hoja que sube. */
.stage { padding: 18px 0 6px; }
.kicker { color: var(--pink); margin: 0 0 8px; }
.kicker .blink { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); margin-right: 8px; vertical-align: 1px; animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.stage h1 { font-size: 28px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.015em; line-height: 1.1; }
.stage p.lead { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
@media (min-width: 900px) {
  .stage { display: grid; grid-template-columns: minmax(0, 560px) minmax(320px, 1fr); gap: 40px; align-items: start; padding-top: 28px; }
  .stage .intro { grid-column: 2; grid-row: 1; }
  .stage .face-wrap { grid-column: 1; grid-row: 1 / span 2; }
  .stage .panel-col { grid-column: 2; grid-row: 2; position: sticky; top: 20px; }
  .stage h1 { font-size: 40px; }
  .stage p.lead { font-size: 18px; }
}

/* La cara. La imagen manda; los puntos se colocan en porcentaje sobre ella. */
.face-wrap { position: relative; perspective: 1100px; }
.face {
  position: relative; overflow: hidden; background: #000; border-radius: 6px;
  cursor: crosshair; isolation: isolate; transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,45,138,0.12);
}
.face .dot-btn { transform: translateZ(40px); }
.face .corner, .face .hud { transform: translateZ(20px); }
/* Barrido de escáner al abrir una zona */
.face .sweep-line {
  position: absolute; left: -10%; right: -10%; top: 0; height: 2px; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--pink), transparent);
  box-shadow: 0 0 24px 6px rgba(95,242,255,0.45);
}
.face.sweep .sweep-line { animation: sweep 0.7s var(--ease-out) forwards; }
@keyframes sweep { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }
.face.sweep::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(95,242,255,0.18), transparent 30%); animation: flash 0.7s ease-out forwards; }
@keyframes flash { to { opacity: 0; } }
.face img { width: 100%; height: auto; aspect-ratio: 990 / 1472; transition: filter 0.4s ease, transform 0.6s var(--ease-out); }
body.sheet-open .face img { filter: brightness(0.55) saturate(0.8); }
@media (min-width: 900px) { body.sheet-open .face img { filter: brightness(0.85); } }
/* Esquinas de HUD y lecturas en mono */
.face .corner { position: absolute; width: 18px; height: 18px; border: 1px solid var(--line-hud); pointer-events: none; z-index: 2; }
.face .corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.face .corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.face .corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.face .corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.face .hud { position: absolute; z-index: 2; color: rgba(255,45,138,0.85); pointer-events: none; font-size: 10px; }
.face .hud.a { top: 14px; left: 36px; }
.face .hud.b { top: 14px; right: 36px; text-align: right; }
.face .hud.c { bottom: 14px; left: 36px; }
.face .hud.d { bottom: 14px; right: 36px; text-align: right; }
.face .hud .n { color: var(--cyan); }
/* La línea de escaneo: pasa una vez al cargar y luego cada 14 s. */
.face .scan {
  position: absolute; left: 0; right: 0; top: -4px; height: 3px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(95,242,255,0.9), rgba(255,45,138,0.9), transparent);
  box-shadow: 0 0 18px 4px rgba(95,242,255,0.35);
  animation: scan 14s linear infinite; opacity: 0;
}
@keyframes scan {
  0% { transform: translateY(0); opacity: 0; }
  2% { opacity: 1; }
  14% { transform: translateY(calc(100% + 100vh)); opacity: 1; }
  15%, 100% { opacity: 0; transform: translateY(0); }
}
/* Viñeta y rejilla dentro de la cara, muy sutiles */
.face::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, rgba(0,0,0,0.65) 100%);
}

/* Los puntos: núcleo que brilla, dos anillos que salen como un pulso de radar,
   etiqueta HUD al lado. Cada uno nace con un pequeño retraso (--i) al cargar. */
.dot-btn {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); z-index: 4;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  animation: born 0.7s var(--ease-out) both; animation-delay: calc(0.25s + var(--i) * 0.13s);
  transition: opacity 0.3s;
}
@keyframes born { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
body.sheet-open .dot-btn:not(.active) { opacity: 0.35; }
.dot-btn .core {
  width: var(--dot); height: var(--dot); border-radius: 50%; position: relative; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #ffd0e4 0%, var(--pink) 45%, var(--pink-deep) 100%);
  box-shadow: 0 0 10px 2px rgba(255,45,138,0.65), 0 0 28px 6px rgba(255,45,138,0.25);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
  animation: breathe 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s);
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.dot-btn .ring {
  position: absolute; width: var(--dot); height: var(--dot); border-radius: 50%;
  border: 1.5px solid var(--pink); opacity: 0; pointer-events: none;
  animation: ping 2.6s ease-out infinite; animation-delay: calc(var(--i) * -0.4s);
}
.dot-btn .ring.r2 { animation-delay: calc(var(--i) * -0.4s + 0.9s); border-color: var(--cyan); }
@keyframes ping { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(3.2); opacity: 0; } }
.dot-btn:hover .core, .dot-btn:focus-visible .core, .dot-btn.active .core {
  transform: scale(1.25); box-shadow: 0 0 14px 4px rgba(255,45,138,0.9), 0 0 40px 10px rgba(255,45,138,0.35);
}
.dot-btn:focus-visible { outline: none; }
.dot-btn:focus-visible .core { box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--pink); }
/* Etiqueta: aparece al pasar/tocar, a la derecha del punto (o a la izquierda si no cabe) */
.dot-btn .tip {
  position: absolute; left: calc(50% + var(--dot) * 0.5 + 12px); top: 50%; transform: translate(-6px, -50%);
  white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,0.7); border: 1px solid var(--line-hud); padding: 5px 9px; border-radius: 3px;
  opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.25s var(--ease-out);
  z-index: 5;
}
.dot-btn .tip::before { content: ""; position: absolute; right: 100%; top: 50%; width: 12px; height: 1px; background: var(--line-hud); }
.dot-btn.flip .tip { left: auto; right: calc(50% + var(--dot) * 0.5 + 12px); transform: translate(6px, -50%); }
.dot-btn.flip .tip::before { right: auto; left: 100%; }
.dot-btn:hover .tip, .dot-btn:focus-visible .tip, .dot-btn.active .tip { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 899px) {
  .dot-btn .tip, .dot-btn.flip .tip {
    left: 50%; right: auto; top: auto; bottom: calc(50% + var(--dot) * 0.5 + 10px);
    transform: translate(-50%, 4px);
  }
  .dot-btn .tip::before, .dot-btn.flip .tip::before { display: none; }
  .dot-btn:hover .tip, .dot-btn:focus-visible .tip, .dot-btn.active .tip { transform: translate(-50%, 0); }
}
/* Onda al tocar: un anillo que se expande desde el punto */
.dot-btn .tap { position: absolute; width: var(--dot); height: var(--dot); border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.dot-btn.tapped .tap { animation: tapwave 0.6s var(--ease-out) forwards; }
@keyframes tapwave { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(6); opacity: 0; } }

.hint { color: var(--muted); font-size: 11px; margin: 12px 0 0; text-align: center; }
.hint b { color: var(--pink); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .bg-glow, .face .scan, .kicker .blink, .product .render, .tile, .tile .pip { animation: none; }
  .dot-btn { animation: none; }
  .dot-btn .core { animation: none; }
  .dot-btn .ring { animation: none; opacity: 0.35; transform: scale(1.8); }
  .dot-btn .ring.r2 { display: none; }
}

/* El panel de zona.
   Teléfono: hoja que sube desde abajo (fixed). Escritorio: columna derecha, siempre visible,
   con la lista de zonas como estado en reposo. */
.sheet-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--bg-card); border-top: 1px solid var(--line-hud);
  border-radius: 18px 18px 0 0; padding: 12px 18px 28px;
  max-height: 88vh; overflow-y: auto; transform: translateY(104%);
  transition: transform 0.32s var(--ease-out); -webkit-overflow-scrolling: touch;
  box-shadow: 0 -20px 60px rgba(255,45,138,0.08);
}
.sheet::before {  /* línea de luz en el borde superior */
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--cyan), transparent);
}
body.sheet-open .sheet { transform: translateY(0); }
body.sheet-open .sheet-back { opacity: 1; pointer-events: auto; }
body.sheet-open { overflow: hidden; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: #2a2a31; margin: 0 auto 12px; }
.sheet .close {
  position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 22px; cursor: pointer; line-height: 1; z-index: 3;
}
.sheet .idle { display: none; }
.sheet .zone-code { color: var(--pink); margin: 4px 48px 6px 0; font-size: 10px; }
.sheet .zone-code .n { color: var(--cyan); }
/* Lo que entra en la hoja aparece con un barrido corto (0.25 s): se nota, no estorba. */
.sheet .in { animation: reveal 0.35s var(--ease-out) both; }
.sheet .in:nth-child(2) { animation-delay: 0.04s; } .sheet .in:nth-child(3) { animation-delay: 0.08s; }
.sheet .in:nth-child(4) { animation-delay: 0.12s; } .sheet .in:nth-child(5) { animation-delay: 0.16s; }
.sheet .in:nth-child(6) { animation-delay: 0.2s; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .sheet {
    position: static; transform: none; max-height: none; overflow: visible; border-radius: 12px;
    border: 1px solid var(--line); padding: 20px 22px 22px; min-height: 320px;
  }
  .sheet-back { display: none; }
  body.sheet-open { overflow: auto; }
  .sheet .grab { display: none; }
  .sheet .idle { display: block; }
  .sheet.has-zone .idle { display: none; }
  .sheet .close { top: 14px; right: 14px; }
}
/* Estado en reposo (escritorio): la lista de zonas como botones HUD */
.idle h2 { font-size: 20px; font-weight: 500; margin: 0 0 4px; }
.idle p { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
.zone-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zone-list button {
  width: 100%; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #000; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 10px;
  transition: border-color 0.2s, transform 0.2s var(--ease-out);
}
.zone-list button:hover { border-color: var(--pink); transform: translateX(3px); }
.zone-list .pip { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px rgba(255,45,138,0.7); flex: none; }

/* Encabezado de zona y tarjetas de producto: mismas en el panel y en la lista de abajo.
   AQUÍ NO HAY EFECTOS. Nombre, para qué, precio, botón. */
.zone-head { display: flex; align-items: center; gap: 10px; margin: 0 0 2px; }
.zone-head .pip { width: 12px; height: 12px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px rgba(255,45,138,0.7); flex: none; }
.zone-head h2, .zone-head h3 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.zone-tag { color: var(--muted); margin: 0 0 14px; font-size: 15px; }
/* Tarjeta de producto: render holográfico a la izquierda, nombre y precio a la derecha, Shop debajo.
   AQUÍ NO HAY EFECTOS QUE ESTORBEN: el giro es leve y la explicación va tras "Details". */
.product {
  --c: var(--pink); --mx: 50%;
  position: relative; display: grid; grid-template-columns: 84px 1fr; grid-template-areas: "visual info" "buttons buttons" "details details";
  gap: 4px 12px; border: 1px solid #26262d; border-radius: 14px; padding: 12px; margin: 0 0 10px;
  background: linear-gradient(135deg, #0a0a0d, #050506); overflow: hidden;
  transition: transform 0.2s var(--ease-out), border-color 0.2s; transform-style: preserve-3d;
}
.product::after {   /* brillo holográfico que sigue al puntero */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: radial-gradient(360px 160px at var(--mx) 0%, rgba(255,255,255,0.07), transparent 70%);
}
.product:hover { border-color: rgba(255,45,138,0.45); }
.product .visual {
  grid-area: visual; width: 84px; height: 100px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.05), transparent 70%), #08080b;
  border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden;
}
.product .visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 12px 12px; }
.product .render { width: 64px; height: 78px; position: relative; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 55%, transparent)); animation: hover 4s ease-in-out infinite; }
@keyframes hover { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
.product .info { grid-area: info; min-width: 0; align-self: center; }
.product .brand-name { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); margin: 0 0 2px; }
.product .name { font-size: 17px; font-weight: 500; margin: 0 0 3px; line-height: 1.2; }
.product .short { margin: 0 0 6px; font-size: 14px; color: #c9c9d1; line-height: 1.35; }
.product .price { font-size: 15px; color: #fff; margin: 0; }
.product .price span { color: var(--muted); font-size: 11px; display: block; }
.product .buttons { grid-area: buttons; margin-top: 8px; }
.product .more-btn { flex: 0 0 auto; min-height: 48px; padding: 0 14px; border-radius: 999px; border: 1px solid #2c2c33; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.product .more-btn::after { content: " +"; }
.product.open .more-btn::after { content: " \2212"; }
.product .details { grid-area: details; display: none; margin-top: 6px; }
.product.open .details { display: block; }
.product .what { margin: 0 0 8px; font-size: 14px; color: #d6d6dc; line-height: 1.45; }
.product .what .size { color: var(--muted); }
/* Color por marca (tono del render y del nombre de marca) */
.brand-boj { --c: #f3cfa6; } .brand-medicube { --c: #7ee8ff; } .brand-skin1004 { --c: #9ef0c4; }
.brand-biodance { --c: #e6e2ff; } .brand-cosrx { --c: #ff8a8a; } .brand-anua { --c: #b8f0b0; }
.brand-laneige { --c: #ff7bb0; } .brand-tocobo { --c: #c9b3ff; }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  flex: 1 1 130px; text-align: center; padding: 12px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none; letter-spacing: 0.01em; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform 0.15s var(--ease-out), box-shadow 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--pink); color: #000; }
.btn-primary:hover { box-shadow: 0 0 20px rgba(255,45,138,0.55); }
.btn-secondary { border: 1px solid #45454d; color: var(--text); font-size: 14px; }
.btn-secondary:hover { border-color: #fff; }
.btn-soon { border: 1px dashed #3a3a41; color: var(--muted); cursor: default; }
.product .btn-primary { flex: 1 1 auto; }
.btn-amazon { border: 1px solid #45454d; color: var(--text); }
.badge { display: inline-block; margin: 0 0 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(95,242,255,0.4); color: var(--cyan); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.empty { color: var(--muted); font-size: 15px; border: 1px dashed var(--line); border-radius: 12px; padding: 16px; }
.disclosure { font-size: 12px; color: #75757f; margin: 8px 0 0; }
.disclosure a { color: #9a9aa5; }

/* Mosaico de zonas: seis losetas que abren la ficha (más visual que una lista) */
.tiles { padding: 26px 0 0; }
.zone-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 720px) { .zone-tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  width: 100%; text-align: left; padding: 14px 14px 12px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(160deg, #0b0b0f, #050506); color: var(--text); font: inherit; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num num" "pip lbl" "cnt cnt"; gap: 6px 10px; align-items: center;
  position: relative; overflow: hidden; transition: transform 0.25s var(--ease-out), border-color 0.2s;
  animation: born 0.6s var(--ease-out) both; animation-delay: calc(0.3s + var(--i) * 0.08s);
}
.tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(200px 80px at 100% 0%, rgba(255,45,138,0.14), transparent 70%); pointer-events: none; }
.tile:hover { transform: translateY(-3px); border-color: rgba(255,45,138,0.5); }
.tile .num { grid-area: num; color: var(--cyan); font-size: 10px; }
.tile .pip { grid-area: pip; width: 14px; height: 14px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px rgba(255,45,138,0.8); animation: breathe 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s); }
.tile .lbl { grid-area: lbl; font-size: 17px; font-weight: 500; line-height: 1.15; }
.tile .cnt { grid-area: cnt; color: var(--muted); font-size: 10px; }

/* Índice en palabras, plegado (para quien no toca y para Google) */
.index { margin: 30px 0 0; border-top: 1px solid var(--line); padding-top: 6px; }
.index summary { cursor: pointer; padding: 12px 0; color: var(--muted); font-size: 15px; list-style: none; display: flex; gap: 10px; align-items: center; }
.index summary::-webkit-details-marker { display: none; }
.index summary .mono { color: var(--pink); }
.index summary::after { content: "+"; margin-left: auto; color: var(--pink); font-size: 20px; }
.index[open] summary::after { content: "‘2"; }

/* La misma lista en texto, debajo de la cara (para quien no toca y para Google) */
.zones { padding: 8px 0 8px; }
.zones > .mono { color: var(--pink); margin: 0 0 6px; }
.zones > h2 { font-size: 22px; font-weight: 500; margin: 0 0 6px; }
.zones > p { color: var(--muted); margin: 0 0 20px; }
.zone { padding: 20px 0 10px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.zone .more { display: inline-block; margin: 2px 0 10px; color: var(--cyan); font-size: 14px; }
@media (min-width: 720px) {
  .zone .products { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .zone .product { margin: 0; }
}

/* Mini formulario de la lista: uno por zona (en la ficha y en la lista de abajo) */
.join-mini, .join-main { margin: 12px 0 4px; padding: 14px 14px 12px; border: 1px solid var(--line-hud); border-radius: 12px; background: rgba(255,45,138,0.05); }
.join-mini label, .join-main label { display: block; color: var(--pink); margin: 0 0 4px; }
.join-mini p, .join-main p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.join-mini .row, .join-main .row { display: flex; gap: 8px; }
.join-mini input, .join-main input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid #3a3a3f; background: #000; color: var(--text); font: inherit; font-size: 16px; }
.join-mini input:focus, .join-main input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,45,138,0.2); }
.join-mini button, .join-main button { flex: 0 0 auto; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--pink); color: #000; font: inherit; font-weight: 500; cursor: pointer; }
.join-mini button:disabled, .join-main button:disabled { opacity: 0.6; }
.join-mini .note, .join-main .note { margin: 8px 0 0; font-size: 12px; color: #75757f; }
.join-mini .note[data-state="ok"], .join-main .note[data-state="ok"] { color: var(--cyan); }
.join-mini .note[data-state="error"], .join-main .note[data-state="error"] { color: var(--pink); }
.join-main { margin: 0; padding: 0; border: 0; background: transparent; }
.join-main label { display: none; }
.join-main > p { display: none; }

/* Lista de correo */
.join { margin: 36px 0 0; padding: 26px 20px; border: 1px solid var(--line-hud); border-radius: 16px; background: var(--bg-card); scroll-margin-top: 16px; position: relative; overflow: hidden; }
.join::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(255,45,138,0.12), transparent 60%); pointer-events: none; }
.join h2 { margin: 0 0 6px; font-size: 24px; font-weight: 500; }
.join p { margin: 0 0 14px; color: var(--muted); }
.join form { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.join input[type=email] {
  flex: 1 1 220px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid #3a3a3f;
  background: #000; color: var(--text); font: inherit; font-size: 16px;
}
.join input[type=email]:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,45,138,0.2); }
.join button { flex: 0 0 auto; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0; background: var(--pink); color: #000; font: inherit; font-weight: 500; cursor: pointer; }
.join .soon { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--pink); position: relative; }

/* Pie */
footer { margin: 44px 0 0; padding: 24px 0 44px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
footer p { margin: 0 0 8px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0; }

/* Páginas de texto (privacidad, términos, afiliado, artículos) */
.doc { padding: 24px 0 40px; max-width: 720px; }
.doc h1 { font-size: 30px; font-weight: 500; margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.15; }
.doc h2 { font-size: 21px; font-weight: 500; margin: 30px 0 8px; }
.doc h3 { font-size: 17px; font-weight: 500; margin: 20px 0 6px; }
.doc p, .doc li { color: #d6d6dc; font-size: 16px; }
.doc .updated { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.doc .kicker { margin-top: 18px; font-size: 11px; }
.doc .products { margin: 12px 0 6px; }
.doc .callout { border-left: 2px solid var(--pink); padding: 4px 0 4px 14px; margin: 16px 0; color: var(--muted); }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 8px 0 12px; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--muted); font-weight: 500; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.doc .table-wrap { overflow-x: auto; }