/* ============================================================
   NFC PERÚ — sistema visual
   Liquid glass, grafito, azul Google y rojo Perú.
   ============================================================ */

:root {
    --ink: #101318;
    --ink-soft: #1a1f27;
    --paper: #f4f5f7;
    --paper-2: #ebeef2;
    --text: #1b2029;
    --muted: #606775;
    --muted-2: #646b79;
    --jade: #1a73e8;
    --jade-deep: #1557b0;
    --jade-soft: #e8f0fe;
    --lime: #d2e3fc;
    --lime-deep: #c2d7fb;
    --copper: #b87333;
    --g-blue: #4285f4;
    --g-red: #ea4335;
    --g-red-light: #f28b82;
    --g-yellow: #fbbc05;
    --g-yellow-ink: #6b4d00;
    --g-green: #34a853;
    --g-green-light: #81c995;
    --peru-red: #d91023;
    --peru-red-deep: #b70e1d;
    --peru-red-light: #ff6b75;
    --google-spectrum: linear-gradient(90deg, var(--g-blue) 0 25%, var(--g-green) 25% 50%, var(--g-yellow) 50% 75%, var(--g-red) 75% 100%);
    --line: rgba(16, 19, 24, 0.1);
    --line-strong: rgba(16, 19, 24, 0.16);
    --glass: rgba(255, 255, 255, 0.52);
    --glass-strong: rgba(255, 255, 255, 0.72);
    --shadow-soft: 0 24px 60px -34px rgba(16, 19, 24, 0.35);
    --shadow-deep: 0 40px 100px -44px rgba(16, 19, 24, 0.45);
    --radius: 28px;
    --shell: 1240px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --font-ui: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
    --font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Roboto Mono", monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: clip;
    background: var(--paper);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.is-locked {
    overflow: hidden;
}

::selection {
    background: var(--jade);
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

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

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
    background: none;
    cursor: pointer;
}

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

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--jade);
    outline-offset: 3px;
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -0.12em;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 40px);
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 300;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    transform: translateY(-160%);
    transition: transform 0.25s var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ---------- fondo ambiental ---------- */

.ambient {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1000px 760px at 88% -8%, rgba(66, 133, 244, 0.16), transparent 62%),
        radial-gradient(800px 620px at -8% 8%, rgba(251, 188, 5, 0.1), transparent 58%),
        radial-gradient(900px 700px at 54% 112%, rgba(52, 168, 83, 0.1), transparent 62%),
        radial-gradient(600px 500px at 92% 88%, rgba(234, 67, 53, 0.06), transparent 60%),
        var(--paper);
}

.ambient-blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.6;
    animation: drift 26s ease-in-out infinite alternate;
}

.blob-a {
    width: 46vw;
    height: 46vw;
    max-width: 700px;
    max-height: 700px;
    top: -18%;
    right: -8%;
    background: radial-gradient(circle at 40% 40%, rgba(66, 133, 244, 0.22), transparent 68%);
}

.blob-b {
    width: 38vw;
    height: 38vw;
    max-width: 560px;
    max-height: 560px;
    top: 28%;
    left: -16%;
    background: radial-gradient(circle at 50% 50%, rgba(251, 188, 5, 0.14), transparent 66%);
    animation-delay: -8s;
}

.blob-c {
    width: 52vw;
    height: 42vw;
    max-width: 720px;
    max-height: 600px;
    right: -14%;
    bottom: -20%;
    background: radial-gradient(circle at 50% 50%, rgba(52, 168, 83, 0.16), transparent 68%);
    animation-delay: -15s;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.038;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scroll-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: 2px;
    background: rgba(16, 19, 24, 0.05);
    pointer-events: none;
}

.scroll-progress span {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--jade), var(--lime));
    transition: width 0.08s linear;
}

/* ---------- cristal ---------- */

.glass {
    position: relative;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38) 55%, rgba(255, 255, 255, 0.52));
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(16, 19, 24, 0.04),
        var(--shadow-soft);
    -webkit-backdrop-filter: blur(24px) saturate(165%);
    backdrop-filter: blur(24px) saturate(165%);
}

.glass-dark {
    position: relative;
    background:
        linear-gradient(148deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025) 55%, rgba(255, 255, 255, 0.055));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 40px 90px -48px rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    backdrop-filter: blur(26px) saturate(140%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
        background: rgba(250, 251, 247, 0.94);
    }

    .glass-dark {
        background: rgba(16, 19, 24, 0.96);
    }
}

/* ---------- tipografía y utilidades ---------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.17em;
    line-height: 1;
    text-transform: uppercase;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jade);
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
}

.eyebrow-dot.live {
    animation: softPulse 3s ease-in-out infinite;
}

.eyebrow-dot.lime {
    background: var(--lime);
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.14);
}

.studio .eyebrow-dot,
.studio .eyebrow-dot.lime {
    width: 7px;
    height: 7px;
    background: conic-gradient(from -45deg, var(--g-blue), var(--g-green), var(--g-yellow), var(--g-red), var(--g-blue));
    box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.12);
}

.eyebrow.light {
    color: rgba(255, 255, 255, 0.52);
}

.eyebrow-mini {
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.15em;
    line-height: 1.4;
    text-transform: uppercase;
}

.section-lead {
    max-width: 46ch;
    color: var(--muted);
    font-size: clamp(0.96rem, 1.1vw, 1.04rem);
    line-height: 1.72;
}

.muted-ink {
    color: var(--muted-2);
    font-weight: 500;
}

.lime-text {
    color: var(--lime);
}

.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--g-green);
    box-shadow: 0 0 0 0 rgba(52, 168, 83, 0.45);
    animation: livePulse 2.6s ease-out infinite;
}

.note-prices {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    color: var(--muted-2);
    font-size: 11.5px;
    line-height: 1.6;
}

.note-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--copper);
}

.micro-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    color: var(--muted-2);
    font-size: 10.5px;
    line-height: 1.55;
}

.micro-note .icon {
    margin-top: 1px;
    color: var(--jade);
}

.no-script {
    padding: 30px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--muted);
}

.section {
    position: relative;
    padding: clamp(78px, 9.5vw, 136px) 0;
}

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(24px, 5vw, 80px);
    align-items: end;
    margin-bottom: clamp(36px, 4.6vw, 60px);
}

.section-head.compact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    margin-bottom: 32px;
}

.section-head h2 {
    max-width: 18ch;
    font-size: clamp(2.15rem, 4.3vw, 3.65rem);
    font-weight: 640;
    letter-spacing: -0.048em;
    line-height: 1.02;
}

.section-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

/* ---------- botones ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 23px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 620;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 0.35s var(--ease-out),
        background 0.3s ease,
        box-shadow 0.35s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.btn .icon {
    font-size: 17px;
    transition: transform 0.35s var(--ease-out);
}

.btn:hover .icon:last-child {
    transform: translateX(3px);
}

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

.btn-primary {
    background: var(--ink);
    color: #f6f7f9;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 18px 34px -22px rgba(16, 19, 24, 0.9);
}

.btn-primary:hover {
    background: #181a1e;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 20px 40px -20px rgba(37, 99, 235, 0.6);
    transform: translateY(-2px);
}

.btn-glass {
    background: rgba(255, 255, 255, 0.5);
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 14px 30px -24px rgba(16, 19, 24, 0.45);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.78);
    transform: translateY(-2px);
}

.btn-lime {
    background: var(--lime);
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 16px 34px -22px rgba(37, 99, 235, 0.8);
}

.btn-lime:hover {
    background: #dbeafe;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 20px 38px -20px rgba(37, 99, 235, 0.55);
}

.btn-ghost-dark {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.16);
}

.btn-ghost-dark:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.26);
    color: #fff;
}

.btn-small {
    min-height: 44px;
    padding: 0 16px;
    font-size: 11.5px;
}

.btn-wide {
    width: 100%;
}

.btn.magnetic {
    will-change: transform;
}

/* ---------- header ---------- */

.site-header {
    position: fixed;
    inset: 14px 0 auto;
    z-index: 80;
    pointer-events: none;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    padding: 9px 11px 9px 16px;
    border-radius: 999px;
    pointer-events: auto;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.38));
    transition:
        background 0.4s ease,
        box-shadow 0.4s ease,
        padding 0.4s var(--ease-out),
        max-width 0.4s var(--ease-out);
}

.site-header.is-scrolled .header-inner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 22px 50px -34px rgba(16, 19, 24, 0.5);
}

.site-header.is-on-dark .header-inner {
    background: linear-gradient(135deg, rgba(16, 19, 24, 0.86), rgba(16, 19, 24, 0.68));
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 22px 50px -30px rgba(0, 0, 0, 0.7);
}

.site-header.is-on-dark .brand-word {
    color: #f3f4f7;
}

.site-header.is-on-dark .brand-word span {
    color: var(--peru-red-light);
}

.site-header.is-on-dark .brand-mark {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.site-header.is-on-dark .nav-link {
    color: rgba(255, 255, 255, 0.74);
}

.site-header.is-on-dark .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.site-header.is-on-dark .nav-link.is-active {
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.site-header.is-on-dark .selection-trigger {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: #f3f4f7;
}

.site-header.is-on-dark .selection-trigger .icon {
    color: var(--lime);
}

.site-header.is-on-dark .selection-count {
    background: var(--lime);
    color: var(--ink);
}

.site-header.is-on-dark .selection-count.is-zero {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
}

.site-header.is-on-dark .menu-trigger {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

.site-header.is-on-dark .menu-trigger span {
    background: #fff;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    border-radius: 999px;
}

.brand-logo {
    display: block;
    width: auto;
    height: 32px;
}

.site-header.is-on-dark .brand-logo {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28));
}

.brand-footer .brand-logo {
    height: 34px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ink);
    color: var(--lime);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 18px -10px rgba(16, 19, 24, 0.8);
}

.brand-mark svg {
    width: 26px;
    height: 26px;
}

.brand-word {
    color: var(--ink);
    font-size: 14px;
    font-weight: 730;
    letter-spacing: 0.015em;
    line-height: 1;
    white-space: nowrap;
}

.brand-word span {
    color: var(--peru-red);
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.nav-link {
    padding: 9px 11px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 540;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.nav-link:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.5);
}

.nav-link.is-active {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        0 4px 12px -8px rgba(16, 19, 24, 0.35);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
}

.selection-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 10px 0 12px;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.44);
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 600;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.selection-trigger:hover {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(16, 19, 24, 0.12);
}

.selection-trigger .icon {
    font-size: 16px;
    color: var(--jade);
}

.selection-count {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--lime);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.3s var(--ease-spring), background 0.25s ease;
}

.selection-count.is-zero {
    background: rgba(16, 19, 24, 0.09);
    color: var(--muted);
}

.selection-count.bump {
    transform: scale(1.28);
}

.menu-trigger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(16, 19, 24, 0.09);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.menu-trigger span {
    display: block;
    width: 15px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.3s var(--ease-out);
}

.menu-trigger[aria-expanded="true"] span:first-child {
    transform: translateY(3.25px) rotate(45deg);
}

.menu-trigger[aria-expanded="true"] span:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(900px, 100svh);
    padding: clamp(132px, 15vh, 176px) 0 clamp(52px, 7vw, 84px);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
    gap: clamp(20px, 4vw, 56px);
    align-items: center;
}

.hero-copy {
    position: relative;
    z-index: 2;
}

.hero-eyebrow {
    margin-bottom: 24px;
}

.hero-title {
    max-width: 12ch;
    margin-bottom: 25px;
    color: var(--ink);
    font-size: clamp(3rem, 6.3vw, 5.35rem);
    font-weight: 645;
    letter-spacing: -0.062em;
    line-height: 0.94;
}

.hero-title .line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.045em;
}

.hero-title .line>span {
    display: block;
}

.accent-word {
    position: relative;
    color: var(--jade-deep);
    white-space: nowrap;
}

.accent-word::after {
    content: "";
    position: absolute;
    left: 1%;
    right: -1%;
    bottom: 0.035em;
    z-index: -1;
    height: 0.12em;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.28), rgba(37, 99, 235, 0.82));
    transform: rotate(-0.6deg);
}

.hero-sub {
    max-width: 50ch;
    margin-bottom: 29px;
    color: var(--muted);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    line-height: 1.72;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
    margin-top: 30px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 520;
}

.hero-trust li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trust-check {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.1);
    color: var(--jade);
    font-size: 10px;
}

.trust-check .icon {
    width: 10px;
    height: 10px;
}

.hero-visual {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 590px;
    margin-inline: auto;
}

.hero-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    perspective: 1500px;
    transform-style: preserve-3d;
}

.stage-halo {
    position: absolute;
    inset: 9%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 45% 42%, rgba(255, 255, 255, 0.92), transparent 58%),
        radial-gradient(circle at 52% 55%, rgba(219, 231, 255, 0.7), transparent 66%);
    filter: blur(18px);
    opacity: 0.8;
}

.hero-card {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: var(--z, 1);
    width: min(78%, 420px);
    transform: translate(calc(-50% + var(--x) + var(--px, 0px)),
            calc(-50% + var(--y) + var(--py, 0px))) rotate(var(--rot)) scale(var(--scale));
    transition: transform 0.22s ease-out;
    will-change: transform;
}

.hero-card .nfc-card {
    font-size: clamp(8.5px, 1.6vw, 11.5px);
}

.float-chip {
    position: absolute;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border-radius: 17px;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 20px 45px -28px rgba(16, 19, 24, 0.52);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    animation: floatChip 7s ease-in-out infinite;
}

