/* =========================================================================
   Stdio · web pública · sistema «Índigo»
   Spec: docs/design/2026-08-13-web-publica.md · Tokens: design/tokens.json
   HTML + CSS estáticos. Cero JavaScript. Cero terceros.
   ========================================================================= */

/* ---------- 1 · Fuentes autoalojadas (§2.3) ------------------------------ */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/outfit-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/outfit-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/jakarta-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fuentes/jakarta-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ---------- 2 · Tokens (§2) ---------------------------------------------
   Único bloque del archivo con valores literales de color.
   Fuera de aquí, todo el color se referencia por variable.               */

:root {
  color-scheme: light;

  /* Rol — tokens.json → color.porRol.barberia.light */
  --accent:        #221F5C;
  --accent-strong: #17153F;
  --accent-pop:    #FF7A5C;
  /* La marca, que **no es el acento**. `accent-pop` es turquesa en negocio y violeta en
     profesional dentro de la app; el logotipo tiene que verse igual en los cuatro mundos y en las
     tres piezas —app, icono y web—, así que va por su propio par. Mismos valores que
     `design/tokens.json`: si cambian allá, hay que cambiarlos aquí a mano. */
  --marca:         #D92D20;
  --marca-punto:   #FF7A5C;
  --accent-soft:   #E7E5F7;
  --bg:            #F7F7FB;
  --surface-alt:   #F0EFF9;

  /* Semánticos — tokens.json → color.semantico.light */
  --surface:         #FFFFFF;
  --on-accent:       #FFFFFF;
  --on-accent-suave: #FFFFFFB8;   /* 72 % */
  --on-accent-tenue: #FFFFFF29;   /* 16 % */
  --text-primary:    #14141B;
  --text-secondary:  #55555F;
  --text-muted:      #8E8E9A;     /* declarado; no se usa como texto */

  /* Tinta de sombra y de velo, en canal para modular alfa */
  --tinta-rgb: 20 20 27;

  /* Tipografía */
  --fuente-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --fuente-ui: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --fs-hero:       34px;
  --fs-display-lg: 38px;
  --fs-display:    30px;
  --fs-title:      24px;
  --fs-heading:    20px;
  --fs-body:       16px;
  --fs-lectura:    17px;
  --fs-label:      13px;
  --fs-caption:    12px;
  --fs-logo:       22px;
  --fs-nav:        15px;
  --fs-summary:    17px;

  /* Espacio */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px;
  --s8: 64px; --s9: 96px;  --s10: 128px;

  /* Radios */
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 22px; --r-pill: 999px;

  /* Sombras */
  --sombra-corta:  0 1px 2px  rgb(var(--tinta-rgb) / .05),
                   0 4px 12px rgb(var(--tinta-rgb) / .06);
  --sombra-larga:  0 4px 12px rgb(var(--tinta-rgb) / .08),
                   0 20px 40px rgb(var(--tinta-rgb) / .16);
  --sombra-arriba: 0 -4px 16px rgb(var(--tinta-rgb) / .10);

  /* El velo de las tarjetas de rol. En variable porque lo usan las tres y repetirlo sería
     garantizar que un día una quede con otro degradado. */
  --velo-rol: linear-gradient(
    180deg,
    color-mix(in srgb, #221F5C 20%, transparent)   0%,
    color-mix(in srgb, #221F5C 62%, transparent)  55%,
    color-mix(in srgb, #221F5C 94%, transparent) 100%
  );

  /* Velo de portada (queda listo para cuando exista la foto, §2.7) */
  --velo-hero: linear-gradient(
    180deg,
    rgb(var(--tinta-rgb) / .55)   0%,
    rgb(var(--tinta-rgb) / .28)  38%,
    rgb(var(--tinta-rgb) / .78)  82%,
    rgb(var(--tinta-rgb) / .88) 100%
  );

  /* Anillo de foco (§7.2) */
  --foco: var(--accent);

  --alto-header: 60px;
  --alto-cta: 68px;
}

@media (min-width: 768px) {
  :root {
    --fs-hero: 46px;
    --fs-display-lg: 44px;
    --fs-display: 34px;
    --fs-title: 26px;
    --fs-lectura: 18px;
    --alto-header: 68px;
  }
}

@media (min-width: 1120px) {
  :root {
    --fs-hero: 60px;
    --fs-label: 14px;
    --alto-header: 76px;
  }
}

/* ---------- 3 · Base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--fuente-ui);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 600;
}

p, ul, ol, table { margin: 0; }

img { display: block; max-width: 100%; }

address { font-style: normal; }

/* Anclas bajo el header pegajoso (§3) */
[id] { scroll-margin-top: calc(var(--alto-header) + var(--s3)); }

/* Foco visible (§7.2) */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }

.sobre-accent { --foco: var(--on-accent); }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 4 · Contenedor y ritmo (§3, §2.4) ---------------------------- */

.contenedor {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (min-width: 768px) {
  .contenedor { padding-inline: var(--s6); max-width: 768px; }
}
@media (min-width: 1120px) {
  .contenedor { padding-inline: var(--s6); max-width: 1200px; }
}

/* Envoltura de banda: a sangre en móvil, dentro del contenedor desde 768 */
.contenedor--banda { padding-inline: 0; max-width: none; }
@media (min-width: 768px) {
  .contenedor--banda { padding-inline: var(--s6); max-width: 768px; }
}
@media (min-width: 1120px) { .contenedor--banda { max-width: 1200px; } }

.seccion { padding-block: var(--s7); }
@media (min-width: 768px)  { .seccion { padding-block: var(--s8); } }
@media (min-width: 1120px) { .seccion { padding-block: var(--s9); } }

.seccion--bg      { background: var(--bg); }
.seccion--surface { background: var(--surface); }

.bajada {
  margin-top: var(--s3);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* ---------- 5 · Tipografía de piezas ------------------------------------- */

.t-hero {
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.t-display {
  font-size: var(--fs-display);
  line-height: 1.10;
  letter-spacing: -.02em;
}
.t-titulo {
  font-size: var(--fs-title);
  line-height: 1.18;
  letter-spacing: -.02em;
}
.t-heading {
  font-size: var(--fs-heading);
  line-height: 1.30;
  letter-spacing: -.01em;
}
.kicker {
  font-family: var(--fuente-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.30;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.sobre-accent .kicker { color: var(--on-accent); }
.caption {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--text-secondary);
}
.sobre-accent .caption { color: var(--on-accent-suave); }

.barrita {
  display: block;
  width: 32px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--accent-pop);
}

/* ---------- 6 · Enlace de salto (§7.2) ----------------------------------- */

.saltar {
  position: fixed;
  top: var(--s3);
  left: var(--s5);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s5);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 160ms ease-out;
}
.saltar:focus { transform: translateY(0); }

/* ---------- 7 · Header (§5) ---------------------------------------------- */

.cabecera {
  position: relative;
  z-index: 50;
  background: var(--surface);
  box-shadow: var(--sombra-corta);
}
@media (min-width: 768px) { .cabecera { position: sticky; top: 0; } }

.cabecera__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--alto-header);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--fuente-display);
  font-size: var(--fs-logo);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--text-primary);
  text-decoration: none;
}
/* **La tijera no hereda el color del texto, y ese es el punto.**
   El logotipo es tijera roja + «Stdio» + punto coral, igual que en la app y en el icono. La palabra
   sí cambia de tinta según dónde esté —negra sobre papel, blanca en el pie—, pero la tijera y el
   punto son la marca y se quedan quietos. Por eso `.pie .logo` solo toca el color del texto. */
.logo__tijera {
  flex: none;
  align-self: center;
  margin-right: .28em;
  color: var(--marca);
}
.logo__punto {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--marca-punto);
}
.pie .logo { color: var(--on-accent); }

.nav { display: none; }
@media (min-width: 768px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--s5);
    margin-inline-start: auto;
    margin-inline-end: var(--s5);
  }
}
.nav a {
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 160ms ease-out;
}
.nav a:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* ---------- 8 · Botones (§6.1) ------------------------------------------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--s4) var(--s6);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--fuente-ui);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;
}
@media (min-width: 768px) {
  .btn { display: inline-flex; width: auto; min-height: 48px; }
}
.btn:hover { background: var(--accent-strong); box-shadow: var(--sombra-corta); }
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn--inv { background: var(--surface); color: var(--accent); }
.btn--inv:hover { background: var(--accent-soft); box-shadow: var(--sombra-corta); }

.btn--2 {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--sombra-corta);
}
.btn--2:hover { background: var(--accent-soft); }

/* Botón del header: 40 visual, 44 de área táctil */
.btn--cab {
  position: relative;
  display: inline-flex;
  width: auto;
  min-height: 40px;
  padding: 0 var(--s4);
  font-size: var(--fs-label);
  white-space: nowrap;
}
.btn--cab::after { content: ""; position: absolute; inset: -2px 0; }

/* ---------- 9 · Héroe (§5.1, §7.4 · estado hero--sin-foto) --------------- */

/* Estado hero--sin-foto: sin imagen, fondo bg, título en tinta oscura y la
   tarjeta flotante en línea en vez de montada sobre la foto. */
.hero__caja { border-radius: 0; }
.hero--sin-foto .hero__caja { background: var(--bg); }

/* ---- Héroe con foto -----------------------------------------------------
   **El velo no es estética: es lo que hace legible el titular.** Una foto de
   barbería tiene ventanas quemadas y espejos, así que el contraste del texto
   cambia según el píxel que le toque debajo. El degradado oscuro fija un suelo
   —de índigo casi opaco abajo a translúcido arriba— y garantiza el contraste
   sin apagar la imagen entera, que es lo que pasa con un velo plano.

   Va en el mismo `background` que la imagen y antes que ella: en CSS la primera
   capa es la de encima. */
.hero--con-foto .hero__caja {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 35%, transparent) 0%,
      color-mix(in srgb, var(--accent) 78%, transparent) 100%
    ),
    var(--bg) url("hero-barberia.jpg") center / cover no-repeat;
}
/* Sobre la foto manda la tinta clara, y la sombra corta la salva en las zonas
   donde el degradado no basta —el marco de la ventana, los azulejos claros—.

   **Sin `.hero` de por medio en el selector.** `hero--con-foto` va en el mismo
   elemento que `hero`, no en su padre, así que `.hero--con-foto .hero h1` no
   casa con nada: el titular se quedaba en tinta oscura sobre la foto y era
   ilegible, mientras el resto sí cambiaba —esos sí son descendientes—.

   **Y va con las dos clases juntas, `.hero.hero--con-foto`.** Con una sola
   empata en especificidad con el `.hero h1` de más abajo, que declara la tinta
   oscura, y al empatar gana el que va después en la hoja. Se veía exactamente
   igual que el fallo anterior, con otra causa. */
.hero.hero--con-foto h1,
.hero.hero--con-foto .kicker { color: var(--on-accent); }
.hero.hero--con-foto .hero__bajada { color: var(--on-accent-suave); }
.hero.hero--con-foto h1 { text-shadow: 0 1px 24px rgb(0 0 0 / .35); }
.hero.hero--con-foto .barrita { background: var(--accent-pop); }
.hero__int { padding: var(--s8) var(--s5) var(--s7); }

@media (min-width: 768px) {
  .hero { padding-block: var(--s6) 0; }
  .hero__caja { border-radius: var(--r-xl); }
  .hero__int { padding: var(--s8) var(--s6); }
}
@media (min-width: 1120px) {
  .hero__int { padding: var(--s9) var(--s7); }
}

.hero__marca .barrita { margin-bottom: var(--s4); }
@media (min-width: 768px) {
  .hero__marca {
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
  }
  .hero__marca .barrita { flex: none; margin-bottom: 0; }
}

.hero h1 { margin-top: var(--s4); color: var(--text-primary); }
.hero__bajada {
  margin-top: var(--s5);
  font-size: var(--fs-lectura);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 42ch;
}

/* Tarjeta flotante de precio (§5.1 · movimiento 2) */
.hero__rejilla { display: block; }
@media (min-width: 1120px) {
  .hero__rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--s7);
    align-items: center;
  }
  .hero__bajada { max-width: 620px; }
}

.tarjeta-precio {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-larga);
}
@media (min-width: 768px) {
  .tarjeta-precio { max-width: 60%; margin-inline: auto; }
}
@media (min-width: 1120px) {
  .tarjeta-precio { margin: 0; max-width: none; padding: var(--s6); }
}
.tarjeta-precio__cifra {
  margin-top: var(--s4);
  font-family: var(--fuente-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: -.02em;
  color: var(--accent);
}
.tarjeta-precio__nota { color: var(--text-secondary); }
.tarjeta-precio .chip { margin-top: var(--s4); }
.tarjeta-precio .btn { margin-top: var(--s5); }
.tarjeta-precio .caption { margin-top: var(--s3); }

/* ---------- 10 · Chips (§6.4) -------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 36px;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
}
.chip__punto {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-pop);
}
.chip--tenue { background: var(--on-accent-tenue); color: var(--on-accent); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

/* ---------- 11 · #estado ------------------------------------------------- */

@media (min-width: 768px) {
  .estado__rejilla {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--s6);
    align-items: start;
  }
  .estado__rejilla .chips { margin-top: 0; }
}
@media (min-width: 1120px) {
  .estado__rejilla { grid-template-columns: 7fr 4fr; gap: var(--s7); }
}
.estado__texto { margin-top: var(--s5); color: var(--text-primary); max-width: 56ch; }
.estado__acciones { margin-top: var(--s5); }
/* Hereda el color de `.caption` a propósito: `--text-muted` está declarado pero marcado como «no
   se usa como texto», y bajar el contraste de la única línea que dice cuándo te contestan sería
   esconder justo lo que quita la duda de escribir. */
.estado__nota { margin-top: var(--s3); }
/* La barrita y el rótulo del héroe, reusados aquí: es la misma señal de «esto es un dato de
   contexto, no un titular», y darle otra forma haría que dos cosas iguales se vieran distintas. */
#estado .hero__marca { margin-bottom: var(--s4); }

/* ---------- 12 · Tarjetas de función (§6.2) ------------------------------ */

.rejilla-func {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s6);
}
@media (min-width: 768px)  { .rejilla-func { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
@media (min-width: 1120px) { .rejilla-func { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

.func {
  padding: var(--s5);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-corta);
}
@media (min-width: 768px) { .func { border-radius: var(--r-lg); } }

/* **La captura es la pantalla de verdad, no un dibujo.** Sale del mismo canvas del que se calca
   la app, así que lo que promete la web es exactamente lo que se instala. Un icono decía «hay
   una función de caja»; esto enseña el corte del día.

   Se recorta arriba y no al centro: la cabecera y el primer bloque son lo que identifica la
   pantalla, y centrar dejaría un trozo de lista sin contexto. */
.func__captura {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--r-sm);
  margin-bottom: var(--s4);
  background: var(--bg);
}
.func h3 + p { margin-top: var(--s2); color: var(--text-secondary); }

@media (min-width: 1120px) {
  .centrado-esc { max-width: 720px; margin-inline: auto; text-align: center; }
  .centrado-esc .bajada { margin-inline: auto; }
}

/* ---------- 13 · Tarjetas de rol (§6.3) ---------------------------------- */

.roles {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s6);
  margin-inline: calc(var(--s5) * -1);
  padding-inline: var(--s5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--s5);
  list-style: none;
}
/* **Cada rol con su foto detrás y el texto apoyado abajo**, que es como se diseñaron. Estuvieron
   un tiempo con un icono arriba y fondo liso: era el apaño de mientras no hubiera imágenes con
   derechos, y sin ellas el bloque de color vacío se leía como una tarjeta que no cargó.

   El degradado hace dos trabajos a la vez: garantiza el contraste del texto sobre cualquier foto
   —que varía mucho entre las tres— y tiñe la imagen de índigo, que es lo que hace que las tres se
   vean de la misma familia y no como tres fotos pegadas. */
.rol {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 0 0 280px;
  min-height: 320px;
  scroll-snap-align: start;
  padding: var(--s5);
  border-radius: var(--r-lg);
  color: var(--on-accent);
  background-color: var(--accent);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--accent) 62%, transparent) 55%,
      color-mix(in srgb, var(--accent) 94%, transparent) 100%
    );
  overflow: hidden;
}
/* La foto va **después** del degradado en la misma propiedad: en CSS la primera capa es la de
   arriba, así que el velo queda encima de la imagen y no al revés. */
.rol--cliente     { background-image: var(--velo-rol), url("rol-cliente.jpg"); }
.rol--dueno       { background-image: var(--velo-rol), url("rol-dueno.jpg"); }
.rol--profesional { background-image: var(--velo-rol), url("rol-profesional.jpg"); }

.rol p { margin-top: var(--s2); color: var(--on-accent-suave); }


@media (min-width: 768px) {
  .roles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .rol { flex: initial; }
}
@media (min-width: 1120px) {
  .roles { gap: var(--s5); }
  /* Los 460 del diseño, que ahora sí tienen sentido porque hay foto detrás. Estuvieron en 300
     mientras no la había, y aun así se veían mal: el problema no era cuánto vacío había sino que
     estuviera encima del texto, como una imagen que no cargó. */
  .rol { min-height: 460px; padding: var(--s6); }
}

/* ---------- 14 · #como · carriles ---------------------------------------- */

.carriles { display: grid; gap: var(--s6); margin-top: var(--s6); }

/* **Una captura por carril, no una por paso.** Seis pasos con seis pantallas repetirían las de
   arriba y alargarían la sección sin decir nada nuevo; una por lado ancla de qué va cada camino:
   el QR que se pega en la entrada, y las barberías ordenadas por distancia.

   Apaisada y no vertical: el carril es una caja ancha, y un teléfono alto dentro dejaría dos
   franjas de fondo a los lados. */
.carril__captura {
  width: 100%;
  height: 500px;
  object-fit: cover;
  /* **Alta, y no una banda ancha.** Se intentó primero como franja de 230 y no funcionaba: el
     paso del negocio termina en un código QR cuadrado, y una banda ancha solo puede enseñar una
     rebanada de él —que se lee como una imagen rota, no como un QR—. La caja del carril es ancha,
     así que la captura puede permitirse ser alta sin descuadrar nada. */
  object-position: top;
  border-radius: var(--r-sm);
  margin-bottom: var(--s4);
  background: var(--surface);
}
@media (min-width: 768px)  { .carriles { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
@media (min-width: 1120px) {
  .carril {
    padding: var(--s6);
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-corta);
  }
  .seccion--surface .carril { background: var(--bg); box-shadow: none; }
}

.pasos {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s4);
  padding: 0;
  list-style: none;
}
@media (min-width: 1120px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }

.paso { display: flex; gap: var(--s3); align-items: flex-start; }
@media (min-width: 1120px) { .paso { display: block; } }
.paso__n {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--fuente-display);
  font-weight: 600;
}
@media (min-width: 1120px) { .paso__n { margin-bottom: var(--s3); } }

/* ---------- 15 · Bandas de acento (§2.5) --------------------------------- */

.banda {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0;
}
@media (min-width: 768px) { .banda { border-radius: var(--r-xl); } }

.banda__int { padding: var(--s8) var(--s5); }
@media (min-width: 768px)  { .banda__int { padding: var(--s9) var(--s6); } }
@media (min-width: 1120px) { .banda__int { padding: var(--s10) var(--s7); } }

.banda h2 { color: var(--on-accent); }

