/* Devora by Softgic — sistema visual del sitio comercial y la documentación.
 * Los valores provienen literalmente de `estaticos/marca/devora.tokens.json`
 * (paquete de marca v1.3). No se inventa ningún color: si un tono no está en
 * el paquete, no se usa.
 *
 * Reglas medidas que este fichero hace cumplir (ver guias/contraste.json):
 *  - Texto sobre el naranja de acción es CARBÓN (#202124 → 5.56:1). Blanco
 *    sobre naranja da 2.90:1 y NO se usa nunca.
 *  - El naranja NO sirve como color de enlace, de texto pequeño ni de borde
 *    de control por sí solo (2.70:1). Lo interactivo se identifica con
 *    carbón + peso/subrayado, o con relleno naranja y texto carbón.
 *  - El anillo de foco es CARBÓN, no naranja.
 *  - Ni el lienzo ni el melocotón separan de una tarjeta blanca (1.07 / 1.08):
 *    la separación siempre la da un borde.
 */

/* ---------------------------------------------------------------- fuente */
@font-face {
  font-family: 'Inter';
  src: url('fuentes/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --brand-ink: #202124;
  --brand-primary: #EE7623;
  --brand-subtle: #FFF4EB;
  --action-primary: #EE7623;
  --action-hover: #F58A3D;
  --surface-canvas: #F6F7F9;
  --surface-default: #FFFFFF;
  --text-primary: #202124;
  --text-secondary: #555B65;
  --text-on-primary: #202124;
  --border-subtle: #DEE1E6;
  --border-control: #7A808A;
  --success-fg: #137A52;
  --success-bg: #E8F5EE;
  --warning-fg: #8A5700;
  --warning-bg: #FFF4D6;
  --danger-fg: #B42318;
  --danger-bg: #FDEDEB;
  --info-fg: #202124;
  --info-bg: #FFF4EB;

  --font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --control-min-height: 44px;
  --focus-ring: 3px;
  --focus-offset: 2px;
  --duration: 160ms;
  --content-max: 1200px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.75rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* Foco CARBÓN: el naranja no alcanza 3:1 sobre estos fondos. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring) solid var(--brand-ink);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

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

.salto-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface-default); color: var(--text-primary);
  padding: 12px 16px; z-index: 100; border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
}
.salto-contenido:focus { left: 16px; top: 16px; }

.env { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 16px; }

/* --------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-min-height); padding: 10px 20px;
  border-radius: var(--radius-control); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  transition: background-color var(--duration) ease, border-color var(--duration) ease;
}
/* Texto CARBÓN sobre naranja — 5.56:1. Nunca blanco (2.90:1). */
.btn-principal { background: var(--action-primary); color: var(--text-on-primary); border-color: var(--action-primary); }
.btn-principal:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn-secundario { background: var(--surface-default); color: var(--text-primary); border-color: var(--border-control); }
.btn-secundario:hover { background: var(--surface-canvas); }

/* ------------------------------------------------------------- etiquetas */
.etq {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.etq-disponible { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-fg); }
.etq-piloto     { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-fg); }
.etq-info       { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--border-subtle); }

/* ------------------------------------------------------------ cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-subtle);
}
.cabecera .env { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.marca { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.marca img { height: 32px; width: auto; display: block; }
.marca-firma {
  font-size: 12px; color: var(--text-secondary); font-weight: 500;
  margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.nav-princ { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav-princ a { padding: 8px 12px; border-radius: var(--radius-control); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-princ a:hover { background: var(--surface-canvas); text-decoration: underline; }
.nav-princ a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; }
.nav-cta { margin-left: 8px; }

.menu-movil { display: none; }

@media (max-width: 860px) {
  .cabecera .env { flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; min-height: 0; }
  .nav-princ { display: none; width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; }
  .nav-princ.abierto { display: flex; }
  .nav-princ a { padding: 12px; border-radius: var(--radius-control); }
  .nav-cta { margin-left: 0; }
  .menu-movil {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-left: auto; min-height: var(--control-min-height); padding: 8px 14px;
    background: var(--surface-default); color: var(--text-primary);
    border: 1px solid var(--border-control); border-radius: var(--radius-control);
    font: inherit; font-weight: 600; cursor: pointer;
  }
}

/* ---------------------------------------------------------------- secciones */
.seccion { padding: 72px 0; border-bottom: 1px solid var(--border-subtle); }
.seccion-lienzo { background: var(--surface-canvas); }
.seccion-titulo { max-width: 62ch; }
.seccion-titulo p { color: var(--text-secondary); font-size: 1.05rem; }
.rotulo {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 12px;
}

