/* ==========================================================================
   NFConecta · estilos de la tienda
   Lenguaje premium y cálido (piezas con doble bisel, botones píldora, apariciones
   suaves) con el rasgo de marca de siempre: la franja aguamarina tras las palabras.
   ========================================================================== */

/* Tipografía de marca --------------------------------------------------------
   Coco Gothic necesita licencia web. Mientras tanto se usa Jost (OFL), una
   geométrica muy cercana. Para cambiarla: añade su @font-face y sustituye el
   primer nombre de --font-brand. Nada más en la hoja depende del nombre. */
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --font-brand: "Jost", "Century Gothic", "Futura", "Avenir Next", sans-serif;

  --bg: #f7f6f2;          /* blanco roto cálido */
  --bg-2: #efeee9;
  --core: #ffffff;
  --shell: rgba(16, 20, 19, 0.035);
  --hair: rgba(16, 20, 19, 0.08);
  --ink: #101413;
  --ink-2: #3b4442;
  --ink-3: #5c6563;
  --teal: #00e9cd;
  --teal-deep: #00c4ad;
  --teal-soft: #e4f7f3;
  --teal-ink: #00665a;
  --white: #ffffff;
  --danger: #a3241b;

  --wrap: 76rem;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(88px, 11vw, 144px);
  --r: 28px;
  --nav-h: 84px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); background: var(--bg); color-scheme: light; }
html.is-locked { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 420 1.0625rem/1.6 var(--font-brand); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; font-variant-numeric: tabular-nums; }
::selection { background: var(--teal); color: var(--ink); }
input, textarea { caret-color: var(--teal-ink); }
::-webkit-scrollbar { width: 12px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #cfd3d0; border: 3px solid var(--bg); border-radius: 8px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 520; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.on-ink :focus-visible, .closing :focus-visible { outline-color: var(--teal); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -64px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none; transition: top 0.3s var(--ease); }
.skip:focus { top: 16px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }

/* Rasgo de marca: franja aguamarina recortada tras las palabras */
.vinyl-strip { background: var(--teal); color: var(--ink); padding: 0 0.12em 0.02em; margin-inline: -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Aparición suave (solo con JS; sin JS todo se ve) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Doble bisel: carcasa + núcleo -------------------------------------------- */
.shell { padding: 6px; border-radius: var(--r); background: var(--shell); box-shadow: inset 0 0 0 1px rgba(16, 20, 19, 0.05); }
.core { border-radius: calc(var(--r) - 6px); background: var(--core); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 22px 44px -30px rgba(30, 40, 38, 0.28); overflow: hidden; }
.core--tint { background: linear-gradient(180deg, #ffffff 30%, var(--teal-soft)); }
.core--ink { background: var(--ink); color: #dfe8e6; }

/* Botones ------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 6px 24px;
  border: 0; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-weight: 540; font-size: 1rem; letter-spacing: 0.005em; text-decoration: none;
  transition: transform 0.5s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:has(.btn-ico) { padding-right: 6px; }
.btn:active { transform: scale(0.98); }
.btn-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: var(--ink); flex: none; transition: transform 0.5s var(--ease); }
.btn-ico svg { width: 18px; height: 18px; }
.btn:hover .btn-ico { transform: translate(2px, -1px) scale(1.06); }
.btn--sm { min-height: 44px; font-size: 0.95rem; padding-inline: 18px; }
.btn--sm .btn-ico { width: 32px; height: 32px; }
.btn--light { background: var(--white); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(16, 20, 19, 0.2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--wide { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: #dfe2df; color: var(--ink-3); cursor: not-allowed; transform: none; }
.btn[disabled] .btn-ico, .btn[aria-disabled="true"] .btn-ico { background: #cfd3d0; }
.btn.is-busy { pointer-events: none; }
.btn > svg { width: 18px; height: 18px; flex: none; }
.link-arrow { color: var(--ink); font-weight: 540; text-decoration: none; padding: 10px 2px; border-bottom: 1.5px solid rgba(16, 20, 19, 0.2); transition: border-color 0.3s var(--ease); }
.link-arrow:hover { border-color: var(--ink); }

/* Isla de navegación ------------------------------------------------------ */
.island {
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  width: min(100% - 24px, 64rem); margin: 12px auto 0;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(16, 20, 19, 0.06), 0 10px 30px -18px rgba(30, 40, 38, 0.3);
}
.brand { flex: none; width: 118px; }
.brand img { width: 100%; }
.nav { display: none; margin-left: auto; }
.nav ul { display: flex; gap: 26px; }
.nav a { color: var(--ink-3); font-size: 0.95rem; text-decoration: none; transition: color 0.3s var(--ease); }
.nav a:hover { color: var(--ink); }
.island > .cart-button, .island > .btn { margin-left: auto; }
@media (min-width: 900px) { .nav { display: block; } .island > .cart-button, .island > .btn { margin-left: 10px; } }

.cart-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 6px 6px 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 540; transition: transform 0.4s var(--ease); }
.cart-button:active { transform: scale(0.97); }
.cart-count { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 999px; background: var(--teal); color: var(--ink); font-weight: 700; font-size: 0.95rem; }
.cart-count.is-bumped { animation: bump 0.45s var(--ease-out); }
@keyframes bump { 35% { transform: scale(1.22); } }

/* Títulos de sección -------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section-title { font-size: clamp(2.2rem, 5.6vw, 3.6rem); max-width: 16ch; }
.section-lede { margin-top: 18px; max-width: 36rem; color: var(--ink-3); font-size: clamp(1.02rem, 1.3vw, 1.12rem); }
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .split { grid-template-columns: 1fr 1fr; gap: 80px; } }

/* ==========================================================================
   Portada
   ========================================================================== */
.hero { display: grid; gap: 44px; padding-block: clamp(56px, 9vw, 120px) clamp(64px, 9vw, 112px); }
.hero-slogan { font-size: clamp(2.9rem, 9.5vw, 5.6rem); font-weight: 520; line-height: 0.98; letter-spacing: -0.045em; color: var(--ink); text-wrap: balance; }
.hero-slogan .line { display: block; }
.hero-slogan .vinyl-strip { line-height: 1.12; }
.hero-h1 { margin-top: 30px; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; max-width: 30rem; }
.hero-lede { margin-top: 10px; max-width: 32rem; color: var(--ink-2); font-size: clamp(1.02rem, 1.3vw, 1.1rem); }
.hero-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 36px; font-size: 0.95rem; color: var(--ink-3); }
.facts li { display: inline-flex; align-items: center; gap: 10px; }
.facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-deep); }

/* Composición de producto del hero */
.hero-visual .core { position: relative; padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 32px) clamp(20px, 3vw, 32px); background: radial-gradient(80% 70% at 70% 15%, var(--teal-soft), #fff 70%); }
@media (min-width: 980px) { .hero { grid-template-columns: 1fr 1.05fr; align-items: center; } }

/* Franja de confianza */
.proof { display: grid; gap: 14px; padding-block: 26px; border-block: 1px solid var(--hair); }
.proof p { font-size: 1.25rem; color: var(--ink); }
.proof b { font-weight: 650; }
.proof ul { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 0.95rem; color: var(--ink-3); }
.proof li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--teal-deep); vertical-align: middle; }
@media (min-width: 980px) { .proof { grid-template-columns: auto 1fr; align-items: center; } .proof ul { justify-content: flex-end; } }

/* Productos: bento asimétrico */
.bento { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 56px); }
.pcard { height: 100%; }
.pcard-core { display: grid; height: 100%; }
.pcard-img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; }
.pcard-img img { width: 70%; height: 92%; object-fit: contain; transition: transform 0.9s var(--ease); }
.pcard-core:hover .pcard-img img { transform: scale(1.04); }
.pcard-body { display: grid; gap: 12px; align-content: start; padding: 6px clamp(18px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px); }
.pcard-name { font-size: 1.35rem; font-weight: 540; letter-spacing: -0.02em; }
.pcard-name a { text-decoration: none; }
.pcard-name span { color: var(--ink-3); font-weight: 420; }
.pcard-meta { font-size: 0.9rem; color: var(--ink-3); }
.pcard-note { min-height: 1.5em; font-size: 0.88rem; color: var(--ink-3); }
.pcard-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pcard-price { display: grid; line-height: 1.1; }
.pcard-price span { font-size: 1.6rem; font-weight: 620; color: var(--ink); letter-spacing: -0.02em; }
.pcard-price small { font-size: 0.78rem; color: var(--ink-3); }
.pcard-links { display: flex; }
.pcard-links .link-arrow { font-size: 0.92rem; padding-block: 4px; }
/* Etiquetas: «Más vendido» (products.json → badge) y «Próximamente» (comingSoon) */
.badge { display: inline-block; justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--teal); color: var(--ink); font-size: 0.8rem; font-weight: 640; letter-spacing: 0.01em; line-height: 1.2; }
.badge--soon { background: var(--ink); color: #fff; }
.pcard-badge { position: absolute; z-index: 1; top: 14px; left: 14px; }
.pdp-buy > .badge { margin-bottom: 12px; }
.pcard-soon { font-size: 0.9rem; font-weight: 540; color: var(--ink); }
@media (min-width: 980px) {
  .bento { grid-template-columns: 1.25fr 1fr; }
  .bento > :first-child { grid-row: span 2; }
  .bento > :first-child .pcard-img { aspect-ratio: auto; min-height: 400px; }
  .bento > :not(:first-child) .pcard-core { grid-template-columns: 0.8fr 1.2fr; align-items: center; }
  .bento > :not(:first-child) .pcard-img { aspect-ratio: 1; height: 100%; }
  .bento > :not(:first-child) .pcard-body { padding: 22px 24px 22px 0; }
}

/* Conmutador de variante */
.switch { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: var(--bg-2); }
.switch legend { padding: 0; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch label { display: grid; place-items: center; min-height: 40px; padding: 4px 10px; border-radius: 999px; font-size: 0.88rem; font-weight: 540; color: var(--ink-3); text-align: center; cursor: pointer; transition: background 0.4s var(--ease), color 0.3s; }
.switch label:hover { color: var(--ink); }
.switch input:checked + label { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 20, 19, 0.12), inset 0 -2px 0 var(--teal); }
.switch input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Así de fácil: escena fijada durante el scroll ----------------------------- */
.how { position: relative; }
.how-pin { display: grid; gap: 28px; padding-block: var(--section-y); }
.how-grid { display: grid; gap: 16px; }
.how-stage .core { position: relative; padding: 28px 16px 0; background: #fbfbfa; background-image: linear-gradient(var(--hair) 1px, transparent 1px), linear-gradient(90deg, var(--hair) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }
.demo-label { position: absolute; left: 18px; top: 14px; z-index: 2; font-size: 0.78rem; color: var(--ink-3); }
.steps { display: grid; gap: 12px; align-content: start; }
.step {
  display: grid; gap: 6px; text-align: left; width: 100%;
  padding: 22px 24px; border: 0; border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink-3); font-size: 0.97rem;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.5s var(--ease);
}
.step-word { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 520; letter-spacing: -0.035em; line-height: 1; color: var(--ink-3); transition: color 0.4s; }
.step-title { color: var(--ink); font-weight: 600; }
.step[aria-selected="true"] { background: var(--white); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--ink), 0 16px 30px -24px rgba(30, 40, 38, 0.4); }
.step[aria-selected="true"] .step-word { color: var(--ink); }
.step[aria-selected="true"] .step-word span { background: var(--teal); padding: 0 0.08em; }
.scroll-cue { display: none; }
@media (min-width: 980px) { .how-grid { grid-template-columns: 1.4fr 1fr; } }

