/* ============================================================================
   Jokabide · hoja de componentes  (site.css)
   ----------------------------------------------------------------------------
   Derivada de los estilos en línea de los mocks del handoff de diseño
   (dirección A · continuista fiel):
     design-handoff/Jokabide Handoff.dc.html
       #tokens         → escala, color, botones y estados
       #componentes    → header, bloque de llamada, barra fija móvil,
                         bloque de precios, FAQ + breadcrumb, footer
       #home           → tipos de sección (hero, rejilla, banda de color, cita)
       #implementacion → notas de montaje

   Reglas de la casa:
   · Mobile-first. Los saltos son 640px (dos columnas) y 900px (escritorio).
   · Todo el color sale de tokens.css. Los pocos valores que el handoff usa y
     tokens.css no recoge están declarados abajo como "tokens derivados", en un
     único sitio y con su razón; no se escriben hex sueltos en los componentes.
   · Separamos por borde de 1px, no por sombra (dirección A).
   · Ningún color de marca puro (--jk-orange / --jk-turq / --jk-gold) se usa
     como color de TEXTO: para texto van los *-ink.
   · Esta hoja está pensada para reutilizarse tal cual en el Astro de la Fase B.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   0 · Tipografías (locales, sin peticiones a terceros ni tracking)
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/quicksand-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: "Quicksand";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/quicksand-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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sourcesans3-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: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sourcesans3-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: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/sourcesans3-italic-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: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/sourcesans3-italic-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;
}


/* ---------------------------------------------------------------------------
   1 · Tokens derivados
   Valores que aparecen en los mocks del handoff pero no están en tokens.css.
   Se declaran una sola vez, con el contraste comprobado, y siempre se usan por
   variable. Si mañana entran en tokens.css, se borran de aquí.
   --------------------------------------------------------------------------- */
:root {
  /* Etiqueta de botón sobre naranja. El handoff lo fija: 7,9:1 en tinta,
     no en blanco (en blanco daría 2,6:1). */
  --jk-btn-ink:        #1B1D22;
  --jk-orange-hover:   #E96D12;

  /* Cuerpo sobre tarjeta blanca y enlaces de navegación (10,4:1 sobre blanco). */
  --jk-ink-soft:       #3C4048;

  /* Antetítulo y acentos sobre la banda crema (4,6:1 sobre --jk-cream). */
  --jk-gold-ink:       #8A5A18;
  /* Enlace de texto sobre crema: --jk-orange-ink se queda en 3,9:1 ahí. 5,8:1. */
  --jk-orange-ink-cream: #8F3D00;
  /* Texto sobre la banda turquesa de CTA (6,0:1 sobre --jk-turq). */
  --jk-turq-deep:      #0B3A44;

  /* Bordes: chip cálido, bloque de documentación y campo de formulario. */
  --jk-line-warm:      #E8DAC2;
  --jk-line-strong:    #E2D9CC;
  --jk-line-input:     #DDD5C6;

  /* Fondo de la tarjeta de precio destacada y de los avisos cálidos. */
  --jk-cream-hi:       #FFF6EC;

  /* Texto sobre fondo tinta: barra de utilidad, footer y línea legal. */
  --jk-on-ink:         #D8D3CA; /* 10,3:1 */
  --jk-on-ink-2:       #C9CDD4;
  --jk-on-ink-3:       #8A9099; /*  4,8:1 */
  --jk-on-ink-line:    #33373F;

  /* Botón desactivado. */
  --jk-disabled-bg:    #E6E2DA;
  --jk-disabled-ink:   #8A8578;

  /* Superficies translúcidas de las barras fijas. */
  --jk-sticky-bg:      rgba(255, 253, 249, .96);

  /* Alturas reservadas por las barras fijas. */
  --jk-mobilebar-h:    76px;
}


/* ---------------------------------------------------------------------------
   2 · Base y tipografía
   Quicksand solo en títulos, cifras de precio y nombres propios de tarjeta.
   Source Sans 3 para todo el cuerpo. Nunca Quicksand en párrafos.
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--jk-bg);
  color: var(--jk-ink);
  font-family: var(--jk-font-text);
  font-size: var(--jk-body);
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* La barra fija de móvil no debe tapar el final del footer. */
@media (max-width: 767px) {
  body { padding-bottom: var(--jk-mobilebar-h); }
}

h1, h2, h3, h4 {
  font-family: var(--jk-font-display);
  font-weight: 700;
  color: var(--jk-ink);
  margin: 0;
  line-height: 1.12;
}
h1 { font-size: var(--jk-h1); line-height: 1.08; letter-spacing: -.015em; }
h2 { font-size: var(--jk-h2); }
h3 { font-size: var(--jk-h3); }

p { margin: 0; }

