/* ════════════════════════════════════════════════════════════════════════
   CandeMaker · tokens oficiales (rediseño premium «CM Placa», 6 de octubre de 2026)
   Única fuente de verdad del sistema: color, tipografía, espacio, forma, sombra
   y movimiento. cm-premium.v2.css y las hojas de página sólo componen con estos
   tokens. Valores de rediseno/01-direccion-visual.md §2–§5 y §8.
   Superficie «aluminio» (decisión A9) · botón principal #0B6FBD (A19) ·
   modo oscuro automático (A8) en las páginas marcadas con <html data-tema="auto">.
   Cortes: teléfono < 720 · 720 · 1024 · 1280.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;

  /* ── Color: superficies y tinta ─────────────────────────────────────── */
  --c-bg:#FFFFFF; --c-bg-2:#F4F6F8; --c-bg-3:#EAEEF2;
  --c-surface:#FFFFFF;                 /* controles que se elevan: campos, segmento activo, menú, hojas */
  --c-surface-glass:rgba(255,255,255,.94);
  --c-line:#E2E6EA;                    /* sólo dentro de listas */
  --c-line-2:#CBD2D9;                  /* contorno del botón secundario */
  --c-line-ui:#8A949E;                 /* bordes de campo y botones de icono: 3.08:1 (WCAG 1.4.11) */
  --c-ink:#111820; --c-ink-2:#3B4651; --c-ink-3:#5E6A75; --c-ink-4:#6B7682;
  --c-paper:#F3F0EA;                   /* hueso de marca: no se usa en el cromo del sitio */

  /* ── Color: acción (el azul es sólo acción) ─────────────────────────── */
  --c-blue:#0E7CD2;                    /* foco, pestaña activa, iconos de acción ≥ 18 px */
  --c-blue-btn:#0B6FBD;                /* relleno del botón principal: texto blanco 5.22:1 */
  --c-blue-btn-press:#0A64AD;
  --c-blue-press:#0A6AB6;              /* compatibilidad: hojas de página aún sin rediseñar */
  --c-blue-deep:#0A4F8A;               /* enlaces y textos azules sobre claro: 8.4:1 */
  --c-blue-bright:#5FB0EE;             /* acento sobre grafito: 7.7:1 */
  --c-blue-tint:#EAF3FB; --c-blue-line:#B7D6F1;
  --c-acento:#0E7CD2;                  /* compatibilidad: se retira página por página */

  /* ── Color: marco grafito (un solo tono) ────────────────────────────── */
  /* Ronda 8 (dueño, «como apple.com»): el negro baja a casi negro puro con un matiz grafito mínimo de la marca */
  --c-dark:#050709; --c-dark-2:#1C1F24; --c-dark-line:#2A2E35;
  --c-on-dark:#FFFFFF; --c-on-dark-2:#AEB8C4;  /* 10.8:1 sobre #050709 */
  --c-dark-glass:rgba(5,7,9,.86);
  /* Tarjetas («recuadros grises con luz»): --c-card sobre secciones claras/negras, --c-card-alt sobre las grises */
  --c-card:linear-gradient(180deg,#F8FAFB 0%,#F1F4F7 100%); --c-card-alt:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 100%);
  --c-card-borde:0 0 0 1px rgba(17,24,32,.06);

  /* ── Color: WhatsApp y estados ──────────────────────────────────────── */
  --c-wa:#25D366; --c-wa-press:#1DB954; --c-wa-ink:#0B1A10;
  --c-wa-icono:#168A44;                /* icono de WhatsApp sobre claro: 3.96:1 sobre #F4F6F8 (el verde de marca da 2.8) */
  --c-ok:#1E7B46; --c-ok-tint:#E8F5EC;
  --c-warn:#8A5300; --c-warn-tint:#FFF4E0; --c-warn-ink:#5C3800;
  --c-err:#B42318; --c-err-tint:#FDECEA; --c-err-ink:#7A1810;
  --c-seleccion:#CFE6F8;

  /* ── Tipografía (Manrope titulares · Inter texto) ───────────────────── */
  --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.04;  --ls-display:-.022em;
  --t-h1-largo:30px;  --lh-h1-largo:1.08; --ls-h1-largo:-.02em;   /* Ronda 2: un escalón abajo (era 34/40/44/52) */
  --t-h2:30px;        --lh-h2:1.1;        --ls-h2:-.02em;
  --t-h3:20px;        --lh-h3:1.25;       --ls-h3:-.01em;
  --t-h4:17px;        --lh-h4:1.35;
  --t-lead:17px;      --lh-lead:1.45;
  --t-body:17px;      --lh-body:1.5;
  --t-small:14px;     --lh-small:1.43;
  --t-cap:13px;       --lh-cap:1.33;
  --t-eyebrow:12px;   --ls-eyebrow:.08em;
  --t-cifra:32px;     --ls-cifra:-.02em;
  --t-precio:17px;    --t-precio-ficha:32px;
  --ls-boton:-.005em;

  /* ── Espacio: escala de 8 y ritmo de sección ────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --sec-y:72px; --sec-gap:40px; --gutter:20px; --wrap:1200px; --wrap-lectura:720px; --head-h:56px;

  /* ── Forma ──────────────────────────────────────────────────────────── */
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:24px; --r-pill:999px;

  /* ── Sombra: dos capas tintadas con el grafito ──────────────────────── */
  --sh-1:0 1px 2px rgba(17,24,32,.06), 0 1px 1px rgba(17,24,32,.04);
  --sh-2:0 2px 6px rgba(17,24,32,.05), 0 16px 40px rgba(17,24,32,.10);
  --sh-3:0 8px 20px rgba(17,24,32,.12), 0 40px 100px rgba(17,24,32,.22);
  --sh-ring:0 0 0 1px rgba(17,24,32,.06);
  --sh-focus:0 0 0 3px rgba(14,124,210,.18);

  /* ── Movimiento (UI < 300 ms) ───────────────────────────────────────── */
  --e-out:cubic-bezier(.23,1,.32,1);      /* entradas, salidas, prensado */
  --e-io:cubic-bezier(.77,0,.175,1);      /* movimiento en pantalla (cruce de fotos, riel) */
  --e-drawer:cubic-bezier(.32,.72,0,1);   /* hojas y menú en teléfono */
  --d-tap:60ms;          /* bajada al apoyar el dedo */
  --d-press:120ms;       /* vuelta del prensado */
  --d-ui:180ms;          /* color, hover, pequeños cambios */
  --d-enter:220ms;       /* ventanas y menú: entrada (escritorio) */
  --d-sheet:240ms;       /* hojas y paneles: entrada (teléfono) */
  --d-sheet-out:180ms;   /* salida: siempre más corta que la entrada */
  --d-out:160ms;         /* salida de ventanas en escritorio */
  --d-reveal:360ms;      /* entrada con scroll */
  --d-entrada:850ms;     /* Ronda 8: entrada de los bloques al desplazar, como apple.com (cm-movimiento.js) */
  --d-cruce:600ms;       /* cruce de fotos de la portada (ambiental, no es UI) */

  /* ── Compatibilidad · OBSOLETO ──────────────────────────────────────────
     Nombres de la versión anterior que la lógica de algunas páginas todavía
     entrega en valores en línea. No usar en CSS nuevo; se retiran al final. */
  --cm-graphite:#111820; --cm-blue:#0E7CD2; --cm-blue-bright:#168FE0; --cm-blue-deep:#0A4F8A;
  --cm-bone:#F4F6F8; --cm-white:#FFFFFF; --cm-steel:#AEB8C4; --cm-line:#E2E6EA; --cm-line-dark:#2A333D;
  --cm-ink-60:#5E6A75; --cm-ink-40:#6B7682; --cm-tint:#EAF3FB;
  --cm-font-display:var(--f-display); --cm-font-body:var(--f-body);
  --cm-radius-sm:8px; --cm-radius-md:12px; --cm-radius-pill:999px;
}

