/* ==========================================================================
   Vibeth · styles.css — una sola hoja para index.html y cotizar.html
   Dirección "Cartel de imprenta 3D" en versión SOFT: papel crema, tinta azul-profunda y 12 pasteles (turquesa = acción, rosa chicle = marca).
   Mobile-first · sin dependencias · fuentes autoalojadas (assets/fonts, SIL OFL).
   Especificación: design-system/vibeth/pages/landing.md y pages/cotizar.md
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Fuentes */
@font-face{font-family:"Archivo";src:url("fonts/archivo-400.woff2") format("woff2");font-weight:400;font-stretch:100%;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-600.woff2") format("woff2");font-weight:600;font-stretch:100%;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-display-800-75.woff2") format("woff2");font-weight:800;font-stretch:75%;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url("fonts/fragment-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
/* Respaldos con métricas medidas (escritorio, iOS y Android): el cambio de fuente no mueve los renglones */
@font-face{font-family:"Archivo FB";src:local("Arial"),local("ArialMT"),local("Roboto"),local("Roboto-Regular");font-weight:400;size-adjust:98.6%;ascent-override:89.1%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Archivo FB";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");font-weight:600;size-adjust:95.3%;ascent-override:92.1%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Archivo Display FB";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");font-weight:800;size-adjust:98.6%;ascent-override:89.1%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"Archivo Display FB2";src:local("Helvetica Neue Condensed Bold"),local("HelveticaNeue-CondensedBold");font-weight:800;size-adjust:98.1%;ascent-override:89.5%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:"Archivo Display FB3";src:local("Roboto Condensed Bold"),local("RobotoCondensed-Bold");font-weight:800;size-adjust:96.8%;ascent-override:90.7%;descent-override:21.7%;line-gap-override:0%}
@font-face{font-family:"Archivo Display FB4";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:800;size-adjust:80.8%;ascent-override:108.6%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Archivo Display FB5";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:800;size-adjust:86%;ascent-override:102.1%;descent-override:24.4%;line-gap-override:0%}

/* ---------------------------------------------------------------- 2. Tokens */
/* Sistema "soft" (docs/paleta-soft.md · Figma "Vibeth / Soft").
   Los 12 pasteles de la paleta se usan SOLO como superficies, rellenos, ilustración y acentos; jamás como texto.
   Texto y bordes: tinta azul-profunda. Texto de acento: versiones OSCURAS derivadas (--rosa-text, --teal-deep, --indigo-deep).
   Se conservan los nombres de variable del sistema anterior (--rosa, --amarillo, --amarillo-soft, --shadow-print...) con valores nuevos
   para que la plataforma (base/portal/admin.css) herede el cambio sin tocar su código. */
:root{
  color-scheme:light;
  /* paleta de referencia (valores crudos, medidos de la imagen) */
  --p-turquesa:#1CDDDA; --p-azul-cielo:#A5D8EA; --p-salmon:#FB9F9E; --p-gris-azulado:#B4C1C7;
  --p-rosa-palido:#FFDDD8; --p-menta:#B0F0A5; --p-celeste:#AEF0FF; --p-rosa-chicle:#FFA9DD;
  --p-periwinkle:#A1B4FF; --p-durazno:#FFD09E; --p-rosa-suave:#FFB8D2; --p-verde-azulado:#72CCCB;
  /* superficies */
  --paper:#FFF9F5; --paper-2:#FFEEE9; --white:#FFFFFF; --ice:#EEF9FC;   /* paper-2 = rosa pálido #FFDDD8 al 45 % sobre papel */
  --ink:#1B2330; --ink-2:#232D3D; --ink-3:#334055;
  /* texto */
  --text:var(--ink); --text-soft:#3E495F; --text-soft-inv:#C9D3DF;
  /* marca y acción (los pasteles rellenan; el texto de acento usa la versión oscura) */
  --accion:var(--p-turquesa); --accion-hover:var(--p-verde-azulado); --turq-soft:#D3F8F7;
  --rosa:var(--p-rosa-chicle); --rosa-hover:#FF92D2; --rosa-soft:var(--p-rosa-suave); --rosa-text:#9C1A62;
  --amarillo:var(--p-durazno); --amarillo-soft:#FFEAD2;               /* heredados: ahora durazno (aviso / resaltado) */
  --teal-deep:#0A5F63; --indigo-deep:#34429B; --link:var(--teal-deep);
  /* estados */
  --error:#A62431; --error-bg:#FFE3E1; --ok:#1C6B3B; --ok-bg:#E3FADC;
  --disabled-bg:#E3E9EC; --disabled-text:#5A6772;
  /* líneas */
  --line:rgba(27,35,48,.14); --line-strong:rgba(27,35,48,.30); --line-inv:rgba(255,255,255,.18);
  --bd-ui:var(--ink); --focus:var(--ink);
  /* tipografía */
  --font-sans:"Archivo","Archivo FB",Arial,Roboto,sans-serif;
  --font-display:"Archivo","Archivo Display FB","Archivo Display FB2","Archivo Display FB3","Archivo Display FB4","Archivo Display FB5",Arial,sans-serif;
  --font-mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* espacio (base 4 px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;
  --pad:16px; --gutter:16px; --sec:52px; --header-h:64px;
  /* forma (más redondeada = más amable) */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:28px; --r-pill:999px;
  --bw-ui:1.5px; --bw-strong:2px;
  /* sombras "de imprenta" suaves: corrimiento de registro en tinta translúcida + difuminado de azul-tinta */
  --shadow-print:6px 6px 0 rgba(27,35,48,.13),0 16px 30px -14px rgba(27,35,48,.32);
  --shadow-print-sm:4px 4px 0 rgba(27,35,48,.13),0 10px 20px -12px rgba(27,35,48,.30);
  --shadow-soft:0 1px 2px rgba(27,35,48,.06),0 14px 32px -16px rgba(27,35,48,.28);
  --shadow-btn:0 8px 16px -8px rgba(10,95,99,.55);
  /* movimiento */
  --ease-out:cubic-bezier(.16,.84,.24,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-press:120ms; --dur:180ms; --dur-mid:300ms; --dur-reveal:600ms;
  /* flecha (Archivo no trae "→"; se dibuja con máscara SVG) */
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 4.6 17.8 14.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
@media (min-width:600px){:root{--pad:24px;--gutter:20px;--sec:80px}}
@media (min-width:900px){:root{--gutter:24px;--sec:104px;--header-h:76px}}
@media (min-width:1200px){:root{--pad:40px;--sec:104px}}
/* color del anillo de foco según la superficie (tinta sobre todo pastel; blanco solo sobre el pie en tinta) */
.on-dark{--focus:var(--white)}
.on-rosa,.on-yellow,.on-peach,.on-sky{--focus:var(--ink)}

/* ---------------------------------------------------------------- 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font-sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--p-rosa-chicle);color:var(--ink)}
.on-dark ::selection{background:var(--p-turquesa);color:var(--ink)}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,fieldset,blockquote{margin:0}
fieldset{padding:0;border:0;min-width:0}
legend{padding:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3,h4,b,strong,th{font-weight:600}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.js .no-js-only{display:none}
html:not(.js) .js-only{display:none!important}
.skip{position:absolute;left:var(--pad);top:-120px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--white);font-weight:600;text-decoration:none}
.skip:focus{top:10px}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{width:min(100% - 2*var(--pad),1360px);margin-inline:auto}

/* rótulo de sección: filete de 2 px + número y nombre en mono */
.sec-label{display:flex;align-items:baseline;gap:12px;border-top:2px solid currentColor;padding-top:12px;font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.sec-label b{font-weight:400;color:var(--rosa-text)}
.on-dark .sec-label b{color:var(--rosa)}
.on-yellow .sec-label b,.on-peach .sec-label b,.on-sky .sec-label b{color:var(--ink)}
.h2{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:clamp(2.25rem,10vw,3rem);line-height:.92;letter-spacing:-.012em}
.lead{font-size:1.125rem;line-height:1.5;max-width:36ch}
@media (min-width:600px){.h2{font-size:clamp(2.5rem,7vw,3.5rem)}.lead{font-size:1.1875rem}}
@media (min-width:900px){.h2{font-size:clamp(2.75rem,4.8vw + .25rem,4.75rem)}.lead{font-size:clamp(1.1875rem,.9vw + .6rem,1.375rem)}}

/* ---------------------------------------------------------------- 4. Botones */
.btn{--btn-bg:var(--accion);--btn-fg:var(--ink);--btn-bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:56px;padding:6px 8px 6px 24px;border:2px solid var(--btn-bd);border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);font:600 1.0625rem/1.2 var(--font-sans);text-decoration:none;text-align:left;
  box-shadow:var(--shadow-btn);
  cursor:pointer;transition:background-color var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease,transform var(--dur-press) ease,box-shadow var(--dur) ease}
.btn-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white);
  transition:transform var(--dur-mid) var(--ease-out),background-color var(--dur) ease,color var(--dur) ease}
.btn-ico .icon{width:20px;height:20px;stroke-width:2}
.btn:not([disabled]):not([aria-disabled="true"]):active{--btn-bg:var(--accion-hover);--btn-fg:var(--ink);transform:translateY(1px);box-shadow:none}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);padding:6px 22px;box-shadow:none}
.btn-ghost .icon{width:20px;height:20px;stroke-width:2;transition:transform var(--dur-mid) var(--ease-out)}
.btn-sm{min-height:44px;padding:4px 18px;font-size:1rem;gap:8px}
.btn-sm.btn-ghost{padding:4px 16px 4px 12px}
.btn[disabled],.btn[aria-disabled="true"]{--btn-bg:var(--disabled-bg);--btn-fg:var(--disabled-text);--btn-bd:var(--disabled-bg);box-shadow:none;cursor:not-allowed}
.btn[disabled] .btn-ico,.btn[aria-disabled="true"] .btn-ico{background:transparent;color:var(--disabled-text);box-shadow:inset 0 0 0 1.5px var(--disabled-text)}
@media (hover:hover){
  .btn-primary:not([disabled]):not([aria-disabled="true"]):hover{--btn-bg:var(--ink);--btn-fg:var(--white)}
  .btn-primary:not([disabled]):not([aria-disabled="true"]):hover .btn-ico{background:var(--accion);color:var(--ink);transform:translateY(-2px)}
  .btn-ghost:not([disabled]):not([aria-disabled="true"]):hover{--btn-bg:var(--ink);--btn-fg:var(--white)}
  .btn-ghost:hover .i-down{transform:translateY(2px)}
  .btn-ghost:hover .i-left{transform:translateX(-2px)}
}
/* enlace terciario con círculo de flecha */
.link-cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
.circ{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white);transition:transform var(--dur-mid) var(--ease-out),background-color var(--dur) ease}
.circ .icon{width:20px;height:20px;stroke-width:2}
@media (hover:hover){.link-cta:hover .circ{transform:translateX(3px)}}
/* botón de ícono */
.icon-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:var(--bw-ui) solid var(--ink);border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer;transition:background-color var(--dur) ease,color var(--dur) ease}
.icon-btn .icon{width:20px;height:20px;stroke-width:2}
@media (hover:hover){.icon-btn:hover{background:var(--turq-soft)}}
.icon-btn:active{background:var(--accion-hover)}