/* -------------------------------------------------------------------- hero */
.hero { padding: 72px 0 64px; background: var(--surface-default); border-bottom: 1px solid var(--border-subtle); }
.hero .env { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero-descripcion { font-size: 1.3rem; line-height: 1.45; margin-bottom: 14px; max-width: 30ch; }
.hero-diferencial { font-size: 1.05rem; font-weight: 700; margin-bottom: 16px; }
.hero-texto { font-size: 1.05rem; color: var(--text-secondary); max-width: 54ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-nota { margin-top: 20px; font-size: 14px; color: var(--text-secondary); }

.captura {
  margin: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  overflow: hidden; background: var(--surface-default);
  box-shadow: 0 1px 2px rgba(32, 33, 36, 0.06), 0 10px 28px rgba(32, 33, 36, 0.08);
}
.captura img { display: block; width: 100%; }
.captura-ancha { margin-top: 36px; }
.captura figcaption { padding: 10px 14px; font-size: 13px; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); background: var(--surface-canvas); }

@media (max-width: 900px) {
  .hero .env { grid-template-columns: 1fr; gap: 36px; }
  .seccion, .hero { padding: 48px 0; }
}

/* ------------------------------------------------------------------ rejilla */
.rejilla { display: grid; gap: 20px; margin-top: 36px; }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rejilla-pares { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 880px) { .rejilla-pares { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tarjeta {
  background: var(--surface-default);
  border: 1px solid var(--border-subtle);   /* el borde separa: el lienzo no */
  border-radius: var(--radius-card);
  padding: 24px;
}
.tarjeta h3 { margin-bottom: 8px; }
.tarjeta p { color: var(--text-secondary); margin-bottom: 0; }
.tarjeta p + p { margin-top: 12px; }
.tarjeta-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tarjeta-cab h3 { margin: 0; }

/* -------------------------------------------------------------- recorrido */

/* ------------------------------------------------------------------- caso */
.cita {
  margin: 24px 0 0; padding: 20px 24px;
  background: var(--warning-bg); border: 1px solid var(--warning-fg);
  border-radius: var(--radius-card); color: var(--text-primary);
}
.cita p { margin: 0; font-weight: 500; }
.cita cite { display: block; margin-top: 10px; font-size: 13px; font-style: normal; color: var(--warning-fg); font-weight: 600; }

/* -------------------------------------------------------------------- faq */
.faq { margin-top: 32px; display: grid; gap: 12px; }
.faq details { background: var(--surface-default); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); }
.faq summary {
  cursor: pointer; padding: 18px 24px; font-weight: 600; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--control-min-height);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; font-weight: 400; color: var(--text-secondary); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq .faq-cuerpo { padding: 0 24px 20px; color: var(--text-secondary); }
.faq .faq-cuerpo > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ cierre */
.cierre { background: var(--brand-subtle); padding: 72px 0; border-bottom: 1px solid var(--border-subtle); }
.cierre .env { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.cierre h2 { margin-bottom: 8px; }
.cierre p { color: var(--text-secondary); margin-bottom: 0; max-width: 56ch; }
.cierre-mascota { width: 200px; height: auto; justify-self: end; }
@media (max-width: 780px) {
  .cierre .env { grid-template-columns: 1fr; }
  .cierre-mascota { width: 140px; justify-self: start; }
}

/* ------------------------------------------------------- demo (pendiente) */
.demo { padding: 72px 0; }
.demo-caja h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin-bottom: 16px; }
.demo-caja {
  max-width: 720px; margin: 0 auto;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--surface-default); padding: 32px;
}
.aviso {
  border: 1px solid var(--warning-fg); background: var(--warning-bg);
  border-radius: var(--radius-card); padding: 20px 24px; margin: 24px 0;
}
.aviso p:last-child { margin-bottom: 0; }
.aviso .rotulo { color: var(--warning-fg); }

/* ------------------------------------------------------------------- pie */
.pie { background: var(--surface-canvas); padding: 48px 0 32px; font-size: 14px; }
.pie .env { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.pie h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie-legal { border-top: 1px solid var(--border-subtle); margin-top: 32px; padding-top: 20px; color: var(--text-secondary); }
.pie-legal .env { display: block; }
.pie-legal p { margin: 0 0 6px; }

/* ==================================================== DOCUMENTACIÓN ===== */
.docs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; padding: 40px 0 72px; }
.docs-lateral { position: sticky; top: 96px; min-width: 0; }
.docs-lateral h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 12px; }
.docs-lateral ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 2px; }
.docs-lateral a { display: block; padding: 8px 12px; border-radius: var(--radius-control); text-decoration: none; font-size: 15px; }
.docs-lateral a:hover { background: var(--surface-canvas); text-decoration: underline; }
.docs-lateral a[aria-current="page"] { background: var(--brand-subtle); font-weight: 700; }

