/* Guion visual · SHIRUSHI. Papel y tinta: el idioma de la app, ordenado en tokens semánticos (claro y oscuro). */

/* ───────── tokens ───────── */
:root {
  /* paleta con nombre (medida de la app y del ícono, 24-oct) */
  --tinta: #0d0d0d;
  --grafito: #5d5d5d;
  --ceniza: #737373;
  --niebla: #e1e1e1;
  --bruma: #ececec;
  --papel: #f9f9f9;
  --blanco: #ffffff;

  /* superficies */
  --s-fondo: var(--blanco);
  --s-papel: var(--papel);
  --s-papel-2: #f3f3f3;
  --s-hundida: #ebebeb;
  --s-flotante: var(--blanco);
  --s-linea: var(--bruma);
  --s-linea-2: var(--niebla);
  /* texto */
  --s-texto: var(--tinta);
  --s-texto-2: var(--grafito);
  --s-texto-3: var(--ceniza);
  /* acción: la tinta. Un solo botón sólido por pantalla */
  --s-accion: var(--tinta);
  --s-accion-hover: #2b2b2b;
  --s-sobre-accion: var(--blanco);
  /* estados reservados: el tono para puntos e íconos, el «-texto» para letras (AA) */
  --s-bien: #18a058;     --s-bien-texto: #0e7a42;     --s-bien-suave: #e8f6ee;
  --s-atencion: #d68a00; --s-atencion-texto: #8f5c00; --s-atencion-suave: #fdf3df;
  --s-grave: #e5484d;    --s-grave-texto: #c22b31;    --s-grave-suave: #fdecec;
  --s-info: #2f6fe4;     --s-info-texto: #2155bf;     --s-info-suave: #eaf1fd;
  /* hoy: el rojo del calendario (como Calendario de Apple). Solo el número del día de hoy. #D93036 da 4,7:1 con blanco */
  --s-hoy: #d93036; --s-hoy-texto: #d93036;
  /* pilares: solo categoría (punto o fondo suave), nunca texto chico */
  --p-ia: #7c5cff;        --p-ia-suave: #f2efff;
  --p-anuncios: #ef6a1f;  --p-anuncios-suave: #fff1e8;
  --p-diseno: #e0458f;    --p-diseno-suave: #fdeef5;
  --p-optimizo: #109f97;  --p-optimizo-suave: #e7f6f5;
  --p-chile: #c08a00;     --p-chile-suave: #fcf5dd;

  --fuente: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fuente-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fuente-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --fuente-tiempo: ui-monospace, "SF Mono", Menlo, monospace;   /* solo para tiempos de video */

  /* escala 1,25 sobre 15 px */
  --t-12: 12px; --t-13: 13px; --t-15: 15px; --t-19: 19px; --t-24: 24px; --t-30: 30px; --t-38: 38px; --t-48: 48px; --t-60: 60px; --t-76: 76px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-pildora: 999px;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sombra-2: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --sombra-3: 0 24px 64px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  --d-rapido: 120ms; --d-medio: 240ms; --d-lento: 520ms;
  --salida: cubic-bezier(0.22, 1, 0.36, 1);
  --resorte: cubic-bezier(0.34, 1.56, 0.64, 1);
  --z-dock: 40; --z-modal: 60; --z-toast: 70;
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --s-fondo: #0b0b0b;
  --s-papel: #141414;
  --s-papel-2: #1b1b1b;
  --s-hundida: #222222;
  --s-flotante: #1b1b1b;
  --s-linea: #262626;
  --s-linea-2: #343434;
  --s-texto: #f2f2f2;
  --s-texto-2: #b0b0b0;
  --s-texto-3: #8f8f8f;
  --s-accion: #f2f2f2;
  --s-accion-hover: #d9d9d9;
  --s-sobre-accion: #0b0b0b;
  --s-bien-texto: #4cc985;     --s-bien-suave: #11261a;
  --s-atencion-texto: #f0b444; --s-atencion-suave: #2a2010;
  --s-grave-texto: #ff8a8d;    --s-grave-suave: #2c1314;
  --s-info-texto: #86aef5;     --s-info-suave: #121d33;
  --s-hoy-texto: #ff6369;
  --p-ia-suave: #1f1a38; --p-anuncios-suave: #2e1b10; --p-diseno-suave: #2e1421; --p-optimizo-suave: #0e2624; --p-chile-suave: #2a2210;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-2: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --sombra-3: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

/* ───────── base ───────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--s-fondo); color: var(--s-texto); font: var(--t-15)/1.5 var(--fuente); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background var(--d-medio), color var(--d-medio); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--s-texto); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
svg { display: block; }
/* íconos del set (web/iconos/sprite.svg): rejilla 24, trazo 1,75, puntas redondas. Toman el color del texto */
.i { width: 20px; height: 20px; flex: none; }
.i.s14 { width: 14px; height: 14px; } .i.s16 { width: 16px; height: 16px; } .i.s18 { width: 18px; height: 18px; } .i.s24 { width: 24px; height: 24px; }
h1, h2, h3, h4, p { margin: 0; }
.solo-movil { display: none; }
@media (max-width: 760px) { .solo-pc { display: none !important; } .solo-movil { display: revert; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }

/* ───────── página del guion ───────── */
.guion { width: min(1180px, 100%); margin: 0 auto; padding: 0 var(--e-5) 160px; }
.seccion { padding: var(--e-9) 0 var(--e-7); border-top: 1px solid var(--s-linea); scroll-margin-top: 24px; }
.seccion:first-of-type { border-top: 0; }
.cabeza { display: grid; gap: var(--e-2); max-width: 720px; margin-bottom: var(--e-6); }
.ceja { font-size: var(--t-13); font-weight: 600; color: var(--s-texto-2); }
.cabeza h2 { font: 600 var(--t-38)/1.1 var(--fuente-display); letter-spacing: -0.025em; }
.cabeza p { color: var(--s-texto-2); font-size: var(--t-15); max-width: 62ch; }
.capitulo { padding: var(--e-9) 0 0; }
.capitulo h2 { font: 600 var(--t-60)/1 var(--fuente-display); letter-spacing: -0.035em; }
.capitulo p { margin-top: var(--e-3); color: var(--s-texto-2); max-width: 54ch; }
.capitulo .num { display: block; margin-bottom: var(--e-3); font: 600 var(--t-15) var(--fuente-display); color: var(--s-texto-3); }
.lienzo { border-radius: var(--r-xl); background: var(--s-papel); border: 1px solid var(--s-linea); padding: var(--e-6); }
.rejilla { display: grid; gap: var(--e-4); }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .r2, .r3 { grid-template-columns: 1fr; } .lienzo { padding: var(--e-5); } }
.nota { font-size: var(--t-13); color: var(--s-texto-2); }
.nota b { color: var(--s-texto); font-weight: 600; }
.reglas { display: grid; gap: 6px; margin-top: var(--e-4); padding: 0; list-style: none; font-size: var(--t-13); color: var(--s-texto-2); }
.reglas li { display: flex; gap: 8px; }
.reglas li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--s-texto-3); }
.ficha { margin-top: var(--e-5); padding: var(--e-4); border-radius: var(--r-l); background: var(--s-fondo); border: 1px solid var(--s-linea); }
.ficha header { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-13); }
.ficha header b { font-weight: 600; }
.ficha header span { color: var(--s-texto-3); }
.ficha pre { margin: var(--e-2) 0 0; padding: var(--e-3); border-radius: var(--r-m); background: var(--s-papel-2); font: 12.5px/1.5 var(--fuente-tiempo); white-space: pre-wrap; color: var(--s-texto-2); overflow: auto; }
.ejemplo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--s-texto-3); }
.ejemplo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }

/* ───────── portada (firma) ───────── */
.portada { min-height: min(100dvh, 920px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--e-7); padding: var(--e-8) 0; }
.portada h1 { font: 600 var(--t-76)/0.98 var(--fuente-display); letter-spacing: -0.04em; }
.portada h1 .jp { display: block; font-family: var(--fuente-jp); font-weight: 600; letter-spacing: 0; font-size: 0.62em; color: var(--s-texto-3); margin-bottom: 10px; }
.portada .lema { margin-top: var(--e-4); font-size: var(--t-19); color: var(--s-texto-2); max-width: 30ch; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-6); }
.escena { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; justify-self: center; }
.escena svg { width: 100%; height: 100%; overflow: visible; }
.escena .t { fill: none; stroke: var(--s-texto); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.escena .cuadro { fill: var(--s-papel-2); }
.escena .palabra { font: 700 30px var(--fuente-display); fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 6px; }
.escena .linea-lectura { fill: var(--s-texto); }
@media (max-width: 860px) { .portada { grid-template-columns: 1fr; min-height: auto; padding-top: var(--e-7); } .portada h1 { font-size: var(--t-60); } .escena { max-width: 340px; grid-row: 1; } }

/* ───────── marca ───────── */
.marca { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--t-15)/1 var(--fuente-display); letter-spacing: -0.01em; }
.marca .jp { font-family: var(--fuente-jp); }
.marca small { display: block; margin-top: 3px; font: 600 9.5px/1 var(--fuente); letter-spacing: 0.22em; color: var(--s-texto-3); }
.icono-app { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--s-linea-2); display: grid; place-items: center; }
.icono-app svg { width: 74%; height: 74%; }
.icono-app .t { fill: none; stroke: var(--tinta); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── paleta ───────── */
.muestras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e-3); }
.muestra { display: grid; gap: 8px; }
.muestra i { display: block; aspect-ratio: 1; border-radius: var(--r-l); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.muestra b { font-size: var(--t-13); font-weight: 600; }
.muestra span { font: 12px var(--fuente-tiempo); color: var(--s-texto-2); }
.muestra em { font-style: normal; font-size: var(--t-12); color: var(--s-texto-3); }
.pilares { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.pilar { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--r-pildora); font-size: var(--t-13); font-weight: 500; background: var(--suave); color: var(--s-texto); }
.pilar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tono); }
.pilar.ia { --tono: var(--p-ia); --suave: var(--p-ia-suave); }
.pilar.anuncios { --tono: var(--p-anuncios); --suave: var(--p-anuncios-suave); }
.pilar.diseno { --tono: var(--p-diseno); --suave: var(--p-diseno-suave); }
.pilar.optimizo { --tono: var(--p-optimizo); --suave: var(--p-optimizo-suave); }
.pilar.chile { --tono: var(--p-chile); --suave: var(--p-chile-suave); }
@media (max-width: 860px) { .muestras { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ───────── tipografía ───────── */
.tipos { display: grid; gap: var(--e-4); }
.tipo { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--e-4); align-items: baseline; padding-bottom: var(--e-4); border-bottom: 1px solid var(--s-linea); }
.tipo:last-child { border-bottom: 0; }
.tipo small { font-size: var(--t-12); color: var(--s-texto-3); line-height: 1.4; }
.tipo small b { display: block; color: var(--s-texto-2); font-weight: 600; font-size: var(--t-13); }
@media (max-width: 760px) { .tipo { grid-template-columns: 1fr; gap: 4px; } }

/* ───────── espacio y forma ───────── */
.escalones { display: flex; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap; }
.escalon { display: grid; gap: 6px; justify-items: center; font: 12px var(--fuente-tiempo); color: var(--s-texto-2); }
.escalon i { display: block; background: var(--s-texto); border-radius: 3px; }
.radios { display: flex; gap: var(--e-4); flex-wrap: wrap; }
.radio { display: grid; gap: 6px; justify-items: center; font-size: var(--t-12); color: var(--s-texto-2); }
.radio i { display: block; width: 72px; height: 72px; background: var(--s-fondo); border: 1.5px solid var(--s-texto); }
.sombras { display: flex; gap: var(--e-5); flex-wrap: wrap; }
.sombra { width: 140px; height: 90px; border-radius: var(--r-l); background: var(--s-flotante); display: grid; place-items: center; font-size: var(--t-12); color: var(--s-texto-2); }

/* ───────── marca en movimiento ───────── */
.estados-marca { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e-6); align-items: center; }
.escenario-simbolo { display: grid; justify-items: center; gap: var(--e-3); }
.simbolo { width: min(300px, 64vw); aspect-ratio: 1; }
.simbolo svg { width: 100%; height: 100%; overflow: visible; }
.simbolo .t { fill: none; stroke: var(--s-texto); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--d-medio); }
.simbolo .relleno { fill: none; stroke: var(--s-hundida); stroke-width: 22; stroke-linecap: round; }
.simbolo .por-ciento { font: 600 64px var(--fuente-display); letter-spacing: -0.03em; fill: var(--s-texto); text-anchor: middle; font-variant-numeric: tabular-nums; }
.simbolo.error .t { stroke: var(--s-grave); }
.leyenda-simbolo { min-height: 26px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--s-texto-2); }
.leyenda-simbolo.grave { color: var(--s-grave-texto); }
.leyenda-simbolo.bien { color: var(--s-bien-texto); }
.controles { display: grid; gap: var(--e-3); }
.specs { display: grid; gap: 0; border: 1px solid var(--s-linea); border-radius: var(--r-m); overflow: hidden; background: var(--s-fondo); }
.specs div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 9px 12px; font-size: var(--t-13); color: var(--s-texto-2); }
.specs div + div { border-top: 1px solid var(--s-linea); }
.specs b { color: var(--s-texto); font-weight: 600; }
.specs div.activo { background: var(--s-papel-2); }
.tamanos-carga { display: flex; align-items: flex-end; gap: var(--e-5); flex-wrap: wrap; margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--s-linea); }
.tamanos-carga figure { margin: 0; display: grid; justify-items: center; gap: 8px; font-size: var(--t-12); color: var(--s-texto-3); }
.tamanos-carga .cargador { color: var(--s-texto); }
@media (max-width: 860px) { .estados-marca { grid-template-columns: 1fr; } }

/* ───────── kit · botones ───────── */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--r-pildora); border: 1px solid var(--s-linea-2); background: var(--s-fondo); color: var(--s-texto); font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none; transition: background var(--d-rapido), border-color var(--d-rapido), transform var(--d-rapido) var(--resorte), color var(--d-rapido); }
.boton:hover { background: var(--s-papel); }
.boton:active { transform: scale(0.96); }
.boton.primario { background: var(--s-accion); color: var(--s-sobre-accion); border-color: var(--s-accion); }
.boton.primario:hover { background: var(--s-accion-hover); }
.boton.fantasma { border-color: transparent; background: transparent; color: var(--s-texto-2); }
.boton.fantasma:hover { background: var(--s-papel-2); color: var(--s-texto); }
.boton.peligro { color: var(--s-grave-texto); }
.boton.peligro:hover { background: var(--s-grave-suave); border-color: transparent; }
.boton.chico { min-height: 32px; padding: 0 12px; font-size: 13px; }
.boton.grande { min-height: 48px; padding: 0 24px; font-size: var(--t-15); }
.boton svg { width: 16px; height: 16px; }
.boton[disabled] { opacity: 0.45; pointer-events: none; }
.boton-icono { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--s-texto-2); transition: background var(--d-rapido), color var(--d-rapido); }
.boton-icono:hover { background: var(--s-papel-2); color: var(--s-texto); }
.boton-icono svg { width: 18px; height: 18px; }
/* estados en capas: quieto → cargando → listo, se cruzan con desenfoque */
.boton.capas { display: inline-grid; }
.boton.capas > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity var(--d-medio), filter var(--d-medio), transform var(--d-medio) var(--salida); }
.boton.capas > span:not(.activa) { opacity: 0; filter: blur(4px); transform: scale(0.9); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.columna { display: grid; gap: var(--e-3); }

/* cargador: las cuatro esquinas del visor «leen» en orden (el mismo dibujo que web/marca/cargador.svg) */
.cargador { width: 18px; height: 18px; flex: none; }
.cargador path { fill: none; stroke: currentColor; stroke-width: 44; stroke-linecap: round; opacity: 0.22; animation: leer-esquina 1.2s var(--salida) infinite; }
.cargador path:nth-child(2) { animation-delay: 0.3s; } .cargador path:nth-child(3) { animation-delay: 0.6s; } .cargador path:nth-child(4) { animation-delay: 0.9s; }
@keyframes leer-esquina { 0%, 100% { opacity: 0.22; } 18% { opacity: 1; } 60% { opacity: 0.22; } }
[data-fuera] .cargador path { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cargador path { animation: none; opacity: 1; } }

/* ───────── kit · elección ───────── */
.segmento { position: relative; display: inline-flex; padding: 3px; border-radius: 11px; background: var(--s-papel-2); }
.segmento button { position: relative; z-index: 1; padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--s-texto-2); transition: color var(--d-rapido); }
.segmento [aria-selected="true"] { color: var(--s-texto); }
.segmento .lente { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 8px; background: var(--s-flotante); box-shadow: var(--sombra-1), 0 0 0 1px var(--s-linea); transition: transform var(--d-medio) var(--resorte), width var(--d-medio) var(--salida); }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor i { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--s-hundida); transition: background var(--d-medio); }
.interruptor i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--d-medio) var(--resorte); }
.interruptor input:checked + i { background: var(--s-accion); }
.interruptor input:checked + i::after { transform: translateX(18px); background: var(--s-sobre-accion); }
.interruptor input:focus-visible + i { outline: 2px solid var(--s-texto); outline-offset: 2px; }
.fichas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.ficha-op { position: relative; }
.ficha-op input { position: absolute; opacity: 0; }
.ficha-op span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pildora); border: 1px solid var(--s-linea-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--d-rapido); }
.ficha-op span svg { width: 16px; height: 16px; }
.ficha-op input:checked + span { background: var(--s-accion); color: var(--s-sobre-accion); border-color: var(--s-accion); }
.ficha-op input:focus-visible + span { outline: 2px solid var(--s-texto); outline-offset: 2px; }
.check-ia { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-l); background: var(--s-papel); border: 1px solid var(--s-linea); cursor: pointer; }
.check-ia input { accent-color: var(--s-accion); width: 18px; height: 18px; margin-top: 2px; }
.check-ia b { display: block; font-weight: 600; }
.check-ia small { color: var(--s-texto-2); font-size: var(--t-13); }

