/* ==========================================================================
   Talón 2 · sistema de diseño de Talonaria (propuesta, 13 oct 2026)
   Basado en el código de dev.talonaria.es.

   Dos capas:
   1) Producto: los tokens de css/tokens.css con los MISMOS nombres que ya usa el
      código (--color-*, --space-*, --radius-*, --text-*, --font-*). Cambian
      valores, no nombres. Así la migración es cambiar valores en un único sitio.
      Son fijos: la web de Talonaria es clara.
   2) Documento: --d-*, el marco de estas páginas, que sigue el tema claro/oscuro.
   Los componentes llevan el prefijo t- solo en esta maqueta. En el código
   sustituyen a las clases que se indican en cada componente.
   ========================================================================== */

:root {
  /* ---- Marca (se mantienen) ---- */
  --color-brand: #CCFF00;          /* lima: acción principal y beneficio. Nunca texto sobre blanco (1,2:1) */
  --color-brand-strong: #B8E600;   /* lima pulsado. Ya existía como hover suelto */
  --color-brand-soft: #F4FFCC;     /* nuevo: fondos de invitación y realce suave */
  --color-brand-dark: #002B2A;     /* tinta: texto, barra, acción secundaria */
  --color-brand-mid: #1A4A48;      /* tinta pulsada */

  /* ---- Superficie (se mantienen) ---- */
  --color-bg: #F4F9F4;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EEF5EE;

  /* ---- Texto ---- */
  --color-text-primary: #002B2A;   /* antes #0D1F1E. Una tinta menos */
  --color-text-secondary: #4A6B5A; /* se mantiene (5,9:1) */
  --color-text-muted: #587868;     /* antes #8AAA96 (2,5:1). Ahora 4,9:1 */

  /* ---- Líneas ---- */
  --color-border: rgba(0, 43, 42, .12);
  --color-border-mid: rgba(0, 43, 42, .24);

  /* ---- Estados: un color por significado ---- */
  --color-danger: #C93635;         /* antes #E24B4A (3,9:1) y 9 rojos más. 5,2:1 */
  --color-danger-bg: #FDECEB;
  --color-success: #157A5A;        /* antes #1D9E75 (3,4:1). 5,3:1 */
  --color-success-bg: #E1F5EE;
  --color-warning: #8A5A00;        /* antes #F59E0B como texto (2,2:1). 5,9:1 */
  --color-warning-bg: #FEF3C7;

  /* ---- Tipografía ---- */
  --font-display: "Montagu Slab", Georgia, "Times New Roman", serif;          /* se mantiene: titulares */
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* nueva: lectura */
  --font-mono: "Kode Mono", ui-monospace, "SF Mono", Menlo, monospace;        /* se mantiene: datos */

  /* Escala: 8 tamaños en lugar de 103. Mismos nombres que tokens.css */
  --text-xs: .75rem;     /* 12 · etiquetas, pestañas */
  --text-sm: .8125rem;   /* 13 · meta, ayuda */
  --text-md: .9375rem;   /* 15 · título de tarjeta, botón */
  --text-base: 1rem;     /* 16 · lectura, campos (iOS no hace zoom) */
  --text-lg: 1.25rem;    /* 20 · H3 */
  --text-xl: 1.5rem;     /* 24 · H2 */
  --text-2xl: 2rem;      /* 32 · H1 móvil */
  --text-3xl: 2.75rem;   /* 44 · beneficio grande, H1 escritorio */

  /* ---- Espacio (se mantiene la escala de tokens.css) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- Forma ---- */
  --radius-sm: 8px;      /* campos, casillas de código */
  --radius-md: 12px;     /* tarjetas */
  --radius-lg: 16px;     /* hojas, tarjeta destacada */
  --radius-xl: 24px;     /* bloques de landing */
  --radius-pill: 999px;  /* botones, chips, etiquetas */

  --shadow-sm: 0 1px 2px rgba(0, 43, 42, .06), 0 1px 3px rgba(0, 43, 42, .06);
  --shadow-md: 0 6px 18px rgba(0, 43, 42, .10);
  --shadow-lg: 0 -12px 32px rgba(0, 43, 42, .16);

  /* ---- Capas: 6 valores en lugar de 35 ---- */
  --z-sticky: 100; --z-nav: 1000; --z-overlay: 1100; --z-sheet: 1200; --z-toast: 1300; --z-consent: 1400;

  /* ---- Medidas táctiles ---- */
  --tap: 44px;
  --control-h: 48px;
  --control-h-sm: 40px;

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Documento (claro) ---- */
  --d-bg: #F7FAF6;
  --d-fg: #0E2524;
  --d-fg-2: #4C635D;
  --d-line: rgba(14, 37, 36, .14);
  --d-panel: #FFFFFF;
  --d-code: #EBF2EC;
  --d-mark: #CCFF00;
  --d-alta: #B3312F;
  --d-media: #8A5A00;
  --d-baja: #4C635D;
  --d-ok: #157A5A;
  --d-shadow: 0 1px 2px rgba(14, 37, 36, .06), 0 10px 30px rgba(14, 37, 36, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --d-bg: #0C1817; --d-fg: #E4EEE9; --d-fg-2: #9DB3AB; --d-line: rgba(228, 238, 233, .14);
    --d-panel: #13221F; --d-code: #1A2C29; --d-mark: #CCFF00; --d-alta: #FF8A84; --d-media: #F2C46B;
    --d-baja: #9DB3AB; --d-ok: #7FD8B0; --d-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --d-bg: #0C1817; --d-fg: #E4EEE9; --d-fg-2: #9DB3AB; --d-line: rgba(228, 238, 233, .14);
  --d-panel: #13221F; --d-code: #1A2C29; --d-mark: #CCFF00; --d-alta: #FF8A84; --d-media: #F2C46B;
  --d-baja: #9DB3AB; --d-ok: #7FD8B0; --d-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ==========================================================================
   DOCUMENTO
   ========================================================================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--d-bg);
  color: var(--d-fg);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.doc { max-width: 1180px; margin: 0 auto; padding-inline: 20px; padding-block: 0 72px; }
.doc-top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding-block: 14px; background: var(--d-bg); border-bottom: 1px solid var(--d-line);
}
.doc-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 var(--font-mono); color: var(--d-fg); text-decoration: none; }
.doc-brand i { width: 22px; height: 14px; border-radius: 3px; background: var(--d-mark); box-shadow: inset 0 0 0 1.5px #002B2A; }
.doc-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.doc-nav a { font: 600 14px/1 var(--font-body); color: var(--d-fg-2); text-decoration: none; padding: 9px 12px; border-radius: 999px; }
.doc-nav a:hover { color: var(--d-fg); background: var(--d-code); }
.doc-nav a[aria-current="page"] { color: #002B2A; background: var(--d-mark); }
.doc-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-block: 12px; border-bottom: 1px solid var(--d-line); }
.doc-sub a { font: 500 13px/1.4 var(--font-mono); color: var(--d-fg-2); text-decoration: none; }
.doc-sub a:hover { color: var(--d-fg); text-decoration: underline; }

.eyebrow { font: 700 12px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--d-fg-2); margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.04; margin-top: 12px; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); line-height: 1.1; margin-top: 72px; scroll-margin-top: 90px; }
h3 { font-size: 1.2rem; line-height: 1.2; }
h4 { font: 650 16px/1.35 var(--font-body); margin: 0; }
p { margin: 0; }
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--d-fg-2); max-width: 64ch; margin-top: 18px; }
.sub { color: var(--d-fg-2); max-width: 68ch; margin-top: 10px; }
.note { font-size: 14px; color: var(--d-fg-2); max-width: 70ch; }
.prose p + p { margin-top: 12px; }
.prose { max-width: 68ch; }
a { color: inherit; }
code, .mono { font-family: var(--font-mono); font-size: .88em; }
code { background: var(--d-code); padding: 1px 6px; border-radius: 5px; overflow-wrap: anywhere; }
b, strong { font-weight: 650; }
:focus-visible { outline: 3px solid #4D7CFE; outline-offset: 2px; }

.meta-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font: 500 13px/1.4 var(--font-mono); color: var(--d-fg-2); }
.meta-row b { color: var(--d-fg); font-weight: 700; }