/* etiquetas (nunca parecen botones) */
.tag{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:2px 12px;border-radius:var(--r-pill);background:var(--rosa);color:var(--ink);font:400 .875rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink)}
.tag-outline{display:inline-flex;align-items:center;min-height:26px;padding:1px 9px;border:1.5px solid var(--ink);border-radius:var(--r-xs);font:400 .875rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* ---------------------------------------------------------------- 5. Encabezado y navegación */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
/* el desenfoque vive en un ::before: un backdrop-filter en el propio header lo volvería bloque contenedor de
   sus hijos position:fixed y el menú móvil (html.js .nav.is-open) quedaría colapsado a ~49 px de alto */
.site-header{isolation:isolate}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-header{background:transparent}
  .site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,249,245,.86);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px)}
}
.hdr{display:flex;align-items:center;gap:10px;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;color:var(--ink);text-decoration:none;border-radius:var(--r-xs)}
.brand-mark{width:30px;height:30px;fill:var(--ink)}
.brand-mark .hot{fill:var(--rosa);stroke:var(--ink);stroke-width:1.2}
.brand-word{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:1.75rem;line-height:1;letter-spacing:-.01em}
.nav ul{display:flex;flex-wrap:wrap;gap:2px 4px}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-pill);font-weight:600;font-size:1rem;text-decoration:none;transition:background-color var(--dur) ease}
.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease-out)}
.nav-link[aria-current]::after{transform:scaleX(1)}
@media (hover:hover){.nav-link:hover{background:var(--turq-soft)}}
.nav-cta{display:none}
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-6px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink)}
@media (hover:hover){.menu-btn:hover{background:var(--turq-soft)}}
.menu-btn .i-close,.menu-btn[aria-expanded="true"] .i-open{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
.hdr-cta-d{display:none}
@media (max-width:899.98px){
  .hdr{flex-wrap:wrap;padding-block:8px}
  .hdr-cta-m{padding:4px 16px}
  /* sin JS: encabezado estático y enlaces en renglón bajo la marca */
  html:not(.js) .site-header{position:relative}
  html:not(.js) .nav{width:100%;padding-bottom:8px}
  html:not(.js) .nav-link{padding:0 10px}
  html.js .menu-btn{display:inline-flex}
  html.js .nav{display:none}
  html.js .nav.is-open{display:block;position:fixed;inset:var(--header-h) 0 0 0;z-index:49;padding:8px var(--pad) 40px;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);border-top:1px solid var(--line)}
  html.js .nav.is-open ul{flex-direction:column;flex-wrap:nowrap;gap:0}
  html.js .nav.is-open li{border-bottom:1px solid var(--line)}
  html.js .nav.is-open .nav-link{display:flex;width:100%;min-height:64px;padding:0 4px;border-radius:0;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:2.5rem;line-height:1;letter-spacing:-.01em}
  html.js .nav.is-open .nav-link::after{display:none}
  html.js .nav.is-open .nav-cta{display:block;margin-top:24px;border:0}
  html.js .nav.is-open .nav-cta .btn{width:100%;justify-content:space-between}
  body.menu-open{overflow:hidden}
}
@media (max-width:899.98px) and (prefers-reduced-motion:no-preference){
  html.js .nav.is-open{animation:fade .15s ease both}
  html.js .nav.is-open li{animation:rise8 .3s var(--ease-out) both}
  html.js .nav.is-open li:nth-child(2){animation-delay:30ms}
  html.js .nav.is-open li:nth-child(3){animation-delay:60ms}
  html.js .nav.is-open li:nth-child(4){animation-delay:90ms}
  html.js .nav.is-open li:nth-child(5){animation-delay:120ms}
  html.js .nav.is-open li:nth-child(6){animation-delay:150ms}
}
@media (min-width:900px){
  .nav{margin-right:6px}
  .hdr-cta-m{display:none}
  .hdr-cta-d{display:inline-flex}
}