/* ───────── kit · estados ───────── */
.insignia { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r-pildora); font-size: 12.5px; font-weight: 500; background: var(--s-papel-2); color: var(--s-texto-2); }
.insignia svg { width: 13px; height: 13px; }
.insignia.bien { background: var(--s-bien-suave); color: var(--s-bien-texto); }
.insignia.atencion { background: var(--s-atencion-suave); color: var(--s-atencion-texto); }
.insignia.grave { background: var(--s-grave-suave); color: var(--s-grave-texto); }
.insignia.info { background: var(--s-info-suave); color: var(--s-info-texto); }
.insignia.tinta { background: var(--s-accion); color: var(--s-sobre-accion); }
.esqueleto { display: grid; gap: 10px; }
.esqueleto i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--s-papel-2), var(--s-hundida), var(--s-papel-2)); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
.esqueleto i.alto { height: 120px; border-radius: var(--r-l); }
[data-fuera] .esqueleto i { animation-play-state: paused; }
@keyframes brillo { to { background-position: -200% 0; } }
.progreso { height: 6px; border-radius: 99px; background: var(--s-hundida); overflow: hidden; }
.progreso i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--s-accion); transition: width var(--d-medio) var(--salida); }
.trozos { display: flex; gap: 3px; margin-top: 8px; }
.trozos i { flex: 1; height: 4px; border-radius: 2px; background: var(--s-hundida); transition: background var(--d-medio); }
.trozos i.hecho { background: var(--s-accion); }
.vacio { display: grid; justify-items: center; gap: var(--e-2); padding: var(--e-6) var(--e-4); text-align: center; border-radius: var(--r-l); border: 1.5px dashed var(--s-linea-2); }
.vacio .simbolo-chico { width: 48px; height: 48px; color: var(--s-texto-3); }
.vacio b { font-weight: 600; }
.vacio p { color: var(--s-texto-2); font-size: var(--t-13); max-width: 34ch; }

/* ───────── kit · avisos ───────── */
.toasts { position: fixed; left: 50%; bottom: 92px; z-index: var(--z-toast); display: grid; gap: 8px; justify-items: center; transform: translateX(-50%); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 16px; border-radius: var(--r-pildora); background: var(--s-accion); color: var(--s-sobre-accion); font-size: 14px; box-shadow: var(--sombra-3); animation: toast-entra var(--d-lento) var(--resorte) backwards; }
.toast button { padding: 6px 12px; border-radius: 99px; font-weight: 600; font-size: 13px; color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); }
.toast.sale { animation: toast-sale var(--d-medio) var(--salida) forwards; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(16px) scale(0.92); } }
@keyframes toast-sale { to { opacity: 0; transform: translateY(8px) scale(0.96); } }
.banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-l); background: var(--s-atencion-suave); color: var(--s-texto); font-size: 14px; }
.banner svg { flex: none; width: 18px; height: 18px; color: var(--s-atencion-texto); }
.banner p { flex: 1; }
.banner b { font-weight: 600; }
.alerta { width: min(380px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--s-flotante); color: var(--s-texto); box-shadow: var(--sombra-3); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.alerta[open] { animation: crecer var(--d-medio) var(--resorte); }
.alerta::backdrop { background: rgba(0, 0, 0, 0.28); }
.alerta .dentro { display: grid; gap: var(--e-3); padding: var(--e-5); }
.alerta h3 { font: 600 var(--t-19) var(--fuente-display); }
.alerta p { color: var(--s-texto-2); font-size: 14px; }
.alerta .fila { justify-content: flex-end; margin-top: var(--e-2); }
@keyframes crecer { from { opacity: 0; transform: scale(0.6); } }

/* ───────── kit · campos ───────── */
.campo { display: grid; gap: 6px; }
.campo label { font-size: var(--t-13); font-weight: 500; color: var(--s-texto-2); }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--s-linea-2); background: var(--s-fondo); font-size: 16px; outline: none; transition: border-color var(--d-rapido), box-shadow var(--d-rapido); }
.campo textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--s-texto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-texto) 8%, transparent); }
.campo .ayuda { display: flex; justify-content: space-between; font-size: var(--t-12); color: var(--s-texto-3); }
.campo.error input { border-color: var(--s-grave); }
.campo .error-texto { display: flex; gap: 6px; align-items: center; font-size: var(--t-13); color: var(--s-grave-texto); }
.campo .error-texto svg { width: 14px; height: 14px; flex: none; }

/* ───────── patrones · shell de la app ───────── */
.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 460px; border-radius: var(--r-xl); overflow: clip; background: var(--s-fondo); border: 1px solid var(--s-linea); box-shadow: var(--sombra-2); }
.lateral { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-right: 1px solid var(--s-linea); background: var(--s-papel); }
.lateral .marca { padding: 0 6px 14px; }
.lateral .boton { margin-bottom: 10px; }
.lateral a { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--s-texto-2); font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; transition: color var(--d-rapido); }
.lateral a svg { width: 18px; height: 18px; flex: none; }
.lateral a:hover, .lateral a[aria-current="true"] { color: var(--s-texto); }
.lateral .lente { position: absolute; left: 12px; right: 12px; top: 0; height: 37px; border-radius: 10px; background: var(--s-flotante); box-shadow: var(--sombra-1), 0 0 0 1px var(--s-linea); transition: transform var(--d-medio) var(--resorte); }
.lateral .pie { margin-top: auto; padding: 0 10px; font-size: var(--t-12); color: var(--s-texto-3); }
.panel { padding: var(--e-5); display: grid; align-content: start; gap: var(--e-4); }
.panel .barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.panel h3 { font: 600 var(--t-24) var(--fuente-display); letter-spacing: -0.02em; }
@media (max-width: 760px) { .shell { grid-template-columns: 1fr; } .lateral { display: none; } .pestanas { display: flex !important; } }
.pestanas { display: none; justify-content: space-around; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--s-linea); background: var(--s-papel); }
.pestanas a { display: grid; justify-items: center; gap: 2px; min-width: 64px; min-height: 44px; font-size: 11px; font-weight: 500; color: var(--s-texto-3); text-decoration: none; }
.pestanas a[aria-current="true"] { color: var(--s-texto); }
.pestanas svg { width: 22px; height: 22px; }