.how.is-scrolly { height: 320vh; }
.how.is-scrolly .how-pin {
  position: sticky; top: var(--nav-h);
  min-height: calc(100svh - var(--nav-h)); height: calc(100svh - var(--nav-h));
  align-content: center; padding-block: clamp(12px, 3vh, 32px);
}
.how.is-scrolly .steps { position: relative; padding-left: 18px; }
.how.is-scrolly .steps::before, .how.is-scrolly .steps::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; }
.how.is-scrolly .steps::before { background: var(--hair); }
.how.is-scrolly .steps::after { background: var(--ink); transform-origin: top; transform: scaleY(var(--p, 0)); }
.how.is-scrolly .scroll-cue { display: block; font-size: 0.85rem; color: var(--ink-3); transition: opacity 0.4s; }
.how.is-scrolly[data-done] .scroll-cue { opacity: 0; }
@media (max-width: 979px) {
  .how.is-scrolly .how-pin { gap: 12px; }
  .how.is-scrolly .section-lede, .how.is-scrolly .scroll-cue { display: none; }
  .how.is-scrolly .section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .how.is-scrolly .scene { min-height: 34svh; }
  .how.is-scrolly .scene .phone { --w: min(124px, 30vw); }
  .how.is-scrolly .steps { gap: 6px; }
  .how.is-scrolly .step { padding: 12px 16px; }
  .how.is-scrolly .step-word { font-size: 1.5rem; }
  .how.is-scrolly .step:not([aria-selected="true"]) .step-text { display: none; }
}

/* ---------------------------------------------------------------------------
   Maqueta de móvil realista + soporte real (recreación del uso)
   --------------------------------------------------------------------------- */
.scene { position: relative; display: grid; place-items: end center; min-height: clamp(320px, 42vw, 500px); }
.scene .stand { width: 74%; margin-right: 22%; }
.scene .phone { position: absolute; right: 2%; bottom: 10%; transform: translate(10%, 4%) rotate(8deg); transition: transform 0.9s var(--ease-out); }
.scene[data-state="tap"] .phone { transform: translate(-22%, -4%) rotate(-6deg); }
.scene[data-state="review"] .phone { transform: translate(-8%, -2%) rotate(0deg); }
.scene .waves { position: absolute; left: 36%; top: 30%; width: 14%; color: var(--teal-deep); opacity: 0; }
.scene .waves svg { width: 100%; }
.scene[data-state="tap"] .waves { animation: waves 1.1s var(--ease-out) infinite; }
@keyframes waves { 0% { opacity: 0; transform: scale(0.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15) translateX(10%); } }

.phone {
  --w: clamp(150px, 15vw, 196px);
  position: relative; width: var(--w); aspect-ratio: 71.5 / 147;
  border-radius: calc(var(--w) * 0.19); padding: calc(var(--w) * 0.032);
  background: linear-gradient(145deg, #5b6062 0%, #2a2d2e 18%, #1a1c1d 50%, #2e3132 82%, #63686a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 calc(var(--w) * 0.012) #0c0d0e, 0 40px 60px -30px rgba(10, 20, 20, 0.45), 0 18px 24px -18px rgba(10, 20, 20, 0.35);
  color: var(--ink); flex: none;
}
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #26292a, #6b7072); }
.phone::before { left: -3px; top: 22%; height: 7%; box-shadow: 0 calc(var(--w) * 0.13) 0 #3a3e40, 0 calc(var(--w) * 0.26) 0 #3a3e40; }
.phone::after { right: -3px; top: 30%; height: 12%; }
.phone-screen { position: relative; height: 100%; border-radius: calc(var(--w) * 0.16); overflow: hidden; background: #f2f4f3; font-size: calc(var(--w) * 0.047); }
.phone-island { position: absolute; z-index: 5; top: 2.4%; left: 50%; width: 31%; height: 3.6%; border-radius: 999px; background: #050505; transform: translateX(-50%); }
.phone-status { position: absolute; z-index: 4; inset: 0 0 auto 0; height: 9%; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%; font-size: 0.86em; font-weight: 600; }
.phone-status svg { height: 0.9em; width: auto; }
.phone-status .icons { display: flex; gap: 0.35em; align-items: center; }
.phone-home { position: absolute; z-index: 4; bottom: 1.6%; left: 50%; width: 36%; height: 0.55%; border-radius: 99px; background: var(--ink); transform: translateX(-50%); opacity: 0.85; }
.ps { position: absolute; inset: 0; padding: 30% 7% 8%; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.ps--idle { display: grid; align-content: start; justify-items: center; text-align: center; background: radial-gradient(120% 70% at 50% 0%, #cfeee8, #eef3f2 60%); }
.ps--idle .date { font-size: 0.95em; font-weight: 500; opacity: 0.75; }
.ps--idle .time { font-size: 4.4em; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.ps-banner { position: absolute; z-index: 3; left: 4%; right: 4%; top: 50%; display: grid; grid-template-columns: 2.4em 1fr; gap: 0.15em 0.7em; align-items: center; padding: 0.85em 0.9em; border-radius: 1.4em; background: rgba(255, 255, 255, 0.9); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(30%) scale(0.96); transition: opacity 0.4s, transform 0.6s var(--ease-out); }
.ps-banner .app { grid-row: span 2; width: 2.4em; height: 2.4em; border-radius: 0.6em; background: var(--ink); display: grid; place-items: center; color: var(--teal); }
.ps-banner .app svg { width: 1.3em; height: 1.3em; }
.ps-banner b { font-size: 0.9em; font-weight: 650; }
.ps-banner span { font-size: 0.82em; color: #4a5b57; line-height: 1.25; }
.ps--review { background: #fff; opacity: 0; transform: translateY(8%); display: grid; align-content: start; gap: 0.75em; padding-top: 17%; }
.ps--review .bar { display: flex; align-items: center; gap: 0.6em; padding-bottom: 0.7em; border-bottom: 1px solid #e6ebea; }
.ps--review .avatar { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--teal); display: grid; place-items: center; font-weight: 700; font-size: 0.9em; }
.ps--review .biz b { display: block; font-weight: 650; }
.ps--review .biz span { font-size: 0.78em; color: #5d6b68; }
.ps--review .ask { font-size: 0.92em; font-weight: 600; }
.ps--review .stars { display: flex; gap: 0.4em; }
.ps--review .stars svg { width: 1.9em; height: 1.9em; }
.ps--review .stars path { fill: #dfe5e3; transition: fill 0.25s; }
.ps--review .field { height: 6.4em; border-radius: 0.8em; border: 1px solid #dfe5e3; padding: 0.7em; font-size: 0.85em; color: #5c6563; }
.ps--review .publish { justify-self: end; padding: 0.55em 1.3em; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.85em; font-weight: 600; }
.scene[data-state="tap"] .ps-banner { opacity: 1; transform: none; }
.scene[data-state="review"] .ps--idle { opacity: 0; }
.scene[data-state="review"] .ps--review { opacity: 1; transform: none; }
.scene[data-state="review"] .stars path { fill: var(--ink); }
.scene[data-state="review"] .stars svg:nth-child(2) path { transition-delay: 0.1s; }
.scene[data-state="review"] .stars svg:nth-child(3) path { transition-delay: 0.2s; }
.scene[data-state="review"] .stars svg:nth-child(4) path { transition-delay: 0.3s; }
.scene[data-state="review"] .stars svg:nth-child(5) path { transition-delay: 0.4s; }

/* Elige cómo te llega */
.ways { display: grid; gap: 16px; margin-top: clamp(36px, 5vw, 56px); }
.way { padding: clamp(26px, 3.6vw, 44px); height: 100%; }
.way h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 16ch; }
.way-sub { margin-top: 10px; font-size: 1.05rem; }
.way ol { display: grid; gap: 14px; margin-top: 26px; counter-reset: w; }
.way li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; counter-increment: w; }
.way li::before { content: counter(w); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--teal); font-weight: 700; font-size: 0.9rem; }
.core--ink h3 { color: var(--white); }
.core--ink .way-sub { color: #b9cbc7; }
.core--ink li::before { background: var(--teal); color: var(--ink); }
@media (min-width: 900px) { .ways { grid-template-columns: 1fr 1fr; } }

/* Dónde va / Ficha: cartel con puntos guía */
.hours { padding: clamp(22px, 3vw, 36px); }
/* Para tu negocio: foto real de uso + lista «Dónde va» */
.where { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) { .where { grid-template-columns: 1.05fr 0.95fr; gap: 72px; } }
.where-text .hours { margin-top: 28px; padding: 0; }
.where-text .link-arrow { display: inline-block; margin-top: 24px; }
.where-photo { margin: 0; min-width: 0; }
.where-photo .core { position: relative; aspect-ratio: 3 / 4; }
@media (min-width: 980px) { .where-photo { rotate: 1.5deg; } }
.where-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.where-photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; }
.where-chip { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink-2); font-size: 0.92rem; box-shadow: 0 12px 30px -18px rgba(16, 20, 19, 0.45); }
.where-chip b { color: var(--ink); font-weight: 640; }
.where-chip b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--teal-deep); vertical-align: middle; }
.hours-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.hours-head h3 { font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.hours-head span { font-size: 0.85rem; color: var(--ink-3); }
.hours dl { margin: 0; }
.hours-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--hair); }
.hours-row:last-child { border-bottom: 0; }
.hours-row dt { font-weight: 560; color: var(--ink); }
.hours-row dt small { display: block; font-weight: 420; font-size: 0.85rem; color: var(--ink-3); }
.hours-row .dots { align-self: center; border-bottom: 2px dotted rgba(16, 20, 19, 0.25); }
.hours-row dd { margin: 0; text-align: right; font-weight: 540; color: var(--ink); }
.hours-row dd .tag { background: var(--teal-soft); color: var(--teal-ink); padding: 3px 10px; border-radius: 999px; font-size: 0.9rem; }

/* Opiniones: destacada + fila */
.feature { margin-top: clamp(32px, 4vw, 48px); }
.feature-plate { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(18px, 3.5vw, 52px); padding: clamp(26px, 4.5vw, 60px) clamp(22px, 5vw, 68px); background: var(--teal); }
.feature-mark { width: clamp(2.6rem, 5.5vw, 4.6rem); fill: var(--ink); grid-row: span 2; margin-top: 6px; }
.feature-quote { margin: 0; min-height: clamp(11rem, 18vw, 14rem); }
.feature-quote blockquote { margin: 12px 0 0; max-width: 34ch; font-size: clamp(1.35rem, 2.7vw, 2.3rem); line-height: 1.24; font-weight: 520; letter-spacing: -0.02em; color: var(--ink); }
.feature-quote figcaption { margin-top: 18px; font-weight: 640; color: var(--ink); }
.feature-controls { grid-column: 2; display: flex; align-items: center; gap: 12px; margin-top: clamp(22px, 3vw, 32px); }
.feature-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); transition: background 0.3s var(--ease), color 0.3s; }
.feature-btn:hover { background: var(--ink); color: var(--teal); }
.feature-btn svg { width: 22px; height: 22px; }
.feature-count { min-width: 4.5ch; text-align: center; font-weight: 640; color: var(--ink); }
.feature-progress { flex: 1; max-width: 14rem; height: 3px; border-radius: 2px; background: rgba(16, 20, 19, 0.2); overflow: hidden; }
.feature-progress span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.feature.is-playing .feature-progress span { animation: progress var(--feature-ms, 7000ms) linear forwards; }
@keyframes progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) { .feature-quote.is-entering { animation: quote-in 0.8s var(--ease); } }
@keyframes quote-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
.stars-row { display: flex; gap: 3px; color: var(--ink); }
.stars-row svg { width: 18px; height: 18px; }
.stars-row path { fill: currentColor; }
@media (max-width: 760px) { .feature-plate { grid-template-columns: 1fr; } .feature-mark { grid-row: auto; width: 2.6rem; } .feature-controls { grid-column: 1; } .feature-quote { min-height: 15rem; } }

.review-rail { margin-top: clamp(28px, 4vw, 44px); }
.review-rail-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.review-rail-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.rail-arrows { display: flex; gap: 6px; }
.review-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(16rem, 23vw, 20rem); gap: 14px; margin-top: 12px; padding: 6px 2px 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #cfd3d0 transparent; }
.review-row > li { scroll-snap-align: start; display: flex; }
.review-card { display: grid; align-content: start; gap: 10px; width: 100%; padding: 20px 22px; border: 0; border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); text-align: left; transition: transform 0.5s var(--ease), background 0.3s, box-shadow 0.3s; }
.review-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--hair), 0 14px 28px -22px rgba(30, 40, 38, 0.4); }
.review-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.97rem; line-height: 1.45; color: var(--ink-2); }
.review-card .who { font-weight: 620; font-size: 0.92rem; }
.review-card[aria-current="true"] { background: var(--ink); color: var(--white); }
.review-card[aria-current="true"] p { color: #cfdcd9; }
.review-card[aria-current="true"] .stars-row { color: var(--teal); }
@media (max-width: 760px) { .review-row { grid-auto-columns: min(78vw, 19rem); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } }

/* Antes de pedir */
.help-grid { display: grid; gap: 40px; align-items: start; }
.services { display: grid; gap: 4px; margin-top: 28px; }
.service { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.service:last-child { border-bottom: 0; }
.service-icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--teal); }
.service-icon svg { width: 20px; height: 20px; }
.service-title { font-weight: 600; color: var(--ink); }
.service-body { font-size: 0.95rem; color: var(--ink-3); }
.service-body a { color: var(--ink); font-weight: 540; }
@media (min-width: 980px) { .help-grid { grid-template-columns: 0.85fr 1.15fr; gap: 80px; } }