.docs-cuerpo { max-width: 74ch; min-width: 0; }
.docs-cuerpo h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700; margin-bottom: 20px; }
.docs-cuerpo h2 { margin-top: 2em; scroll-margin-top: 96px; }
.docs-cuerpo h3 { margin-top: 1.6em; scroll-margin-top: 96px; }
.docs-cuerpo h2:first-child, .docs-cuerpo h3:first-child { margin-top: 0; }
.docs-cuerpo ul, .docs-cuerpo ol { padding-left: 1.4em; margin: 0 0 1rem; }
.docs-cuerpo li { margin-bottom: 6px; }
.docs-cuerpo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em; background: var(--surface-canvas);
  border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 5px;
}
.docs-cuerpo pre {
  background: var(--surface-canvas); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: 16px 20px; overflow-x: auto; margin: 0 0 1rem;
}
.docs-cuerpo pre code { background: none; border: 0; padding: 0; font-size: 14px; }
.docs-cuerpo blockquote {
  margin: 0 0 1rem; padding: 16px 20px;
  background: var(--brand-subtle); border-left: 3px solid var(--action-primary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.docs-cuerpo blockquote > :last-child { margin-bottom: 0; }
.tabla-env { overflow-x: auto; margin: 0 0 1.5rem; -webkit-overflow-scrolling: touch; }
.tabla-env:focus-visible { outline: var(--focus-ring) solid var(--brand-ink); outline-offset: var(--focus-offset); }
.docs-cuerpo table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; }
.docs-cuerpo th, .docs-cuerpo td { border: 1px solid var(--border-subtle); padding: 10px 14px; text-align: left; vertical-align: top; }
.docs-cuerpo th { background: var(--surface-canvas); font-weight: 600; }

.docs-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 28px; padding: 16px 20px;
  background: var(--surface-canvas); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); font-size: 14px; color: var(--text-secondary);
}
.docs-meta strong { color: var(--text-primary); font-weight: 600; }

.docs-sig { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-subtle); }
.docs-sig .rotulo { margin-bottom: 8px; }

.migas { font-size: 14px; color: var(--text-secondary); margin: 0 0 20px; }
.migas a { color: var(--text-secondary); }

/* buscador */
.buscador { margin-bottom: 24px; }
.buscador input {
  width: 100%; min-height: var(--control-min-height); padding: 10px 14px;
  font: inherit; color: var(--text-primary); background: var(--surface-default);
  border: 1px solid var(--border-control); border-radius: var(--radius-control);
}
.buscador input::placeholder { color: var(--text-secondary); }
#busqueda-resultados { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
#busqueda-resultados li a { display: block; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); text-decoration: none; background: var(--surface-default); }
#busqueda-resultados li a:hover { background: var(--surface-canvas); text-decoration: underline; }
#busqueda-resultados .res-desc { display: block; font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.busqueda-vacia { margin: 12px 0 0; padding: 16px; border: 1px dashed var(--border-control); border-radius: var(--radius-card); color: var(--text-secondary); font-size: 14px; }

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .docs-lateral { position: static; border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; }
}

/* ------------------------------------------------------------------ util */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-marcas { margin: 16px 0 0; padding-left: 1.2em; color: var(--text-secondary); }
.lista-marcas li { margin-bottom: 8px; }


/* =============================================== secciones reescritas === */
.seccion-enlace { margin: 28px 0 0; font-weight: 600; }