a { color: var(--jk-orange-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

strong, b { font-weight: 700; }

:focus-visible {
  outline: var(--jk-focus);
  outline-offset: 2px;
  border-radius: var(--jk-space-1);
}

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


/* ---------------------------------------------------------------------------
   3 · Utilidades de disposición
   --------------------------------------------------------------------------- */

/* Contenedor central: 1120px con el gutter del sistema. */
.jk-wrap {
  width: 100%;
  max-width: calc(var(--jk-maxw) + var(--jk-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--jk-gutter);
}
/* Medida de artículo: 720px. */
.jk-wrap--text { max-width: calc(var(--jk-maxw-text) + var(--jk-gutter) * 2); }

/* Bloque de sección: el ritmo vertical de todo el sitio. */
.jk-section { padding-block: var(--jk-section-y); }
.jk-section--tight { padding-block: var(--jk-space-7); }

/* Fondos de sección. El sitio alterna --jk-bg y --jk-surface; la crema y el
   turquesa son las dos bandas de color, y se usan como mucho una vez cada una. */
.jk-section--bg      { background: var(--jk-bg); }
.jk-section--surface { background: var(--jk-surface); }
.jk-section--cream   { background: var(--jk-cream); }
.jk-section--turq    { background: var(--jk-turq); }
.jk-section--ink     { background: var(--jk-ink); color: var(--jk-on-ink-2); }

/* Sobre crema el naranja de enlace no llega a AA: se oscurece. */
.jk-section--cream a { color: var(--jk-orange-ink-cream); }

/* Cabecera de sección: antetítulo + H2 (+ enlace a la derecha en escritorio). */
.jk-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--jk-space-2);
  margin-bottom: var(--jk-space-6);
}
.jk-section__head--split { gap: var(--jk-space-4); }
.jk-section__lead {
  font-size: 1.0625rem;
  color: var(--jk-ink-2);
  max-width: 70ch;
}
@media (min-width: 900px) {
  .jk-section__head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--jk-space-8);
  }
}

/* Antetítulo · 13px, versalita ancha. Turquesa oscuro por defecto; sobre la
   banda crema pasa al dorado oscuro para conservar el contraste. */
.jk-eyebrow {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jk-turq-ink);
}
.jk-eyebrow--warm { color: var(--jk-gold-ink); }

/* Cierre de sección: enlace o fila de botones tras el contenido. */
.jk-more { margin-top: var(--jk-space-6); }

.jk-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Salto al contenido, para teclado y lector de pantalla. */
.jk-skip {
  position: absolute;
  left: var(--jk-space-4);
  top: -100px;
  z-index: 100;
  background: var(--jk-surface);
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-r-input);
  padding: var(--jk-space-3) var(--jk-space-4);
  font-weight: 700;
  color: var(--jk-ink);
}
.jk-skip:focus { top: var(--jk-space-4); }


/* ---------------------------------------------------------------------------
   4 · Botones y enlaces de acción
   Altura mínima 48px en todo objetivo táctil. Un solo primario por pantalla
   visible; el resto, secundarios o enlaces de texto.
   --------------------------------------------------------------------------- */
.jk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jk-space-2);
  min-height: 48px;
  padding: var(--jk-space-4) var(--jk-space-6);
  border: 2px solid transparent;
  border-radius: var(--jk-r-pill);
  font-family: var(--jk-font-text);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.jk-btn:hover { text-decoration: none; }

/* Primario · naranja de marca con etiqueta en tinta. */
.jk-btn--primary {
  background: var(--jk-orange);
  color: var(--jk-btn-ink);
  border-color: var(--jk-orange);
}
.jk-btn--primary:hover {
  background: var(--jk-orange-hover);
  border-color: var(--jk-orange-hover);
  color: var(--jk-btn-ink);
}

/* Secundario · contorno de tinta. Es el sitio del teléfono y de WhatsApp. */
.jk-btn--secondary {
  background: transparent;
  color: var(--jk-ink);
  border-color: var(--jk-ink);
}
.jk-btn--secondary:hover { background: var(--jk-ink); color: var(--jk-bg); }

/* Oscuro · sobre bandas de color, donde el naranja no destacaría. */
.jk-btn--dark {
  background: var(--jk-ink);
  color: var(--jk-bg);
  border-color: var(--jk-ink);
}
.jk-btn--dark:hover { background: var(--jk-ink-2); border-color: var(--jk-ink-2); }

.jk-btn--disabled,
.jk-btn[aria-disabled="true"] {
  background: var(--jk-disabled-bg);
  border-color: var(--jk-disabled-bg);
  color: var(--jk-disabled-ink);
  pointer-events: none;
}

.jk-btn--sm { min-height: 44px; padding: var(--jk-space-3) var(--jk-space-5); font-size: .9375rem; }
.jk-btn--block { display: flex; width: 100%; }

/* Fila de acciones. En móvil los botones van a ancho completo y apilados. */
.jk-actions { display: flex; flex-direction: column; gap: var(--jk-space-3); }
.jk-actions > .jk-btn { width: 100%; }
@media (min-width: 640px) {
  .jk-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .jk-actions > .jk-btn { width: auto; }
}