.chip-rating {
    top: 7%;
    right: -1%;
    padding: 11px 14px;
}

.chip-google {
    width: 24px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    background: conic-gradient(from -42deg, #4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.chip-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.chip-copy strong {
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.chip-copy small {
    margin-top: 2px;
    color: var(--muted-2);
    font-size: 9.5px;
    white-space: nowrap;
}

.chip-stars {
    margin-left: 2px;
    color: #d9a42c;
    font-size: 8.5px;
    letter-spacing: 0.06em;
}

.chip-tap {
    top: 47%;
    left: -4%;
    animation-delay: -2.4s;
}

.chip-ship {
    right: 2%;
    bottom: 5%;
    animation-delay: -4.8s;
}

.chip-icon {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--jade);
    font-size: 15px;
}

.hero-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: clamp(28px, 4vw, 48px);
    color: var(--muted-2);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.hero-scroll span {
    display: block;
    width: 1px;
    height: 22px;
    background: linear-gradient(var(--muted-2), transparent);
}

/* ---------- tarjetas NFC ---------- */

.nfc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    aspect-ratio: 1.586 / 1;
    padding: 1.55em;
    overflow: hidden;
    border-radius: clamp(12px, 1.5em, 22px);
    color: #0f1114;
    font-size: 11px;
    isolation: isolate;
    box-shadow:
        0 28px 55px -28px rgba(16, 19, 24, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.nfc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.35;
    pointer-events: none;
    background:
        repeating-linear-gradient(115deg, transparent 0 9px, rgba(255, 255, 255, 0.08) 9px 10px),
        radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, 0.32), transparent 55%);
    mix-blend-mode: soft-light;
}

