/*
 * Sitio stdiomx.com · Editorial v3 · Salida MVP #9 (1-oct-2026).
 *
 * Una sola hoja para la portada, /clientes/, los puentes (/abrir/, /agenda/) y
 * los legales. Sustituye a `estilo.css` (Outfit, Plus Jakarta e índigo, del sistema anterior).
 *
 * Los tokens son los mismos `--v3-*` de `portal/portal.css`, copiados de
 * app/src/theme/tokens.json (`v3`, valor `light`). El portal no importa esta hoja a propósito:
 * se publica aparte (`portal-sitio`) y su CSP no debe depender de lo que se suba con el sitio.
 * Si un token cambia, se cambia en los dos.
 *
 * Ningún hex fuera de :root. Responsive: móvil (390) por defecto; escritorio desde 1024, con
 * márgenes laterales de 152 y contenido de hasta 1136.
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fuentes/inter-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fuentes/inter-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fuentes/inter-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fuentes/inter-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fuentes/playfair-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fuentes/playfair-600.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fuentes/poppins-700.ttf") format("truetype"); }

:root {
  /* ---- v3 · light (tokens.json) ---- */
  --v3-base: #FAF7F2;
  --v3-porcelain: #FFFFFF;
  --v3-sand-soft: #F3E9DE;
  --v3-ink: #1F2937;
  --v3-ink-secondary: #6B7280;
  --v3-ink-muted: #9CA3AF;
  --v3-ink-deep: #0F172A;
  --v3-on-ink: #FFFFFF;
  --v3-on-ink-muted: #FFFFFFB8;
  --v3-clay-deep: #6F5634;
  --v3-cta-primary: #0F172A;
  --v3-cta-primary-on: #FFFFFF;
  --v3-focus-ring: #0F172A;
  --v3-side-row: #FFFFFF14;
  --v3-logo-mark: #1F2937;          /* logoMark claro: marca sobre papel */
  --v3-logo-dot: #9A7B4F;           /* logoDot claro */
  --v3-logo-mark-on-deep: #F5F1EA;  /* logoMark oscuro: marca sobre tinta */
  --v3-logo-dot-on-deep: #C9AA72;

  /* ---- literales del canvas ---- */
  --sombra-tarjeta: 0 2px 10px #0000000D;
  --sombra-precio: 0 8px 24px #0000001F;
  --velo-foto: #0F172AB8;
  --velo-foto-fin: #0F172AE6;
  --transparente: #0F172A00;

  /* ---- radios ---- */
  --v3-radius-btn: 14px;
  --v3-radius-pill: 999px;
  --radio-tarjeta: 20px;

  /* ---- familias ---- */
  --v3-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --v3-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --v3-font-logo: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --margen: 20px;

  /* Acento de ficha (/agenda/): por defecto, el del sistema. `abrir-en-la-app.js` lo sobreescribe. */
  --ficha-profundo: var(--v3-ink-deep);
}

@media (min-width: 1024px) {
  :root {
    --margen: max(clamp(40px, 10.56vw, 152px), calc((100% - 1136px) / 2));
  }
}

/* ------------------------------------------------------------------ base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--v3-base);
  color: var(--v3-ink);
  font-family: var(--v3-font-ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--v3-focus-ring); outline-offset: 2px; }
.tinta :focus-visible { outline-color: var(--v3-on-ink); }

.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  border-radius: var(--v3-radius-btn);
  background: var(--v3-cta-primary);
  color: var(--v3-cta-primary-on);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

.solo-lector, .oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.solo-escritorio { display: none !important; }
@media (min-width: 1024px) {
  .solo-escritorio { display: revert !important; }
  .solo-movil { display: none !important; }
  /* `revert` devuelve el display del navegador (block, inline) y borra el flex de la pieza:
     el botón perdía el centrado del icono y las listas, su separación. */
  .boton.solo-escritorio { display: inline-flex !important; }
  .ai__renglones.solo-escritorio,
  .tarjeta-precio.solo-escritorio { display: flex !important; }
}

/* Banda o bloque sobre tinta, a sangre y sin redondear. */
.tinta { background: var(--v3-ink-deep); color: var(--v3-on-ink); }