.grid { display: grid; gap: 16px; }
.c2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.c3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.c4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid > * { min-width: 0; }
.panel { background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 14px; padding: 20px; min-width: 0; }
.panel h3 + p, .panel h4 + p { margin-top: 6px; color: var(--d-fg-2); font-size: 15px; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }

/* Cifras de auditoría */
.figs { display: grid; gap: 18px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: 36px; }
.fig { border-top: 3px solid var(--d-fg); padding-top: 12px; }
.fig strong { display: block; font: 700 38px/1 var(--font-mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fig p { margin-top: 8px; font-size: 14px; color: var(--d-fg-2); }

/* Hallazgos */
.finds { margin-top: 18px; }
.find { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 16px; padding-block: 16px; border-top: 1px solid var(--d-line); }
.find:last-child { border-bottom: 1px solid var(--d-line); }
.sev { align-self: start; justify-self: start; font: 700 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; border: 1.5px solid currentColor; }
.sev.alta { color: var(--d-alta); } .sev.media { color: var(--d-media); } .sev.baja { color: var(--d-baja); } .sev.ok { color: var(--d-ok); }
.find p { margin-top: 4px; color: var(--d-fg-2); font-size: 15px; }
.find .where { display: block; margin-top: 6px; font: 500 12px/1.5 var(--font-mono); color: var(--d-fg-2); overflow-wrap: anywhere; }
.find .fix { grid-column: 2; font-size: 15px; color: var(--d-fg); }
.find .fix::before { content: "Propuesta → "; font: 600 12px/1 var(--font-mono); color: var(--d-fg-2); }
@media (max-width: 560px) { .find { grid-template-columns: 1fr; } .find .fix { grid-column: 1; } }

/* Tablas del documento */
.tw { overflow-x: auto; margin-top: 14px; border: 1px solid var(--d-line); border-radius: 12px; background: var(--d-panel); }
table.dt { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
.dt th, .dt td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--d-line); }
.dt tr:last-child td { border-bottom: 0; }
.dt th { font: 700 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--d-fg-2); background: var(--d-code); }
.dt td.k { font-weight: 650; white-space: nowrap; }
.dt td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st { display: inline-block; font: 700 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; padding: 5px 7px; border-radius: 5px; border: 1.5px solid currentColor; white-space: nowrap; }
.st.no { color: var(--d-alta); } .st.mid { color: var(--d-media); } .st.ok { color: var(--d-ok); }