/* ───────── patrones · calendario (el de la app, en tokens) ───────── */
.ventana { border-radius: var(--r-xl); overflow: clip; background: var(--s-fondo); border: 1px solid var(--s-linea); box-shadow: var(--sombra-2); }
.cal-barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--s-linea); }
.nav-mes { display: flex; align-items: center; gap: 4px; }
.nav-mes h3 { font: 600 17px/1 var(--fuente-display); letter-spacing: -0.015em; min-width: 148px; text-align: center; }
.nav-mes .boton { margin-left: 6px; }
.barra-der { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.progreso-txt { font-size: var(--t-13); color: var(--s-texto-2); white-space: nowrap; }
.progreso-txt b { color: var(--s-texto); font-weight: 600; }
.cal-cuerpo { padding: var(--e-4); display: grid; gap: 14px; }
.calendario { border: 1px solid var(--s-linea); border-radius: var(--r-l); overflow: hidden; background: var(--s-fondo); }
.cal-cabeza, .cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cabeza div { padding: 10px 12px; font-size: var(--t-12); font-weight: 500; color: var(--s-texto-3); border-bottom: 1px solid var(--s-linea); }
.cal-dia { position: relative; min-height: 118px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; border-right: 1px solid var(--s-linea); border-bottom: 1px solid var(--s-linea); transition: background var(--d-rapido), box-shadow var(--d-rapido); }
.cal-grilla .cal-dia:nth-child(7n) { border-right: 0; }
.cal-grilla .cal-dia:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-dia.fuera { background: var(--s-papel); }
.cal-dia.fuera .cal-num { color: var(--s-texto-3); }
.cal-num { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: var(--t-13); font-weight: 500; }
.cal-dia.hoy .cal-num { background: var(--s-hoy); color: #fff; font-weight: 600; }
.cal-dia.destino { background: var(--s-papel-2); box-shadow: inset 0 0 0 2px var(--s-texto); }
.evento { display: grid; gap: 4px; width: 100%; padding: 7px 9px; border-radius: var(--r-s); text-align: left; background: var(--suave); border: 1px solid transparent; color: var(--s-texto); cursor: pointer; transition: border-color var(--d-rapido), transform var(--d-rapido) var(--resorte); }
.evento:hover { border-color: var(--tono); }
.evento:active { transform: scale(0.98); }
.evento.activo { border-color: var(--tono); box-shadow: 0 0 0 1px var(--tono); }
.evento b { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.evento .estado { font-size: 11px; }
.evento.hecho { background: var(--s-papel-2); }
.evento.hecho b { color: var(--s-texto-2); }
.evento.arrastrando { opacity: 0.4; }
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-12); font-weight: 500; color: var(--s-texto-2); white-space: nowrap; }
.estado::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--punto, var(--s-texto-3)); }
.punto-ev, .dia-panel { display: none; }
.vacio-txt { padding: 28px 16px; text-align: center; color: var(--s-texto-2); font-size: 14px; }

/* lo que toca grabar: una fila, la acción a mano */
.hoy-toca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-4); padding: 14px 14px 14px 16px; border-radius: var(--r-l); border: 1px solid var(--s-linea); background: var(--s-papel); }
.hoy-cuando { display: grid; justify-items: center; width: 52px; padding: 6px 0; border-radius: var(--r-m); background: var(--s-fondo); border: 1px solid var(--s-linea); }
.hoy-cuando small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--s-hoy-texto); }
.hoy-cuando b { font: 600 22px/1.1 var(--fuente-display); }
.hoy-texto { min-width: 0; }
.hoy-etiqueta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-12); color: var(--s-texto-2); }
.hoy-texto h4 { margin: 2px 0; font: 600 17px/1.3 var(--fuente-display); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-texto p { font-size: 14px; color: var(--s-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoy-acciones { display: flex; gap: 8px; }

/* tarjeta de video (día elegido, agenda, módulos) */
.tarjeta-video { display: grid; grid-template-columns: 4px minmax(0, 1fr) 18px; gap: 14px; align-items: center; width: 100%; padding: 14px 14px 14px 12px; border-radius: var(--r-l); border: 1px solid var(--s-linea); background: var(--s-fondo); color: var(--s-texto); text-align: left; transition: background var(--d-rapido); }
.tarjeta-video:hover { background: var(--s-papel); }
.tarjeta-video .tono { align-self: stretch; border-radius: 4px; background: var(--tono); }
.tarjeta-video.hecho .tono { background: var(--s-linea-2); }
.tarjeta-video b { display: block; font-size: var(--t-15); font-weight: 600; letter-spacing: -0.01em; }
.tarjeta-video .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: var(--t-13); color: var(--s-texto-2); }
.tarjeta-video > .i { color: var(--s-texto-3); }
.pilar.chico { padding: 2px 8px 2px 7px; font-size: var(--t-12); gap: 6px; }
.pilar.chico::before { width: 6px; height: 6px; }

/* agenda */
.agenda-v { display: grid; gap: var(--e-5); max-width: 820px; width: 100%; margin: 0 auto; }
.agenda-grupo h4 { margin-bottom: 8px; font-size: var(--t-13); font-weight: 500; color: var(--s-texto-2); }
.agenda-filas { display: grid; gap: 8px; }
.agenda-fila { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; }
.agenda-fecha { text-align: center; }
.agenda-fecha small { display: block; font-size: 11px; font-weight: 500; color: var(--s-texto-3); text-transform: uppercase; letter-spacing: 0.03em; }
.agenda-fecha b { font: 600 22px/1.1 var(--fuente-display); }
.agenda-fila.hoy .agenda-fecha small, .agenda-fila.hoy .agenda-fecha b { color: var(--s-hoy-texto); }

/* celular: grilla compacta con puntos y el día elegido abajo (como Calendario del iPhone) */
@media (max-width: 760px) {
  .cal-barra { grid-template-columns: 1fr auto; row-gap: 8px; padding: 10px 12px; }
  .nav-mes { grid-column: 1 / -1; grid-row: 2; }
  .nav-mes h3 { flex: 1; order: 1; min-width: 0; text-align: left; font-size: 22px; }
  .nav-mes [data-mes="-1"] { order: 2; } .nav-mes [data-mes="1"] { order: 3; } .nav-mes .boton { order: 4; }
  .progreso-txt { display: none; }
  .cal-cuerpo { padding: 12px; }
  .calendario { border: 0; border-radius: 0; overflow: visible; }
  .cal-cabeza div { padding: 6px 0; text-align: center; border: 0; font-size: 11px; }
  .cal-dia { min-height: 50px; padding: 3px 0; align-items: center; gap: 3px; border: 0 !important; background: none !important; box-shadow: none !important; }
  .cal-dia .evento { display: none; }
  .punto-ev { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--tono); }
  .punto-ev.hecho { background: var(--s-texto-3); }
  .cal-dia.fuera { opacity: 0.35; }
  .cal-num { width: 40px; height: 40px; font-size: 16px; }
  .cal-dia.elegido .cal-num { background: var(--s-accion); color: var(--s-sobre-accion); }
  .cal-dia.hoy.elegido .cal-num { background: var(--s-hoy); color: #fff; }
  .cal-dia.hoy:not(.elegido) .cal-num { background: none; color: var(--s-hoy-texto); font-weight: 700; }
  .dia-panel { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--s-linea); }
  .dia-panel h4 { font-size: var(--t-13); font-weight: 500; color: var(--s-texto-2); }
  .hoy-toca { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .hoy-acciones { grid-column: 1 / -1; }
  .hoy-acciones .boton { flex: 1; }
  .hoy-texto h4 { white-space: normal; }
  .hoy-texto p { white-space: normal; }
}

/* ───────── patrones · soltar ───────── */
.zona { display: grid; place-items: center; gap: 6px; padding: var(--e-6); border: 1.5px dashed var(--s-linea-2); border-radius: var(--r-l); background: var(--s-papel); text-align: center; cursor: pointer; transition: border-color var(--d-rapido), background var(--d-rapido), transform var(--d-medio) var(--resorte); }
.zona b { font-size: var(--t-15); }
.zona span { font-size: var(--t-13); color: var(--s-texto-2); }
.zona:hover, .zona.encima { border-color: var(--s-texto); background: var(--s-papel-2); }
.zona.encima { transform: scale(1.01); }
.zona .icono-subir { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--s-fondo); border: 1px solid var(--s-linea); margin-bottom: 4px; }
.zona .icono-subir svg { width: 20px; height: 20px; }
.archivos { display: grid; gap: 8px; margin-top: var(--e-3); padding: 0; list-style: none; }
.archivos li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-m); background: var(--s-fondo); border: 1px solid var(--s-linea); font-size: 14px; animation: toast-entra var(--d-lento) var(--resorte) backwards; }
.archivos .mini-cuadro { width: 36px; height: 48px; border-radius: 6px; background: var(--s-hundida); }
.archivos small { display: block; color: var(--s-texto-2); font-size: var(--t-12); }

