/* Guías de Muela: la misma hoja de tokens que landing/index.html (src/index.css
   después de la armonía visual), con la tipografía de lectura larga. Sin build:
   cada guía es HTML estático que enlaza este archivo. */
:root {
  --brand-50: #F6F2FC;
  --brand-100: #EEE6FB;
  --brand-200: #DDD0F5;
  --brand-600: #7451B3;
  --brand-700: #624299;
  --brand-800: #4F357D;
  --warm-50: #FBF8F5;
  --warm-100: #F5EDE5;
  --warm-200: #EEDFD1;
  --warm-700: #7A4A2E;
  --ink: #29232E;
  --ink-secondary: #5C5760;
  --ink-muted: #68636B;
  --line: #DEDBD7;
  --shell-line: #E1D2C5;
  --shell-hover: rgba(255, 255, 255, 0.58);
  --line-soft: #ECE9E4;
  --line-medium: #C9C5C0;
  --line-strong: #958F96;
  --surface: #FFFFFF;
  --surface-2: #F6F4F0;
  --frame: var(--warm-100);
  --ok: #347046;
  --ok-bg: #EAF3EB;
  --warn: #88651E;
  --warn-bg: #FBF3DE;
  --radius-chip: 6px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-sheet: 20px;
  --shadow-1: 0 1px 2px rgba(41, 35, 46, 0.06);
  --shadow-2: 0 6px 16px rgba(41, 35, 46, 0.10);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --ancho: 1200px;
  --ancho-lectura: 720px;
  --gutter: 24px;
}
@media (max-width: 620px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 17px;
  line-height: 28px;
  color: var(--ink-secondary);
  background: var(--frame);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 600; }