.faq { padding: 6px clamp(18px, 2.6vw, 30px); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 1.04rem; font-weight: 560; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M10 16h12M16 10v12' stroke='%23101413' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 32px no-repeat; transition: transform 0.5s var(--ease), background-color 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--teal); }
.faq details p { padding: 0 0 20px; color: var(--ink-3); max-width: 60ch; }

/* Cierre oscuro */
.closing { width: min(100% - 16px, 80rem); margin: 0 auto 24px; border-radius: 36px; background: var(--ink); background-image: radial-gradient(60% 80% at 85% 10%, rgba(0, 233, 205, 0.16), transparent 70%); color: var(--white); }
/* Las ondas del logo, a la derecha: se encienden de dentro afuera, como la señal NFC */
.closing { position: relative; overflow: hidden; }
.closing-in { position: relative; }
.closing-waves { position: absolute; right: clamp(40px, 9vw, 140px); top: 50%; height: 64%; width: auto; translate: 0 -50%; color: var(--teal); pointer-events: none; }
.closing-waves path { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .closing-waves path { opacity: 0.18; animation: closing-wave 2.8s ease-in-out infinite; }
  .closing-waves path:nth-child(2) { animation-delay: 0.25s; }
  .closing-waves path:nth-child(3) { animation-delay: 0.5s; }
}
@keyframes closing-wave { 15%, 45% { opacity: 0.9; } 75% { opacity: 0.18; } }
@media (max-width: 760px) { .closing-waves { right: -12px; top: auto; bottom: 28px; height: 34%; translate: none; opacity: 0.35; } }
.closing-in { display: grid; gap: 32px; justify-items: start; padding: clamp(56px, 8vw, 96px) clamp(24px, 6vw, 80px); }
.closing h2 { color: var(--white); font-size: clamp(2.2rem, 6vw, 4rem); max-width: 15ch; letter-spacing: -0.035em; }

/* Pie ----------------------------------------------------------------------- */
.foot { width: min(100% - var(--gutter) * 2, var(--wrap)); margin: 0 auto; display: grid; gap: 32px; padding: 48px 0 40px; font-size: 0.93rem; color: var(--ink-3); }
.foot-brand img { width: 120px; margin-bottom: 12px; }
.foot-brand p { max-width: 24rem; }
.foot-col h2 { margin-bottom: 12px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.foot-col li + li { margin-top: 8px; }
.foot-col a { color: var(--ink-3); text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 0.85rem; }
.foot-tag { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; }
@media (min-width: 760px) { .foot { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ==========================================================================
   Mini-carrito
   ========================================================================== */
.cart-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(16, 20, 19, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); }
.cart-scrim.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; top: 8px; right: 8px; bottom: 8px; z-index: 70; display: flex; flex-direction: column; width: min(440px, calc(100vw - 16px)); border-radius: 26px; background: var(--white); box-shadow: 0 30px 60px -20px rgba(16, 20, 19, 0.4); transform: translateX(calc(100% + 16px)); visibility: hidden; transition: transform 0.6s var(--ease), visibility 0s linear 0.6s; overflow: hidden; }
.cart-drawer.is-open { transform: none; visibility: visible; transition: transform 0.6s var(--ease), visibility 0s; }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--hair); }
.cart-head h2 { font-size: 1.5rem; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg); transition: background 0.3s; }
.icon-btn:hover { background: var(--bg-2); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-body { flex: 1; overflow-y: auto; padding: 4px 24px; overscroll-behavior: contain; }
.cart-line { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.cart-thumb { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.cart-thumb img { width: 88%; height: 88%; object-fit: contain; }
.cart-line-name { font-weight: 600; line-height: 1.25; color: var(--ink); }
.cart-line-name a { text-decoration: none; }
.cart-line-variant { font-size: 0.9rem; color: var(--ink-3); }
.cart-line-note { margin-top: 4px; font-size: 0.82rem; color: var(--teal-ink); font-weight: 540; }
.cart-line-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cart-line-price { font-weight: 620; color: var(--ink); }
.cart-line-price.is-pending { font-weight: 480; font-style: italic; color: var(--ink-3); }
.qty { display: inline-grid; grid-template-columns: 38px 2.4rem 38px; align-items: center; border-radius: 999px; background: var(--bg); }
.qty button { height: 38px; border: 0; border-radius: 999px; background: transparent; display: grid; place-items: center; }
.qty button:hover { background: var(--bg-2); }
.qty button[disabled] { opacity: 0.35; cursor: not-allowed; background: transparent; }
.qty button svg { width: 16px; height: 16px; }
.qty output, .qty input { width: 100%; border: 0; background: transparent; text-align: center; font-weight: 620; color: var(--ink); }
.qty input { -moz-appearance: textfield; appearance: textfield; height: 100%; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty--lg { grid-template-columns: 50px 3rem 50px; }
.qty--lg button { height: 52px; }
.remove-link { border: 0; background: none; padding: 4px 0; font-size: 0.85rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 0.2em; }
.remove-link:hover { color: var(--danger); }
.cart-empty { display: grid; justify-items: start; gap: 14px; padding: 36px 0; }
.cart-empty .empty-mark { width: 72px; color: #cfd3d0; }
.cart-empty p { color: var(--ink-3); max-width: 30ch; }
.cart-foot { padding: 18px 24px 22px; background: var(--bg); }
.cart-sum { display: grid; gap: 6px; margin: 0 0 16px; }
.cart-sum div { display: flex; justify-content: space-between; gap: 16px; }
.cart-sum dt { color: var(--ink-3); }
.cart-sum dt small { font-size: 0.82em; }
.cart-sum dd { margin: 0; font-weight: 620; color: var(--ink); text-align: right; }
.cart-sum dd.is-pending { font-weight: 480; font-style: italic; color: var(--ink-3); }
.cart-notice { margin-top: 10px; font-size: 0.86rem; color: var(--ink-3); line-height: 1.45; }
.cart-notice--link { color: var(--teal-ink); font-weight: 520; }
.cart-continue { margin-top: 10px; }

/* ==========================================================================
   Ficha de producto
   ========================================================================== */
.crumbs { padding-top: 28px; font-size: 0.9rem; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: 0.5; }
.crumbs a { color: var(--ink-2); }
.pdp { display: grid; gap: 28px; padding-block: 24px var(--section-y); align-items: start; }
.pdp-media .core { position: relative; display: grid; place-items: center; min-height: clamp(320px, 46vw, 620px); padding: 32px; background: radial-gradient(80% 70% at 50% 20%, var(--teal-soft), #fff 70%); }
.pdp-media img { width: min(86%, 560px); height: auto; }
.pdp-dims { position: absolute; left: 24px; top: 20px; display: grid; gap: 2px; }
.pdp-dims b { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 560; letter-spacing: -0.03em; color: var(--ink); }
.pdp-dims span { font-size: 0.85rem; color: var(--ink-3); }
.pdp-buy { display: grid; gap: 0; }
.pdp-title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); max-width: 13ch; }
.pdp-title span { display: block; margin-top: 10px; font-size: 0.42em; font-weight: 440; letter-spacing: -0.01em; color: var(--ink-3); }
.pdp-tagline { margin-top: 18px; max-width: 44ch; color: var(--ink-2); font-size: 1.06rem; }
.pdp-price-row { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; }
.pdp-price { font-size: 2rem; font-weight: 620; letter-spacing: -0.02em; color: var(--ink); }
.pdp-price.is-pending { font-size: 1.2rem; font-style: italic; font-weight: 480; }
.price-note { font-size: 0.88rem; color: var(--ink-3); }
.pdp-form { display: grid; gap: 22px; margin-top: 24px; }
.field-label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--ink); }
.colors { display: flex; flex-wrap: wrap; gap: 8px; }
.color-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 18px 4px 5px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--hair); font-weight: 540; text-decoration: none; transition: box-shadow 0.3s; }
.color-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.color-chip[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.color-dot { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16, 20, 19, 0.2); }
.variant-options { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.variant-options legend { padding: 0; }
.variant { display: grid; grid-template-columns: 26px 1fr; gap: 2px 12px; padding: 16px 18px; border-radius: 20px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--hair); cursor: pointer; transition: box-shadow 0.3s; }
.variant:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.variant input { grid-row: span 2; appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 1px 0 0; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: var(--white); }
.variant input::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform 0.25s var(--ease-out); }
.variant input:checked::before { transform: scale(1); }
.variant:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.variant-name { font-weight: 600; color: var(--ink); }
.variant-summary { font-size: 0.93rem; color: var(--ink-3); }
.pdp-note { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--teal-soft); font-size: 0.93rem; color: var(--ink); }
.pdp-note[hidden] { display: none; }
.pdp-note--regalo { background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); }
.pdp-note--regalo + .pdp-note { margin-top: 8px; }
.pdp-note svg { width: 20px; height: 20px; color: var(--teal-ink); margin-top: 2px; }
.pdp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pdp-actions .btn { flex: 1; min-width: 12rem; }
.pdp-facts { display: grid; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hair); font-size: 0.94rem; color: var(--ink-3); }
.pdp-facts li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.pdp-facts svg { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }
.pdp-facts a { color: var(--ink); }
@media (min-width: 980px) { .pdp { grid-template-columns: 1.1fr 0.9fr; gap: 56px; } .pdp-buy { position: sticky; top: calc(var(--nav-h) + 16px); } }