.ancho { padding-left: var(--margen); padding-right: var(--margen); }

/* ------------------------------------------------------------------ marca */

.marca {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--v3-logo-mark);
}

.marca__nombre {
  font-family: var(--v3-font-logo);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
}

/* El punto es un círculo de 0.2em, no un glifo «.». */
.marca__punto {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.07em;
  border-radius: 50%;
  background: var(--v3-logo-dot);
}

.marca__sub {
  font: 500 9px/1 var(--v3-font-ui);
  letter-spacing: 1.6px;
  color: var(--v3-ink-secondary);
  white-space: nowrap;
}

.tinta .marca,
.marca--tinta { color: var(--v3-logo-mark-on-deep); }
.tinta .marca__punto,
.marca--tinta .marca__punto { background: var(--v3-logo-dot-on-deep); }

/* ------------------------------------------------------------------ texto */

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--v3-on-ink-muted);
}

.rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--v3-clay-deep);
}

.titulo-1 {
  font-family: var(--v3-font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
}

.titulo-2 {
  font-family: var(--v3-font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.12;
}

.bajada { font-size: 15px; line-height: 1.5; color: var(--v3-ink-secondary); }
.tinta .bajada { color: var(--v3-on-ink-muted); }

@media (min-width: 1024px) {
  .titulo-1 { font-size: 52px; line-height: 1.06; }
  .titulo-2 { font-size: 40px; }
  .bajada { font-size: 16px; }
}

/* ------------------------------------------------------------------ botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--v3-radius-btn);
  font: 600 15px/1.2 var(--v3-font-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}

.boton svg { width: 20px; height: 20px; }

.boton--primario {
  min-height: 54px;
  font-size: 16px;
  background: var(--v3-cta-primary);
  color: var(--v3-cta-primary-on);
}

/* Sobre tinta el primario se invierte: tinta sobre tinta no se ve. */
.tinta .boton--primario,
.boton--primario.boton--claro {
  background: var(--v3-porcelain);
  color: var(--v3-ink-deep);
}

.boton--contorno {
  background: transparent;
  color: var(--v3-ink);
  box-shadow: inset 0 0 0 1.5px var(--v3-ink);
}

.tinta .boton--contorno {
  color: var(--v3-on-ink);
  box-shadow: inset 0 0 0 1.5px var(--v3-on-ink-muted);
}

.boton--secundario {
  background: var(--v3-sand-soft);
  color: var(--v3-ink);
}

.boton--compacto {
  min-height: 40px;
  width: auto;
  padding: 0 18px;
  font-size: 14px;
}

.enlace-fuerte {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  color: var(--v3-clay-deep);
  text-decoration: none;
}
.enlace-fuerte:hover { text-decoration: underline; }

@media (min-width: 1024px) {
  .boton { width: auto; }
}

/* ------------------------------------------------------------------ piezas */

.tarjeta {
  background: var(--v3-porcelain);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 24px;
}

.chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--v3-radius-pill);
  background: var(--v3-sand-soft);
  color: var(--v3-clay-deep);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.tinta .chip--tinta,
.chip--tinta { background: var(--v3-side-row); color: var(--v3-on-ink); }

.icono-caja {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--v3-sand-soft);
  color: var(--v3-clay-deep);
  flex-shrink: 0;
}
.icono-caja svg { width: 22px; height: 22px; }

/* ================================================================== PORTADA */

/* ---- nav de escritorio ---- */

.nav {
  display: none;
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    height: 76px;
    background: var(--v3-base);
  }

  .nav__enlaces {
    display: flex;
    gap: 32px;
  }

  .nav__enlaces a {
    font-size: 14px;
    font-weight: 500;
    color: var(--v3-ink-secondary);
    text-decoration: none;
  }
  .nav__enlaces a:hover { color: var(--v3-ink); }

  .nav__acciones {
    display: flex;
    align-items: center;
    gap: 20px;
  }
}

.entrar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--v3-ink);
  text-decoration: none;
}
.tinta .entrar,
.heroe .entrar { color: var(--v3-on-ink); }

/* ---- héroe ---- */

