/* ════════════════════════════════════════════════════════════════════════
CandeMaker · componentes del sistema «CM Placa» (rediseño premium, v2)
Los tokens viven sólo en brand.v2.css; esta hoja compone con ellos.
Blanco y gris «aluminio», grafito y azul de acción. Cortes:
teléfono < 720 · tablet vertical 720–1023 · tablet horizontal 1024–1279 ·
escritorio ≥ 1280. Tracking según el tamaño (titulares negativos, sólo con
html.fonts-ready), peso 700/800 sólo en titulares, precios y cifras.
Marco grafito en todas las páginas (encabezado y pie) y, como máximo, dos
escenarios grafito por página (.cm-oscuro): un solo tono, sin degradados.
Las transiciones de menú, ventanas, visor, preguntas y galería viven en
cm-interaccion.v2.css y aquí no se repiten.
════════════════════════════════════════════════════════════════════════ */
/* Los tokens (:root, cortes y modo oscuro) viven sólo en brand.v2.css: una sola fuente de verdad. */
/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--c-bg);font-synthesis:none}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);font-size:var(--t-body);line-height:var(--lh-body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--f-display);font-weight:700;color:inherit;text-wrap:balance}
p{margin:0}
img,svg,video,canvas{display:block;max-width:100%}
a{color:var(--c-blue-deep);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input,select,textarea{font-size:16px} /* sin zoom automático en iOS */
::selection{background:var(--c-seleccion)}
:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px;border-radius:var(--r-s)}
a,button,label,summary,[role="button"],[role="tab"]{touch-action:manipulation}
button,[role="button"],[role="tab"],.cm-btn,.cm-chip,.cm-seg__btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.cm-num{font-variant-numeric:tabular-nums}
.cm-salto{position:absolute;left:var(--gutter);top:8px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);font-family:var(--f-display);font-weight:600;font-size:15px;box-shadow:var(--sh-2);transform:translateY(-200%);transition:transform var(--d-ui) var(--e-out)}
.cm-salto:focus,.cm-salto:focus-visible{transform:none}
main#contenido:focus{outline:none}
.cm-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* El contenedor de cada página */
.cm-page{width:100%;max-width:100%;overflow-x:clip;background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);font-size:var(--t-body);line-height:var(--lh-body)}
.cm-wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.cm-wrap--narrow{max-width:calc(760px + var(--gutter) * 2)}
.cm-section{padding-block:var(--sec-y)}
/* Ronda 8 (dueño): dos apartados vecinos nunca comparten fondo. Tono «a» = fondo de página (blanco / negro) y
tono «b» = .cm-section--alt (gris claro / gris); tras una portada grafito va «b» y el último antes del pie es «b».
Las tarjetas usan --c-card, que sobre «b» pasa a --c-card-alt (blanco en claro, gris más claro en oscuro). */
.cm-section--alt{background:var(--c-bg-2);--c-card:var(--c-card-alt)}
/* Cierre de página (Ronda 8): placa grafito dentro de un apartado gris, como la de Inicio; así el pie, negro,
nunca se junta con otro negro */
.cm-placa{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);padding:40px 24px;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 80px rgba(5,7,9,.22)}
.cm-placa::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(640px 360px at 0% 0%,rgba(95,176,238,.10),transparent 70%)}
@media (min-width:720px){.cm-placa{padding:56px 48px}}
@media (min-width:1024px){.cm-placa{padding:64px}}
.cm-section--tight{padding-block:calc(var(--sec-y) * .6)}
/* Sin línea automática entre secciones: se separan por aire y cambio de superficie (01 §4) */
.cm-rule{height:1px;background:var(--c-line);border:0;margin:0}
/* ── Escenario grafito ────────────────────────────────────────────────────
Los mismos componentes, con los tokens invertidos dentro del bloque: títulos
blancos, texto #C2CBD5 / #AEB8C4, líneas #2A333D, enlaces #8CC8F5 y acento
#5FB0EE. Contraste sobre #10161D, en ese orden: 18.2 · 11.1 · 9.1 · 9.9 · 7.7 a 1. */
.cm-oscuro,.cm-section--dark{
--c-ink:#FFFFFF; --c-ink-2:#C2CBD5; --c-ink-3:#AEB8C4; --c-ink-4:#8A949E;
--c-bg:#050709; --c-bg-2:#1C1F24; --c-bg-3:#2A2E35;
--c-surface:#1C1F24; --c-surface-glass:rgba(28,31,36,.94);
--c-line:#2A2E35; --c-line-2:#555C66; --c-line-ui:#5F6772;
--c-card:linear-gradient(180deg,#1F2328 0%,#15181C 100%); --c-card-alt:linear-gradient(180deg,#2C3139 0%,#22262C 100%);
--c-card-borde:0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.05);
--c-blue:#5FB0EE; --c-blue-deep:#8CC8F5; --c-blue-tint:rgba(95,176,238,.14); --c-blue-line:#3D6D96;
--c-acento:#5FB0EE; --c-seleccion:#24527A;
--c-ok:#4CC38A; --c-ok-tint:rgba(76,195,138,.14);
--c-warn:#F0B35A; --c-warn-tint:rgba(240,179,90,.12); --c-warn-ink:#F3DDB5;
--c-err:#F97066; --c-err-tint:rgba(249,112,102,.14); --c-err-ink:#FDD3CF;
--sh-ring:0 0 0 1px rgba(255,255,255,.07);
background:var(--c-dark);color:var(--c-ink)
}
.cm-oscuro ::selection{background:#24527A;color:#fff}
.cm-oscuro :focus-visible{outline-color:#5FB0EE}
.cm-oscuro .cm-btn--secondary{background:transparent}
.cm-oscuro .cm-btn--dark{background:#fff;color:var(--c-dark)}
/* El aviso toma sus colores de los tokens de estado (invertidos arriba): tinte oscuro y texto claro, legible dentro del grafito */
.cm-oscuro .cm-note--warn strong{color:#FFF1DA}
@media (hover:hover) and (pointer:fine){
.cm-oscuro .cm-btn--secondary:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cm-oscuro .cm-btn--dark:hover{background:#E9EEF3}
}
/* Buscador sobre grafito: campo oscuro con borde visible (3:1) y anillo de foco claro */
.cm-oscuro .cm-search{background:var(--c-bg-2)}
.cm-oscuro .cm-search input::placeholder{color:var(--c-ink-4)}
.cm-oscuro .cm-search:focus-within{border-color:#5FB0EE;box-shadow:0 0 0 3px rgba(95,176,238,.25)}
.cm-oscuro .cm-search__x{background:var(--c-bg-3)}
/* ── Entrada de la portada de cada página (una vez, al cargar) ────────────
Opacidad y 8 px en 360 ms (--d-reveal) con --e-out, escalonado de 50 ms
(máx. 150 ms); el bloque visual sólo aparece. No bloquea nada: lo que queda
abajo (la herramienta del Cotizador, el asesor de Materiales) ya está listo
para usarse. Con «reducir movimiento», sólo un fundido breve (nunca cero). */
@keyframes cmEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cmAparece{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
[data-cm-entrada="etiqueta"]{animation:cmEntra var(--d-reveal) var(--e-out) 0ms both}
[data-cm-entrada="titulo"]{animation:cmEntra var(--d-reveal) var(--e-out) 50ms both}
[data-cm-entrada="texto"]{animation:cmEntra var(--d-reveal) var(--e-out) 100ms both}
[data-cm-entrada="botones"]{animation:cmEntra var(--d-reveal) var(--e-out) 150ms both}
[data-cm-entrada="galeria"]{animation:cmAparece var(--d-reveal) var(--e-out) 60ms both}
}
@media (prefers-reduced-motion:reduce){
[data-cm-entrada]{animation:cmAparece var(--d-ui) ease-out both}
}
/* ── Tipografía (01 §3) ────────────────────────────────────────────────────
Peso 800 en el display; 700 en H2, precios y cifras; 600 en H3/H4, botones,
etiquetas y opciones. El tracking negativo depende del tamaño y sólo se
aplica cuando Manrope ya cargó (html.fonts-ready, cm-movimiento.js): con la
fuente de respaldo se vería apretado. */
.cm-display{font-family:var(--f-display);font-weight:800;font-size:var(--t-display);line-height:var(--lh-display)}
.cm-h1-largo{font-family:var(--f-display);font-weight:700;font-size:var(--t-h1-largo);line-height:var(--lh-h1-largo);max-width:24ch}
.cm-h2{font-family:var(--f-display);font-weight:700;font-size:var(--t-h2);line-height:var(--lh-h2)}
.cm-h3{font-family:var(--f-display);font-weight:600;font-size:var(--t-h3);line-height:var(--lh-h3)}
.cm-h4{font-family:var(--f-display);font-weight:600;font-size:var(--t-h4);line-height:var(--lh-h4)}
html.fonts-ready .cm-display{letter-spacing:var(--ls-display)}
html.fonts-ready .cm-h1-largo{letter-spacing:var(--ls-h1-largo)}
html.fonts-ready .cm-h2{letter-spacing:var(--ls-h2)}
html.fonts-ready .cm-h3{letter-spacing:var(--ls-h3)}
.cm-lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--c-ink-2);max-width:52ch;text-wrap:pretty}
.cm-text{font-size:var(--t-body);line-height:var(--lh-body);color:var(--c-ink-2)}
.cm-small{font-size:var(--t-small);line-height:var(--lh-small);color:var(--c-ink-3)}
.cm-cap{font-size:var(--t-cap);line-height:var(--lh-cap);color:var(--c-ink-3)}
.cm-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:14px;line-height:1.3;color:var(--c-ink-3)}
/* Etiqueta de sección: sólo la palabra, en versales con aire, en gris (el azul es acción). Máximo 3–5 por página. */
.cm-eyebrow--cota{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.cm-oscuro .cm-eyebrow,.cm-section--dark .cm-eyebrow{color:var(--c-ink-3)}
.cm-measure{max-width:62ch}
.cm-head{display:grid;gap:12px;margin-bottom:var(--sec-gap)}
.cm-head > .cm-lead,.cm-head > .cm-text{margin-top:4px}
.cm-head--split{grid-template-columns:1fr;align-items:end}
.cm-head .cm-head{margin-bottom:0}
.cm-head--split > .cm-btn,.cm-head--split > .cm-link{justify-self:start}
@media (min-width:1024px){.cm-head--split{grid-template-columns:minmax(0,1fr) auto;column-gap:48px}}
/* ── Botones y enlaces ────────────────────────────────────────────────────
Una jerarquía de acción por bloque: un solo botón relleno (azul de acción
#0B6FBD, 5.22:1), secundario de línea y terciario como enlace con flecha.
El verde de WhatsApp, una vez por sección y como acción final. Píldora
siempre (01 §6). Manrope 600; respuesta al apoyar el dedo (scale .97). */
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-pill);border:1px solid transparent;font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.2;letter-spacing:var(--ls-boton);text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer;
transition:transform var(--d-press) var(--e-out),background-color var(--d-ui) ease,border-color var(--d-ui) ease,color var(--d-ui) ease,box-shadow var(--d-ui) ease}
.cm-btn svg{flex:none;width:18px;height:18px}
.cm-btn:active{transform:scale(.97);transition-duration:var(--d-tap)}
.cm-btn[disabled],.cm-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.cm-btn--primary{background:var(--c-blue-btn);color:#fff}
.cm-btn--primary:active{background:var(--c-blue-btn-press)}
.cm-btn--secondary{background:transparent;color:var(--c-ink);border-color:var(--c-line-2)}
.cm-btn--dark{background:var(--c-ink);color:var(--c-bg)}
.cm-btn--wa{background:var(--c-wa);color:var(--c-wa-ink)}
.cm-btn--wa:active{background:var(--c-wa-press)}
.cm-btn--ondark{background:#fff;color:var(--c-dark)}
.cm-btn--ondark-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.cm-btn--quiet{background:var(--c-bg-2);color:var(--c-ink)}
.cm-btn--sm{min-height:44px;padding:0 18px;font-size:15px}
.cm-btn--block{display:flex;width:100%}
.cm-btn--icon{width:44px;min-height:44px;padding:0;border-radius:50%}
.cm-oscuro .cm-btn--secondary{border-color:rgba(255,255,255,.35);color:#fff}
@media (hover:hover) and (pointer:fine){
.cm-btn--primary:hover{background:var(--c-blue-btn-press)}
.cm-btn--secondary:hover{background:var(--c-bg-2);border-color:var(--c-line-2)}
.cm-btn--dark:hover{opacity:.88}
.cm-btn--wa:hover{background:var(--c-wa-press)}
.cm-btn--ondark:hover{background:#E9EEF3}
.cm-btn--ondark-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cm-btn--quiet:hover{background:var(--c-bg-3)}
}
.cm-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:719.98px){.cm-actions--stack{flex-direction:column;align-items:stretch}.cm-actions--stack .cm-btn{width:100%}}
/* Botones de ancho completo en teléfono: una etiqueta larga pasa a dos líneas en vez de salirse */
@media (max-width:719.98px){.cm-actions--stack .cm-btn,.cm-btn--block{white-space:normal;text-wrap:balance;padding-block:10px}}
.cm-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:var(--ls-boton);color:var(--c-blue-deep);text-decoration:none;transition:color var(--d-ui) ease,opacity var(--d-out) ease}
.cm-link .cm-arrow{transition:transform var(--d-ui) var(--e-out)}
.cm-link--small{font-size:15px}
@media (hover:hover) and (pointer:fine){.cm-link:hover{color:var(--c-blue)}.cm-link:hover .cm-arrow{transform:translateX(3px)}}
@media (pointer:coarse){.cm-link:active{opacity:.6}}
.cm-arrow{display:inline-block}
.cm-textlink{color:var(--c-blue-deep);text-decoration:underline;text-decoration-color:var(--c-blue-line);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.cm-textlink:hover{color:var(--c-blue);text-decoration-color:currentColor}}
/* ── Encabezado: material grafito translúcido en las seis páginas ─────────
Opacidad .92 para que siga leyéndose grafito sobre contenido blanco; la
barra del navegador en el teléfono usa el mismo tono (theme-color #10161D).
Sin línea inferior: el contraste con la página ya marca el borde. Marca:
símbolo plano SVG + logotipo (A15). Navegación en Inter 14/500; la página
actual en blanco con un subrayado de 1.5 px al 60 % del ancho. */
.cm-header{position:sticky;top:0;z-index:60;background:var(--c-dark);color:#fff;padding-top:env(safe-area-inset-top,0px)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
.cm-header{background:rgba(5,7,9,.86);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
}
@media (prefers-reduced-transparency:reduce){.cm-header{background:var(--c-dark);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){.cm-header{background:var(--c-dark);border-bottom:1px solid #6B7682}}
.cm-header :focus-visible{outline-color:#5FB0EE}
.cm-header__in{display:flex;align-items:center;gap:24px;height:var(--head-h)}
.cm-logo{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;line-height:0;text-decoration:none}
.cm-logo__mark{width:18px;height:24px;object-fit:contain}
.cm-logo__word{height:15px;width:auto}
@media (min-width:720px){.cm-logo__mark{width:21px;height:28px}.cm-logo__word{height:17px}}
.cm-nav{display:flex;align-items:center;gap:4px;flex:1;min-width:0;margin-left:16px}
.cm-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-s);font-size:14px;font-weight:500;letter-spacing:-.005em;color:#C9D1DA;white-space:nowrap;transition:color var(--d-ui) ease,background-color var(--d-ui) ease}
.cm-nav a[aria-current="page"]{color:#fff}
.cm-nav a[aria-current="page"]::after{content:"";position:absolute;left:20%;right:20%;bottom:6px;height:1.5px;border-radius:1px;background:currentColor}
@media (hover:hover) and (pointer:fine){.cm-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}.cm-nav a[aria-current="page"]:hover{background:transparent}}
.cm-header__end{margin-left:auto;display:flex;align-items:center;gap:8px}
/* ── Tema (Ronda 8, dueño): botón sol / luna en el encabezado de escritorio y de las fichas del catálogo,
y «Apariencia» (Claro · Oscuro · Automático) en el menú. En oscuro se ve el sol (lleva a claro) y al revés. */
.cm-tema-btn{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;transition:background-color var(--d-ui) ease,border-color var(--d-ui) ease,transform var(--d-press) var(--e-out)}
.cm-tema-btn::after{content:"";position:absolute;inset:-2px}
.cm-tema-btn .cm-tema-ico{width:18px;height:18px}
html[data-tema="oscuro"] .cm-tema-ico--luna,html:not([data-tema="oscuro"]) .cm-tema-ico--sol{display:none}
.cm-tema-btn:active{transform:scale(.92);transition-duration:var(--d-tap)}
@media (hover:hover) and (pointer:fine){.cm-tema-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}}
.cm-tema-btn:focus-visible{outline:2px solid #5FB0EE;outline-offset:2px}
.cm-tema{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:2px 6px 0;padding:4px;border-radius:var(--r-m);background:var(--c-bg-3)}
.cm-tema__op{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:8px 4px;border:0;border-radius:var(--r-s);background:transparent;color:var(--c-ink-2);font-family:var(--f-display);font-weight:600;font-size:13px;line-height:1.2;transition:background-color var(--d-ui) ease,color var(--d-ui) ease,box-shadow var(--d-ui) ease}
.cm-tema__op .cm-tema-ico{width:20px;height:20px}
.cm-tema__op[aria-checked="true"]{background:var(--c-surface);color:var(--c-ink);box-shadow:var(--sh-1),var(--sh-ring)}
.cm-tema__op[aria-checked="true"] .cm-tema-ico{color:var(--c-blue)}
html[data-tema="oscuro"] .cm-tema{background:#16181C}
html[data-tema="oscuro"] .cm-tema__op[aria-checked="true"]{background:#3A3F47;box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
.cm-tema__op:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.cm-tema__op:not([aria-checked="true"]):hover{color:var(--c-ink)}}
@media (min-width:720px){.cm-drawer__grupo--tema{grid-column:1}.cm-drawer__grupo--contacto{grid-column:2;grid-row:1 / span 2}}
/* El cambio de tema se funde (View Transition, cm-movimiento.js); con «reducir movimiento» es inmediato */
::view-transition-old(root),::view-transition-new(root){animation-duration:280ms;animation-timing-function:ease}
/* «Escríbenos»: 40 px a la vista, 44 px de área táctil */
.cm-header__wa{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:var(--ls-boton);color:#fff;white-space:nowrap;transition:border-color var(--d-ui) ease,background-color var(--d-ui) ease,transform var(--d-press) var(--e-out)}
.cm-header__wa::before{content:"";position:absolute;inset:-2px 0}
.cm-header__wa svg{width:16px;height:16px;color:var(--c-wa)}
@media (hover:hover) and (pointer:fine){.cm-header__wa:hover{border-color:#fff;background:rgba(255,255,255,.06)}}
.cm-header__wa:active{transform:scale(.97);transition-duration:var(--d-tap)}
.cm-menubtn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font-family:var(--f-display);font-weight:600;font-size:14px;transition:border-color var(--d-ui) ease,background-color var(--d-ui) ease,transform var(--d-press) var(--e-out)}
.cm-menubtn:active{transform:scale(.97);transition-duration:var(--d-tap)}
.cm-menubtn__ico{display:flex;flex-direction:column;gap:4px;width:16px}
.cm-menubtn__ico span{display:block;height:1.75px;border-radius:2px;background:currentColor}
@media (hover:hover) and (pointer:fine){.cm-menubtn:hover{border-color:#fff;background:rgba(255,255,255,.06)}}
/* Migas */
.cm-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;color:var(--c-ink-3)}
.cm-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-ink-3)}
.cm-crumbs [aria-current]{color:var(--c-ink);font-weight:500}
@media (hover:hover) and (pointer:fine){.cm-crumbs a:hover{color:var(--c-blue-deep)}}
/* ── Menú (panel) ─────────────────────────────────────────────────────────
Ronda 2 (dueño, 7‑oct): vuelven los iconos y baja la letra. Cada fila lleva un
icono de 20 px en un cuadro de 36 px, el nombre a 16 px (600) y la descripción
a 13 px; en «Contacto», el nombre a 15 px. La página actual: fila con superficie
e icono en azul. Teléfono: panel lateral derecho de altura completa. Tablet
vertical: cortina bajo el encabezado. La entrada/salida vive en cm-interaccion.v2.css. */
.cm-menu{position:fixed;inset:0;z-index:75}
.cm-menu__fondo{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background:rgba(17,24,32,.38);cursor:default}
.cm-drawer{position:absolute;top:calc(var(--head-h) + env(safe-area-inset-top,0px));left:0;right:0;background:var(--c-surface);color:var(--c-ink);box-shadow:var(--sh-3);overflow-y:auto;overscroll-behavior:contain}
.cm-drawer__x{display:none;align-items:center;justify-content:center;margin:12px var(--gutter) 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--c-bg-2);color:var(--c-ink)}
.cm-drawer__x svg{width:18px;height:18px}
.cm-drawer__in{max-width:calc(var(--wrap) + var(--gutter) * 2);margin:0 auto;padding:8px var(--gutter) 32px;display:grid;gap:20px}
@media (min-width:720px){.cm-drawer__in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;padding-top:0}}
.cm-drawer__grupo{display:grid;gap:2px;align-content:start}
.cm-drawer__titulo{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-ink-3);padding:8px 10px 6px}
.cm-drawer a.cm-drawer__item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:center;min-height:56px;padding:8px 10px;border-radius:var(--r-m);color:var(--c-ink);text-decoration:none;transition:background-color var(--d-ui) ease}
/* Ronda 3 (dueño): «un poquito de color» en los iconos: azul de la marca sobre su tinte */
.cm-drawer__ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--c-blue-tint);color:var(--c-blue-deep);transition:background-color var(--d-ui) ease,color var(--d-ui) ease}
.cm-drawer__ico svg{width:20px;height:20px}
.cm-drawer__ico--wa{background:var(--c-wa);color:var(--c-wa-ink)}
.cm-drawer__txt{display:grid;gap:1px;min-width:0}
.cm-drawer__item[aria-current="page"]{background:var(--c-bg-2)}
.cm-drawer__item[aria-current="page"] .cm-drawer__ico{background:var(--c-blue);color:#fff}
.cm-drawer__item[aria-current="page"] .cm-drawer__nombre{color:var(--c-blue-deep)}
.cm-drawer__nombre{display:block;font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.3}
html.fonts-ready .cm-drawer__nombre{letter-spacing:-.005em}
.cm-drawer__grupo--contacto .cm-drawer__nombre{font-size:15px}
.cm-drawer__desc{display:block;font-size:13px;line-height:1.4;color:var(--c-ink-3)}
.cm-drawer__pie{font-size:13px;color:var(--c-ink-3);padding:12px 10px 0;border-top:1px solid var(--c-line);margin-top:8px;display:grid;gap:4px}
@media (hover:hover) and (pointer:fine){.cm-drawer a.cm-drawer__item:hover .cm-drawer__ico:not(.cm-drawer__ico--wa){background:var(--c-surface)}}
@media (pointer:coarse){.cm-drawer a.cm-drawer__item:active .cm-drawer__ico:not(.cm-drawer__ico--wa){background:var(--c-surface)}}
@media (hover:hover) and (pointer:fine){.cm-drawer a.cm-drawer__item:hover{background:var(--c-bg-2)}}
@media (pointer:coarse){.cm-drawer a.cm-drawer__item:active{background:var(--c-bg-2)}}
@media (max-width:719.98px){
.cm-drawer{top:0;left:auto;right:0;bottom:0;width:min(88vw,360px);padding-top:env(safe-area-inset-top,0px)}
.cm-drawer__x{display:flex;position:sticky;top:10px;z-index:2;margin:10px 14px 0 auto}
.cm-drawer__in{padding:0 10px calc(28px + env(safe-area-inset-bottom,0px));gap:16px}
}
@media (min-width:720px){[data-menu-panel] .cm-drawer__x{display:flex!important;position:sticky!important;top:10px!important;z-index:2!important;background:var(--c-bg-2)!important}}
/* ── Pie corto (A10) ──────────────────────────────────────────────────────
Escritorio (≤ 200 px): fila 1 = marca y párrafo a la izquierda, «Servicios»
e «Información» como dos líneas de enlaces a la derecha; fila 2 = contacto en
línea; fila 3 = legal. Los h2 se ven como etiquetas en línea y siguen en el
DOM (pieCompacto los convierte en botones plegables en teléfono). Sin iconos
salvo el de WhatsApp. El pie de teléfono vive en cm-telefono.v2.css. */
.cm-footer{background:var(--c-dark);color:var(--c-on-dark-2);font-size:14px;line-height:1.45;padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.1)}
.cm-footer :focus-visible{outline-color:#5FB0EE}
.cm-footer__grid{display:grid;gap:16px}
.cm-footer__marca{display:grid;gap:10px;align-content:start}
.cm-footer__marca p{max-width:56ch;font-size:13px;line-height:1.5}
.cm-footer__logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;line-height:0;align-self:start}
.cm-footer__logo img:first-child{width:18px;height:24px;object-fit:contain}
.cm-footer__logo img:last-child{height:16px;width:auto}
.cm-footer__grid > nav,.cm-footer__contacto{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px;row-gap:0}
.cm-footer h2{flex:none;min-width:88px;margin:0;font-family:var(--f-display);font-weight:600;font-size:13px;line-height:1.45;color:#fff}
.cm-footer__lista{display:flex;flex-wrap:wrap;column-gap:20px;row-gap:0;min-width:0}
.cm-footer__lista > a,.cm-footer__lista > span{display:inline-flex;align-items:center;gap:8px;min-height:28px;color:var(--c-on-dark-2);text-decoration:none;transition:color var(--d-ui) ease}
.cm-footer__lista svg{flex:none;width:16px;height:16px;color:var(--c-wa)}
.cm-footer__contacto .cm-footer__lista{font-size:13px}
@media (pointer:coarse){.cm-footer__lista > a{min-height:44px;min-width:44px}} /* «Legal» medía 38 px de ancho */
@media (hover:hover) and (pointer:fine){.cm-footer__lista a:hover{color:#fff}}
.cm-footer__legal{margin-top:12px;padding-top:8px;border-top:1px solid var(--c-dark-line);display:flex;flex-wrap:wrap;gap:0 24px;justify-content:space-between;align-items:center;font-size:13px}
.cm-footer__legal nav{display:flex;flex-wrap:wrap;gap:0 20px;margin-left:auto}
.cm-footer__legal a{display:inline-flex;align-items:center;min-height:28px;color:var(--c-on-dark-2)}
@media (pointer:coarse){.cm-footer__legal a{min-height:44px}}
@media (hover:hover) and (pointer:fine){.cm-footer__legal a:hover{color:#fff}}
@media (min-width:1024px){
.cm-footer__grid{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"marca serv" "marca info" "contacto contacto";column-gap:40px;row-gap:0;align-items:start}
.cm-footer__marca{grid-area:marca;grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:start}
.cm-footer__marca p{padding-top:4px;max-width:none}
.cm-footer h2{min-width:80px}
.cm-footer__grid > nav[aria-label="Servicios"]{grid-area:serv}
.cm-footer__grid > nav[aria-label="Información"]{grid-area:info}
.cm-footer__contacto{grid-area:contacto;margin-top:8px}
}
/* ── WhatsApp flotante (visibilidad en cm-interaccion.v2.css y cm-movimiento.js) ──
Círculo de 52 px con el icono oficial; «Expertos en línea» aparece como
descripción emergente con cursor o foco de teclado. En escritorio sólo en
Inicio; en teléfono, en todas las páginas (cm-telefono.v2.css, Ronda 2). */
.cm-wa{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--c-wa);color:var(--c-wa-ink);box-shadow:var(--sh-2);text-decoration:none}
.cm-wa svg{width:26px;height:26px;flex:none}
.cm-wa__tip{position:absolute;right:calc(100% + 10px);top:50%;white-space:nowrap;padding:6px 12px;border-radius:var(--r-pill);background:var(--c-ink);color:var(--c-bg);font-family:var(--f-display);font-weight:600;font-size:13px;line-height:1.3;opacity:0;transform:translate(4px,-50%);pointer-events:none;transition:opacity var(--d-ui) var(--e-out),transform var(--d-ui) var(--e-out)}
@media (hover:hover) and (pointer:fine){.cm-wa:hover{background:var(--c-wa-press)}.cm-wa:hover .cm-wa__tip{opacity:1;transform:translate(0,-50%);transition-delay:.3s}}
.cm-wa:focus-visible .cm-wa__tip{opacity:1;transform:translate(0,-50%)}
/* ── Controles segmentados de temas y rutas (Inicio y Diseño a medida) ──────
Ronda 9 (dueño: «se ven algo feos… que se vea más premium y elegante»): como los de Apple. Una pista hundida
y la opción elegida como pastilla elevada que se desliza (cm-movimiento.js → pastillas); cada opción con su
icono, que se vuelve azul al elegirla. En teléfono las tres opciones caben a lo ancho (icono arriba, nombre
abajo, hasta dos renglones): nada se desplaza ni se corta. Desde 720 px, icono y nombre en una línea; desde
1024 px los temas de preguntas son una lista vertical con su descripción. */
.ini-faq__temas,.dis-rutas,.cm-seg--elevado{--seg-pista:rgba(17,24,32,.055);--seg-borde:inset 0 0 0 1px rgba(17,24,32,.04);--seg-pastilla:#FFFFFF;
--seg-sombra:0 1px 2px rgba(17,24,32,.08),0 6px 16px rgba(17,24,32,.08),0 0 0 1px rgba(17,24,32,.04)}
@media (prefers-color-scheme:dark){html[data-tema="auto"] :is(.ini-faq__temas,.dis-rutas,.cm-seg--elevado){--seg-pista:rgba(0,0,0,.34);--seg-borde:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 2px rgba(0,0,0,.4);--seg-pastilla:linear-gradient(180deg,#3E434B 0%,#30343B 100%);--seg-sombra:inset 0 1px 0 rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.45)}}
html[data-tema="oscuro"] :is(.ini-faq__temas,.dis-rutas,.cm-seg--elevado),.cm-oscuro :is(.ini-faq__temas,.dis-rutas,.cm-seg--elevado){--seg-pista:rgba(0,0,0,.34);--seg-borde:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 2px rgba(0,0,0,.4);--seg-pastilla:linear-gradient(180deg,#3E434B 0%,#30343B 100%);--seg-sombra:inset 0 1px 0 rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.45)}
.ini-faq__temas{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:5px;border-radius:18px;background:var(--seg-pista);box-shadow:var(--seg-borde)}
.ini-faq__tema{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:68px;padding:10px 6px;border:0;border-radius:13px;background:transparent;color:var(--c-ink-3);text-align:center;transition:color var(--d-ui) ease}
.ini-faq__tema-ico,.dis-ruta__ico{flex:none;display:block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;transition:background-color var(--d-ui) ease}
.ini-faq__tema-txt{display:grid;gap:2px;min-width:0}
.ini-faq__tema-t{font-family:var(--f-display);font-weight:600;font-size:13px;line-height:1.25;text-wrap:balance}
.ini-faq__tema-d{display:block;font-size:13px;line-height:1.4;color:var(--c-ink-3)}
.ini-faq__tema[aria-selected="true"]{color:var(--c-ink);background:var(--seg-pastilla);box-shadow:var(--seg-sombra)}
.ini-faq__tema[aria-selected="true"] .ini-faq__tema-ico{background:var(--c-blue)}
.ini-faq__tema:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
@media (min-width:720px){
.ini-faq__tema{flex-direction:row;gap:10px;min-height:52px;padding:10px 14px}
.ini-faq__tema-t{font-size:15px;white-space:nowrap}
}
@media (min-width:1024px){
.ini-faq__temas{grid-auto-flow:row;grid-auto-columns:auto;padding:6px}
.ini-faq__tema{align-items:flex-start;justify-content:flex-start;gap:14px;padding:14px 16px;text-align:left}
.ini-faq__tema-ico{margin-top:1px}
.ini-faq__tema-t{white-space:normal}
}
@media (hover:hover) and (pointer:fine){.ini-faq__tema:not([aria-selected="true"]):hover{color:var(--c-ink)}}
:is(.ini-faq__tema-ico,.dis-ruta__ico)[data-ico="precios"]{--ico:url("data:image/svg+xml,")}
:is(.ini-faq__tema-ico,.dis-ruta__ico)[data-ico="proceso"]{--ico:url("data:image/svg+xml,")}
:is(.ini-faq__tema-ico,.dis-ruta__ico)[data-ico="materiales"]{--ico:url("data:image/svg+xml,")}
:is(.ini-faq__tema-ico,.dis-ruta__ico)[data-ico="pieza"]{--ico:url("data:image/svg+xml,")}
:is(.ini-faq__tema-ico,.dis-ruta__ico)[data-ico="archivos"]{--ico:url("data:image/svg+xml,")}
:is(.ini-faq__tema-ico,.dis-ruta__ico)[data-ico="reponer"]{--ico:url("data:image/svg+xml,")}
:is(.ini-faq__tema-ico,.dis-ruta__ico)[data-ico="crear"]{--ico:url("data:image/svg+xml,")}
:is(.ini-faq__tema-ico,.dis-ruta__ico)[data-ico="escaneo"]{--ico:url("data:image/svg+xml,")}
:is(.ini-faq__tema-ico,.dis-ruta__ico)[data-ico="precio"]{--ico:url("data:image/svg+xml,")}
/* ── Tarjeta de ayuda por WhatsApp (Ronda 2) ─────────────────────────────
Grafito con el símbolo 3D azul de la marca, junto a las preguntas de Inicio y de
Diseño a medida (en teléfono, arriba de la lista). El símbolo asoma por la derecha
y se funde con el grafito; toda la tarjeta es el enlace. */
.cm-ayuda{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:148px;margin:0 0 20px;padding:20px 144px 20px 20px;border-radius:var(--r-l);background:#12161B;color:#fff;text-decoration:none;box-shadow:var(--sh-1);transition:background-color var(--d-ui) ease}
.cm-ayuda__txt{position:relative;z-index:1;display:grid;gap:12px;justify-items:start}
.cm-ayuda__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c-wa);color:var(--c-wa-ink)}
.cm-ayuda__ico svg{width:22px;height:22px}
.cm-ayuda strong{display:block;font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.3;color:#fff}
.cm-ayuda__txt > span:last-child > span{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:#AEB8C2}
/* El símbolo ocupa todo el alto de la tarjeta, pegado a la derecha (Ronda 3: completo, con aire
arriba y abajo); sólo su lado izquierdo se funde con el grafito */
.cm-ayuda__marca{position:absolute;z-index:0;top:0;right:0;bottom:0;display:block;height:100%;pointer-events:none;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%);transition:transform var(--d-ui) var(--e-out)}
.cm-ayuda__marca img{display:block;height:100%;width:auto}
@media (min-width:1024px){.cm-ayuda{min-height:164px;padding-right:164px}}
@media (hover:hover) and (pointer:fine){.cm-ayuda:hover{background:#181D23}.cm-ayuda:hover .cm-ayuda__marca{transform:translateX(-4px)}}
@media (pointer:coarse){.cm-ayuda:active{opacity:.86}}
@media (prefers-reduced-motion:reduce){.cm-ayuda__marca{transition:none}.cm-ayuda:hover .cm-ayuda__marca{transform:none}}
@media (prefers-color-scheme:dark){html[data-tema="auto"] .cm-ayuda{box-shadow:0 0 0 1px rgba(255,255,255,.08)}}
html[data-tema="oscuro"] .cm-ayuda{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
/* ── Imágenes ─────────────────────────────────────────────────────────── */
.cm-media{position:relative;display:block;overflow:hidden;border-radius:var(--r-m);background:var(--c-bg-2);aspect-ratio:4/3}
.cm-media > img,.cm-media > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cm-media > picture{position:absolute;inset:0}
.cm-media > picture > img{width:100%;height:100%;object-fit:cover}
.cm-media--contain > img{object-fit:contain}
.cm-media--1x1{aspect-ratio:1}
.cm-media--5x4{aspect-ratio:5/4}
.cm-media--3x2{aspect-ratio:3/2}
.cm-media--16x10{aspect-ratio:16/10}
.cm-media--wide,.cm-media--21x9{aspect-ratio:21/9}
.cm-media--anillo{box-shadow:var(--sh-ring)}
.cm-figcap{font-size:var(--t-cap);line-height:var(--lh-cap);color:var(--c-ink-3);margin-top:10px}
/* Imagen pendiente: ocupa el lugar exacto de la foto real (misma proporción).
Superficie plana, sin punteado ni icono de cámara; el símbolo de la marca al
20 % del ancho y 10 % de opacidad. Lo que mostrará la foto va como texto (en
el marco o como figcaption bajo él). Se sustituye por la foto sin tocar el diseño. */
.cm-pendiente{display:grid;place-items:center;padding:20px;background:var(--c-bg-3)}
.cm-pendiente::before{content:"";position:absolute;inset:0;background:url("CandeMaker_Symbol_Graphite.svg") center 42% / 20% auto no-repeat;opacity:.1;pointer-events:none}
.cm-oscuro .cm-pendiente::before{background-image:url("CandeMaker_Symbol_White.svg")}
@media (prefers-color-scheme:dark){html[data-tema="auto"] .cm-pendiente::before{background-image:url("CandeMaker_Symbol_White.svg")}}
html[data-tema="oscuro"] .cm-pendiente::before{background-image:url("CandeMaker_Symbol_White.svg")}
.cm-pendiente__in{position:relative;align-self:end;display:grid;justify-items:center;gap:4px;max-width:32ch;text-align:center}
.cm-pendiente__ico{display:none}
.cm-pendiente__t{font-family:var(--f-display);font-weight:600;font-size:14px;line-height:1.3;color:var(--c-ink-2)}
.cm-pendiente__d{font-size:13px;line-height:1.45;color:var(--c-ink-3)}
.cm-pendiente--mini{padding:8px}
.cm-pendiente--mini::before{inset:6px}
.cm-pendiente--mini .cm-pendiente__in{gap:4px}
.cm-pendiente--mini .cm-pendiente__ico{width:20px;height:20px}
.cm-pendiente--mini .cm-pendiente__t{font-size:13px;line-height:1.25}
/* ── Etiquetas, chips y avisos ────────────────────────────────────────── */
.cm-tag{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:var(--r-s);background:var(--c-bg-2);font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--c-ink-2);white-space:nowrap}
.cm-tag--blue{background:var(--c-blue-tint);color:var(--c-blue-deep)}
.cm-tag--dark{background:var(--c-ink);color:var(--c-bg)}
.cm-tag--onmedia{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);color:#111820;box-shadow:var(--sh-1)}
.cm-note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-m);background:var(--c-bg-2);font-size:14px;line-height:1.5;color:var(--c-ink-2)}
.cm-note svg{flex:none;width:20px;height:20px;color:var(--c-blue-deep);margin-top:1px}
.cm-note strong{color:var(--c-ink);font-weight:600}
.cm-note--blue{background:var(--c-blue-tint)}
.cm-note--warn{background:var(--c-warn-tint);color:var(--c-warn-ink)}
.cm-note--warn svg{color:var(--c-warn)}
.cm-note--err{background:var(--c-err-tint);color:var(--c-err-ink)}
.cm-note--err svg{color:var(--c-err)}
/* ── Campos y controles ───────────────────────────────────────────────── */
.cm-field{display:grid;gap:8px;min-width:0}
.cm-label{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--c-ink);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* El nombre del paso («04 Tamaño») no se parte; si el dato de la derecha es largo, es él quien pasa a otro renglón */
.cm-label small{font-family:var(--f-body);font-weight:400;font-size:13px;color:var(--c-ink-3);min-width:0;text-align:end}
.cm-label > span:first-child{flex-shrink:0}
.cm-help{font-size:13px;line-height:1.45;color:var(--c-ink-3)}
.cm-input,.cm-select,.cm-textarea{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--c-line-ui);border-radius:var(--r-m);background:var(--c-surface);color:var(--c-ink);font-size:16px;line-height:1.4;transition:border-color var(--d-out) ease,box-shadow var(--d-out) ease;-webkit-appearance:none;appearance:none}
.cm-textarea{padding:12px 14px;min-height:96px;resize:vertical}
.cm-select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111820' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
.cm-input:focus,.cm-select:focus,.cm-textarea:focus{outline:none;border-color:var(--c-blue);box-shadow:var(--sh-focus)}
.cm-input::placeholder,.cm-textarea::placeholder{color:var(--c-ink-4)}
@media (hover:hover) and (pointer:fine){.cm-input:hover,.cm-select:hover,.cm-textarea:hover{border-color:var(--c-ink-3)}}
@media (prefers-color-scheme:dark){html[data-tema="auto"] .cm-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23EEF2F6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
html[data-tema="oscuro"] .cm-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23EEF2F6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cm-search{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 4px 0 18px;border:1px solid var(--c-line-ui);border-radius:var(--r-pill);background:var(--c-surface);transition:border-color var(--d-out) ease,box-shadow var(--d-out) ease}
.cm-search:focus-within{border-color:var(--c-blue);box-shadow:var(--sh-focus)}
.cm-search svg{flex:none;width:20px;height:20px;color:var(--c-ink-3)}
.cm-search input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;padding:12px 0;outline:none;color:var(--c-ink)}
.cm-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.cm-search__x{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--c-bg-2);color:var(--c-ink-2)}
.cm-search__x svg{width:16px;height:16px;color:currentColor}
/* Control segmentado (opciones excluyentes) */
.cm-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:var(--r-m);background:var(--c-bg-2);max-width:100%}
.cm-seg__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-s);background:transparent;color:var(--c-ink-2);font-family:var(--f-display);font-weight:600;font-size:14px;white-space:nowrap;transition:background-color var(--d-out) ease,color var(--d-out) ease,box-shadow var(--d-out) ease,transform var(--d-press) var(--e-out)}
.cm-seg__btn[aria-pressed="true"],.cm-seg__btn[aria-selected="true"],.cm-seg__btn[aria-current="true"],.cm-seg__btn[aria-current="page"]{background:var(--c-surface);color:var(--c-ink);box-shadow:var(--sh-1),var(--sh-ring)}
/* Pastilla deslizante (fase 2, 01 §14.1): cm-movimiento.js añade un span que viaja a la opción
elegida. Mientras está, la opción elegida deja su fondo a la pastilla; sin JS, nada cambia. */
.cm-seg[data-cm-pastilla],.ini-faq__temas[data-cm-pastilla]{position:relative;isolation:isolate}
.cm-seg__pastilla{position:absolute;left:0;top:0;z-index:-1;border-radius:var(--r-s);background:var(--c-surface);box-shadow:var(--sh-1),var(--sh-ring);pointer-events:none;opacity:0}
.cm-seg[data-cm-pastilla] .cm-seg__btn:is([aria-pressed="true"],[aria-selected="true"],[aria-current="true"],[aria-current="page"]),
.ini-faq__temas[data-cm-pastilla] .ini-faq__tema[aria-selected="true"]{background:transparent;box-shadow:none}
:is(.ini-faq__temas,.dis-rutas) .cm-seg__pastilla{background:var(--seg-pastilla);box-shadow:var(--seg-sombra);border-radius:13px}
.cm-seg__btn:active{transform:scale(.97);transition-duration:var(--d-tap)}
@media (pointer:coarse){.cm-seg__btn{min-height:44px}}
@media (hover:hover) and (pointer:fine){.cm-seg__btn:hover{color:var(--c-ink)}}
.cm-seg--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cm-seg--scroll::-webkit-scrollbar{display:none}
/* Ronda 12 (dueño: el riel de colecciones y el orden del Catálogo «se miran sin chiste»): segmentado elevado con
los tokens --seg-* de la Ronda 9 (pista hundida, pastilla con relieve, icono que se vuelve azul al elegir) */
.cm-seg--elevado{gap:4px;padding:5px;border-radius:16px;background:var(--seg-pista);box-shadow:var(--seg-borde)}
.cm-seg--elevado .cm-seg__btn{gap:7px;border-radius:11px;color:var(--c-ink-3)}
.cm-seg--elevado .cm-seg__btn:is([aria-pressed="true"],[aria-selected="true"]){color:var(--c-ink);background:var(--seg-pastilla);box-shadow:var(--seg-sombra)}
.cm-seg--elevado .cm-seg__pastilla{background:var(--seg-pastilla);box-shadow:var(--seg-sombra);border-radius:11px}
.cm-seg__ico{flex:none;display:block;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;transition:background-color var(--d-ui) ease}
.cm-seg__btn:is([aria-pressed="true"],[aria-selected="true"]) .cm-seg__ico{background:var(--c-blue)}
/* Opciones con descripción (material, resistencia…) */
.cm-opts{display:grid;gap:8px}
.cm-opt{display:grid;gap:2px;width:100%;min-height:56px;padding:12px 14px;border:1px solid var(--c-line-2);border-radius:var(--r-m);background:var(--c-surface);text-align:left;color:var(--c-ink);transition:border-color var(--d-out) ease,background-color var(--d-out) ease,box-shadow var(--d-out) ease,transform var(--d-press) var(--e-out)}
.cm-opt__t{font-family:var(--f-display);font-weight:600;font-size:15px;line-height:1.3}
.cm-opt__d{font-size:13px;line-height:1.4;color:var(--c-ink-3)}
.cm-opt[aria-pressed="true"],.cm-opt[aria-checked="true"]{border-color:var(--c-blue);background:var(--c-blue-tint);box-shadow:inset 0 0 0 1px var(--c-blue)}
.cm-opt[aria-pressed="true"] .cm-opt__d{color:var(--c-blue-deep)}
.cm-opt:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.cm-opt:hover{border-color:var(--c-ink-4)}.cm-opt[aria-pressed="true"]:hover{border-color:var(--c-blue)}}
/* Chips (atajos, filtros, ayudas) */
.cm-chips{display:flex;flex-wrap:wrap;gap:8px}
.cm-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--c-line-2);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);font-family:var(--f-display);font-weight:600;font-size:14px;white-space:nowrap;transition:border-color var(--d-out) ease,background-color var(--d-out) ease,color var(--d-out) ease,transform var(--d-press) var(--e-out)}
.cm-chip[aria-pressed="true"]{border-color:var(--c-ink);background:var(--c-ink);color:var(--c-bg)}
.cm-chip:active{transform:scale(.97)}
@media (pointer:coarse){.cm-chip{min-height:44px}}
@media (hover:hover) and (pointer:fine){.cm-chip:hover{border-color:var(--c-ink)}}
/* Muestras de color */
.cm-swatches{display:flex;flex-wrap:wrap;gap:10px}
.cm-swatch{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(17,24,32,.16);padding:0;display:flex;align-items:center;justify-content:center;transition:transform var(--d-press) var(--e-out),box-shadow var(--d-out) ease}
.cm-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--c-bg),0 0 0 4px var(--c-blue)}
.cm-swatch svg{width:18px;height:18px}
/* Modo oscuro: el borde de la muestra se aclara; si no, el negro se funde con el fondo */
@media (prefers-color-scheme:dark){html[data-tema="auto"] .cm-swatch{border-color:rgba(255,255,255,.24)}}
html[data-tema="oscuro"] .cm-swatch{border-color:rgba(255,255,255,.24)}
.cm-swatch:active{transform:scale(.94)}
/* Paso a paso numérico */
.cm-stepper{display:inline-flex;align-items:center;border:1px solid var(--c-line-ui);border-radius:var(--r-pill);overflow:hidden;background:var(--c-surface)}
.cm-stepper button{width:48px;height:48px;border:0;background:var(--c-surface);color:var(--c-ink);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.cm-stepper button:active{background:var(--c-bg-2)}
.cm-stepper input{width:64px;height:48px;border:0;border-inline:1px solid var(--c-line);text-align:center;font-family:var(--f-display);font-weight:600;font-size:17px;font-variant-numeric:tabular-nums;background:var(--c-surface);color:var(--c-ink);-moz-appearance:textfield}
.cm-stepper input::-webkit-inner-spin-button,.cm-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media (hover:hover) and (pointer:fine){.cm-stepper button:hover{background:var(--c-bg-2)}}
/* Casilla */
.cm-check{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;color:var(--c-ink-2);cursor:pointer}
.cm-check input{width:20px;height:20px;accent-color:var(--c-blue);cursor:pointer;flex:none}
/* Deslizador */
.cm-range{width:100%;accent-color:var(--c-blue);height:28px}
/* Dato técnico (01 §6): fila dt/dd con línea inferior; la variante placa es una
retícula de 2–4 columnas con línea superior y número grande tabular. Sólo con
números reales (tolerancia, cama, garantía, plazos, gramos, horas). */
.cm-dato{display:grid;margin:0}
.cm-dato > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line)}
.cm-dato dt{font-size:14px;color:var(--c-ink-3)}
.cm-dato dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;color:var(--c-ink);text-align:right}
.cm-dato--placa{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:20px}
.cm-dato--placa > div{display:grid;justify-content:normal;align-items:start;gap:6px;align-content:start;padding:14px 0 0;border-bottom:0;border-top:1px solid var(--c-line)}
.cm-dato--placa dt{font-size:13px;line-height:1.33}
.cm-dato--placa dd{text-align:left;font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.01em}
@media (min-width:1024px){.cm-dato--placa dd{font-size:24px}}
/* Lista de datos (especificaciones, resumen) */
.cm-dl{display:grid;gap:0;margin:0}
.cm-dl > div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.cm-dl > div:last-child{border-bottom:0}
.cm-dl dt{color:var(--c-ink-3)}
.cm-dl dd{margin:0;font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--c-ink)}
/* ── Preguntas (acordeón; la animación vive en cm-interaccion.css) ────── */
.cm-acc{border-top:1px solid var(--c-line)}
.cm-acc__item{border-bottom:1px solid var(--c-line)}
.cm-acc__btn{width:100%;display:flex;align-items:center;gap:16px;min-height:64px;padding:18px 0;background:none;border:0;text-align:left;color:var(--c-ink);font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.35}
.cm-acc__btn > span:first-child{flex:1;min-width:0}
.cm-acc__signo{flex:none;position:relative;width:32px;height:32px;border-radius:50%;background:var(--c-bg-2);color:var(--c-ink)}
.cm-acc__signo::before,.cm-acc__signo::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.75px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform var(--d-ui) var(--e-out)}
.cm-acc__signo::after{transform:translate(-50%,-50%) rotate(90deg)}
.cm-section--alt .cm-acc__signo{background:var(--c-surface)}
.cm-acc__btn[aria-expanded="true"] .cm-acc__signo{background:var(--c-ink);color:var(--c-bg)}
.cm-acc__btn[aria-expanded="true"] .cm-acc__signo::after{transform:translate(-50%,-50%) rotate(0deg)}
.cm-acc__a{margin:0;padding:0 48px 22px 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--c-ink-2);max-width:68ch;text-wrap:pretty}
.cm-acc__tag{display:block;font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--c-blue-deep);margin-bottom:2px}
@media (hover:hover) and (pointer:fine){.cm-acc__btn:hover{color:var(--c-blue-deep)}}
@media (pointer:coarse){.cm-acc__btn{transition:opacity var(--d-press) ease}.cm-acc__btn:active{opacity:.6}}
@media (max-width:719.98px){.cm-acc__btn{font-size:17px}.cm-acc__a{padding-right:0}}
/* ── Ventanas (ficha, personalizar; transición en cm-interaccion.css) ─── */
.cm-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:max(24px,4vh) var(--gutter);overflow:hidden}
.cm-sheet{position:relative;width:100%;max-width:1040px;max-height:calc(100vh - 2 * max(24px,4vh));max-height:calc(100dvh - 2 * max(24px,4vh));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--c-surface);color:var(--c-ink);border-radius:var(--r-xl);box-shadow:var(--sh-3)}
.cm-sheet--md{max-width:800px}
.cm-sheet__head{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 16px 12px 24px;background:var(--c-surface-glass);border-bottom:1px solid var(--c-line)}
.cm-sheet__head h2,.cm-sheet__head h3{font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.3;min-width:0}
/* El título recibe el foco al abrir la hoja: anillo visible si se llegó con teclado (01 §13), ninguno con ratón o dedo */
.cm-sheet__head h2:focus:not(:focus-visible),.cm-sheet__head h3:focus:not(:focus-visible){outline:none}
.cm-sheet__head .cm-cap{display:block;margin-bottom:2px}
.cm-sheet__x{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--c-bg-2);color:var(--c-ink);transition:background-color var(--d-out) ease,transform var(--d-press) var(--e-out)}
.cm-sheet__x svg{width:18px;height:18px}
.cm-sheet__x:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.cm-sheet__x:hover{background:var(--c-bg-3)}}
.cm-sheet__body{padding:24px}
.cm-sheet__foot{position:sticky;bottom:0;z-index:3;background:var(--c-surface-glass);border-top:1px solid var(--c-line);padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px))}
@media (min-width:720px){.cm-sheet__body{padding:28px 32px}.cm-sheet__head{padding-left:32px}.cm-sheet__foot{padding-inline:32px}}
@media (max-width:719.98px){.cm-sheet__head{padding-left:20px}.cm-sheet__body{padding:20px}.cm-sheet__foot{padding-inline:20px}}
.cm-sheet__asa{display:none}
@media (max-width:719.98px){.cm-sheet__asa{display:block;width:40px;height:5px;border-radius:3px;background:var(--c-line-2);margin:8px auto 0}}
/* Fase 2 (01 §14.3): en teléfono la hoja se cierra arrastrando el asa o la cabecera (cm-movimiento.js) */
@media (max-width:719.98px){[data-cm-modal] .cm-sheet__asa,[data-cm-modal] .cm-sheet__head{touch-action:none}[data-cm-modal] .cm-sheet__asa{padding-block:6px;margin-top:2px;background-clip:content-box;box-sizing:content-box}}
/* ── Galería con controles visibles (ficha) ───────────────────────────── */
.cm-galeria{display:grid;gap:12px}
.cm-galeria__escena{position:relative;border-radius:var(--r-m);background:var(--c-bg-2);overflow:hidden;aspect-ratio:4/3}
.cm-galeria__escena > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cm-galeria__flecha{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:#111820;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-2);transition:transform var(--d-press) var(--e-out),background-color var(--d-out) ease}
.cm-galeria__flecha svg{width:20px;height:20px}
.cm-galeria__flecha--ant{left:10px}.cm-galeria__flecha--sig{right:10px}
.cm-galeria__flecha:active{transform:translateY(-50%) scale(.94)}
.cm-galeria__cuenta{position:absolute;right:10px;bottom:10px;min-height:28px;display:flex;align-items:center;padding:0 10px;border-radius:var(--r-pill);background:rgba(17,24,32,.72);color:#fff;font-size:13px;font-weight:600}
.cm-galeria__miniaturas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cm-galeria__miniaturas::-webkit-scrollbar{display:none}
.cm-galeria__mini{flex:none;position:relative;width:64px;height:64px;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--c-line);padding:0;background:var(--c-bg-2)}
.cm-galeria__mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cm-galeria__mini[aria-current="true"]{box-shadow:0 0 0 2px var(--c-bg),0 0 0 4px var(--c-blue);border-color:transparent}
/* Bloque enlazado: imagen arriba, texto abajo */
.cm-tile{display:flex;flex-direction:column;gap:16px;min-width:0;color:var(--c-ink);text-decoration:none}
.cm-tile .cm-media{transition:transform var(--d-press) var(--e-out)}
/* Con cursor, la tarjeta sube 2 px y su título cambia de color (cada página
define el título). Se usa la propiedad translate para no chocar con la
entrada al hacer scroll ni con la respuesta al toque, que usan transform. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.cm-tile{transition:translate var(--d-ui) var(--e-out)}
a.cm-tile:hover,button.cm-tile:hover{translate:0 -2px}
}
/* Botón con aspecto de bloque (tarjeta que cambia la vista) */
button.cm-tile{border:0;background:none;padding:0;margin:0;text-align:left;width:100%;font:inherit;color:inherit}
/* ── Botón de icono: nombre accesible y descripción emergente (cursor o teclado) ── */
.cm-icono{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--c-line-ui);background:var(--c-surface);color:var(--c-ink);box-shadow:var(--sh-1);transition:background-color var(--d-out) ease,transform var(--d-press) var(--e-out)}
.cm-icono svg{width:20px;height:20px}
.cm-icono:active{transform:scale(.94)}
@media (pointer:coarse){.cm-icono{width:44px;height:44px}}
@media (hover:hover) and (pointer:fine){.cm-icono:hover{background:var(--c-bg-2)}}
.cm-icono--quitar{background:var(--c-bg-2);border-color:transparent;box-shadow:none;color:var(--c-ink-2)}
@media (hover:hover) and (pointer:fine){.cm-icono--quitar:hover{background:var(--c-err-tint);color:var(--c-err)}}
.cm-icono[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;z-index:5;white-space:nowrap;padding:6px 10px;border-radius:var(--r-s);background:var(--c-ink);color:var(--c-bg);font-family:var(--f-display);font-weight:600;font-size:13px;line-height:1.2;opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity var(--d-press) ease,transform var(--d-press) var(--e-out)}
.cm-icono[data-tip-pos="arriba"]::after{top:auto;bottom:calc(100% + 8px);left:0;right:auto;transform:translateY(3px)}
/* Misma espera que la etiqueta del botón de WhatsApp (300 ms): las etiquetas del sitio aparecen al mismo ritmo */
@media (hover:hover) and (pointer:fine){.cm-icono[data-tip]:hover::after{opacity:1;transform:none;transition-delay:.3s}
.cm-icono[data-tip][data-tip-instante]:hover::after{transition-delay:0s;transition-duration:0s}} /* la vecina, al instante (cm-movimiento.js) */
.cm-icono[data-tip]:focus-visible::after{opacity:1;transform:none}
/* ── Utilidades de visibilidad por rango ──────────────────────────────── */
@media (max-width:719.98px){.cm-solo-tablet,.cm-solo-escritorio,.cm-no-telefono{display:none!important}}
@media (min-width:720px){.cm-solo-telefono{display:none!important}}
@media (max-width:1023.98px){.cm-solo-escritorio{display:none!important}}
/* ── Respuesta al toque (pantallas táctiles) ──────────────────────────── */
@media (pointer:coarse) and (prefers-reduced-motion:no-preference){
.cm-tile:not([data-reveal]:not([data-cm-reveal-ready])):active .cm-media,
.cm-card:not([data-reveal]:not([data-cm-reveal-ready])):active{transform:scale(.985);transition:transform var(--d-tap) var(--e-out)}
}
/* ── Impresión: los bloques que aún no entraban con el scroll salen visibles ── */
@media print{[data-reveal]{opacity:1!important;transform:none!important}}
/* Ronda 8: al entrar un bloque, sus fotos se asientan desde un acercamiento ligero (propiedad «scale», que no
choca con los «transform» de hover ni con el FLIP); con «reducir movimiento» no cambian */
@media (prefers-reduced-motion:no-preference){
[data-reveal][data-reveal-ready]:not([data-revealed]) :is(.cm-media,.ini-cliente__marco,.ini-contacto__foto,.dis-servicio__foto,.pg-card__foto) img{scale:1.06}
[data-reveal][data-revealed]:not([data-cm-reveal-ready]) :is(.cm-media,.ini-cliente__marco,.ini-contacto__foto,.dis-servicio__foto,.pg-card__foto) img{transition:scale .85s cubic-bezier(.22,1,.36,1)}
}
/* ── Movimiento reducido: variantes dirigidas ─────────────────────────────
«Reducir movimiento» no es cero: se quitan desplazamientos, escalas y giros,
y se conservan los fundidos de opacidad y los cambios de color, que ayudan a
entender (01 §8). Cada animación de página trae además su propia variante. */
@media (prefers-reduced-motion:reduce){
.cm-btn:active,.cm-chip:active,.cm-seg__btn:active,.cm-opt:active,.cm-swatch:active,.cm-sheet__x:active,.cm-header__wa:active,.cm-menubtn:active,.cm-icono:active,.cm-wa:active{transform:none;opacity:.8}
.cm-galeria__flecha:active{transform:translateY(-50%);opacity:.8}
.cm-link .cm-arrow,.cm-tile .cm-media,.cm-acc__signo::before,.cm-acc__signo::after{transition:none}
.cm-link:hover .cm-arrow{transform:none}
.cm-salto{transition:none}
.cm-wa__tip{transform:translateY(-50%)}
.cm-icono[data-tip]::after{transform:none}
}
/* Ronda 12: en computadora, cada botón de WhatsApp pregunta «App de WhatsApp» o «WhatsApp Web»
(cm-movimiento.js → waEleccion).