.nfc-card.finish-pearl {
    background:
        radial-gradient(120% 150% at 10% -10%, #ffffff 0%, transparent 52%),
        linear-gradient(135deg, #fbfcfe 0%, #eaebee 52%, #d7d9dd 100%);
    color: #101215;
}

.nfc-card.finish-graphite {
    background:
        radial-gradient(130% 150% at 20% 0%, #36383d 0%, #191b1f 45%, #08090b 100%);
    color: #f2f3f6;
    box-shadow:
        0 28px 55px -26px rgba(6, 8, 12, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.nfc-card.finish-titanium {
    background:
        radial-gradient(120% 150% at 20% 0%, rgba(255, 255, 255, 0.8), transparent 55%),
        repeating-linear-gradient(105deg, #eaeaeb 0 2px, #cbccce 2px 4px, #dedfe1 4px 7px);
    color: #1c1d20;
}

.nfc-card.finish-sand {
    background:
        radial-gradient(130% 140% at 15% 0%, #eedcc6 0%, #c9ae93 52%, #8d7058 100%);
    color: #2b2118;
}

.nfc-card.finish-copper {
    background:
        radial-gradient(120% 150% at 15% 0%, #e2b184 0%, #b87333 48%, #6b3f22 100%);
    color: #fff5e9;
}

.nfc-card.finish-graphite .card-kind,
.nfc-card.finish-graphite .card-brand,
.nfc-card.finish-copper .card-kind,
.nfc-card.finish-copper .card-brand {
    color: rgba(255, 255, 255, 0.92);
}

.card-sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(55% 75% at var(--gx, 28%) var(--gy, 12%), rgba(255, 255, 255, 0.34), transparent 60%);
    opacity: 0.65;
    mix-blend-mode: screen;
    transition: background 0.18s ease-out;
}

.card-head,
.card-mid,
.card-foot {
    position: relative;
    z-index: 2;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    font-size: 0.66em;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.card-brand {
    font-weight: 730;
    letter-spacing: 0.1em;
}

.card-kind {
    color: rgba(16, 19, 24, 0.46);
    font-size: 0.85em;
    font-weight: 600;
}

.nfc-card.finish-graphite .card-kind,
.nfc-card.finish-copper .card-kind {
    color: rgba(255, 255, 255, 0.48);
}

.card-mid {
    display: flex;
    align-items: center;
    gap: 1.2em;
    flex: 1;
    padding: 0.65em 0;
}

.card-chip {
    position: relative;
    display: block;
    width: 3.1em;
    height: 2.25em;
    flex: none;
    border-radius: 0.48em;
    background:
        linear-gradient(135deg, #f4e3b2 0%, #d8bb75 35%, #b1904d 65%, #e3cb8c 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        inset 0 0 0 0.18em rgba(120, 87, 34, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

.card-chip::before,
.card-chip::after {
    content: "";
    position: absolute;
    background: rgba(102, 74, 30, 0.35);
}

.card-chip::before {
    inset: 33% 0;
    height: 1px;
}

.card-chip::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
}

.card-waves {
    width: 4.3em;
    height: auto;
    opacity: 0.42;
}

.nfc-card.finish-graphite .card-waves,
.nfc-card.finish-copper .card-waves {
    opacity: 0.58;
}

.card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1em;
}

.card-engraving {
    display: block;
    max-width: 70%;
    overflow: hidden;
    font-size: 0.7em;
    font-weight: 680;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.card-stars {
    color: rgba(16, 19, 24, 0.52);
    font-size: 0.8em;
    letter-spacing: 0.12em;
    line-height: 1;
}

.nfc-card.finish-graphite .card-stars,
.nfc-card.finish-copper .card-stars {
    color: rgba(255, 255, 255, 0.58);
}

/* ---------- ticker ---------- */

.ticker {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(16, 19, 24, 0.06);
    background: rgba(255, 255, 255, 0.32);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: marquee 42s linear infinite;
}

.ticker:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-group {
    display: flex;
    align-items: center;
    gap: 27px;
    padding: 15px 27px 15px 0;
    color: var(--muted-2);
    font-size: 9.5px;
    font-weight: 620;
    letter-spacing: 0.19em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.ticker-dot {
    width: 4px;
    height: 4px;
    flex: none;
    border-radius: 50%;
    background: var(--jade);
    opacity: 0.65;
}

/* ---------- cómo funciona + teléfono ---------- */

.how-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
    gap: clamp(20px, 3.4vw, 44px);
    padding: clamp(12px, 1.8vw, 22px);
    border-radius: clamp(28px, 4vw, 42px);
    overflow: hidden;
}

.demo-wrap {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 648px;
    padding: 34px 20px 92px;
    overflow: hidden;
    border-radius: clamp(22px, 3vw, 32px);
    border: 1px solid rgba(255, 255, 255, 0.62);
    background:
        radial-gradient(80% 60% at 70% 16%, rgba(255, 255, 255, 0.9), transparent 60%),
        radial-gradient(90% 90% at 35% 88%, rgba(219, 231, 255, 0.58), transparent 64%),
        linear-gradient(155deg, rgba(219, 231, 255, 0.78), rgba(244, 240, 230, 0.86));
    isolation: isolate;
}

.demo-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.32;
    background-image: radial-gradient(rgba(16, 19, 24, 0.18) 0.7px, transparent 0.7px);
    background-size: 18px 18px;
    mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 88%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 88%);
}

.phone {
    position: relative;
    width: clamp(232px, 26vw, 278px);
    height: clamp(478px, 52vw, 568px);
    transform: rotate(-3.2deg);
    filter: drop-shadow(0 34px 42px rgba(16, 19, 24, 0.25));
}

.phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 7px;
    border-radius: 46px;
    background: linear-gradient(155deg, #3d3f42 0%, #151619 45%, #08080a 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.18);
}

.phone-island {
    position: absolute;
    top: 15px;
    left: 50%;
    z-index: 4;
    width: 78px;
    height: 21px;
    border-radius: 999px;
    background: #060607;
    transform: translateX(-50%);
}

.phone-island::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1f2126;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 39px;
    background: #f7f8fa;
    color: #191b1e;
}

.status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-icons svg {
    width: 12px;
    height: 9px;
}

.battery {
    position: relative;
    display: block;
    width: 17px;
    height: 9px;
    border: 1px solid rgba(16, 19, 24, 0.7);
    border-radius: 2.5px;
}

.battery::after {
    content: "";
    position: absolute;
    top: 2px;
    right: -3px;
    width: 1.5px;
    height: 3px;
    border-radius: 0 1px 1px 0;
    background: rgba(16, 19, 24, 0.6);
}

.battery span {
    position: absolute;
    inset: 1.5px;
    width: 70%;
    border-radius: 1px;
    background: rgba(16, 19, 24, 0.8);
}

.phone-app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100% - 24px);
    padding: 14px 13px 0;
}

.phone-topbar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 2px 12px;
}

.g-badge {
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    background: conic-gradient(from -42deg, #4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.phone-app-title {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: #1f2125;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.phone-app-title small {
    color: #808287;
    font-size: 8.5px;
    font-weight: 500;
}

.phone-more {
    margin-left: auto;
    color: #909296;
    font-size: 9px;
    letter-spacing: 0.05em;
}

.place-sheet {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid rgba(16, 19, 24, 0.07);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px -16px rgba(16, 19, 24, 0.3);
}

.place-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 9px;
    background: linear-gradient(135deg, #1e40af, #172554);
    color: var(--lime);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.place-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.place-copy strong {
    overflow: hidden;
    font-size: 9.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.place-copy span {
    overflow: hidden;
    margin-top: 2px;
    color: #8e9094;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.place-score {
    margin-left: auto;
    color: #7a5c0d;
    font-size: 9px;
    font-weight: 700;
}

.phone-place-stars {
    padding: 7px 3px 0;
    color: #d9a62f;
    font-size: 7.5px;
    letter-spacing: 0.1em;
}

.phone-place-stars span {
    color: #9c9ea3;
    font-size: 7px;
    letter-spacing: 0;
}

.phone-photo {
    position: relative;
    height: 92px;
    margin: 9px 2px 0;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(135deg, #dadee5, #e9e2d2 62%, #f2ece0);
}

.phone-photo::before {
    content: "";
    position: absolute;
    inset: -20%;
    opacity: 0.55;
    background:
        linear-gradient(78deg, transparent 0 42%, rgba(255, 255, 255, 0.7) 42% 44%, transparent 44%),
        linear-gradient(104deg, transparent 0 60%, rgba(255, 255, 255, 0.55) 60% 62%, transparent 62%),
        repeating-linear-gradient(24deg, rgba(37, 99, 235, 0.08) 0 1px, transparent 1px 19px),
        repeating-linear-gradient(96deg, rgba(37, 99, 235, 0.07) 0 1px, transparent 1px 23px);
    transform: rotate(-3deg);
}

.photo-map {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 30%, rgba(96, 165, 250, 0.22), transparent 18%),
        radial-gradient(circle at 80% 72%, rgba(176, 141, 91, 0.16), transparent 24%);
}

.photo-pin {
    position: absolute;
    top: 47%;
    left: 54%;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: var(--jade);
    font-size: 13px;
    box-shadow: 0 5px 14px -5px rgba(16, 19, 24, 0.45);
    transform: translate(-50%, -50%);
}

.photo-label {
    position: absolute;
    bottom: 7px;
    left: 8px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #606369;
    font-size: 6.5px;
    line-height: 1.2;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.phone-review-list {
    padding: 7px 3px 42px;
}

.phone-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 1px;
}

.phone-review-head strong {
    color: #1f2125;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.phone-review-head span {
    color: #475569;
    font-size: 6.8px;
    font-weight: 600;
}

.phone-review {
    display: flex;
    gap: 6px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(16, 19, 24, 0.06);
}

.phone-review:last-child {
    border-bottom: 0;
}

.review-avatar {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: #e6e8ed;
    color: #1e40af;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.review-avatar.alt {
    background: #f2eadf;
    color: #9a6f43;
}

.phone-review>div {
    min-width: 0;
}

.phone-review strong {
    color: #383a3e;
    font-size: 7.3px;
    font-weight: 650;
}

.review-stars {
    margin-left: 4px;
    color: #e8b22e;
    font-size: 5.5px;
    letter-spacing: 0.06em;
}

.phone-review p {
    margin-top: 1px;
    overflow: hidden;
    color: #818387;
    font-size: 6.7px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone-review-cta {
    position: absolute;
    right: 13px;
    bottom: 13px;
    left: 13px;
    z-index: 1;
    display: grid;
    place-items: center;
    height: 29px;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 9px;
    background: #eff0f2;
    color: #334155;
    font-size: 7.8px;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.demo-wrap.is-tapped .phone-review-cta,
.demo-wrap.is-done .phone-review-cta {
    opacity: 0;
}

.review-prompt {
    position: absolute;
    right: 7px;
    bottom: 7px;
    left: 7px;
    z-index: 2;
    padding: 14px 13px 13px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 -12px 34px -18px rgba(16, 19, 24, 0.26);
    transform: translateY(calc(100% + 28px));
    transition: transform 0.65s var(--ease-out);
}

.demo-wrap.is-tapped .review-prompt,
.demo-wrap.is-done .review-prompt {
    transform: translateY(0);
}

.review-prompt p {
    margin-bottom: 8px;
    color: #2a2c2f;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.demo-stars {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    color: #dedfe1;
    font-size: 23px;
    line-height: 1;
}

.demo-stars span {
    transition: color 0.25s ease, transform 0.3s var(--ease-spring);
}

.demo-stars span.is-on {
    color: #e8b22e;
    transform: scale(1.1);
}

.review-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.review-chips span {
    padding: 4px 8px;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 999px;
    color: #717479;
    font-size: 7.5px;
    font-weight: 550;
}

.fake-textarea {
    height: 41px;
    padding: 8px 9px;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 10px;
    color: #aaacaf;
    font-size: 8px;
}

.fake-publish {
    display: grid;
    place-items: center;
    height: 29px;
    margin-top: 8px;
    border-radius: 9px;
    background: #212327;
    color: #fff;
    font-size: 8.5px;
    font-weight: 600;
}

.review-success {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 30px;
    background: rgba(250, 251, 248, 0.96);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.demo-wrap.is-done .review-success {
    opacity: 1;
    visibility: visible;
}

.success-check {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--jade);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 14px 30px -14px rgba(37, 99, 235, 0.7);
    animation: successPop 0.5s var(--ease-spring);
}

.review-success strong {
    color: #1f2125;
    font-size: 16px;
    letter-spacing: -0.02em;
}

.review-success span:last-child {
    color: #808287;
    font-size: 9px;
}

.phone-home {
    position: absolute;
    bottom: 7px;
    left: 50%;
    width: 84px;
    height: 4px;
    border-radius: 999px;
    background: rgba(16, 19, 24, 0.32);
    transform: translateX(-50%);
}

.demo-card {
    position: absolute;
    bottom: 122px;
    left: 4%;
    z-index: 4;
    width: min(250px, 50%);
    transform: rotate(-9deg);
    filter: drop-shadow(0 24px 26px rgba(16, 19, 24, 0.22));
}

.demo-card .nfc-card {
    font-size: 9px;
}

.tap-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 70px;
    height: 70px;
    border: 1px solid rgba(37, 99, 235, 0.55);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    pointer-events: none;
}

.demo-wrap.is-tapped .tap-ripple {
    animation: nfcRipple 1.5s var(--ease-out) 1;
}

.tap-button {
    position: absolute;
    bottom: 42px;
    left: 50%;
    z-index: 6;
    transform: translateX(-50%);
}

.tap-button:hover {
    transform: translateX(-50%) translateY(-2px);
}

.tap-button.is-playing {
    pointer-events: none;
    opacity: 0.82;
}

.demo-caption {
    position: absolute;
    right: 22px;
    bottom: 16px;
    left: 22px;
    z-index: 5;
    color: rgba(16, 19, 24, 0.48);
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}

.how-copy {
    display: flex;
    flex-direction: column;
    padding: clamp(12px, 2vw, 24px) clamp(4px, 1.5vw, 18px) clamp(12px, 2vw, 20px) 0;
}

.steps {
    display: flex;
    flex-direction: column;
}

.step {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 15px;
    padding: clamp(22px, 2.4vw, 30px) 0;
    border-top: 1px solid rgba(16, 19, 24, 0.08);
}

.step:first-child {
    padding-top: 6px;
    border-top: 0;
}

.step-number {
    padding-top: 5px;
    color: var(--jade);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.step h3 {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: clamp(1.05rem, 1.4vw, 1.24rem);
    font-weight: 640;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.step p {
    max-width: 40ch;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.62;
}

.compat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.48);
}

.compat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 11px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--jade);
    font-size: 18px;
}

.compat p {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.55;
}

.compat strong {
    color: var(--ink);
    font-weight: 620;
}

/* ---------- anatomía ---------- */

.anatomy-block {
    margin-top: clamp(60px, 8vw, 104px);
}

.anatomy {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4vw, 54px);
    align-items: center;
    padding: clamp(24px, 4vw, 48px);
    overflow: hidden;
    border-radius: clamp(26px, 3.6vw, 38px);
    background:
        radial-gradient(80% 80% at 24% 8%, rgba(255, 255, 255, 0.85), transparent 58%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(245, 243, 235, 0.52));
}

.anatomy-visual {
    min-width: 0;
    padding: clamp(8px, 2vw, 22px);
}

.anatomy-card-wrap {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
    padding: clamp(24px, 4vw, 34px) 0;
}

.anatomy-card {
    font-size: clamp(9px, 1.3vw, 13px);
    transform: rotate(-5deg);
    box-shadow:
        0 40px 70px -36px rgba(16, 19, 24, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.anatomy-coil {
    position: absolute;
    inset: 18% 13%;
    border: 1px dashed rgba(189, 124, 79, 0.6);
    border-radius: 14px;
    pointer-events: none;
}

.anatomy-coil::before,
.anatomy-coil::after {
    content: "";
    position: absolute;
    border: 1px dashed rgba(189, 124, 79, 0.35);
    border-radius: 10px;
}

.anatomy-coil::before {
    inset: 7px;
}

.anatomy-coil::after {
    inset: 14px;
}

.hotspot {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 12px 24px -18px rgba(16, 19, 24, 0.5);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out), border-color 0.25s ease;
}

.hotspot span {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.11);
    color: var(--jade);
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: 700;
}

.hotspot:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--ink);
}

.hotspot.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #f7f8fa;
    box-shadow: 0 14px 26px -14px rgba(16, 19, 24, 0.7);
}

.hotspot.is-active span {
    background: var(--lime);
    color: var(--ink);
}

.hotspot-chip {
    top: 44%;
    left: -3%;
}

.hotspot-antenna {
    top: 19%;
    right: -2%;
}

.hotspot-body {
    top: 2%;
    left: 1%;
}

.hotspot-engrave {
    bottom: 4%;
    left: 3%;
}

.anatomy-copy {
    padding-right: clamp(0px, 2vw, 20px);
}

.anatomy-copy .eyebrow-mini {
    margin-bottom: 12px;
    color: var(--jade);
}

.anatomy-copy h3 {
    margin-bottom: 11px;
    color: var(--ink);
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    font-weight: 640;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.anatomy-copy>p {
    max-width: 46ch;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.7;
}

.anatomy-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.anatomy-specs li {
    padding: 7px 10px;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.02em;
}

.anatomy-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(16, 19, 24, 0.08);
}

.anatomy-meta span {
    display: flex;
    flex-direction: column;
    color: var(--muted-2);
    font-size: 9px;
    line-height: 1.4;
}

.anatomy-meta strong {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.04em;
}

.anatomy-copy.is-changing h3,
.anatomy-copy.is-changing>p,
.anatomy-copy.is-changing .anatomy-specs,
.anatomy-copy.is-changing .anatomy-meta {
    animation: contentFade 0.35s var(--ease-out);
}

/* ---------- productos ---------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter {
    padding: 8px 14px;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.38);
    color: var(--muted);
    font-size: 11px;
    font-weight: 560;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.filter:hover {
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
}

.filter.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #f7f8fa;
    box-shadow: 0 10px 20px -16px rgba(16, 19, 24, 0.65);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    perspective: 1200px;
}

.product-card {
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    --my: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 454px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 28px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.38));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        var(--shadow-soft);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
    backdrop-filter: blur(20px) saturate(155%);
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift, 0px));
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease-out), box-shadow 0.4s ease, border-color 0.3s ease;
}

.product-card:hover {
    --lift: -5px;
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 34px 70px -38px rgba(16, 19, 24, 0.45);
}

.product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(50% 50% at var(--mx) var(--my), rgba(255, 255, 255, 0.55), transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.product-card:hover::after {
    opacity: 0.55;
}

.product-card>* {
    position: relative;
    z-index: 1;
}

.product-art {
    position: relative;
    display: grid;
    place-items: center;
    height: 224px;
    margin-bottom: 17px;
    overflow: hidden;
    border-radius: 20px;
    isolation: isolate;
}

.product-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.4;
    background-image: radial-gradient(rgba(16, 19, 24, 0.16) 0.7px, transparent 0.7px);
    background-size: 16px 16px;
    mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
}

.product-art.art-card {
    background:
        radial-gradient(80% 85% at 72% 8%, rgba(255, 255, 255, 0.96), transparent 58%),
        linear-gradient(145deg, #e6e8eb, #eef1f5 55%, #dddfe3);
}

.product-art.art-sticker {
    background:
        radial-gradient(70% 70% at 30% 12%, rgba(255, 255, 255, 0.92), transparent 60%),
        linear-gradient(145deg, #dee1e7, #eaebee 55%, #d7dae0);
}

.product-art.art-stand {
    background:
        radial-gradient(80% 80% at 70% 4%, rgba(255, 255, 255, 0.96), transparent 60%),
        linear-gradient(145deg, #f1eadf, #f5f1e9 55%, #e7dfd2);
}

.product-art.art-stack {
    background:
        radial-gradient(80% 80% at 26% 4%, rgba(255, 255, 255, 0.96), transparent 60%),
        linear-gradient(145deg, #e8e9eb, #f2f0ea 55%, #dfe0e3);
}

.product-art .nfc-card {
    width: 76%;
    font-size: 7.2px;
    transform: rotate(-7deg);
    transition: transform 0.65s var(--ease-out);
}

.product-card:hover .product-art .nfc-card {
    transform: rotate(-1.5deg) translateY(-4px) scale(1.025);
}

.product-badge {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 3;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
    font-size: 8px;
    font-weight: 680;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.product-badge-new {
    border-color: rgba(52, 168, 83, 0.32);
    background: rgba(52, 168, 83, 0.16);
    color: #1e7e34;
}

.product-badge-best {
    border-color: rgba(251, 188, 5, 0.4);
    background: rgba(251, 188, 5, 0.22);
    color: var(--g-yellow-ink);
}

.product-badge-offer {
    border-color: rgba(234, 67, 53, 0.3);
    background: rgba(234, 67, 53, 0.14);
    color: #b3261e;
}

.product-art-index {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 2;
    color: rgba(16, 19, 24, 0.32);
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.1em;
}

.product-sticker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background:
        radial-gradient(80% 80% at 30% 22%, #3b82f6 0%, #1d4ed8 58%, #0b1f4d 100%);
    color: #f4f7fc;
    box-shadow:
        0 24px 40px -24px rgba(16, 19, 24, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 6px rgba(0, 0, 0, 0.25);
    transform: rotate(-7deg);
    transition: transform 0.65s var(--ease-out);
}

.product-card:hover .product-sticker {
    transform: rotate(0deg) translateY(-4px) scale(1.02);
}

.sticker-ring {
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.32);
    border-radius: 50%;
}

.sticker-chip {
    width: 32px;
    height: 24px;
    margin-bottom: 9px;
    border-radius: 5px;
    background: linear-gradient(135deg, #e7eef9, #d8bb75 45%, #a98745);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.sticker-brand {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.sticker-tap {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 5.5px;
    letter-spacing: 0.14em;
}

.product-stand {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    transform: rotate(-4deg);
    transition: transform 0.65s var(--ease-out);
}

.product-card:hover .product-stand {
    transform: rotate(0deg) translateY(-3px);
}

.product-stand .nfc-card {
    width: 82%;
    font-size: 5.6px;
    transform: none;
}

.stand-base {
    width: 54%;
    height: 30px;
    margin-top: -8px;
    border-radius: 4px 4px 12px 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(214, 222, 217, 0.55));
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 14px 22px -16px rgba(16, 19, 24, 0.4);
    transform: perspective(200px) rotateX(26deg);
}

.product-stack {
    position: relative;
    display: grid;
    place-items: center;
    width: 80%;
    height: 200px;
}

.stack-back,
.stack-mid {
    position: absolute;
    width: 74%;
    aspect-ratio: 1.586 / 1;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 16px 28px -22px rgba(16, 19, 24, 0.4);
}

.stack-back {
    background: linear-gradient(135deg, #e1e3e6, #d0d2d6);
    transform: translate(12px, -14px) rotate(7deg);
}

.stack-mid {
    background: linear-gradient(135deg, #f2e6d8, #dcc7b3);
    transform: translate(-8px, 4px) rotate(-3deg);
}

.product-stack .nfc-card {
    width: 78%;
    font-size: 5.8px;
    transform: rotate(-8deg);
}

.product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2px 6px 5px;
}

.product-cat {
    margin-bottom: 5px;
    color: var(--muted-2);
    font-size: 8.5px;
    font-weight: 640;
    letter-spacing: 0.13em;
    line-height: 1.4;
    text-transform: uppercase;
}

.product-name {
    margin-bottom: 5px;
    color: var(--ink);
    font-size: clamp(1.25rem, 1.7vw, 1.5rem);
    font-weight: 640;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.product-tagline {
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 13px;
}

.product-specs span {
    padding: 5px 7px;
    border: 1px solid rgba(16, 19, 24, 0.07);
    border-radius: 999px;
    color: var(--muted-2);
    font-size: 8px;
    line-height: 1.2;
}

.product-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(16, 19, 24, 0.07);
}

.product-price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.product-price span {
    margin-bottom: 2px;
    color: var(--muted-2);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-price strong {
    color: var(--ink);
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.product-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(16, 19, 24, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    color: var(--ink);
    font-size: 10px;
    font-weight: 600;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.product-open:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.product-open .icon {
    font-size: 13px;
}

.product-card.product-cta {
    align-items: center;
    justify-content: center;
    min-height: 454px;
    padding: 30px;
    background:
        radial-gradient(80% 80% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
        linear-gradient(150deg, rgba(219, 231, 255, 0.65), rgba(245, 241, 232, 0.5));
    border: 1px dashed rgba(37, 99, 235, 0.28);
    box-shadow: none;
    text-align: center;
}

.product-cta .cta-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--lime);
    font-size: 22px;
}

.product-cta h3 {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 1.45rem;
    font-weight: 640;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.product-cta p {
    max-width: 26ch;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

/* ---------- configurador ---------- */

.configurator {
    padding-top: clamp(40px, 6vw, 80px);
}

.config-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 16px;
    align-items: stretch;
}