.heroe {
  background:
    linear-gradient(var(--velo-foto), var(--velo-foto)),
    url("/hero-barberia.jpg") center / cover no-repeat,
    var(--v3-ink-deep);
  color: var(--v3-on-ink);
  padding: 16px var(--margen) 36px;
}

.heroe__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-bottom: 36px;
}

.heroe__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.heroe__titulo {
  font-family: var(--v3-font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.08;
  color: var(--v3-on-ink);
}

.heroe__bajada { font-size: 15px; line-height: 1.5; color: var(--v3-on-ink-muted); }

.heroe__movil {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.tarjeta-precio {
  background: var(--v3-porcelain);
  color: var(--v3-ink);
  border-radius: var(--radio-tarjeta);
  padding: 28px;
  box-shadow: var(--sombra-precio);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tarjeta-precio__cifra {
  font-family: var(--v3-font-display);
  font-size: 40px;
  line-height: 1.05;
  color: var(--v3-clay-deep);
}

.tarjeta-precio__nota { font-size: 14px; line-height: 1.45; color: var(--v3-ink-secondary); }

.tarjeta-precio .boton { width: 100%; margin-top: 4px; }

.tarjeta-precio__enlaces {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--v3-clay-deep);
}
.tarjeta-precio__enlaces a { color: inherit; text-decoration: none; display: inline-block; padding: 6px 0; }
.tarjeta-precio__enlaces a:hover { text-decoration: underline; }

.tarjeta-precio__micro { text-align: center; font-size: 12px; color: var(--v3-ink-muted); }

@media (min-width: 1024px) {
  .heroe {
    min-height: 600px;
    padding: 0 var(--margen);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }

  .heroe__cabecera { display: none; }

  .heroe__texto { max-width: 620px; gap: 20px; }

  .heroe__titulo { font-size: 60px; line-height: 1.05; }

  .heroe__bajada { font-size: 19px; }

  .tarjeta-precio { width: 380px; flex-shrink: 0; }
}

/* ---- secciones ---- */

.seccion {
  padding: 56px var(--margen);
}

.seccion__cabeza {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

@media (min-width: 1024px) {
  .seccion { padding: 96px var(--margen); }
  .seccion__cabeza { gap: 12px; margin-bottom: 40px; max-width: 760px; }
}

/* ---- tres formas ---- */

.roles {
  display: grid;
  gap: 16px;
}

.rol {
  position: relative;
  height: 260px;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 22px;
  color: var(--v3-on-ink);
  background-color: var(--v3-ink-deep);
  background-size: cover;
  background-position: center;
}

.rol--cliente { background-image: linear-gradient(var(--transparente) 35%, var(--velo-foto-fin)), url("/rol-cliente.jpg"); }
.rol--dueno { background-image: linear-gradient(var(--transparente) 35%, var(--velo-foto-fin)), url("/rol-dueno.jpg"); }
.rol--profesional { background-image: linear-gradient(var(--transparente) 35%, var(--velo-foto-fin)), url("/rol-profesional.jpg"); }

.rol__titulo { font-size: 20px; font-weight: 600; line-height: 1.2; }
.rol__texto { font-size: 14px; line-height: 1.45; color: var(--v3-on-ink-muted); }

@media (min-width: 1024px) {
  .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .rol { height: 420px; padding: 28px; }
}

/* ---- funciones ---- */

.funciones {
  display: grid;
  gap: 12px;
}

.funcion {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--v3-porcelain);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
  padding: 12px 16px 12px 12px;
}

/* Móvil: miniatura 72×96 en arena con el icono. */
.funcion .icono-caja {
  width: 72px;
  height: 96px;
  border-radius: 10px;
}

.funcion__textos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.funcion__titulo { font-size: 17px; font-weight: 600; line-height: 1.25; }
.funcion__texto { font-size: 14px; line-height: 1.45; color: var(--v3-ink-secondary); }

@media (min-width: 1024px) {
  .funciones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

  .funcion {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 28px;
  }

  .funcion .icono-caja { width: 48px; height: 48px; border-radius: 14px; }
  .funcion__titulo { font-size: 18px; }
  .funcion__texto { font-size: 15px; }
}

/* ---- pasos ---- */

.pasos {
  display: grid;
  gap: 16px;
}

.paso {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  line-height: 1.4;
}

.paso__n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--v3-sand-soft);
  color: var(--v3-clay-deep);
  font-family: var(--v3-font-display);
  font-size: 20px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .paso { font-size: 18px; }
}

/* ---- Stdio AI ---- */

.ai {
  padding: 56px var(--margen);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ai__texto { display: flex; flex-direction: column; gap: 16px; }

.ai__logo {
  font-family: var(--v3-font-logo);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--v3-on-ink);
}
.ai__logo .marca__punto { background: var(--v3-logo-dot-on-deep); }
/* El «Ai» es la misma imagen que la app (design/images/stdio-ai/stdio-ai-marca-1024.png, a 2×):
   caja de 33 (móvil) / 38 (escritorio), alineada abajo con la palabra y levantada por su cuna. */
.ai__logo { display: inline-flex; align-items: flex-end; align-self: flex-start; }
.ai__ai { width: 33px; height: 33px; padding-bottom: 8.5px; box-sizing: content-box; margin-left: 1px; }
@media (min-width: 1024px) {
  .ai__ai { width: 38px; height: 38px; padding-bottom: 10px; }
}

.ai__titulo {
  font-family: var(--v3-font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.12;
}

.ai__bajada { font-size: 16px; line-height: 1.55; color: var(--v3-on-ink-muted); }
.ai__precio { font-size: 14px; font-weight: 600; color: var(--v3-on-ink); }

.ai__renglones { display: flex; flex-direction: column; gap: 10px; }

.ai__renglon {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--v3-side-row);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}
.ai__renglon svg { width: 20px; height: 20px; color: var(--v3-on-ink); }

@media (min-width: 1024px) {
  .ai {
    padding: 80px var(--margen);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
  }
  .ai__texto { max-width: 600px; gap: 20px; }
  .ai__logo { font-size: 32px; }
  .ai__titulo { font-size: 48px; line-height: 1.08; }
  .ai__bajada { font-size: 18px; }
  .ai__renglones { width: 460px; flex-shrink: 0; gap: 12px; }
}

/* ---- precios ---- */

.precios {
  display: grid;
  gap: 20px;
  grid-template-areas: "cab" "tabla" "boton";
}

.precios__cab { grid-area: cab; display: flex; flex-direction: column; gap: 10px; }
.precios__tabla { grid-area: tabla; display: flex; flex-direction: column; gap: 16px; }
.precios__boton { grid-area: boton; }

.tabla-precio { padding: 4px 20px; }

.tabla-precio__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
}
.tabla-precio__fila + .tabla-precio__fila { box-shadow: inset 0 1px 0 var(--v3-sand-soft); }

.tabla-precio dt { font-size: 15px; color: var(--v3-ink-secondary); }
.tabla-precio dd { margin: 0; font-size: 16px; font-weight: 600; text-align: right; }