/* Enlace de texto en naranja oscuro, subrayado al pasar. */
.jk-link {
  font-weight: 700;
  color: var(--jk-orange-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.jk-link--plain { text-decoration: none; }
.jk-link--plain:hover { text-decoration: underline; }

/* Línea de apoyo bajo el botón primario. */
.jk-support {
  font-size: .875rem;
  color: var(--jk-ink-3);
  line-height: 1.5;
}


/* ---------------------------------------------------------------------------
   5 · Aviso de maqueta
   Una sola línea, muy fina, para que el cliente sepa qué está mirando.
   No forma parte del diseño final: se borra al pasar a Astro.
   --------------------------------------------------------------------------- */
.jk-maqueta {
  background: var(--jk-ink);
  color: var(--jk-on-ink-3);
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .02em;
  text-align: center;
  padding: var(--jk-space-2) var(--jk-space-4);
}


/* 6 · Barra de utilidad (horario/dirección/redes): RETIRADA a petición del
   cliente. El horario y la dirección viven en el pie y en /contacto/. */


/* ---------------------------------------------------------------------------
   7 · Header · logo + navegación + CTA
   Pegado arriba al hacer scroll.
   --------------------------------------------------------------------------- */
.jk-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--jk-surface);
  border-bottom: 1px solid var(--jk-line);
}
.jk-header__inner {
  display: flex;
  align-items: center;
  gap: var(--jk-space-4);
  padding-block: var(--jk-space-3);
  min-height: 64px;
}
@media (min-width: 900px) {
  .jk-header__inner { gap: var(--jk-space-7); padding-block: var(--jk-space-4); }
}

.jk-logo { flex: none; display: block; line-height: 0; }
.jk-logo img { width: 120px; height: auto; }
@media (min-width: 900px) { .jk-logo img { width: 168px; } }

/* Botón hamburguesa · solo móvil. */
.jk-burger {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.jk-burger__bar {
  display: block;
  width: 26px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--jk-ink);
  transition: transform .15s ease, opacity .15s ease;
}
.jk-burger[aria-expanded="true"] .jk-burger__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.jk-burger[aria-expanded="true"] .jk-burger__bar:nth-child(2) { opacity: 0; }
.jk-burger[aria-expanded="true"] .jk-burger__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 900px) { .jk-burger { display: none; } }

/* CTA del header · oculto en móvil (ahí manda la barra fija de abajo). */
.jk-header__cta { display: none; }
@media (min-width: 900px) {
  .jk-header__cta { display: inline-flex; margin-left: auto; }
}


/* ---------------------------------------------------------------------------
   8 · Navegación principal
   Móvil: panel a pantalla completa bajo el header, con las Terapias
   desplegadas. Escritorio: fila horizontal con desplegable de dos columnas.
   --------------------------------------------------------------------------- */
.jk-nav { display: none; }
body.jk-menu-open { overflow: hidden; }
body.jk-menu-open .jk-nav {
  display: block;
  position: fixed;
  inset: 0;
  top: var(--jk-header-h, 64px);
  z-index: 39;
  background: var(--jk-surface);
  border-top: 1px solid var(--jk-line);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--jk-space-5) var(--jk-gutter)
           calc(var(--jk-mobilebar-h) + var(--jk-space-8));
}

.jk-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.jk-nav__item { border-bottom: 1px solid var(--jk-line); }

.jk-nav__link,
.jk-nav__toggle {
  display: flex;
  align-items: center;
  gap: var(--jk-space-2);
  width: 100%;
  min-height: 52px;
  padding: var(--jk-space-3) 0;
  background: transparent;
  border: 0;
  font-family: var(--jk-font-text);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--jk-ink-soft);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.jk-nav__link:hover,
.jk-nav__toggle:hover { color: var(--jk-orange-ink); text-decoration: none; }

/* Página actual. También en los enlaces del desplegable de Terapias: la mayoría
   de páginas del sitio cuelgan de ahí, así que sin esto el estado no se ve. */
.jk-nav__link[aria-current="page"],
.jk-nav__sublink[aria-current="page"] {
  color: var(--jk-orange-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.jk-nav__sublink[aria-current="page"] { font-weight: 700; }
/* Cuando la página actual está dentro del desplegable, se marca también el
   propio "Terapias" para que el usuario sepa dónde está sin abrirlo. */
.jk-nav__item--current > .jk-nav__toggle { color: var(--jk-orange-ink); }

/* Cheurón del desplegable. */
.jk-nav__chevron {
  margin-left: auto;
  font-size: .875rem;
  line-height: 1;
  transition: transform .15s ease;
}
.jk-nav__toggle[aria-expanded="true"] .jk-nav__chevron { transform: rotate(180deg); }

.jk-nav__panel { display: none; padding-bottom: var(--jk-space-4); }
.jk-nav__toggle[aria-expanded="true"] + .jk-nav__panel { display: block; }

.jk-nav__panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--jk-space-1);
}
.jk-nav__sublink {
  display: block;
  min-height: 44px;
  padding: var(--jk-space-2) var(--jk-space-3);
  border-radius: var(--jk-space-2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--jk-ink-soft);
  text-decoration: none;
}
.jk-nav__sublink:hover { background: var(--jk-bg); color: var(--jk-orange-ink); text-decoration: none; }

/* CTA y datos de contacto al final del menú móvil (en escritorio no existen:
   ahí el CTA vive en el header y el teléfono en la barra de utilidad). */