.precio__cifras { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 768px) { .precio__cifras { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

.precio__cifra {
  font-family: var(--fuente-display);
  font-size: var(--fs-display-lg);
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: -.02em;
  color: var(--on-accent);
}
.precio__cifra span { color: var(--on-accent-suave); font-size: var(--fs-body); }
.precio__etiqueta { color: var(--on-accent-suave); }

.precio__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin-top: var(--s5);
  align-items: flex-start;
}
@media (min-width: 768px) { .precio__acciones { flex-direction: row; align-items: center; } }

.precio__notas { margin-top: var(--s5); }
.precio__nota { color: var(--on-accent-suave); }
.precio__clave { margin-top: var(--s3); color: var(--on-accent); font-weight: 600; }
.precio__iva { margin-top: var(--s5); }

@media (min-width: 1120px) {
  .precio__rejilla {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s5) var(--s6);
    align-items: start;
  }
  .precio__cifras { display: contents; }
  .precio__acciones { flex-direction: column; align-items: stretch; margin-top: 0; }
  .precio__notas { margin-top: 0; }
  .precio__iva { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- 16 · FAQ (§6.5) ---------------------------------------------- */

.faq { display: grid; gap: var(--s2); margin-top: var(--s6); }
@media (min-width: 768px) {
  .preguntas__rejilla {
    display: grid;
    grid-template-columns: 35fr 65fr;
    gap: var(--s6);
    align-items: start;
  }
  .preguntas__rejilla .faq { margin-top: 0; }
}
@media (min-width: 1120px) {
  .preguntas__rejilla { grid-template-columns: 4fr 7fr; gap: var(--s7); }
  .preguntas__titulo { position: sticky; top: calc(var(--alto-header) + var(--s5)); }
  .faq { max-width: 640px; }
}

.faq details {
  padding: var(--s4);
  background: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-corta);
  transition: background-color 160ms ease-out;
}
.faq details:hover { background: var(--surface-alt); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 56px;
  font-size: var(--fs-summary);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "⌄";
  flex: none;
  color: var(--accent);
  font-size: var(--fs-heading);
  line-height: 1;
  transition: transform 160ms ease-out;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq p { padding-top: var(--s3); color: var(--text-secondary); }

/* ---------- 17 · #contacto ----------------------------------------------- */

@media (min-width: 768px) {
  .contacto__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .contacto__rejilla > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 1120px) {
  .contacto__rejilla { grid-template-columns: 4fr 4fr 4fr; gap: var(--s7); align-items: start; }
  .contacto__rejilla > :first-child { grid-column: auto; }
}
/* Antes esto era un `t-heading` porque llevaba el nombre de la persona. Ahora lleva la frase de
   qué es Stdio y para quién, así que va en cuerpo de lectura: un titular aquí competiría con el
   de la sección, que es el que tiene que leerse primero. */
.contacto__nombre { margin-top: var(--s5); font-size: var(--fs-lectura); line-height: 1.55; max-width: 40ch; }
.contacto__meta { margin-top: var(--s3); color: var(--text-secondary); font-size: var(--fs-label); }
.datos { display: grid; gap: var(--s4); margin-top: var(--s5); list-style: none; padding: 0; }
.dato { display: flex; gap: var(--s3); align-items: flex-start; }
.dato__icono {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.dato__cuerpo { align-self: center; }
.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 160ms ease-out;
}
.enlace:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }

/* ---------- 18 · Barra CTA pegajosa · solo móvil (§3) -------------------- */

.cta-fija {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--surface);
  box-shadow: var(--sombra-arriba);
  padding: var(--s3) var(--s5);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
}
@media (min-width: 768px) { .cta-fija { display: none; } }

body.pagina-inicio { padding-bottom: calc(var(--alto-cta) + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.pagina-inicio { padding-bottom: 0; } }

/* ---------- 19 · Pie (§6.8) ---------------------------------------------- */

.pie {
  background: var(--accent-strong);
  color: var(--on-accent);
  border-radius: 0;
}
@media (min-width: 768px) {
  .pie { border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl); }
}
.pie__int { padding: var(--s7) var(--s5); }
@media (min-width: 768px)  { .pie__int { padding: var(--s8) var(--s6); } }
@media (min-width: 1120px) { .pie__int { padding: var(--s9) var(--s7); } }