.ejemplo {
  background: var(--v3-sand-soft);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ejemplo__fila { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.4; }
.ejemplo__fila dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.ejemplo__fila small { display: block; font-size: 12px; font-weight: 400; color: var(--v3-ink-secondary); }

@media (min-width: 1024px) {
  .precios {
    grid-template-columns: 420px minmax(0, 1fr);
    grid-template-areas: "cab tabla" "boton tabla";
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    row-gap: 28px;
  }
  .precios__boton .boton { width: 280px; }
  .tabla-precio dt { font-size: 17px; }
  .tabla-precio dd { font-size: 18px; }
  .tabla-precio__fila { padding: 20px 0; }
  .ejemplo { padding: 24px; }
  /* D-6: el ejemplo es solo de escritorio; `revert` lo dejaría en block y perdería el gap. */
  .ejemplo.solo-escritorio { display: flex !important; }
  .ejemplo__fila { font-size: 15px; }
}

/* ---- preguntas ---- */

.preguntas {
  display: grid;
  gap: 20px;
  grid-template-areas: "prueba" "titulo" "faq";
}

.preguntas__titulo { grid-area: titulo; }
.preguntas__prueba { grid-area: prueba; display: flex; flex-direction: column; gap: 8px; }
.preguntas__faq { grid-area: faq; display: flex; flex-direction: column; gap: 10px; }

.prueba__titulo { font-family: var(--v3-font-display); font-size: 22px; line-height: 1.2; }
.prueba__texto { font-size: 15px; line-height: 1.5; color: var(--v3-ink-secondary); }

.faq {
  background: var(--v3-porcelain);
  border-radius: 14px;
  box-shadow: var(--sombra-tarjeta);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; color: var(--v3-ink-secondary); transition: transform 200ms ease; }
.faq[open] summary svg { transform: rotate(180deg); }

.faq p { padding: 0 20px 20px; font-size: 15px; line-height: 1.55; color: var(--v3-ink-secondary); }

@media (min-width: 1024px) {
  .preguntas {
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-areas: "titulo faq" "prueba faq";
    grid-template-rows: auto 1fr;
    column-gap: 64px;
    row-gap: 28px;
    align-items: start;
  }
}

/* ---- cierre ---- */

.cierre {
  padding: 56px var(--margen);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cierre__textos { display: flex; flex-direction: column; gap: 12px; }
.cierre__contacto { font-size: 15px; line-height: 1.6; }
.cierre__contacto a { text-decoration: none; font-weight: 600; }
.cierre__contacto a:hover { text-decoration: underline; }
.tinta .cierre__contacto { color: var(--v3-on-ink-muted); }
.tinta .cierre__contacto a { color: var(--v3-on-ink); }

.cierre__botones { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 1024px) {
  /* En escritorio el cierre es una banda de arena, no de tinta. */
  .cierre.tinta { background: var(--v3-sand-soft); color: var(--v3-ink); }
  .cierre.tinta .cierre__contacto { color: var(--v3-ink-secondary); }
  .cierre.tinta .cierre__contacto a { color: var(--v3-ink); }
  .cierre.tinta .boton--primario { background: var(--v3-cta-primary); color: var(--v3-cta-primary-on); }
  .cierre.tinta .boton--contorno { color: var(--v3-ink); box-shadow: inset 0 0 0 1.5px var(--v3-ink); }
  .cierre.tinta :focus-visible { outline-color: var(--v3-focus-ring); }

  .cierre {
    padding: 64px var(--margen);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }
  .cierre__botones { flex-direction: row; flex-shrink: 0; }
  .cierre__botones .boton--primario { width: 220px; }
}

/* ---- pie ---- */

.pie {
  padding: 40px var(--margen) 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pie__columnas { display: flex; flex-direction: column; gap: 20px; }

.pie__lema { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--v3-ink-secondary); }

.pie__titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--v3-ink-muted);
  margin-bottom: 8px;
}

.pie__lista { display: flex; flex-direction: column; }
.pie__lista a {
  display: inline-block;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--v3-clay-deep);
  text-decoration: none;
}
.pie__lista a:hover { text-decoration: underline; }

.pie address { font-style: normal; }
.pie__dato { font-size: 14px; line-height: 1.6; color: var(--v3-ink-secondary); }
.pie__dato a { text-decoration: none; }

.pie__cierre {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--v3-ink-muted);
}

/* Pie de la portada en móvil: claro y corto (marca, legales, versiones). */
.pie--portada .pie__producto,
.pie--portada .pie__contacto { display: none; }

@media (min-width: 1024px) {
  .pie--portada {
    background: var(--v3-ink-deep);
    color: var(--v3-on-ink);
    padding: 64px var(--margen) 40px;
    gap: 48px;
  }
  .pie--portada .marca { color: var(--v3-logo-mark-on-deep); }
  .pie--portada .marca__punto { background: var(--v3-logo-dot-on-deep); }
  .pie--portada .marca__sub { display: none; }
  .pie--portada :focus-visible { outline-color: var(--v3-on-ink); }

  .pie--portada .pie__columnas {
    flex-direction: row;
    justify-content: space-between;
    gap: 48px;
  }
  .pie--portada .pie__producto,
  .pie--portada .pie__contacto { display: block; }
  .pie--portada .pie__columnas > * { flex: 1 1 0; min-width: 0; }
  .pie--portada .pie__marca { flex-grow: 1.4; max-width: 340px; }
  .pie--portada .pie__lema,
  .pie--portada .pie__dato { color: var(--v3-on-ink-muted); }
  .pie--portada .pie__titulo { color: var(--v3-on-ink-muted); }
  .pie--portada .pie__lista a { color: var(--v3-on-ink); font-weight: 500; font-size: 14px; }
  .pie--portada .pie__dato a { color: var(--v3-on-ink); }

  .pie--portada .pie__cierre {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    box-shadow: inset 0 1px 0 var(--v3-side-row);
    color: var(--v3-on-ink-muted);
  }

  .pie--minimo .pie__columnas { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .pie--minimo .pie__lista { flex-direction: row; gap: 24px; }
  .pie--minimo .pie__cierre { flex-direction: row; gap: 24px; }
}

/* ---- barra fija (móvil, aparece al pasar el héroe; ver barra-fija.js) ---- */

.barra-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--v3-base);
  box-shadow: 0 -2px 10px #0000000D;
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 220ms ease-out, visibility 0s linear 220ms;
}