/* Muestras de color en documento */
.sw-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); margin-top: 16px; }
.sw { border: 1px solid var(--d-line); border-radius: 12px; overflow: hidden; background: var(--d-panel); }
.sw i { display: flex; align-items: flex-end; height: 76px; padding: 10px; font: 700 13px/1 var(--font-mono); font-style: normal; }
.sw div { padding: 10px 12px 12px; font-size: 13px; }
.sw b { display: block; font: 700 12px/1.3 var(--font-mono); }
.sw small { display: block; margin-top: 3px; color: var(--d-fg-2); line-height: 1.35; }
.chaos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.chaos span { width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* Antes → después */
.ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 10px; }
.ba > div { min-width: 0; }
.ba .arrow { font: 700 18px/1 var(--font-mono); color: var(--d-fg-2); padding-top: 10px; }
.ba .old { font: 500 12px/1.6 var(--font-mono); color: var(--d-fg-2); overflow-wrap: anywhere; }
@media (max-width: 640px) { .ba { grid-template-columns: 1fr; } .ba .arrow { transform: rotate(90deg); justify-self: start; padding-top: 0; } }

/* Pasos de flujo */
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.steps li { font: 600 13px/1.2 var(--font-body); padding: 9px 12px; border-radius: 10px; background: var(--d-panel); border: 1px solid var(--d-line); }
.steps li.sep { background: none; border: 0; padding: 0; color: var(--d-fg-2); font-family: var(--font-mono); }
.steps.new li:not(.sep) { border-color: var(--d-fg); }
.steps.new li.hl { background: var(--d-mark); color: #002B2A; border-color: #002B2A; }
.count { font: 700 12px/1 var(--font-mono); color: var(--d-fg-2); margin-left: 6px; }

/* Lista "para el programador" */
.copy { margin-top: 14px; }
.copy > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 18px; padding-block: 11px; border-top: 1px solid var(--d-line); font-size: 15px; }
.copy > div:last-child { border-bottom: 1px solid var(--d-line); }
.copy .k { font: 600 12px/1.5 var(--font-mono); color: var(--d-fg-2); }
.copy q { quotes: "«" "»"; }
@media (max-width: 560px) { .copy > div { grid-template-columns: 1fr; } }

.doc-foot { margin-top: 80px; padding-top: 18px; border-top: 1px solid var(--d-line); font-size: 13px; color: var(--d-fg-2); display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }

/* Escaparate de componentes: fondo de producto fijo, para que se vean como en la web */
.stage {
  background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-body);
  border: 1px solid var(--d-line); border-radius: 14px; padding: 20px; min-width: 0;
}
.stage-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.stage-row + .stage-row { margin-top: 12px; }
.spec { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.spec > * { min-width: 0; }
.spec .rules { font-size: 15px; }
.spec .rules p + p { margin-top: 8px; }
.spec .rules .rep { margin-top: 12px; font: 500 12px/1.6 var(--font-mono); color: var(--d-fg-2); overflow-wrap: anywhere; }
.spec .rules .rep b { color: var(--d-fg); }
@media (max-width: 860px) { .spec { grid-template-columns: 1fr; } }

/* ==========================================================================
   PRODUCTO · componentes Talón 2
   ========================================================================== */
.t { font-family: var(--font-body); color: var(--color-text-primary); }
.t svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.t svg.i.s16 { width: 16px; height: 16px; }
.t svg.i.s24 { width: 24px; height: 24px; }

/* Botón */
.t-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h); padding: 0 22px; border: 0; border-radius: var(--radius-pill);
  font: 650 var(--text-md)/1 var(--font-body); letter-spacing: 0; text-transform: none; text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.t-btn--primary { background: var(--color-brand); color: var(--color-brand-dark); box-shadow: inset 0 0 0 1.5px var(--color-brand-dark); }
.t-btn--primary:hover { background: var(--color-brand-strong); }
.t-btn--secondary { background: var(--color-brand-dark); color: var(--color-brand); }
.t-btn--secondary:hover { background: var(--color-brand-mid); }
.t-btn--outline { background: var(--color-surface); color: var(--color-brand-dark); box-shadow: inset 0 0 0 1.5px var(--color-border-mid); }
.t-btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--color-brand-dark); }
.t-btn--text { background: none; color: var(--color-brand-dark); padding: 0 8px; text-decoration: underline; text-underline-offset: 3px; }
.t-btn--danger { background: var(--color-surface); color: var(--color-danger); box-shadow: inset 0 0 0 1.5px var(--color-danger); }
.t-btn--sm { min-height: var(--control-h-sm); padding: 0 16px; font-size: var(--text-sm); }
.t-btn--block { width: 100%; }
.t-btn[disabled], .t-btn.is-disabled { background: var(--color-surface-alt); color: var(--color-text-muted); box-shadow: none; cursor: not-allowed; }

/* Botón de icono */
.t-iconbtn {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none;
  border: 0; border-radius: 50%; background: var(--color-surface); color: var(--color-brand-dark);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.t-iconbtn.is-on { color: var(--color-danger); }
.t-iconbtn--flat { box-shadow: none; background: transparent; }
.t-iconbtn--glass { background: rgba(255, 255, 255, .92); }

/* Chip de filtro (sustituye .vpill, selects de categoría) */
.t-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.t-chips::-webkit-scrollbar { display: none; }
.t-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-mid); background: var(--color-surface);
  color: var(--color-brand-dark); font: 600 var(--text-sm)/1 var(--font-body); white-space: nowrap;
}
.t-chip b { font: 700 11px/1 var(--font-mono); color: var(--color-text-secondary); }
.t-chip.is-on { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-brand); }
.t-chip.is-on b { color: var(--color-brand); }

/* Segmentado (Lista / Mapa) */
.t-seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--color-surface-alt); gap: 2px; }
.t-seg span { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); font: 600 var(--text-sm)/1 var(--font-body); color: var(--color-text-secondary); }
.t-seg span.is-on { background: var(--color-surface); color: var(--color-brand-dark); box-shadow: var(--shadow-sm); }

/* Etiqueta: una forma, seis significados */
.t-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill);
  font: 700 11px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.t-tag svg.i { width: 13px; height: 13px; stroke-width: 2.2; }
.t-tag--benefit { height: 28px; padding: 0 10px; font-size: 14px; letter-spacing: 0; background: var(--color-brand); color: var(--color-brand-dark); box-shadow: inset 0 0 0 1.5px var(--color-brand-dark); }
.t-tag--urgent { background: var(--color-danger-bg); color: var(--color-danger); }
.t-tag--neutral { background: var(--color-surface-alt); color: var(--color-text-secondary); }
.t-tag--ok { background: var(--color-success-bg); color: var(--color-success); }
.t-tag--warn { background: var(--color-warning-bg); color: var(--color-warning); }
.t-tag--ink { background: var(--color-brand-dark); color: var(--color-brand); }
.t-tag--talitos { background: var(--color-brand-soft); color: var(--color-brand-dark); box-shadow: inset 0 0 0 1px rgba(0, 43, 42, .18); }

