/* ════════════════════════════════════════════════════════════════════════
   CandeMaker · sistema visual de la propuesta premium
   Blanco limpio, grafito y azul. Tamaños fijos por rango de pantalla:
   teléfono < 720 · tablet vertical 720–1023 · tablet horizontal 1024–1279 ·
   escritorio ≥ 1280. letter-spacing 0 en todo el sitio.
   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.css (etapas 1–3) y aquí no se repiten.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* Color */
  --c-ink:#111820; --c-ink-2:#3B4651; --c-ink-3:#5E6A75; --c-ink-4:#8A949E;
  --c-bg:#FFFFFF; --c-bg-2:#F5F6F7; --c-bg-3:#ECEEF0;
  --c-line:#E3E6E9; --c-line-2:#CDD3D9;
  --c-blue:#0E7CD2; --c-blue-press:#0A6AB6; --c-blue-deep:#0A4F8A; --c-blue-tint:#EAF3FB; --c-blue-line:#B7D6F1;
  --c-acento:#0E7CD2; /* iconos, números y niveles; en grafito pasa a #5FB0EE */
  --c-dark:#10161D; --c-dark-2:#1A222B; --c-dark-line:#2A333D; --c-on-dark:#FFFFFF; --c-on-dark-2:#AEB8C4;
  --c-wa:#25D366; --c-wa-press:#1DB954; --c-wa-ink:#0B1A10;
  --c-ok:#1E7B46; --c-ok-tint:#E8F5EC; --c-warn:#8A5300; --c-warn-tint:#FFF4E0; --c-err:#B42318; --c-err-tint:#FDECEA;

  /* Tipografía */
  --f-display:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-display:40px; --lh-display:1.08;
  --t-h2:30px; --lh-h2:1.14;
  --t-h3:20px; --lh-h3:1.3;
  --t-lead:17px; --t-body:16px; --t-small:14px; --t-cap:13px;

  /* Forma y ritmo */
  --r-s:6px; --r-m:10px; --r-l:14px; --r-pill:999px;
  --gutter:20px; --wrap:1200px; --head-h:56px;
  --sec-y:56px; --sec-gap:32px;

  /* Movimiento */
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-io:cubic-bezier(.77,0,.175,1);
  --e-drawer:cubic-bezier(.32,.72,0,1);

  /* Compatibilidad con valores que la lógica de las páginas todavía entrega */
  --cm-graphite:#111820; --cm-blue:#0E7CD2; --cm-blue-bright:#168FE0; --cm-blue-deep:#0A4F8A;
  --cm-bone:#F5F6F7; --cm-white:#FFFFFF; --cm-steel:#AEB8C4; --cm-line:#E3E6E9; --cm-line-dark:#2A333D;
  --cm-ink-60:#5E6A75; --cm-ink-40:#8A949E; --cm-tint:#EAF3FB;
  --cm-font-display:var(--f-display); --cm-font-body:var(--f-body);
  --cm-radius-sm:6px; --cm-radius-md:10px; --cm-radius-pill:999px;
}
@media (min-width:720px){
  :root{--t-display:52px; --lh-display:1.06; --t-h2:36px; --lh-h2:1.12; --t-h3:22px; --t-lead:18px;
        --gutter:32px; --head-h:64px; --sec-y:80px; --sec-gap:40px}
}
@media (min-width:1024px){
  :root{--t-display:56px; --lh-display:1.05; --t-h2:40px; --lh-h2:1.1; --t-lead:19px;
        --gutter:40px; --sec-y:96px; --sec-gap:48px}
}
@media (min-width:1280px){
  :root{--t-display:64px; --lh-display:1.04; --t-h2:44px; --lh-h2:1.08; --t-h3:24px; --t-lead:20px;
        --gutter:48px; --sec-y:112px; --sec-gap:56px}
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;letter-spacing:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--c-bg);scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;-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:#CFE6F8}
: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-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:1.6}
.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)}
.cm-section--alt{background:var(--c-bg-2)}
.cm-section--tight{padding-block:calc(var(--sec-y) * .6)}
.cm-section + .cm-section:not(.cm-section--alt):not(.cm-section--dark):not(.cm-oscuro){border-top:1px solid var(--c-line)}
.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:#10161D; --c-bg-2:#1A222B; --c-bg-3:#232C36;
  --c-line:#2A333D; --c-line-2:#5A6470;
  --c-blue-deep:#8CC8F5; --c-blue-tint:rgba(95,176,238,.14); --c-blue-line:#3D6D96;
  --c-acento:#5FB0EE;
  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)}
