/* ==========================================================================
   LEDNI · hoja de estilos única
   Tokens copiados de tokens/*.css del design system. No se agregan estilos
   nuevos: cada clase traduce un componente de components/ tal cual.
   ========================================================================== */

/* --- tokens/fonts.css --------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:wght@400;500;700&family=Instrument+Serif:ital@0;1&display=swap");

/* --- tokens/colors.css -------------------------------------------------- */
:root{
  --ink-900:#141311;
  --ink-850:#191816;
  --ink-800:#1F1D1A;
  --ink-700:#292620;
  --ink-600:#38352E;
  --grey-500:#57534B;
  --grey-400:#7C776D;
  --grey-300:#A5A099;
  --grey-250:#BEB9B1;
  --grey-200:#CFCBC3;
  --grey-100:#DEDCD6;
  --paper-100:#EEEDE9;
  --paper-050:#F5F4F1;
  --pure-white:#FFFFFF;

  /* Color de pantalla: SOLO dentro de lo que muestra un panel LED. */
  --screen-red:#FF3B21;
  --screen-green:#00D97E;
  --screen-blue:#1F5CFF;
  --screen-amber:#FFB000;
  --screen-magenta:#E0189B;
  --screen-cyan:#00C4D6;

  --bg-page:var(--ink-900);
  --bg-surface:var(--ink-850);
  --bg-raised:var(--ink-800);
  --bg-inset:#100F0E;
  --text-strong:var(--paper-100);
  --text-body:var(--grey-250);
  --text-muted:var(--grey-400);
  --text-spec:var(--grey-300);
  --text-inverse:var(--ink-900);
  --line-hairline:#2C2924;
  --line-strong:#403C35;
  --line-contrast:var(--paper-100);
  --focus-ring:var(--paper-100);

  --action-fill:var(--paper-100);
  --action-fill-hover:var(--pure-white);
  --action-ink:var(--ink-900);
  --action-ghost-line:var(--line-strong);
  --action-ghost-line-hover:var(--paper-100);

  --status-ok:#8FA98A;
  --status-warn:#C9A15A;
  --status-error:#C0705E;
  --status-idle:var(--grey-400);
}

/* --- tokens/typography.css ---------------------------------------------- */
:root{
  --font-grotesk:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --font-serif-accent:"Instrument Serif",Georgia,serif;
  --font-display:var(--font-grotesk);
  --font-body:var(--font-grotesk);
  --font-spec:var(--font-mono);

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-black:800;

  --fs-display-1:clamp(3.5rem,11vw,10.5rem);
  --fs-display-2:clamp(2.75rem,7.5vw,6.5rem);
  --fs-display-3:clamp(2rem,4.5vw,3.75rem);
  --fs-h1:clamp(1.75rem,3vw,2.5rem);
  --fs-h2:1.5rem;
  --fs-h3:1.1875rem;
  --fs-body-lg:1.0625rem;
  --fs-body:0.9375rem;
  --fs-body-sm:0.8125rem;
  --fs-label:0.6875rem;
  --fs-spec:0.8125rem;
  --fs-spec-sm:0.6875rem;

  --lh-display:0.9;
  --lh-heading:1.08;
  --lh-body:1.55;
  --lh-tight:1.25;

  --ls-display:-0.035em;
  --ls-heading:-0.02em;
  --ls-body:0;
  --ls-label:0.14em;
  --ls-spec:0.02em;

  --text-display-1:var(--fw-black) var(--fs-display-1)/var(--lh-display) var(--font-display);
  --text-display-2:var(--fw-black) var(--fs-display-2)/var(--lh-display) var(--font-display);
  --text-display-3:var(--fw-bold) var(--fs-display-3)/var(--lh-heading) var(--font-display);
  --text-h1:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);
  --text-h2:var(--fw-bold) var(--fs-h2)/var(--lh-tight) var(--font-display);
  --text-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-tight) var(--font-display);
  --text-body-role:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
  --text-label-role:var(--fw-medium) var(--fs-label)/1.2 var(--font-mono);
  --text-spec-role:var(--fw-regular) var(--fs-spec)/1.4 var(--font-mono);
}

/* --- tokens/spacing.css ------------------------------------------------- */
:root{
  --mod:8px;
  --sp-0:0;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;
  --sp-10:128px;
  --sp-11:192px;

  --section-y:clamp(48px,8vw,128px);
  --gutter:clamp(16px,4vw,40px);
  --max-page:1440px;
  --max-text:62ch;

  --cabinet-1x1:1/1;
  --cabinet-1x2:1/2;
  --grid-cols:12;
  --grid-gap:1px;
}