.config-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 586px;
    padding: clamp(16px, 2.2vw, 24px);
    overflow: hidden;
    border-radius: clamp(26px, 3.4vw, 36px);
    background:
        radial-gradient(80% 70% at 70% 18%, rgba(255, 255, 255, 0.9), transparent 60%),
        radial-gradient(90% 80% at 20% 100%, rgba(219, 231, 255, 0.55), transparent 60%),
        linear-gradient(150deg, rgba(219, 231, 255, 0.8), rgba(245, 241, 231, 0.8));
}

.config-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.28;
    pointer-events: none;
    background-image: radial-gradient(rgba(16, 19, 24, 0.16) 0.7px, transparent 0.7px);
    background-size: 19px 19px;
    mask-image: radial-gradient(circle at 50% 45%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 72%);
}

.config-stage-head,
.config-stage-foot {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.stage-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 640;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.stage-hint,
.stage-tip {
    color: var(--muted-2);
    font-size: 9.5px;
}

.config-3d {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 380px;
    padding: 20px;
    cursor: grab;
    touch-action: none;
    perspective: 1300px;
}

.config-3d:active {
    cursor: grabbing;
}

.config-card {
    position: relative;
    z-index: 2;
    width: min(88%, 446px);
    font-size: clamp(10px, 1.3vw, 13.5px);
    transform: rotateX(-8deg) rotateY(-18deg);
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease-out);
    will-change: transform;
    box-shadow:
        0 50px 80px -42px rgba(16, 19, 24, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

.config-3d.is-dragging .config-card {
    transition: none;
}

.config-shadow {
    position: absolute;
    bottom: 11%;
    left: 50%;
    z-index: 1;
    width: 58%;
    height: 44px;
    border-radius: 50%;
    background: rgba(16, 19, 24, 0.25);
    filter: blur(26px);
    transform: translateX(-50%);
}

.config-stage-foot {
    align-items: center;
    justify-content: space-between;
}

.rotate-buttons {
    display: flex;
    gap: 6px;
}

.rotate-buttons button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink);
    font-size: 15px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.rotate-buttons button:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.rotate-buttons button:first-child .icon {
    transform: rotate(180deg);
}

.config-panel {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.6vw, 27px);
    padding: clamp(22px, 3vw, 34px);
    border-radius: clamp(26px, 3.4vw, 36px);
}

.config-group {
    display: flex;
    flex-direction: column;
}

.config-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.field-label {
    display: block;
    margin-bottom: 9px;
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 620;
    letter-spacing: -0.01em;
}

.field-label .label-muted {
    color: var(--muted-2);
    font-weight: 450;
}

.field-extra {
    color: var(--jade);
    font-family: var(--font-mono);
    font-size: 9px;
}

.swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.swatch {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 45px;
    padding: 7px 9px;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.36);
    color: var(--muted);
    text-align: left;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.swatch:hover {
    background: rgba(255, 255, 255, 0.65);
}

.swatch.is-active {
    border-color: var(--ink);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px var(--ink);
    color: var(--ink);
}

.swatch-dot {
    width: 23px;
    height: 23px;
    flex: none;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow:
        inset 0 0 0 1px rgba(16, 19, 24, 0.13),
        0 3px 6px -4px rgba(16, 19, 24, 0.35);
}

.swatch-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.swatch-text strong {
    overflow: hidden;
    font-size: 9.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swatch-text small {
    margin-top: 2px;
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: 7.5px;
}

.engrave-wrap {
    position: relative;
}

.engrave-wrap input {
    width: 100%;
    height: 48px;
    padding: 0 61px 0 14px;
    border: 1px solid rgba(16, 19, 24, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--ink);
    font-size: 12.5px;
    outline: 0;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.engrave-wrap input::placeholder {
    color: var(--muted-2);
}

.engrave-wrap input:focus {
    border-color: rgba(37, 99, 235, 0.5);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.char-count {
    position: absolute;
    top: 50%;
    right: 13px;
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: 8.5px;
    transform: translateY(-50%);
}

.field-hint {
    margin-top: 7px;
    color: var(--muted-2);
    font-size: 10px;
    line-height: 1.55;
}

.config-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.qty-stepper {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 3px;
    border: 1px solid rgba(16, 19, 24, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.48);
}

.qty-stepper button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--muted);
    font-size: 15px;
    transition: background 0.2s ease, color 0.2s ease;
}

.qty-stepper button:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
}

.qty-stepper input {
    width: 42px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    outline: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.config-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-left: auto;
}

.price-line {
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: var(--muted-2);
    font-size: 8.5px;
}

.price-line strong {
    color: var(--muted);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.price-line.total strong {
    color: var(--ink);
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.04em;
}

.config-panel .btn-wide {
    margin-top: auto;
}

/* ---------- estudio de reseñas ---------- */

.studio {
    position: relative;
    margin-top: clamp(20px, 3vw, 32px);
    padding: clamp(76px, 9vw, 126px) 0 clamp(52px, 7vw, 86px);
    overflow: hidden;
    border-radius: clamp(30px, 4.5vw, 54px) clamp(30px, 4.5vw, 54px) 0 0;
    background:
        radial-gradient(1000px 700px at 82% -8%, rgba(66, 133, 244, 0.28), transparent 62%),
        radial-gradient(900px 700px at 6% 110%, rgba(52, 168, 83, 0.18), transparent 64%),
        radial-gradient(700px 520px at 96% 92%, rgba(234, 67, 53, 0.1), transparent 60%),
        linear-gradient(150deg, #0a0e14 0%, #0e131b 48%, #0a0e14 100%);
    color: #f4f5f7;
    isolation: isolate;
}

.studio::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.22;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 0.7px, transparent 0.7px);
    background-size: 22px 22px;
    mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 78%);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 78%);
}

.studio .shell {
    position: relative;
    z-index: 2;
}

.studio-glow {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.studio-glow-a {
    top: -20%;
    right: -8%;
    width: 44vw;
    height: 44vw;
    max-width: 600px;
    max-height: 600px;
    background: rgba(37, 99, 235, 0.18);
}

.studio-glow-b {
    bottom: -22%;
    left: -10%;
    width: 34vw;
    height: 34vw;
    max-width: 480px;
    max-height: 480px;
    background: rgba(37, 99, 235, 0.09);
}

.studio-head h2 {
    color: #f6f7f8;
}

.studio-head .section-lead {
    color: rgba(255, 255, 255, 0.72);
}

.studio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 14px;
    align-items: stretch;
}

.studio-panel,
.result-panel {
    border-radius: clamp(24px, 3vw, 32px);
}

.studio-panel::before,
.result-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: var(--google-spectrum);
    opacity: 0.9;
    pointer-events: none;
    z-index: 2;
}

.studio-panel {
    padding: clamp(18px, 2.4vw, 28px);
}

.tool-tabs {
    display: flex;
    gap: 3px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.24);
}

.tool-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11.5px;
    font-weight: 560;
    line-height: 1;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.tool-tab:hover {
    color: rgba(255, 255, 255, 0.92);
}

.tool-tab.is-active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.pro-pill {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.14);
    color: var(--lime);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.tool-panel {
    padding-top: 22px;
}

.studio .field-label {
    color: rgba(255, 255, 255, 0.84);
    font-size: 11px;
}

.tool-input-wrap {
    position: relative;
}

.tool-input {
    width: 100%;
    height: 52px;
    padding: 0 54px 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.27);
    color: #f6f7f9;
    font-size: 12.5px;
    letter-spacing: -0.005em;
    outline: 0;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.tool-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.tool-input:focus {
    border-color: rgba(37, 99, 235, 0.52);
    background: rgba(0, 0, 0, 0.33);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.06);
}

.input-action {
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    display: grid;
    place-items: center;
    width: 40px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.input-action:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.input-action-wide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    padding: 0 12px;
    font-size: 10.5px;
    font-weight: 620;
    white-space: nowrap;
}

.input-action:disabled {
    opacity: 0.55;
    cursor: wait;
}

#business-input,
#api-key-input {
    padding-right: 100px;
}

.studio .field-hint {
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
}

.studio .field-hint code {
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-mono);
    font-size: 9px;
}

.tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.tool-actions .btn {
    min-height: 44px;
    padding: 0 17px;
    font-size: 12px;
}

.tool-actions .btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.tool-message {
    overflow: hidden;
    max-height: 0;
    margin-top: 0;
    border: 1px solid transparent;
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11.5px;
    line-height: 1.55;
    opacity: 0;
    transition: max-height 0.35s var(--ease-out), margin 0.35s ease, padding 0.35s ease, opacity 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.tool-message.is-visible {
    max-height: 220px;
    margin-top: 13px;
    padding: 10px 12px;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    opacity: 1;
}

.tool-message.is-error {
    border-color: rgba(234, 67, 53, 0.28);
    background: rgba(234, 67, 53, 0.1);
    color: var(--g-red-light);
}

.tool-message.is-ok {
    border-color: rgba(52, 168, 83, 0.28);
    background: rgba(52, 168, 83, 0.09);
    color: #c8f0d2;
}

.tool-message a {
    color: var(--lime);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tool-message .message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.tool-message .message-actions button,
.tool-message .message-actions a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: #f1f2f4;
    font-size: 10px;
    font-weight: 550;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease;
}

.tool-message .message-actions button:hover,
.tool-message .message-actions a:hover {
    background: rgba(255, 255, 255, 0.12);
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 248px;
    margin-top: 12px;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.search-results.has-results {
    opacity: 1;
}

.search-results:empty {
    display: none;
}

.place-result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    color: #f1f2f4;
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.place-result:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

.place-result strong {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.place-result span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    line-height: 1.45;
}

.pro-details {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.pro-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 10.5px;
    font-weight: 550;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.pro-details summary::-webkit-details-marker {
    display: none;
}

.pro-details summary:hover {
    color: rgba(255, 255, 255, 0.9);
}

.pro-details[open] summary {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.88);
}

.pro-body p {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 10.5px;
    line-height: 1.6;
}

.pro-body p strong {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 600;
}

.pro-body .field-label {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
}

.pro-body .tool-input {
    height: 44px;
    font-size: 11px;
}

.pro-body .input-action-wide {
    font-size: 9.5px;
}

.pro-status {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 9.5px;
    line-height: 1.45;
}

.pro-status.is-connected {
    color: var(--g-green-light);
}

.pro-status.is-error {
    color: var(--g-red-light);
}

.link-button {
    margin-top: 6px;
    padding: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 9.5px;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-button:hover {
    color: rgba(255, 255, 255, 0.75);
}

.pro-body .micro-note {
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 9px;
}

.result-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 536px;
    padding: clamp(20px, 3vw, 30px);
}

.result-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 280px;
    text-align: center;
}

.qr-placeholder {
    position: relative;
    display: grid;
    place-items: center;
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.025);
}

.qr-placeholder svg {
    width: 104px;
    height: 104px;
    fill: rgba(255, 255, 255, 0.2);
    stroke: none;
}

.qr-scanline {
    position: absolute;
    top: 12%;
    left: 14%;
    width: 72%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(66, 133, 244, 0.8), transparent);
    box-shadow: 0 0 10px rgba(66, 133, 244, 0.4);
    animation: scanline 3.4s ease-in-out infinite;
}

.result-placeholder-title {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.result-placeholder-copy {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10.5px;
    line-height: 1.6;
}

.result-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    animation: contentFade 0.4s var(--ease-out);
}

.result-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 13px;
}

.result-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--g-green-light);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.result-badge .icon {
    font-size: 12px;
}

.result-reset {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    transition: background 0.2s ease, color 0.2s ease;
}

.result-reset:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.qr-frame {
    display: grid;
    place-items: center;
    width: min(230px, 80%);
    aspect-ratio: 1;
    padding: 10px;
    border-radius: 18px;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--google-spectrum) border-box;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 24px 55px -28px rgba(26, 115, 232, 0.4);
}

.qr-frame canvas {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.qr-caption {
    max-width: 100%;
    margin: 13px 0 11px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12.5px;
    font-weight: 550;
    letter-spacing: -0.01em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: 100%;
    margin: 0 0 8px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.result-mode[hidden] {
    display: none;
}

.result-mode-btn {
    min-height: 29px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.68);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.result-mode-btn:hover {
    color: rgba(255, 255, 255, 0.72);
}

.result-mode-btn.is-active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.result-mode-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 1px;
}


.result-link-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}

.result-link {
    width: 100%;
    height: 42px;
    padding: 0 46px 0 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.24);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-mono);
    font-size: 9.5px;
    outline: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-link:focus {
    border-color: rgba(37, 99, 235, 0.4);
}

.copy-button {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    display: grid;
    place-items: center;
    width: 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    transition: background 0.2s ease, color 0.2s ease;
}

.copy-button:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.result-actions .btn {
    flex: 1;
    min-width: 108px;
    padding: 0 10px;
    font-size: 10px;
}

.result-note {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 9.5px;
    line-height: 1.5;
    text-align: center;
}

.studio-guide {
    display: grid;
    grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
    gap: clamp(26px, 5vw, 64px);
    margin-top: clamp(30px, 4vw, 48px);
    padding-top: clamp(28px, 3.6vw, 40px);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.guide-head .eyebrow-mini {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.68);
}

.guide-head h3 {
    max-width: 14ch;
    color: #f5f6f7;
    font-size: clamp(1.4rem, 2.3vw, 2.05rem);
    font-weight: 630;
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.guide-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}

.guide-steps li {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 17px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-num {
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
}

.guide-steps h4 {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

.guide-steps p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10.5px;
    line-height: 1.6;
}

.guide-steps a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    color: var(--lime);
    font-size: 9.5px;
    font-weight: 550;
    line-height: 1.3;
}