h1 { font-size: 40px; line-height: 48px; letter-spacing: -0.02em; }
h2 { font-size: 28px; line-height: 36px; letter-spacing: -0.01em; margin-top: 48px; }
h3 { font-size: 20px; line-height: 28px; margin-top: 32px; }
@media (max-width: 620px) {
  body { font-size: 16px; line-height: 26px; }
  h1 { font-size: 30px; line-height: 36px; }
  h2 { font-size: 24px; line-height: 32px; margin-top: 40px; }
}
p { margin: 16px 0 0; text-wrap: pretty; }
ul, ol { margin: 16px 0 0; padding-left: 24px; }
li { margin-top: 8px; }
li::marker { color: var(--brand-600); font-weight: 600; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brand-200); }
a:hover { color: var(--brand-800); text-decoration-color: currentColor; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icono { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.envoltorio { max-width: calc(var(--ancho) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.lectura { max-width: var(--ancho-lectura); margin: 0 auto; padding: 0 var(--gutter); }

/* Barra: la de la landing, sin menú de secciones. */
.barra { position: sticky; top: 0; z-index: 30; padding: 12px var(--gutter); background: var(--frame); border-bottom: 1px solid var(--shell-line); }
.barra-fila { max-width: var(--ancho); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.marca svg { display: block; flex-shrink: 0; }
.barra-enlaces { display: flex; align-items: center; gap: 4px; }
.barra-enlaces a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-control); font-size: 14px; line-height: 22px; font-weight: 600;
  color: var(--ink-secondary); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.barra-enlaces a:hover { color: var(--ink); background: var(--shell-hover); }
/* El CTA dentro de la barra: la regla de los enlaces no le cambia el color. */
.barra-enlaces a.boton-lleno { color: #fff; background-color: var(--brand-600); }
.barra-enlaces a.boton-lleno:hover { color: #fff; background-color: var(--brand-700); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border: 1px solid transparent; border-radius: var(--radius-control); font-family: inherit; font-size: 14px; line-height: 22px; font-weight: 600;
  text-decoration: none; cursor: pointer; background: none;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), scale var(--dur-fast) var(--ease-standard);
}
.boton:active { scale: 0.97; transition-duration: 60ms; }
.boton-lleno { background-color: var(--brand-600); color: #fff; }
.boton-lleno:hover { background-color: var(--brand-700); color: #fff; }
.boton-lleno:active { background-color: var(--brand-800); }
.boton-secundario { background-color: var(--surface); border-color: var(--line-medium); color: var(--ink); }
.boton-secundario:hover { background-color: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
.boton-chico { padding: 6px 12px; min-height: 36px; }
@media (max-width: 620px) { .barra .boton span { display: none; } }

/* Cabecera del artículo */
.cabecera { padding: 48px 0 32px; border-bottom: 1px solid var(--shell-line); }
@media (max-width: 620px) { .cabecera { padding: 32px 0 24px; } }
.migas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.migas a { color: var(--ink-secondary); text-decoration: none; }
.migas a:hover { color: var(--ink); text-decoration: underline; }
.migas li { list-style: none; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.migas ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.rotulo { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; color: var(--brand-700); }
.rotulo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-600); }
.cabecera h1 { margin-top: 12px; }
.bajada { margin-top: 16px; font-size: 19px; line-height: 30px; color: var(--ink-secondary); }
@media (max-width: 620px) { .bajada { font-size: 17px; line-height: 28px; } }
.meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Cuerpo */
.cuerpo { padding: 8px 0 64px; }
.cuerpo h2:first-child { margin-top: 32px; }
.nota {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 18px;
  border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  font-size: 15px; line-height: 24px;
}
.nota .icono { color: var(--brand-600); margin-top: 4px; }
.nota p { margin: 0; }
.nota strong { display: block; margin-bottom: 4px; }
/* «En Muela»: cómo se hace en el producto, con enlace a la sección de la landing. */
.en-muela {
  margin-top: 32px; padding: 20px 24px; border-radius: var(--radius-sheet);
  background: var(--brand-50); border: 1px solid var(--brand-200);
}
.en-muela .rotulo { margin-top: 0; }
.en-muela p { margin-top: 10px; font-size: 16px; line-height: 26px; }
.en-muela .boton { margin-top: 16px; }
.tabla { margin-top: 24px; width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabla th { color: var(--ink); font-weight: 600; background: var(--surface-2); }
.tabla-marco { margin-top: 24px; overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface); }
.tabla-marco .tabla { margin-top: 0; }
figure { margin: 32px 0 0; }
figure .captura { overflow: hidden; border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--shadow-1); }
figure .captura img { width: 100%; height: auto; }
figcaption { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Preguntas */
.faq { margin-top: 40px; border-top: 1px solid var(--shell-line); }
.pregunta { border-bottom: 1px solid var(--shell-line); }
.pregunta summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 4px; list-style: none; cursor: pointer; font-size: 17px; line-height: 26px; font-weight: 600; color: var(--ink); border-radius: var(--radius-control); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary .icono { color: var(--ink-muted); transition: transform var(--dur-base) var(--ease-standard); }
.pregunta[open] summary .icono { transform: rotate(180deg); }
.pregunta p { margin: 0; padding: 0 4px 20px; }

/* Cierre y relacionadas */
.cierre { margin-top: 48px; padding: 32px; border-radius: var(--radius-sheet); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); text-align: center; }
.cierre p { margin-top: 8px; }
.cierre .acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; margin-top: 20px; }
.relacionadas { margin-top: 48px; }
.relacionadas ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.relacionadas a { display: block; padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; transition: border-color var(--dur-fast) var(--ease-standard); }
.relacionadas a:hover { border-color: var(--line-strong); }
.relacionadas small { display: block; margin-top: 4px; font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-secondary); }

/* Índice de guías */
.indice-cabecera { padding: 64px 0 24px; }
.indice-cabecera .bajada { max-width: 640px; }
.guias-grilla { list-style: none; padding: 0; margin: 32px 0 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .guias-grilla { grid-template-columns: 1fr; } }
.guias-grilla li { margin: 0; }
.guia-tarjeta { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease-standard); }
.guia-tarjeta:hover { border-color: var(--line-strong); }
.guia-tarjeta .rotulo { margin: 0; }
.guia-tarjeta h2 { margin: 0; font-size: 20px; line-height: 28px; }
.guia-tarjeta p { margin: 0; font-size: 15px; line-height: 24px; }
.guia-tarjeta .leer { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--brand-700); }

/* Pie */
.pie { padding: 40px 0; border-top: 1px solid var(--shell-line); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.pie .envoltorio { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie a { color: var(--ink-secondary); text-decoration: none; }
.pie a:hover { color: var(--ink); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .boton:active { scale: 1; }
}