@media (min-width:720px){
  :root{
    --t-display:52px; --t-h1-largo:36px; --t-h2:36px; --t-h3:22px; --t-h4:18px;
    --t-lead:19px; --t-body:16px; --t-cifra:40px;
    --sec-y:96px; --sec-gap:48px; --gutter:32px; --head-h:64px; --r-xl:22px;
  }
}
@media (min-width:1024px){
  :root{
    --t-display:60px; --t-h1-largo:40px; --t-h2:40px; --t-h3:24px;
    --t-lead:20px; --t-cifra:48px;
    --sec-y:112px; --sec-gap:56px; --gutter:40px;
  }
}
@media (min-width:1280px){
  :root{
    --t-display:72px; --lh-display:1.02; --ls-display:-.025em;
    --t-h1-largo:46px; --t-h2:48px; --lh-h2:1.06;
    --t-lead:21px; --t-body:17px; --t-cifra:56px;
    --sec-y:136px; --sec-gap:64px; --gutter:48px;
  }
}

/* ── Modo oscuro (A8) ──────────────────────────────────────────────────────
   Ronda 8 (dueño): negro casi puro con matiz grafito (#050709) y grises más claros (#1C1F24 / #2A2E35),
   como apple.com; las secciones alternan negro y gris para que ninguna se junte con la siguiente.
   El tema se elige en el menú (Claro · Oscuro · Automático): un script en el <head> pone
   data-tema="claro" | "oscuro" antes de pintar; sin JavaScript queda data-tema="auto" y manda el sistema.
   Contrastes sobre #050709: tinta 18:1 · ink-2 12.5 · ink-3 8.3; sobre #24282E: ink-3 5.9 ·
   enlaces #8CC8F5 8.6 · borde de campo 3.4. Mantener iguales los dos bloques de abajo. */