.guide-steps a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.guide-steps a .icon {
    font-size: 11px;
}

.studio-disclaimer {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(26px, 3.4vw, 40px);
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.64);
    font-size: 8.5px;
    line-height: 1.55;
}

.studio-disclaimer span {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    max-width: 52ch;
}

.studio-disclaimer .icon {
    margin-top: 1px;
    font-size: 10px;
}

/* ---------- beneficios ---------- */

.bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 218px;
    padding: clamp(21px, 2.4vw, 28px);
    overflow: hidden;
    border-radius: clamp(22px, 2.6vw, 28px);
    transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease, border-color 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        0 32px 64px -40px rgba(16, 19, 24, 0.42);
}

.bento-card:nth-child(1) {
    grid-column: span 6;
}

.bento-card:nth-child(2) {
    grid-column: span 3;
}

.bento-card:nth-child(3) {
    grid-column: span 3;
}

.bento-card:nth-child(4),
.bento-card:nth-child(5),
.bento-card:nth-child(6) {
    grid-column: span 4;
}

.bento-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 17px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.09);
    color: var(--jade);
    font-size: 19px;
}

.bento-card h3 {
    margin-bottom: 7px;
    color: var(--ink);
    font-size: clamp(1.15rem, 1.5vw, 1.34rem);
    font-weight: 640;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.bento-card p {
    max-width: 44ch;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.62;
}

.bento-wide {
    min-height: 300px;
    padding-right: 40%;
    background:
        radial-gradient(70% 100% at 100% 100%, rgba(219, 231, 255, 0.62), transparent 62%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.36));
}

.bento-wide h3 {
    max-width: 14ch;
    margin-bottom: 10px;
    font-size: clamp(1.7rem, 2.7vw, 2.35rem);
    line-height: 1.04;
}

.bento-wide p {
    max-width: 38ch;
}

.bento-visual {
    position: absolute;
    right: 18px;
    bottom: 14px;
    width: 37%;
    height: 220px;
    pointer-events: none;
}

.mini-card-demo {
    position: absolute;
    top: 30px;
    left: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 170px;
    aspect-ratio: 1.586 / 1;
    padding: 10px;
    border-radius: 12px;
    background: radial-gradient(130% 150% at 20% 0%, #36383b 0%, #191a1c 48%, #08090a 100%);
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 20px 30px -18px rgba(5, 12, 8, 0.55);
    transform: rotate(-13deg);
}

.mini-chip {
    width: 28px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(135deg, #e7eef9, #c2a05a);
}

.mini-waves {
    position: absolute;
    right: 12px;
    bottom: 9px;
    color: rgba(255, 255, 255, 0.34);
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: -0.16em;
}

.bento-arrow {
    position: absolute;
    top: 54px;
    left: 53%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(16, 19, 24, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    color: var(--jade);
    font-size: 15px;
    transform: rotate(25deg);
}

.mini-phone-demo {
    position: absolute;
    top: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 90px;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(238, 243, 236, 0.7));
    box-shadow: 0 24px 34px -24px rgba(16, 19, 24, 0.35);
    transform: rotate(7deg);
}

.mini-stars {
    color: #d9a62f;
    font-size: 8px;
    letter-spacing: 0.08em;
}

.mini-check {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--jade);
    color: #fff;
    font-size: 11px;
}

.bento-card:nth-child(2) {
    background:
        radial-gradient(90% 90% at 30% 0%, rgba(37, 99, 235, 0.5), transparent 62%),
        linear-gradient(150deg, #17191e, #173163);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 28px 60px -40px rgba(0, 0, 0, 0.6);
}

.bento-card:nth-child(2):hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.bento-stat {
    margin-bottom: 13px;
    color: var(--lime);
    font-family: var(--font-mono);
    font-size: clamp(2.6rem, 3.6vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.08em;
    line-height: 0.9;
}

.bento-stat span {
    margin-left: 4px;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.bento-card:nth-child(2) h3 {
    color: #f5f6f7;
}

.bento-card:nth-child(2) p {
    color: rgba(255, 255, 255, 0.68);
}

.bento-accent {
    background:
        radial-gradient(80% 100% at 90% 100%, rgba(37, 99, 235, 0.15), transparent 62%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.66), rgba(219, 231, 255, 0.5));
}

.bento-seal {
    position: absolute;
    right: 20px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border: 1px dashed rgba(37, 99, 235, 0.38);
    border-radius: 50%;
    color: rgba(37, 99, 235, 0.62);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-align: center;
    transform: rotate(-12deg);
}

.swatch-row {
    display: flex;
    gap: 5px;
    margin-top: auto;
    padding-top: 18px;
}

.swatch-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--s);
    box-shadow: inset 0 0 0 1px rgba(16, 19, 24, 0.12);
}

/* ---------- FAQ ---------- */

.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(34px, 6vw, 92px);
    align-items: start;
}

.faq-head {
    position: sticky;
    top: 120px;
}

.faq-head h2 {
    max-width: 12ch;
    margin-bottom: 18px;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    font-weight: 640;
    letter-spacing: -0.048em;
    line-height: 1.02;
}

.faq-head .section-lead {
    margin-bottom: 24px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    overflow: hidden;
    border-radius: 17px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.96);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 19px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 590;
    letter-spacing: -0.012em;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-toggle {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex: none;
    border: 1px solid rgba(16, 19, 24, 0.09);
    border-radius: 50%;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.35s var(--ease-out), background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.faq-item[open] .faq-toggle {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--lime);
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 52px 19px 19px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.68;
    animation: faqIn 0.3s var(--ease-out);
}

/* ---------- contacto ---------- */

.contact {
    padding-top: clamp(30px, 5vw, 62px);
    padding-bottom: clamp(64px, 8vw, 100px);
}

.contact-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(28px, 5vw, 66px);
    align-items: center;
    padding: clamp(26px, 5vw, 58px);
    overflow: hidden;
    border-radius: clamp(28px, 4vw, 44px);
    background:
        radial-gradient(80% 120% at 96% 0%, rgba(66, 133, 244, 0.14), transparent 58%),
        radial-gradient(70% 100% at 0% 100%, rgba(251, 188, 5, 0.1), transparent 62%),
        linear-gradient(140deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.42));
}

.contact-panel::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -50px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(66, 133, 244, 0.16);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px rgba(66, 133, 244, 0.025),
        0 0 0 56px rgba(66, 133, 244, 0.02);
    pointer-events: none;
}

.contact-copy {
    position: relative;
    z-index: 1;
}

.contact-copy h2 {
    max-width: 13ch;
    margin-bottom: 16px;
    font-size: clamp(2.1rem, 4.2vw, 3.55rem);
    font-weight: 640;
    letter-spacing: -0.05em;
    line-height: 1.01;
}

.contact-copy>p:not(.eyebrow):not(.micro-note) {
    max-width: 42ch;
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 19px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.44);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.info-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 3px;
    border-bottom: 1px solid rgba(16, 19, 24, 0.06);
}

.info-row:last-of-type {
    border-bottom: 0;
}

.info-icon {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    flex: none;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--jade);
    font-size: 16px;
}

.info-row>div {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.info-row>div span {
    color: var(--muted-2);
    font-size: 8px;
    font-weight: 620;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.info-row>div strong {
    color: var(--ink);
    font-size: 11.5px;
    font-weight: 590;
}

.contact-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding-top: 13px;
    border-top: 1px solid rgba(16, 19, 24, 0.06);
    color: var(--muted-2);
    font-size: 9.5px;
}

/* ---------- footer ---------- */

.footer {
    position: relative;
    margin-top: clamp(20px, 3vw, 32px);
    padding: clamp(52px, 6vw, 76px) 0 26px;
    border-radius: clamp(30px, 4.5vw, 54px) clamp(30px, 4.5vw, 54px) 0 0;
    background:
        radial-gradient(700px 420px at 94% 0%, rgba(66, 133, 244, 0.2), transparent 65%),
        radial-gradient(600px 420px at 0% 100%, rgba(234, 67, 53, 0.1), transparent 62%),
        linear-gradient(150deg, #0a0e14, #0e131b);
    color: rgba(255, 255, 255, 0.62);
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(260px, 42%);
    height: 3px;
    background: linear-gradient(90deg, var(--peru-red) 0 33.33%, #fff 33.33% 66.66%, var(--peru-red) 66.66% 100%);
    border-radius: 0 0 999px 999px;
    transform: translateX(-50%);
    opacity: 0.95;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(30px, 5vw, 70px);
    padding-bottom: 46px;
}

.brand-footer .brand-word {
    color: #f3f4f7;
}

.brand-footer .brand-word span {
    color: var(--peru-red-light);
}

.brand-footer .brand-mark {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.footer-brand p {
    max-width: 34ch;
    margin: 19px 0 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11.5px;
    line-height: 1.7;
}

.footer-mail {
    color: var(--lime);
    font-size: 12px;
    font-weight: 550;
    text-decoration: underline;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    text-underline-offset: 4px;
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.footer-title {
    display: block;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 8.5px;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-links a {
    display: block;
    width: fit-content;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #fff;
}

.footer-note {
    align-self: start;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-badge .live-dot {
    background: var(--g-green-light);
}

.footer-note p {
    max-width: 30ch;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 9.5px;
    line-height: 1.65;
}

.footer-bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding-top: 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.64);
    font-size: 8.5px;
    line-height: 1.6;
}

.footer-bottom span:first-child::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-right: 7px;
    border-radius: 1.5px;
    background: linear-gradient(90deg, var(--peru-red) 0 33.33%, #fff 33.33% 66.66%, var(--peru-red) 66.66% 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
    vertical-align: 0;
}

.footer-bottom span:last-child {
    max-width: 52ch;
    text-align: right;
}

/* ---------- diálogos y hojas ---------- */

dialog {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text);
}

dialog::backdrop {
    background: rgba(16, 19, 24, 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
}

.dialog-close {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    flex: none;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    color: var(--muted);
    font-size: 16px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dialog-close:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    transform: rotate(4deg);
}

.sheet-dialog {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(460px, 100%);
    max-width: 460px;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
}

.sheet-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, 0.72);
    background:
        radial-gradient(90% 50% at 100% 0%, rgba(219, 231, 255, 0.8), transparent 60%),
        rgba(247, 248, 244, 0.93);
    box-shadow: -34px 0 90px -50px rgba(16, 19, 24, 0.6);
    -webkit-backdrop-filter: blur(32px) saturate(150%);
    backdrop-filter: blur(32px) saturate(150%);
    animation: sheetIn 0.45s var(--ease-out);
}

.sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 26px 19px;
    border-bottom: 1px solid rgba(16, 19, 24, 0.07);
}

.sheet-head h2 {
    margin-top: 3px;
    color: var(--ink);
    font-size: 25px;
    font-weight: 640;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.sheet-head .eyebrow-mini {
    color: var(--jade);
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 26px;
}

.selection-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 48vh;
    text-align: center;
}

.empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    color: var(--jade);
    font-size: 24px;
}

.selection-empty h3 {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 620;
    letter-spacing: -0.03em;
}

.selection-empty p {
    max-width: 28ch;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.6;
}

.selection-list {
    display: flex;
    flex-direction: column;
}

.selection-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(16, 19, 24, 0.07);
}

.selection-item:first-child {
    padding-top: 4px;
}

.item-main {
    min-width: 0;
}

.item-name {
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

.item-detail {
    margin-bottom: 4px;
    color: var(--muted-2);
    font-size: 9.5px;
    line-height: 1.45;
}

.item-price {
    color: var(--jade);
    font-family: var(--font-mono);
    font-size: 10px;
}

.item-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.item-qty {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
}

.item-qty button {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: var(--muted);
    font-size: 12px;
    transition: background 0.2s ease, color 0.2s ease;
}

.item-qty button:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
}

.item-qty span {
    min-width: 19px;
    color: var(--ink);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: center;
}

.item-remove {
    color: var(--muted-2);
    font-size: 9px;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.item-remove:hover {
    color: #a24636;
}

.sheet-foot {
    padding: 18px 26px 25px;
    border-top: 1px solid rgba(16, 19, 24, 0.08);
    background: rgba(255, 255, 255, 0.3);
}

.selection-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 6px;
}

.selection-total span {
    color: var(--muted);
    font-size: 10.5px;
}

.selection-total strong {
    color: var(--ink);
    font-size: 25px;
    font-weight: 650;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.sheet-foot .micro-note {
    margin-bottom: 13px;
    font-size: 9px;
}

.sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.sheet-actions .btn {
    min-height: 44px;
    padding: 0 10px;
    font-size: 10.5px;
}

.sheet-copy-status {
    min-height: 14px;
    margin-top: 8px;
    color: var(--jade);
    font-size: 9.5px;
    line-height: 1.45;
}

.sheet-copy-status.is-error {
    color: #a24636;
}

.product-dialog {
    width: min(940px, calc(100vw - 32px));
    max-width: 940px;
    max-height: calc(100dvh - 32px);
    border-radius: 32px;
}

.product-dialog-card {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background: rgba(247, 248, 244, 0.96);
    animation: dialogIn 0.4s var(--ease-out);
}

.product-dialog-card>.dialog-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
}

.product-dialog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 520px;
}

.pd-art {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 38px;
    background:
        radial-gradient(80% 80% at 70% 16%, rgba(255, 255, 255, 0.95), transparent 60%),
        linear-gradient(150deg, #e7e9ec, #f2f0e9 56%, #e1e3e6);
}

.pd-art::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image: radial-gradient(rgba(16, 19, 24, 0.16) 0.7px, transparent 0.7px);
    background-size: 18px 18px;
    mask-image: radial-gradient(circle at 50% 45%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000, transparent 72%);
}

