/* ==========================================================
   LUMIXLED · Hoja de estilos principal
   Identidad: negro + azul eléctrico · Archivo + IBM Plex Mono
   ========================================================== */

:root {
  --brand: #007EEE;
  --brand-bright: #2E95FF;
  --brand-tint: #E6F1FD;
  --action: #0063C7;
  --action-hover: #0052A6;
  --action-dark: #4BA6FF;
  --on-action-dark: #00172E;
  --link: #0063C7;
  --link-dark: #6CB4FF;
  --ink: #0A0A0A;
  --ink-muted: #5A6472;
  --ink-soft-dark: #C4CBD5;
  --muted-dark: #9AA4B2;
  --surface: #FFFFFF;
  --surface-alt: #F2F4F7;
  --surface-inverse: #0A0A0A;
  --surface-inverse-2: #161B22;
  --line: #DDE2E9;
  --line-dark: #262D37;
  --border-strong: #8A94A3;
  --border-dark: #5C6675;
  --warm: #FFB020;
  --on-warm: #1A1200;
  --success: #11795A;
  --danger: #C2321F;

  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-card: 0 1px 2px rgba(10,10,10,.06), 0 4px 12px rgba(10,10,10,.06);
  --container: 1280px;
  --gutter: 32px;
  --section: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); }
