/* =========================================================================
   ALFA Herrajes · Sistema visual "Cobalto"
   Claro por defecto. Blanco-gris, negro, azul cobalto como ÚNICO acento.
   Jerarquía: 1 botón azul por pantalla, títulos grandes, tarjetas blancas.
   Se carga después de styles.css y lo redefine.
   ========================================================================= */

@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url("../fonts/geist-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500; font-display: swap; src: url("../fonts/geist-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 600; font-display: swap; src: url("../fonts/geist-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 700; font-display: swap; src: url("../fonts/geist-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 800; font-display: swap; src: url("../fonts/geist-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url("../fonts/geist-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root, [data-theme="light"] {
  --font-display: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --blue-700: #1B3FD6;
  --blue-600: #2F5BFF;
  --blue-500: #4A70FF;
  --blue-100: #E6ECFF;
  --blue-050: #F2F5FF;
  --ink-900: #0A0B0D;
  --ink-700: #2B2F36;
  --ink-500: #5B6472;
  --ink-400: #8A93A2;
  --steel-200: #C9CED6;
  --steel-100: #E6E9EE;
  --paper-050: #F6F7F9;
  --paper-000: #FFFFFF;

  --bg: var(--paper-050);
  --bg-elev: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-soft: var(--steel-100);
  --line: rgba(10, 11, 13, .08);
  --line-strong: rgba(10, 11, 13, .16);
  --tx: var(--ink-900);
  --tx-soft: var(--ink-500);
  --tx-mute: var(--ink-400);
  --accent: var(--blue-600);
  --accent-ink: #FFFFFF;
  --accent-rgb: 47, 91, 255;
  --gold: var(--blue-600);
  --brass-300: var(--blue-500); --brass-400: var(--blue-600); --brass-500: var(--blue-700); --brass-600: var(--blue-700);
  --alfa-300: var(--blue-500); --alfa-400: var(--blue-600); --alfa-500: var(--blue-600); --alfa-600: var(--blue-700); --alfa-700: var(--blue-700);
  --studio: #F3F4F6;
  --ok: #16A34A;

  --shadow-1: 0 1px 2px rgba(10, 11, 13, .05);
  --shadow-2: 0 10px 30px -14px rgba(10, 11, 13, .18);
  --shadow-3: 0 30px 60px -30px rgba(10, 11, 13, .28);
  --glow: 0 10px 30px -10px rgba(47, 91, 255, .55);

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px;
  --fs-hero: clamp(2.6rem, 1.3rem + 4.6vw, 5rem);
  --fs-h2: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
/* Modo oscuro opcional (botón de tema) */
[data-theme="dark"] {
  --bg: #0A0B0D; --bg-elev: #111317; --bg-card: #15181D; --bg-soft: #1C2028;
  --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16);
  --tx: #F4F5F7; --tx-soft: #AEB5C2; --tx-mute: #7C8594;
  --accent: var(--blue-500); --accent-ink: #FFFFFF; --accent-rgb: 74, 112, 255;
  --studio: #1C2028;
  --shadow-2: 0 10px 30px -14px rgba(0, 0, 0, .6); --shadow-3: 0 30px 60px -30px rgba(0, 0, 0, .8);
}

/* ---------- Base ---------- */
html { overflow-x: clip; }
body { font-family: var(--font-body); letter-spacing: -.005em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
h3 { letter-spacing: -.02em; line-height: 1.2; }
::selection { background: var(--blue-100); color: var(--ink-900); }
.grad-text, [data-theme="light"] .grad-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent); }
.eyebrow { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; color: var(--accent); }
.eyebrow::before { width: 8px; height: 8px; border-radius: 99px; background: var(--accent); opacity: 1; }
.kicker { border-radius: 99px; background: var(--blue-050); border: 1px solid var(--blue-100); color: var(--blue-700); }
.kicker i { background: var(--accent); color: #fff; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { font-size: 1.05rem; color: var(--tx-soft); }
.section--alt { background: #fff; }
[data-theme="dark"] .section--alt { background: var(--bg-elev); }
.section--band { background: var(--ink-900); color: #fff; border: 0; }
.section--band .eyebrow { color: var(--blue-500); }
.section--band p, .section--band small { color: rgba(255, 255, 255, .7) !important; }
.section--band .btn--ghost { --btn-bg: transparent; --btn-tx: #fff; --btn-bd: rgba(255, 255, 255, .25); }
.section--band .mini-steps li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.section--band .mini-steps li small { color: rgba(255, 255, 255, .6) !important; }
.section--band .howto-mini summary { color: var(--blue-500); }
.section--band .tabpanel { color: rgba(255, 255, 255, .8); }

/* ---------- Botones ---------- */
.btn { border-radius: 99px; padding: .9rem 1.5rem; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; text-transform: none; clip-path: none; }
.btn::after { display: none; }
.btn:not(.btn--ghost):not(.btn--wa):not(.btn--solid) { background: var(--accent); color: #fff; }
.btn:not(.btn--ghost):hover { transform: translateY(-1px); box-shadow: var(--glow); filter: brightness(1.04); }
.btn--ghost { --btn-bg: #fff; --btn-tx: var(--tx); --btn-bd: var(--line-strong); backdrop-filter: none; box-shadow: none; }
[data-theme="dark"] .btn--ghost { --btn-bg: transparent; }
.btn--ghost:hover { --btn-bd: var(--tx); --btn-tx: var(--tx); box-shadow: none; transform: none; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.btn--sm { padding: .6rem 1.05rem; font-size: .86rem; }
.btn--wa { --btn-bg: #16A34A; }
.link-arrow { color: var(--accent); font-weight: 600; font-size: .95rem; letter-spacing: -.01em; text-transform: none; }
.chip { border-radius: 99px; font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.chip--new { color: var(--blue-700); border-color: var(--blue-100); background: var(--blue-050); }
.chip--hot { color: #B45309; border-color: #FDE68A; background: #FFFBEB; }
.chip--accent { color: var(--blue-700); border-color: var(--blue-100); background: var(--blue-050); }

/* ---------- Encabezado ---------- */
.topbar, [data-theme="light"] .topbar { background: var(--ink-900); color: #B3BAC6; border: 0; font-size: .78rem; letter-spacing: 0; text-transform: none; font-family: var(--font-body); }
.topbar__track { gap: 2.4rem; }
.topbar__track svg { color: var(--blue-500); opacity: 1; width: 14px; height: 14px; }
.topbar__links a { color: #fff; font-weight: 500; }
.topbar__links a:hover { color: var(--blue-500); }
.nav { background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--line); backdrop-filter: saturate(160%) blur(16px); }
[data-theme="dark"] .nav { background: rgba(10, 11, 13, .86); }
.nav.is-stuck { box-shadow: 0 8px 30px -20px rgba(10, 11, 13, .25); }
:root { --nav-h: 72px; }
.brand { gap: .65rem; }
.brand__mark { width: 38px; height: 38px; border-radius: 10px; box-shadow: none; background: transparent; }
.brand__mark img { border-radius: 10px; }
.brand__tx b { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .18em; }
.brand__tx small { font-family: var(--font-body); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: none; color: var(--tx-mute); }
.nav__link { border-radius: 99px; font-size: .92rem; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: var(--tx-soft); padding: .55rem .8rem; }
.nav__link:hover, .nav__link:focus-visible { color: var(--tx); background: var(--bg-soft); }
.nav__link[aria-current="page"] { color: var(--tx); font-weight: 600; }
.nav__link[aria-current="page"]::after { background: var(--accent); }
.nav__link--new::before { content: "3D"; margin-right: .4rem; padding: .08rem .4rem; border-radius: 6px; font-size: .62rem; font-weight: 800; color: #fff; background: var(--accent); vertical-align: 1px; }
.nav__link--new::after { display: none; }
.icon-btn { border-radius: 12px; background: #fff; border-color: var(--line); clip-path: none; }
[data-theme="dark"] .icon-btn { background: var(--bg-soft); }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.cart-count { background: var(--accent); color: #fff; border-radius: 99px; }
@media (max-width: 1180px) { .nav__menu { background: var(--bg-elev); } .nav__link { font-size: 1.02rem; } }

/* ---------- Tarjetas base ---------- */
.card, .tile, .product, .cat, .sys3d, .route-band, .post, .course, .faq, .brand-card, .howto__card, .article, .counter, .map, .lcard-demo { border-radius: var(--r-lg) !important; }
.product { border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-1); }
[data-theme="dark"] .product { background: var(--bg-card); }
.product:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.product__media { background: var(--studio) !important; }
.product__media img { padding: 9%; mix-blend-mode: multiply; }
.product__media img[src*="1234012"], .product__media img[src*="1250DERSA"], .product__media img[src*="2246"], .product__media img[src*="YK"] { padding: 0; }
[data-theme="dark"] .product__media img { mix-blend-mode: normal; }
.product__cat { font-size: .68rem; letter-spacing: .06em; font-family: var(--font-body); }
.product__name { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.product__brand { border-radius: 6px; font-size: .62rem; letter-spacing: .04em; }
.product__brand--alfa { color: var(--blue-700); border-color: var(--blue-100); background: var(--blue-050); }
.product__price b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.product__3d { border-radius: 8px !important; background: var(--ink-900) !important; color: #fff !important; border: 0; font-size: .66rem !important; }
.product__flags .chip { background: #fff; color: var(--ink-900); border-color: var(--line); box-shadow: var(--shadow-1); backdrop-filter: none; }
.product__actions .btn { border-radius: 12px; }
.product__fav { border-radius: 10px !important; }
.tile { background: #fff; border: 1px solid var(--line); }
[data-theme="dark"] .tile { background: var(--bg-card); }
.tile::before { height: 3px; background: var(--accent); }
.feature__ico { border-radius: 12px; background: var(--blue-050); color: var(--blue-600); border: 0; }
.media-frame { border: 1px solid var(--line); box-shadow: var(--shadow-3); overflow: hidden; }
.media-frame::before { display: none; }
.media-frame img { clip-path: none; }
.crumbs { font-size: .82rem; letter-spacing: 0; text-transform: none; font-weight: 500; }

/* ---------- Categorías ---------- */
.cats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.cat { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); padding: .9rem; }
[data-theme="dark"] .cat { background: var(--bg-card); }
.cat:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.cat__bg { background: var(--studio); mix-blend-mode: multiply; }
[data-theme="dark"] .cat__bg { mix-blend-mode: normal; }
.cat h3 { font-size: .92rem; font-weight: 600; letter-spacing: -.01em; }
.cat__go { font-size: .74rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent); }
.cat__all-ico { border-radius: 14px; background: var(--accent); color: #fff; }

/* ---------- Marcas ---------- */
.brands { background: #fff; border-block: 1px solid var(--line); padding-block: 1.6rem; }
[data-theme="dark"] .brands { background: var(--bg-elev); }
.brands__item { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: none; color: var(--tx-mute); }
.brands__item:hover { color: var(--accent); }

/* ---------- Rutas ---------- */
.route-band { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
[data-theme="dark"] .route-band { background: var(--bg-card); }
.route-chip { border-radius: 99px !important; background: var(--bg); }
.route-chip b { border-radius: 99px; background: var(--blue-050); color: var(--blue-700); font-size: .72rem; letter-spacing: 0; text-transform: none; border: 0; }

/* ---------- Pie ---------- */
.footer, [data-theme="light"] .footer { background: var(--ink-900); color: #AEB5C2; border: 0; }
.footer h4 { font-size: .78rem; letter-spacing: .08em; color: #fff; }
.footer a { color: #D5DAE2; }
.footer a:hover { color: var(--blue-500); }
.footer__bottom { font-size: .78rem; letter-spacing: 0; text-transform: none; border-top-color: rgba(255, 255, 255, .1); }
.footer > .wrap::after { display: none; }
.newsletter input { border-radius: 12px !important; }
.newsletter .btn { border-radius: 12px !important; }
.socials a { border-radius: 12px !important; }
.fab-wa { border-radius: 99px !important; }

/* =========================================================================
   PORTADA
   ========================================================================= */
.hero--alfa {
  min-height: 0; display: block; color: var(--tx);
  background: radial-gradient(60% 55% at 85% 10%, var(--blue-100), transparent 70%), var(--bg);
}
[data-theme="dark"] .hero--alfa { background: radial-gradient(60% 55% at 85% 10%, rgba(47, 91, 255, .18), transparent 70%), var(--bg); }
.hero--alfa::before, .hero--alfa::after, .alfa-hero::before { display: none; }
.alfa-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.6rem, 1rem + 3vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem); text-align: left; }
.alfa-hero__copy { display: block; justify-items: start; }
.alfa-hero .eyebrow { justify-content: flex-start; }
.alfa-hero h1 { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -.045em; line-height: 1.0; max-width: 12ch; margin: 1.1rem 0 0; color: var(--tx); }
.alfa-hero h1 em { font-style: normal; color: var(--accent); }
.alfa-hero__lead { margin: 1.3rem 0 0; max-width: 46ch; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.55; color: var(--tx-soft); }
.alfa-hero__cta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .7rem; margin-top: 1.8rem; }
.alfa-hero .hero__search { margin: 1.6rem 0 0; max-width: 560px; border-radius: 16px; background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); padding: .35rem .35rem .35rem .9rem; clip-path: none; }
[data-theme="dark"] .alfa-hero .hero__search { background: var(--bg-card); }
.alfa-hero .hero__search svg { color: var(--tx-mute); }
.alfa-hero .hero__search input { color: var(--tx); font-family: var(--font-body); font-size: 1rem; }
.alfa-hero .hero__search input::placeholder { color: var(--tx-mute); }
.alfa-hero .hero__search .btn { --btn-bg: var(--ink-900); --btn-tx: #fff; border: 0; border-radius: 12px; padding: .7rem 1.1rem; background: var(--ink-900) !important; }
[data-theme="dark"] .alfa-hero .hero__search .btn { background: var(--accent) !important; }
.alfa-hero .kbd { display: none; }
.alfa-status { display: none; }
.alfa-quick { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .9rem; font-size: .84rem; color: var(--tx-mute); align-items: center; }
.alfa-quick a { padding: .3rem .7rem; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--tx-soft); font-weight: 500; transition: border-color var(--t-fast), color var(--t-fast); }
[data-theme="dark"] .alfa-quick a { background: var(--bg-soft); }
.alfa-quick a:hover { border-color: var(--accent); color: var(--accent); }
.alfa-proof { display: flex; flex-wrap: wrap; gap: 1.2rem 1.6rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.alfa-proof div { display: grid; gap: .1rem; }
.alfa-proof b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.alfa-proof span { font-size: .78rem; color: var(--tx-mute); }

/* Estudio 3D en el hero: tarjeta blanca */
.alfa-stage { margin: 0; display: grid; gap: 0; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-3); overflow: hidden; }
[data-theme="dark"] .alfa-stage { background: var(--bg-card); }
.alfa-stage .h3d__stage { height: min(52vh, 480px); min-height: 300px; border: 0; border-radius: 0; clip-path: none;
  background: radial-gradient(60% 60% at 50% 40%, #fff, var(--studio) 100%); }
[data-theme="dark"] .alfa-stage .h3d__stage { background: radial-gradient(60% 60% at 50% 40%, #232833, #141720 100%); }
.alfa-stage .h3d__load { color: var(--tx-soft); }
.alfa-stage .h3d__load i { border-color: var(--line-strong); border-top-color: var(--accent); }
.alfa-stage .h3d__beta { top: 1rem; left: 1rem; border-radius: 99px; background: var(--ink-900); color: #fff; border: 0; font-family: var(--font-body); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.alfa-stage .h3d__beta::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; margin-right: .45rem; vertical-align: 1px; box-shadow: none; animation: none; }
.alfa-stage .h3d__dsp { top: 1rem; right: 1rem; border-radius: 99px; background: #fff; color: var(--tx); border: 1px solid var(--line-strong); font-family: var(--font-body); font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.alfa-stage .h3d__dsp[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }
.alfa-stage .h3d__ra { border-radius: 99px; background: var(--ink-900); color: #fff; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: .82rem; }
.alfa-tag, .alfa-corner { display: none; }
.alfa-stage .h3d__bar { grid-template-columns: 1fr; gap: .6rem; padding: .9rem 1rem 1rem; border-top: 1px solid var(--line); margin: 0; background: #fff; }
[data-theme="dark"] .alfa-stage .h3d__bar { background: var(--bg-card); }
.alfa-stage .h3d__chips { gap: .35rem; }
.alfa-stage .h3d__chips button { flex: none; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); color: var(--tx-soft); font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: .45rem .85rem; clip-path: none; }
.alfa-stage .h3d__chips button:first-child { padding-left: .85rem; }
.alfa-stage .h3d__chips button[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
[data-theme="dark"] .alfa-stage .h3d__chips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.alfa-stage .h3d__foot { color: var(--tx); }
.alfa-stage .h3d__foot b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; color: var(--tx); }
.alfa-stage .h3d__foot a { color: var(--accent); font-size: .88rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
@media (max-width: 980px) {
  .alfa-hero { grid-template-columns: 1fr; }
  .alfa-stage .h3d__stage { height: 54vh; }
}

/* Cifras (ya van dentro del hero como prueba social) */
.alfa-figures { display: none; }

/* Sistemas 3D: tarjetas sobre fondo claro */
.soon, .soon--live { background: #fff; color: var(--tx); border-block: 1px solid var(--line); }
[data-theme="dark"] .soon { background: var(--bg-elev); }
.soon::before, .soon__floor { display: none; }
.soon h2 { color: var(--tx); }
.soon p { color: var(--tx-soft) !important; }
.soon .btn--ghost { --btn-tx: var(--tx); --btn-bd: var(--line-strong); }
.sys3d-grid { gap: 1rem; border: 0; counter-reset: sys; }
.sys3d { counter-increment: sys; padding: .8rem .8rem 1.1rem; border: 1px solid var(--line); background: var(--bg); gap: .3rem; transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t); }
[data-theme="dark"] .sys3d { background: var(--bg-card); }
.sys3d:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-2); background: var(--bg); }
.sys3d::before { display: none; }
.sys3d__img { border-radius: 14px; background: radial-gradient(70% 70% at 50% 40%, #fff, var(--studio)); margin-bottom: .6rem; clip-path: none; }
.sys3d__img img { mix-blend-mode: multiply; }
[data-theme="dark"] .sys3d__img { background: #1C2028; }
[data-theme="dark"] .sys3d__img img { mix-blend-mode: normal; }
.sys3d__chip { top: 1.5rem; right: 1.5rem; border-radius: 99px; background: var(--ink-900); color: #fff; border: 0; font-family: var(--font-body); font-size: .62rem; font-weight: 700; letter-spacing: .04em; }
.sys3d b { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; color: var(--tx); }
.sys3d small { color: var(--tx-soft); font-size: .84rem; }
.sys3d__cta { color: var(--accent); font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin-top: .4rem; }
@media (max-width: 900px) { .sys3d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sys3d-grid { grid-template-columns: 1fr; } }

/* Por qué ALFA */
.why .grid-4 { gap: 1rem; border: 0; }
.why .tile { border: 1px solid var(--line); background: #fff; padding: 1.6rem; }
[data-theme="dark"] .why .tile { background: var(--bg-card); }
.why .tile::after { display: none; }
.why .tile .feature__ico { display: grid; }
.why .tile h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }

/* Tarjeta de lealtad (demo) */
.lcard-demo { background: linear-gradient(145deg, #1B3FD6, #0A0B0D 70%) !important; border: 1px solid rgba(255, 255, 255, .12) !important; clip-path: none; }
.lcard-demo__stamps span { border-radius: 10px !important; }
.mini-steps li { border-radius: 14px !important; }
.mini-steps li b { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }

/* Páginas internas */
.pd__info h1, .v3d__buy h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.pd__price b, .totals b { font-family: var(--font-display); font-weight: 700; }
.tabs button, .pd3d__tabs button { border-radius: 99px !important; }
.fcheck, .qty, .qty button, .search, .filters, .price-pill, .field input, .field select, .field textarea { border-radius: 12px !important; }
select { border-radius: 12px !important; }
.filters { border-color: var(--line); background: #fff; }
[data-theme="dark"] .filters { background: var(--bg-card); }
.howto-mini summary { color: var(--accent); font-weight: 600; }

/* Palabra destacada del titular */
[data-split] em .w, [data-split] .grad-text .w { background: none; color: var(--accent); -webkit-text-fill-color: currentColor; animation: wordIn .9s var(--ease) forwards; animation-delay: calc(var(--i) * 80ms + 120ms); }
@media (prefers-reduced-motion: reduce) { [data-split] em .w { opacity: 1; transform: none; animation: none; } }

/* Correcciones de herencia del sistema anterior */
.hero .btn--ghost, .alfa-hero .btn--ghost { --btn-tx: var(--tx); --btn-bd: var(--line-strong); }
.hero .btn--ghost:hover { --btn-bd: var(--tx); --btn-tx: var(--tx); }
.soon h2, .soon--live h2, .soon .section-head h2, .soon .section-head--split h2 { color: var(--tx) !important; }
.soon .section-head--split > div { text-align: left; }

/* Jerarquía: el azul se reserva para la acción principal de cada bloque */
.product__actions .btn:not(.btn--ghost) { background: var(--ink-900) !important; color: #fff; }
.product__actions .btn:not(.btn--ghost):hover { background: var(--accent) !important; box-shadow: none; }
[data-theme="dark"] .product__actions .btn:not(.btn--ghost) { background: var(--accent) !important; }
.lcard-demo::before { background: radial-gradient(circle, rgba(74, 112, 255, .45), transparent 62%) !important; }
.lcard-demo::after { background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 62%) !important; }
.section--band::before, .section--band::after { display: none; }
@media (max-width: 980px) { .alfa-hero { grid-template-columns: minmax(0, 1fr); } }
.alfa-hero > * { min-width: 0; max-width: 100%; }
.alfa-stage { width: 100%; }
.alfa-stage .h3d__chips { overflow-x: auto; }
@media (max-width: 980px) {
  .alfa-hero { display: block; }
  .alfa-stage { margin-top: 1.6rem; max-width: 100%; }
  .alfa-stage .h3d__stage { width: 100%; }
  .alfa-stage .h3d__foot { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .alfa-proof { gap: .9rem 1.2rem; }
}

/* ---------- Estudio 3D: showroom virtual ---------- */
.sr3d { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: start; }
.sr3d__list { display: grid; gap: .5rem; max-height: 640px; overflow-y: auto; padding-right: .2rem; scrollbar-width: thin; }
.sr3d__item { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: .8rem; align-items: center; text-align: left; padding: .6rem; border-radius: 16px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
[data-theme="dark"] .sr3d__item { background: var(--bg-card); }
.sr3d__item:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.sr3d__item[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--blue-100); }
.sr3d__thumb { width: 64px; height: 64px; border-radius: 12px; background: var(--studio); display: grid; place-items: center; overflow: hidden; }
.sr3d__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
[data-theme="dark"] .sr3d__thumb img { mix-blend-mode: normal; }
.sr3d__tx { display: grid; gap: .1rem; min-width: 0; }
.sr3d__tx b { font-size: .95rem; font-weight: 700; letter-spacing: -.015em; }
.sr3d__tx small { font-size: .78rem; color: var(--tx-soft); line-height: 1.35; }
.sr3d__n { position: absolute; top: .55rem; right: .7rem; font-family: var(--font-mono); font-size: .62rem; color: var(--tx-mute); }
.sr3d__item[aria-pressed="true"] .sr3d__n { color: var(--accent); }
.sr3d__main { display: grid; gap: .8rem; min-width: 0; }
.sr3d__main .h3d__stage { height: min(64vh, 640px); min-height: 360px; border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow-3);
  background: radial-gradient(60% 60% at 50% 40%, #fff, var(--studio) 100%); clip-path: none; }
[data-theme="dark"] .sr3d__main .h3d__stage { background: radial-gradient(60% 60% at 50% 40%, #232833, #141720 100%); }
.sr3d__main .h3d__beta { top: 1rem; left: 1rem; border-radius: 99px; background: var(--ink-900); color: #fff; border: 0; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: none; font-family: var(--font-body); }
.sr3d__main .h3d__beta::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22C55E; margin-right: .45rem; vertical-align: 1px; }
.sr3d__main .h3d__dsp { top: 1rem; right: 1rem; border-radius: 99px; background: #fff; color: var(--tx); border: 1px solid var(--line-strong); font-size: .82rem; font-weight: 600; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.sr3d__main .h3d__dsp[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: transparent; }
.sr3d__main .h3d__ra { border-radius: 99px; background: var(--ink-900); color: #fff; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.sr3d__main .h3d__load { color: var(--tx-soft); }
.sr3d__main .h3d__load i { border-color: var(--line-strong); border-top-color: var(--accent); }
.sr3d__hint { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); font-size: .74rem; color: var(--tx-mute); white-space: nowrap; pointer-events: none; }
.sr3d__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
[data-theme="dark"] .sr3d__foot { background: var(--bg-card); }
.sr3d__foot b { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: -.025em; margin-top: .2rem; }
.sr3d__acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.sr3d__chips { display: none; }
.sr3d-how { margin-top: 2.5rem; }
@media (max-width: 900px) {
  .sr3d { grid-template-columns: 1fr; }
  .sr3d__list { display: none; }
  .sr3d__chips { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: 2px; }
  .sr3d__chips button { flex: none; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--tx-soft); font-size: .82rem; font-weight: 600; padding: .5rem .9rem; }
  .sr3d__chips button[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
  .sr3d__main .h3d__stage { height: 60vh; }
  .sr3d__hint { display: none; }
}
/* La barra del pie del visor del home: que no se desborde en móvil */
.alfa-stage > * { min-width: 0; }
.alfa-stage .h3d__foot a { white-space: normal; }
/* Herramientas del visor: cómo funciona · despiece · RA */
.h3d__tools { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.h3d__tools .h3d__dsp { position: static; display: inline-flex; align-items: center; gap: .4rem; }
.h3d__tools .h3d__dsp svg { width: 15px; height: 15px; }
.h3d__tools .h3d__dsp[hidden] { display: none; }
.alfa-stage .h3d__ra, .sr3d__main .h3d__ra { right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .45rem; background: var(--accent); color: #fff; border-radius: 99px; padding: .7rem 1.1rem; font-weight: 600; box-shadow: var(--glow); }
.h3d__ra[hidden] { display: none !important; }
@media (max-width: 640px) { .h3d__tools { left: 1rem; right: 1rem; top: auto; bottom: 3.6rem; justify-content: flex-start; } .h3d__tools .h3d__dsp { font-size: .76rem; padding: .45rem .75rem; } .alfa-stage .h3d__beta, .sr3d__main .h3d__beta { top: .8rem; } }

/* =========================================================================
   IDENTIDAD ALFA — firma de marca sobre el sistema Cobalto
   Monograma "A" como marca de agua, barra del logo como marcador,
   patrón de líneas diagonales (70°, el ángulo de la A) y "losas" cobalto.
   ========================================================================= */
:root {
  --alfa-pattern: repeating-linear-gradient(110deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 22px);
  --cobalt-slab: linear-gradient(160deg, #3D66FF 0%, #2F5BFF 35%, #1B3FD6 70%, #0F2A8F 100%);
}
/* marcador de sección: la barra del logo */
.eyebrow::before { width: 22px; height: 5px; border-radius: 3px; background: var(--accent); }
.eyebrow { letter-spacing: .1em; text-transform: uppercase; }

/* Marca en el encabezado */
.brand__tx b { font-size: 1.3rem; letter-spacing: .22em; }
.brand__tx small { color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-size: .56rem; }

/* Hero: titular con la marca */
.alfa-hero h1 { max-width: 13ch; }
.alfa-hero h1 em { color: var(--accent); }

/* Losa cobalto que enmarca el Estudio 3D */
.alfa-slab { position: relative; padding: clamp(1rem, .6rem + 1.4vw, 1.6rem); border-radius: 32px; background: var(--cobalt-slab); overflow: hidden; isolation: isolate; box-shadow: 0 40px 80px -40px rgba(27, 63, 214, .6); }
.alfa-slab::before { content: ""; position: absolute; inset: 0; background: var(--alfa-pattern); z-index: 0; pointer-events: none; }
.alfa-slab::after { content: ""; position: absolute; inset: auto -20% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); z-index: 0; pointer-events: none; }
.alfa-slab__mark { position: absolute; left: 50%; top: -.1em; transform: translateX(-50%); z-index: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 22vw, 15rem); letter-spacing: .12em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22); pointer-events: none; user-select: none; white-space: nowrap; }
.alfa-slab .alfa-stage { position: relative; z-index: 1; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.alfa-stage .h3d__beta { background: var(--accent); }
@media (max-width: 980px) { .alfa-slab { margin-top: 1.6rem; padding: .9rem; border-radius: 24px; } .alfa-slab__mark { font-size: 7rem; } }

/* Manifiesto de marca */
.alfa-manifest { background: var(--ink-900); color: #fff; position: relative; overflow: hidden; }
.alfa-manifest::before { content: ""; position: absolute; inset: 0; background: var(--alfa-pattern); opacity: .6; pointer-events: none; }
.alfa-manifest::after { content: "A"; position: absolute; right: -2%; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(14rem, 40vw, 34rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(47, 91, 255, .35); pointer-events: none; user-select: none; }
.alfa-manifest__in { position: relative; z-index: 1; display: grid; gap: 1.4rem; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); max-width: 980px; margin-inline: auto; justify-items: start; }
.alfa-manifest__logo { width: 64px; height: 64px; border-radius: 16px; }
.alfa-manifest__tx { font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1.4vw, 2.2rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.3; color: #D5DAE2; max-width: 24ch; }
.alfa-manifest__tx b { color: #fff; font-weight: 700; }
.alfa-manifest__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.alfa-manifest__tags span { padding: .45rem .9rem; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: .82rem; font-weight: 600; background: rgba(255, 255, 255, .04); }

/* Bandas de marca: Tarjeta ALFA en cobalto, no en negro */
.section--band { background: var(--cobalt-slab); position: relative; }
.section--band::before { content: ""; display: block; position: absolute; inset: 0; background: var(--alfa-pattern); pointer-events: none; }
.section--band > .wrap { position: relative; z-index: 1; }
.section--band .eyebrow, .section--band .kicker { color: #fff; }
.section--band .kicker { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); }
.section--band .kicker i { background: #fff; color: var(--blue-700); }
.section--band .grad-text { color: #BFD0FF; }
.section--band .btn:not(.btn--ghost) { background: #fff !important; color: var(--blue-700) !important; box-shadow: none; }
.section--band .btn--ghost { --btn-bd: rgba(255, 255, 255, .4); }
.section--band .howto-mini summary { color: #fff; }
.lcard-demo { background: linear-gradient(145deg, #0A0B0D, #15181D 60%, #1B3FD6) !important; }

/* Pie: azul profundo con marca de agua */
.footer, [data-theme="light"] .footer { background: #0A1230; position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; inset: 0; background: var(--alfa-pattern); opacity: .5; pointer-events: none; }
.footer > .wrap { position: relative; z-index: 1; }
.footer > .wrap::after { content: "ALFA"; display: block; text-align: center; pointer-events: none; font-family: var(--font-display); font-weight: 800; font-size: clamp(5rem, 22vw, 20rem); letter-spacing: .14em; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(74, 112, 255, .35); margin: 1.5rem 0 -.6rem; user-select: none; white-space: nowrap; overflow: hidden; }
.footer h4 { color: #BFD0FF; }
.footer a:hover { color: #fff; }

/* Tarjetas: firma al pasar el cursor (barra del logo) */
.product::after, .cat::after, .sys3d::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.product:hover::after, .cat:hover::after, .sys3d:hover::after { transform: scaleX(1); }
.product, .cat, .sys3d { position: relative; overflow: hidden; }

/* Sistemas 3D: fondo de "vidrio" ALFA (tono cian del cristal templado) */
.soon, .soon--live { background: linear-gradient(180deg, #fff, #EEF6FA); }
.sys3d__img { background: radial-gradient(70% 70% at 50% 40%, #fff, #E3EEF5); }

/* Botón primario con brillo de marca */
.btn:not(.btn--ghost):not(.btn--wa):not(.btn--solid) { background: linear-gradient(180deg, #3D66FF, #2F5BFF); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }