/* ═══════════════════════════════════════════════════════════════════════════
   services.css — portada de Services y pagina de Recipes.
   Carril SERVICES · modelo INTERNO · solo frontend.
   CSS EXTERNO, sin handlers inline ni style= (CLAUDE.md).

   ── LOS TOKENS: COPIA VIGILADA DEL KIT, NO UN SISTEMA PROPIO ────────────────
   La fuente unica de valores es ui-kit/tokens.css. Esta hoja no la enlaza:
   ui-kit/ no se publica (scripts/build-publico.sh) y release-guards/connect-
   guards lo dejan fuera de la huella PORQUE ninguna pagina de produccion lo
   enlaza. Enlazarlo desde aqui rompia esa premisa sin que ningun guard lo
   viera: un cambio del kit saldria a produccion sin mover la huella.

   Asi que los valores se COPIAN, con dos reglas que vigila el guard
   docs/services/services-cero-importes.guard.mjs:
     1. cada --svc-NOMBRE vale exactamente lo mismo que --NOMBRE en
        ui-kit/tokens.css. Si el kit cambia y esta copia no, la CI sale roja;
     2. ningun nombre del kit se redefine sin prefijo, y no hay :root. Eso es
        lo que evita C-1 («--surface vale #FFFFFF en 18 paginas y #141414 en
        15»): aqui ningun token comparte nombre con otra hoja del sitio.
   Los tokens viven en .svc (la clase del <body>), no en :root.

   ── EL UNICO VALOR PROPIO: EL PESO DEL CUERPO ───────────────────────────────
   --svc-peso-cuerpo. Vale 400, el del diseñador: lo decidio Abraham el
   2026-09-29, lado a lado en docs/services/diseno/vista-pesos/ (pregunta de
   la COLA 2026-09-24). El kit (ui-kit/tokens.css, SISTEMA-DISENO §1.5) sigue
   en 700 hasta su propia PR, que va detras de la #133 en el tren.
   Titulares y etiquetas siguen los pesos del kit (800 / 700 / 600).

   ── OTRAS DECISIONES DE ABRAHAM APLICADAS (COLA 2026-09-24) ─────────────────
   · el logotipo, el del kit: rojo. El kit escribe 800 (ui-kit/kit.css .ba-logo,
     «900 se retira»), y Bricolage Grotesque no tiene 900: 800 es lo que pinta.
   · el contorno del boton secundario es --border-field (3.31:1), no --border.
   · «Sin foto» en el hueco 4:3 del plato, hasta que haya una foto propia.

   QUE NO CUBRE: no hay modo oscuro (SISTEMA-DISENO 1.1); solo dos cortes,
   640px y 1024px (C-6); nada de esta hoja se usa fuera de pages/services/.
   ═══════════════════════════════════════════════════════════════════════ */

.svc {
  /* ── TOKENS (copia de ui-kit/tokens.css; el guard compara cada valor) ── */
  --svc-red:            #E23744;
  --svc-red-dark:       #C82F3B;
  --svc-text:           #0E0E0E;
  --svc-text-muted:     #6B7280;
  --svc-surface:        #FFFFFF;
  --svc-surface-sunken: #F7F7F8;
  --svc-border:         #E4E4E7;
  --svc-border-field:   #848E9F;
  --svc-radius-sm:      8px;
  --svc-radius-md:      12px;
  --svc-radius-lg:      16px;
  --svc-radius-pill:    999px;
  --svc-shadow-card:    0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --svc-font-head:      'Bricolage Grotesque', sans-serif;
  --svc-font-body:      'Geist Sans', 'Geist', system-ui, sans-serif;
  --svc-fs-label:       12px;
  --svc-fs-secondary:   13px;
  --svc-fs-body:        14px;
  --svc-fs-card-title:  20px;
  --svc-fs-screen:      28px;
  --svc-fs-display:     36px;
  --svc-lh-body:        1.7;
  --svc-lh-title:       1.4;
  --svc-lh-button:      1;
  --svc-space-1:        4px;
  --svc-space-2:        8px;
  --svc-space-3:        12px;
  --svc-space-4:        16px;
  --svc-space-5:        24px;
  --svc-space-6:        32px;
  --svc-space-7:        48px;
  --svc-space-8:        64px;
  --svc-on-dark-muted:  rgba(255, 255, 255, .62);
  --svc-on-dark-line:   rgba(255, 255, 255, .14);
  --svc-header-h-mobile: 56px;
  --svc-header-h:       66px;
  --svc-touch-min:      44px;
  --svc-transition:     220ms;

  /* ── LOCAL: 400, decision de Abraham (2026-09-29) ── */
  --svc-peso-cuerpo:    400;
}

/* ── BASE ──────────────────────────────────────────────────────────────── */
.svc *, .svc *::before, .svc *::after { box-sizing: border-box; }

.svc {
  margin: 0;
  background: var(--svc-surface);
  color: var(--svc-text);
  font-family: var(--svc-font-body);
  font-size: var(--svc-fs-body);
  font-weight: var(--svc-peso-cuerpo);
  line-height: var(--svc-lh-body);
  -webkit-font-smoothing: antialiased;
}

:where(.svc) :where(h1, h2, h3, h4) {
  font-family: var(--svc-font-head);
  line-height: var(--svc-lh-title);
  margin: 0;
}

:where(.svc) :where(p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.svc) :where(ul, ol) { list-style: none; }
:where(.svc) a { color: inherit; }
/* «bolder» sobre un cuerpo a 700 daria 900, que el kit retira: se fija. */
:where(.svc) :where(b, strong) { font-weight: 700; }

.svc-skip {
  position: absolute; left: var(--svc-space-2); top: calc(-1 * var(--svc-space-8));
  background: var(--svc-text); color: #FFFFFF;
  padding: var(--svc-space-2) var(--svc-space-4); border-radius: var(--svc-radius-sm);
  z-index: 300; text-decoration: none;
}
.svc-skip:focus { top: var(--svc-space-2); }

.svc-ico {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.svc-ico--sm { width: 16px; height: 16px; }

.svc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--svc-space-4); }

/* ── CABECERA TIPO APP ─────────────────────────────────────────────────── */
.svc-bar {
  position: sticky; top: 0; z-index: 200;
  background: var(--svc-surface);
  border-bottom: 1px solid var(--svc-border);
}
.svc-bar-in {
  height: var(--svc-header-h-mobile);
  display: flex; align-items: center; gap: var(--svc-space-3);
}
.svc-logo {
  font-family: var(--svc-font-head);
  font-size: var(--svc-fs-card-title);
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--svc-red);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: .3em;
  min-height: var(--svc-touch-min);
  align-self: center; line-height: var(--svc-touch-min);
}
.svc-logo-suffix { color: var(--svc-text-muted); }
.svc-bar-title {
  font-family: var(--svc-font-head); font-size: var(--svc-fs-body); font-weight: 700;
  margin: 0 auto;
}
.svc-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--svc-touch-min); height: var(--svc-touch-min);
  margin-left: calc(-1 * var(--svc-space-3));
  color: var(--svc-text); border-radius: var(--svc-radius-pill);
}
.svc-back:hover { background: var(--svc-surface-sunken); }
.svc-back:focus-visible { outline: 2px solid var(--svc-red); outline-offset: 2px; }
.svc-bar-logo-wide { display: none; }

.svc-lang {
  margin-left: auto;
  min-width: var(--svc-touch-min); min-height: var(--svc-touch-min);
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--svc-text);
  font-family: var(--svc-font-body); font-size: var(--svc-fs-label); font-weight: 600;
  letter-spacing: .06em;
}
.svc-lang span {
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--svc-space-3);
  border: 1px solid var(--svc-border-field); border-radius: var(--svc-radius-pill);
}
.svc-lang:hover span { background: var(--svc-surface-sunken); }
.svc-lang:focus-visible { outline: 2px solid var(--svc-red); outline-offset: 2px; border-radius: var(--svc-radius-pill); }

/* ── BOTONES (kit: pildora, primario en --red-dark, secundario --border-field) */
.svc-btn {
  min-height: var(--svc-touch-min);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--svc-space-2);
  padding: 0 var(--svc-space-5);
  border: 1px solid transparent; border-radius: var(--svc-radius-pill);
  font-family: var(--svc-font-body); font-size: var(--svc-fs-secondary); font-weight: 600;
  line-height: var(--svc-lh-button);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--svc-transition), border-color var(--svc-transition);
}
.svc-btn--primary { background: var(--svc-red-dark); color: #FFFFFF; }
.svc-btn--primary:hover { background: var(--svc-red); }
.svc-btn--primary:active { background: var(--svc-red-dark); transform: translateY(1px); }
.svc-btn--secondary { background: var(--svc-surface); color: var(--svc-text); border-color: var(--svc-border-field); }
.svc-btn--secondary:hover { background: var(--svc-surface-sunken); }
.svc-btn--block { display: flex; width: 100%; }
.svc-btn:focus-visible { outline: 2px solid var(--svc-red); outline-offset: 2px; }

.svc-actions { display: flex; flex-wrap: wrap; gap: var(--svc-space-3); margin-top: var(--svc-space-5); }

/* ── PIEZAS DE TEXTO ───────────────────────────────────────────────────── */
.svc-eyebrow {
  display: block;
  font-size: var(--svc-fs-label); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--svc-text-muted);
}
.svc-h1 { font-size: var(--svc-fs-screen); font-weight: 800; letter-spacing: -.02em; }
.svc-h2 { font-size: var(--svc-fs-card-title); font-weight: 700; letter-spacing: -.01em; }
.svc-lead { color: var(--svc-text-muted); max-width: 62ch; }
.svc-lead + .svc-lead { margin-top: var(--svc-space-1); }
.svc-micro { font-size: var(--svc-fs-label); color: var(--svc-text-muted); }

.svc-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--svc-space-2);
  border-radius: var(--svc-radius-pill);
  background: var(--svc-surface-sunken); color: var(--svc-text-muted);
  font-size: var(--svc-fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}

.svc-section { padding: var(--svc-space-7) 0 0; }
.svc-section-head { margin-bottom: var(--svc-space-5); }
.svc-section-head .svc-h2 { margin-top: var(--svc-space-1); }

/* ── PORTADA: cabecera de seccion + indice numerado ────────────────────── */
.svc-home { padding-top: var(--svc-space-6); padding-bottom: var(--svc-space-7); }
.svc-home-head {
  padding-bottom: var(--svc-space-5);
  border-bottom: 2px solid var(--svc-text);
}
.svc-home-head .svc-h1 { margin: var(--svc-space-2) 0 var(--svc-space-3); }

.svc-index-cols { display: none; }
.svc-index-row {
  display: grid; grid-template-columns: 32px 1fr 20px; gap: var(--svc-space-3);
  align-items: start;
  padding: var(--svc-space-5) 0; min-height: 88px;
  border-bottom: 1px solid var(--svc-border);
  text-decoration: none; color: var(--svc-text);
  transition: background var(--svc-transition);
}
.svc-index-row:hover { background: var(--svc-surface-sunken); }
.svc-index-row:focus-visible { outline: 2px solid var(--svc-red); outline-offset: 2px; }
.svc-index-num { font-family: var(--svc-font-head); font-size: var(--svc-fs-body); font-weight: 700; color: var(--svc-text-muted); }
.svc-index-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--svc-space-2); }
.svc-index-name b { font-family: var(--svc-font-head); font-size: var(--svc-fs-card-title); font-weight: 700; letter-spacing: -.01em; line-height: var(--svc-lh-title); }
.svc-index-desc { display: block; color: var(--svc-text-muted); font-size: var(--svc-fs-secondary); margin-top: var(--svc-space-1); max-width: 62ch; }
.svc-index-go { color: var(--svc-text-muted); margin-top: var(--svc-space-1); }
.svc-index-after { margin-top: var(--svc-space-5); }

/* ── RECIPES: entrada ──────────────────────────────────────────────────── */
.svc-hero { padding: var(--svc-space-6) 0 0; }
.svc-hero .svc-h1 { margin: var(--svc-space-2) 0 var(--svc-space-3); }
.svc-hero-private { margin-top: var(--svc-space-4); }
/* Un boton primario por pantalla: en movil vive en la barra fija de abajo;
   en escritorio, en esta columna fija a la derecha (la barra se oculta). */
.svc-page-aside { display: none; }
.svc-page-aside .svc-h2 { margin: var(--svc-space-1) 0 var(--svc-space-2); }
.svc-page-aside .svc-btn { margin-top: var(--svc-space-4); }

.svc-card {
  background: var(--svc-surface);
  border-radius: var(--svc-radius-md);
  box-shadow: var(--svc-shadow-card);
  padding: var(--svc-space-4);
}

/* tres tarjetas numeradas */
.svc-problems { display: grid; grid-template-columns: 1fr; gap: var(--svc-space-4); }
.svc-problem-num { display: block; font-family: var(--svc-font-head); font-size: var(--svc-fs-body); font-weight: 700; color: var(--svc-red-dark); }
.svc-problem h3 { font-size: var(--svc-fs-body); font-weight: 700; margin: var(--svc-space-2) 0 var(--svc-space-1); }
.svc-problem p { color: var(--svc-text-muted); font-size: var(--svc-fs-secondary); }

/* el esquema de los siete campos */
.svc-schema { border-top: 1px solid var(--svc-border); }
.svc-schema-row {
  display: grid; grid-template-columns: 1fr; gap: var(--svc-space-1);
  padding: var(--svc-space-3) 0; border-bottom: 1px solid var(--svc-border);
}
.svc-schema-row dt { font-weight: 700; }
.svc-schema-row dd { color: var(--svc-text-muted); font-size: var(--svc-fs-secondary); }
.svc-schema-note { margin-top: var(--svc-space-4); }