.jk-nav__foot {
  margin-top: var(--jk-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--jk-space-3);
  font-size: .9375rem;
  color: var(--jk-ink-2);
}

@media (min-width: 900px) {
  .jk-nav__foot { display: none; }

  .jk-nav,
  body.jk-menu-open .jk-nav {
    display: block;
    position: static;
    inset: auto;
    z-index: auto;
    background: transparent;
    border-top: 0;
    overflow: visible;
    padding: 0;
  }
  body.jk-menu-open { overflow: auto; }

  .jk-nav__list { flex-direction: row; align-items: center; gap: var(--jk-space-5); }
  .jk-nav__item { border-bottom: 0; position: relative; }

  .jk-nav__link,
  .jk-nav__toggle {
    width: auto;
    min-height: 40px;
    padding: var(--jk-space-2) 0;
    font-size: .9375rem;
  }
  .jk-nav__chevron { margin-left: var(--jk-space-1); }

  /* Desplegable de Terapias · dos columnas, como pide el handoff. */
  .jk-nav__panel {
    position: absolute;
    top: calc(100% + var(--jk-space-3));
    left: calc(-1 * var(--jk-space-4));
    z-index: 45;
    min-width: 460px;
    padding: var(--jk-space-4);
    background: var(--jk-surface);
    border: 1px solid var(--jk-line);
    border-radius: var(--jk-r-card);
  }
  .jk-nav__panel-list { grid-template-columns: 1fr 1fr; gap: var(--jk-space-1) var(--jk-space-4); }
}


/* ---------------------------------------------------------------------------
   9 · Barra fija de móvil · llamada y WhatsApp
   Solo < 768px. Altura 72px + área segura del sistema.
   --------------------------------------------------------------------------- */
.jk-mobilebar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--jk-space-3);
  padding: var(--jk-space-3) var(--jk-space-4);
  padding-bottom: calc(var(--jk-space-4) + env(safe-area-inset-bottom, 0px));
  background: var(--jk-sticky-bg);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--jk-line);
}
.jk-mobilebar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--jk-space-3);
  border-radius: var(--jk-r-input);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.jk-mobilebar__btn--call { background: var(--jk-orange); color: var(--jk-btn-ink); }
.jk-mobilebar__btn--wa   { background: var(--jk-ink);    color: var(--jk-bg); }
.jk-mobilebar__btn:hover { text-decoration: none; }
@media (min-width: 768px) { .jk-mobilebar { display: none; } }


/* ---------------------------------------------------------------------------
   10 · Hero
   Variante con imagen (home y servicios) y variante simple (páginas cortas).
   --------------------------------------------------------------------------- */
.jk-hero { background: var(--jk-bg); padding-block: var(--jk-space-8) var(--jk-space-9); }

.jk-hero__inner { display: grid; gap: var(--jk-space-7); align-items: center; }
@media (min-width: 900px) {
  .jk-hero { padding-block: var(--jk-space-10) var(--jk-space-11); }
  .jk-hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--jk-space-9); }
}

.jk-hero__body { display: flex; flex-direction: column; gap: var(--jk-space-5); }

/* Distintivo de encima del H1. */
.jk-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--jk-space-2);
  width: fit-content;
  padding: var(--jk-space-2) var(--jk-space-4);
  background: var(--jk-white);
  border: 1px solid var(--jk-line-warm);
  border-radius: var(--jk-r-pill);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--jk-turq-ink);
}

.jk-hero__lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--jk-ink-2);
  max-width: 46ch;
}
/* Párrafos de apoyo del hero: cuerpo normal, misma medida. */
.jk-hero__p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--jk-ink-2);
  max-width: 52ch;
}
.jk-hero__text { display: flex; flex-direction: column; gap: var(--jk-space-4); }

/* Línea de apoyo del hero: colegiados, dirección, precio de referencia. */
.jk-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jk-space-2) var(--jk-space-4);
  font-size: .875rem;
  color: var(--jk-ink-3);
}

.jk-hero__media {
  border-radius: var(--jk-r-card);
  overflow: hidden;
  background: var(--jk-turq);
}
.jk-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .jk-hero__media { border-radius: 16px; } }

/* Hero sin imagen: páginas de índice, legales, gracias. */
.jk-hero--simple .jk-hero__inner { grid-template-columns: 1fr; max-width: 46rem; }


/* ---------------------------------------------------------------------------
   11 · Rejillas y tarjetas
   La tarjeta es el bloque de reparto de todo el sitio: borde de 1px, radio 14,
   fondo blanco sobre secciones claras.
   --------------------------------------------------------------------------- */
.jk-grid { display: grid; gap: var(--jk-space-5); }
@media (min-width: 640px) {
  .jk-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .jk-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .jk-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .jk-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .jk-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.jk-card {
  display: flex;
  flex-direction: column;
  gap: var(--jk-space-3);
  padding: var(--jk-space-5);
  background: var(--jk-white);
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-r-card);
}
@media (min-width: 900px) { .jk-card { padding: var(--jk-space-6); } }