.pd-art .nfc-card {
    position: relative;
    z-index: 1;
    width: min(82%, 360px);
    font-size: 10px;
    transform: rotate(-6deg);
    box-shadow: 0 34px 54px -28px rgba(16, 19, 24, 0.45);
}

.pd-art .product-sticker {
    z-index: 1;
    width: 190px;
    height: 190px;
}

.pd-art .product-stand {
    z-index: 1;
}

.pd-info {
    display: flex;
    flex-direction: column;
    padding: 46px 38px 34px;
}

.pd-category {
    margin-bottom: 9px;
    color: var(--jade);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pd-info h2 {
    margin-bottom: 10px;
    color: var(--ink);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 640;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.pd-tagline {
    margin-bottom: 13px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.pd-desc {
    margin-bottom: 19px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.pd-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

.pd-specs span {
    padding: 5px 8px;
    border: 1px solid rgba(16, 19, 24, 0.08);
    border-radius: 999px;
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: 8px;
}

.pd-includes {
    margin-bottom: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(16, 19, 24, 0.08);
}

.pd-includes-title {
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pd-includes li {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.5;
}

.pd-includes li::before {
    content: "";
    width: 4px;
    height: 4px;
    flex: none;
    border-radius: 50%;
    background: var(--jade);
}

.pd-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(16, 19, 24, 0.08);
}

.pd-price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.pd-price span {
    margin-bottom: 3px;
    color: var(--muted-2);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pd-price strong {
    color: var(--ink);
    font-size: 27px;
    font-weight: 650;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.pd-bottom .btn {
    min-height: 44px;
    padding: 0 17px;
    font-size: 11px;
}

.pd-note {
    margin-top: 12px;
    color: var(--muted-2);
    font-size: 9px;
    line-height: 1.5;
}

.menu-dialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    background: transparent;
}

.menu-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 18px 20px 24px;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(80% 50% at 90% 0%, rgba(219, 231, 255, 0.9), transparent 60%),
        rgba(245, 247, 242, 0.96);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    animation: menuIn 0.35s var(--ease-out);
    overflow-y: auto;
}

.menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0 20px;
}

.menu-links {
    display: flex;
    flex-direction: column;
    padding: 7px 0 18px;
}

.menu-links a {
    display: flex;
    align-items: baseline;
    gap: 15px;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(16, 19, 24, 0.07);
    color: var(--ink);
    font-size: clamp(1.35rem, 6vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.2;
}

.menu-links a span {
    color: var(--jade);
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.menu-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
}

.menu-foot .btn {
    width: 100%;
}

.menu-mail {
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- toast ---------- */

.toast {
    position: fixed;
    bottom: 22px;
    left: 50%;
    z-index: 250;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: calc(100vw - 32px);
    padding: 11px 16px 11px 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(16, 19, 24, 0.94);
    color: #f3f4f7;
    font-size: 11.5px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 18px) scale(0.97);
    transition: opacity 0.3s ease, transform 0.35s var(--ease-spring);
    box-shadow: 0 24px 50px -24px rgba(4, 12, 8, 0.7);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.toast-icon {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: none;
    border-radius: 50%;
    background: var(--lime);
    color: var(--ink);
    font-size: 12px;
}

/* ---------- animaciones ---------- */

@keyframes drift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(3%, 4%, 0) scale(1.06);
    }
}

@keyframes floatChip {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes softPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.05);
    }
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }

    70% {
        box-shadow: 0 0 0 5px rgba(37, 99, 235, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

@keyframes nfcRipple {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }

    20% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3.1);
    }
}

@keyframes successPop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scanline {

    0%,
    100% {
        top: 12%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        top: 84%;
        opacity: 1;
    }

    85% {
        opacity: 0;
    }
}