.cm-oscuro .cm-note--warn{background:rgba(240,179,90,.12);color:#F3DDB5}
.cm-oscuro .cm-note--warn svg{color:#F0B35A}
.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,.06)}
  .cm-oscuro .cm-btn--dark:hover{background:#E9EEF3}
}
/* Un escenario grafito que cierra la página se separa del pie con una línea */
.cm-oscuro + .cm-footer{border-top:1px solid var(--c-dark-line)}
/* 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) ────────────
   Igual que en Inicio: opacidad y 12 px en 400 ms 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» no hay entrada. */
@keyframes cmEntra{from{opacity:0;transform:translateY(12px)}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 .4s var(--e-out) 0ms both}
  [data-cm-entrada="titulo"]{animation:cmEntra .4s var(--e-out) 50ms both}
  [data-cm-entrada="texto"]{animation:cmEntra .4s var(--e-out) 100ms both}
  [data-cm-entrada="botones"]{animation:cmEntra .4s var(--e-out) 150ms both}
  [data-cm-entrada="galeria"]{animation:cmAparece .4s var(--e-out) 60ms both}
}

/* ── Tipografía ───────────────────────────────────────────────────────── */
.cm-display{font-family:var(--f-display);font-weight:700;font-size:var(--t-display);line-height:var(--lh-display)}
.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:700;font-size:var(--t-h3);line-height:var(--lh-h3)}
.cm-h4{font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.35}
.cm-lead{font-size:var(--t-lead);line-height:1.5;color:var(--c-ink-2)}
.cm-text{font-size:var(--t-body);line-height:1.6;color:var(--c-ink-2)}
.cm-small{font-size:var(--t-small);line-height:1.5;color:var(--c-ink-3)}
.cm-cap{font-size:var(--t-cap);line-height:1.45;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-blue-deep)}
/* La cota: guiño de plano técnico */
.cm-eyebrow--cota::before{content:"";flex:none;width:24px;height:9px;border-left:1px solid currentColor;border-right:1px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat;opacity:.9}
.cm-oscuro .cm-eyebrow,.cm-section--dark .cm-eyebrow{color:var(--c-acento)}
.cm-measure{max-width:62ch}
.cm-head{display:grid;gap:14px;margin-bottom:var(--sec-gap)}
.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 ────────────────────────────────────────────────── */
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-pill);border:1px solid transparent;font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.2;text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:transform .14s var(--e-out),background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.cm-btn svg{flex:none;width:20px;height:20px}
.cm-btn:active{transform:scale(.97);transition-duration:.06s}
.cm-btn[disabled],.cm-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.cm-btn--primary{background:var(--c-blue);color:#fff}
.cm-btn--primary:active{background:var(--c-blue-press)}
.cm-btn--secondary{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-line-2)}
.cm-btn--dark{background:var(--c-ink);color:#fff}
.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-ink)}
.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:40px;padding:0 16px;font-size:15px}
.cm-btn--block{display:flex;width:100%}
.cm-btn--icon{width:44px;min-height:44px;padding:0;border-radius:50%}
@media (pointer:coarse){.cm-btn--sm{min-height:44px}}
@media (hover:hover) and (pointer:fine){
  .cm-btn--primary:hover{background:var(--c-blue-press)}
  .cm-btn--secondary:hover{border-color:var(--c-ink)}
  .cm-btn--dark:hover{background:#26303A}
  .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:700;font-size:16px;color:var(--c-blue-deep);text-decoration:none;transition:color .18s ease,opacity .16s ease}
.cm-link .cm-arrow{transition:transform .18s 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. */
.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(16,22,29,.92);-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:9px;min-height:44px;line-height:0;text-decoration:none}
.cm-logo__mark{width:22px;height:28px;object-fit:contain}
.cm-logo__word{height:15px;width:auto}
@media (min-width:720px){.cm-logo__mark{width:25px;height:32px}.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{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-s);font-size:15px;font-weight:500;color:#C9D1DA;white-space:nowrap;transition:color .18s ease,background-color .18s ease}
.cm-nav a[aria-current="page"]{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 #5FB0EE;border-radius:0}
@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}
.cm-header__wa{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);font-family:var(--f-display);font-weight:700;font-size:14px;color:#fff;white-space:nowrap;transition:border-color .18s ease,background-color .18s ease,transform .14s var(--e-out)}
.cm-header__wa svg{width:18px;height:18px;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)}
.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:700;font-size:14px;transition:border-color .18s ease,background-color .18s ease,transform .14s var(--e-out)}
.cm-menubtn:active{transform:scale(.97)}
.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) ─────────────────────────────────────────────────────────
   Teléfono: panel lateral derecho de altura completa. Tablet vertical:
   cortina bajo el encabezado. La entrada/salida vive en cm-interaccion.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:#fff;border-bottom:1px solid var(--c-line);box-shadow:0 24px 48px rgba(17,24,32,.16);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:1px solid var(--c-line-2);background:#fff;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:12px var(--gutter) 28px;display:grid;gap:28px}