/* ───────── hoja / diálogo ───────── */
.dialogo { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--s-flotante); color: var(--s-texto); box-shadow: var(--sombra-3); }
.dialogo[open] { animation: crecer var(--d-medio) var(--resorte); }
.dialogo::backdrop { background: rgba(0, 0, 0, 0.28); }
.dialogo header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--s-linea); }
.dialogo header h3 { font: 600 var(--t-19) var(--fuente-display); }
.dialogo .cuerpo { display: grid; gap: var(--e-4); padding: 20px; }
.dialogo footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--s-linea); }
.asa { display: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--s-linea-2); }
@media (max-width: 760px) {
  .dialogo { width: 100vw; max-width: 100vw; max-height: 88dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .dialogo[open] { animation: hoja var(--d-lento) var(--salida); }
  .asa { display: block; }
}
@keyframes hoja { from { transform: translateY(100%); } }

/* ───────── producto ───────── */
.estilo-tarjeta { display: grid; gap: 10px; padding: var(--e-5); border-radius: var(--r-xl); background: var(--s-fondo); border: 1px solid var(--s-linea); transition: transform var(--d-medio) var(--resorte), box-shadow var(--d-medio); }
.estilo-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.estilo-tarjeta .onda { height: 44px; display: flex; align-items: center; gap: 3px; }
.estilo-tarjeta .onda i { flex: 1; border-radius: 2px; background: var(--s-texto); opacity: 0.85; }
.estilo-tarjeta h3 { font: 600 var(--t-19) var(--fuente-display); letter-spacing: -0.01em; }
.estilo-tarjeta .para { font-size: 14px; color: var(--s-texto); }
.estilo-tarjeta p { font-size: var(--t-13); color: var(--s-texto-2); }
.estilo-tarjeta .pedir { margin-top: 4px; padding: 10px 12px; border-radius: var(--r-m); background: var(--s-papel); font-size: var(--t-13); color: var(--s-texto-2); }
.estilo-tarjeta .pedir b { color: var(--s-texto); font-weight: 600; }
.pasos { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0; list-style: none; counter-reset: paso; }
.pasos li button { width: 100%; display: grid; gap: 8px; justify-items: start; padding: 12px 10px; border-radius: var(--r-m); text-align: left; font-size: var(--t-13); font-weight: 500; color: var(--s-texto-3); background: var(--s-fondo); border: 1px solid var(--s-linea); transition: all var(--d-rapido); min-height: 88px; }
.pasos li button::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 600; background: var(--s-papel-2); color: var(--s-texto-2); }
.pasos li button[aria-current="step"] { color: var(--s-texto); border-color: var(--s-texto); }
.pasos li button[aria-current="step"]::before, .pasos li button.hecho::before { background: var(--s-accion); color: var(--s-sobre-accion); }
.pasos li button.hecho { color: var(--s-texto-2); }
.paso-detalle { margin-top: var(--e-4); padding: var(--e-5); border-radius: var(--r-l); background: var(--s-fondo); border: 1px solid var(--s-linea); display: grid; gap: 8px; }
.paso-detalle h4 { font: 600 var(--t-19) var(--fuente-display); }
.paso-detalle p { color: var(--s-texto-2); font-size: 14px; max-width: 70ch; }
@media (max-width: 860px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.revision { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-5); }
@media (max-width: 860px) { .revision { grid-template-columns: 1fr; } }
.linea-tiempo { position: relative; display: flex; gap: 3px; height: 54px; padding: 6px; border-radius: var(--r-m); background: var(--s-fondo); border: 1px solid var(--s-linea); }
.linea-tiempo .trozo { position: relative; border-radius: 6px; background: var(--s-papel-2); display: grid; place-items: center; font: 11px var(--fuente-tiempo); color: var(--s-texto-2); }
.linea-tiempo .trozo.mal { background: var(--s-grave-suave); color: var(--s-grave-texto); box-shadow: inset 0 0 0 1.5px var(--s-grave); }
.linea-tiempo .trozo.momento::after { content: ""; position: absolute; left: -3px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--s-texto); }
.hallazgos { display: grid; gap: 8px; margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.hallazgos li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: var(--r-m); background: var(--s-fondo); border: 1px solid var(--s-linea); animation: toast-entra var(--d-lento) var(--resorte) backwards; }
.hallazgos li svg { width: 18px; height: 18px; margin-top: 1px; }
.hallazgos li.error svg { color: var(--s-grave-texto); }
.hallazgos li.aviso svg { color: var(--s-atencion-texto); }
.hallazgos li.ok svg { color: var(--s-bien-texto); }
.tiempo { font-family: var(--fuente-tiempo); font-size: 0.92em; }
.telefono { position: relative; width: min(260px, 100%); aspect-ratio: 9 / 16; justify-self: center; border-radius: 30px; background: #1a1a1a; box-shadow: var(--sombra-3); overflow: clip; display: grid; }
.telefono .gancho { position: absolute; top: 18%; left: 0; right: 0; text-align: center; font: 800 26px/1 var(--fuente-display); letter-spacing: -0.02em; color: #fff; text-shadow: 0 3px 18px rgba(0,0,0,.55); }
.telefono .sub { position: absolute; top: 72%; left: 0; right: 0; text-align: center; font: 700 22px var(--fuente-display); color: #fff; text-shadow: 0 3px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35); }
.telefono .fondo-video { position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 46%, #6e6a64 0%, #3b3936 55%, #1f1e1d 100%); }
.telefono .silueta { position: absolute; left: 50%; bottom: 0; width: 64%; aspect-ratio: 1 / 1.25; transform: translateX(-50%); background: radial-gradient(42% 30% at 50% 30%, #2a2826 98%, transparent 100%), radial-gradient(70% 55% at 50% 100%, #2a2826 98%, transparent 100%); }
.acciones-revision { display: grid; gap: var(--e-2); align-content: center; }
.acciones-revision .post { padding: var(--e-4); border-radius: var(--r-l); background: var(--s-fondo); border: 1px solid var(--s-linea); font-size: 14px; color: var(--s-texto-2); }
.acciones-revision .post b { color: var(--s-texto); font-weight: 600; display: block; margin-bottom: 4px; }
.cfg { display: grid; gap: 6px; padding: var(--e-4); border-radius: var(--r-l); background: var(--s-fondo); border: 1px solid var(--s-linea); }
.cfg small { font-size: var(--t-13); color: var(--s-texto-2); }
.cfg .copiar { display: flex; gap: 8px; align-items: center; }
.cfg pre { flex: 1; margin: 0; padding: 10px 12px; border-radius: var(--r-m); background: var(--s-papel-2); font: 12.5px var(--fuente-tiempo); white-space: pre-wrap; word-break: break-all; color: var(--s-texto); }

/* ───────── web y marca ───────── */
.post { position: relative; width: min(340px, 100%); aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: clip; background: #fff; color: #0d0d0d; box-shadow: var(--sombra-2); display: grid; align-content: space-between; padding: 26px; }
.post.oscuro { background: #0d0d0d; color: #fff; }
.post h4 { font: 700 34px/1.02 var(--fuente-display); letter-spacing: -0.03em; }
.post p { font-size: 14px; opacity: 0.7; }
.post .pie-post { display: flex; justify-content: space-between; align-items: center; font: 600 13px var(--fuente-display); }
.iconos { display: flex; align-items: flex-end; gap: var(--e-5); flex-wrap: wrap; }
.iconos figure { margin: 0; display: grid; gap: 8px; justify-items: center; font-size: var(--t-12); color: var(--s-texto-3); }
.iconos .ic { display: grid; place-items: center; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.10), 0 0 0 1px var(--s-linea-2); }
.iconos .ic svg { width: 72%; height: 72%; }
.iconos .ic .t { fill: none; stroke: #0d0d0d; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── dock ───────── */
.dock { position: fixed; left: 50%; bottom: 18px; z-index: var(--z-dock); transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: var(--r-pildora); background: color-mix(in srgb, var(--s-flotante) 88%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--sombra-3); max-width: calc(100vw - 24px); }
.dock nav { position: relative; display: flex; gap: 2px; }
.dock nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--s-texto-2); text-decoration: none; white-space: nowrap; transition: color var(--d-rapido); }
.dock nav a[aria-current="true"] { color: var(--s-sobre-accion); }
.dock .gota { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--s-accion); transition: transform var(--d-medio) var(--resorte), width var(--d-medio) var(--salida); }
.dock .sep { width: 1px; height: 22px; margin: 0 4px; background: var(--s-linea-2); }
.dock .actual { display: none; padding: 0 10px; font-size: 13px; font-weight: 600; }
@media (max-width: 760px) {
  .dock nav { display: none; }
  .dock .actual { display: inline-flex; align-items: center; min-height: 44px; }
  .dock .boton-icono { width: 44px; height: 44px; }
}
.hoja-indice .cuerpo a { display: flex; justify-content: space-between; min-height: 44px; align-items: center; padding: 0 4px; border-bottom: 1px solid var(--s-linea); text-decoration: none; font-weight: 500; }
.hoja-indice .cuerpo a small { color: var(--s-texto-3); font-weight: 400; }

/* ═════════ piezas nuevas (25-oct) ═════════ */

/* ───────── identidad · iconografía ───────── */
.iconos-lab { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--e-5); }
.construccion { display: grid; gap: var(--e-3); align-content: start; }
.construccion .reticula { position: relative; aspect-ratio: 1; border-radius: var(--r-l); background: var(--s-fondo); border: 1px solid var(--s-linea); overflow: hidden; }
.construccion .reticula svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.construccion .reticula .guia { fill: none; stroke: var(--s-linea-2); stroke-width: 0.06; }
.construccion .reticula .zona-viva { fill: none; stroke: var(--p-ia); stroke-width: 0.08; stroke-dasharray: 0.4 0.3; }
.construccion .reticula .muestra-icono { color: var(--s-texto); }
.construccion .elegir-icono { display: flex; flex-wrap: wrap; gap: 6px; }
.iconos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; align-content: start; }
.icono-celda { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 10px; border-radius: var(--r-m); color: var(--s-texto); transition: background var(--d-rapido), transform var(--d-rapido) var(--resorte); }
.icono-celda:hover { background: var(--s-fondo); box-shadow: 0 0 0 1px var(--s-linea); }
.icono-celda:active { transform: scale(0.95); }
.icono-celda .i { width: 24px; height: 24px; }
.icono-celda small { font: 11.5px var(--fuente-tiempo); color: var(--s-texto-2); }
.icono-celda.copiado small { color: var(--s-bien-texto); }
.familias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e-3); }
.tamanos-icono { display: flex; align-items: flex-end; gap: var(--e-4); margin-top: var(--e-3); color: var(--s-texto); }
.tamanos-icono figure { margin: 0; display: grid; justify-items: center; gap: 6px; font-size: var(--t-12); color: var(--s-texto-3); }
.tamanos-icono figure .i { color: var(--s-texto); }
@media (max-width: 860px) { .iconos-lab { grid-template-columns: 1fr; } .construccion { max-width: 340px; } }

/* ───────── identidad · archivos de marca ───────── */
.archivos-marca { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e-3); }
.archivo-marca { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-l); background: var(--s-fondo); border: 1px solid var(--s-linea); }
.archivo-marca .vista { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--r-m); background: var(--s-papel-2); }
.archivo-marca .vista.tinta { background: var(--tinta); }
.archivo-marca .vista img { width: 46%; height: auto; }
.archivo-marca .vista.sprite { color: var(--s-texto); display: flex; gap: 10px; justify-content: center; align-items: center; }
.archivo-marca b { font-size: 14px; font-weight: 600; }
.archivo-marca small { display: block; font: 12px var(--fuente-tiempo); color: var(--s-texto-2); }
.archivo-marca .boton { justify-self: start; }