.barra-fija--visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 220ms ease-out, visibility 0s;
}

.barra-fija .boton--primario { flex: 1; }

.barra-fija__wa {
  display: grid;
  place-items: center;
  width: 52px;
  height: 54px;
  border-radius: var(--v3-radius-btn);
  background: var(--v3-sand-soft);
  color: var(--v3-ink);
  flex-shrink: 0;
}
.barra-fija__wa svg { width: 22px; height: 22px; }

@media (min-width: 1024px) {
  .barra-fija { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .barra-fija, .barra-fija--visible, .faq summary svg { transition: none; }
}

/* ================================================================== BANDA DE PÁGINA (clientes, puentes, legales) */

.banda {
  padding: 16px var(--margen) 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.banda__cabecera { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 20px; }
.banda__meta { font-size: 13px; color: var(--v3-on-ink-muted); }

@media (min-width: 1024px) {
  .banda { padding: 24px var(--margen) 56px; gap: 16px; }
  .banda__cabecera { margin-bottom: 32px; }
  .banda .titulo-1,
  .banda .bajada { max-width: 840px; }
  .banda .bajada { font-size: 18px; }
  .banda__meta { font-size: 14px; }
}

/* /agenda/ con la cara de quien invita: solo la banda toma su color. */
.con-cara .banda--ficha { background: var(--ficha-profundo); }

.cuerpo {
  padding: 28px var(--margen) 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .cuerpo { padding: 48px var(--margen) 72px; gap: 24px; }
  .cuerpo--angosto > * { max-width: 560px; }
}

/* ---- /clientes/ ---- */

.ventajas { display: grid; gap: 12px; }

.ventaja {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
}
.ventaja__titulo { font-size: 17px; font-weight: 600; }
.ventaja__texto { font-size: 14px; line-height: 1.45; color: var(--v3-ink-secondary); margin-top: 2px; }

@media (min-width: 1024px) {
  .ventajas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .ventaja { flex-direction: column; align-items: flex-start; padding: 28px; }
  .ventaja__titulo { font-size: 18px; }
  .ventaja__texto { font-size: 15px; }
}

.tiendas { display: flex; flex-wrap: wrap; gap: 10px; }
.tiendas .chip { font-size: 13px; padding: 10px 14px; }

.nota { font-size: 14px; line-height: 1.5; color: var(--v3-ink-secondary); }

/* ---- puentes (/abrir/, /agenda/) ---- */

.puente__acciones { display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 1024px) {
  .puente__acciones { max-width: 560px; }
  .puente__acciones .boton { width: 100%; }
}

/* Al saberse que la app no abrió, el botón deja de ser la acción principal. */
.sin-app #abrir { background: var(--v3-sand-soft); color: var(--v3-ink); min-height: 52px; font-size: 15px; }

.sin-app-tarjeta { display: flex; flex-direction: column; gap: 12px; }
.sin-app-tarjeta__titulo { font-family: var(--v3-font-display); font-weight: 400; font-size: 22px; line-height: 1.2; }
.sin-app-tarjeta__texto { font-size: 15px; line-height: 1.5; color: var(--v3-ink-secondary); }

@media (min-width: 1024px) {
  .sin-app-tarjeta__titulo { font-size: 28px; }
}

/* ================================================================== LEGALES */

.legal {
  padding: 24px var(--margen) 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.indice-movil {
  background: var(--v3-porcelain);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-tarjeta);
}

.indice-movil summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 20px;
  cursor: pointer;
  list-style: none;
}
.indice-movil summary::-webkit-details-marker { display: none; }
.indice-movil summary svg { width: 20px; height: 20px; color: var(--v3-ink-secondary); transition: transform 200ms ease; }
.indice-movil[open] summary svg { transform: rotate(180deg); }
.indice-movil ol { padding: 0 12px 12px; }

.indice-escritorio { display: none; }

.indice__lista a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--v3-ink);
  text-decoration: none;
}
.indice__lista a:hover { background: var(--v3-sand-soft); }