/* el panel de ejemplo */
.svc-demo { border-radius: var(--svc-radius-lg); box-shadow: var(--svc-shadow-card); overflow: hidden; background: var(--svc-surface); }
.svc-demo-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--svc-space-2);
  padding: var(--svc-space-3) var(--svc-space-4);
  background: var(--svc-surface-sunken); border-bottom: 1px solid var(--svc-border);
}
.svc-demo-band .svc-micro { flex: 1 1 200px; }
.svc-demo-body { display: grid; grid-template-columns: 1fr; }
.svc-demo-list { padding: var(--svc-space-4); border-bottom: 1px solid var(--svc-border); }
.svc-demo-list h3 { font-size: var(--svc-fs-body); font-weight: 700; margin-bottom: var(--svc-space-2); }
.svc-chips { display: flex; flex-wrap: wrap; gap: var(--svc-space-2); margin-bottom: var(--svc-space-3); }
.svc-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--svc-space-3);
  border: 1px solid var(--svc-border); border-radius: var(--svc-radius-pill);
  font-size: var(--svc-fs-label); font-weight: 600; color: var(--svc-text-muted);
}
.svc-chip--on { background: var(--svc-text); border-color: var(--svc-text); color: #FFFFFF; }
.svc-demo-item { padding: var(--svc-space-2) 0; border-bottom: 1px solid var(--svc-border); }
.svc-demo-item:last-child { border-bottom: 0; }
.svc-demo-item b { display: block; font-weight: 700; }
.svc-demo-item span { display: block; font-size: var(--svc-fs-label); color: var(--svc-text-muted); }
.svc-demo-item--on b { color: var(--svc-red-dark); }
.svc-demo-item--off b { color: var(--svc-text-muted); }

.svc-demo-recipe { padding: var(--svc-space-4); }
.svc-demo-recipe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--svc-space-3); }
.svc-demo-recipe-head h3 { font-size: var(--svc-fs-card-title); font-weight: 700; }
.svc-pill {
  display: inline-flex; align-items: center; gap: var(--svc-space-2); height: 24px; padding: 0 var(--svc-space-3);
  border-radius: var(--svc-radius-pill); background: var(--svc-surface-sunken); color: var(--svc-text);
  font-size: var(--svc-fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.svc-pill i { width: 6px; height: 6px; border-radius: var(--svc-radius-pill); background: currentColor; }

/* la regla de la foto: 4:3, filete interior, «Sin foto» del mismo tamaño */
.svc-nophoto {
  aspect-ratio: 4 / 3; width: 100%; margin: var(--svc-space-3) 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--svc-surface-sunken);
  border-radius: var(--svc-radius-sm);
  box-shadow: inset 0 0 0 1px var(--svc-border);
  color: var(--svc-text-muted); font-size: var(--svc-fs-secondary); font-weight: 600;
}
.svc-demo-recipe h4 { font-size: var(--svc-fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--svc-text-muted); margin: var(--svc-space-4) 0 var(--svc-space-2); }
.svc-ing { border-top: 1px solid var(--svc-border); }
.svc-ing li { display: flex; justify-content: space-between; gap: var(--svc-space-3); padding: var(--svc-space-2) 0; border-bottom: 1px solid var(--svc-border); }
.svc-ing li span:last-child { color: var(--svc-text-muted); white-space: nowrap; }
.svc-steps li { display: grid; grid-template-columns: 24px 1fr; gap: var(--svc-space-2); padding: var(--svc-space-1) 0; }
.svc-steps li span:first-child { color: var(--svc-text-muted); }
.svc-demo-note { margin-top: var(--svc-space-3); padding: var(--svc-space-3); background: var(--svc-surface-sunken); border-radius: var(--svc-radius-sm); font-size: var(--svc-fs-secondary); }

/* qué incluye */
.svc-included { display: grid; grid-template-columns: 1fr; gap: var(--svc-space-3); }
.svc-included li { display: grid; grid-template-columns: 20px 1fr; gap: var(--svc-space-3); align-items: start; }
.svc-included .svc-ico { color: var(--svc-red-dark); margin-top: 2px; }
.svc-included b { display: block; font-weight: 700; }
.svc-included span { display: block; color: var(--svc-text-muted); font-size: var(--svc-fs-secondary); }

/* el UNICO bloque oscuro de la pagina */
.svc-dark {
  background: var(--svc-text); color: #FFFFFF;
  border-radius: var(--svc-radius-lg);
  padding: var(--svc-space-6) var(--svc-space-4);
}
.svc-dark p { color: var(--svc-on-dark-muted); margin-top: var(--svc-space-2); max-width: 62ch; }

/* cómo se entra (sustituye al bloque de precio) */
.svc-access .svc-lead { margin-top: var(--svc-space-2); }
.svc-access-mail { margin-top: var(--svc-space-4); }
.svc-access-mail a { color: var(--svc-red-dark); font-weight: 600; }

/* barra de accion fija abajo (movil): bajo el pulgar */
.svc-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--svc-surface);
  border-top: 1px solid var(--svc-border);
  padding: var(--svc-space-3) var(--svc-space-4);
}
.svc-actionbar-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: var(--svc-space-3); }
.svc-actionbar-name { font-family: var(--svc-font-head); font-weight: 700; }
.svc-actionbar .svc-btn { flex: 1 1 auto; }
.svc--with-bar { padding-bottom: 76px; }