/* --- tokens/borders.css ------------------------------------------------- */
:root{
  --hairline:1px;
  --border-hairline:1px solid var(--line-hairline);
  --border-strong:1px solid var(--line-strong);
  --border-contrast:1px solid var(--line-contrast);
  --radius-0:0px;
  --radius-1:2px;
  --radius-max:2px;
  --shadow-none:none;
  --shadow-overlay:0 24px 64px -16px rgba(0,0,0,.72);
  --shadow-inset-screen:inset 0 0 0 1px rgba(238,237,233,.08);
}

/* --- tokens/motion.css -------------------------------------------------- */
:root{
  --dur-1:100ms;
  --dur-2:160ms;
  --dur-3:240ms;
  --dur-4:420ms;
  --ease-out:cubic-bezier(.2,0,0,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);
  --ease-linear:linear;
  --transition-ui:color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out);
  --press-shift:1px;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--dur-4:0ms}
}

/* --- tokens/base.css ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-body);font:var(--text-body-role);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;color:var(--text-strong);text-wrap:balance}
h1{font:var(--text-h1);letter-spacing:var(--ls-heading)}
h2{font:var(--text-h2);letter-spacing:var(--ls-heading)}
h3{font:var(--text-h3);letter-spacing:var(--ls-heading)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-strong);text-decoration:none;border-bottom:1px solid var(--line-strong);transition:var(--transition-ui)}
a:hover{border-bottom-color:var(--line-contrast)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:2px}
img{display:block;max-width:100%}
::selection{background:var(--paper-100);color:var(--ink-900)}
.u-label{font:var(--text-label-role);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.u-spec{font:var(--text-spec-role);letter-spacing:var(--ls-spec);color:var(--text-spec);font-variant-numeric:tabular-nums}
.u-accent-italic{font-family:var(--font-serif-accent);font-style:italic;font-weight:400;letter-spacing:-0.01em}
.u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   LAYOUT · Chrome.jsx > Page, SiteHeader, SiteFooter, SpecStrip
   ========================================================================== */
.page{max-width:var(--max-page);margin:0 auto;padding:0 var(--gutter)}
.section-head{padding:var(--section-y) 0 var(--sp-6)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--paper-100);color:var(--ink-900);padding:12px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;border:0}
.skip-link:focus{left:var(--gutter);top:8px}