/* el control que se activó, dentro del caso */
.caso-control {
  margin-top: 28px; padding: 28px;
  background: var(--surface-default); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.caso-control > p { color: var(--text-secondary); }
.caso-control .rotulo { color: var(--warning-fg); }
.caso-cierre { margin: 24px 0 0; font-weight: 500; color: var(--text-primary) !important; }

/* disponibilidad: lo listo y lo que no, sin rodeos */
.lista-chequeo { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-chequeo li { position: relative; padding-left: 28px; color: var(--text-secondary); }
.lista-chequeo li::before {
  content: '✓'; position: absolute; left: 0; top: -1px;
  font-weight: 700; color: var(--success-fg);
}
.lista-chequeo-pend li::before { content: '·'; font-size: 1.6em; line-height: 0.8; color: var(--text-secondary); }
.tarjeta-listo { border-color: var(--success-fg); }
.tarjeta .lista-chequeo + p { margin-top: 16px; font-size: 14px; }

/* recorrer el producto */
.demo-entrada { font-size: 1.1rem; color: var(--text-secondary); }
.demo-caja h2 { font-size: 1.25rem; margin-top: 36px; }
.demo-pasos { list-style: none; counter-reset: dp; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.demo-pasos li { counter-increment: dp; }
.demo-pasos a {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 16px 18px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); text-decoration: none; background: var(--surface-default);
}
.demo-pasos a::before {
  content: counter(dp); display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--brand-subtle); color: var(--text-primary);
  font-weight: 700; font-size: 14px;
}
.demo-pasos a:hover { background: var(--surface-canvas); }
.demo-pasos a strong { display: block; text-decoration: underline; text-underline-offset: 3px; }
.demo-pasos a span { display: block; color: var(--text-secondary); font-size: 15px; margin-top: 2px; }

/* buscador: el fallo de carga NO se confunde con «sin coincidencias» */
.busqueda-aviso { margin: 12px 0 0; font-size: 14px; }
.busqueda-cargando { color: var(--text-secondary); padding: 8px 2px; }
.busqueda-vacia {
  padding: 16px; border: 1px dashed var(--border-control);
  border-radius: var(--radius-card); color: var(--text-secondary);
}
.busqueda-error {
  padding: 16px; border: 1px solid var(--danger-fg); background: var(--danger-bg);
  border-radius: var(--radius-card); color: var(--text-primary);
}
.busqueda-error p { margin: 0 0 12px; }
.btn-reintentar { min-height: 38px; padding: 6px 16px; font-size: 14px; }


/* ================================================== PASADA VISUAL ====== */

/* --- hero: menos texto, el producto antes -------------------------------- */
.hero .env { align-items: center; }
.hero-descripcion { font-size: 1.3rem; line-height: 1.4; margin-bottom: 10px; max-width: 26ch; }
.hero-diferencial { margin-bottom: 26px; }
.hero-nota { margin-top: 18px; }

/* --- captura ampliable --------------------------------------------------- */
.captura-zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; font: inherit; line-height: 0;
}
.captura-zoom img { display: block; width: 100%; }
.captura-lupa {
  position: absolute; right: 10px; bottom: 10px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--brand-ink); color: var(--surface-default);
  font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: 0.02em;
}
.captura-zoom:hover .captura-lupa { background: var(--text-secondary); }

.visor {
  width: min(96vw, 1200px); max-width: none; max-height: 92vh;
  padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--surface-default); color: var(--text-primary); overflow: auto;
}
.visor::backdrop { background: rgba(32, 33, 36, 0.62); }
.visor-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; }
.visor-barra form { display: contents; }
.visor-escala {
  min-height: 40px; padding: 8px 18px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--surface-default); color: var(--text-primary);
  border: 1px solid var(--border-control); border-radius: var(--radius-control);
}
.visor-escala:hover { background: var(--surface-canvas); }

/* Por defecto la captura va a TAMAÑO REAL dentro de un lienzo desplazable:
   ampliar tiene que hacer el texto más grande, no más pequeño. Encogerla
   para que quepa entera es justo lo contrario de lo que pide quien amplía.
   El lienzo es enfocable para poder recorrerlo con las flechas. */
.visor-lienzo { overflow: auto; max-height: 72vh; -webkit-overflow-scrolling: touch; }
.visor-lienzo img { display: block; width: auto; max-width: none; height: auto; }
.visor-lienzo:focus-visible { outline: var(--focus-ring) solid var(--brand-ink); outline-offset: -3px; }

/* «Ajustar a la pantalla»: la vista de conjunto, bajo demanda. */
.visor.ajustada .visor-lienzo { overflow: hidden; }
.visor.ajustada .visor-lienzo img { width: 100%; }
.visor-cerrar {
  min-height: 40px; padding: 8px 18px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--surface-default); color: var(--text-primary);
  border: 1px solid var(--border-control); border-radius: var(--radius-control);
}
.visor-cerrar:hover { background: var(--surface-canvas); }
.visor-pie { margin: 0; padding: 12px 18px 18px; font-size: 14px; color: var(--text-secondary); }

/* --- problema: tres preguntas, sin caja ---------------------------------- */
.preguntas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: 36px; }
.pregunta { border-top: 2px solid var(--brand-primary); padding-top: 16px; }
.pregunta h3 { font-size: 1.1rem; margin-bottom: 6px; }
.pregunta p { color: var(--text-secondary); margin: 0; }