/* ── PIE (el pie es el otro sitio donde el oscuro esta permitido) ──────── */
.svc-footer {
  background: var(--svc-text); color: #FFFFFF;
  margin-top: var(--svc-space-8);
  padding: var(--svc-space-7) 0 var(--svc-space-5);
}
.svc-footer .svc-logo { color: #FFFFFF; font-size: var(--svc-fs-body); min-height: 0; line-height: var(--svc-lh-title); }
.svc-footer .svc-logo-suffix { color: var(--svc-on-dark-muted); }
.svc-footer-links { display: flex; flex-wrap: wrap; gap: var(--svc-space-2) var(--svc-space-4); margin-top: var(--svc-space-4); }
.svc-footer-links a {
  color: var(--svc-on-dark-muted); text-decoration: none; font-size: var(--svc-fs-secondary);
  display: inline-flex; align-items: center; min-height: var(--svc-touch-min);
}
.svc-footer-links a:hover { color: #FFFFFF; }
.svc-footer-links a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.svc-footer-rule { border: 0; border-top: 1px solid var(--svc-on-dark-line); margin: var(--svc-space-4) 0 0; }

/* ── MOVIL ESTRECHO: la columna del número se estrecha ─────────────────── */
@media (max-width: 640px) {
  .svc-index-row { grid-template-columns: 24px 1fr 20px; }
}

/* ── ESCRITORIO ANCHO: la misma pieza, ensanchada ──────────────────────── */
@media (min-width: 1024px) {
  .svc-wrap { padding: 0 var(--svc-space-6); }
  .svc-bar-in { height: var(--svc-header-h); }
  .svc-bar-title { display: none; }
  .svc-bar-logo-wide { display: inline-flex; }
  .svc-h1 { font-size: var(--svc-fs-display); }
  .svc-home { padding-top: var(--svc-space-7); padding-bottom: var(--svc-space-7); }
  .svc-home-head { display: grid; grid-template-columns: 1fr auto; gap: var(--svc-space-6); align-items: end; }
  .svc-home-head .svc-actions { margin-top: 0; }
  .svc-index-cols {
    display: grid; grid-template-columns: 48px 1fr 20px; gap: var(--svc-space-6);
    padding: var(--svc-space-3) 0; border-bottom: 1px solid var(--svc-border);
  }
  .svc-index-row { grid-template-columns: 48px 1fr 20px; gap: var(--svc-space-6); padding: var(--svc-space-5) 0; }
  .svc-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--svc-space-7); align-items: start; }
  .svc-page-aside { display: block; position: sticky; top: calc(var(--svc-header-h) + var(--svc-space-5)); margin-top: var(--svc-space-7); }
  .svc-hero { padding-top: var(--svc-space-7); }
  .svc-problems { grid-template-columns: repeat(3, 1fr); }
  .svc-card { padding: var(--svc-space-5); }
  .svc-schema-row { grid-template-columns: 200px 1fr; gap: var(--svc-space-5); }
  .svc-demo-body { grid-template-columns: 280px 1fr; }
  .svc-demo-list { border-bottom: 0; border-right: 1px solid var(--svc-border); }
  .svc-demo-recipe { padding: var(--svc-space-5); }
  .svc-nophoto { max-width: 420px; }
  .svc-included { grid-template-columns: repeat(3, 1fr); gap: var(--svc-space-5); }
  .svc-dark { padding: var(--svc-space-7) var(--svc-space-6); }
  .svc-actionbar { display: none; }
  .svc--with-bar { padding-bottom: 0; }
}

/* Enlaces a Food y Shop en la cabecera (corrección 2026-10-15: desde Services no había forma de volver) */
.svc-xnav{display:flex;align-items:center;gap:var(--svc-s3,16px);margin-left:auto;margin-right:var(--svc-s3,16px)}
.svc-xnav a{font-size:var(--svc-fs-label,.875rem);font-weight:600;letter-spacing:.04em;color:inherit;text-decoration:none;padding:8px 4px}
.svc-xnav a:hover{text-decoration:underline}