.site-header{position:sticky;top:0;z-index:40;background:var(--bg-page);border-bottom:1px solid var(--line-hairline)}
.site-header__bar{max-width:var(--max-page);margin:0 auto;padding:0 var(--gutter);height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header__logo{border:0;display:flex;align-items:center}
.site-header__logo img{height:34px;width:auto}
.site-nav{display:flex;gap:28px;align-items:center}
.site-nav a{border:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.site-nav a:hover{color:var(--text-strong)}
.site-nav a[aria-current="page"]{color:var(--text-strong)}
.site-header__end{display:flex;align-items:center;gap:10px}
.site-header__phone{font:var(--text-spec-role);font-size:var(--fs-spec-sm);color:var(--text-muted);border:0}
.site-header__phone:hover{color:var(--text-strong)}
.icon-btn.site-header__burger{display:none}
.site-nav-mobile{display:none;border-top:1px solid var(--line-hairline)}
.site-nav-mobile[data-open="true"]{display:block}
.site-nav-mobile a{display:block;border:0;border-bottom:1px solid var(--line-hairline);padding:16px var(--gutter);font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong)}

.site-footer{border-top:1px solid var(--line-strong);background:var(--bg-page)}
.site-footer__cols{max-width:var(--max-page);margin:0 auto;padding:var(--sp-8) var(--gutter) var(--sp-6);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:40px}
.site-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.site-footer__brand img{height:36px;width:auto}
.site-footer__brand p{font:var(--text-spec-role);font-size:var(--fs-spec-sm);color:var(--text-muted);max-width:26ch}
.site-footer__title{font:var(--text-label-role);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);padding-bottom:12px;border-bottom:1px solid var(--line-hairline)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{padding:9px 0;border-bottom:1px solid var(--line-hairline);font:var(--text-body-role);font-size:var(--fs-body-sm);color:var(--text-body)}
.site-footer li a{border:0;color:var(--text-body)}
.site-footer li a:hover{color:var(--text-strong)}
.site-footer__base{max-width:var(--max-page);margin:0 auto;padding:16px var(--gutter) 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:var(--text-spec-role);font-size:var(--fs-spec-sm);color:var(--grey-500)}

.spec-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:1px;background:var(--line-hairline);border-top:1px solid var(--line-hairline);border-bottom:1px solid var(--line-hairline)}
.spec-strip__cell{background:var(--bg-page);padding:16px var(--gutter)}
.spec-strip__label{font:var(--text-label-role);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.spec-strip__value{font:var(--text-spec-role);font-size:var(--fs-body);color:var(--text-strong);font-variant-numeric:tabular-nums}

/* ==========================================================================
   layout/SectionHeader.jsx
   ========================================================================== */
.section-header{display:grid;grid-template-columns:1fr;gap:24px;align-items:end;padding-bottom:20px;border-bottom:1px solid var(--line-strong)}
.section-header--actions{grid-template-columns:1fr auto}
.section-header__eyebrow{display:flex;gap:12px;align-items:baseline;font:var(--text-label-role);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:16px}
.section-header__index{color:var(--text-spec)}
.section-header__title{font:var(--text-display-3);letter-spacing:var(--ls-display);color:var(--text-strong);text-transform:uppercase;margin:0}
.section-header__desc{font:var(--text-body-role);font-size:var(--fs-body-lg);color:var(--text-body);max-width:52ch;margin-top:16px}
.section-header__actions{display:flex;gap:8px}

/* ==========================================================================
   layout/ModuleGrid.jsx · los bloques encastran, el hairline ES el gap
   ========================================================================== */
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:1px;background:var(--line-hairline);border:1px solid var(--line-hairline)}
.module-grid--200{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.module-grid > *{background:var(--bg-page);min-width:0}
.module-grid__cell{padding:24px 20px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.module-grid__cell h3{font:var(--text-h3);text-transform:uppercase;letter-spacing:var(--ls-heading);color:var(--text-strong);margin:0}
.module-grid__cell p{font:var(--text-spec-role);font-size:var(--fs-spec-sm);color:var(--text-muted);margin-top:16px}
.module-grid__cell--link{border:0;transition:var(--transition-ui)}
.module-grid__cell--link:hover h3{color:var(--text-strong)}
.module-grid__cell--link:hover p{color:var(--text-body)}

/* ==========================================================================
   layout/Divider.jsx
   ========================================================================== */
.divider{border:0;border-top:1px solid var(--line-hairline);margin:0;width:100%}
.divider--strong{border-top-color:var(--line-strong)}

/* ==========================================================================
   actions/Button.jsx
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:var(--radius-0);font-family:var(--font-mono);font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:var(--transition-ui);white-space:nowrap;height:44px;padding:0 20px;font-size:12px}
.btn--sm{height:32px;padding:0 12px;font-size:11px}
.btn--lg{height:56px;padding:0 28px;font-size:13px}
.btn--primary{background:var(--action-fill);color:var(--action-ink);border-color:var(--action-fill)}
.btn--primary:hover{background:var(--action-fill-hover);border-color:var(--action-fill-hover)}
.btn--secondary{background:transparent;color:var(--text-strong);border-color:var(--action-ghost-line)}
.btn--secondary:hover{border-color:var(--action-ghost-line-hover)}
.btn--ghost{background:transparent;color:var(--text-body);border-color:transparent;padding:0}
.btn--ghost:hover{color:var(--text-strong)}
.btn:active{transform:translateY(var(--press-shift))}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.38;pointer-events:none}
.btn--full{width:100%}

/* actions/IconButton.jsx */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid transparent;border-radius:var(--radius-0);cursor:pointer;transition:var(--transition-ui);background:transparent;color:var(--text-muted);padding:0}
.icon-btn:hover{color:var(--text-strong)}
.icon-btn svg{width:18px;height:18px;display:block}
.icon-btn svg[hidden]{display:none}

/* ==========================================================================
   data/Tag.jsx
   ========================================================================== */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid var(--line-strong);border-radius:var(--radius-0);font-family:var(--font-mono);font-size:var(--fs-spec-sm);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--text-body)}
.tag--quiet{color:var(--text-muted);border-color:var(--line-hairline)}
.tag--strong{color:var(--ink-900);background:var(--paper-100);border-color:var(--paper-100)}