@keyframes sheetIn {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes dialogIn {
    from {
        transform: translateY(18px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes menuIn {
    from {
        transform: translateY(-14px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes faqIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contentFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
    .nav-link {
        padding-inline: 8px;
        font-size: 11px;
    }

    .hero-title {
        font-size: clamp(2.8rem, 6vw, 4.6rem);
    }

    .float-chip {
        transform: scale(0.92);
        transform-origin: center;
    }

    .bento-wide {
        padding-right: 42%;
    }
}

@media (max-width: 1024px) {
    .nav-links {
        display: none;
    }

    .menu-trigger {
        display: flex;
    }

    .header-inner {
        justify-content: space-between;
    }

    .hero {
        min-height: auto;
        padding-top: 132px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .hero-copy {
        max-width: 680px;
    }

    .hero-title {
        max-width: 13ch;
        font-size: clamp(3rem, 8vw, 5rem);
    }

    .hero-visual {
        max-width: 540px;
        margin-top: 8px;
    }

    .hero-stage {
        aspect-ratio: 1.08 / 1;
    }

    .hero-scroll {
        display: none;
    }

    .section-head,
    .section-head.compact {
        grid-template-columns: 1fr;
        gap: 20px;
        align-items: start;
    }

    .section-head h2 {
        max-width: 15ch;
    }

    .section-lead {
        max-width: 58ch;
    }

    .how-panel {
        grid-template-columns: 1fr;
    }

    .demo-wrap {
        min-height: 620px;
    }

    .how-copy {
        padding: 6px 14px 14px;
    }

    .anatomy {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .anatomy-card-wrap {
        max-width: 480px;
    }

    .anatomy-copy {
        max-width: 560px;
        padding: 0 8px 8px;
    }

    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-card,
    .product-card.product-cta {
        min-height: 440px;
    }

    .config-grid {
        grid-template-columns: 1fr;
    }

    .config-stage {
        min-height: 520px;
    }

    .studio-grid {
        grid-template-columns: 1fr;
    }

    .result-panel {
        min-height: 500px;
    }

    .studio-guide {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .guide-head h3 {
        max-width: none;
    }

    .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bento-card:nth-child(n) {
        grid-column: span 1;
    }

    .bento-card:nth-child(1) {
        grid-column: span 2;
    }

    .bento-card:nth-child(6) {
        grid-column: span 2;
    }


    .bento-wide {
        padding-right: 40%;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .faq-head {
        position: static;
        max-width: 600px;
    }

    .faq-head .section-lead {
        max-width: 50ch;
    }

    .contact-panel {
        grid-template-columns: 1fr;
    }

    .contact-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 22px;
        max-width: none;
    }

    .contact-note {
        grid-column: 1 / -1;
    }

    .footer-grid {
        grid-template-columns: 1.1fr 1fr;
    }

    .footer-note {
        grid-column: span 2;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
    }

    .footer-note p {
        margin-top: 0;
        text-align: right;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }

    .footer-bottom span:last-child {
        text-align: left;
    }
}

@media (min-width: 821px) and (max-width: 1024px) {
    .hero {
        min-height: auto;
        padding-top: 128px;
        padding-bottom: 48px;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: 18px;
    }

    .hero-copy {
        max-width: none;
    }

    .hero-title {
        max-width: 12ch;
        margin-bottom: 21px;
        font-size: clamp(2.75rem, 5.6vw, 4.15rem);
    }

    .hero-sub {
        max-width: 42ch;
        margin-bottom: 23px;
        font-size: 0.94rem;
        line-height: 1.65;
    }

    .hero-actions .btn {
        min-height: 48px;
        padding: 0 17px;
        font-size: 12px;
    }

    .hero-trust {
        gap: 9px 13px;
        margin-top: 22px;
        font-size: 9.5px;
    }

    .hero-visual {
        max-width: 430px;
        margin-top: 0;
    }

    .hero-stage {
        aspect-ratio: 1 / 1;
    }

    .hero-card {
        width: 84%;
    }

    .hero-card .nfc-card {
        font-size: 8.4px;
    }

    .float-chip {
        transform: scale(0.78);
    }

    .chip-rating {
        top: 1%;
        right: -4%;
    }

    .chip-tap {
        top: 48%;
        left: -7%;
    }

    .chip-ship {
        right: -4%;
        bottom: 1%;
    }
}


@media (max-width: 760px) {
    html {
        scroll-padding-top: 92px;
    }

    .site-header {
        top: 10px;
    }

    .header-inner {
        padding: 7px 8px 7px 12px;
        gap: 9px;
    }

    .selection-label {
        display: none;
    }

    .selection-trigger {
        padding: 0 8px;
    }

    .brand-mark {
        width: 33px;
        height: 33px;
        border-radius: 10px;
    }

    .brand-mark svg {
        width: 24px;
        height: 24px;
    }

    .brand-word {
        font-size: 13px;
    }

    .hero {
        padding-top: 116px;
        padding-bottom: 42px;
    }

    .hero-sub {
        max-width: 46ch;
        font-size: 0.96rem;
    }

    .hero-actions {
        gap: 8px;
    }

    .hero-actions .btn {
        min-height: 48px;
        padding: 0 17px;
        font-size: 12px;
    }

    .hero-trust {
        gap: 10px 14px;
        margin-top: 24px;
        font-size: 10.5px;
    }

    .hero-visual {
        max-width: 430px;
    }

    .hero-stage {
        aspect-ratio: 1.14 / 1;
    }

    .hero-card {
        width: min(81%, 330px);
    }

    .hero-card .nfc-card {
        font-size: 8.3px;
    }

    .float-chip {
        transform: scale(0.84);
    }

    .chip-rating {
        top: 3%;
        right: -4%;
    }

    .chip-tap {
        top: 47%;
        left: -6%;
    }

    .chip-ship {
        right: -3%;
        bottom: 3%;
    }

    .section {
        padding-block: 68px;
    }

    .section-head {
        margin-bottom: 28px;
    }

    .section-head h2 {
        font-size: clamp(2rem, 8.2vw, 2.8rem);
    }

    .section-lead {
        font-size: 13px;
    }

    .eyebrow {
        margin-bottom: 16px;
        font-size: 9.5px;
    }

    .how-panel {
        padding: 9px;
        border-radius: 27px;
    }

    .demo-wrap {
        min-height: 574px;
        padding: 20px 12px 84px;
        border-radius: 21px;
    }

    .phone {
        width: clamp(218px, 62vw, 250px);
        height: clamp(448px, 127vw, 510px);
    }

    .demo-card {
        bottom: 118px;
        left: 0;
        width: min(196px, 46%);
    }

    .demo-card .nfc-card {
        font-size: 7.2px;
    }

    .tap-button {
        bottom: 39px;
        min-height: 44px;
        padding: 0 17px;
        font-size: 11.5px;
    }

    .demo-caption {
        bottom: 12px;
        font-size: 8px;
    }

    .how-copy {
        padding: 2px 9px 10px;
    }

    .step {
        grid-template-columns: 37px minmax(0, 1fr);
        gap: 10px;
        padding: 20px 0;
    }

    .step h3 {
        font-size: 1.02rem;
    }

    .step p {
        font-size: 12px;
    }

    .step-number {
        font-size: 9px;
    }

    .compat {
        padding: 13px;
    }

    .anatomy-block {
        margin-top: 54px;
    }

    .anatomy {
        padding: 19px;
    }

    .anatomy-visual {
        padding: 2px;
    }

    .anatomy-card-wrap {
        padding: 27px 4px;
    }

    .anatomy-card {
        font-size: 8.4px;
    }

    .hotspot {
        padding: 6px 8px;
        font-size: 8px;
        gap: 4px;
    }

    .hotspot span {
        width: 13px;
        height: 13px;
        font-size: 6px;
    }

    .hotspot-chip {
        top: 43%;
        right: auto;
        left: -2%;
    }

    .hotspot-antenna {
        top: 18%;
        right: -2%;
        bottom: auto;
        left: auto;
    }

    .hotspot-body {
        top: 1%;
        left: 0;
    }

    .hotspot-engrave {
        right: auto;
        bottom: 3%;
        left: 2%;
    }

    .anatomy-copy h3 {
        font-size: 1.75rem;
    }

    .anatomy-copy>p {
        font-size: 12.5px;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .product-card,
    .product-card.product-cta {
        min-height: auto;
    }

    .product-art {
        height: 226px;
    }

    .product-card.product-cta {
        min-height: 260px;
    }

    .product-name {
        font-size: 1.4rem;
    }

    .config-stage {
        min-height: 450px;
        padding: 14px;
    }

    .config-3d {
        min-height: 300px;
        padding: 8px;
    }

    .config-card {
        width: 92%;
        font-size: 9px;
    }

    .config-stage-head {
        font-size: 8px;
    }

    .stage-hint {
        font-size: 8px;
    }

    .stage-tip {
        display: none;
    }

    .config-panel {
        padding: 20px;
        gap: 20px;
    }

    .swatches {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .swatch-text strong {
        font-size: 9px;
    }

    .config-qty-row {
        align-items: flex-end;
    }

    .price-line.total strong {
        font-size: 20px;
    }

    .studio {
        border-radius: 30px 30px 0 0;
        padding-top: 64px;
    }

    .studio-panel {
        padding: 14px;
    }

    .tool-tab {
        font-size: 10px;
        padding: 0 6px;
    }

    .tool-actions {
        gap: 6px;
    }

    .tool-actions .btn {
        flex: 1;
        padding: 0 10px;
        font-size: 10.5px;
    }

    .tool-input {
        height: 48px;
        font-size: 11.5px;
    }

    .result-panel {
        min-height: 470px;
        padding: 18px;
    }

    .result-content {
        max-width: 330px;
    }

    .qr-frame {
        width: min(210px, 74%);
    }

    .studio-guide {
        margin-top: 30px;
        padding-top: 26px;
    }

    .guide-steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .guide-steps li {
        display: grid;
        grid-template-columns: 30px 1fr;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 15px;
    }

    .guide-steps li:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .studio-disclaimer {
        flex-direction: column;
        gap: 8px;
    }

    .bento {
        gap: 10px;
    }

    .bento-card:nth-child(n) {
        grid-column: span 2;
    }

    .bento-card {
        min-height: 200px;
        padding: 21px;
    }

    .bento-wide {
        min-height: 290px;
        padding-right: 21px;
    }

    .bento-visual {
        display: none;
    }

    .bento-card:nth-child(2) {
        min-height: 168px;
    }

    .bento-card:nth-child(3) {
        min-height: 195px;
    }

    .faq-head h2 {
        max-width: 14ch;
    }

    .faq-item summary {
        padding: 16px;
        font-size: 12px;
    }

    .faq-answer {
        padding: 0 46px 16px 16px;
        font-size: 11px;
    }

    .contact {
        padding-bottom: 64px;
    }

    .contact-panel {
        padding: 24px 18px;
        border-radius: 28px;
    }

    .contact-panel::before {
        display: none;
    }

    .contact-copy h2 {
        font-size: clamp(2rem, 9vw, 2.7rem);
    }

    .contact-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-actions .btn {
        width: 100%;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding: 15px;
    }

    .contact-note {
        grid-column: auto;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-bottom: 30px;
    }

    .footer-note {
        grid-column: auto;
        display: block;
    }

    .footer-note p {
        text-align: left;
    }

    .footer-links {
        gap: 18px;
    }

    .footer-bottom {
        gap: 7px;
    }

    .sheet-dialog {
        width: 100%;
        max-width: none;
    }

    .sheet-head {
        padding: 21px 19px 16px;
    }

    .sheet-body {
        padding: 14px 19px;
    }

    .sheet-foot {
        padding: 15px 19px 21px;
    }

    .sheet-actions {
        grid-template-columns: 1fr;
    }

    .product-dialog {
        width: calc(100vw - 18px);
        max-height: calc(100dvh - 18px);
        border-radius: 24px;
    }

    .product-dialog-card {
        border-radius: 24px;
        overflow-y: auto;
        max-height: calc(100dvh - 18px);
    }

    .product-dialog-grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .pd-art {
        min-height: 250px;
        padding: 30px 20px;
    }

    .pd-art .nfc-card {
        width: min(72%, 310px);
        font-size: 8.4px;
    }

    .pd-info {
        padding: 26px 20px 22px;
    }

    .pd-info h2 {
        font-size: 1.85rem;
    }

    .pd-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 13px;
    }

    .pd-bottom .btn {
        width: 100%;
    }

    .menu-panel {
        padding: 14px 18px 22px;
    }

    .menu-links a {
        font-size: 1.45rem;
        padding: 9px 2px;
    }

    .toast {
        bottom: 14px;
        font-size: 10.5px;
    }
}

@media (max-width: 420px) {
    .hero-title {
        font-size: clamp(2.55rem, 12vw, 3.2rem);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-visual {
        max-width: 360px;
    }

    .float-chip {
        transform: scale(0.74);
    }

    .chip-rating {
        right: -8%;
    }

    .chip-tap {
        left: -10%;
    }

    .chip-ship {
        right: -8%;
    }

    .swatches {
        grid-template-columns: 1fr;
    }

    .config-qty-row {
        flex-direction: column;
        align-items: stretch;
    }

    .config-price {
        align-items: flex-start;
        margin-left: 0;
    }

    .price-line {
        justify-content: space-between;
    }

    .result-actions {
        flex-direction: column;
    }

    .result-actions .btn {
        width: 100%;
    }

    .bento-card:nth-child(n) {
        grid-column: span 2;
    }

    .anatomy-meta {
        gap: 6px;
    }

    .anatomy-meta strong {
        font-size: 14px;
    }

    .demo-card {
        left: -12px;
        width: 170px;
    }

    .chip-ship {
        display: none;
    }
}

@media (max-height: 700px) {
    .menu-panel {
        padding-top: 10px;
    }

    .menu-head {
        padding-bottom: 8px;
    }

    .menu-links {
        padding: 2px 0 8px;
    }

    .menu-links a {
        padding: 7px 2px;
        font-size: 1.16rem;
    }

    .menu-foot {
        gap: 6px;
        padding-top: 10px;
    }

    .menu-foot .btn {
        min-height: 42px;
    }

    .menu-mail {
        margin-top: 2px;
    }
}


/* ---------- accesibilidad de movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .ticker-track {
        animation: none;
    }

    .ambient-blob,
    .float-chip {
        animation: none;
    }
}

@media (min-width: 761px) {
    .product-card.product-cta {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .product-card.product-cta {
        grid-column: auto;
    }
}


/* ============================================================
   Catálogo 2026 · precios, estados y curso
   ============================================================ */

.product-price {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 1px 6px;
    line-height: 1.1;
}

.product-price>span:first-child {
    flex-basis: 100%;
    margin-bottom: 1px;
    color: var(--muted-2);
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-price strong {
    order: 1;
    color: var(--ink);
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.price-was {
    order: 2;
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    font-variant-numeric: tabular-nums;
}

.product-price .price-off,
.pd-price .price-off {
    order: 3;
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--jade-deep);
    font-size: 8px;
    font-weight: 720;
    letter-spacing: 0.02em;
    margin: 0;
    text-transform: none;
}

.pd-price {
    flex-flow: row wrap;
    align-items: baseline;
    gap: 2px 7px;
}

.pd-price>span:first-child {
    flex-basis: 100%;
}

.pd-price strong {
    order: 1;
}

.pd-price .price-was {
    order: 2;
    font-size: 12px;
}

.pd-price .price-off {
    font-size: 9px;
}

.product-badge-out {
    background: rgba(16, 19, 24, 0.86);
    border-color: rgba(16, 19, 24, 0.9);
    color: #fff;
}

.product-badge-course {
    background: var(--jade);
    border-color: transparent;
    color: #fff;
}

.product-card.is-sold-out .product-art {
    filter: saturate(0.72);
}

.product-card.is-sold-out .product-name {
    color: var(--muted);
}

.product-card.is-course .product-art {
    background: #0c1017;
}

.product-card.is-course .product-art-index {
    color: rgba(255, 255, 255, 0.68);
}

.product-card.is-course .product-badge {
    box-shadow: 0 8px 20px -12px rgba(37, 99, 235, 0.7);
}

/* ---------- arte del curso ---------- */

.product-course {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: hidden;
    background:
        radial-gradient(120% 100% at 82% 0%, rgba(37, 99, 235, 0.34), transparent 58%),
        linear-gradient(145deg, #0c1017 0%, #111b2a 58%, #0b0e14 100%);
    color: #fff;
}

.product-course::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.62), transparent 66%);
    filter: blur(12px);
}

.product-course::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: radial-gradient(rgba(255, 255, 255, 0.32) 0.7px, transparent 0.7px);
    background-size: 15px 15px;
    mask-image: radial-gradient(circle at 24% 20%, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 24% 20%, #000, transparent 70%);
}

.course-topline {
    position: absolute;
    top: 44px;
    left: 20px;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-mono);
    font-size: 7.5px;
    letter-spacing: 0.13em;
}

.course-play {
    position: absolute;
    top: 48%;
    left: 26px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transform: translateY(-50%);
}

.course-play::after {
    content: "";
    margin-left: 3px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #fff;
}

.course-title {
    position: relative;
    z-index: 1;
    margin-bottom: 7px;
    font-size: 19px;
    font-weight: 640;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.course-meta {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-mono);
    font-size: 7.5px;
    letter-spacing: 0.06em;
}

.course-card {
    position: absolute;
    top: 38px;
    right: 22px;
    width: 104px;
    aspect-ratio: 1.58;
    border-radius: 9px;
    background:
        radial-gradient(100% 120% at 14% 0%, rgba(255, 255, 255, 0.88), transparent 58%),
        linear-gradient(135deg, #eef1f6, #c9cfd9 62%, #9aa3b1);
    box-shadow:
        0 18px 30px -18px rgba(0, 0, 0, 0.82),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: rotate(8deg);
    transition: transform 0.65s var(--ease-out);
}

.product-card:hover .course-card {
    transform: rotate(2deg) translateY(-4px);
}

.course-card-chip {
    position: absolute;
    top: 13px;
    left: 12px;
    width: 21px;
    height: 15px;
    border-radius: 3px;
    background: linear-gradient(135deg, #f4e3b2, #b1904d);
}

.course-card-waves {
    position: absolute;
    right: 13px;
    bottom: 13px;
    width: 19px;
    height: 14px;
    border-right: 1.5px solid rgba(16, 19, 24, 0.5);
    border-top: 1.5px solid rgba(16, 19, 24, 0.5);
    border-radius: 0 7px 0 0;
    transform: rotate(45deg);
}

/* ---------- guía de grabado NFC ---------- */

.studio-nfc {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(24px, 4vw, 48px);
    margin-top: clamp(28px, 4vw, 44px);
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.nfc-copy h3 {
    margin: 7px 0 9px;
    color: #f5f6f7;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 630;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.nfc-copy p {
    max-width: 42ch;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    line-height: 1.65;
}

.nfc-copy .btn {
    margin-top: 16px;
}

.nfc-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 22px);
}

.nfc-steps li {
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.nfc-steps strong {
    display: block;
    margin: 8px 0 4px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
}

.nfc-steps p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    line-height: 1.55;
}

/* ---------- contención horizontal en móvil ---------- */

html {
    overflow-x: clip;
}

@media (max-width: 560px) {
    .hero-card-a {
        --x: -34px !important;
        --y: 22px !important;
    }

    .hero-card-b {
        --x: 40px !important;
        --y: 42px !important;
    }

    .chip-rating {
        right: 0;
    }

    .chip-tap {
        left: 0;
    }

    .chip-ship {
        right: 0;
    }
}

@media (max-width: 900px) {
    .studio-nfc {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .nfc-steps {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .nfc-steps li {
        display: flex;
        gap: 12px;
        padding-left: 0;
        border-left: 0;
    }

    .nfc-steps li .guide-num {
        flex: none;
        width: 22px;
    }

    .nfc-steps strong {
        margin-top: 0;
    }

    .product-price strong {
        font-size: 20px;
    }
}

/* Google review product photography — transparent original assets. */
.nfc-card[class*="finish-"] {
    --review-art: url('assets/reviews/classic.png');
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--review-art) center / contain no-repeat;
    box-shadow: none;
    overflow: visible;
    filter: drop-shadow(0 18px 14px rgba(20, 28, 40, .16));
}

.nfc-card.finish-graphite {
    --review-art: url('assets/reviews/black.png');
}

.nfc-card.finish-pearl {
    --review-art: url('assets/reviews/white.png');
}

.nfc-card::before,
.nfc-card>.card-sheen,
.nfc-card>.card-head,
.nfc-card>.card-mid,
.nfc-card>.card-foot {
    display: none;
}

.hero-card {
    width: min(62%, 310px);
}

.hero-card .nfc-card {
    aspect-ratio: .85;
}

.hero-card-b .nfc-card {
    --review-art: url('assets/reviews/back.png');
}

.product-art .nfc-card,
.pd-art .nfc-card {
    height: 230px;
    width: 85%;
    aspect-ratio: auto;
}

.product-stand {
    width: 100%;
}

.product-stand .stand-base {
    display: none;
}

.pd-art .nfc-card {
    height: 300px;
}

.demo-card .nfc-card {
    aspect-ratio: .85;
}

.anatomy-card.nfc-card {
    --review-art: url('assets/reviews/classic.png');
    height: 330px;
}

.config-card.nfc-card {
    width: min(90%, 310px);
    height: 350px;
    aspect-ratio: auto;
}

.config-card.is-reversed {
    --review-art: url('assets/reviews/back.png');
}

.config-card>.card-foot {
    display: block;
    position: absolute;
    bottom: 3%;
    width: 100%;
    text-align: center;
}

.config-card .card-stars {
    display: none;
}

.config-card .card-engraving:not(:empty) {
    background: var(--surface, #fff);
    color: #17191c;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 10px;
}

.mini-card-demo,
.course-card {
    background: url('assets/reviews/classic.png') center / contain no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.mini-card-demo>*,
.course-card>* {
    visibility: hidden;
}

#review-side {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 7px 12px;
    background: transparent;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

#review-side[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .hero-card {
        width: min(62%, 255px);
    }

    .config-card.nfc-card {
        height: 310px;
    }
}

.product-art.art-card .nfc-card,
.pd-art>.nfc-card {
    --review-art: url('assets/reviews/classic.png');
}

/* Publication details */
.footer-bottom button {
    border: 0;
    padding: 0;
    color: inherit;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.footer-bottom a {
    color: inherit;
    text-decoration: underline;
}

.cookie-banner[hidden] {
    display: none !important;
}

.cookie-banner {
    position: fixed;
    z-index: 120;
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 20px;
    color: #1b2430;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 50px rgba(18, 30, 44, .22);
    backdrop-filter: blur(20px);
}

.cookie-banner strong {
    font-size: 15px;
}

.cookie-banner p {
    margin: 5px 0 0;
    max-width: 580px;
    line-height: 1.5;
    font-size: 13px;
}

.cookie-banner a {
    color: #165fae;
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-actions button {
    border: 1px solid #c8d2df;
    border-radius: 12px;
    padding: 10px 14px;
    background: white;
    color: #1b2430;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.cookie-actions #cookie-accept {
    border-color: #1b2430;
    background: #1b2430;
    color: white;
}

@media (max-width: 640px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .cookie-actions button {
        flex: 1;
    }
}

.cookie-banner {
    width: min(960px, calc(100% - 32px));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: 0;
}

@media (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ---------- fotos reales de productos y estado agotado ---------- */
.product-art.has-photo {
    background: #101318;
}

.product-art.has-photo::before {
    opacity: 0;
}

.product-photo-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    background: #101318;
}

.product-photo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(16, 19, 24, .06), transparent 40%, rgba(16, 19, 24, .28));
}

.product-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .75s var(--ease-out);
}

.product-card:hover .product-photo {
    transform: scale(1.035);
}

.product-photo-fallback {
    position: relative;
    z-index: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.product-photo-fallback[hidden] {
    display: none !important;
}

.product-art.has-photo .product-art-index {
    color: rgba(255, 255, 255, .78);
    text-shadow: 0 1px 5px rgba(0, 0, 0, .32);
}

.pd-art.has-photo {
    padding: 0;
    background: #101318;
}

.pd-art.has-photo::before {
    opacity: 0;
}

.pd-art.has-photo .product-photo-fallback {
    padding: 38px;
}

.pd-art.has-photo .product-badge {
    z-index: 3;
}

.product-card.is-sold-out .product-art {
    filter: saturate(.7);
}

.product-card.is-sold-out .product-price strong {
    color: var(--muted);
}

.pd-bottom .btn:disabled {
    border-color: rgba(16, 19, 24, .08);
    background: #d9dde3;
    color: #6c7480;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media (max-width: 640px) {

    .site-header .brand-logo,
    .menu-panel .brand-logo {
        height: 26px;
    }

    .brand-footer .brand-logo {
        height: 30px;
    }
}

/* ---------- galería del producto ---------- */

.pd-gallery {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 520px;
    padding: 18px;
    border-right: 1px solid rgba(16, 19, 24, 0.07);
    background:
        radial-gradient(80% 80% at 70% 8%, rgba(255, 255, 255, 0.95), transparent 60%),
        linear-gradient(150deg, #e7e9ec, #f2f0e9 56%, #e1e3e6);
}

.pd-gallery-stage {
    position: relative;
    flex: 1;
    min-height: 390px;
    overflow: hidden;
    border-radius: 22px;
    background: #101318;
    isolation: isolate;
    touch-action: pan-y;
}

.pd-gallery-track {
    position: absolute;
    inset: 0;
}

.pd-gallery-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 0.75s var(--ease-out), transform 0.9s var(--ease-out);
}

.pd-gallery-slide.is-active {
    z-index: 1;
    opacity: 1;
    transform: none;
}

.pd-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-gallery-stage::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 26%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(16, 19, 24, 0.42));
}

.pd-gallery .product-badge {
    top: 14px;
    left: 14px;
    z-index: 5;
}

.pd-gallery-counter {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 5;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(16, 19, 24, 0.42);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.08em;
    line-height: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.pd-gallery-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0 0 2px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.76);
    color: var(--ink);
    font-size: 23px;
    line-height: 1;
    transform: translateY(-50%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    transition: background 0.25s ease, transform 0.25s var(--ease-out);
}

.pd-gallery-arrow:hover {
    background: rgba(255, 255, 255, 0.95);
}

.pd-gallery-arrow.is-prev {
    left: 13px;
}

.pd-gallery-arrow.is-next {
    right: 13px;
}

.pd-gallery-arrow:active {
    transform: translateY(-50%) scale(0.94);
}

.pd-gallery-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
}

.pd-gallery-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    transform: scaleX(0);
    transform-origin: left;
    animation: pdGalleryProgress var(--gallery-ms, 5000ms) linear forwards;
}

.pd-gallery.is-paused .pd-gallery-progress span {
    animation-play-state: paused;
}

.pd-gallery.is-single .pd-gallery-counter,
.pd-gallery.is-single .pd-gallery-progress {
    display: none;
}

.pd-gallery-thumbs {
    display: flex;
    gap: 7px;
    padding: 10px 1px 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 19, 24, 0.22) transparent;
}

.pd-gallery-thumb {
    flex: 0 0 auto;
    width: 58px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #101318;
    opacity: 0.5;
    transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}

.pd-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-gallery-thumb:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

.pd-gallery-thumb.is-active {
    border-color: rgba(16, 19, 24, 0.82);
    opacity: 1;
}

.pd-gallery-hint {
    margin-top: 7px;
    color: var(--muted-2);
    font-size: 8px;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-align: center;
}

@keyframes pdGalleryProgress {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@media (max-width: 760px) {
    .pd-gallery {
        min-height: 0;
        padding: 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(16, 19, 24, 0.07);
    }

    .pd-gallery-stage {
        height: clamp(260px, 58vw, 380px);
        min-height: 0;
        flex: none;
        border-radius: 18px;
    }

    .pd-gallery-thumb {
        width: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-gallery-progress {
        display: none;
    }

    .pd-gallery-slide,
    .pd-gallery-thumb,
    .pd-gallery-arrow {
        transition: none;
    }
}

/* ================================================================
   TIENDA 2026-10 · letras más legibles, fotos cuadradas,
   precios por volumen y botón flotante de WhatsApp
   ================================================================ */

/* ---------- filtros ---------- */
.filters .filter {
    padding: 10px 18px;
    font-size: 14px;
}

/* ---------- tarjetas de producto ---------- */
.products-grid .product-card .product-art {
    height: auto;
    aspect-ratio: 1 / 1;
}

.products-grid .product-card .product-badge {
    font-size: 10.5px;
    padding: 6px 10px;
}

.products-grid .product-card .product-art-index {
    font-size: 11px;
}

.products-grid .product-cat {
    margin-bottom: 6px;
    font-size: 11.5px;
    letter-spacing: 0.1em;
}

.products-grid .product-name {
    margin-bottom: 8px;
    font-size: clamp(1.3rem, 1.55vw, 1.5rem);
    line-height: 1.15;
}

.products-grid .product-tagline {
    font-size: 14.5px;
    line-height: 1.5;
}

.products-grid .product-specs {
    gap: 6px;
    margin-bottom: 14px;
}

.products-grid .product-specs span {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--muted);
}

.product-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 14px;
    background: var(--jade-soft);
    color: var(--jade-deep);
    font-size: 13.5px;
    line-height: 1.3;
}

.product-volume .icon {
    flex: 0 0 auto;
    font-size: 15px;
}

.product-volume strong {
    font-weight: 700;
}

.products-grid .product-price > span:first-child {
    font-size: 11px;
    letter-spacing: 0.08em;
}

.products-grid .product-price strong {
    font-size: 26px;
}

.products-grid .product-price .price-was,
.products-grid .product-price .price-off {
    font-size: 12.5px;
}

.products-grid .product-open {
    min-height: 42px;
    padding: 0 16px;
    font-size: 14px;
    white-space: nowrap;
}

.products-grid .product-open .icon {
    font-size: 15px;
}

/* ---------- ficha del producto ---------- */
@media (min-width: 761px) {
    .product-dialog {
        width: min(1040px, calc(100vw - 32px));
        max-width: 1040px;
    }

    .product-dialog-grid {
        max-height: calc(100dvh - 32px);
        min-height: 0;
    }

    .product-dialog-grid > .pd-info {
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.product-dialog .pd-gallery {
    min-height: 0;
}

.product-dialog .pd-gallery-stage {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.product-dialog .pd-art {
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.product-dialog .pd-gallery-thumb {
    width: 64px;
    aspect-ratio: 1 / 1;
}

.product-dialog .pd-gallery-hint {
    font-size: 12px;
}

.product-dialog .pd-gallery .product-badge,
.product-dialog .pd-art .product-badge {
    font-size: 11px;
}

.product-dialog .pd-category {
    font-size: 12px;
}

.product-dialog .pd-tagline {
    font-size: 16px;
    line-height: 1.5;
}

.product-dialog .pd-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
}

.product-dialog .pd-specs span {
    padding: 7px 11px;
    font-size: 12.5px;
}

.product-dialog .pd-includes-title {
    font-size: 12px;
}

.product-dialog .pd-includes li {
    font-size: 14.5px;
    line-height: 1.5;
}

.product-dialog .pd-price > span:first-child {
    font-size: 11.5px;
}

.product-dialog .pd-price .price-was,
.product-dialog .pd-price .price-off {
    font-size: 13px;
}

.product-dialog .pd-bottom .btn {
    min-height: 50px;
    font-size: 15px;
}

.product-dialog .pd-note {
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- compra por volumen ---------- */
.pd-buy {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.pd-buy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 18px;
}

.pd-buy-label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pd-qty {
    display: inline-flex;
    align-items: center;
    height: 52px;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: #fff;
}

.pd-qty button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out);
}

.pd-qty button:hover {
    background: var(--ink);
    color: #fff;
}

.pd-qty button:active {
    transform: scale(0.94);
}

.pd-qty input {
    width: 62px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.pd-qty input:focus {
    outline: none;
}

.pd-qty:focus-within {
    border-color: var(--jade);
    box-shadow: 0 0 0 3px var(--jade-soft);
}

.pd-buy-prices {
    display: flex;
    gap: 22px;
    text-align: right;
}

.pd-buy-prices strong {
    display: block;
    color: var(--ink);
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pd-buy-prices strong s {
    margin-left: 4px;
    color: var(--muted-2);
    font-size: 14px;
    font-weight: 500;
}

.pd-buy-prices .is-total strong {
    font-size: 30px;
    font-weight: 700;
}

.pd-nudge {
    margin: 0;
    padding: 11px 14px;
    border-radius: 14px;
    background: #e6f4ea;
    color: #13612e;
    font-size: 14.5px;
    line-height: 1.45;
}

.pd-nudge strong {
    font-weight: 700;
}

.pd-buy-add.btn {
    width: 100%;
    min-height: 54px;
    justify-content: center;
    font-size: 16px;
}

.pd-tiers {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.6);
}

.pd-tiers-title {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
}

.pd-tiers-title span {
    color: var(--muted);
    font-weight: 400;
}

.pd-tiers ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd-tiers li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
}

.pd-tiers li span {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.pd-tiers li span::after {
    content: " ud.";
}

.pd-tiers li strong {
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pd-tiers li.is-active {
    border-color: var(--jade);
    background: var(--jade);
    transform: translateY(-1px);
}

.pd-tiers li.is-active span,
.pd-tiers li.is-active strong {
    color: #fff;
}

.pd-tiers-note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .product-dialog .pd-gallery {
        padding: 12px;
    }

    .pd-buy-row {
        align-items: stretch;
    }

    .pd-qty-wrap {
        width: 100%;
    }

    .pd-qty {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .pd-qty input {
        flex: 1;
    }

    .pd-buy-prices {
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }

    .pd-buy-prices .is-total {
        text-align: right;
    }

    .pd-tiers ul {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- mi selección (carrito) ---------- */
.selection-item .item-name {
    font-size: 15.5px;
    line-height: 1.3;
}

.selection-item .item-detail {
    font-size: 13px;
}

.selection-item .item-price {
    font-size: 14px;
    color: var(--text);
}

.selection-item .item-price s {
    color: var(--muted-2);
    font-size: 12.5px;
}

.selection-item .item-price b {
    font-weight: 700;
}

.selection-item .item-qty span {
    min-width: 28px;
    font-size: 15px;
}

.selection-item .item-remove {
    font-size: 13px;
}

.selection-volume {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #e6f4ea;
    color: #13612e;
}

.selection-volume strong {
    font-size: 14.5px;
}

.selection-volume span {
    font-size: 13.5px;
    line-height: 1.45;
}

.sheet-foot .selection-total span {
    font-size: 13px;
}

.sheet-foot .selection-total strong {
    font-size: 30px;
}

.sheet-foot .micro-note {
    font-size: 13px;
    line-height: 1.5;
}

.sheet-actions .btn {
    min-height: 48px;
    font-size: 14.5px;
}

.btn.btn-whatsapp {
    border-color: #1faa53;
    background: #1faa53;
    color: #fff;
}

.btn.btn-whatsapp:hover {
    border-color: #178a43;
    background: #178a43;
}

/* ---------- botón flotante de WhatsApp ---------- */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 58px;
    padding: 0 22px 0 17px;
    border-radius: 999px;
    background: #1faa53;
    color: #fff;
    font-size: 15.5px;
    font-weight: 650;
    text-decoration: none;
    box-shadow: 0 16px 34px -14px rgba(16, 90, 45, 0.75), 0 2px 6px rgba(16, 19, 24, 0.12);
    transition: transform 0.25s var(--ease-out), background 0.25s ease, opacity 0.25s ease;
    animation: waFloatIn 0.6s var(--ease-out) 1.2s both;
}

.wa-float svg {
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
}

.wa-float:hover {
    background: #178a43;
    transform: translateY(-2px);
}

.wa-float:focus-visible {
    outline: 3px solid #fff;
    box-shadow: 0 0 0 6px #1faa53;
}

body.is-locked .wa-float {
    opacity: 0;
    pointer-events: none;
}

@keyframes waFloatIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    .wa-float {
        right: 16px;
        bottom: 16px;
        width: 58px;
        padding: 0;
        justify-content: center;
    }

    .wa-float span {
        display: none;
    }
}

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

.selection-item .item-price {
    font-family: var(--font-ui);
}