/* ───────── kit · menú ───────── */
.menu-ctx { min-width: 240px; padding: 6px; border-radius: var(--r-m); background: var(--s-flotante); border: 1px solid var(--s-linea-2); box-shadow: var(--sombra-3); }
.menu-ctx.flotante { position: fixed; z-index: var(--z-modal); animation: menu-entra var(--d-rapido) var(--salida); transform-origin: top left; }
.menu-ctx.estatico { position: relative; box-shadow: var(--sombra-2); }
@keyframes menu-entra { from { opacity: 0; transform: scale(0.96); } }
.menu-ctx .menu-titulo { padding: 6px 10px 8px; font-size: var(--t-12); color: var(--s-texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.menu-ctx button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border-radius: var(--r-s); font-size: 14px; color: var(--s-texto); text-align: left; }
.menu-ctx button .i { width: 17px; height: 17px; color: var(--s-texto-2); }
.menu-ctx button small { margin-left: auto; color: var(--s-texto-3); font-size: var(--t-12); }
.menu-ctx button:hover, .menu-ctx button:focus-visible { background: var(--s-papel-2); }
.menu-ctx button.peligro, .menu-ctx button.peligro .i { color: var(--s-grave-texto); }
.menu-ctx hr { border: 0; border-top: 1px solid var(--s-linea); margin: 5px 4px; }
.menu-demo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-5); align-items: start; }
@media (max-width: 760px) { .menu-demo { grid-template-columns: 1fr; } .menu-ctx button { min-height: 44px; } }

/* ───────── patrones · entrada ───────── */
.entrada-escena { display: grid; place-items: center; min-height: 520px; padding: var(--e-6) var(--e-4); border-radius: var(--r-xl); background: var(--s-papel); border: 1px solid var(--s-linea); }
.entrada-caja { width: min(380px, 100%); display: grid; gap: var(--e-3); padding: 32px 28px; border-radius: var(--r-xl); background: var(--s-fondo); border: 1px solid var(--s-linea); box-shadow: var(--sombra-2); }
.entrada-caja .logo-grande { width: 56px; height: 56px; border-radius: 15px; margin-bottom: 8px; }
.entrada-caja .logo-grande svg { width: 72%; height: 72%; }
.entrada-caja h4 { font: 600 var(--t-24)/1.2 var(--fuente-display); letter-spacing: -0.02em; }
.entrada-caja > p { font-size: 14px; color: var(--s-texto-2); }
.entrada-caja form { display: grid; gap: 10px; margin-top: 6px; }
.entrada-caja .boton.ancho { width: 100%; min-height: 46px; font-size: var(--t-15); }
.entrada-caja .pie-entrada { font-size: var(--t-13); color: var(--s-texto-2); text-align: center; }
.entrada-caja .pie-entrada a { font-weight: 500; color: var(--s-texto); }