/* data/Badge.jsx */
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-spec-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--text-body)}
.badge::before{content:"";width:6px;height:6px;background:var(--status-idle);flex:0 0 auto}
.badge--ok::before{background:var(--status-ok)}
.badge--warn::before{background:var(--status-warn)}
.badge--error::before{background:var(--status-error)}

/* data/StatBlock.jsx */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1px;background:var(--line-hairline);border:1px solid var(--line-hairline)}
.stat-grid--300{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));border:0;border-bottom:1px solid var(--line-hairline)}
.stat-grid > *{background:var(--bg-page);padding:24px 20px}
.stat__value{font-family:var(--font-display);font-weight:var(--fw-black);font-size:2rem;line-height:.95;letter-spacing:var(--ls-display);color:var(--text-strong);font-variant-numeric:tabular-nums}
.stat__label{font:var(--text-label-role);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-top:10px}
.stat__note{font:var(--text-spec-role);font-size:var(--fs-spec-sm);color:var(--grey-500);margin-top:6px}

/* data/SpecTable.jsx */
.spec-table{width:100%}
.spec-table dl{margin:0}
.spec-table__row{display:grid;grid-template-columns:minmax(90px,40%) 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-hairline)}
.spec-table__row dt{font:var(--text-spec-role);font-size:var(--fs-spec-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.spec-table__row dd{margin:0;font:var(--text-spec-role);color:var(--text-strong);font-variant-numeric:tabular-nums}
.spec-table__note{color:var(--text-muted)}
.spec-table__caption{font:var(--text-label-role);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);padding-bottom:10px;border-bottom:1px solid var(--line-strong)}

/* ==========================================================================
   surfaces/ImagePlaceholder.jsx · marcador gris, no hay foto real todavía
   ========================================================================== */
.ph{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:repeating-linear-gradient(135deg,var(--ink-800) 0 6px,var(--ink-850) 6px 12px);border:1px solid var(--line-hairline);display:flex;align-items:flex-end}
.ph--4-3{aspect-ratio:4/3}
.ph--1-1{aspect-ratio:1/1}
.ph--21-9{aspect-ratio:21/9}
.ph--16-9{aspect-ratio:16/9}
.ph--flush{border-left:0;border-right:0}
.ph--screen{background:linear-gradient(115deg,var(--screen-red),var(--screen-amber),var(--screen-magenta))}
.ph--screen::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.45) 0 1px,transparent 1px 4px)}
.ph__label{position:relative;margin:12px;padding:5px 8px;background:var(--ink-900);color:var(--paper-100);font:var(--text-spec-role);font-size:var(--fs-spec-sm);letter-spacing:.06em;max-width:calc(100% - 24px)}
.ph--screen .ph__label{background:rgba(20,19,17,.82)}
/* .ph con una foto real cargada: el marcador gris se vuelve la imagen.
   Si la imagen falta o falla, queda la textura gris de .ph como estado "foto pendiente". */
.ph--image{margin:0;aspect-ratio:auto;display:block}
.ph--image > img{display:block;width:100%;height:auto}
.ph--image .ph__label{position:absolute;left:0;bottom:0}
/* Foto dentro de un recuadro de proporción fija (tarjetas, galería): recorta. */
.ph--fill.ph--4-3{aspect-ratio:4/3}
.ph--fill.ph--1-1{aspect-ratio:1/1}
.ph--fill.ph--16-9{aspect-ratio:16/9}
.ph--fill.ph--21-9{aspect-ratio:21/9}
.ph--image.ph--fill > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Banda de imagen del inicio: contenida, centrada, nunca a sangre. */
.hero-media{max-width:var(--max-page);margin:0 auto;padding:var(--sp-6) var(--gutter) var(--sp-7)}
.hero-media .ph--image{max-width:460px;margin-inline:auto}

/* surfaces/Card.jsx */
.card{border:1px solid var(--line-hairline);border-radius:var(--radius-0);box-shadow:var(--shadow-none);padding:20px;background:var(--bg-surface)}
.card--bare{background:transparent}
.card--inset{background:var(--bg-inset)}