@media (min-width:720px){.cm-drawer__in{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;padding-top:4px}}
.cm-drawer__grupo{display:grid;gap:2px;align-content:start}
.cm-drawer__titulo{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--c-ink-3);padding:8px 12px}
.cm-drawer a.cm-drawer__item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;min-height:56px;padding:8px 12px;border-radius:var(--r-m);color:var(--c-ink);text-decoration:none;transition:background-color .18s ease}
.cm-drawer__item[aria-current="page"]{background:var(--c-blue-tint)}
.cm-drawer__ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-m);background:var(--c-bg-2);color:var(--c-ink)}
.cm-drawer__ico svg{width:20px;height:20px}
.cm-drawer__ico--wa{background:var(--c-wa);color:var(--c-wa-ink)}
.cm-drawer__nombre{display:block;font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.3}
.cm-drawer__desc{display:block;font-size:14px;line-height:1.4;color:var(--c-ink-3);margin-top:2px}
.cm-drawer__pie{font-size:13px;color:var(--c-ink-3);padding:12px 12px 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{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);border-bottom:0;border-left:1px solid var(--c-line);padding-top:env(safe-area-inset-top,0px);box-shadow:-24px 0 48px rgba(17,24,32,.14)}
  .cm-drawer__x{display:flex;position:sticky;top:10px;z-index:2;margin:10px 14px 0 auto}
  .cm-drawer__in{padding:4px 12px calc(28px + env(safe-area-inset-bottom,0px));gap:20px}
  .cm-drawer__desc{display:none}
}
@media (min-width:720px){[data-menu-panel] .cm-drawer__x{display:flex!important;position:sticky!important;top:10px!important;z-index:2!important;background:#fff!important}}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.cm-footer{background:var(--c-dark);color:var(--c-on-dark-2);font-size:15px;padding:56px 0 calc(32px + env(safe-area-inset-bottom,0px))}
.cm-footer__grid{display:grid;gap:32px}
@media (min-width:720px){.cm-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}}
@media (min-width:1024px){.cm-footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.cm-footer__marca{display:grid;gap:16px;align-content:start}
.cm-footer__marca p{max-width:34ch;line-height:1.55}
.cm-footer__logo{display:inline-flex;align-items:center;gap:10px;line-height:0}
.cm-footer__logo img:first-child{width:28px;height:36px;object-fit:contain}
.cm-footer__logo img:last-child{height:18px;width:auto}
.cm-footer h2{font-family:var(--f-display);font-weight:600;font-size:14px;color:#fff;margin-bottom:8px}
.cm-footer__lista{display:grid}
.cm-footer__lista > a,.cm-footer__lista > span{display:flex;align-items:center;gap:10px;min-height:40px;color:var(--c-on-dark-2);text-decoration:none;transition:color .18s ease}
.cm-footer__lista svg{flex:none;width:18px;height:18px}
@media (pointer:coarse){.cm-footer__lista a{min-height:44px}}
@media (hover:hover) and (pointer:fine){.cm-footer__lista a:hover{color:#fff}}
.cm-footer__legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--c-dark-line);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;font-size:14px}
.cm-footer__legal nav{display:flex;flex-wrap:wrap;gap:0 20px}
.cm-footer__legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--c-on-dark-2)}
@media (hover:hover) and (pointer:fine){.cm-footer__legal a:hover{color:#fff}}
@media (max-width:719.98px){.cm-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* ── WhatsApp flotante (visibilidad en cm-interaccion.css) ────────────── */
.cm-wa{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border-radius:var(--r-pill);background:var(--c-wa);color:var(--c-wa-ink);font-family:var(--f-display);font-weight:700;font-size:15px;box-shadow:0 10px 28px rgba(17,24,32,.18);text-decoration:none}
.cm-wa svg{width:22px;height:22px;flex:none}
@media (max-width:719.98px){.cm-wa{width:56px;height:56px;padding:0;justify-content:center;font-size:0;gap:0}.cm-wa svg{width:26px;height:26px}}
@media (hover:hover) and (pointer:fine){.cm-wa:hover{background:var(--c-wa-press)}}

/* ── 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--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{aspect-ratio:21/9}
.cm-figcap{font-size:13px;line-height:1.45;color:var(--c-ink-3);margin-top:10px}

/* Imagen pendiente: ocupa el lugar exacto de la foto real (misma proporción)
   y dice qué debe mostrar. Se sustituye por la foto sin tocar el diseño. */
.cm-pendiente{display:grid;place-items:center;padding:20px;background:var(--c-bg-2);box-shadow:inset 0 0 0 1px var(--c-line)}
.cm-pendiente::before{content:"";position:absolute;inset:10px;border:1.5px dashed var(--c-line-2);border-radius:max(calc(var(--r-m) - 4px),4px);pointer-events:none}
.cm-pendiente__in{position:relative;display:grid;justify-items:center;gap:6px;max-width:32ch;text-align:center}
.cm-pendiente__ico{width:28px;height:28px;color:var(--c-ink-4)}
.cm-pendiente__t{font-family:var(--f-display);font-weight:700;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:12px;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:700;font-size:12.5px;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:#fff}
.cm-tag--onmedia{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);color:var(--c-ink);box-shadow:0 1px 2px rgba(17,24,32,.12)}
.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:#5C3800}
.cm-note--warn svg{color:var(--c-warn)}
.cm-note--err{background:var(--c-err-tint);color:#7A1810}
.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:700;font-size:15px;color:var(--c-ink);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cm-label small{font-family:var(--f-body);font-weight:400;font-size:13px;color:var(--c-ink-3)}
.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-2);border-radius:var(--r-s);background:#fff;color:var(--c-ink);font-size:16px;line-height:1.4;transition:border-color .16s ease,box-shadow .16s 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:0 0 0 3px rgba(14,124,210,.18)}
.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-4)}}
.cm-search{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 6px 0 16px;border:1px solid var(--c-line-2);border-radius:var(--r-pill);background:#fff;transition:border-color .16s ease,box-shadow .16s ease}
.cm-search:focus-within{border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(14,124,210,.18)}
.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:40px;height:40px;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:700;font-size:14px;white-space:nowrap;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease,transform .12s 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:#fff;color:var(--c-ink);box-shadow:0 1px 3px rgba(17,24,32,.12)}
.cm-seg__btn:active{transform:scale(.97)}
@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}

/* 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:#fff;text-align:left;color:var(--c-ink);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .12s var(--e-out)}
.cm-opt__t{font-family:var(--f-display);font-weight:700;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:#fff;color:var(--c-ink);font-family:var(--f-display);font-weight:600;font-size:14px;white-space:nowrap;transition:border-color .16s ease,background-color .16s ease,color .16s ease,transform .12s var(--e-out)}
.cm-chip[aria-pressed="true"]{border-color:var(--c-ink);background:var(--c-ink);color:#fff}
.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 .12s var(--e-out),box-shadow .16s ease}
.cm-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c-blue)}
.cm-swatch svg{width:18px;height:18px}
.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-2);border-radius:var(--r-pill);overflow:hidden;background:#fff}
.cm-stepper button{width:48px;height:48px;border:0;background:#fff;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:700;font-size:17px;background:#fff;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}

/* 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-weight:600;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:16px 0;background:none;border:0;text-align:left;color:var(--c-ink);font-family:var(--f-display);font-weight:700;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 .2s var(--e-out)}
.cm-acc__signo::after{transform:translate(-50%,-50%) rotate(90deg)}
.cm-acc__btn[aria-expanded="true"] .cm-acc__signo{background:var(--c-ink);color:#fff}
.cm-acc__btn[aria-expanded="true"] .cm-acc__signo::after{transform:translate(-50%,-50%) rotate(0deg)}
.cm-acc__a{margin:0;padding:0 48px 20px 0;font-size:16px;line-height:1.6;color:var(--c-ink-2);max-width:72ch}
.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 .1s ease}.cm-acc__btn:active{opacity:.6}}
@media (max-width:719.98px){.cm-acc__btn{font-size:16px}.cm-acc__a{padding-right:0;font-size:15.5px}}

/* ── 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:#fff;border-radius:var(--r-l);box-shadow:0 30px 80px rgba(17,24,32,.28)}
.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:rgba(255,255,255,.96);border-bottom:1px solid var(--c-line)}
.cm-sheet__head h2,.cm-sheet__head h3{font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.3;outline:none;min-width:0}
.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 .16s ease,transform .12s 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:rgba(255,255,255,.97);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}}

/* ── 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:1px solid rgba(17,24,32,.1);background:rgba(255,255,255,.94);color:var(--c-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(17,24,32,.12);transition:transform .12s var(--e-out),background-color .16s 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 #fff,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 .16s 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 .2s 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 rgba(17,24,32,.1);background:rgba(255,255,255,.94);color:var(--c-ink);box-shadow:0 1px 3px rgba(17,24,32,.1);transition:background-color .16s ease,transform .12s 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:#fff}}
.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:#fff;font-family:var(--f-display);font-weight:600;font-size:12.5px;line-height:1.2;opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .12s ease,transform .12s var(--e-out)}
.cm-icono[data-tip-pos="arriba"]::after{top:auto;bottom:calc(100% + 8px);left:0;right:auto;transform:translateY(3px)}
@media (hover:hover) and (pointer:fine){.cm-icono[data-tip]:hover::after{opacity:1;transform:none;transition-delay:.4s}}
.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 .06s 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}}

/* ── Movimiento reducido: sin desplazamientos ni escalas ──────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .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-galeria__flecha:active,.cm-icono:active{transform:none!important}
  .cm-link .cm-arrow{transition:none!important}
}