/* ---------------------------------------------------------------- 6. Héroe */
.hero{padding:20px 0 56px;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);container-type:inline-size;--fs-h1:clamp(3rem,15.5vw,3.5rem)}
.masthead{display:none}
.kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-weight:600;font-size:1rem;line-height:1.3}
.hero-title{margin-top:14px;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:var(--fs-h1);line-height:.9;letter-spacing:-.02em;text-wrap:nowrap}
.hero-title .row,.hero-title .l{display:block;white-space:nowrap}
/* "3D.": marcador de rosa chicle bajo la tinta (como resaltador); el texto sigue siendo tinta (contraste 9:1) */
.hl{color:var(--ink);padding:0 .06em;margin:0 -.03em;
  background:linear-gradient(180deg,transparent 40%,var(--rosa) 40% 88%,transparent 88%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-copy{margin-top:16px}
.hero .lead{color:var(--ink)}
.hero .preview-note{margin-top:14px;max-width:44ch;color:var(--ink)}
.cta-row{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.cta-row .btn{justify-content:space-between}
.cta-row .btn-ghost{justify-content:center}
/* flujo "Archivo → Revisión → Cotización → Pieza": flechas con máscara SVG */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin-top:18px;font-weight:600;font-size:1rem;line-height:1.4}
.flow li{display:inline-flex;align-items:center}
.flow li+li::before,.mh-step+.mh-step::before{content:"";display:inline-block;width:.72em;height:.72em;margin:0 .3em;background:var(--rosa-text);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
@media (max-width:339.98px){.flow{font-size:.9375rem}}
.specs{margin-top:22px;border-top:1px solid var(--ink)}
.specs div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.specs dt{font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.specs dd{font-weight:600;font-size:1rem;line-height:1.35;text-align:right}
.hero-fig{margin-top:40px}
.fig-tile{position:relative;overflow:hidden;background:var(--rosa-soft);background:radial-gradient(120% 90% at 12% 0%,var(--p-rosa-palido) 0%,var(--rosa-soft) 52%,var(--p-rosa-chicle) 135%);border:1.5px solid rgba(27,35,48,.10);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);aspect-ratio:700/640}
.fig-svg{width:100%;height:100%}
.fig-t{font-family:var(--font-mono);font-size:18px;fill:var(--ink);letter-spacing:.03em;text-transform:uppercase}
.fig-labels{display:none;transition:opacity .15s ease}
.fig-svg.is-scrub .fig-labels{opacity:0}
.fig-svg .lay.is-current .lay-top{fill:var(--turq-soft);stroke:var(--ink);stroke-width:2.5;stroke-opacity:1}
/* rótulos de la figura: solo donde miden ≥ 14 px reales */
@media (min-width:600px) and (max-width:899.98px){.fig-labels{display:inline}}
@media (min-width:1100px){.fig-labels{display:inline}.fig-t{font-size:20px}}
@media (min-width:1200px){.fig-t{font-size:18px}}
/* control "capa por capa" */
.scrub{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 14px;margin-top:14px}
html:not(.js) .scrub{display:none}
.scrub-l,.scrub-o{font:400 .875rem/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.scrub-o{min-width:5ch;font-size:.9375rem;text-align:right;font-variant-numeric:tabular-nums}
.scrub-hint{grid-column:1/-1;font-size:1rem;line-height:1.45;color:var(--text-soft)}
.scrub input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.scrub input[type=range]::-webkit-slider-runnable-track{height:14px;border-bottom:2px solid var(--ink);background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px calc((100% - 1.5px)/27)) bottom/100% 8px no-repeat}
.scrub input[type=range]::-moz-range-track{height:14px;border-bottom:2px solid var(--ink);background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px calc((100% - 1.5px)/27)) bottom/100% 8px no-repeat}
.scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--accion);border:2px solid var(--ink);box-shadow:inset 0 0 0 5px var(--accion),inset 0 0 0 7px var(--white)}
.scrub input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accion);border:2px solid var(--ink)}
.scrub input[type=range]:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:6px}
.fig-cap{display:none;margin-top:12px;font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.fig-cap b{font-weight:400;color:var(--ink)}
@media (min-width:600px){
  .fig-cap{display:block}
  .hero-grid{--fs-h1:min(15cqi,7.5rem)}
  .cta-row{flex-direction:row;flex-wrap:wrap;align-items:center}
  .cta-row .btn{justify-content:center}
  .hero .lead{max-width:44ch}
}
@media (min-width:600px) and (max-width:899.98px) and (max-height:500px){
  .hero-grid{--fs-h1:min(15cqi,7.5rem,17vh)}
}
@media (min-width:900px){
  .hero{padding:16px 0 80px}
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);--fs-h1:min(12cqi,10.5rem)}
  .masthead{display:flex;justify-content:space-between;gap:16px;grid-column:1/-1;padding:10px 0;border-bottom:1px solid var(--ink);font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
  .masthead .flowline{display:inline-flex;align-items:center}
  .mh-step{display:inline-flex;align-items:center}
  .mh-step+.mh-step::before{width:.85em;height:.85em;margin:0 .6em}
  .kicker,.hero-title{grid-column:1/-1}
  .kicker{margin-top:36px}
  .hero-title{margin-top:18px;line-height:.88}
  .hero-title .l{display:inline}
  .flow-m{display:none}
  .hero-copy{grid-column:1/6;margin-top:32px}
  .hero .lead{max-width:34ch}
  .hero-fig{grid-column:7/-1;grid-row:4/span 2;margin-top:calc(var(--fs-h1) * -.88 - 4px)}
  .fig-cap{text-align:right}
}
@supports not (font-size:1cqi){
  .hero-grid{--fs-h1:clamp(3rem,14.4vw,3.5rem)}
  @media (min-width:600px){.hero-grid{--fs-h1:min(calc((100vw - 2*var(--pad) - 20px)*.15),7.5rem)}}
  @media (min-width:600px) and (max-width:899.98px) and (max-height:500px){.hero-grid{--fs-h1:min(calc((100vw - 2*var(--pad) - 20px)*.15),7.5rem,17vh)}}
  @media (min-width:900px){.hero-grid{--fs-h1:min(calc((100vw - 2*var(--pad) - 20px)*.12),10.5rem)}}
}

/* ---------------------------------------------------------------- 7. Secciones */
.sec{padding:var(--sec) 0}
.on-dark{background:var(--ink);color:var(--white)}
/* bandas pastel: texto siempre en tinta. .on-yellow = nombre heredado de .on-peach (durazno) */
.on-yellow,.on-peach{background:var(--p-durazno);color:var(--ink)}
.on-sky{background:var(--p-azul-cielo);color:var(--ink)}
.on-yellow,.on-peach,.on-sky{border-radius:var(--r-xl)}   /* bandas "flotantes": esquinas suaves sobre el papel */
.sec-head{display:grid;gap:14px;margin-bottom:28px}
.sec-head .intro{max-width:46ch;font-size:1.125rem;line-height:1.5;color:var(--text-soft)}
.on-dark .sec-head .intro{color:var(--text-soft-inv)}
.on-yellow .sec-head .intro,.on-peach .sec-head .intro{color:var(--ink)}
@media (min-width:600px){.sec-head .intro{font-size:1.1875rem}}
@media (min-width:900px){
  .sec-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:28px;margin-bottom:48px}
  .sec-head .sec-label{grid-column:1/-1}
  .sec-head .h2{grid-column:1/9}
  .sec-head .intro{grid-column:9/-1;align-self:end;font-size:clamp(1.1875rem,.9vw + .6rem,1.375rem)}
}