/* ───────── patrones · detalle del video (cajón) ───────── */
.velo { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(0, 0, 0, 0.18); animation: aparecer var(--d-medio) var(--salida); }
.cajon { display: flex; flex-direction: column; overflow: hidden; background: var(--s-flotante); color: var(--s-texto); border: 1px solid var(--s-linea); border-radius: var(--r-xl); box-shadow: var(--sombra-3); }
.cajon.flotante { position: fixed; z-index: var(--z-modal); top: 12px; right: 12px; bottom: 12px; width: min(520px, calc(100% - 24px)); animation: entrar var(--d-medio) var(--salida); }
.cajon.en-linea { height: 720px; }
@keyframes entrar { from { transform: translateX(24px); opacity: 0; } }
@keyframes aparecer { from { opacity: 0; } }
@media (max-width: 760px) { .cajon.flotante { inset: auto 0 0 0; top: 20px; width: 100%; border-radius: 22px 22px 0 0; border-bottom: 0; animation-name: hoja; } .cajon.en-linea { height: 680px; } }
.detalle-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: var(--e-6); align-items: start; }
@media (max-width: 960px) { .detalle-demo { grid-template-columns: 1fr; } }
.cajon-cabeza { padding: 16px 20px 0; display: grid; gap: 10px; border-bottom: 1px solid var(--s-linea); }
.cajon-arriba { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cajon h3 { font: 600 22px/1.25 var(--fuente-display); letter-spacing: -0.02em; text-wrap: balance; }
.meta-fila { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: var(--t-13); color: var(--s-texto-2); }
.meta-fila > span { display: inline-flex; align-items: center; gap: 5px; }
.meta-fila .i { width: 15px; height: 15px; color: var(--s-texto-3); }
.pestanas-det { position: relative; display: flex; gap: 20px; margin-top: 2px; overflow-x: auto; scrollbar-width: none; }
.pestanas-det button { padding: 10px 0 12px; font-size: 14px; font-weight: 500; color: var(--s-texto-3); white-space: nowrap; transition: color var(--d-rapido); }
.pestanas-det button:hover { color: var(--s-texto-2); }
.pestanas-det [aria-selected="true"] { color: var(--s-texto); }
.pestanas-det .raya { position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--s-texto); transition: transform var(--d-medio) var(--resorte), width var(--d-medio) var(--salida); }
.cuenta { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--s-papel-2); font-size: 11px; color: var(--s-texto-2); }
.cajon-cuerpo { flex: 1; overflow-y: auto; padding: 20px 20px 28px; display: grid; gap: 22px; align-content: start; }
.cajon-cuerpo > * { animation: aparecer var(--d-medio) var(--salida) backwards; }
.bloque h5 { margin-bottom: 8px; font-size: var(--t-12); font-weight: 500; color: var(--s-texto-3); }
.gancho-frase { font: 600 var(--t-19)/1.4 var(--fuente-display); letter-spacing: -0.015em; text-wrap: pretty; }
.caja { padding: 14px 16px; border-radius: var(--r-m); background: var(--s-papel); font-size: 14px; color: var(--s-texto-2); }
.caja b { color: var(--s-texto); font-weight: 600; }
.modo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: var(--r-pildora); font-size: var(--t-12); font-weight: 500; white-space: nowrap; color: var(--s-texto); background: var(--m-suave); }
.modo .i { width: 14px; height: 14px; color: var(--m); }
.m-camara { --m: var(--s-texto); --m-suave: var(--s-hundida); }
.m-voz { --m: var(--p-ia); --m-suave: var(--p-ia-suave); }
.m-pantalla { --m: var(--s-info); --m-suave: var(--s-info-suave); }
.m-escena { --m: var(--p-chile); --m-suave: var(--p-chile-suave); }
.modos-resumen { display: grid; gap: 8px; }
.modos-resumen > div { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--s-texto-2); }
.modos-resumen .modo { min-width: 124px; }
.modos-resumen b { color: var(--s-texto); font-weight: 600; }
.beats { display: grid; border: 1px solid var(--s-linea); border-radius: var(--r-m); overflow: hidden; }
.beat { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; cursor: pointer; transition: background var(--d-rapido); }
.beat + .beat { border-top: 1px solid var(--s-linea); }
.beat:hover { background: var(--s-papel); }
.beat input { appearance: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid var(--s-linea-2); display: grid; place-items: center; cursor: pointer; transition: background var(--d-rapido), border-color var(--d-rapido); }
.beat input:checked { background: var(--s-accion); border-color: var(--s-accion); }
.beat input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--s-sobre-accion); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.beat input:focus-visible { outline: 2px solid var(--s-texto); outline-offset: 2px; }
.beat:has(input:checked) .beat-dice { color: var(--s-texto-3); }
.paso-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.paso-n { min-width: 12px; font-size: var(--t-12); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--s-texto-3); }
.beat-t { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--s-texto-3); }
.paso-off { display: block; margin-top: 8px; font-size: var(--t-12); color: var(--s-texto-3); }
.beat-dice { margin-top: 6px; font-size: var(--t-15); line-height: 1.45; }
.paso-off + .beat-dice { margin-top: 2px; }
.beat-dice.direccion { font-style: italic; color: var(--s-texto-2); }
.beat-plano { margin-top: 4px; font-size: var(--t-13); color: var(--s-texto-2); }
.paso-como { display: grid; gap: 6px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--s-papel); }
.paso-como div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; font-size: var(--t-13); line-height: 1.45; }
.paso-como dt { color: var(--s-texto-3); }
.paso-como dd { margin: 0; color: var(--s-texto); }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--s-linea); background: var(--s-linea); }
.datos div { padding: 10px 12px; background: var(--s-fondo); }
.datos small { display: block; margin-bottom: 2px; font-size: var(--t-12); color: var(--s-texto-3); }
.datos span { font-size: 14px; }
.titulo-lista { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.contador { padding: 2px 8px; border-radius: var(--r-pildora); background: var(--s-papel-2); font-size: var(--t-12); font-weight: 500; color: var(--s-texto-2); font-variant-numeric: tabular-nums; transition: background var(--d-medio), color var(--d-medio); }
.contador.completo { background: var(--s-accion); color: var(--s-sobre-accion); }
.subgrupo { margin: 14px 0 6px; font-size: var(--t-13); font-weight: 500; }
.en-cola { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-m); background: var(--s-papel); }
.en-cola .sello { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--s-accion); color: var(--s-sobre-accion); }
.en-cola .sello .i { width: 16px; height: 16px; }
.en-cola.recien .sello { animation: sello 520ms var(--salida); }
@keyframes sello { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
.en-cola b { display: block; font-size: 14px; font-weight: 600; }
.en-cola span { font-size: var(--t-13); color: var(--s-texto-2); }
.nota-campo { width: 100%; min-height: 84px; resize: vertical; padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--s-linea-2); background: var(--s-fondo); font-size: 16px; outline: none; }
.nota-campo:focus { border-color: var(--s-texto); }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.boton.ancho { width: 100%; }
.entrega { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.entrega .telefono { width: 150px; border-radius: 20px; }
.entrega .telefono .gancho { font-size: 15px; }
.entrega .telefono .sub { font-size: 13px; }
.copiable { position: relative; white-space: pre-wrap; color: var(--s-texto); padding-right: 92px; }
.copiable .boton { position: absolute; top: 8px; right: 8px; }
.programacion { display: grid; border: 1px solid var(--s-linea); border-radius: var(--r-m); overflow: hidden; }
.programacion div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; }
.programacion div + div { border-top: 1px solid var(--s-linea); }
.programacion .i { width: 18px; height: 18px; }
.programacion small { margin-left: auto; font-size: var(--t-13); color: var(--s-texto-2); }
@media (max-width: 760px) { .entrega { grid-template-columns: 1fr; } .entrega .telefono { justify-self: start; } .paso-como div { grid-template-columns: 1fr; gap: 1px; } .modos-resumen > div { flex-direction: column; gap: 4px; } }