/* surfaces/ProductCard.jsx */
.product-card{display:flex;flex-direction:column;background:var(--bg-page);border-radius:var(--radius-0);height:100%}
.product-card .ph{border:0;border-bottom:1px solid var(--line-hairline)}
.product-card__body{padding:20px;display:flex;flex-direction:column;gap:14px;flex:1}
.product-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.product-card__name{font:var(--text-h2);letter-spacing:var(--ls-heading);color:var(--text-strong);text-transform:uppercase;margin:0}
.product-card__line{font:var(--text-body-role);color:var(--text-body);margin:0}
.product-card__specs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-hairline)}
.product-card__specs li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-hairline);font:var(--text-spec-role);font-size:var(--fs-spec-sm)}
.product-card__specs .k{color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-label)}
.product-card__specs .v{color:var(--text-strong);font-variant-numeric:tabular-nums}
.product-card__action{margin-top:auto;align-self:flex-start;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-strong);border-bottom:1px solid var(--line-strong);transition:var(--transition-ui)}
.product-card__action:hover{border-bottom-color:var(--line-contrast)}

/* ==========================================================================
   navigation/Tabs.jsx
   ========================================================================== */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line-strong);overflow-x:auto}
.tabs button{appearance:none;background:transparent;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;padding:0 18px;height:48px;color:var(--text-muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:var(--transition-ui)}
.tabs button:hover{color:var(--text-strong)}
.tabs button[aria-selected="true"],.tabs button[aria-pressed="true"]{border-bottom-color:var(--line-contrast);color:var(--text-strong)}
.tabs__count{color:var(--grey-500);margin-left:8px}

/* navigation/Accordion.jsx */
.accordion{border-top:1px solid var(--line-hairline)}
.accordion__item{border-bottom:1px solid var(--line-hairline)}
.accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding:16px 0;background:transparent;border:0;cursor:pointer;text-align:left;color:var(--text-strong);font:var(--text-h3);letter-spacing:var(--ls-heading);transition:var(--transition-ui)}
.accordion__sign{font-family:var(--font-mono);font-size:16px;color:var(--text-muted);flex:0 0 auto}
.accordion__panel{padding-bottom:20px;max-width:var(--max-text);font:var(--text-body-role);color:var(--text-body)}
.accordion__panel[hidden]{display:none}

/* ==========================================================================
   forms/*.jsx
   ========================================================================== */
.field{display:flex;flex-direction:column}
.field__label{display:block;font:var(--text-label-role);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.field__box{width:100%;height:48px;padding:0 14px;background:var(--bg-inset);color:var(--text-strong);border:1px solid var(--line-hairline);border-radius:var(--radius-0);font-family:var(--font-body);font-size:var(--fs-body);transition:var(--transition-ui);outline:none}
.field__box::placeholder{color:var(--grey-500)}
.field__box:focus,.field__box:focus-visible{border-color:var(--line-contrast)}
textarea.field__box{height:auto;padding:12px 14px;line-height:var(--lh-body);resize:vertical}
select.field__box{appearance:none;padding-right:40px}
.field__select{position:relative}
.field__caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:var(--text-spec-role);color:var(--text-muted);pointer-events:none}
.field__hint{font:var(--text-spec-role);font-size:var(--fs-spec-sm);color:var(--text-muted);margin-top:6px}
.field__error{font:var(--text-spec-role);font-size:var(--fs-spec-sm);color:var(--status-error);margin-top:6px}
.field__error[hidden]{display:none}
.field--invalid .field__box{border-color:var(--status-error)}
.field--invalid .field__hint{display:none}