.doc__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 40px; }

.doc__cuerpo > section,
.doc__cuerpo .responsable {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 16px;
}

.doc__cuerpo h2 {
  font-family: var(--v3-font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
}

.sec__n::after { content: " · "; }

.doc__cuerpo h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 8px;
}

.doc__cuerpo p,
.doc__cuerpo li,
.doc__cuerpo address {
  font-size: 16px;
  line-height: 1.6;
  font-style: normal;
}

.doc__cuerpo ul,
.doc__cuerpo ol { padding-left: 1.2em; list-style: disc; display: flex; flex-direction: column; gap: 8px; }
.doc__cuerpo ol { list-style: decimal; }

.doc__cuerpo a { color: var(--v3-clay-deep); font-weight: 600; }

.doc__cuerpo .resumen {
  background: var(--v3-sand-soft);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--v3-ink);
}

.tabla-caja {
  background: var(--v3-porcelain);
  border-radius: 16px;
  box-shadow: var(--sombra-tarjeta);
  overflow: hidden;
}

.tabla-caja table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.tabla-caja caption { text-align: left; padding: 16px 18px 4px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v3-clay-deep); }
.tabla-caja th,
.tabla-caja td { text-align: left; vertical-align: top; padding: 12px 18px; }
.tabla-caja tbody tr + tr td { box-shadow: inset 0 1px 0 var(--v3-sand-soft); }

/* Móvil: cada fila es una tarjetita apilada con la etiqueta de su columna. */
@media (max-width: 1023px) {
  .tabla-caja thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-caja tr { display: block; padding: 8px 0; }
  .tabla-caja tbody tr + tr { box-shadow: inset 0 1px 0 var(--v3-sand-soft); }
  .tabla-caja tbody tr + tr td { box-shadow: none; }
  .tabla-caja td { display: block; padding: 4px 18px; }
  .tabla-caja td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--v3-ink-muted);
    margin-bottom: 2px;
  }
}

@media (min-width: 1024px) {
  .tabla-caja th { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--v3-ink-muted); }
}

.doc__cuerpo .volver-indice { align-self: flex-start; font-weight: 600; text-decoration: none; }

@media (min-width: 1024px) {
  .legal {
    padding: 56px var(--margen) 96px;
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }

  .indice-movil { display: none; }

  .indice-escritorio {
    display: block;
    position: sticky;
    top: 24px;
    width: 300px;
    flex-shrink: 0;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 20px 12px;
  }
  .indice-escritorio .rotulo { padding: 0 8px 8px; }

  .doc__cuerpo { max-width: 680px; gap: 56px; }
  .doc__cuerpo h2 { font-size: 30px; }
  .doc__cuerpo h3 { font-size: 19px; }
  .doc__cuerpo p,
  .doc__cuerpo li,
  .doc__cuerpo address { font-size: 17px; }
  .doc__cuerpo .tabla-caja td { font-size: 15px; }
  .doc__cuerpo .resumen { font-size: 16px; }
}


/* ================================================================== ajustes del guard · 1-oct (portada móvil, /clientes/, tiendas, legal) */

.enlace-fuerte--tinta { color: var(--v3-on-ink); font-size: 14px; align-self: flex-start; }

.ai .chip { align-self: flex-start; }

.nota { font-size: 14px; line-height: 1.5; color: var(--v3-ink-secondary); }

.cierre__texto { text-align: center; font-size: 14px; }
.cierre__entrar { color: var(--v3-on-ink); font-weight: 600; text-decoration: none; display: inline-block; padding: 8px 0; }
.cierre__wa { color: var(--v3-on-ink-muted); text-decoration: none; display: inline-block; padding: 8px 0; }