a:hover { color: var(--action-hover); }
:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.015em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--action); color: #fff; padding: 10px 16px; border-radius: var(--radius-md); }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Tipografía de marca ---------- */
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.eyebrow--dark { color: var(--link-dark); }
.spec { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.h-display { font-size: clamp(44px, 7vw, 92px); line-height: .95; font-weight: 900; letter-spacing: -0.035em; }
.h1 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.05; font-weight: 800; }
.h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; font-weight: 800; }
.h3 { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: 0; }
.lead { font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.accent { color: var(--brand-bright); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .01em;
  padding: 14px 22px; min-height: 48px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-hover); color: #fff; }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--surface-alt); color: var(--ink); }
.btn--ghost-dark { background: transparent; color: #fff; border-color: var(--border-dark); }
.btn--ghost-dark:hover { border-color: #fff; color: #fff; }
.btn--bright { background: var(--action-dark); color: var(--on-action-dark); font-weight: 800; }
.btn--bright:hover { background: #6CB4FF; color: var(--on-action-dark); }
.btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--action); }
.btn--block { width: 100%; }
.btn--split { justify-content: space-between; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-sm); }
.badge--brand { background: var(--brand-tint); color: var(--link); }
.badge--warm { background: var(--warm); color: var(--on-warm); }
.badge--dark { background: var(--ink); color: #fff; }
.badge--stock { color: var(--success); padding-left: 0; }
.badge--nostock { color: var(--danger); padding-left: 0; }

/* ==========================================================
   ENCABEZADO
   ========================================================== */
.site-header { background: var(--surface-inverse); color: #fff; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line-dark); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.site-header__logo img { width: 170px; }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a { color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; padding: 8px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: var(--brand-bright); color: #fff; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); border: 1px solid var(--border-dark); color: #fff; background: transparent; cursor: pointer; text-decoration: none; }
.icon-btn:hover { border-color: #fff; color: #fff; }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; display: none; align-items: center; justify-content: center; }
.cart-count.is-visible { display: inline-flex; }
.menu-toggle { display: none; }

/* Barra de búsqueda bajo el encabezado */
.search-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.search-strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.search-form { flex: 1 1 380px; display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: #fff; }
.search-form input { flex: 1; min-width: 0; border: 0; padding: 13px 16px; font-size: 16px; background: transparent; }
.search-form input:focus { outline: none; }
.search-form:focus-within { outline: 2px solid var(--brand-bright); outline-offset: 2px; }
.search-form button { border: 0; background: var(--action); color: #fff; padding: 0 18px; cursor: pointer; display: flex; align-items: center; }
.search-form button svg { width: 20px; height: 20px; }
.cat-links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 14px; font-weight: 600; }
.cat-links a { color: var(--ink); text-decoration: none; }
.cat-links a:hover { color: var(--link); }

/* ==========================================================
   HERO (portada propuesta C)
   ========================================================== */
.hero { background: var(--surface-inverse); color: #fff; position: relative; overflow: hidden; }
.hero__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-top: 72px; padding-bottom: 104px; }
.hero__text { flex: 3 1 600px; display: flex; flex-direction: column; gap: 32px; }
.hero__row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.hero__row p { flex: 1 1 320px; max-width: 460px; font-size: 19px; line-height: 30px; color: var(--ink-soft-dark); }
.hero__ctas { flex: 0 1 270px; display: flex; flex-direction: column; gap: 12px; }
.hero__mark { flex: 1 1 260px; display: flex; justify-content: center; }
.hero__mark img { width: 100%; max-width: 340px; filter: drop-shadow(0 0 48px rgba(46,149,255,.55)); animation: glow 4s ease-in-out infinite alternate; }
@keyframes glow { from { filter: drop-shadow(0 0 32px rgba(46,149,255,.4)); } to { filter: drop-shadow(0 0 60px rgba(46,149,255,.7)); } }
@media (prefers-reduced-motion: reduce) { .hero__mark img { animation: none; } html { scroll-behavior: auto; } }
.hero__lines { border-top: 1px solid var(--line-dark); }
.hero__lines ul { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; padding-bottom: 20px; }
.hero__lines a { font-family: var(--font-mono); font-size: 13px; color: var(--muted-dark); text-decoration: none; }
.hero__lines a:hover { color: #fff; }

/* Encabezado de páginas interiores */
.page-hero { background: var(--surface-inverse); color: #fff; position: relative; overflow: hidden; }
.page-hero__inner { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.page-hero p { color: var(--ink-soft-dark); font-size: 18px; line-height: 28px; max-width: 680px; }
.stripes { position: absolute; pointer-events: none; }
.stripes path { stroke: var(--brand); fill: none; }

/* Migas de pan */
.breadcrumbs { font-size: 13px; color: var(--muted-dark); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--border-dark); }
.breadcrumbs a { color: var(--muted-dark); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs--light { color: var(--ink-muted); }
.breadcrumbs--light a { color: var(--ink-muted); }
.breadcrumbs--light a:hover { color: var(--link); }

/* ==========================================================
   SECCIONES
   ========================================================== */
.section { padding: var(--section) 0; }
.section--alt { background: var(--surface-alt); }
.section--dark { background: var(--surface-inverse); color: #fff; }
.section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.section__head > div { display: flex; flex-direction: column; gap: 10px; }

/* Categorías */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.cat-card { padding: 32px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line); background: #fff; transition: background .15s; }
.cat-card:last-child { border-right: 0; }
.cat-card:hover { background: var(--brand-tint); color: var(--ink); }
.cat-card svg { width: 44px; height: 44px; color: var(--brand); }
.cat-card__name { font-size: 22px; font-weight: 800; }
.cat-card__desc { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.cat-card__more { font-size: 14px; font-weight: 700; color: var(--link); margin-top: auto; }

/* Tarjetas de producto */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .15s; }
.product-card:hover { box-shadow: var(--shadow-card); }
.product-card__media { aspect-ratio: 4 / 3; position: relative; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); background: #fff; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.product-card__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.product-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card__name { font-size: 18px; line-height: 24px; font-weight: 700; }
.product-card__name a { color: var(--ink); text-decoration: none; }
.product-card__name a::after { content: ""; position: absolute; inset: 0; }
.product-card { position: relative; }
.product-card__spec { font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; background: var(--surface-alt); padding: 6px 8px; border-radius: var(--radius-sm); }
.product-card__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-card__foot .btn { position: relative; z-index: 2; padding: 10px 14px; min-height: 44px; font-size: 14px; }
.price { font-size: 20px; font-weight: 800; }
.price small { font-size: 12px; font-weight: 400; color: var(--ink-muted); margin-left: 4px; }
.price--quote { font-size: 15px; font-weight: 700; color: var(--ink-muted); }

/* Catálogo: filtros */
.catalog { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.filters { flex: 1 1 240px; max-width: 280px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; }
.filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.filters legend { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; padding: 0; }
.filters label { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-height: 32px; }
.filters input[type="checkbox"], .filters input[type="radio"] { width: 18px; height: 18px; accent-color: var(--action); }
.catalog__results { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.catalog__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.select { padding: 11px 36px 11px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; font-size: 15px; }
.empty-state { padding: 48px; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--ink-muted); }

/* Ficha de producto */
.product-detail { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.product-detail__media { flex: 1 1 440px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #fff; position: relative; }
.product-detail__media img { width: 100%; height: 100%; object-fit: contain; padding: 32px; }
.product-detail__info { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table th, .spec-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 40%; color: var(--ink-muted); font-weight: 600; }
.spec-table td { font-family: var(--font-mono); font-size: 13px; }
.qty { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
.qty button { width: 44px; height: 46px; border: 0; background: #fff; cursor: pointer; font-size: 18px; font-weight: 700; }
.qty button:hover { background: var(--surface-alt); }
.qty input { width: 56px; text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-weight: 700; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.trust-list { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; }
.trust-list li { display: flex; gap: 10px; align-items: center; }
.trust-list svg { width: 20px; height: 20px; color: var(--brand); flex: none; }

/* Bloque empresas */
.b2b { background: var(--action); color: #fff; }
.b2b__inner { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: var(--section); padding-bottom: var(--section); }
.b2b__text { flex: 1 1 560px; display: flex; flex-direction: column; gap: 18px; }
.b2b__text .eyebrow { color: #fff; }
.b2b__text p { font-size: 18px; line-height: 28px; }
.b2b__actions { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li { font-size: 13px; font-weight: 700; border: 1px solid currentColor; padding: 7px 12px; border-radius: var(--radius-sm); }

/* Beneficios */
.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.benefit { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.benefit svg { width: 32px; height: 32px; color: var(--brand); }
.benefit h3 { font-size: 18px; font-weight: 800; }
.benefit p { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.section--dark .benefit { background: var(--surface-inverse-2); border-color: var(--line-dark); }
.section--dark .benefit p { color: var(--muted-dark); }

/* Listas numeradas (segmentos) */
.num-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.num-list li { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 800; }
.num-list > li > span:first-child { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--link); }
.section--dark .num-list, .section--dark .num-list li { border-color: var(--line-dark); }
.section--dark .num-list > li > span:first-child { color: var(--link-dark); }

/* Split */
.split { display: flex; flex-wrap: wrap; gap: 56px; }
.split > * { flex: 1 1 420px; min-width: 0; }

/* Formularios */
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.field input, .field textarea, .field select { font-weight: 400; font-size: 16px; padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; width: 100%; }
.field textarea { resize: vertical; min-height: 120px; }
.field small { font-weight: 400; color: var(--ink-muted); }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 32px; }
.contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list svg { width: 24px; height: 24px; color: var(--brand); flex: none; margin-top: 2px; }
.contact-list strong { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.contact-list a, .contact-list span { font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; }
.contact-list a:hover { color: var(--link); }
.notice { padding: 14px 16px; border-radius: var(--radius-md); background: var(--brand-tint); font-size: 14px; line-height: 20px; }
.notice--warm { background: #FFF4DC; }

/* Carrito */
.cart { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.cart__items { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cart-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item img { width: 88px; height: 88px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px; background: #fff; }
.cart-item__name { font-weight: 700; color: var(--ink); text-decoration: none; }
.cart-item__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--danger); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.cart__summary { flex: 1 1 360px; background: var(--surface-alt); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.summary-row--total { font-size: 22px; font-weight: 800; border-top: 1px solid var(--line); padding-top: 14px; }
.pay-methods { display: grid; gap: 8px; }
.pay-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.pay-option input { width: 18px; height: 18px; accent-color: var(--action); }
.pay-option small { display: block; font-weight: 400; color: var(--ink-muted); }

/* CTA final */
.cta-band { background: var(--surface-inverse); color: #fff; position: relative; overflow: hidden; }
.cta-band__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-top: 64px; padding-bottom: 64px; position: relative; z-index: 1; }

/* ==========================================================
   PIE DE PÁGINA
   ========================================================== */
.site-footer { background: var(--surface-alt); border-top: 4px solid var(--brand); }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.site-footer__brand { max-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.site-footer__brand img { width: 170px; }
.site-footer__brand p { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: 48px; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.site-footer__col h2 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.site-footer__col a { color: var(--ink); text-decoration: none; }
.site-footer__col a:hover { color: var(--link); text-decoration: underline; }
.site-footer__bottom { border-top: 1px solid var(--line); padding-top: 20px; padding-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-muted); }

/* WhatsApp flotante */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: var(--action); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.wa-float:hover { background: var(--action-hover); color: #fff; }
.wa-float svg { width: 28px; height: 28px; }

.wa-float { transition: transform .2s ease, background .15s; }
.wa-float:hover { transform: scale(1.06); }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); animation: wa-ring 2.4s ease-out 3; pointer-events: none; }
@keyframes wa-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; display: none; } }

/* Selector de vendedor */
.wa-chooser { position: fixed; inset: 0; z-index: 80; }
.wa-chooser__backdrop { position: absolute; inset: 0; background: rgba(10,10,10,.45); opacity: 0; transition: opacity .18s; }
.wa-chooser__panel {
  position: absolute; right: 20px; bottom: 92px; width: min(380px, calc(100vw - 32px));
  background: #fff; border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0,0,0,.3); overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right; transition: opacity .18s ease, transform .18s ease;
}
.wa-chooser.is-open .wa-chooser__backdrop { opacity: 1; }
.wa-chooser.is-open .wa-chooser__panel { opacity: 1; transform: none; }
.wa-chooser__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 20px 16px; background: var(--surface-inverse); color: #fff; position: relative; overflow: hidden; }
.wa-chooser__head::after { content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; background: repeating-linear-gradient(135deg, transparent 0 14px, var(--brand) 14px 18px, transparent 18px 26px); opacity: .9; pointer-events: none; }
.wa-chooser__title { font-size: 18px; font-weight: 800; }
.wa-chooser__sub { font-size: 13px; color: var(--muted-dark); margin-top: 4px; }
.wa-chooser__x { position: relative; z-index: 1; background: var(--surface-inverse); border: 1px solid var(--border-dark); color: #fff; width: 36px; height: 36px; border-radius: var(--radius-md); cursor: pointer; flex: none; }
.wa-chooser__x:hover { border-color: #fff; }
.wa-chooser__list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; }
.wa-seller { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: var(--radius-md); text-decoration: none; color: var(--ink); transition: background .12s; }
.wa-seller:hover, .wa-seller:focus-visible { background: var(--brand-tint); color: var(--ink); }
.wa-seller__avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; letter-spacing: .02em; box-shadow: inset 0 0 0 2px var(--brand); }
.wa-seller__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.wa-seller__name { font-weight: 800; font-size: 16px; }
.wa-seller__meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); }
.wa-seller__go { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--action); color: #fff; display: flex; align-items: center; justify-content: center; }
.wa-seller__go svg { width: 20px; height: 20px; }
.wa-chooser__foot { font-size: 12.5px; color: var(--ink-muted); padding: 0 20px 16px; }
@media (max-width: 560px) {
  .wa-chooser__panel { right: 0; left: 0; bottom: 0; width: 100%; border-radius: 12px 12px 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); }
}

/* Burbuja de ayuda */
.wa-nudge { position: fixed; right: 92px; bottom: 30px; z-index: 59; display: flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .25s, transform .25s; }
.wa-nudge.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-nudge__text { background: none; border: 0; padding: 12px 6px 12px 14px; font-size: 14px; cursor: pointer; text-align: left; }
.wa-nudge__text strong { color: var(--link); }
.wa-nudge__x { background: none; border: 0; width: 36px; height: 40px; cursor: pointer; color: var(--ink-muted); }
@media (max-width: 560px) { .wa-nudge { right: 88px; left: 16px; bottom: 28px; } }

/* Aviso emergente */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 14px 20px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 70; display: flex; gap: 12px; align-items: center; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--link-dark); }

/* ==========================================================
   MOVIMIENTO
   Curvas: salida rápida y suave (ease-out); entradas 300-600 ms, interacciones 150-250 ms.
   Todo se desactiva con "reducir movimiento" del sistema.
   ========================================================== */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); }

/* Transición entre páginas (navegadores compatibles; en el resto la navegación es normal) */
/* La regla @view-transition va en el <head> de cada página para poder desactivarla desde el panel */
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .18s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Entrada del hero */
.enter { display: inline-block; opacity: 0; transform: translateY(18px); animation: enter .7s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
.hero__row.enter { display: flex; }
@keyframes enter { to { opacity: 1; transform: none; } }

/* Isotipo y circuito */
.hero__mark { position: relative; align-items: center; aspect-ratio: 1 / 1; flex: 1 1 380px; max-width: 480px; }
.hero__mark picture { position: relative; z-index: 1; width: 58%; display: block; }
.hero__mark .hero__x { width: 100%; max-width: none; opacity: 0; transform: scale(.92); animation: x-in 1s var(--ease-out) .25s forwards, glow 4s ease-in-out 1.2s infinite alternate; }
@keyframes x-in { to { opacity: 1; transform: none; } }
.circuit { position: absolute; inset: 0; width: 100%; height: 100%; }
.circuit__traces path { fill: none; stroke: #263241; stroke-width: 2; }
.circuit__pads circle { fill: #0A0A0A; stroke: #2E3A48; stroke-width: 2; }
.circuit__pulses path { fill: none; stroke: var(--brand-bright); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 18 400; stroke-dashoffset: 418; opacity: 0; animation: pulse 3.6s linear infinite; animation-delay: var(--d, 0s); filter: drop-shadow(0 0 4px rgba(46,149,255,.9)); }
@keyframes pulse { 0% { stroke-dashoffset: 418; opacity: 0; } 8% { opacity: 1; } 60% { opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Aparición escalonada al hacer scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* Encabezado compacto con vidrio al hacer scroll */
.site-header { transition: background-color .25s ease, border-color .25s ease; }
.site-header__bar { transition: min-height .25s var(--ease-out); }
.site-header.is-scrolled { background: rgba(10, 10, 10, .82); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.site-header.is-scrolled .site-header__bar { min-height: 64px; }

/* Botones: la flecha avanza */
.btn svg { transition: transform .2s var(--ease-out); }
.btn--split:hover svg, .btn--split:focus-visible svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

/* Tarjetas de categoría con ilustración */
.cat-grid--media { gap: 20px; border: 0; border-radius: 0; overflow: visible; }
.cat-grid--media .cat-card { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s ease; }
.cat-grid--media .cat-card > span:not(.cat-card__media) { padding: 0 24px; }
.cat-grid--media .cat-card .cat-card__more { padding-bottom: 24px; }
.cat-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-inverse); margin-bottom: 6px; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.cat-grid--media .cat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(10,10,10,.12); border-color: var(--brand); background: #fff; }
.cat-grid--media .cat-card:hover .cat-card__media img { transform: scale(1.05); }
.cat-card__more { transition: color .15s ease; }
.cat-card:hover .cat-card__more { color: var(--action-hover); }

/* Tarjetas de producto */
.product-card { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s ease; }
.product-card:hover { transform: translateY(-3px); border-color: #C9D3E0; }
.product-card__media { overflow: hidden; }
.product-card__media img { transition: transform .5s var(--ease-out); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__media img[src*="ilustraciones"] { padding: 0; object-fit: cover; }
.product-detail__media img[src*="ilustraciones"] { padding: 0; object-fit: cover; border-radius: var(--radius-lg); }

/* Nosotros: líneas ilustradas */
.benefit--media { padding: 0; overflow: hidden; text-decoration: none; color: #fff; transition: transform .25s var(--ease-out), border-color .2s ease; }
.benefit--media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.benefit--media h3, .benefit--media p { padding: 0 20px; }
.benefit--media p { padding-bottom: 20px; }
.benefit--media:hover { transform: translateY(-4px); border-color: var(--brand); color: #fff; }

/* Encabezado de categoría con ilustración */
.page-hero__art { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 48%; object-fit: cover; opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }

/* Filtros plegables */
.filters-wrap { flex: 1 1 240px; max-width: 280px; position: sticky; top: 96px; }
.filters-wrap .filters { position: static; max-width: none; }
.filters-summary { display: none; }

/* Selector de vendedor: no arrastra el fondo */
.wa-chooser__panel { overscroll-behavior: contain; }
html.wa-open { overflow: hidden; }

/* ==========================================================
   MOTOR DE DISEÑO (data/diseno.json, pestaña Diseño del panel)
   ========================================================== */
:root { --font-head: var(--font-sans); --btn-radius: var(--radius-md); }
h1, h2, h3, .h-display, .h1, .h2, .h3, .cat-card__name, .price, .wa-chooser__title, .benefit h3 { font-family: var(--font-head); }
.btn, .icon-btn, .search-form, .search-form button, .qty, .pay-option, .field input, .field textarea, .field select, .select { border-radius: var(--btn-radius); }
.search-form button { border-radius: 0; }

/* Intensidad del movimiento */
html[data-anim="suave"] .reveal { transform: translateY(10px); transition-duration: .4s; }
html[data-anim="intensa"] .reveal { transform: translateY(40px); transition-duration: .8s; }
html[data-anim="intensa"] .enter { transform: translateY(36px); animation-duration: 1s; }
html[data-anim="ninguna"] *, html[data-anim="ninguna"] *::before, html[data-anim="ninguna"] *::after { animation: none !important; transition: none !important; }
html[data-anim="ninguna"] .reveal, html[data-anim="ninguna"] .enter, html[data-anim="ninguna"] .hero__x { opacity: 1 !important; transform: none !important; }

/* Estilo de aparición al hacer scroll */
html[data-reveal="desvanecer"] .reveal { transform: none; }
html[data-reveal="zoom"] .reveal { transform: scale(.94); }
html[data-reveal="deslizar"] .reveal { transform: translateX(-28px); }
html[data-reveal="ninguna"] .reveal { opacity: 1; transform: none; transition: none; }
html[data-reveal] .reveal.is-in { opacity: 1; transform: none; }

/* Movimiento de íconos */
.fx-icon { transform-box: fill-box; transform-origin: center; }
@keyframes ico-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ico-pulsar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes ico-girar { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes ico-brillar { 0%, 100% { filter: drop-shadow(0 0 0 rgba(46,149,255,0)); } 50% { filter: drop-shadow(0 0 8px rgba(46,149,255,.85)); } }
@keyframes ico-rebotar { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 50% { transform: translateY(0); } 65% { transform: translateY(-3px); } 80% { transform: translateY(0); } }
html[data-icons="flotar"][data-icons-mode="siempre"] .fx-icon { animation: ico-flotar 2.8s ease-in-out infinite; animation-delay: calc(var(--fx-i, 0) * -.45s); }
html[data-icons="pulsar"][data-icons-mode="siempre"] .fx-icon { animation: ico-pulsar 2.2s ease-in-out infinite; animation-delay: calc(var(--fx-i, 0) * -.35s); }
html[data-icons="girar"][data-icons-mode="siempre"] .fx-icon { animation: ico-girar 3s ease-in-out infinite; animation-delay: calc(var(--fx-i, 0) * -.5s); }
html[data-icons="brillar"][data-icons-mode="siempre"] .fx-icon { animation: ico-brillar 2.4s ease-in-out infinite; animation-delay: calc(var(--fx-i, 0) * -.4s); }
html[data-icons="rebotar"][data-icons-mode="siempre"] .fx-icon { animation: ico-rebotar 2.6s ease-in-out infinite; animation-delay: calc(var(--fx-i, 0) * -.4s); }
html[data-icons="flotar"][data-icons-mode="hover"] :is(a, div, li):hover > .fx-icon { animation: ico-flotar 1.2s ease-in-out infinite; }
html[data-icons="pulsar"][data-icons-mode="hover"] :is(a, div, li):hover > .fx-icon { animation: ico-pulsar .9s ease-in-out infinite; }
html[data-icons="girar"][data-icons-mode="hover"] :is(a, div, li):hover > .fx-icon { animation: ico-girar .8s ease-in-out; }
html[data-icons="brillar"][data-icons-mode="hover"] :is(a, div, li):hover > .fx-icon { animation: ico-brillar 1s ease-in-out infinite; }
html[data-icons="rebotar"][data-icons-mode="hover"] :is(a, div, li):hover > .fx-icon { animation: ico-rebotar .9s ease-in-out; }

/* Efecto al pasar el mouse sobre tarjetas */
html[data-hover="zoom"] .cat-grid--media .cat-card:hover, html[data-hover="zoom"] .product-card:hover, html[data-hover="zoom"] .benefit:hover { transform: scale(1.025); }
html[data-hover="brillo"] .cat-grid--media .cat-card:hover, html[data-hover="brillo"] .product-card:hover, html[data-hover="brillo"] .benefit:hover { transform: none; box-shadow: 0 0 0 1px var(--brand), 0 10px 34px rgba(0,126,238,.28); border-color: var(--brand); }
html[data-hover="ninguno"] .cat-grid--media .cat-card:hover, html[data-hover="ninguno"] .product-card:hover, html[data-hover="ninguno"] .benefit--media:hover { transform: none; box-shadow: none; }
html[data-hover="ninguno"] .cat-card:hover .cat-card__media img, html[data-hover="ninguno"] .product-card:hover .product-card__media img { transform: none; }
.benefit { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s ease; }

/* Portada */
html[data-circuit="off"] .circuit { display: none; }
html[data-xglow="off"] .hero__mark .hero__x { animation: x-in 1s var(--ease-out) .25s forwards; filter: none; }

/* WhatsApp a la izquierda */
html[data-wa-pos="izquierda"] .wa-float { right: auto; left: max(20px, env(safe-area-inset-left)); }
html[data-wa-pos="izquierda"] .wa-nudge { right: auto; left: 92px; }
html[data-wa-pos="izquierda"] .wa-chooser__panel { right: auto; left: 20px; transform-origin: bottom left; }

/* Bloques personalizados de la portada */
.cblock--claro { background: var(--surface); }
.cblock--gris { background: var(--surface-alt); }
.cblock--oscuro { background: var(--surface-inverse); color: #fff; }
.cblock--azul { background: var(--action); color: #fff; }
.cblock--oscuro .eyebrow, .cblock--azul .eyebrow { color: var(--link-dark); }
.cblock--azul .eyebrow { color: #fff; }
.cblock--oscuro .lead, .cblock--azul .lead { color: inherit; opacity: .88; }
.cblock__inner { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.cblock__inner--izquierda { flex-direction: row-reverse; }
.cblock__text { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; }
.cblock__text .lead + .lead { margin-top: -4px; }
.cblock__media { flex: 1 1 380px; min-width: 0; }
.cblock__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.cblock--banner .cblock__inner { flex-direction: column; text-align: center; gap: 20px; }
.cblock--banner .cblock__text { align-items: center; max-width: 760px; margin: 0 auto; flex-basis: auto; }
.cblock--oscuro .btn--primary, .cblock--azul .btn--primary { background: #fff; color: var(--ink); }

/* Banner con foto de fondo */
.cblock--photo { background-image: linear-gradient(rgba(10,10,10,.7), rgba(10,10,10,.7)), var(--bg-img); background-size: cover; background-position: center; color: #fff; }
.cblock--photo .eyebrow { color: #fff; }
.cblock--photo .lead { color: #fff; opacity: .92; }
.cblock--h-grande { padding: 140px 0; }

/* Carrusel de banners */
.carousel { position: relative; overflow: hidden; background: var(--surface-inverse); color: #fff; --h: 440px; }
.carousel.cblock--azul { background: var(--action); }
.carousel.cblock--claro, .carousel.cblock--gris { color: var(--ink); }
.carousel.cblock--claro { background: var(--surface); } .carousel.cblock--gris { background: var(--surface-alt); }
.carousel--grande { --h: 580px; } .carousel--completa { --h: min(86vh, 760px); }
.carousel__track { display: flex; transform: translateX(calc(var(--ci, 0) * -100%)); transition: transform .7s var(--ease-out); }
.carousel__slide { flex: 0 0 100%; min-height: var(--h); display: flex; align-items: center; background-size: cover; background-position: center; }
.carousel__slide.has-photo { background-image: linear-gradient(90deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.62) 55%, rgba(10,10,10,.3) 100%), var(--bg-img); color: #fff; }
.carousel--desvanecer .carousel__track { display: grid; transform: none; }
.carousel--desvanecer .carousel__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.carousel--desvanecer .carousel__slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.carousel__content { padding-top: 64px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.carousel__content > * { max-width: 680px; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.carousel__slide.is-active .carousel__content > * { opacity: 1; transform: none; }
.carousel__slide.is-active .carousel__content > *:nth-child(2) { transition-delay: .1s; }
.carousel__slide.is-active .carousel__content > *:nth-child(3) { transition-delay: .2s; }
.carousel__slide.is-active .carousel__content > *:nth-child(4) { transition-delay: .3s; }
.carousel__title { font-family: var(--font-head); font-size: clamp(32px, 5vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; margin: 0; }
.carousel__text { font-size: 18px; line-height: 28px; opacity: .9; }
.carousel__ctrls { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.carousel__ctrls > * { pointer-events: auto; }
.carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(10,10,10,.35); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease, border-color .15s ease; }
.carousel__btn:hover { background: rgba(10,10,10,.6); border-color: #fff; }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__pause { margin-left: auto; }
.carousel__dots { display: flex; gap: 2px; }
.carousel__dot { width: 28px; height: 44px; border: 0; background: none; position: relative; }
.carousel__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(255,255,255,.45); transition: transform .2s ease, background-color .2s ease; }
.carousel__dot[aria-current="true"]::before { background: var(--brand-bright); transform: scale(1.3); }
.carousel.cblock--claro .carousel__btn, .carousel.cblock--gris .carousel__btn { color: var(--ink); border-color: var(--border-strong); background: rgba(255,255,255,.7); }
.carousel.cblock--claro .carousel__dot::before, .carousel.cblock--gris .carousel__dot::before { background: var(--border-strong); }
@media (max-width: 560px) { .carousel { --h: 380px; } .carousel--grande { --h: 480px; } .carousel__content { padding-bottom: 88px; } }

/* Checkout */
.checkout { gap: 18px; }
.checkout__step { border: 0; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.checkout__step legend { font-family: var(--font-head); font-size: 16px; font-weight: 800; padding: 0 0 4px; }
.pay-option.is-off { opacity: .55; cursor: not-allowed; }
.pay-option:has(input:checked) { border-color: var(--action); box-shadow: 0 0 0 1px var(--action) inset; background: #F6FAFF; }
.checkout__error { background: #FDECEA; color: var(--danger); border-radius: var(--radius-md); padding: 12px 14px; font-size: 14px; font-weight: 700; }
.field input[aria-invalid="true"] { border-color: var(--danger); }
#cart-send[disabled] { opacity: .7; cursor: progress; }

/* Página del pedido */
.order__head { display: flex; gap: 18px; align-items: flex-start; padding: 28px; border-radius: var(--radius-lg); background: var(--surface-alt); margin-bottom: 24px; }
.order__head--pagado { background: #E7F6EF; } .order__head--rechazado { background: #FDECEA; } .order__head--transferencia { background: #FFF4DC; }
.order__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; background: #fff; }
.order__head--pagado .order__icon { color: var(--success); } .order__head--rechazado .order__icon { color: var(--danger); }
.order__grid { display: flex; flex-wrap: wrap; gap: 24px; }
.order__box { flex: 1 1 380px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; background: #fff; }
.order__table th, .order__table td { padding: 8px 6px; font-family: var(--font-sans); font-size: 14px; }
.order__table th { width: auto; }
.order__table td:last-child, .order__table th:last-child { text-align: right; white-space: nowrap; }
.order__dl { display: grid; gap: 4px; margin: 12px 0 0; } .order__dl dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-top: 8px; } .order__dl dd { margin: 0; }
.order__transfer { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; background: var(--surface-alt); border-radius: var(--radius-md); padding: 14px; white-space: pre-wrap; margin: 8px 0 0; }

/* Pasarela simulada */
.sim { border: 2px dashed var(--warm); border-radius: var(--radius-lg); padding: 28px; background: #fff; }
.sim__data { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 20px 0 0; padding: 16px; background: var(--surface-alt); border-radius: var(--radius-md); }
.sim__data dt { font-weight: 700; color: var(--ink-muted); font-size: 14px; } .sim__data dd { margin: 0; }

/* Páginas legales */
.legal { max-width: 820px; }
.legal__draft { margin-bottom: 24px; }
.legal__body h2 { font-size: 22px; margin: 32px 0 10px; }
.legal__body p, .legal__body li { font-size: 16px; line-height: 1.7; color: #2B323C; }
.legal__body ul { padding-left: 22px; margin: 8px 0; }

/* Vista previa del borrador */
.preview-bar { position: fixed; left: 16px; bottom: 16px; z-index: 90; background: var(--warm); color: var(--on-warm); font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: flex; gap: 10px; align-items: center; }
.preview-bar button { background: rgba(0,0,0,.12); border: 0; border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: 12px; }

/* ==========================================================
   CONTENIDO EDITABLE DESDE /admin
   ========================================================== */
[hidden] { display: none !important; }
/* Barra de aviso */
.announce { background: var(--action); color: #fff; font-size: 14px; font-weight: 600; }
.announce--oscuro { background: #000; border-bottom: 1px solid var(--line-dark); }
.announce--acento { background: var(--warm); color: var(--on-warm); }
.announce--acento a, .announce--acento .announce__x { color: var(--on-warm); }
.announce__msgs { min-width: 0; }
.announce__marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.announce__track { display: flex; width: max-content; animation: marquee var(--dur, 30s) linear infinite; }
.announce__group { display: flex; flex: none; }
.announce__item { position: relative; padding: 0 30px; white-space: nowrap; }
.announce__item::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: currentColor; opacity: .55; transform: rotate(45deg); }
.announce:hover .announce__track, .announce:focus-within .announce__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.announce__rot { display: inline-block; transition: opacity .28s ease, transform .28s ease; }
.announce__rot.is-out { opacity: 0; transform: translateY(-6px); }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; padding-right: 48px; position: relative; text-align: center; flex-wrap: wrap; }
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }
.announce__x { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: #fff; font-size: 14px; }
.announce__x:hover { background: rgba(255,255,255,.15); border-radius: var(--radius-md); }
/* Foto de fondo en portada y encabezados */
.hero.has-bg, .page-hero.has-bg { background-image: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.78) 55%, rgba(10,10,10,.55) 100%), var(--bg-img); background-size: cover; background-position: center; }
.page-hero.has-bg .page-hero__art { display: none; }

/* ==========================================================
   PULIDO (revisión de buenas prácticas)
   ========================================================== */
html { color-scheme: light; }
body { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 126, 238, .15); }
h1, h2, h3, .h-display, .h1, .h2 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
.price, .summary-row, .spec-table td, .cart-item strong, .qty input { font-variant-numeric: tabular-nums; }
[id] { scroll-margin-top: 96px; }
button, summary, label[for], .pay-option, [role="tab"] { cursor: pointer; }
select, .select { background-color: #fff; color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 1px; border-color: var(--action); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--danger); }
.btn.is-loading { pointer-events: none; opacity: .75; }
.product-card__name, .cart-item__name { overflow-wrap: anywhere; }
.catalog__results, .product-detail__info, .cart__items { min-width: 0; }
.wa-float { bottom: max(20px, env(safe-area-inset-bottom)); right: max(20px, env(safe-area-inset-right)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .enter, .hero__mark .hero__x { opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; }
  .circuit__pulses { display: none; }
  @view-transition { navigation: none; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 960px) {
  :root { --gutter: 20px; --section: 56px; }
  .menu-toggle { display: inline-flex; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-inverse); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; border-bottom: 1px solid var(--line-dark); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
  .header-actions .btn { display: none; }
  .site-header__logo img { width: 140px; }
  .filters { position: static; max-width: none; }
  .filters-wrap { position: static; max-width: none; flex-basis: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
  .filters-summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; font-weight: 700; list-style: none; }
  .filters-summary::-webkit-details-marker { display: none; }
  .filters-summary::after { content: "+"; font-size: 22px; font-weight: 500; color: var(--link); }
  .filters-wrap[open] .filters-summary::after { content: "–"; }
  .filters-wrap .filters { padding: 4px 16px 20px; }
  .cat-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .cat-grid--media .cat-card { border: 1px solid var(--line); }
  .cart__summary { position: static; }
  .hero__inner { padding-top: 40px; padding-bottom: 64px; }
  .hero__mark { order: -1; width: 220px; flex: 0 0 auto; margin: 0 auto; }
  .page-hero__art { max-width: 70%; opacity: .3; }
}
@media (max-width: 560px) {
  .cart-item { grid-template-columns: 64px 1fr; }
  .cart-item img { width: 64px; height: 64px; }
  .cart-item__actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .hero__ctas { flex-basis: 100%; }
  .form-card { padding: 20px; }
  .stripes { width: 160px; height: 160px; opacity: .6; }
}

/* Landing: formulario enviado */
.form-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.form-ok .order__icon { background: #E7F6EF; color: var(--success); }
.form-ok:focus { outline: none; }
.main-nav a[aria-current="true"] { border-bottom-color: var(--brand-bright); }