/* Variantes de tarjeta. */
.jk-card--flat   { background: var(--jk-bg); }
.jk-card--accent { border: 2px solid var(--jk-orange); background: var(--jk-cream-hi); }
.jk-card--link   { text-decoration: none; color: inherit; }
.jk-card--link:hover { border-color: var(--jk-orange); text-decoration: none; }

/* Cuadro de color que identifica la vertical. */
.jk-card__mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  flex: none;
}
@media (min-width: 900px) { .jk-card__mark { width: 44px; height: 44px; border-radius: 12px; } }
.jk-card__mark--orange-soft { background: var(--jk-orange-soft); }
.jk-card__mark--turq-soft   { background: var(--jk-turq-soft); }
.jk-card__mark--gold        { background: var(--jk-gold); }
.jk-card__mark--orange      { background: var(--jk-orange); }
.jk-card__mark--turq        { background: var(--jk-turq); }
.jk-card__mark--cream       { background: var(--jk-cream); }

.jk-card__title { font-family: var(--jk-font-display); font-weight: 700; font-size: var(--jk-h3); }
.jk-card__text  { font-size: 1rem; line-height: 1.55; color: var(--jk-ink-2); }
.jk-card__meta  { font-size: .9375rem; font-weight: 700; color: var(--jk-ink); }
.jk-card__links { display: flex; flex-wrap: wrap; gap: var(--jk-space-2) var(--jk-space-4); margin-top: auto; padding-top: var(--jk-space-1); }
.jk-card__link  { font-weight: 700; font-size: 1rem; }

/* Tarjeta de una línea: punto de color + rótulo + flecha. Para verticales
   secundarias y listas de enlaces. */
.jk-pill-card {
  display: flex;
  align-items: center;
  gap: var(--jk-space-3);
  padding: var(--jk-space-4) var(--jk-space-5);
  background: var(--jk-bg);
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-r-card);
  text-decoration: none;
  color: var(--jk-ink);
}
.jk-pill-card:hover { border-color: var(--jk-orange); text-decoration: none; }
.jk-pill-card__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.jk-pill-card__dot--orange { background: var(--jk-orange); }
.jk-pill-card__dot--turq   { background: var(--jk-turq); }
.jk-pill-card__dot--gold   { background: var(--jk-gold); }
.jk-pill-card__label { font-family: var(--jk-font-display); font-weight: 700; font-size: 1.0625rem; }
.jk-pill-card__arrow { margin-left: auto; font-weight: 700; color: var(--jk-orange-ink); }

/* Chips informativos (precio, formato, duración). */
.jk-chips { display: flex; flex-wrap: wrap; gap: var(--jk-space-3); }
.jk-chip {
  padding: var(--jk-space-2) var(--jk-space-4);
  background: var(--jk-white);
  border: 1px solid var(--jk-line-warm);
  border-radius: var(--jk-r-pill);
  font-size: .9375rem;
  color: var(--jk-ink-soft);
}


/* ---------------------------------------------------------------------------
   12 · Pasos numerados (el método)
   --------------------------------------------------------------------------- */
.jk-steps { display: flex; flex-direction: column; gap: var(--jk-space-3); list-style: none; margin: 0; padding: 0; }
.jk-step {
  display: flex;
  gap: var(--jk-space-4);
  align-items: flex-start;
  padding: var(--jk-space-5) var(--jk-space-6);
  background: var(--jk-surface);
  border-radius: var(--jk-r-card);
}
.jk-step__num {
  flex: none;
  font-family: var(--jk-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--jk-orange-ink);
}
.jk-step__title { font-family: var(--jk-font-display); font-weight: 700; font-size: 1.125rem; }
.jk-step__text  { margin-top: var(--jk-space-1); font-size: 1rem; line-height: 1.5; color: var(--jk-ink-2); }

/* Dos columnas: texto a la izquierda, pasos a la derecha. */
.jk-split { display: grid; gap: var(--jk-space-7); align-items: center; }
.jk-split__body { display: flex; flex-direction: column; gap: var(--jk-space-4); }
@media (min-width: 900px) {
  .jk-split { grid-template-columns: .9fr 1.1fr; gap: var(--jk-space-9); }
  .jk-split--even { grid-template-columns: 1fr 1fr; }
}


/* ---------------------------------------------------------------------------
   13 · Cita destacada
   --------------------------------------------------------------------------- */
.jk-quote {
  margin: 0;
  padding: var(--jk-space-5) var(--jk-space-6);
  background: var(--jk-surface);
  border-left: 4px solid var(--jk-orange);
  border-radius: var(--jk-r-input);
}
.jk-quote__text {
  font-family: var(--jk-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--jk-ink);
}
.jk-quote__cite {
  display: block;
  margin-top: var(--jk-space-2);
  font-family: var(--jk-font-text);
  font-style: normal;
  font-size: .875rem;
  color: var(--jk-ink-3);
}


/* ---------------------------------------------------------------------------
   14 · Ficha de persona (equipo)
   --------------------------------------------------------------------------- */