/* Marcador de foto (en la web, la foto de la oferta) */
.t-ph { position: relative; display: grid; place-items: center; overflow: hidden; color: rgba(0, 43, 42, .55); background: var(--ph, #DCEBDF); }
.t-ph svg.i { width: 30%; height: 30%; max-width: 44px; max-height: 44px; stroke-width: 1.5; }
.t-ph[data-c="belleza"] { --ph: linear-gradient(135deg, #F6DCE1, #EFC7D0); }
.t-ph[data-c="clases"] { --ph: linear-gradient(135deg, #DDE7F7, #C9D9F2); }
.t-ph[data-c="comer"] { --ph: linear-gradient(135deg, #F8E3C9, #F1D0A6); }
.t-ph[data-c="tiendas"] { --ph: linear-gradient(135deg, #E4E9C9, #D3DCA8); }
.t-ph[data-c="servicios"] { --ph: linear-gradient(135deg, #D8ECE6, #BFE0D6); }
.t-ph[data-c="salud"] { --ph: linear-gradient(135deg, #E3DDF3, #D2C8EC); }

/* Tarjeta de oferta en fila (sustituye 4 copias del mismo marcado) */
.t-card {
  position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px; border-radius: var(--radius-md); background: var(--color-surface);
  border: 1px solid var(--color-border); text-decoration: none; color: inherit;
}
.t-card .t-ph { width: 92px; height: 92px; border-radius: var(--radius-sm); }
.t-card .ben { position: absolute; left: 16px; top: 74px; }
.t-card .body { min-width: 0; padding-right: 30px; display: grid; gap: 3px; }
.t-card .ttl { font: 650 var(--text-md)/1.3 var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-card .biz { font-size: var(--text-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.t-card .save { position: absolute; right: 2px; top: 2px; width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--color-brand-dark); }
.t-card .save.is-on { color: var(--color-danger); }
.t-card .save.is-on svg { fill: currentColor; }

/* Tarjeta destacada (carrusel "Esta semana") con troquel */
.t-feat { flex: none; width: 236px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.t-feat .t-ph { height: 112px; }
.t-feat .top { padding: 12px 14px 10px; display: grid; gap: 4px; }
.t-feat .ttl { font: 700 17px/1.2 var(--font-display); letter-spacing: -.01em; }
.t-feat .biz { font-size: var(--text-sm); color: var(--color-text-secondary); }
.t-feat .stub { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px 12px; }

/* El troquel: la seña del sistema. Solo en destacada, ficha y vale. */
.t-perf { position: relative; height: 0; border-top: 2px dashed var(--color-border-mid); margin: 0 14px; }
.t-perf::before, .t-perf::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--perf-bg, var(--color-bg)); }
.t-perf::before { left: -23px; } .t-perf::after { right: -23px; }

/* Vale (Mis vales y pantalla de canje) */
.t-vale { border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.t-vale .top { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px; align-items: center; }
.t-vale .t-ph { width: 56px; height: 56px; border-radius: var(--radius-sm); }
.t-vale .ttl { font: 650 var(--text-md)/1.3 var(--font-body); }
.t-vale .biz { font-size: var(--text-sm); color: var(--color-text-secondary); }
.t-vale .stub { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 12px; }
.t-vale .stub .tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Código de 4 cifras (canje vecino, código del comercio, servicio) */
.t-code { display: flex; justify-content: center; gap: 10px; }
.t-code i {
  width: 56px; height: 64px; display: grid; place-items: center; font: 700 28px/1 var(--font-mono); font-style: normal;
  border-radius: var(--radius-sm); background: var(--color-surface); border: 2px solid var(--color-border-mid); color: var(--color-brand-dark);
}
.t-code i.is-on { border-color: var(--color-brand-dark); box-shadow: 0 0 0 3px var(--color-brand); }
.t-code--sm { gap: 6px; }
.t-code--sm i { width: 38px; height: 44px; font-size: 20px; }
.t-code--hidden i { background: var(--color-brand-dark); color: var(--color-brand); border-color: var(--color-brand-dark); }

/* Campos */
.t-field { display: grid; gap: 6px; }
.t-field label { font: 600 var(--text-sm)/1.3 var(--font-body); color: var(--color-brand-dark); }
.t-field label small { font-weight: 400; color: var(--color-text-secondary); }
.t-input {
  width: 100%; min-height: var(--control-h); padding: 0 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-mid); background: var(--color-surface); color: var(--color-text-primary);
  font: 400 var(--text-base)/1.2 var(--font-body); display: flex; align-items: center;
}
.t-input.is-focus { border-color: var(--color-brand-dark); box-shadow: 0 0 0 3px var(--color-brand); }
.t-input.is-error { border-color: var(--color-danger); }
.t-help { font-size: var(--text-sm); color: var(--color-text-secondary); }
.t-err { font-size: var(--text-sm); color: var(--color-danger); font-weight: 600; }
.t-search { display: flex; align-items: center; gap: 10px; min-height: var(--control-h); padding: 0 14px; white-space: nowrap; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-surface); border: 1.5px solid var(--color-border-mid); color: var(--color-text-secondary); font-size: var(--text-base); }
.t-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.45; }
.t-check i { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--color-brand-dark); display: grid; place-items: center; }
.t-check i.is-on { background: var(--color-brand-dark); color: var(--color-brand); }
.t-switch { width: 44px; height: 26px; border-radius: 999px; background: var(--color-border-mid); position: relative; flex: none; }
.t-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); }
.t-switch.is-on { background: var(--color-brand-dark); }
.t-switch.is-on::after { left: 21px; background: var(--color-brand); }

/* Barra superior de pantalla */
.t-appbar { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 8px; }
.t-appbar .ttl { flex: 1; min-width: 0; font: 700 var(--text-lg)/1.15 var(--font-display); letter-spacing: -.01em; }

/* Barra inferior: una sola, 4 pestañas */
.t-tabbar {
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: var(--color-surface);
  border-top: 1px solid var(--color-border); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}
.t-tabbar a { position: relative; display: grid; justify-items: center; gap: 3px; padding-top: 8px; min-height: 52px; font: 600 var(--text-xs)/1.1 var(--font-body); color: var(--color-text-secondary); text-decoration: none; }
.t-tabbar a::before { content: ""; position: absolute; top: 0; width: 28px; height: 4px; border-radius: 0 0 4px 4px; background: transparent; }
.t-tabbar a.is-on { color: var(--color-brand-dark); }
.t-tabbar a.is-on::before { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand-dark); }
.t-tabbar a.is-on svg.i { stroke-width: 2.3; }
.t-tabbar .badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-danger); color: #fff; font: 700 10px/18px var(--font-mono); text-align: center; }

/* Barra de acción (ficha, vale): sustituye a la barra de pestañas */
.t-actionbar { display: flex; gap: 10px; align-items: center; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgba(0, 43, 42, .07); }
.t-actionbar .t-btn { flex: 1; }

/* Hoja inferior */
.t-sheet { background: var(--color-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.t-sheet .grab { width: 40px; height: 5px; border-radius: 9px; background: var(--color-border-mid); margin: 0 auto 10px; }
.t-sheet .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.t-sheet .hd b { font: 700 var(--text-lg)/1.2 var(--font-display); }
.t-scrim { position: absolute; inset: 0; background: rgba(0, 43, 42, .45); }

/* Aviso breve (toast) */
.t-toast { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: var(--color-brand-dark); color: #fff; font: 600 var(--text-sm)/1.3 var(--font-body); box-shadow: var(--shadow-md); }
.t-toast .grow { flex: 1; min-width: 0; }
.t-toast a { color: var(--color-brand); font-weight: 700; text-decoration: none; padding: 8px 6px; }

/* Aviso en página */
.t-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.45; }
.t-banner b { display: block; font-size: var(--text-md); }
.t-banner--info { background: var(--color-surface-alt); color: var(--color-brand-dark); }
.t-banner--ok { background: var(--color-success-bg); color: var(--color-success); }
.t-banner--warn { background: var(--color-warning-bg); color: var(--color-warning); }
.t-banner--error { background: var(--color-danger-bg); color: var(--color-danger); }

/* Invitación (registro, app, newsletter): una por pantalla como máximo */
.t-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 14px; border-radius: var(--radius-md); background: var(--color-brand-soft); border: 1px solid rgba(0, 43, 42, .14); }
.t-invite b { font: 700 var(--text-md)/1.25 var(--font-body); display: block; }
.t-invite p { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }

/* Estado vacío */
.t-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 22px 16px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1.5px dashed var(--color-border-mid); }
.t-empty .ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--color-brand-soft); }
.t-empty b { font: 700 var(--text-lg)/1.2 var(--font-display); }
.t-empty p { font-size: var(--text-sm); color: var(--color-text-secondary); max-width: 30ch; }

/* Cifra y progreso */
.t-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.t-kpi { padding: 10px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.t-kpi b { display: block; font: 700 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.t-kpi span { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-secondary); }
.t-progress { height: 8px; border-radius: 9px; background: var(--color-surface-alt); overflow: hidden; }
.t-progress i { display: block; height: 100%; border-radius: 9px; background: var(--color-brand-dark); }
.t-progress--lima i { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand-dark); }

/* Lista de menú (Cuenta, panel, admin) */
.t-list { border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); overflow: hidden; }
.t-list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; text-decoration: none; color: var(--color-brand-dark); font: 600 var(--text-md)/1.2 var(--font-body); border-top: 1px solid var(--color-border); }
.t-list a:first-child { border-top: 0; }
.t-list a span { flex: 1; min-width: 0; }
.t-list a .n { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--color-danger); color: #fff; font: 700 11px/22px var(--font-mono); text-align: center; }
.t-list a .n.soft { background: var(--color-surface-alt); color: var(--color-text-secondary); }
.t-list a .chev { color: var(--color-text-muted); }
.t-group { font: 700 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); margin: 18px 4px 8px; }

/* Pasos numerados ("Cómo se usa") */
.t-howto { display: grid; gap: 10px; counter-reset: s; margin: 0; padding: 0; list-style: none; }
.t-howto li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.45; }
.t-howto li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--color-brand-dark); color: var(--color-brand); font: 700 13px/1 var(--font-mono); }
.t-howto b { display: block; color: var(--color-brand-dark); font-size: var(--text-md); }