.spec { display: grid; gap: 40px; align-items: start; }
.prose p { margin-top: 16px; max-width: 60ch; color: var(--ink-2); }
.how-list { display: grid; gap: 10px; margin-top: 24px; max-width: 60ch; }
.how-list li { padding-left: 16px; border-left: 3px solid var(--teal); }
.how-list b { color: var(--ink); font-weight: 600; }
@media (min-width: 980px) { .spec { grid-template-columns: 1fr 1fr; gap: 80px; } }
.pdp-faq { display: grid; gap: 32px; }
@media (min-width: 980px) { .pdp-faq { grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: start; } }
.more-grid { display: grid; gap: 16px; margin-top: 36px; }
.more-card { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 18px; padding: 14px 20px 14px 14px; text-decoration: none; }
.more-card img { width: 120px; height: 120px; object-fit: contain; border-radius: 16px; background: #fff; }
.more-card b { display: block; color: var(--ink); font-weight: 560; font-size: 1.1rem; }
.more-card span { font-size: 0.9rem; color: var(--ink-3); }
@media (min-width: 760px) { .more-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Páginas legales y 404
   ========================================================================== */
.legal { width: min(100% - var(--gutter) * 2, 52rem); margin: 0 auto; padding-bottom: var(--section-y); }
.legal-shell { margin-top: 20px; }
.legal-core { padding: clamp(26px, 5vw, 60px); }
.legal-core h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.legal-core h2 { margin-top: 36px; font-size: 1.3rem; letter-spacing: -0.015em; }
.legal-core p, .legal-core li { margin-top: 12px; color: var(--ink-2); max-width: 68ch; }
.legal-core ul { padding-left: 1.1em; list-style: disc; }
.legal-core li::marker { color: var(--teal-deep); }
.legal-core a:not(.btn) { color: var(--ink); }
.legal-core strong { color: var(--ink); font-weight: 600; }
.legal-core .legal-date { color: var(--ink-3); font-size: 0.9rem; }
.legal-id { margin: 18px 0 0; border-radius: 18px; background: var(--bg); padding: 6px 20px; }
.legal-id div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.legal-id div:last-child { border-bottom: 0; }
.legal-id dt { font-size: 0.85rem; color: var(--ink-3); }
.legal-id dd { margin: 0; font-weight: 560; color: var(--ink); }
@media (min-width: 640px) { .legal-id div { grid-template-columns: 12rem 1fr; } }
.legal-form { margin-top: 16px; border-radius: 18px; background: var(--bg); padding: 8px 20px 20px; }
.legal-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 0.93rem; }
.legal-table th, .legal-table td { padding: 12px 10px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.legal-table th { color: var(--ink); font-weight: 600; }
.legal-table code { font-size: 0.88em; background: var(--bg); padding: 2px 6px; border-radius: 6px; }
.legal-core--404 h1 { max-width: 16ch; }
.legal-core--404 ul { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 20px; }
@media (max-width: 640px) { .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; } .legal-table thead { display: none; } .legal-table td { padding: 6px 0; border: 0; } .legal-table tr { padding: 10px 0; border-bottom: 1px solid var(--hair); } }

/* Estados y marcadores ---------------------------------------------------- */
.pending { display: inline-block; padding: 0 0.4em; border: 1.5px dashed var(--danger); border-radius: 6px; color: var(--danger); font-size: 0.88em; font-weight: 560; }
.photo-missing { display: grid; place-items: center; align-content: center; gap: 6px; width: min(100%, 260px); aspect-ratio: 1; padding: 16px; border: 2px dashed var(--danger); border-radius: 16px; background: #fbf3f2; color: var(--danger); text-align: center; font-size: 0.85rem; font-weight: 560; }
.photo-missing b { font-size: 1rem; }
.photo-missing code { font-size: 0.75rem; word-break: break-all; color: var(--ink-2); }
.cart-thumb .photo-missing { width: 100%; padding: 4px; font-size: 0.6rem; border-width: 1.5px; }
.cart-thumb .photo-missing code, .cart-thumb .photo-missing b { display: none; }
.load-error { padding: 20px; border: 2px dashed var(--danger); border-radius: 18px; background: var(--white); max-width: 46ch; }
.load-error b { color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .scene[data-state="tap"] .waves { opacity: 1; }
}

/* ==========================================================================
   Hero «el toque en directo»: el soporte real, el móvil que se acerca y las
   ondas NFC que se expanden por todo el fondo al tocar.
   ========================================================================== */
.hero-live { position: relative; overflow: hidden; isolation: isolate; margin-top: -76px; padding-top: 76px; background: radial-gradient(70% 90% at 78% 45%, var(--teal-soft), var(--bg) 70%); }
.hero-live .hero { padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 104px); }
.hero-rings { position: absolute; z-index: -1; left: 72%; top: 52%; width: 0; height: 0; pointer-events: none; }
.hero-rings span { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; border: 2px solid var(--teal-deep); opacity: 0; }
.hero-live[data-state="tap"] .hero-rings span { animation: ring 2.2s var(--ease-out) infinite; }
.hero-live[data-state="tap"] .hero-rings span:nth-child(2) { animation-delay: 0.35s; }
.hero-live[data-state="tap"] .hero-rings span:nth-child(3) { animation-delay: 0.7s; }
.hero-live[data-state="tap"] .hero-rings span:nth-child(4) { animation-delay: 1.05s; }
@keyframes ring { 0% { transform: scale(0.35); opacity: 0.9; } 100% { transform: scale(6); opacity: 0; } }
.hero-live[data-state="review"] .hero-rings span:first-child { animation: ring-settle 1.6s var(--ease-out) forwards; }
@keyframes ring-settle { 0% { transform: scale(0.4); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0.12; } }

.hero-stage { position: relative; }
.scene--hero { min-height: clamp(380px, 46vw, 600px); }
.scene--hero .stand { width: 78%; margin-right: 20%; }
.scene--hero .phone { --w: clamp(150px, 16vw, 226px); }
.price-sticker {
  position: absolute; left: 0; top: 4%;
  display: grid; place-items: center; align-content: center;
  width: clamp(96px, 10vw, 128px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); color: var(--white); border: 4px solid var(--white);
  box-shadow: 0 14px 30px -18px rgba(16, 20, 19, 0.6);
  transform: rotate(-10deg); text-align: center; line-height: 1.05;
}
.price-sticker b { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 620; color: var(--teal); letter-spacing: -0.02em; }
.price-sticker span { margin-top: 4px; font-size: 0.72rem; color: #c9d6d3; }
.hero-steps { position: absolute; right: 0; bottom: 0; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 1px var(--hair); font-size: 0.85rem; font-weight: 560; }
.hero-steps li { padding: 6px 14px; border-radius: 999px; color: var(--ink-3); transition: background 0.4s var(--ease), color 0.3s; }
.hero-live[data-state="idle"] .hero-steps [data-for="idle"],
.hero-live[data-state="tap"] .hero-steps [data-for="tap"],
.hero-live[data-state="review"] .hero-steps [data-for="review"] { background: var(--ink); color: var(--white); }
@media (max-width: 979px) {
  .hero-live .hero { padding-top: 28px; }
  .hero-rings { left: 50%; top: 74%; }
  .scene--hero { min-height: 360px; }
  .scene--hero .phone { --w: min(150px, 36vw); }
}
@media (prefers-reduced-motion: reduce) { .hero-rings span { display: none; } }
@media (max-width: 979px) {
  .price-sticker { width: 108px; }
  .price-sticker b { font-size: 1.05rem; }
  .hero-slogan { font-size: clamp(2.4rem, 10vw, 4rem); }
}

/* La franja aguamarina va siempre por detrás del texto: nunca tapa los rasgos
   descendentes (j, g, p) ni la puntuación de la línea de encima. */
h1, h2, h3, .hero-slogan, .pdp-title { isolation: isolate; }
.vinyl-strip { position: relative; z-index: -1; padding: 0.02em 0.12em 0.05em; }
.hero-slogan { line-height: 1.06; }
.hero-slogan .vinyl-strip { line-height: inherit; }
.section-title { line-height: 1.12; }
/* La franja cubre solo la banda de la palabra (de la altura de mayúsculas a
   justo por debajo de la línea base), no la caja completa de la fuente. */
.vinyl-strip {
  background: linear-gradient(var(--teal), var(--teal)) 0 82% / 100% 0.94em no-repeat;
  padding: 0 0.12em;
}
.hero-slogan { line-height: 1.08; }
/* Las tarjetas de producto nunca ensanchan la rejilla */
.pcard, .pcard-core, .pcard-body { min-width: 0; }
@media (min-width: 980px) {
  .bento { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .bento > :not(:first-child) .pcard-core { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .bento .pcard-buy .btn { padding-left: 18px; }
}

/* Fotos de producto recortadas con fondo transparente: sombra de contacto para asentarlas sobre la superficie. */
.pcard-img img, .pdp-media img, .scene .stand { filter: drop-shadow(0 14px 18px rgb(24 46 42 / 0.16)) drop-shadow(0 2px 3px rgb(24 46 42 / 0.12)); }
.cart-thumb img, .more-card img { filter: drop-shadow(0 4px 6px rgb(24 46 42 / 0.14)); }
.pcard-img { overflow: hidden; }
.pcard-img img { width: 72%; height: auto; max-height: 84%; }
@media (min-width: 980px) {
  .bento > :not(:first-child) .pcard-img { aspect-ratio: auto; height: auto; align-self: stretch; min-height: 260px; }
  .bento > :not(:first-child) .pcard-img img { width: 94%; max-height: 90%; }
  .bento > :first-child .pcard-img img { width: 62%; }
}
.pdp-media .core { padding-top: clamp(96px, 9vw, 120px); }
.pdp-media img { width: min(72%, 480px); }

/* Ficha de producto: el chip NFC por dentro */
.chip { padding-top: 0; }
.chip-head { display: grid; gap: 14px; max-width: 46rem; }
.eyebrow { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.chip-intro { font-size: 1.08rem; color: var(--ink-2); max-width: 40rem; }
.chip-grid { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.chip-tile { display: grid; align-content: start; gap: 8px; height: 100%; padding: clamp(22px, 2.6vw, 30px); }
.chip-value { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.chip-value::after { content: ""; display: block; width: 28px; height: 4px; margin-top: 14px; border-radius: 2px; background: var(--teal); }
.chip-label { font-size: 1rem; font-weight: 560; color: var(--ink); }
.chip-tile p:last-child { font-size: 0.93rem; color: var(--ink-3); }
.chip .shell { height: 100%; }
.hours-row dd { max-width: 26ch; }
.chip-label { max-width: none; text-wrap: pretty; }


/* Banner de cookies: «Tap, tap» */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: min(420px, calc(100vw - 32px)); padding: 6px; border-radius: 30px; background: var(--shell); box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -24px rgba(16, 20, 19, 0.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.cookie.is-in { opacity: 1; transform: none; }
.cookie-core { display: grid; gap: 12px; padding: 22px 22px 20px; border-radius: 24px; background: var(--white); }
.cookie-core > * { min-width: 0; }
.cookie-mark { display: flex; align-items: center; gap: 10px; color: var(--teal-ink); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.cookie-mark svg { width: 34px; height: 24px; color: var(--teal-deep); }
.cookie-mark path { animation: cookie-tap 2.4s var(--ease-out) infinite; }
.cookie-mark path:nth-child(2) { animation-delay: 0.15s; }
.cookie-mark path:nth-child(3) { animation-delay: 0.3s; }
@keyframes cookie-tap { 0%, 55%, 100% { opacity: 1; } 20% { opacity: 0.25; } }
.cookie h2 { font-size: 1.32rem; line-height: 1.15; max-width: none; }
.cookie p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; }
.cookie p a { color: var(--ink); font-weight: 560; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.cookie-actions .btn { justify-content: center; min-height: 46px; padding-inline: 14px; }
.foot-cookies { padding: 12px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 560px) { .cookie { left: 8px; right: 8px; bottom: 8px; width: auto; } }
@media (max-width: 360px) { .cookie-core { padding: 18px 16px 16px; } .cookie-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } .cookie-mark path { animation: none; } }
.pdp-note a { color: var(--teal-ink); font-weight: 560; white-space: nowrap; }
.foot-hours { color: var(--ink-3); font-size: 0.9rem; }

/* Guías (blog) */
.guide-head { display: grid; gap: 16px; max-width: 50rem; padding-top: clamp(28px, 5vw, 56px); }
.guide-head .eyebrow { justify-self: start; }
.guide-head h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); line-height: 1.1; }
.guide-lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--ink-2); max-width: 44rem; line-height: 1.55; }
.guide-meta { font-size: 0.9rem; color: var(--ink-3); }
.guide-layout { display: grid; gap: 32px; margin-top: clamp(32px, 5vw, 56px); }
.guide-toc { align-self: start; padding: 20px 22px; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.guide-toc h2 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.guide-toc ol { display: grid; gap: 4px; margin-top: 10px; }
.guide-toc a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 0.93rem; line-height: 1.35; text-decoration: none; }
.guide-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.guide-body { min-width: 0; max-width: 44rem; }
.guide-body > h2 { margin-top: 48px; font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.2; scroll-margin-top: calc(var(--nav-h) + 24px); }
.guide-body > h2:first-child { margin-top: 0; }
.guide-body > p, .guide-body > ul, .guide-body > ol { margin-top: 16px; color: var(--ink-2); font-size: 1.04rem; line-height: 1.7; }
.guide-body ul, .guide-body ol { padding-left: 1.2em; }
.guide-body ul { list-style: disc; }
.guide-body ol { list-style: decimal; }
.guide-body li { margin-top: 8px; padding-left: 4px; }
.guide-body li::marker { color: var(--teal-ink); font-weight: 600; }
.guide-body a { color: var(--ink); font-weight: 540; text-underline-offset: 3px; text-decoration-color: var(--teal-deep); text-decoration-thickness: 2px; }
.guide-body strong { color: var(--ink); font-weight: 600; }
.guide-code code { display: inline-block; padding: 8px 14px; border-radius: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); font-size: 0.95rem; word-break: break-all; }
.guide-cta { display: grid; gap: 14px; justify-items: start; margin-top: 56px; padding: clamp(24px, 4vw, 36px); border-radius: 28px; background: var(--ink); background-image: radial-gradient(70% 90% at 90% 0%, rgba(0, 233, 205, 0.18), transparent 70%); color: var(--white); }
.guide-cta h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2rem); }
.guide-cta p { color: rgba(255, 255, 255, 0.78); max-width: 38ch; }
.guide-cta .btn { background: var(--white); color: var(--ink); }
.guide-more { margin-top: 40px; }
.guide-more h3 { font-size: 1.1rem; }
.guide-more ul { display: grid; gap: 6px; margin-top: 10px; }
.guide-more a { color: var(--ink); font-weight: 540; text-underline-offset: 3px; }
.guide-grid { list-style: none; padding: 0; margin: clamp(32px, 5vw, 56px) 0 var(--section-y); display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.guide-card { display: grid; align-content: start; gap: 14px; height: 100%; padding: clamp(24px, 3vw, 34px); color: var(--ink); text-decoration: none; transition: transform 0.6s var(--ease); }
.guide-card .eyebrow { justify-self: start; }
.guide-card h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.18; }
.guide-card p:not(.eyebrow) { color: var(--ink-2); }
.guide-card .link-arrow { justify-self: start; margin-top: 6px; }
.guide-grid .shell:hover .guide-card { transform: translateY(-3px); }
@media (min-width: 980px) {
  .guide-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); }
  .guide-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
}
.cart-sum .cart-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--hair); }
.cart-sum .cart-total dt, .cart-sum .cart-total dd { color: var(--ink); font-weight: 620; }
.cart-sum + .cart-notice { margin: -6px 0 14px; }