/* 01 · Por qué Vibeth */
.sec-why{padding-top:calc(var(--sec) * .6)}
.why-statement{margin-top:18px;font-size:clamp(2.4rem,10.5vw,3.4rem)}
.why-statement em{font-style:normal;padding:0 .04em;background:linear-gradient(180deg,transparent 54%,var(--rosa) 54% 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.why-sub{margin-top:16px;max-width:52ch;font-size:1.125rem;line-height:1.5;color:var(--text-soft)}
.why-list{display:grid;margin-top:28px}
.why-item{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-content:start;gap:4px 12px;padding:12px 0 14px;border-top:1px solid var(--line-strong)}
/* número en "fichas de muestra" (eco de la paleta): turquesa, rosa, periwinkle, durazno; tinta encima */
.why-item .n{--chip:var(--p-turquesa);grid-row:span 2;align-self:start;justify-self:start;display:inline-grid;place-items:center;min-width:2.25rem;height:1.625rem;margin-top:3px;padding:0 6px;border-radius:var(--r-pill);background:var(--chip);color:var(--ink);font:400 .875rem/1 var(--font-mono)}
.why-item:nth-child(2) .n{--chip:var(--p-rosa-chicle)}
.why-item:nth-child(3) .n{--chip:var(--p-periwinkle)}
.why-item:nth-child(4) .n{--chip:var(--p-durazno)}
.why-item h3{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:1.625rem;line-height:1;letter-spacing:-.005em}
.why-item p{font-size:1rem;line-height:1.55;color:var(--text-soft)}
@media (min-width:600px){
  .why-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
  .why-sub{font-size:1.1875rem}
}
@media (min-width:900px){
  .why-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .why-grid .sec-label{grid-column:1/-1;margin-bottom:32px}
  .why-statement{grid-column:1/11;margin-top:0;font-size:clamp(3.2rem,6vw,6rem)}
  .why-sub{grid-column:7/-1;margin-top:32px;font-size:clamp(1.1875rem,.9vw + .6rem,1.375rem)}
  .why-list{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px}
  .why-item{grid-template-columns:1fr;align-content:start;gap:12px;padding-top:18px}
  .why-item .n{grid-row:auto;margin:0 0 20px}
  .why-item h3{font-size:clamp(1.75rem,2.2vw,2.25rem)}
  .why-item p{font-size:1.0625rem;line-height:1.6}
}

/* 02 · Usos (bento) */
.sec-usos{padding-top:0}
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.bento > li{display:flex}
.tile{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;padding:20px 20px 22px;border:1.5px solid rgba(27,35,48,.10);border-radius:var(--r-lg);background:var(--paper-2);color:var(--ink);overflow:hidden;text-decoration:none;
  --fT:#FFFFFF;--fL:#FFF1EC;--fR:#EDC9C0}
.t-label{font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.tile h3{margin-top:auto;padding-top:16px;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:2rem;line-height:.92;letter-spacing:-.01em}
.tile p{margin-top:8px;max-width:36ch;font-size:1rem;line-height:1.55}
/* una familia de color por uso (ver docs/paleta-soft.md): texto siempre en tinta */
.t-peri,.t-ink{background:var(--p-periwinkle)}                      /* Prototipos: plano técnico */
.t-peach,.t-yellow{background:var(--p-durazno);--fT:#FFF4E6;--fL:#FFE2BF;--fR:#EDB06E}   /* Maquetas: calidez escolar */
.t-sky,.t-line{background:var(--p-celeste);--fT:#FFFFFF;--fL:#E2FAFF;--fR:#86CFE0}      /* Refacciones: casa y taller */
.t-pink,.t-rosa{background:var(--p-rosa-suave);--fT:#FFE6F1;--fL:#FFC9DE;--fR:#EC8DB5}  /* Regalos */
.t-mint{background:var(--p-menta);--fT:#F4FFF1;--fL:#D9F8D2;--fR:#7FCB86}               /* Negocios */
.t-d{isolation:isolate}
.t-d::after{content:"";position:absolute;z-index:-1;right:0;bottom:0;width:min(62%,460px);height:100%;pointer-events:none;opacity:.22;
  background-image:radial-gradient(circle,var(--ink) 1.7px,transparent 2.1px);background-size:11px 11px;background-position:right bottom;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 100%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%);mask-image:radial-gradient(120% 100% at 100% 100%,#000 0%,rgba(0,0,0,.55) 38%,transparent 72%)}
.t-cta{background:var(--white);border-color:var(--ink);box-shadow:var(--shadow-print-sm);transition:background-color var(--dur) ease,color var(--dur) ease,transform var(--dur) ease}
.t-cta .go{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:14px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.t-cta .circ{transition:transform var(--dur-mid) var(--ease-out),background-color var(--dur) ease}
@media (hover:hover){
  .t-cta:hover{background:var(--accion);transform:translate(-1px,-1px)}
  .t-cta:hover .circ{transform:rotate(-45deg)}
}
/* dibujos de las tarjetas: isométricos de línea, sin texto */
.t-art{display:block;height:auto;overflow:visible}
.t-art path{stroke-linejoin:round;stroke-linecap:round}
.t-art .v{fill:none;stroke:var(--ink);stroke-width:2}
.t-art .s{stroke:var(--ink);stroke-width:2}
.t-art .ly{fill:none;stroke:var(--ink);stroke-width:1;stroke-opacity:.3}
.t-art .hole{fill:var(--ink);stroke:var(--ink);stroke-width:1.5}
.t-art .fT{fill:var(--fT)}.t-art .fL{fill:var(--fL)}.t-art .fR{fill:var(--fR)}
/* móvil: dibujo arriba a la derecha, a 88 px de alto */
.tile .t-art{position:absolute;top:16px;right:16px;height:88px;width:auto;max-width:42%}
.tile .t-art ~ h3{padding-top:78px}
/* dibujo técnico de "Prototipos" */
.proto-art{width:min(100%,300px);max-height:150px;margin:10px auto 0;color:var(--ink);overflow:visible}
.proto-art path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.proto-art .v{stroke-width:2.2}
.proto-art .h{stroke-width:1.4;stroke-dasharray:6 6;opacity:.6}
.proto-art .c{stroke-width:1.2;stroke-dasharray:14 4 2 4;stroke:var(--indigo-deep)}
.proto-art .e{stroke-width:1.2;opacity:.7}
.proto-art .d{stroke-width:1.6;stroke:var(--indigo-deep)}
.proto-art .f1{fill:#C9D5FF;stroke:none}.proto-art .f2{fill:#8196F2;stroke:none}.proto-art .f3{fill:#B7C6FF;stroke:none}
.proto-art .hole{fill:var(--ink)}
.proto-art .dl{font-family:var(--font-mono);font-size:20px;fill:var(--ink)}
.t-big h3{padding-top:12px;font-size:2.5rem}
/* teléfonos ≥ 360: Refacciones y Regalos van en par; las anchas llevan el dibujo junto al título */
@media (min-width:360px) and (max-width:599.98px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .b-proto,.b-maq,.b-neg,.b-otra{grid-column:1/-1}
  .t-wide{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;column-gap:14px}
  .t-wide .t-label{grid-area:1/1}
  .tile.t-wide .t-art{position:static;grid-area:1/2/3/3;height:88px;max-width:none}
  .tile.t-wide .t-art ~ h3{grid-area:2/1;align-self:end;padding-top:14px}
  .t-wide p{grid-area:3/1/4/3}
  .t-narrow{padding:16px 14px 18px}
  .tile.t-narrow .t-art{position:static;height:72px;max-width:100%;margin:10px 0 0 auto}
  .tile.t-narrow .t-art ~ h3{padding-top:12px;font-size:min(1.75rem,6.6vw)}
}
@media (min-width:600px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-proto,.b-maq{grid-column:1/-1}
  .tile{padding:24px 24px 26px}
  .tile h3{font-size:2.25rem}
  .t-big h3{font-size:3rem}
  .tile .t-art{top:20px;right:20px;height:100px}
  .tile .t-art ~ h3{padding-top:92px}
  .proto-art{max-height:220px;width:min(100%,360px)}
}
@media (min-width:600px) and (max-width:899.98px){
  .tile.t-narrow .t-art{position:static;height:96px;max-width:100%;margin:14px 0 0 auto}
  .tile.t-narrow .t-art ~ h3{padding-top:16px}
}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(260px,auto);gap:var(--gutter)}
  .b-proto{grid-column:1/7;grid-row:1/3}
  .b-maq{grid-column:7/-1}
  .b-ref{grid-column:7/10}
  .b-reg{grid-column:10/-1}
  .b-neg{grid-column:1/9}
  .b-otra{grid-column:9/-1}
  .tile{padding:28px 28px 30px}
  .tile h3{padding-top:40px;font-size:clamp(2.5rem,3.4vw,3.25rem)}
  .tile p{font-size:1.0625rem;line-height:1.6}
  .t-big h3{font-size:clamp(3.5rem,5.6vw,5.5rem)}
  .t-big .proto-art{max-height:none;width:min(78%,440px);margin:8px 0 0 auto}
  /* anchas: dibujo arriba a la derecha; angostas: en flujo tras el rótulo */
  .t-wide .t-art{top:24px;right:28px;width:min(36%,220px);height:auto;max-width:none}
  .t-wide .t-art ~ h3{padding-top:40px;max-width:60%}
  .t-narrow .t-art{position:static;width:min(72%,160px);height:auto;max-height:150px;max-width:none;margin:16px 0 0 auto}
  .t-narrow .t-art ~ h3{padding-top:24px;font-size:clamp(1.5rem,2.8vw,3.25rem)}
  .t-cta h3{padding-top:32px}
}

/* 03 · Materiales (fichas blancas sobre banda azul cielo) */
.mt-q,.mat-tabs{display:none}
.mats{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.mats-legend{display:none}
.mat{display:flex;flex-direction:column;min-width:0;padding:20px 20px 12px;border:1px solid rgba(27,35,48,.12);border-radius:var(--r-lg);background:var(--white);color:var(--ink);box-shadow:var(--shadow-soft)}
.mat:focus-visible{outline-offset:4px}
.mat-head{padding-bottom:14px}
.mat-q{font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-deep)}
.mat-code{margin-top:12px;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:clamp(4rem,20vw,5rem);line-height:.8;letter-spacing:-.02em}
.mat-name{margin-top:10px;font-size:1rem;color:var(--text-soft)}
.mat-tag{margin-top:6px;font-size:1.0625rem;line-height:1.45}
.spec{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;align-content:start;gap:4px 12px;padding:10px 0;border-top:1px solid var(--line)}
.spec dt{font-size:1rem;line-height:1.35}
.spec dd{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;font:400 .9375rem/1.45 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.spec dd .v{min-width:6ch}
.spec--text{grid-template-columns:minmax(0,1fr)}
.spec--text dt{font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.spec--text dd{display:block;font:400 1rem/1.5 var(--font-sans);letter-spacing:0;text-transform:none}
.spec--note dd{color:var(--text-soft)}
/* medidor de 3 segmentos: lleno = verde azulado profundo (≥ 7:1 sobre blanco), vacío = solo contorno */
.bar{display:inline-grid;grid-template-columns:repeat(3,16px);gap:3px;forced-color-adjust:none}
.bar i{height:10px;border:1.5px solid var(--ink-3);border-radius:3px}
.bar[data-v="1"] i:nth-child(-n+1),.bar[data-v="2"] i:nth-child(-n+2),.bar[data-v="3"] i:nth-child(-n+3){background:var(--teal-deep);border-color:var(--teal-deep)}
.mats-note{display:flex;gap:10px;margin-top:20px;max-width:72ch;font-size:1rem;line-height:1.5;color:var(--ink)}
.mats-note .icon{width:20px;height:20px;margin-top:2px;color:var(--teal-deep)}
@media (max-width:599.98px){
  html.js .mt-q{display:block;margin-bottom:10px;font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
  html.js .mat-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:12px;padding:4px;border:1.5px solid var(--ink);border-radius:var(--r-md);background:rgba(255,255,255,.45)}
  html.js .mats:not(.is-tabs) .mat:not(#mat-pla){display:none}
}
.mat-tabs button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:68px;padding:8px 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);text-align:left;--focus:var(--ink)}
.mat-tabs button[aria-selected="true"]{background:var(--accion);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.mat-tabs button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mt-code{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:1.75rem;line-height:.9}
.mt-use{font-size:1rem;font-weight:600;line-height:1.2}
@media (min-width:600px){
  .mats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:0}
  .mat{margin-bottom:var(--gutter);padding:22px 22px 14px}
  .mat-code{font-size:4.5rem}
  @supports (grid-template-rows:subgrid){
    .mat{display:grid;grid-row:span 10;grid-template-rows:subgrid;row-gap:0}
    .mat-head{display:grid;grid-row:span 4;grid-template-rows:subgrid}
    .mat-specs{display:grid;grid-row:span 6;grid-template-rows:subgrid}
  }
}
@media (min-width:1100px){
  .mats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mat{margin-bottom:0;padding:24px 22px 16px}
  .mat-code{font-size:clamp(4.5rem,6vw,6.5rem)}
  @supports (grid-template-rows:subgrid){
    .mats{grid-template-columns:minmax(160px,.8fr) repeat(4,minmax(0,1fr))}
    .mats-legend{display:grid;grid-row:span 10;grid-template-rows:subgrid;padding:24px 0 16px;font:400 .875rem/1.35 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
    .mats-legend span{padding:10px 12px 10px 0;border-top:1px solid var(--line-strong)}
    .mats-legend .lg-h{grid-row:span 4;align-self:end;padding:0 12px 14px 0;border-top:0;color:var(--ink)}
    .spec{grid-template-columns:minmax(0,1fr);align-items:start}
    .spec dt{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .spec dd{justify-content:flex-start}
  }
}

/* 04 · Tu archivo */
.files-grid{display:grid;gap:32px}
.fmt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.fmt{padding:12px 0 14px;border-top:2px solid var(--ink)}
.fmt-code{display:block;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:3.25rem;line-height:.85;letter-spacing:-.015em}
.fmt-code small{font-size:.42em;letter-spacing:0}
.fmt p{margin-top:8px;font-size:1rem;line-height:1.45;color:var(--text-soft)}
.fmt-note{grid-column:1/-1;display:flex;gap:12px;padding:16px 0 4px;border-top:1px solid var(--line-strong);font-size:1rem;line-height:1.5}
.fmt-note .icon{margin-top:1px;color:var(--rosa-text)}
.fmt-note strong{font-weight:600}
.tips{padding:20px 18px;border:1.5px solid var(--line-strong);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-soft)}
.tips h3{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:1.75rem;line-height:1;letter-spacing:-.005em}
.tips ol{margin-top:10px;counter-reset:tip}
.tips li{counter-increment:tip;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:1rem;line-height:1.45}
.tips li::before{content:counter(tip,decimal-leading-zero);padding-top:2px;font:400 .875rem/1.5 var(--font-mono);color:var(--rosa-text)}
.tips .btn{width:100%;margin-top:14px;justify-content:space-between}
@media (min-width:600px){
  .fmt-list{grid-template-columns:minmax(0,1fr);border-top:2px solid var(--ink)}
  .fmt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);align-items:end;gap:24px;padding:20px 0;border-top:0;border-bottom:1px solid var(--line-strong)}
  .fmt-code{font-size:4rem}
  .fmt p{margin-top:0;padding-bottom:4px}
  .fmt-note{border-top:0;padding-top:20px}
  .tips{padding:28px 26px}
}
@media (min-width:900px){
  .files-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .fmt-block{grid-column:1/8}
  .fmt-code{font-size:clamp(4.5rem,6.5vw,6.5rem)}
  .fmt p{font-size:1.0625rem}
  .tips{grid-column:9/-1;position:sticky;top:calc(var(--header-h) + 24px);padding:32px 30px}
  .tips h3{font-size:clamp(1.75rem,2.2vw,2.25rem)}
}

/* 05 · Proceso (banda amarilla) */
.steps{position:relative;display:grid}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:16px 0 18px;border-top:2px solid var(--ink)}
.step-n{grid-row:span 2;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:4.25rem;line-height:.8;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:2px var(--ink);font-variant-numeric:tabular-nums}
.step:last-child .step-n{color:var(--ink);-webkit-text-stroke:0}
@supports not (-webkit-text-stroke:2px black){.step-n{color:var(--ink)}}
.step h3{align-self:end;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:1.75rem;line-height:1;letter-spacing:-.005em}
.step p{max-width:36ch}
.steps-cta{display:flex;flex-direction:column;align-items:stretch;gap:24px;margin-top:24px}
.steps-cta .btn{justify-content:space-between}
/* orden de trabajo (ejemplo) */
.ticket{position:relative;z-index:2;padding:14px 18px 16px;border:1.5px solid var(--ink);border-radius:var(--r-md);background:var(--white);color:var(--ink);box-shadow:var(--shadow-print);font:400 .9375rem/1.45 var(--font-mono)}
.ticket-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px;padding-bottom:10px;border-bottom:1.5px dashed var(--ink);letter-spacing:.06em;text-transform:uppercase}
.ticket-h h3{font:400 .9375rem/1.3 var(--font-mono);letter-spacing:.06em}
.ticket dl{display:grid;gap:4px}
.ticket dl > div{display:grid;grid-template-columns:9ch minmax(0,1fr);gap:8px}
.ticket dt{color:var(--text-soft)}
.ticket dd{overflow-wrap:anywhere}
.dot{display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;background:var(--rosa);box-shadow:0 0 0 1.5px var(--ink);vertical-align:1px}
.dot--hollow{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.ticket--demo{width:min(320px,92%);margin-left:auto;transform:rotate(-3deg)}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter)}
  .steps::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--ink);transform-origin:left center;transition:transform .9s var(--ease-out)}
  @supports (grid-template-rows:subgrid){
    .steps{row-gap:0}
    .step{grid-row:span 3;grid-template-rows:subgrid;row-gap:14px}
    .step h3{align-self:start}
  }
  .step{position:relative;grid-template-columns:1fr;align-content:start;gap:14px;padding-top:34px;border-top:0}
  .step::before{content:"";position:absolute;top:-7px;left:0;width:16px;height:16px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);transition:transform .3s var(--ease-out) .5s}
  .step:last-child::before{background:var(--ink)}
  .step-n{grid-row:auto;font-size:clamp(6rem,8.5vw,8.5rem)}
  .step h3{margin-top:12px;font-size:clamp(1.75rem,2.2vw,2.25rem)}
  .steps-cta{flex-direction:row-reverse;justify-content:space-between;align-items:flex-end;margin-top:56px}
  .steps-cta .btn{justify-content:center}
  .ticket--demo{margin:0 8px 0 0}
}
@media (forced-colors:active){
  .step-n{color:CanvasText;-webkit-text-stroke:0}
  .hl{-webkit-text-fill-color:currentColor;background:none}
  .bar i{border-color:CanvasText}
  .bar[data-v="1"] i:nth-child(-n+1),.bar[data-v="2"] i:nth-child(-n+2),.bar[data-v="3"] i:nth-child(-n+3){background:CanvasText}
  .flow li+li::before,.mh-step+.mh-step::before{forced-color-adjust:none;background:CanvasText}
  /* Pestaña seleccionada: su único indicio es el fondo y el navegador lo anula. Se marca con subrayado y borde Highlight
     (no con un fondo Highlight: Chrome pinta un "backplate" blanco detrás del texto y lo hace ilegible). Sin forced-color-adjust:none, para que el foco siga bajo control del navegador. */
  .mat-tabs [role=tab]{border:2px solid transparent}
  .mat-tabs [role=tab][aria-selected="true"]{border-color:Highlight;background:Canvas;color:CanvasText;text-decoration:underline 3px;text-underline-offset:5px}
  .nav-link::after{background:LinkText}
}

/* 06 · Preguntas */
.faq-grid{display:grid;gap:28px}
.faq-aside .h2{margin-top:16px}
.faq-aside p:not(.sec-label){margin-top:16px;max-width:36ch;color:var(--text-soft)}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;list-style:none;cursor:pointer;font-size:1.1875rem;font-weight:600;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline-offset:2px}
.pm{display:grid;place-items:center;flex:none;width:40px;height:40px;border:var(--bw-ui) solid var(--ink);border-radius:50%;transition:transform var(--dur-mid) var(--ease-out),background-color var(--dur) ease,color var(--dur) ease}
.pm .icon{width:20px;height:20px;stroke-width:2}
@media (hover:hover){.faq summary:hover .pm{background:var(--turq-soft)}}
.faq details[open] .pm{transform:rotate(45deg);background:var(--accion);color:var(--ink)}
.faq .ans{max-width:62ch;padding:0 0 20px;color:var(--text-soft)}
.faq .ans a{color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:3px}
@media (min-width:900px){
  .faq-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .faq-aside{grid-column:1/5}
  .faq{grid-column:6/-1}
  .faq summary{min-height:72px;font-size:1.3125rem}
  .faq .ans{padding:0 56px 24px 0}
}

/* Banda final (rosa) */
.cta-band{position:relative;z-index:1;margin-bottom:calc(var(--r-xl) * -1);border-radius:0 0 var(--r-xl) var(--r-xl);padding:56px 0 calc(64px + var(--r-xl));background:var(--rosa-soft);background:radial-gradient(70% 90% at 100% 0%,var(--p-rosa-palido) 0%,transparent 62%),radial-gradient(60% 80% at 0% 100%,var(--p-rosa-chicle) 0%,transparent 64%),var(--rosa-soft);color:var(--ink)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;container-type:inline-size}
.cta-h{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:min(17cqi,5.5rem);line-height:.88;letter-spacing:-.02em}
.cta-h span{display:block;white-space:normal;overflow-wrap:anywhere}
.cta-side p{max-width:36ch;font-size:1.125rem;line-height:1.5}
.cta-side .btn{width:100%;margin-top:20px;justify-content:space-between}
.cta-side .fmt-line{margin-top:16px;font-size:1rem;font-weight:600;line-height:1.4}
.cta-side .fmt-line.preview-note{margin-top:10px;font-weight:400}
@media (min-width:600px){.cta-side .btn{width:auto}.cta-side p{font-size:1.1875rem}}
@media (min-width:900px){
  .cta-band{padding:112px 0 calc(120px + var(--r-xl))}
  .cta-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
  .cta-h{grid-column:1/8;font-size:min(9.4cqi,9rem)}
  .cta-side{grid-column:9/-1;padding-bottom:8px}
  .cta-side p{font-size:clamp(1.1875rem,.9vw + .6rem,1.375rem)}
}
@supports not (font-size:1cqi){
  .cta-h{font-size:min(calc((100vw - 2*var(--pad) - 20px)*.17),5.5rem)}
  @media (min-width:900px){.cta-h{font-size:min(calc((100vw - 2*var(--pad) - 20px)*.094),9rem)}}
}

/* Pie */
.footer{padding:calc(40px + var(--r-xl)) 0 20px;background:var(--ink);color:var(--white);overflow:hidden}
.footer .wrap{container-type:inline-size}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 20px}
.foot-claim{grid-column:1/-1;max-width:30ch;font-size:1.1875rem;line-height:1.4}
.foot-nav h2{font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft-inv)}
.foot-nav ul{margin-top:2px}
.foot-nav a{display:inline-block;min-width:44px;padding:10px 0;font-weight:600;font-size:1rem;line-height:1.5;text-decoration:none}
@media (hover:hover){.foot-nav a:hover{color:var(--accion);text-decoration:underline;text-underline-offset:4px}}
.foot-mark{margin-top:22px;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:min(37cqi,32rem);line-height:.75;letter-spacing:-.03em;white-space:nowrap;color:var(--paper)}
.dot3{color:var(--rosa)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 24px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-inv);font-size:1rem;color:var(--text-soft-inv)}
@supports not (font-size:1cqi){.foot-mark{font-size:min(calc((100vw - 2*var(--pad) - 20px)*.37),32rem)}}
@media (min-width:900px){
  .footer{padding-top:calc(72px + var(--r-xl))}
  .foot-top{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .foot-claim{grid-column:1/6;font-size:1.5rem}
  .foot-nav{grid-column:span 3}
  .foot-nav:first-of-type{grid-column:7/10}
  .foot-mark{margin-top:48px}
  .foot-bot{margin-top:28px}
}

/* ---------------------------------------------------------------- 8. Página de cotización */
.notice-strip{background:var(--p-durazno);color:var(--ink);border-bottom:1px solid rgba(27,35,48,.12)}
.notice-strip .wrap{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-size:1rem;line-height:1.45}
.notice-strip .icon{margin-top:-1px}
.notice-strip strong{font-weight:600}
.q-wrap{padding:28px 0 var(--sec)}
.q-grid{display:grid;grid-template-columns:minmax(0,1fr);container-type:inline-size}
.q-head h1{margin-top:18px;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:clamp(3rem,12vw,4rem);line-height:.9;letter-spacing:-.02em}
.q-head .lead{margin-top:14px;color:var(--ink)}
.nojs-note{display:flex;gap:12px;margin-top:24px;padding:16px;border:2px solid var(--ink);border-radius:var(--r-md);background:var(--white);font-size:1rem;line-height:1.5}
.nojs-note a{font-weight:600}
.q-main{margin-top:28px;min-width:0}
.q-aside{margin-top:40px}
/* pasos */
.stepper{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.stepper li{display:flex;align-items:center;gap:10px;flex:none}
.stepper li:not(:last-child)::after{content:"";width:28px;height:2px;border-radius:2px;background:var(--line-strong)}
.stepper li:not(:last-child){flex:1 1 auto}
.stepper li:not(:last-child)::after{flex:1 1 auto;min-width:16px}
.st-n{display:grid;place-items:center;flex:none;width:32px;height:32px;border:var(--bw-ui) solid var(--ink);border-radius:50%;font:400 .9375rem/1 var(--font-mono);font-variant-numeric:tabular-nums}
.st-n .icon{width:18px;height:18px;stroke-width:2.2}
.st-l{font-size:1rem;line-height:1.2;color:var(--text-soft);white-space:nowrap}
.stepper [aria-current="step"] .st-n{background:var(--accion);color:var(--ink);box-shadow:0 0 0 3px var(--turq-soft)}
.stepper .is-done .st-n{background:var(--ink);color:var(--white)}
.stepper [aria-current="step"] .st-l{font-weight:600;color:var(--ink)}
.stepper .is-done .st-l{color:var(--ink)}
@media (max-width:599.98px){.stepper li:not([aria-current="step"]) .st-l{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}
/* panel */
.q-panel{padding:20px;border:var(--bw-ui) solid var(--line-strong);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-soft)}
html.js .q-step:not(.is-current){display:none}
html:not(.js) .q-step + .q-step{margin-top:32px;padding-top:28px;border-top:2px dashed var(--ink)}
.q-step h2{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:1.75rem;line-height:1;letter-spacing:-.005em}
.q-step h2:focus{outline:none}
.q-step h2:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.q-intro{margin-top:10px;font-size:1rem;line-height:1.5;color:var(--text-soft)}
.q-step .q-body{margin-top:20px}
@media (prefers-reduced-motion:no-preference){html.js .q-step.is-current{animation:fade .2s ease both}}
/* barra de sesión (vista previa) */
.session-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:-4px 0 18px;padding:0 0 14px;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.4}
.session-who{display:flex;align-items:center;gap:8px;min-width:0}
.session-who .icon{width:20px;height:20px;color:var(--text-soft)}
.session-who span{min-width:0;overflow-wrap:anywhere}
.session-who b{font-weight:600}
/* pestañas de acceso */
.q-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:18px 0 20px;padding:4px;border:var(--bw-ui) solid var(--ink);border-radius:var(--r-sm)}
.q-tabs [role=tab]{min-height:44px;padding:6px 10px;border:0;border-radius:7px;background:transparent;color:var(--ink);font-weight:600;font-size:1rem;line-height:1.2}
.q-tabs [role=tab][aria-selected="true"]{background:var(--accion);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.q-tabs [role=tab]:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (hover:hover){.q-tabs [role=tab][aria-selected="false"]:hover{background:var(--turq-soft)}}
html:not(.js) .q-tabs{display:none}
@media (forced-colors:active){
  .q-tabs [role=tab]{border:2px solid transparent}
  .q-tabs [role=tab][aria-selected="true"]{border-color:Highlight;background:Canvas;color:CanvasText;text-decoration:underline 3px;text-underline-offset:5px}
  /* Paso actual, paso hecho, material elegido y arrastre: no dependen del color de relleno (que el navegador anula) */
  .stepper [aria-current="step"] .st-n{border:3px solid Highlight;box-shadow:none}
  .choice:has(input:checked){border-color:Highlight;box-shadow:inset 0 0 0 2px Highlight}
  .drop.is-over{border-style:solid;border-width:3px;border-color:Highlight}
}
html:not(.js) [role=tabpanel][hidden]{display:block!important}
html:not(.js) #panel-registro{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.panel-h{margin:18px 0 14px;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:1.5rem;line-height:1}
/* campos */
.field{display:grid;gap:8px;margin-bottom:20px}
.field > label:not(.drop),.field > legend,.lbl{font-size:1rem;font-weight:600;line-height:1.3}
.opt{font-weight:400;color:var(--text-soft)}
.input{display:block;width:100%;min-height:48px;padding:12px 14px;border:var(--bw-ui) solid var(--ink);border-radius:var(--r-sm);background:var(--white);color:var(--ink);font-size:1.0625rem;line-height:1.4;-webkit-appearance:none;appearance:none}
.input::placeholder{color:var(--text-soft);opacity:1}
.input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.input[aria-invalid="true"]{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error),0 0 0 4px var(--error-bg)}
textarea.input{min-height:132px;resize:vertical}
.help{font-size:1rem;line-height:1.45;color:var(--text-soft)}
.field-error{display:flex;align-items:flex-start;gap:8px;font-size:1rem;line-height:1.45;color:var(--error)}
.field-error:empty{display:none}
.field-error .icon,.drop-errors .icon,.es-list .icon{width:20px;height:20px;margin-top:1px;stroke-width:2}
.pw{position:relative}
.pw .input{min-height:52px;padding-right:112px}
.pw-toggle{position:absolute;top:50%;right:4px;min-height:44px;min-width:92px;padding:0 14px;border:var(--bw-ui) solid var(--ink);border-radius:var(--r-pill);background:var(--white);color:var(--ink);font-weight:600;font-size:1rem;transform:translateY(-50%);transition:background-color var(--dur) ease,color var(--dur) ease}
@media (hover:hover){.pw-toggle:hover{background:var(--turq-soft)}}
.pw-toggle:focus-visible{outline-offset:2px}
html:not(.js) .pw-toggle{display:none}
html:not(.js) .pw .input{padding-right:14px}
.q-note{display:flex;gap:10px;margin-top:14px;font-size:1rem;line-height:1.45;color:var(--text-soft)}
.q-note .icon{width:20px;height:20px;margin-top:1px}
.or{display:flex;align-items:center;gap:12px;margin:22px 0 10px;color:var(--text-soft);font-size:1rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.skip-account{display:grid;justify-items:start;gap:0}
.skip-account .help{margin-top:-2px}
.q-submit{width:100%;justify-content:space-between}
/* zona para soltar archivos */
.field--files{position:relative}
.drop-input{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;overflow:hidden}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:168px;padding:24px 16px;border:2px dashed var(--ink);border-radius:var(--r-lg);background:var(--ice);text-align:center;font-weight:400;cursor:pointer;transition:background-color var(--dur-press) ease,box-shadow var(--dur-press) ease}
@media (hover:hover){.drop:hover{background:var(--turq-soft)}}
.drop-input:focus-visible + .drop{outline:3px solid var(--ink);outline-offset:3px}
.drop.is-over{border-style:solid;background:var(--turq-soft);box-shadow:var(--shadow-print-sm)}
.drop.is-invalid{border:2px solid var(--error);background:var(--error-bg)}
.drop-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accion);color:var(--ink);box-shadow:var(--shadow-btn)}
.drop-t{font-size:1.1875rem;font-weight:600;line-height:1.25}
.drop-or{color:var(--text-soft);line-height:1}
.drop-btn{display:inline-flex;align-items:center;min-height:44px;padding:4px 18px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--white);font-weight:600;font-size:1rem}
.drop .help{max-width:34ch}
.drop-t--touch{display:none}
@media (hover:none) and (pointer:coarse){.drop-t--drag{display:none}.drop-t--touch{display:inline}}
.drop-errors{display:grid;gap:8px}
.drop-errors:empty{display:none}
.drop-errors li{display:flex;align-items:flex-start;gap:8px;font-size:1rem;line-height:1.45;color:var(--error);overflow-wrap:anywhere}
.file-count{margin-top:4px;font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.file-count:empty{display:none}
.file-list:empty{display:none}
.file-list{border-top:1px solid var(--line)}
.file{display:grid;grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.file-badge{display:grid;place-items:center;width:48px;height:56px;background:var(--p-celeste);font:400 .875rem/1 var(--font-mono);letter-spacing:.02em;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.file-meta{display:grid;gap:2px;min-width:0}
.file-name{font-weight:600;font-size:1rem;line-height:1.35;overflow-wrap:anywhere}
.file-size{font:400 .9375rem/1.3 var(--font-mono);color:var(--text-soft)}
@media (prefers-reduced-motion:no-preference){.file.is-new{animation:hl-new 1.2s ease-out both}}
/* material */
.choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px}
.choice{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:12px;min-height:64px;padding:12px 14px;border:var(--bw-ui) solid var(--ink);border-radius:var(--r-sm);background:var(--white);cursor:pointer;font-weight:400}
.choice input{grid-row:1/3;width:20px;height:20px;margin:0;accent-color:var(--ink);cursor:pointer}
.choice-code{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:1.5rem;line-height:1}
.choice-use{font-size:1rem;line-height:1.3;color:var(--text-soft)}
.choice--wide{grid-column:1/-1}
.choice--wide .choice-code{font-size:1.25rem}
.choice:has(input:checked){background:var(--turq-soft);box-shadow:inset 0 0 0 1px var(--ink)}
.choice:has(input:checked) .choice-use{color:var(--ink)}
.choice:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
@supports selector(:has(*)){.choice input:focus-visible{outline:none}}
@media (hover:hover){.choice:hover{background:var(--ice)}.choice:has(input:checked):hover{background:var(--turq-soft)}}
.choices.is-invalid .choice{border-color:var(--error);background:var(--error-bg)}
details.mini summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;list-style:none;cursor:pointer;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
details.mini summary::-webkit-details-marker{display:none}
details.mini summary .icon{width:20px;height:20px;stroke-width:2;transition:transform var(--dur-mid) var(--ease-out)}
details.mini[open] summary .icon{transform:rotate(45deg)}
.mini-body{display:grid;gap:6px;padding:4px 0 6px;font-size:1rem;line-height:1.5}
.mini-body b{font-weight:600}
.mini-body .link-cta{margin-top:2px}
/* cantidad */
.qty{display:inline-flex;align-items:center;gap:8px}
.qty-btn{width:48px;height:48px;border-radius:var(--r-sm)}
html:not(.js) .qty-btn{display:none}
.qty .input{width:88px;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty .input::-webkit-inner-spin-button,.qty .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* resumen de errores */
.error-summary{margin-bottom:20px;padding:16px 20px;border:2px solid var(--error);border-radius:var(--r-md);background:var(--error-bg);color:var(--ink);box-shadow:inset 8px 0 0 var(--p-salmon)}   /* salmón = acento de error (el texto de error usa --error) */
.error-summary:focus{outline:3px solid var(--ink);outline-offset:3px}
.es-title{font-size:1.0625rem;font-weight:600;line-height:1.35}
.es-list{margin-top:6px}
.es-list a{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--error);text-decoration:underline;text-underline-offset:3px;font-size:1rem;line-height:1.35}
/* acciones */
.q-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.q-actions .btn{width:100%;justify-content:space-between}
.q-actions .btn-ghost{justify-content:center}
.q-actions--end{margin-top:24px}
.req-note{display:flex;gap:10px;margin-top:14px;font-size:1rem;line-height:1.45;color:var(--ink)}
.q-flash{display:flex;gap:10px;margin-top:12px;padding:10px 12px;border:1.5px solid var(--ok);border-radius:var(--r-sm);background:var(--ok-bg);color:var(--ok);font-size:1rem;line-height:1.45}
.q-flash .icon{width:20px;height:20px;margin-top:1px;stroke-width:2}
.req-note .icon{width:20px;height:20px;margin-top:1px}
/* orden de trabajo (resumen) */
.ticket--summary{margin-top:22px;padding:20px 22px;box-shadow:var(--shadow-print)}
.ticket--summary dl > div{grid-template-columns:minmax(0,1fr);gap:0;padding:6px 0}
.ticket--summary dl > div + div{border-top:1px dashed var(--line)}
.tk-files li{overflow-wrap:anywhere}
.tk-notes{font:400 1rem/1.5 var(--font-sans);white-space:pre-wrap;overflow-wrap:anywhere}
.q-done-links{margin-top:18px}
/* cajetín y ayuda */
.cajetin h2{font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.caj-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:10px;border:var(--bw-ui) solid var(--ink);border-radius:var(--r-md);overflow:hidden;background:var(--ice)}
.caj-grid > div{padding:12px 14px;border-top:1px solid var(--line-strong)}
.caj-grid > div:nth-child(-n+1){border-top:0}
.caj-grid > .span2{grid-column:1/-1}
.caj-grid > div:not(.span2):nth-child(3){border-left:1px solid var(--line-strong)}
.caj-grid dt{font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.caj-grid dd{margin-top:2px;font-size:1rem;font-weight:600;line-height:1.35}
.q-help{margin-top:28px}
.q-help h2{font:400 .875rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.q-help ul{margin-top:6px}
.q-help li{border-top:1px solid var(--line)}
.q-help li:last-child{border-bottom:1px solid var(--line)}
.q-help .link-cta{width:100%;justify-content:space-between;min-height:56px;text-decoration:none}
.q-help .link-cta span:first-child{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.q-help .ext{width:18px;height:18px;color:var(--text-soft)}
@media (min-width:600px){
  .q-panel{padding:28px}
  .drop{min-height:200px;padding:24px}
  .q-actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center}
  .q-actions .btn{width:auto}
  .ticket--summary dl > div{grid-template-columns:11ch minmax(0,1fr);gap:12px}
}
@media (min-width:900px){
  .q-wrap{padding-top:48px}
  .q-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--gutter)}
  .q-head{grid-column:1/6;grid-row:1}
  .q-head h1{font-size:clamp(4rem,6.4cqi,6rem)}
  .nojs-note{grid-column:1/6;grid-row:2}
  .q-aside{grid-column:1/6;grid-row:3;align-self:start;position:sticky;top:calc(var(--header-h) + 24px);margin-top:40px}
  .q-main{grid-column:7/-1;grid-row:1/span 3;margin-top:0}
  .q-panel{padding:32px}
  .q-step h2{font-size:2.25rem}
}
.footer--compact{padding:48px 0 24px}
.footer--compact .foot-brand{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:2.5rem;line-height:.9;letter-spacing:-.02em}
.footer--compact .foot-claim{margin-top:14px}
.footer--compact .foot-links{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:18px}
.footer--compact .foot-links a{display:inline-block;min-width:44px;padding:10px 0;font-weight:600;line-height:1.5;text-decoration:none}
@media (hover:hover){.footer--compact .foot-links a:hover{color:var(--accion);text-decoration:underline;text-underline-offset:4px}}

/* ---------------------------------------------------------------- 9. Movimiento (mejora progresiva) */
@media (prefers-reduced-motion:no-preference){
  /* intro de la figura: solo el dibujo, nunca el texto ni los botones */
  .fig-part .lay{animation:layer .38s var(--ease-out) backwards;animation-delay:calc(150ms + var(--i) * 14ms)}
  .fig-part > .fig-sil,.fig-part > path,.fig-toplayer{animation:fade .3s ease .72s backwards}
  .fig-head,.fig-rail{animation:head-in .5s var(--ease-out) .45s backwards}
  .fig-bead{stroke-dasharray:100;animation:draw .6s ease-in-out .85s backwards}
  .fig-labels{animation:fade .4s ease .9s backwards}
  /* aparición al hacer scroll (solo si html.can-reveal) */
  html.js.can-reveal .reveal{transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
  html.js.can-reveal .reveal:not(.is-in){opacity:0;transform:translateY(24px)}
  html.js.can-reveal .steps.reveal:not(.is-in){opacity:1;transform:none}
  html.js.can-reveal .steps.reveal:not(.is-in)::before{transform:scaleX(0)}
  html.js.can-reveal .steps.reveal:not(.is-in) .step::before{transform:scale(.6)}
  .ticket--demo{transition:transform .7s var(--ease-out),opacity .7s var(--ease-out)}
  html.js.can-reveal .steps-cta:not(.is-in) .ticket--demo{opacity:0;transform:translateY(24px) rotate(2deg)}
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise8{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes layer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes head-in{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* 404 (solo 404.html): pie anclado al fondo en viewports altos */
body.is-404{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.is-404 .footer{margin-top:auto}
.nf{padding:48px 0 72px}
.nf-h{margin-top:18px;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:clamp(3rem,13vw,5.5rem);line-height:.92;letter-spacing:-.02em;max-width:12ch;overflow-wrap:anywhere}
.nf .lead{margin-top:20px}
.nf .cta-row{margin-top:24px;max-width:26rem}
@media (min-width:600px){.nf{padding:72px 0 96px}.nf-h{max-width:none}.nf .cta-row{max-width:none}}
@keyframes hl-new{from{background-color:var(--turq-soft)}to{background-color:transparent}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* Costo aproximado (cotizar.html) */
.estimate{margin:4px 0 20px;padding:16px 18px 18px;border:2px solid var(--ink);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-print-sm)}
.est-label{font:400 .8125rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--rosa-text);margin:0 0 6px}
.est-price{margin:0;font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:clamp(2.25rem,9vw,3.25rem);line-height:1;letter-spacing:-.01em;overflow-wrap:anywhere}
.est-meta{margin:6px 0 12px;font:400 .875rem/1.4 var(--font-mono);color:var(--text-soft)}
.est-legend{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--p-durazno);color:var(--ink);font-weight:600;font-size:1rem;line-height:1.4}
.est-legend .icon{flex:none;width:20px;height:20px;margin-top:2px}
.est-lines{list-style:none;margin:0;padding:0;font:400 .875rem/1.45 var(--font-mono)}
.est-lines li{padding:8px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}
.est-foot{margin:10px 0 0;font-size:.875rem;line-height:1.45;color:var(--text-soft)}
.est-none{margin:0;font-size:1rem;line-height:1.45;color:var(--text-soft)}