/* Tabla de admin (patrón admincompanies, ya decidido en el proyecto) */
.t-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm); font-size: var(--text-sm); }
.t-table th { background: var(--color-brand-dark); color: var(--color-brand); font: 700 11px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 10px 12px; }
.t-table td { padding: 10px 12px; border-top: 1px solid var(--color-border); vertical-align: middle; }
.t-table td a { font-weight: 650; color: var(--color-brand-dark); }

/* ==========================================================================
   MAQUETAS DE MÓVIL
   ========================================================================== */
.phones { display: grid; gap: 28px 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 26px; align-items: start; }
.shot { min-width: 0; display: grid; gap: 12px; }
.shot figcaption { display: grid; gap: 6px; }
.shot figcaption .eyebrow { color: var(--d-fg-2); }
.shot figcaption h3 { font-size: 1.12rem; }
.shot figcaption ul { margin: 2px 0 0; padding-left: 18px; font-size: 14px; color: var(--d-fg-2); }
.shot figcaption li { margin: 3px 0; }
.shot { margin: 0; }
.phone {
  --perf-bg: var(--color-bg);
  position: relative; width: 100%; max-width: 320px; height: 660px; margin: 0 auto; overflow: hidden;
  border-radius: 34px; background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-body);
  border: 9px solid #0B1514; box-shadow: var(--d-shadow); display: flex; flex-direction: column;
}
.phone .bar { flex: none; display: flex; justify-content: space-between; padding: 8px 18px 4px; font: 700 11px/1 var(--font-mono); color: var(--color-brand-dark); }
.phone .scr { flex: 1; min-height: 0; overflow: hidden; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.phone .scr.flush { padding: 0; }
.phone .scr > * { flex-shrink: 0; }
.phone .dock { flex: none; position: relative; }
.phone .over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
.phone.white { background: var(--color-surface); --perf-bg: var(--color-surface); }
.phone h1.p { font: 700 26px/1.05 var(--font-display); letter-spacing: -.02em; margin: 6px 2px 0; }
.phone .sec { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 2px 0; }
.phone .sec b { font: 700 18px/1.1 var(--font-display); }
.phone .sec a { font-size: 13px; font-weight: 600; color: var(--color-brand-dark); }
.phone .rail { display: flex; gap: 10px; overflow: hidden; margin-right: -12px; }
.phone .small { font-size: 13px; color: var(--color-text-secondary); }
.phone .tip { font-size: 12px; color: var(--color-text-secondary); text-align: center; }
.ex { font: 700 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--d-fg-2); }