/* ───────── producto · skills (memoria de marca): etiquetas en negro, blanco y grises ───────── */
.filtro-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--r-pildora); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; white-space: nowrap; }
.tag-narrativa { background: var(--s-accion); color: var(--s-sobre-accion); }
.tag-visual { background: var(--s-fondo); color: var(--s-texto); border-color: var(--s-texto); }
.tag-sonido { background: var(--grafito); color: #fff; }
.tag-referencias { background: var(--s-hundida); color: var(--s-texto); }
.tag-reglas { background: var(--s-fondo); color: var(--s-texto-2); border: 1px dashed var(--s-texto-3); }
.filtro { min-height: 32px; padding: 0 12px; border-radius: var(--r-pildora); font-size: var(--t-13); font-weight: 600; background: var(--s-papel-2); color: var(--s-texto-2); transition: box-shadow var(--d-rapido), transform var(--d-rapido) var(--resorte); }
.filtro.tag { font-size: var(--t-13); padding: 0 12px; }
.filtro:active { transform: scale(0.96); }
.filtro[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--s-fondo), 0 0 0 3.5px var(--s-texto); }
.filtro:not(.tag)[aria-pressed="true"] { background: var(--s-accion); color: var(--s-sobre-accion); }
.bib-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: var(--e-4); }
.recurso { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 12px; padding: 12px; border-radius: var(--r-l); border: 1px solid var(--s-linea); background: var(--s-fondo); animation: toast-entra var(--d-lento) var(--resorte) backwards; }
.rec-vista { width: 64px; height: 64px; display: grid; place-items: center; gap: 2px; align-content: center; border-radius: var(--r-m); background: var(--s-papel-2); color: var(--s-texto-2); }
.rec-vista small { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--s-texto-2); }
.rec-texto b { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; }
.rec-texto p { margin: 4px 0; font-size: var(--t-13); color: var(--s-texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-texto small { font-size: var(--t-12); color: var(--s-texto-3); }
.rec-acc { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }

/* ───────── producto · integraciones ───────── */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.int { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--r-l); border: 1px solid var(--s-linea); background: var(--s-fondo); }
.int header { display: flex; align-items: center; gap: 10px; }
.int header .marca-int { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--s-papel-2); color: var(--s-texto); }
.int header b { font: 600 16px/1.2 var(--fuente-display); }
.int header .estado-int { margin-left: auto; }
.int p { font-size: 13.5px; color: var(--s-texto-2); }
.int form { display: flex; flex-wrap: wrap; gap: 8px; }
.int form input { flex: 1 1 150px; min-height: 40px; padding: 0 12px; border-radius: var(--r-m); border: 1px solid var(--s-linea-2); background: var(--s-fondo); font-size: 16px; outline: none; }
.int form input:focus { border-color: var(--s-texto); }
.estado-int { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pildora); font-size: var(--t-12); font-weight: 600; background: var(--s-papel-2); color: var(--s-texto-2); white-space: nowrap; }
.estado-int .i { width: 13px; height: 13px; }
.estado-int.ok { background: var(--s-bien-suave); color: var(--s-bien-texto); }
.canales { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.canales li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.canales li .i { width: 17px; height: 17px; }
.canales li small { margin-left: auto; font-size: var(--t-12); color: var(--s-texto-3); }
.canales li.ok small { color: var(--s-bien-texto); }

/* ───────── producto · estilos de la comunidad ───────── */
.barra-comunidad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.buscador { position: relative; flex: 1 1 260px; max-width: 360px; }
.buscador .i { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--s-texto-3); }
.buscador input { width: 100%; min-height: 40px; padding: 0 14px 0 38px; border-radius: var(--r-pildora); border: 1px solid var(--s-linea-2); background: var(--s-fondo); font-size: 16px; outline: none; }
.buscador input:focus { border-color: var(--s-texto); }
.comunidad-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--e-3); }
.estilo-com { display: grid; gap: 10px; padding: var(--e-4); border-radius: var(--r-l); background: var(--s-fondo); border: 1px solid var(--s-linea); text-align: left; color: var(--s-texto); transition: transform var(--d-medio) var(--resorte), box-shadow var(--d-medio), border-color var(--d-rapido); }
.estilo-com:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.estilo-com[aria-pressed="true"] { border-color: var(--s-texto); }
.estilo-com .onda { height: 32px; display: flex; align-items: center; gap: 3px; }
.estilo-com .onda i { flex: 1; border-radius: 2px; background: var(--s-texto); opacity: 0.85; }
.estilo-com b { font: 600 16px var(--fuente-display); }
.estilo-com .para { font-size: var(--t-13); color: var(--s-texto-2); }
.autor { display: flex; align-items: center; gap: 8px; font-size: var(--t-12); color: var(--s-texto-2); }
.avatar { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--s-papel-2); font-size: 10px; font-weight: 700; color: var(--s-texto); box-shadow: 0 0 0 1px var(--s-linea); }
.metricas { display: flex; align-items: center; gap: 12px; font-size: var(--t-12); color: var(--s-texto-2); }
.metricas span { display: inline-flex; align-items: center; gap: 4px; }
.metricas .i { width: 14px; height: 14px; }
.sello-oficial { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: var(--r-pildora); background: var(--s-papel-2); font-size: 11px; font-weight: 600; color: var(--s-texto); }
.sello-oficial .i { width: 12px; height: 12px; }
.ficha-estilo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-5); margin-top: var(--e-4); padding: var(--e-5); border-radius: var(--r-xl); background: var(--s-fondo); border: 1px solid var(--s-linea); }
.ficha-estilo .onda-grande { height: 64px; display: flex; align-items: center; gap: 4px; }
.ficha-estilo .onda-grande i { flex: 1; border-radius: 3px; background: var(--s-texto); transform-origin: center; animation: onda-entra var(--d-lento) var(--resorte) backwards; }
@keyframes onda-entra { from { transform: scaleY(0.1); } }
.ficha-estilo h4 { margin-top: var(--e-3); font: 600 var(--t-30)/1.1 var(--fuente-display); letter-spacing: -0.02em; }
.ficha-estilo > div > p { margin-top: 6px; color: var(--s-texto-2); }
.sonidos { display: grid; gap: 6px; }
.sonido { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-m); background: var(--s-papel); font-size: 14px; }
.sonido .boton-icono { width: 36px; height: 36px; background: var(--s-fondo); box-shadow: 0 0 0 1px var(--s-linea); color: var(--s-texto); }
.sonido .boton-icono .i { width: 16px; height: 16px; }
.sonido code { margin-left: auto; font: 11.5px var(--fuente-tiempo); color: var(--s-texto-2); }
.sonido.sonando .boton-icono { background: var(--s-accion); color: var(--s-sobre-accion); }
@media (max-width: 860px) { .ficha-estilo { grid-template-columns: 1fr; } }

/* ───────── producto · guía con íconos ───────── */
.pasos li button .i { width: 20px; height: 20px; color: var(--s-texto-2); }
.pasos li button[aria-current="step"] .i { color: var(--s-texto); }

/* ───────── web y marca · correo ───────── */
.correo-demo { display: grid; justify-items: center; gap: var(--e-4); }
.correo-marco { width: 640px; max-width: 100%; height: 660px; border: 1px solid var(--s-linea); border-radius: var(--r-l); background: #f3f3f3; box-shadow: var(--sombra-2); transition: width var(--d-lento) var(--salida); }
.correo-marco.celular { width: 390px; height: 760px; }

/* ───────── web y marca · carrusel 1080×1350 (se dibuja a tamaño real y se escala) ───────── */
.carrusel { --k: 0.34; display: flex; gap: var(--e-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px var(--e-4); scrollbar-width: thin; }
.lamina-marco { flex: none; width: calc(1080px * var(--k)); height: calc(1350px * var(--k)); scroll-snap-align: start; border-radius: calc(36px * var(--k) * 3); overflow: hidden; box-shadow: var(--sombra-2), 0 0 0 1px var(--s-linea); }
.lamina { width: 1080px; height: 1350px; transform: scale(var(--k)); transform-origin: top left; display: grid; align-content: space-between; padding: 96px; background: #fcfcfc; color: #0d0d0d; font-family: var(--fuente-display); }
.lamina.tinta { background: #0d0d0d; color: #fcfcfc; }
.lamina .arriba { display: flex; justify-content: space-between; align-items: center; font: 600 40px var(--fuente-display); letter-spacing: 0.02em; }
.lamina .arriba span:last-child { color: #737373; font-variant-numeric: tabular-nums; }
.lamina.tinta .arriba span:last-child { color: #a3a3a3; }
.lamina h4 { font: 700 132px/0.98 var(--fuente-display); letter-spacing: -0.045em; }
.lamina p { margin-top: 36px; font: 500 44px/1.3 var(--fuente); color: #5d5d5d; max-width: 22ch; }
.lamina.tinta p { color: #b0b0b0; }
.lamina .cara-lamina { width: 380px; height: 380px; }
.lamina .cara-lamina .t { fill: none; stroke: currentColor; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.lamina .num-paso { display: inline-grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: #0d0d0d; color: #fcfcfc; font: 700 60px var(--fuente-display); }
.lamina .icono-grande { width: 240px; height: 240px; }
.lamina .boton-lamina { justify-self: start; display: inline-flex; align-items: center; gap: 18px; padding: 34px 56px; border-radius: 999px; background: #fcfcfc; color: #0d0d0d; font: 600 44px var(--fuente-display); }
.puntos-carrusel { display: flex; justify-content: center; gap: 8px; }
.puntos-carrusel button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.puntos-carrusel button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-linea-2); transition: background var(--d-rapido), transform var(--d-medio) var(--resorte); }
.puntos-carrusel button[aria-current="true"]::before { background: var(--s-texto); transform: scale(1.25); }
@media (max-width: 760px) { .carrusel { --k: 0.26; } }
.logo-grande.error .t { stroke: var(--s-grave) !important; }
.ficha-estilo .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.int.ancha { grid-column: span 2; }
@media (max-width: 700px) { .int.ancha { grid-column: auto; } }
.int form .acciones-form { display: flex; gap: 8px; }
@media (max-width: 760px) {
  .segmento button { padding: 6px 11px; }
}