/* --- recorrido: cuatro hitos en línea ------------------------------------ */
.hitos {
  list-style: none; counter-reset: hito; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
.hito { counter-increment: hito; position: relative; padding: 0 20px 0 0; }
.hito::before {
  counter-increment: none; content: counter(hito);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: 14px; border-radius: var(--radius-pill);
  background: var(--action-primary); color: var(--text-on-primary);
  font-weight: 700; font-size: 15px; position: relative; z-index: 1;
}
/* el hilo que une los hitos: es un recorrido, no cuatro cosas sueltas */
.hito::after {
  content: ''; position: absolute; left: 36px; top: 18px; right: 0; height: 2px;
  background: var(--border-subtle);
}
.hito:last-child::after { display: none; }
.hito-titulo { font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; }
.hito-texto { color: var(--text-secondary); font-size: 15px; margin: 0 0 12px; }
.hito-obtienes {
  margin: 0; padding: 8px 12px; border-radius: var(--radius-control);
  background: var(--brand-subtle); font-size: 14px; font-weight: 600;
}
@media (max-width: 900px) {
  .hitos { grid-template-columns: 1fr; gap: 28px; }
  .hito { padding: 0 0 0 52px; }
  .hito::before { position: absolute; left: 0; top: 0; margin: 0; }
  .hito::after { left: 17px; top: 36px; right: auto; bottom: -28px; width: 2px; height: auto; }
}

/* --- comprobación: los puntos y la prueba, juntos ------------------------ */
.comprobacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; margin-top: 36px; }
.puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.puntos li { padding-left: 20px; border-left: 2px solid var(--brand-primary); }
.puntos h3 { font-size: 1.05rem; margin-bottom: 4px; }
.puntos p { color: var(--text-secondary); margin: 0; font-size: 15px; }
.comprobacion-prueba .seccion-enlace { margin-top: 20px; font-size: 15px; }
@media (max-width: 900px) {
  .comprobacion { grid-template-columns: 1fr; gap: 32px; }
}

/* --- caso: las tres cifras de la definición ------------------------------ */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 36px; }
.cifra { background: var(--surface-default); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: 24px; }
.cifra-dato { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin: 0 0 6px; }
.cifra-unidad { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; }
.cifra-nota { font-size: 14px; color: var(--text-secondary); margin: 0; }

/* --- documentación: el lateral se pliega SÓLO en móvil ------------------- */
/* En escritorio el <summary> no se ve y el índice queda plano, exactamente
   como antes de esta pasada. */
.docs-plegable > summary { display: none; }
.docs-plegable-cuerpo > h4:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .docs-plegable {
    border: 1px solid var(--border-subtle); border-radius: var(--radius-control);
    margin-bottom: 8px; background: var(--surface-default);
  }
  .docs-plegable > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: var(--control-min-height); padding: 10px 16px;
    font-weight: 600; cursor: pointer; list-style: none;
  }
  .docs-plegable > summary::-webkit-details-marker { display: none; }
  .docs-plegable > summary::after {
    content: '+'; font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--text-secondary);
  }
  .docs-plegable[open] > summary::after { content: '−'; }
  .docs-plegable[open] > summary { border-bottom: 1px solid var(--border-subtle); }
  .docs-plegable-cuerpo { padding: 12px 16px 14px; }
  .docs-plegable-cuerpo ul { margin-bottom: 12px; }
  .docs-plegable-cuerpo > :last-child { margin-bottom: 0; }
  .docs-lateral { border-bottom: 0; padding-bottom: 0; }
  .docs-lateral h4 { margin-top: 14px; }
}

/* --- hero en móvil: la interfaz antes que el resto del texto ------------- */
@media (max-width: 900px) {
  .hero .env { display: flex; flex-direction: column; gap: 28px; }
  .hero-texto-col { display: contents; }
  .hero .rotulo { order: 1; margin-bottom: 0; }
  .hero h1 { order: 2; margin-bottom: 0; }
  .hero-descripcion { order: 3; max-width: none; margin-bottom: 0; }
  .hero-figura-col { order: 4; }
  .hero-diferencial { order: 5; margin-bottom: 0; }
  .hero-acciones { order: 6; margin-top: 0; }
  .hero-nota { order: 7; margin: 0; }
}

@media (max-width: 480px) {
  /* el rótulo dejaba «IA» sola en la segunda línea */
  .hero .rotulo { letter-spacing: 0.06em; font-size: 11px; }
}