/* Ficha */
.hero-ph { height: 196px; border-radius: 0; }
.hero-ctrl { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; }
.fx { padding: 14px 14px 0; display: grid; gap: 10px; }
.fx .bigben { font: 700 40px/1 var(--font-mono); letter-spacing: -.03em; }
.fx h2.p { font: 700 22px/1.12 var(--font-display); letter-spacing: -.015em; margin: 0; }
.bizrow { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-text-secondary); }
.bizrow .logo { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-alt); font: 700 12px/1 var(--font-mono); color: var(--color-brand-dark); flex: none; }
.bizrow b { display: block; color: var(--color-brand-dark); font-size: 14px; }
.cond { display: grid; gap: 6px; font-size: 13px; color: var(--color-text-secondary); }
.cond div { display: flex; gap: 8px; align-items: center; }
.box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; }
.box h4 { font: 700 15px/1.2 var(--font-display); margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ==========================================================================
   MAQUETAS DE ESCRITORIO (1280 px, se escalan al ancho del documento)
   ========================================================================== */
.dfig { margin: 30px 0 0; display: grid; gap: 14px; }
.dfig figcaption { display: grid; gap: 6px; max-width: 80ch; }
.dfig figcaption ul { margin: 2px 0 0; padding-left: 18px; font-size: 14px; color: var(--d-fg-2); }
.dfig figcaption li { margin: 3px 0; }
.dwrap { overflow-x: auto; border-radius: 14px; }
.desk {
  width: 1280px; background: var(--color-bg); color: var(--color-text-primary); font-family: var(--font-body);
  border: 1px solid var(--d-line); border-radius: 14px; overflow: hidden; box-shadow: var(--d-shadow);
}
.desk .chrome { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #E6EDE7; border-bottom: 1px solid var(--color-border); }
.desk .chrome i { width: 11px; height: 11px; border-radius: 50%; background: #C5D0C9; }
.desk .chrome .url { margin-left: 14px; width: 460px; height: 22px; border-radius: 6px; background: #fff; font: 500 12px/22px var(--font-mono); padding: 0 10px; color: var(--color-text-secondary); }
.dtop { display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 32px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.dtop .logo { font: 700 23px/1 var(--font-display); letter-spacing: -.02em; color: var(--color-brand-dark); white-space: nowrap; }
.dtop .logo small { font: 700 10px/1 var(--font-mono); letter-spacing: .12em; margin-left: 6px; color: var(--color-text-secondary); }
.dtop .links { display: flex; gap: 22px; }
.dtop .links a { position: relative; font: 600 15px/1 var(--font-body); color: var(--color-text-secondary); text-decoration: none; padding: 25px 0; }
.dtop .links a.is-on { color: var(--color-brand-dark); }
.dtop .links a.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand-dark); }
.dtop .grow { flex: 1; }
.dtop .t-search { width: 340px; min-height: 42px; font-size: 14px; }
.dtop .me { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.dtop .me .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--color-brand); box-shadow: inset 0 0 0 1.5px var(--color-brand-dark); font: 700 13px/1 var(--font-mono); }
.dtop .lang { font: 700 12px/1 var(--font-mono); color: var(--color-text-secondary); }
.dtop .lang b { color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.dpanel { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 720px; }
.dside { background: var(--color-surface); border-right: 1px solid var(--color-border); padding: 22px 14px; display: grid; align-content: start; gap: 2px; }
.dside .grp { font: 700 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); margin: 18px 10px 8px; }
.dside .grp:first-child { margin-top: 0; }
.dside a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 10px; font: 600 14px/1.2 var(--font-body); color: var(--color-brand-dark); text-decoration: none; }
.dside a span { flex: 1; }
.dside a.is-on { background: var(--color-brand-dark); color: var(--color-brand); }
.dside a .n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--color-danger); color: #fff; font: 700 11px/22px var(--font-mono); text-align: center; }
.dside a .n.soft { background: var(--color-surface-alt); color: var(--color-text-secondary); }
.dside .biz { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--color-surface-alt); margin-bottom: 8px; font-size: 13px; }
.dside .biz b { display: block; font-size: 14px; }
.dmain { padding: 30px 36px 40px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.dmain h1.p { font: 700 32px/1.1 var(--font-display); letter-spacing: -.02em; margin: 0; }
.dmain .lead2 { font-size: 15px; color: var(--color-text-secondary); margin-top: -8px; }
.dgrid { display: grid; gap: 16px; }
.dfoot { display: flex; justify-content: space-between; gap: 20px; padding: 18px 32px; border-top: 1px solid var(--color-border); background: var(--color-surface); font-size: 13px; color: var(--color-text-secondary); }

/* Mapa esquemático (marcador de Google Maps) */
.mapph { position: relative; overflow: hidden; background: #E4ECE3; }
.mapph svg.streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; }
.pin b { font: 700 12px/1 var(--font-mono); padding: 6px 8px; border-radius: 999px; background: var(--color-brand); color: var(--color-brand-dark); box-shadow: inset 0 0 0 1.5px var(--color-brand-dark), var(--shadow-md); white-space: nowrap; }
.pin::after { content: ""; width: 2px; height: 8px; background: var(--color-brand-dark); }
.pin.is-on b { background: var(--color-brand-dark); color: var(--color-brand); }
.pin.cluster b { background: var(--color-surface); }