.jk-person {
  display: flex;
  gap: var(--jk-space-5);
  align-items: flex-start;
  padding: var(--jk-space-5);
  background: var(--jk-white);
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-r-card);
}
.jk-person__photo {
  flex: none;
  width: 92px; height: 92px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--jk-orange-soft);
}
@media (min-width: 900px) { .jk-person__photo { width: 120px; height: 120px; } }
.jk-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.jk-person__body { display: flex; flex-direction: column; gap: var(--jk-space-2); }
.jk-person__name { font-family: var(--jk-font-display); font-weight: 700; font-size: 1.375rem; }
.jk-person__role { font-size: .9375rem; color: var(--jk-ink-3); }
.jk-person__role strong { color: var(--jk-ink); }
.jk-person__text { font-size: 1rem; line-height: 1.5; color: var(--jk-ink-2); }


/* ---------------------------------------------------------------------------
   15 · Reseñas
   Se pintan estáticas en el HTML: ningún widget de terceros.
   --------------------------------------------------------------------------- */
.jk-review {
  margin: 0; /* <figure> trae márgenes laterales por defecto */
  display: flex;
  flex-direction: column;
  gap: var(--jk-space-3);
  padding: var(--jk-space-5);
  background: var(--jk-white);
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-r-card);
}
.jk-review__text { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--jk-ink-soft); }
.jk-review__text > p { margin: 0; }
.jk-review__text > p + p { margin-top: var(--jk-space-3); }
.jk-review__author {
  margin-top: auto;
  font-size: .875rem;
  font-style: normal;
  color: var(--jk-ink-3);
}


/* ---------------------------------------------------------------------------
   16 · Bloque de precios
   Tres tarifas en home y contacto; tarifa única en cada servicio. El borde
   naranja marca la tarifa relevante para la página, no una recomendación.
   Siempre acompañado de «pago por sesión, sin bonos ni permanencia».
   --------------------------------------------------------------------------- */
.jk-prices { display: grid; gap: var(--jk-space-5); }
@media (min-width: 640px) { .jk-prices { grid-template-columns: repeat(3, 1fr); } }

.jk-price {
  display: flex;
  flex-direction: column;
  gap: var(--jk-space-2);
  padding: var(--jk-space-5);
  background: var(--jk-white);
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-r-card);
}
@media (min-width: 900px) { .jk-price { padding: var(--jk-space-6); } }
.jk-price--featured { border: 2px solid var(--jk-orange); background: var(--jk-cream-hi); }
.jk-price__label  { font-family: var(--jk-font-display); font-weight: 700; font-size: 1.125rem; }
.jk-price__amount { font-family: var(--jk-font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; }
/* "alrededor de 90 €": el matiz baja a cuerpo para que la cifra no pierda
   peso. Va en línea a propósito: la frase tiene que seguir leyéndose (y
   copiándose) entera, sin saltos que la partan. */
.jk-price__prefix {
  font-family: var(--jk-font-text);
  font-weight: 400;
  font-size: 1rem;
  color: var(--jk-ink-3);
  margin-right: var(--jk-space-1);
}
/* Con matiz delante, la cifra baja un punto para que la línea no dé el salto. */
.jk-price__amount:has(.jk-price__prefix) { font-size: 2.125rem; }
.jk-price__note   { font-size: .9375rem; color: var(--jk-ink-3); }
.jk-prices__foot  { margin-top: var(--jk-space-5); display: flex; flex-direction: column; gap: var(--jk-space-3); font-size: 1rem; color: var(--jk-ink-2); max-width: 70ch; }

/* Tarifa única, en el lateral de una página de servicio. */
/* --solo es la tarifa única de una página de servicio. Va después de --featured
   en la hoja, así que se acota con :not() para no pisar el destacado cuando
   ambas coinciden (el borde naranja marca "esta es tu tarifa"). */
.jk-price--solo:not(.jk-price--featured) { background: var(--jk-surface); border: 1px solid var(--jk-line); }
.jk-price--solo { gap: var(--jk-space-2); padding: var(--jk-space-7); }
.jk-price--solo .jk-price__amount { font-size: 3.25rem; }


/* ---------------------------------------------------------------------------
   17 · Bloque de llamada gratuita de 15 minutos
   Va en el hero de todas las plantillas y en el CTA final. El texto del botón
   no cambia entre plantillas: es el mismo evento de conversión. Nunca se
   formula como sesión gratis ni como consulta de valoración.
   --------------------------------------------------------------------------- */
.jk-callblock {
  display: flex;
  flex-direction: column;
  gap: var(--jk-space-3);
  padding: var(--jk-space-5);
  background: var(--jk-white);
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-r-card);
}
@media (min-width: 900px) { .jk-callblock { padding: var(--jk-space-6); } }
.jk-callblock__title { font-family: var(--jk-font-display); font-weight: 700; font-size: 1.375rem; }
.jk-callblock__text  { font-size: 1rem; line-height: 1.55; color: var(--jk-ink-2); }
.jk-callblock__actions { display: flex; flex-direction: column; gap: var(--jk-space-3); }
@media (min-width: 640px) {
  .jk-callblock__actions { flex-direction: row; flex-wrap: wrap; }
  .jk-callblock__actions > .jk-btn { width: auto; }
}
.jk-callblock__foot { font-size: .875rem; color: var(--jk-ink-3); }


/* ---------------------------------------------------------------------------
   18 · Banda de color de cierre (CTA final)
   --------------------------------------------------------------------------- */
.jk-band { background: var(--jk-turq); padding-block: var(--jk-space-9); }
.jk-band__inner { display: flex; flex-direction: column; gap: var(--jk-space-5); }
.jk-band__body  { display: flex; flex-direction: column; gap: var(--jk-space-3); }
.jk-band__title { color: var(--jk-turq-deep); }
.jk-band__text  { font-size: 1.125rem; line-height: 1.5; color: var(--jk-turq-deep); max-width: 52ch; }
.jk-band__actions { display: flex; flex-direction: column; gap: var(--jk-space-3); }
.jk-band__actions > .jk-btn { width: 100%; }
.jk-band__foot { font-size: .9375rem; color: var(--jk-turq-deep); }
.jk-band__foot a { color: var(--jk-turq-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .jk-band__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .jk-band__actions > .jk-btn { width: auto; }
}
@media (min-width: 900px) {
  .jk-band__inner { flex-direction: row; align-items: center; gap: var(--jk-space-8); }
  .jk-band__side  { margin-left: auto; flex: none; display: flex; flex-direction: column; gap: var(--jk-space-3); align-items: flex-start; }
}
/* Sobre turquesa, el botón secundario de contorno pasa a tinta legible. */
.jk-band .jk-btn--secondary { border-color: var(--jk-turq-deep); color: var(--jk-turq-deep); }
.jk-band .jk-btn--secondary:hover { background: var(--jk-turq-deep); color: var(--jk-bg); }


/* ---------------------------------------------------------------------------
   19 · Breadcrumbs
   Con schema BreadcrumbList en todas las páginas hijas.
   --------------------------------------------------------------------------- */
.jk-breadcrumb { background: var(--jk-bg); border-bottom: 1px solid var(--jk-line); font-size: .875rem; color: var(--jk-ink-3); }
.jk-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding-block: var(--jk-space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jk-space-2);
}
.jk-breadcrumb__item { display: flex; align-items: center; gap: var(--jk-space-2); }
.jk-breadcrumb__item a { color: var(--jk-ink-3); text-decoration: underline; text-underline-offset: 3px; }
.jk-breadcrumb__item a:hover { color: var(--jk-orange-ink); }
.jk-breadcrumb__sep { color: var(--jk-ink-3); }
.jk-breadcrumb__current { color: var(--jk-ink); font-weight: 600; }


/* ---------------------------------------------------------------------------
   20 · Acordeón de FAQ
   <details>/<summary> nativos, con el marcador sustituido por +/−: accesible
   por teclado y desplegable por el buscador. La primera pregunta lleva `open`.
   La respuesta aparece sin animación de altura para no penalizar CLS.
   --------------------------------------------------------------------------- */
.jk-faq { display: flex; flex-direction: column; gap: var(--jk-space-3); }
.jk-faq-group { display: flex; flex-direction: column; gap: var(--jk-space-3); }
.jk-faq-group + .jk-faq-group { margin-top: var(--jk-space-7); }

.jk-faq__item {
  background: var(--jk-white);
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-r-input);
}
.jk-faq__q {
  display: flex;
  align-items: center;
  gap: var(--jk-space-4);
  padding: var(--jk-space-5) var(--jk-space-6);
  font-family: var(--jk-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--jk-ink);
  cursor: pointer;
  list-style: none;
}
.jk-faq__q::-webkit-details-marker { display: none; }
.jk-faq__q::after {
  content: "+";
  margin-left: auto;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--jk-orange-ink);
}
.jk-faq__item[open] > .jk-faq__q::after { content: "−"; }
.jk-faq__a {
  padding: 0 var(--jk-space-6) var(--jk-space-5);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--jk-ink-2);
  max-width: 75ch;
}
.jk-faq__a > * + * { margin-top: var(--jk-space-3); }


/* ---------------------------------------------------------------------------
   21 · Aviso sobrio de urgencia (024 / 112)
   Cuerpo pequeño, filete lateral y fondo neutro. NUNCA caja de alarma: sin
   rojo y sin icono. Va al final del FAQ y queda fuera del schema FAQPage.
   --------------------------------------------------------------------------- */
.jk-aviso {
  margin-top: var(--jk-space-6);
  padding: var(--jk-space-4) var(--jk-space-5);
  background: var(--jk-surface);
  border: 1px solid var(--jk-line);
  border-left: 3px solid var(--jk-ink-3);
  border-radius: var(--jk-r-input);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--jk-ink-2);
  max-width: 75ch;
}
.jk-aviso strong { color: var(--jk-ink); }


/* ---------------------------------------------------------------------------
   22 · Formulario
   El de contacto lo monta su propia página; aquí van los estilos comunes.
   --------------------------------------------------------------------------- */
.jk-form { display: flex; flex-direction: column; gap: var(--jk-space-4); }
.jk-form__row { display: grid; gap: var(--jk-space-4); }
@media (min-width: 640px) { .jk-form__row--2 { grid-template-columns: 1fr 1fr; } }