.contacto__titulo { font-family: var(--v3-font-display); font-weight: 400; font-size: 26px; line-height: 1.15; margin-bottom: 20px; }
.contacto__lista { display: flex; flex-direction: column; gap: 14px; }
.contacto__lista li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.contacto__lista svg { width: 18px; height: 18px; color: var(--v3-clay-deep); }
.contacto__lista address { font-style: normal; }
.contacto__lista a { text-decoration: none; color: var(--v3-ink); }

@media (max-width: 1023px) {
  .pie__lista--linea { flex-direction: row; flex-wrap: wrap; column-gap: 0; }
  .pie__lista--linea li:nth-child(2) { order: -1; }
  /* Orden visual: Aviso · Términos · Eliminar (el 2.º del DOM va primero). */
  /* Aviso · Términos en un renglón y Eliminar en el siguiente: con el punto detrás de cada uno,
     el renglón partido terminaba en un «·» suelto. */
  .pie__lista--linea li:nth-child(2)::after { content: "\00a0·\00a0"; color: var(--v3-clay-deep); font-size: 13px; font-weight: 600; }
  .pie__lista--linea li:last-child { flex-basis: 100%; }
  .pie__lista--linea li { display: inline-flex; align-items: center; }
  .pie__versiones { order: -1; }
  /* La barra fija (12 + 54 + 12) tapaba el final del pie: el «© 2026 Stdio». */
  .pie--portada { padding-bottom: calc(32px + 78px + env(safe-area-inset-bottom)); }
}

/* ---- /clientes/: icono suelto ---- */

.ventaja { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; }
.ventaja__icono { width: 20px; height: 20px; color: var(--v3-clay-deep); flex-shrink: 0; }
.ventaja__linea { font-size: 14px; font-weight: 400; line-height: 1.4; }
.ventaja__linea strong { font-weight: 600; }

@media (min-width: 1024px) {
  .ventaja { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; border-radius: var(--radio-tarjeta); }
  .ventaja__icono { width: 24px; height: 24px; }
  .ventaja__linea strong { display: block; font-size: 18px; margin-bottom: 4px; }
  .ventaja__linea { font-size: 15px; color: var(--v3-ink-secondary); }
  .ventaja__linea strong { color: var(--v3-ink); }
}

/* ---- tiendas: rectángulos lado a lado ---- */

.tiendas { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; }
.tienda {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 2px;
  white-space: nowrap;
  border-radius: 12px;
  background: var(--v3-sand-soft);
  color: var(--v3-ink-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
@media (min-width: 1024px) {
  .tienda { min-height: 52px; font-size: 14px; }
}

/* ---- pie de una línea (/clientes/) ---- */

.pie-linea { padding: 32px var(--margen); font-size: 13px; line-height: 1.8; color: var(--v3-ink-muted); }
.pie-linea a { color: inherit; text-decoration: none; }
.pie-linea a:hover { text-decoration: underline; }

/* ---- legal: título del índice plegable ---- */

.indice-movil__titulo { font-size: 15px; font-weight: 600; color: var(--v3-ink); }

/* Pie de /clientes/ en móvil: enlaces 12/600 arcilla en una línea y la nota de cookies debajo. */
@media (max-width: 1023px) {
  .pie-linea__enlaces { display: block; font-size: 12px; font-weight: 600; color: var(--v3-clay-deep); }
  .pie-linea__sep { display: none; }
  .pie-linea__cookies { display: block; margin-top: 4px; font-size: 11px; color: var(--v3-ink-muted); }
}

/* A 390 los dos rectángulos dentro de la tarjeta sin app y la línea de legales van justos:
   se aprieta un poco la tarjeta y el interletrado para que quepan en una línea, como el canvas. */
@media (max-width: 1023px) {
  .sin-app-tarjeta { padding: 20px 16px; }
  .sin-app-tarjeta .tiendas { gap: 6px; }
  .sin-app-tarjeta .tienda { font-size: 11px; letter-spacing: -0.2px; }
  .pie-linea__enlaces { white-space: nowrap; letter-spacing: -0.2px; }
}