.checkbox{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.checkbox input{position:absolute;opacity:0;width:0;height:0}
.checkbox__box{width:18px;height:18px;margin-top:2px;flex:0 0 auto;border:1px solid var(--line-strong);background:transparent;display:flex;align-items:center;justify-content:center;transition:var(--transition-ui)}
.checkbox__box::after{content:"";width:8px;height:8px;background:var(--ink-900);opacity:0}
.checkbox input:checked + .checkbox__box{border-color:var(--line-contrast);background:var(--paper-100)}
.checkbox input:checked + .checkbox__box::after{opacity:1}
.checkbox input:focus-visible + .checkbox__box{outline:1px solid var(--focus-ring);outline-offset:2px}
.checkbox__text{font:var(--text-body-role);color:var(--text-body)}

.radio-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.radio-group label{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;background:var(--bg-page);color:var(--text-body);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:center;cursor:pointer;transition:var(--transition-ui)}
.radio-group input{position:absolute;opacity:0;width:0;height:0}
.radio-group label:has(input:checked){background:var(--paper-100);color:var(--ink-900)}
.radio-group label:has(input:focus-visible){outline:1px solid var(--focus-ring);outline-offset:2px}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
legend.field__label{padding:0}

/* ==========================================================================
   Bloques de página
   ========================================================================== */
.hero{padding:clamp(32px,6vw,72px) 0 clamp(24px,4vw,40px)}
.hero__tags{display:flex;gap:12px;align-items:center;margin-bottom:clamp(20px,4vw,36px);flex-wrap:wrap}
.hero__title{font:var(--text-display-1);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-strong);margin:0}
.hero__foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:24px;align-items:end;margin-top:clamp(24px,4vw,40px)}
.hero__foot p{font:var(--text-body-role);font-size:var(--fs-body-lg);color:var(--text-body);max-width:44ch}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px}
.split--300{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.split--start{align-items:start}
.split--end{align-items:end}
.split__note{font:var(--text-spec-role);font-size:var(--fs-spec-sm);color:var(--text-muted);margin-top:12px}

.closing{border-top:1px solid var(--line-strong)}
.closing__inner{padding:var(--section-y) 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:32px;align-items:end}
.closing__title{font:var(--text-display-2);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-strong);margin:0}
.closing__side{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.closing__side p{font:var(--text-body-role);font-size:var(--fs-body-lg);color:var(--text-body);max-width:40ch}

.breadcrumb{padding:clamp(24px,4vw,48px) 0 var(--sp-5);display:flex;gap:10px;align-items:center;flex-wrap:wrap;font:var(--text-spec-role);font-size:var(--fs-spec-sm);text-transform:uppercase;letter-spacing:.1em}
.breadcrumb ol{list-style:none;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0;padding:0}
.breadcrumb a{border:0;color:var(--text-muted)}
.breadcrumb a:hover{color:var(--text-strong)}
.breadcrumb__sep{color:var(--grey-500)}
.breadcrumb__current{color:var(--text-strong)}

.product-head{border-top:1px solid var(--line-hairline);border-bottom:1px solid var(--line-hairline)}
.product-head__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px;padding:var(--sp-7) 0}
.product-head__tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.product-head__title{font:var(--text-display-2);font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-strong);margin:0}
.product-head__lead{font:var(--text-body-role);font-size:var(--fs-body-lg);color:var(--text-body);max-width:44ch;margin-top:24px}
.product-gallery{display:grid;gap:1px;background:var(--line-hairline);align-content:start}
.product-gallery__pair{display:grid;grid-template-columns:1fr 1fr;gap:1px}

.quote-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1px;background:var(--line-hairline);border:1px solid var(--line-hairline);margin-bottom:var(--section-y)}
.quote-form{background:var(--bg-page);padding:clamp(20px,3vw,32px);display:grid;gap:20px;align-content:start}
.quote-aside{background:var(--bg-page);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:24px}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cabinet-grid{display:grid;gap:1px;background:var(--line-hairline);border:1px solid var(--line-hairline);max-width:100%}
.cabinet-grid div{aspect-ratio:1/1;background:var(--ink-800)}
.form-status{font:var(--text-spec-role);font-size:var(--fs-spec-sm);color:var(--status-error)}
.form-status[hidden]{display:none}

.contact-line{padding:var(--sp-7) 0 var(--section-y);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.contact-line span{font:var(--text-body-role);color:var(--text-body)}

.confirm{padding:clamp(48px,8vw,120px) 0;max-width:56ch}
.confirm h1{font:var(--text-display-2);font-size:clamp(2rem,5vw,3.5rem);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-strong);margin:24px 0 20px}
.confirm p{font:var(--text-body-role);font-size:var(--fs-body-lg);color:var(--text-body)}
.confirm[hidden]{display:none}

/* ==========================================================================
   Movimiento · fundido y 1px, nada más. Se apaga con prefers-reduced-motion.
   ========================================================================== */
.js-reveal .reveal{opacity:0;transform:translateY(1px);transition:opacity var(--dur-4) var(--ease-out),transform var(--dur-4) var(--ease-out)}
.js-reveal .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
  .btn:active{transform:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Responsive · 1440 / 768 / 375
   ========================================================================== */
@media (max-width:860px){
  .site-nav{display:none}
  .site-header__phone{display:none}
  .icon-btn.site-header__burger{display:inline-flex}
}
@media (max-width:640px){
  .section-header--actions{grid-template-columns:1fr;align-items:start}
  .field-pair{grid-template-columns:1fr}
  .site-footer__base{flex-direction:column;gap:8px}
}
@media (max-width:420px){
  .hero__tags{gap:8px}
  .btn-row .btn{flex:1 1 auto;justify-content:center}
}