/* Hero: ficha de ejemplo con reseñas y estrellas que suben */
.rating-card { position: absolute; left: clamp(-8px, -1vw, 0px); bottom: clamp(56px, 9vw, 96px); z-index: 3; display: grid; gap: 6px; min-width: 228px; padding: 14px 18px 14px 16px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--hair), 0 24px 48px -20px rgba(16, 20, 19, 0.35); }
.rc-tag { position: absolute; top: -9px; right: 14px; padding: 2px 9px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.rc-name { display: flex; align-items: center; gap: 6px; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.rc-pin { width: 18px; height: 18px; fill: #ea4335; flex: none; }
.rc-row { display: flex; align-items: center; gap: 8px; font-size: 0.98rem; color: var(--ink-3); }
.rc-score { min-width: 2.1ch; font-size: 1.08rem; font-weight: 640; color: var(--ink); font-variant-numeric: tabular-nums; transition: opacity 0.25s; }
.rc-score.is-swap { opacity: 0; }
.rc-stars { position: relative; display: inline-flex; }
.rc-stars svg { width: 17px; height: 17px; flex: none; }
.rc-empty, .rc-full { display: inline-flex; gap: 1px; }
.rc-empty svg { fill: #dadce0; }
.rc-full { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--fill)) 0 0); transition: clip-path 1.1s var(--ease-out); }
.rc-full svg { fill: #fbbc04; }
.rc-count { font-variant-numeric: tabular-nums; }
.rc-bump { position: absolute; right: 14px; bottom: calc(100% + 10px); padding: 5px 11px; border-radius: 999px; background: var(--teal); color: var(--ink); font-size: 0.8rem; font-weight: 640; white-space: nowrap; opacity: 0; transform: translateY(10px) scale(0.92); pointer-events: none; }
.rc-bump.is-on { animation: rc-bump 1.8s var(--ease-out) forwards; }
@keyframes rc-bump { 0% { opacity: 0; transform: translateY(10px) scale(0.92); } 18% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-16px); } }
.rating-card.is-pulse { animation: rc-pulse 0.7s var(--ease-out); }
@keyframes rc-pulse { 40% { box-shadow: 0 0 0 3px var(--teal), 0 24px 48px -20px rgba(16, 20, 19, 0.35); } }
@media (max-width: 760px) {
  .rating-card { left: 0; bottom: 64px; min-width: 0; padding: 10px 14px 10px 12px; border-radius: 16px; }
  .rc-name { font-size: 0.95rem; }
  .rc-row { font-size: 0.85rem; gap: 6px; }
  .rc-stars svg { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) { .rc-full { transition: none; } .rc-bump { display: none; } .rating-card.is-pulse { animation: none; } }

/* Botones de texto y chips */
.link-btn { padding: 8px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.93rem; font-weight: 540; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(16, 20, 19, 0.3); cursor: pointer; }
.link-btn:hover { text-decoration-color: var(--ink); }
.chip-btn { padding: 7px 14px; border: 0; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px rgba(16, 20, 19, 0.16); color: var(--ink); font: inherit; font-size: 0.86rem; font-weight: 540; cursor: pointer; }
.chip-btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* Paso «Configura tu negocio» */
.setup { padding-bottom: var(--section-y); }
.setup-steps { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 28px; font-size: 0.88rem; color: var(--ink-3); }
.setup-steps li { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.setup-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-2); font-weight: 600; font-size: 0.8rem; }
.setup-steps [aria-current] { color: var(--ink); font-weight: 600; }
.setup-steps [aria-current] span { background: var(--teal); }
.setup-head { display: grid; gap: 14px; max-width: 46rem; padding: clamp(24px, 4vw, 40px) 0 clamp(24px, 4vw, 36px); }
.setup-head h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.1; }
.setup-lead { color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; }
.setup-loading { color: var(--ink-3); }
.setup-flash { margin-bottom: 16px; padding: 12px 16px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-ink); font-weight: 560; }
.setup-grid { display: grid; gap: 20px; align-items: start; }
.setup-main { display: grid; gap: 16px; min-width: 0; }
.setup-same { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 18px 20px; border: 0; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.setup-same legend { float: left; width: 100%; margin-bottom: 10px; font-weight: 600; color: var(--ink); }
.setup-same label { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--bg); font-weight: 540; cursor: pointer; }
.setup-same label:has(input:checked) { background: var(--ink); color: var(--white); }
.setup-same input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal-deep); }
.setup-slots { display: grid; gap: 16px; }
.setup-slot .core { padding: clamp(20px, 3vw, 30px); }
.setup-slot.is-flag .core { box-shadow: 0 0 0 2px var(--danger); }
.slot-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.slot-head h2 { font-size: 1.3rem; line-height: 1.2; }
.slot-head p { margin-top: 4px; font-size: 0.9rem; color: var(--ink-3); }
.slot-num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-2); font-weight: 640; }
.setup-slot.is-done .slot-num { background: var(--teal); }
.slot-num svg { width: 18px; height: 18px; }
.sf-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.sf-field { display: grid; gap: 6px; align-content: start; }
.sf-field--wide { grid-column: 1 / -1; }
.sf-field label { font-size: 0.9rem; font-weight: 560; color: var(--ink); }
.sf-opt { font-weight: 420; color: var(--ink-3); }
.sf-field input, .adm-login input, .adm-note input { width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid rgba(16, 20, 19, 0.16); border-radius: 14px; background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; }
.sf-field input:focus-visible, .adm-login input:focus-visible, .adm-note input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.sf-field input[aria-invalid="true"] { border-color: var(--danger); }
.sf-error { margin-top: 10px; font-size: 0.88rem; font-weight: 560; color: var(--danger); }
.sf-actions, .sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.sf-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 0.88rem; color: var(--ink-3); }
.setup-step { display: grid; gap: 12px; }
.ss-title { font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.2; outline: none; }
.ss-lead { color: var(--ink-2); line-height: 1.55; }
.ss-lead a { color: var(--teal-ink); font-weight: 560; }
.sc-data { margin: 4px 0 0; padding: 4px 18px; border-radius: 18px; background: var(--bg); }
.sc-data div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.sc-data div:last-child { border-bottom: 0; }
.sc-data dt { color: var(--ink-3); font-size: 0.9rem; }
.sc-data dd { margin: 0; font-weight: 540; color: var(--ink); overflow-wrap: anywhere; }
.sc-data a { color: var(--teal-ink); }
.sc-attrib { font-size: 0.76rem; color: var(--ink-3); }
.sc-note { font-size: 0.86rem; color: var(--ink-3); }
.sc-actions .btn svg { width: 18px; height: 18px; }
.sc-list { display: grid; gap: 10px; }
.sc-item { display: flex; align-items: stretch; gap: 8px; border-radius: 16px; background: var(--bg); }
.sc-item button { flex: 1; display: grid; gap: 3px; padding: 14px 16px; border: 0; border-radius: 16px; background: none; text-align: left; font: inherit; color: var(--ink-2); cursor: pointer; }
.sc-item button:hover:not(:disabled), .sc-item button:focus-visible { background: var(--teal-soft); }
.sc-item b { color: var(--ink); font-size: 1.02rem; }
.sc-item em { font-style: normal; font-size: 0.84rem; color: var(--danger); }
.sc-item.is-off { opacity: 0.6; }
.sc-item.is-off button { cursor: not-allowed; }
.sc-item a { align-self: center; padding: 8px 14px; color: var(--teal-ink); font-size: 0.86rem; font-weight: 560; white-space: nowrap; }
.sn-options { display: grid; gap: 10px; counter-reset: opt; }
.sn-options button { position: relative; display: grid; gap: 3px; width: 100%; padding: 14px 16px 14px 54px; border: 0; border-radius: 16px; background: var(--bg); text-align: left; font: inherit; color: var(--ink-3); cursor: pointer; }
.sn-options button::before { counter-increment: opt; content: counter(opt); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); color: var(--ink); font-weight: 640; }
.sn-options button:hover, .sn-options button:focus-visible { background: var(--teal-soft); }
.sn-options b { color: var(--ink); }
.sd-badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--teal); color: var(--ink); font-size: 0.82rem; font-weight: 640; }
.sd-badge svg { width: 16px; height: 16px; }
.sd-biz { display: grid; gap: 2px; }
.sd-biz b { font-size: 1.05rem; }
.sd-biz span { color: var(--ink-3); font-size: 0.92rem; }
.sd-link { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--bg); }
.sd-link span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sd-link code { font-size: 0.85rem; overflow-wrap: anywhere; color: var(--ink); }
.setup-pay .core { display: grid; gap: 10px; padding: clamp(20px, 3vw, 28px); }
.setup-pay h2 { font-size: 1.2rem; }
.setup-pay .cart-sum { margin: 4px 0; }
.sp-progress { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--teal-ink); }
.sp-progress svg { width: 18px; height: 18px; }
.setup-pay .btn[aria-disabled="true"] { opacity: 0.5; }
.setup-pay .link-btn { justify-self: start; }
.setup-empty .core { display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 4vw, 40px); }
@media (min-width: 980px) {
  .setup-grid { grid-template-columns: minmax(0, 1fr) 20rem; }
  .setup-pay { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* Panel de administración */
.page-admin { background: var(--bg); }
.adm-bar { display: flex; align-items: center; gap: 16px; padding: 14px var(--gutter); border-bottom: 1px solid var(--hair); background: var(--white); font-weight: 600; }
.adm-bar img { height: 40px; width: auto; }
.adm { width: min(100% - var(--gutter) * 2, 80rem); margin: 0 auto; padding: 28px 0 80px; }
.adm-login { max-width: 26rem; margin: 40px auto; }
.adm-login .core { display: grid; gap: 12px; padding: 32px; }
.adm-login h1 { font-size: 1.8rem; }
.adm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin: 8px 0 20px; }
.adm-head h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.adm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.9rem; }
.adm select { min-height: 40px; padding: 6px 10px; border: 1.5px solid rgba(16, 20, 19, 0.16); border-radius: 10px; background: var(--white); font: inherit; font-size: 0.9rem; color: var(--ink); }
.adm-table-wrap { overflow-x: auto; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.adm-table th { padding: 12px 14px; text-align: left; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--hair); white-space: nowrap; }
.adm-table td { padding: 12px 14px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table a { color: var(--ink); font-weight: 600; }
.adm-test { padding: 1px 7px; border-radius: 999px; background: #fff3cd; color: #7a5a00; font-size: 0.72rem; font-weight: 600; }
.adm-zone { background: #fde8e7; color: #b42318; }
.adm-zone-alert { margin: 0 0 18px; padding: 12px 16px; border: 2px solid #b42318; border-radius: 14px; color: #b42318; font-weight: 600; }
.adm-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.adm-chip--ok { background: var(--teal-soft); color: var(--teal-ink); }
.adm-chip--mid { background: #e8f0fe; color: #1f4f9f; }
.adm-chip--warn { background: #fdecea; color: var(--danger); }
.adm-empty { padding: 28px; color: var(--ink-3); }
.adm-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.adm-card { display: grid; gap: 10px; align-content: start; padding: 20px 22px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.adm-card h2 { font-size: 1.05rem; }
.adm-card p { color: var(--ink-2); line-height: 1.5; }
.adm-items { display: grid; gap: 4px; }
.adm-muted { color: var(--ink-3); }
.adm-h2 { margin: 32px 0 12px; font-size: 1.35rem; }
.adm-biz { margin-bottom: 14px; }
.adm-biz header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adm-biz h3 { font-size: 1.2rem; }
.adm-biz .btn { justify-self: start; }
.adm-dl { margin: 0; }
.adm-dl div { display: grid; grid-template-columns: 11rem 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 0.92rem; }
.adm-dl dt { color: var(--ink-3); }
.adm-dl dd { margin: 0; overflow-wrap: anywhere; }
.adm-dl a { color: var(--teal-ink); }
.adm-dl .adm-key { margin: 6px -10px; padding: 12px 10px; border-radius: 12px; background: var(--teal-soft); border-bottom: 0; }
.adm-dl .adm-key dt { color: var(--ink); font-weight: 600; }
.adm-key-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.adm-copy { display: inline-block; padding: 4px 10px; border: 0; border-radius: 8px; background: var(--ink); color: var(--white); font: inherit; font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.adm-dl a.adm-copy { color: var(--white); }
.adm-sub summary { cursor: pointer; font-size: 0.9rem; font-weight: 560; }
.adm-sub ul { margin-top: 8px; padding-left: 1.1em; list-style: disc; font-size: 0.86rem; color: var(--ink-2); }
.adm-url { white-space: nowrap; }
.adm-soporte { min-width: 190px; }
.adm-soporte-acc { margin-top: 6px; }
.adm-destino { font-size: 0.8rem; text-decoration: none; }
.adm-soporte-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.adm-soporte-form input { width: 150px; padding: 4px 8px; border: 1px solid var(--hair); border-radius: 8px; font: inherit; font-size: 0.86rem; text-transform: uppercase; }
.adm-qr code { font-size: 0.82rem; word-break: break-all; }
.grabar { max-width: 460px; margin: 0 auto; padding: 24px 16px 48px; }
.grabar-paso { margin-top: 16px; padding: 18px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.grabar-paso[aria-disabled="true"] { opacity: 0.45; }
.grabar-paso h2 { margin: 0 0 6px; font-size: 1.05rem; }
.grabar-paso .btn { width: 100%; margin-top: 10px; }
.grabar-estado { margin-top: 10px; font-weight: 600; }
.grabar-estado--ok { color: var(--teal-ink); }
.grabar-estado--mal { color: var(--danger); }
.grabar-id { font-size: 2.2rem; font-weight: 620; letter-spacing: 0.04em; }
.adm-qr { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 16px; padding: 20px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.adm-qr-img { width: 180px; }
.adm-qr-img svg { display: block; width: 100%; height: auto; }
.adm-url-text { max-width: 40ch; overflow-wrap: anywhere; font-size: 0.85rem; margin: 6px 0 12px; }
.adm-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.adm-note label { font-weight: 560; }
.adm-note input { flex: 1; min-width: 12rem; min-height: 42px; }
.adm-history { display: grid; gap: 6px; font-size: 0.88rem; color: var(--ink-2); }
.adm-history time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.adm-toast { position: fixed; left: 50%; bottom: 20px; z-index: 90; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 560; transform: translateX(-50%); }
.adm-toast.is-bad { background: var(--danger); }
@media (max-width: 640px) { .adm-dl div, .sc-data div { grid-template-columns: 1fr; gap: 2px; } }
.sc-item.is-off { opacity: 1; background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.sc-item.is-off b, .sc-item.is-off span { color: var(--ink-3); }

/* Escalado de precios: «2 uds», packs y notas del carrito */
.pcard-price .pcard-tier { margin-top: 2px; font-size: 0.8rem; color: var(--teal-ink); }
.pcard-price .pcard-tier:empty { display: none; }
.pcard-tier b, .pdp-tier b { font-weight: 640; }
.pdp-price-row { flex-wrap: wrap; }
.pdp-tier { flex-basis: 100%; font-size: 0.92rem; color: var(--teal-ink); }
.pdp-tier:empty { display: none; }
.packs-box { display: grid; gap: 10px; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.packs button { display: grid; gap: 2px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1.5px rgba(16, 20, 19, 0.12); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease); }
.packs button:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.packs button[aria-pressed="true"] { background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--ink); }
.pack-name { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.pack-total { font-size: 1.12rem; font-weight: 640; letter-spacing: -0.01em; }
.pack-unit { font-size: 0.86rem; font-weight: 600; color: var(--teal-ink); }
.packs-more { font-size: 0.84rem; color: var(--ink-3); line-height: 1.45; }
.pdp-qty-total { min-height: 1.4em; margin-top: 10px; font-size: 0.92rem; font-weight: 560; color: var(--ink-2); }
.cart-line-tier { margin-top: 2px; font-size: 0.82rem; font-weight: 560; color: var(--teal-ink); }
.cart-line-next { margin-top: 2px; font-size: 0.8rem; color: var(--ink-3); }
.cart-line-stock { margin-top: 4px; font-size: 0.84rem; font-weight: 600; color: var(--danger); }
@media (max-width: 420px) { .packs { grid-template-columns: 1fr; } .packs button { grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; } }
.pdp-qty-total { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); font-weight: 420; }
.pdp-qty-total:empty { display: none; }
.pdp-qty-total b { color: var(--ink); font-weight: 640; }
.qt-ship { color: var(--ink-2); }
.qt-ship.is-free { color: var(--teal-ink); font-weight: 600; }
.qt-total { padding-top: 6px; border-top: 1px solid var(--hair); font-size: 1.02rem; color: var(--ink); }
.qt-hint { font-size: 0.84rem; color: var(--teal-ink); font-weight: 560; }

/* Menú en móvil y tablet */
.menu-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--ink); cursor: pointer; }
.island > .menu-btn + .cart-button, .island > .menu-btn + .btn { margin-left: 8px; }
.menu-lines { position: relative; display: block; width: 18px; height: 12px; }
.menu-lines span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease), top 0.35s var(--ease); }
.menu-lines span:first-child { top: 1px; }
.menu-lines span:last-child { top: 9px; }
.is-menu-open .menu-lines span:first-child { top: 5px; transform: rotate(45deg); }
.is-menu-open .menu-lines span:last-child { top: 5px; transform: rotate(-45deg); }
@media (max-width: 899px) {
  .island.is-menu-open .nav { display: block; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 8px; border-radius: 24px; background: var(--white); box-shadow: 0 0 0 1px var(--hair), 0 24px 48px -20px rgba(16, 20, 19, 0.35); animation: menu-in 0.32s var(--ease-out); }
  .island.is-menu-open .nav ul { flex-direction: column; gap: 2px; }
  .island.is-menu-open .nav a { display: block; padding: 14px 16px; border-radius: 16px; font-size: 1.05rem; font-weight: 540; color: var(--ink); text-decoration: none; }
  .island.is-menu-open .nav a:hover, .island.is-menu-open .nav a:focus-visible { background: var(--teal-soft); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 900px) { .menu-btn { display: none; } }
/* Móviles estrechos (≤ 374 px): logo más pequeño y el carrito solo con el número, para que la isla no se salga. */
@media (max-width: 374px) {
  .island { gap: 10px; padding-left: 14px; }
  .brand { width: 96px; }
  .cart-button { padding-left: 6px; }
  .cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .island > .btn--sm { padding-inline: 14px; }
  .island > .btn--sm .btn-ico { display: none; }
}
@media (prefers-reduced-motion: reduce) { .menu-lines span { transition: none; } .island.is-menu-open .nav { animation: none; } }

/* Etiqueta de precio: «Desde» pequeño, el precio en una línea */
.price-sticker .ps-from { margin: 0 0 2px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #c9d6d3; }
.price-sticker b { white-space: nowrap; }
/* Hero en tablet (una columna): composición contenida y móvil proporcionado */
@media (min-width: 600px) and (max-width: 979px) {
  .hero-stage { width: min(100%, 560px); margin-inline: auto; }
  .scene--hero { min-height: 440px; }
  .scene--hero .stand { width: 70%; margin-right: 26%; }
  .scene--hero .phone { --w: 190px; }
  .hero-rings { left: 50%; top: 72%; }
}

/* Guías: respuesta rápida (pensada para buscadores y asistentes de IA) */
.guide-answer { display: grid; gap: 10px; max-width: 50rem; margin-top: 28px; padding: 22px 24px; border-radius: 22px; background: var(--teal-soft); box-shadow: inset 4px 0 0 var(--teal-deep); }
.guide-answer .eyebrow { justify-self: start; background: var(--white); }
.guide-answer p:last-child { font-size: 1.08rem; line-height: 1.6; color: var(--ink); }
.guide-table-wrap { margin-top: 18px; overflow-x: auto; border-radius: 18px; box-shadow: 0 0 0 1px var(--hair); background: var(--white); }
.guide-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.guide-table th, .guide-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.guide-table th { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.guide-table tr:last-child td { border-bottom: 0; }
.guide-quote { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
.guide-quote b { display: block; margin-bottom: 4px; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.pdp-guides { margin-top: 18px; font-size: 0.95rem; color: var(--ink-3); }
.pdp-guides a { color: var(--ink); font-weight: 540; text-underline-offset: 3px; text-decoration-color: var(--teal-deep); }
.adm-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; padding: 12px 16px; border-radius: 14px; background: #fff3cd; color: #5c4400; font-size: 0.92rem; }
.adm-noapi { max-width: 40rem; margin: 20px auto; }
.adm-noapi code { padding: 1px 6px; border-radius: 6px; background: var(--bg); }

/* Panel: secciones, análisis, stock y costes */
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; padding: 4px; width: fit-content; max-width: 100%; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.adm-tabs a { padding: 8px 16px; border-radius: 999px; color: var(--ink-2); font-weight: 560; font-size: 0.92rem; text-decoration: none; }
.adm-tabs a:hover { background: var(--bg); }
.adm-tabs a[aria-current="page"] { background: var(--ink); color: var(--white); }
.adm-tabs a:focus-visible, .adm-stock-form input:focus-visible, .adm-costs input:focus-visible, .adm-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.adm-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.adm-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.adm-lead { max-width: 60rem; margin: -6px 0 18px; font-size: 0.93rem; }
.adm-note-box { margin: 0 0 16px; padding: 10px 16px; border-radius: 14px; background: #fff3cd; color: #5c4400; font-size: 0.92rem; }
.adm-warn { display: grid; gap: 4px; margin: 0 0 16px; padding: 12px 16px 12px 34px; border-radius: 14px; background: #fdecea; color: var(--danger); font-size: 0.92rem; list-style: disc; }
.adm-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-bottom: 16px; }
@media (max-width: 560px) { .adm-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .adm-stat { padding: 12px 14px; } .adm-stat-value { font-size: 1.3rem; } }
.adm-num td:first-child, .adm-stock td:first-child { min-width: 11rem; }
.adm-stat { padding: 16px 18px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.adm-stat-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.adm-stat-value { margin-top: 4px; font-size: 1.7rem; font-weight: 600; line-height: 1.15; color: var(--ink); letter-spacing: -0.02em; }
.adm-stat-note { margin-top: 4px; font-size: 0.82rem; color: var(--ink-3); line-height: 1.4; }
.adm-chart-card h2 small { font-weight: 420; font-size: 0.85rem; }
.adm-chart { position: relative; }
.adm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.adm-grid-lines line { stroke: rgba(16, 20, 19, 0.1); stroke-width: 1; }
.adm-grid-lines text { fill: var(--ink-3); font-size: 11px; font-family: inherit; }
.adm-bars path { fill: #00897a; }
.adm-hits rect { fill: transparent; }
.adm-hits rect:hover { fill: rgba(16, 20, 19, 0.05); }
.adm-tip { position: absolute; top: 0; z-index: 2; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: var(--white); font-size: 0.82rem; line-height: 1.4; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.adm-chart-table { margin-top: 8px; }
.adm-chart-table .adm-table { margin-top: 8px; }
.adm-num td:not(:first-child), .adm-num th:not(:first-child) { text-align: right; white-space: nowrap; }
.adm-foot { margin-top: 10px; font-size: 0.85rem; }
.adm-refund { color: var(--danger); font-weight: 600; }
.adm-stock-n { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.adm-stock-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 18rem; }
.adm-stock-form input { min-height: 38px; padding: 6px 10px; border: 1.5px solid rgba(16, 20, 19, 0.16); border-radius: 10px; background: var(--white); font: inherit; font-size: 0.9rem; color: var(--ink); }
.adm-stock-form input[name="cantidad"] { width: 5.5rem; }
.adm-stock-form input[name="motivo"] { flex: 1 1 9rem; min-width: 0; }
.adm-costs { display: grid; gap: 16px; max-width: 72rem; }
.adm-costs h3 { font-size: 1.05rem; }
.adm-mat input, .adm-mat select, .adm-cap input, .adm-pack-form input, .adm-field select { min-height: 38px; padding: 6px 10px; border: 1.5px solid rgba(16, 20, 19, 0.16); border-radius: 10px; background: var(--white); font: inherit; font-size: 0.9rem; color: var(--ink); }
.adm-mat input[name="nombre"] { width: 100%; min-width: 11rem; }
.adm-mat input[name="precio"], .adm-mat input[name="cantidad"], .adm-mat input[name="por_uso"] { width: 5.5rem; text-align: right; }
.adm-mat input[name="unidad"] { width: 4.5rem; }
.adm-mat td { vertical-align: middle; padding: 8px 10px; }
.adm-mat-cost { white-space: nowrap; font-weight: 600; color: var(--ink); text-align: right; }
.adm-cap input { width: 6rem; text-align: right; }
.adm-mat input:focus-visible, .adm-mat select:focus-visible, .adm-cap input:focus-visible, .adm-pack-form input:focus-visible, .adm-field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.adm-costs > .btn { justify-self: start; }
.adm-pack-rec { color: var(--ink); }
.adm-pack-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.adm-pack-form label { display: grid; gap: 4px; font-size: 0.85rem; color: var(--ink-3); }
.adm-pack-form input { width: 6rem; }
.adm-field { display: grid; grid-template-columns: 1fr 12rem; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.adm-field label { font-weight: 560; color: var(--ink); }
.adm-field small { display: block; font-weight: 420; color: var(--ink-3); }
.adm-field input { min-height: 42px; padding: 8px 12px; border: 1.5px solid rgba(16, 20, 19, 0.16); border-radius: 10px; background: var(--white); font: inherit; text-align: right; color: var(--ink); }
@media (max-width: 560px) { .adm-field { grid-template-columns: 1fr; gap: 6px; } .adm-field input { text-align: left; } }

/* Ficha: sugerencia de accesorio y galería */
.pdp-addon { display: grid; grid-template-columns: 72px 1fr; gap: 6px 14px; align-items: center; margin-top: 18px; padding: 14px 16px; border-radius: 20px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--hair); font-size: 0.92rem; }
.pdp-addon[hidden] { display: none; }
.pdp-addon img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }
.pdp-addon p { margin: 0; color: var(--ink-3); line-height: 1.45; }
.pdp-addon a { color: var(--ink); }
.pdp-addon .pdp-addon-title { color: var(--ink); font-weight: 600; }
.pdp-addon .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 560px) { .pdp-addon { grid-template-columns: 72px 1fr auto; } .pdp-addon .btn { grid-column: auto; } }
.pdp-visual { display: grid; gap: 14px; min-width: 0; }
.pdp-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pdp-thumb { display: block; overflow: hidden; border-radius: 22px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); transition: box-shadow 0.3s, transform 0.4s var(--ease); }
.pdp-thumb:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--hair), 0 14px 28px -22px rgba(30, 40, 38, 0.4); }
.pdp-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pdp-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pdp-thumb.is-contain img { object-fit: contain; padding: 6px; background: #fff; }

.adm-qr[hidden] { display: none; }
.adm-field select { width: 100%; }
.adm-free { margin-bottom: 16px; }
.adm-free h2 small { font-weight: 420; font-size: 0.85rem; }
.adm-stats--inner { margin-bottom: 0; }
.adm-stats--inner .adm-stat { box-shadow: none; background: var(--bg); }

/* Panel: cambio de estado con aviso al cliente */
.adm-status-form { display: grid; gap: 12px; margin: -6px 0 20px; padding: 18px 20px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1.5px var(--ink); }
.adm-status-form[hidden] { display: none; }
.adm-status-title { color: var(--ink); }
.adm-track { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.adm-track label, .adm-status-note { display: grid; gap: 4px; font-size: 0.85rem; color: var(--ink-3); }
.adm-track-url { grid-column: 1 / -1; }
.adm-track input, .adm-status-note textarea { min-height: 40px; padding: 8px 12px; border: 1.5px solid rgba(16, 20, 19, 0.16); border-radius: 10px; background: var(--white); font: inherit; font-size: 0.92rem; color: var(--ink); }
.adm-track input:focus-visible, .adm-status-note textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.adm-status-note textarea { resize: vertical; }
.adm-status-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Banda de la calculadora de reseñas (enlaza a seo.nfconecta.es) */
.calc-band-in { display: grid; gap: 22px; align-items: center; padding: clamp(24px, 4vw, 44px); }
.calc-band-in .section-title { margin: 12px 0 10px; max-width: 18ch; }
.calc-band-in p:not(.eyebrow) { max-width: 40rem; }
@media (min-width: 860px) { .calc-band-in { grid-template-columns: 1fr auto; } }