html[data-tema="auto"]{color-scheme:light dark}
html[data-tema="claro"]{color-scheme:light}
html[data-tema="oscuro"]{color-scheme:dark}
@media (prefers-color-scheme:dark){
  html[data-tema="auto"]{
    --c-bg:#050709; --c-bg-2:#1C1F24; --c-bg-3:#2A2E35;
    --c-surface:#24282E; --c-surface-glass:rgba(28,31,36,.94);
    --c-line:#2C3037; --c-line-2:#454B54; --c-line-ui:#727A85;
    --c-ink:#EEF2F6; --c-ink-2:#C2CBD5; --c-ink-3:#9AA6B2; --c-ink-4:#8C97A3;
    --c-blue:#5FB0EE; --c-blue-deep:#8CC8F5; --c-blue-tint:rgba(95,176,238,.14); --c-blue-line:#3D6D96;
    --c-acento:#5FB0EE; --c-wa-icono:#25D366;
    --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;
    --c-seleccion:#24527A;
    --c-card:linear-gradient(180deg,#23272D 0%,#181B20 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);
    --sh-1:0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.30);
    --sh-2:0 2px 6px rgba(0,0,0,.30), 0 16px 40px rgba(0,0,0,.45);
    --sh-3:0 8px 20px rgba(0,0,0,.40), 0 40px 100px rgba(0,0,0,.60);
    --sh-ring:0 0 0 1px rgba(255,255,255,.07);
    --sh-focus:0 0 0 3px rgba(95,176,238,.28);
  }
}
html[data-tema="oscuro"]{
    --c-bg:#050709; --c-bg-2:#1C1F24; --c-bg-3:#2A2E35;
    --c-surface:#24282E; --c-surface-glass:rgba(28,31,36,.94);
    --c-line:#2C3037; --c-line-2:#454B54; --c-line-ui:#727A85;
    --c-ink:#EEF2F6; --c-ink-2:#C2CBD5; --c-ink-3:#9AA6B2; --c-ink-4:#8C97A3;
    --c-blue:#5FB0EE; --c-blue-deep:#8CC8F5; --c-blue-tint:rgba(95,176,238,.14); --c-blue-line:#3D6D96;
    --c-acento:#5FB0EE; --c-wa-icono:#25D366;
    --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;
    --c-seleccion:#24527A;
    --c-card:linear-gradient(180deg,#23272D 0%,#181B20 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);
    --sh-1:0 1px 2px rgba(0,0,0,.40), 0 1px 1px rgba(0,0,0,.30);
    --sh-2:0 2px 6px rgba(0,0,0,.30), 0 16px 40px rgba(0,0,0,.45);
    --sh-3:0 8px 20px rgba(0,0,0,.40), 0 40px 100px rgba(0,0,0,.60);
    --sh-ring:0 0 0 1px rgba(255,255,255,.07);
    --sh-focus:0 0 0 3px rgba(95,176,238,.28);
}

/* ── Clases de marca (compatibilidad con la versión anterior) ──────────── */
.cm-logo{display:block;max-width:100%;height:auto}
.cm-theme-dark{background:var(--c-dark);color:var(--c-on-dark)}
.cm-accent{color:var(--c-blue)}
.cm-button-primary{background:var(--c-blue-btn);color:#fff;border-radius:var(--r-pill)}