.pie__rejilla { display: grid; gap: var(--s6); }
@media (min-width: 768px)  { .pie__rejilla { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
@media (min-width: 1120px) { .pie__rejilla { grid-template-columns: 3fr 4fr 2fr 3fr; gap: var(--s5); } }

.pie__lema { margin-top: var(--s3); color: var(--on-accent-suave); }
.pie .kicker { margin-bottom: var(--s3); color: var(--on-accent-suave); }
.pie__legal-nombre { font-weight: 600; color: var(--on-accent); }
.pie__regimen { font-size: var(--fs-label); color: var(--on-accent-suave); }
.pie address { margin-top: var(--s3); color: var(--on-accent); }

.pie ul { list-style: none; padding: 0; }
.pie a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--on-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 160ms ease-out;
}
.pie a:hover { text-decoration-thickness: 2px; }
.pie .logo { min-height: 0; text-decoration: none; }

.pie__cierre { margin-top: var(--s6); }
.pie__cierre p { color: var(--on-accent-suave); font-size: var(--fs-caption); line-height: 1.45; }
@media (min-width: 1120px) {
  .pie__cierre { display: flex; gap: var(--s5); flex-wrap: wrap; }
}

/* ---------- 20 · Páginas legales ----------------------------------------- */

/* 20.1 Barra de progreso de lectura (§7.4 · decorativa) */
.progreso {
  display: none;
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 90;
  height: 3px;
  background: var(--accent-soft);
}
.progreso__barra {
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .progreso { display: block; }
  .progreso__barra {
    animation: leido linear;
    animation-timeline: scroll(root block);
  }
}
@keyframes leido { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 20.2 Portada legal */
.portada { background: var(--accent); color: var(--on-accent); border-radius: 0; }
@media (min-width: 768px) { .portada { border-radius: var(--r-xl); } }
.portada__int { padding: var(--s8) var(--s5); }
@media (min-width: 768px)  { .portada__int { padding: var(--s8) var(--s6); } }
@media (min-width: 1120px) { .portada__int { padding: var(--s9) var(--s7); } }
.portada .barrita { margin-bottom: var(--s4); }
.portada h1 { margin-top: var(--s3); color: var(--on-accent); }
@media (min-width: 1120px) { .portada h1 { font-size: var(--fs-display-lg); } }
.portada__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s5);
}
@media (min-width: 768px) {
  .portada__meta { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s5); }
}
.portada__meta p { font-size: var(--fs-label); color: var(--on-accent-suave); }
.portada__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--on-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 20.3 Índice (§6.7) */
.indice {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-inline: calc(var(--s5) * -1);
  background: var(--surface);
  box-shadow: var(--sombra-corta);
}
.indice__titulo { display: none; }
.indice ol {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 48px;
  margin: 0;
  padding: var(--s1) var(--s5);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, rgb(var(--tinta-rgb)) calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, rgb(var(--tinta-rgb)) calc(100% - 32px), transparent);
}
.indice li { flex: none; scroll-snap-align: start; }
.indice a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--s1) var(--s4);
  margin-block: var(--s1);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
/* 36 de alto visual, 44 de área táctil (§8.2) — solo en la fila de chips */
@media (max-width: 767px) {
  .indice a::after { content: ""; position: absolute; inset: -4px 0; }
}
.indice a:hover { background: var(--accent); color: var(--on-accent); }

@media (min-width: 768px) {
  .indice {
    position: static;
    margin-inline: 0;
    margin-top: var(--s6);
    border-radius: var(--r-lg);
    padding: var(--s5);
  }
  .indice__titulo { display: block; margin-bottom: var(--s3); }
  .indice ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .indice a {
    display: flex;
    justify-content: flex-start;
    min-height: 48px;
    padding: var(--s2) var(--s4);
    white-space: normal;
  }
}
@media (min-width: 1120px) {
  .indice {
    position: sticky;
    top: calc(var(--alto-header) + var(--s5));
    margin-top: 0;
    box-shadow: none;
  }
  .indice ol { grid-template-columns: 1fr; gap: var(--s1); }
  .indice a { background: transparent; border-radius: var(--r-sm); }
}

/* 20.4 Rejilla del documento */
.doc { padding-bottom: var(--s8); }
.doc__cuerpo { padding-top: var(--s7); }
@media (min-width: 768px) {
  .doc { padding-bottom: var(--s9); }
  .doc__cuerpo { padding-top: var(--s8); }
}
@media (min-width: 1120px) {
  .doc__rejilla {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--s7);
    align-items: start;
    padding-top: var(--s8);
  }
  .doc__cuerpo { padding-top: 0; }
}

.sec { padding-top: var(--s7); scroll-margin-top: calc(48px + var(--s3)); }
@media (min-width: 768px) {
  .sec { scroll-margin-top: calc(var(--alto-header) + var(--s3)); }
}
.sec:first-child { padding-top: 0; }
.sec > * + * { margin-top: var(--s5); }
.sec h2 { display: flex; align-items: center; gap: var(--s3); }
.sec__n {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--fuente-display);
  font-size: var(--fs-body);
  font-weight: 600;
}
.sec h3 {
  font-size: var(--fs-heading);
  line-height: 1.30;
  letter-spacing: -.01em;
}
.prosa {
  max-width: 68ch;
  font-size: var(--fs-lectura);
  line-height: 1.70;
  color: var(--text-primary);
}
ul.prosa { padding-inline-start: var(--s5); }
ul.prosa li + li { margin-top: var(--s3); }
.prosa a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prosa a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }

.resumen {
  max-width: 68ch;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.55;
}

/* Destello de :target (§2.8) */
@keyframes destello {
  from { background: var(--accent-soft); }
  to   { background: transparent; }
}
.sec:target h2 {
  border-radius: var(--r-sm);
  animation: destello 1200ms ease-out 1;
}

/* Caja del responsable */
.responsable {
  margin-top: var(--s7);
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
}
.responsable h2 { color: var(--accent); font-size: var(--fs-heading); line-height: 1.3; }
.responsable p { margin-top: var(--s3); }
.responsable address { margin-top: var(--s3); }

/* 20.5 Tablas (§6.6) */
.tabla-caja { overflow-x: auto; margin-top: var(--s5); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); text-align: left; }
caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 767px) {
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr {
    display: block;
    padding: var(--s4);
    border-radius: var(--r-md);
    background: var(--surface-alt);
  }
  tbody tr + tr { margin-top: var(--s3); }
  tbody td { display: block; padding: 0; }
  tbody td + td { margin-top: var(--s3); }
  tbody td::before {
    content: attr(data-etiqueta);
    display: block;
    margin-bottom: var(--s1);
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
}
@media (min-width: 768px) {
  th {
    padding: 0 var(--s4) var(--s3);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    vertical-align: bottom;
  }
  td { padding: var(--s3) var(--s4); vertical-align: top; }
  tbody tr:nth-child(odd) { background: var(--surface-alt); }
  tbody tr:nth-child(odd):first-child td:first-child { border-start-start-radius: var(--r-md); }
  tbody tr:nth-child(odd):first-child td:last-child  { border-start-end-radius: var(--r-md); }
  tbody tr:nth-child(odd):last-child td:first-child  { border-end-start-radius: var(--r-md); }
  tbody tr:nth-child(odd):last-child td:last-child   { border-end-end-radius: var(--r-md); }
}

/* ---------- 21 · Utilidades de anchura ----------------------------------- */

.solo-escritorio { display: none; }
@media (min-width: 1120px) {
  .solo-escritorio { display: inline-flex; }
  .hasta-escritorio { display: none; }
}

/* ---------- 22 · Hover táctil y motion reducido (§2.8, §7.3) ------------- */

@media (hover: none) {
  .btn:hover { background: var(--accent); box-shadow: none; }
  .btn--inv:hover, .btn--2:hover { background: var(--surface); }
  .faq details:hover { background: var(--surface); }
  .indice a:hover { background: var(--accent-soft); color: var(--accent); }
  .nav a:hover { color: var(--text-secondary); text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .progreso { display: none !important; }
  .sec:target h2 { animation: none !important; }
}

/* ---------- 23 · Impresión (§7.4) ---------------------------------------- */

@media print {
  .cabecera, .indice, .progreso, .cta-fija, .saltar,
  .pie__marca, .pie__producto { display: none !important; }
  body { background: var(--surface); font-size: 11pt; line-height: 1.5; }
  .portada, .banda { background: var(--surface) !important; color: var(--text-primary) !important; }
  .portada h1, .banda h2, .portada .kicker { color: var(--text-primary) !important; }
  .precio__cifra, .precio__cifra span, .precio__etiqueta,
  .precio__nota, .precio__clave, .banda .caption { color: var(--text-primary) !important; }
  .chip--tenue { background: var(--accent-soft) !important; color: var(--accent) !important; }
  .portada__meta p, .portada__meta a { color: var(--text-primary) !important; }
  .pie { background: var(--surface) !important; color: var(--text-primary) !important; }
  .pie a, .pie address, .pie .logo { color: var(--text-primary) !important; }
  .prosa, .sec { max-width: none; }
  .doc__rejilla { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .sec { break-inside: avoid; }
}