.jk-field { display: flex; flex-direction: column; gap: var(--jk-space-2); }
.jk-field__label { font-size: .9375rem; font-weight: 600; color: var(--jk-ink); }

.jk-input,
.jk-textarea {
  width: 100%;
  padding: var(--jk-space-4);
  background: var(--jk-surface);
  border: 1px solid var(--jk-line-input);
  border-radius: var(--jk-r-input);
  font-family: var(--jk-font-text);
  font-size: 1rem;
  color: var(--jk-ink);
}
.jk-input::placeholder,
.jk-textarea::placeholder { color: var(--jk-disabled-ink); }
.jk-textarea { min-height: 128px; resize: vertical; }

.jk-check {
  display: flex;
  gap: var(--jk-space-3);
  align-items: flex-start;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--jk-ink-2);
}
.jk-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

.jk-form__foot { font-size: .875rem; line-height: 1.5; color: var(--jk-ink-3); }


/* ---------------------------------------------------------------------------
   23 · Prosa (artículos, legales, textos largos)
   Una sola columna de 720px, cuerpo de 16px e interlineado 1.7.
   --------------------------------------------------------------------------- */
.jk-prose { font-size: 1rem; line-height: 1.7; color: var(--jk-ink-soft); }
.jk-prose > * + * { margin-top: var(--jk-space-4); }
.jk-prose h2 { margin-top: var(--jk-space-8); font-size: 1.375rem; }
.jk-prose h3 { margin-top: var(--jk-space-6); font-size: 1.1875rem; }
.jk-prose ul,
.jk-prose ol { padding-left: var(--jk-space-5); }
.jk-prose li + li { margin-top: var(--jk-space-2); }
.jk-prose a { text-decoration: underline; text-underline-offset: 3px; }
.jk-prose blockquote {
  margin: 0;
  padding-left: var(--jk-space-5);
  border-left: 3px solid var(--jk-line);
  color: var(--jk-ink-2);
}


/* ---------------------------------------------------------------------------
   24 · Bloque puente de tres ("quizá también te interese")
   --------------------------------------------------------------------------- */
.jk-related { background: var(--jk-bg); }
.jk-related__title { font-family: var(--jk-font-display); font-weight: 700; font-size: 1.5rem; margin-bottom: var(--jk-space-4); }


/* ---------------------------------------------------------------------------
   25 · Footer
   Verticales, gabinete, contacto, colegiados y legales. Los números de
   colegiado son obligatorios y van en el footer de TODAS las páginas.
   La franja LGTBIQA+ mide 34×6px: es un detalle, no un eje de comunicación.
   --------------------------------------------------------------------------- */
/* Pie CLARO, como en jokabide.com (su sección de pie es #F6F6F6). El handoff lo
   dibujaba oscuro, lo que obligaba a recolorear el logotipo del cliente: se
   descarta. El logo va SIEMPRE a color sobre fondo claro, sin chip oscuro. */
.jk-footer { background: var(--jk-surface); color: var(--jk-ink-2); font-size: .9375rem; border-top: 1px solid var(--jk-line); }
.jk-footer a { color: var(--jk-ink-2); text-decoration: none; }
.jk-footer a:hover { color: var(--jk-orange-ink); text-decoration: underline; text-underline-offset: 3px; }

.jk-footer__cols {
  display: grid;
  gap: var(--jk-space-7);
  padding-block: var(--jk-space-9) var(--jk-space-7);
}
@media (min-width: 640px) { .jk-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .jk-footer__cols { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--jk-space-7); } }

.jk-footer__brand { display: flex; flex-direction: column; gap: var(--jk-space-4); }
.jk-footer__logo img { width: 170px; }
.jk-footer__blurb { line-height: 1.55; }
.jk-footer__safe { display: flex; align-items: center; gap: var(--jk-space-3); font-size: .875rem; }
.jk-footer__flag {
  flex: none;
  width: 34px; height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #E44, #FA7B1E, #FAC41E, #4CAF50, #3BC4E0, #8B5CF6);
}

.jk-footer__col { display: flex; flex-direction: column; gap: var(--jk-space-2); }
.jk-footer__title { font-family: var(--jk-font-display); font-weight: 700; color: var(--jk-ink); }
.jk-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--jk-space-2); }
.jk-footer__list li { line-height: 1.45; }

.jk-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--jk-space-2);
  padding-block: var(--jk-space-4) var(--jk-space-6);
  border-top: 1px solid var(--jk-line);
  font-size: .8125rem;
  color: var(--jk-ink-3);
}
.jk-footer__legal a { color: var(--jk-ink-3); }
@media (min-width: 900px) {
  .jk-footer__legal { flex-direction: row; align-items: center; gap: var(--jk-space-5); }
  .jk-footer__legal-links { margin-left: auto; }
}


/* ---------------------------------------------------------------------------
   26 · Impresión
   --------------------------------------------------------------------------- */
@media print {
  .jk-maqueta, .jk-mobilebar, .jk-burger, .jk-header__cta { display: none !important; }
  .jk-header { position: static; }
  body { background: var(--jk-white); padding-bottom: 0; }
}