/* =============================================================
   REPONIVA — guías de recuperación y bienestar en casa
   Hoja de estilos única, organizada por secciones (ver 01-stack-and-conventions).
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* --bg/--bg-alt originales (#faf7f1 / #f2ede2) eran justo la paleta
     "papel cálido / crema" que design-taste-frontend marca como cliché por
     defecto de IA para marcas premium — #faf7f1 coincidía literalmente con
     uno de sus tonos prohibidos. Retinte en azul frío, atado al --brand
     cobalto de abajo. Luminosidad similar o mayor que el original: el
     contraste de --ink/--ink-soft/--muted se mantiene igual o mejora. */
  --bg:        #f5f6fa;
  --bg-alt:    #e9edf9;
  --surface:   #ffffff;
  --ink:       #1e2422;
  --ink-soft:  #4a5350;
  /* Etapa 4B (A11Y-06): oscurecido de #7c8480 a #5f6662, mismo tono grisáceo
     — el valor anterior medía 3.59:1/3.84:1/3.29:1 sobre --bg/--surface/
     --bg-alt (por debajo del 4.5:1 de WCAG 2.2 SC 1.4.3 para texto normal
     en los tamaños reales donde se usa: breadcrumbs, comparador-vacio,
     etc.). Este valor mide 5.51:1/5.89:1/5.05:1 sobre los mismos tres
     fondos — cálculo en AUDITORIA-TECNICA-REPONIVA.md. Se cambia el token
     global (no una clase específica) porque los 12 usos actuales de
     --muted en esta hoja son todos texto que se lee, no decorativo. */
  --muted:     #5f6662;
  --line:      #dbe1ee;

  /* Rediseño de marca (2026-09-17): verde bosque + coral sustituidos por
     cobalto + ámbar — precedente real en la propia categoría (Therabody y
     Hyperice ya usan azul en su identidad de recuperación). --accent-dark
     recalculado desde cero para este color (no heredado del cálculo del
     coral): #b8730f solo daba 3.82:1 sobre blanco, por debajo del 4.5:1
     exigido en .btn-primary — el mismo tipo de fallo que ya se corrigió una
     vez para el coral (ver histórico A11Y-07 más abajo). #975e11 da 5.35:1
     sobre blanco y 4.53:1 sobre --accent-light, cumple en ambos usos reales. */
  --brand:        #2451c4;   /* cobalto — recuperación/deportivo */
  --brand-dark:   #16327d;
  --brand-light:  #e7ecfb;
  --accent:       #e69426;   /* ámbar cálido — contraste sobre el azul */
  --accent-dark:  #975e11;
  --accent-darker: #7a4b0d;
  --accent-light: #fbead0;
  --gold:         #c9a15a;   /* detalles premium */

  --ok:    #2f7a4d;
  --warn:  #b8862c;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 3px rgba(14, 22, 40, .08);
  --shadow: 0 10px 30px -12px rgba(14, 26, 46, .2);
  --shadow-lg: 0 24px 60px -20px rgba(14, 26, 46, .3);

  /* Fraunces/Inter sustituidos por Bodoni Moda (alto contraste, editorial) +
     Outfit — Fraunces e Instrument Serif son, según nuestra propia guía de
     diseño (design-taste-frontend), las dos serifs de display "favoritas de
     la IA" que hay que evitar por defecto; Inter tiene el mismo problema
     como sans por defecto. Autoalojadas en assets/fonts/ (ver @font-face
     más abajo), nunca vía <link> a Google Fonts. */
  --serif: "Bodoni Moda", "Iowan Old Style", Georgia, serif;
  --sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --container: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.4rem);
}

/* =============================================================
   1b. Fuentes autoalojadas (Bodoni Moda + Outfit)
   ============================================================= */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/BodoniModa-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/BodoniModa-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/BodoniModa-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/BodoniModa-500-italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/Outfit-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/Outfit-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/Outfit-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/Outfit-800-normal.woff2) format('woff2');
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--serif); text-wrap: balance; line-height: 1.1; letter-spacing: -0.01em; color: var(--brand-dark); }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--accent-light); color: var(--accent-dark); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* =============================================================
   3. Utilidades
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--brand-dark); color: #fff;
  z-index: 9999; border-radius: 8px; font-weight: 600;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.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;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 62ch; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.section-head .eyebrow { display: block; margin-bottom: .5rem; }
.section-head p { color: var(--ink-soft); margin-top: .6rem; }

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-dark);
}

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700; padding: .3rem .7rem;
  border-radius: 999px; background: var(--brand-light); color: var(--brand-dark);
}
.badge.badge-warn { background: #fff3da; color: var(--warn); }
.badge.badge-sample { background: #fde3d3; color: var(--accent-dark); }
.badge.badge-market { background: var(--brand-light); color: var(--brand-dark); font-size: .7rem; }
.badge.badge-glass {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

/* Simplificado (2026-09-12): la animación de aparición al hacer scroll se
   retira por completo en vez de condicionarla — más robusto que un
   mecanismo de recuperación. .reveal es contenido normal, siempre visible,
   sin ninguna dependencia de JavaScript ni de una clase añadida en tiempo
   de ejecución. La clase se conserva en el HTML generado (sin efecto) para
   no tocar el generador solo por esto. */
.reveal { opacity: 1; transform: none; }

/* Aparición al hacer scroll, 100% CSS (animation-timeline: view()) —
   añadida 2026-09-17, deliberadamente sin JavaScript, así que NO reintroduce
   el fallo de fiabilidad descrito arriba (aquel dependía de una clase
   añadida en tiempo de ejecución). @supports actúa como guarda: en
   navegadores sin esta función la regla no aplica y el contenido se queda
   exactamente en el estado de la regla .reveal de arriba (visible, sin
   dependencias). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    @keyframes reveal-in {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* =============================================================
   4. Tipografía
   ============================================================= */
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); letter-spacing: -0.02em; }
h1 em { font-style: italic; font-weight: 500; color: var(--accent); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 60ch; }

/* =============================================================
   5. Componentes
   ============================================================= */

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .96rem;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
  white-space: nowrap;
}
/* Etapa 4B (A11Y-07): fondo normal pasado de --accent (3.69:1 con blanco,
   por debajo del 4.5:1 exigido a este tamaño/peso) a --accent-dark
   (5.38:1) — no se toca --accent en sí. El estado :hover pasa a
   --accent-darker (7.17:1) para que siga habiendo una transición visible
   entre ambos estados. Cálculo completo en AUDITORIA-TECNICA-REPONIVA.md. */
.btn-primary { background: var(--accent-dark); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-darker); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-secondary { background: var(--brand); color: #fff; }
.btn-secondary:hover { background: var(--brand-dark); transform: translateY(-2px); }
.btn-ghost { background: var(--surface); color: var(--brand-dark); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--brand); }
.btn-ghost-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-block { width: 100%; }
.btn-sm { padding: .55rem 1.05rem; font-size: .85rem; }
.btn[disabled], .btn.is-disabled, .btn.btn-disabled { opacity: .55; pointer-events: none; cursor: not-allowed; }

/* Nav */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 241, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }

/* Etapa 4B: reproducido en navegador real que, tras activar "Saltar al
   contenido", la cabecera --position:sticky, ~61-70px de alto según
   viewport-- queda por encima de #main y tapa su primer contenido visible
   en páginas sin imagen de héroe (las migas de pan quedaban parcialmente
   ocultas: comprobado con getBoundingClientRect, no solo con el
   desplazamiento de scrollY). scroll-margin-top no cambia el layout
   normal, solo el punto de destino al saltar por ancla o por foco. */
#main { scroll-margin-top: 5rem; }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--brand-dark); }
.brand .brand-dot { width: .55em; height: .55em; border-radius: 50%; background: var(--accent); display: inline-block; }

.nav-toggle { display: none; padding: .5rem; }
.nav-toggle .bar { display: block; width: 24px; height: 2px; background: var(--brand-dark); margin: 5px 0; border-radius: 2px; }

.market-switch { display: flex; gap: .3rem; background: var(--bg-alt); border-radius: 999px; padding: .25rem; }
.market-switch button {
  border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; font-weight: 700;
  color: var(--ink-soft); transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.market-switch button[aria-pressed="true"] { background: var(--brand); color: #fff; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.nav-links a { font-weight: 600; font-size: .92rem; color: var(--ink-soft); transition: color .2s var(--ease-out); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--brand-dark); }
.nav-links a.nav-cta, .nav-links a.nav-cta:hover {
  background: var(--brand); color: #fff; padding: .55rem 1.1rem; border-radius: 999px;
}

/* Simplificado (2026-09-12): por defecto (sin JS incluido) el nav móvil es
   una lista normal, siempre visible, en flujo — el botón de hamburguesa
   permanece oculto (regla global .nav-toggle{display:none} de arriba) y no
   hace falta ningún <noscript> ni mecanismo de recuperación: no hay nada
   que "recuperar" porque nunca se ocultó nada. Ya no depende de
   position:fixed + una altura "auto" derivada de inset, que en la
   comprobación de teclado del 2026-09-12 resultó no estirarse al alto
   disponible en este motor (se quedaba en la altura de una sola fila) y,
   combinado con overflow-y:auto, activaba overflow-x:auto también (regla
   CSS: si un eje es "auto" y el otro "visible", el "visible" pasa a
   "auto") — eso producía una barra de scroll horizontal real bajo la
   cabecera, con el contenido del menú desbordando cientos de píxeles a la
   derecha. */
@media (max-width: 959px) {
  .nav-links { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 0; padding-block: .5rem; }
  .nav-links a { width: 100%; padding: .75rem 0; border-bottom: 1px solid var(--line); }
}

/* Desplegable "Productos" de la cabecera (ronda v6). Por defecto (sin JS)
   el submenú va siempre visible, en flujo, bajo el botón — mismo criterio
   "todo visible por defecto" que el nav móvil de arriba: nunca depende de
   JavaScript para poder navegar a una categoría. Solo con
   html.js-nav-dropdown (añadida al FINAL de initNavDropdowns(), después de
   instalar todos los manejadores — ver main.js) el submenú se pliega
   detrás del botón, con position:absolute en escritorio y en flujo
   (acordeón) en móvil, para no desbordar la pantalla. */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: .35em;
  font-weight: 600; font-size: .92rem; color: var(--ink-soft);
  transition: color .2s var(--ease-out);
}
.nav-dropdown-trigger:hover, .nav-dropdown-trigger.is-active-section { color: var(--brand-dark); }
.nav-dropdown-caret { font-size: .7em; line-height: 1; }
.nav-dropdown-menu { display: flex; flex-direction: column; gap: .1rem; }
.nav-dropdown-menu a { font-weight: 600; font-size: .92rem; padding-left: 1.1rem; }

@media (min-width: 960px) {
  html.js-nav-dropdown .nav-dropdown-menu {
    display: none;
    position: absolute; top: calc(100% + .6rem); left: 0; min-width: 250px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .5rem; z-index: 120;
  }
  html.js-nav-dropdown .nav-dropdown-menu.is-open { display: flex; }
  html.js-nav-dropdown .nav-dropdown-menu a { padding: .6rem .75rem; border-radius: var(--radius-sm); }
  html.js-nav-dropdown .nav-dropdown-menu a:hover, html.js-nav-dropdown .nav-dropdown-menu a:focus-visible { background: var(--bg-alt); }
}

@media (max-width: 959px) {
  .nav-dropdown { width: 100%; }
  .nav-dropdown-trigger { width: 100%; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .nav-dropdown-menu a { border-bottom: 1px solid var(--line); padding-block: .65rem; }
  html.js-nav-dropdown .nav-dropdown-menu { display: none; }
  html.js-nav-dropdown .nav-dropdown-menu.is-open { display: flex; }
}

/* Solo una vez que main.js ha instalado los manejadores del botón (clase
   añadida al FINAL de initNav(), después de adjuntar ambos listeners —
   así, si algo falla a mitad de la instalación, el nav se queda en su
   estado por defecto en vez de plegado detrás de un botón inservible), el
   nav pasa a plegarse detrás del botón. Si JavaScript no llega a
   ejecutarse, esta clase nunca existe y el nav se queda en su estado por
   defecto de arriba: visible, en flujo, sin botón. */
@media (max-width: 959px) {
  html.js-nav .nav-toggle { display: block; }
  html.js-nav .nav-links {
    position: fixed; top: 64px; right: 0; bottom: 0; left: 0; background: var(--bg);
    /* Altura explícita en vez de depender de que "auto" se estire con los
       insets opuestos — es justo lo que falló arriba. overflow-x: hidden
       de más, por si acaso, para que un futuro desbordamiento del
       contenido nunca vuelva a producir una barra horizontal. */
    height: calc(100vh - 64px);
    padding: 1.5rem var(--gutter);
    transform: translateY(-8px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
    overflow-y: auto; overflow-x: hidden;
  }
  html.js-nav .nav-links.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
}

/* Tarjetas de producto */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-alt); }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
/* Fichas de producto documental/comercial: fotografía real de producto
   sobre fondo blanco (ver imagen_provenance) — se muestra COMPLETA, nunca
   recortada por el encaje 4:3 de la tarjeta, a diferencia de las miniaturas
   editoriales genéricas de arriba, pensadas para recortarse con "cover". */
.ficha-doc-card .card-img-wrap,
.ficha-com-card .card-img-wrap { background: #fff; }
.ficha-doc-card .card-img-wrap img,
.ficha-com-card .card-img-wrap img { object-fit: contain; }
/* La foto real de producto es un enlace a su ficha (mismo destino que el
   título), hermano del enlace del título — nunca anidado. Ocupa todo el
   hueco de la imagen para que el área clicable/con foco coincida con la
   foto. outline-offset negativo porque .card recorta con overflow:hidden:
   sin esto, el anillo de foco del borde superior/laterales quedaría
   cortado por las esquinas redondeadas de la tarjeta. */
.card-img-link { display: block; width: 100%; height: 100%; }
.card-img-link:focus-visible { outline-offset: -3px; }
.card-badges { position: absolute; top: .7rem; left: .7rem; right: .7rem; display: flex; justify-content: space-between; gap: .4rem; flex-wrap: wrap; pointer-events: none; }
.card-body { padding: 1.15rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
/* Tarjeta compacta sin imagen autorizada (24/09/2026, ver
   ficha_documental_card()/ficha_comercial_card()): sin .card-img-wrap, así
   que nunca reserva el rectángulo 4:3 vacío — el cuerpo ocupa toda la
   tarjeta, con el mismo borde/sombra/radio que una tarjeta con foto, para
   no sugerir que un modelo con foto es "mejor". */
.card-marca-compacta { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0; }
.card-caracteristicas-compactas { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; color: var(--ink-soft); }
.card-caracteristicas-compactas strong { color: var(--ink); }
/* Las tarjetas comerciales (con imagen o sin ella, 24/09/2026) llevan
   siempre 3 acciones (precio/ver ficha/añadir al comparador) — con
   flex:1 heredado de .card-actions se estrujarían en una fila; aquí se
   permite pasar a una segunda línea con su ancho natural en vez de
   encogerse. .ficha-com-card cubre ambas variantes porque la compacta
   (sin imagen) también lleva la clase base .ficha-com-card. */
.ficha-com-card .card-actions,
.ficha-doc-card-compacta .card-actions { flex-wrap: wrap; }
.ficha-com-card .card-actions .btn,
.ficha-doc-card-compacta .card-actions .btn { flex: 0 1 auto; }
.card-cat { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-dark); }
.card-title { font-size: 1.08rem; line-height: 1.25; }
.card-title a { color: var(--brand-dark); }
.card-rating { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-soft); }
.stars { color: var(--gold); letter-spacing: .05em; }
.card-demo-note { margin-top: auto; font-size: .82rem; font-style: italic; color: var(--muted); }
.card-price { margin-top: auto; display: flex; align-items: baseline; gap: .55rem; }
.price-now { font-size: 1.25rem; font-weight: 800; color: var(--brand-dark); }
.price-before { font-size: .9rem; color: var(--muted); text-decoration: line-through; }
.card-actions { display: flex; gap: .6rem; margin-top: .3rem; }
.card-actions .btn { flex: 1; }

.grid { display: grid; gap: 1.4rem; }
.grid-products { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1279px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 959px)  { .grid-products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 539px)  { .grid-products { grid-template-columns: 1fr; } }

/* Tarjetas de categoría */
.grid-categorias { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 959px) { .grid-categorias { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 539px) { .grid-categorias { grid-template-columns: 1fr; } }
.cat-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/2; box-shadow: var(--shadow-sm); }
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.cat-card:hover img { transform: scale(1.06); }
.cat-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,22,40,0) 30%, rgba(10,18,36,.72)); }
.cat-card-label { position: absolute; left: 1.1rem; bottom: 1rem; right: 1.1rem; z-index: 2; color: #fff; }
.cat-card-label strong { display: block; font-family: var(--serif); font-size: 1.2rem; }
.cat-card-label span { font-size: .82rem; opacity: .85; }
.cat-card.is-soon::before { content: "Próximamente"; position: absolute; top: .8rem; right: .8rem; z-index: 3; background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px; }

/* Variante sin imagen (enlaces de guías en portada y en "Guías relacionadas"
   de los hubs): el degradado de .cat-card::after asume una foto detrás: sin
   ella, la parte superior de la tarjeta queda casi transparente y el título
   blanco pierde contraste contra el fondo claro de la página — defecto real
   confirmado visualmente. Solución mínima: fondo uniforme claro y texto
   oscuro en vez de depender del degradado; sin altura de imagen forzada.
   Contraste comprobado (fórmula WCAG, texto normal) — recalculado
   2026-09-17 tras el cambio de --brand-light/--accent-light a cobalto/
   ámbar, no heredado de los valores del verde/coral anterior:
     título  (--brand-dark sobre --brand-light):  9.96:1 (AAA)
     descripción (--ink-soft sobre --brand-light): 6.73:1 (AA, cerca de AAA)
     título en :hover (--brand-dark sobre --accent-light): 9.95:1 (AAA)
   El foco visible lo sigue dando la regla global :focus-visible, sin cambios. */
.cat-card-flat { aspect-ratio: auto; background: var(--brand-light); padding: 1.3rem 1.2rem; transition: background .2s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.cat-card-flat::after { content: none; }
.cat-card-flat:hover, .cat-card-flat:focus-visible { background: var(--accent-light); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.cat-card-flat .cat-card-label { position: static; color: var(--brand-dark); }
.cat-card-flat .cat-card-label span { color: var(--ink-soft); opacity: 1; }

/* Cuadrícula bento de categorías (portada): dos tarjetas fotográficas
   asimétricas arriba + banner ancho debajo, en vez de N tarjetas idénticas
   (patrón de "misma tarjeta repetida" desaconsejado por design-taste-
   frontend — plantilla perezosa, sin jerarquía). */
.grid-bento-cats { display: grid; grid-template-columns: 7fr 5fr; gap: 1.4rem; }
.cat-span-a, .cat-span-b { aspect-ratio: 4/3; }
.cat-span-full { grid-column: 1 / -1; aspect-ratio: 21/8; }
@media (max-width: 767px) { .grid-bento-cats { grid-template-columns: 1fr; } .cat-span-a, .cat-span-b { aspect-ratio: 3/2; } .cat-span-full { aspect-ratio: 4/3; } }

/* Clusters de guías agrupadas por categoría (evita el "muro de 11 tarjetas
   idénticas" — grouped chunks en vez de una lista larga sin estructura). */
.guia-cluster { margin-top: clamp(2rem, 4vw, 2.8rem); }
.guia-cluster:first-of-type { margin-top: 0; }
.guia-cluster-head {
  font-family: var(--sans); font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--brand);
  margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.guia-cluster-head-img { display: flex; align-items: center; gap: .6rem; }
.guia-cluster-icon {
  width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--line);
}
/* El "sangrado" (padding + margen negativo a juego) nunca debe superar el
   propio gutter del .container que lo envuelve -- si lo superase, el fondo
   sobresaldría del viewport y produciría desbordamiento horizontal real
   (medido: 375px de ancho, clamp(1.2rem,3vw,1.8rem) tocaba su mínimo de
   1.2rem mientras --gutter tocaba el suyo, 1.1rem, más estrecho -- 2px de
   scrollWidth de más). min() lo acota a lo que el contenedor puede
   absorber, sin cambiar nada en los anchos donde ya cabía. */
.guia-cluster-tint {
  --tint-bleed: min(clamp(1.2rem, 3vw, 1.8rem), var(--gutter));
  background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--tint-bleed); margin-inline: calc(-1 * var(--tint-bleed));
}
.guia-cluster-tint .guia-cluster-head { border-bottom-color: transparent; }
.grid-categorias-1 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.grid-categorias-2 { grid-template-columns: repeat(2, 1fr); }
.grid-categorias-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .grid-categorias-2, .grid-categorias-3 { grid-template-columns: 1fr; } }

/* Identidad visual de herramientas (27/09/2026, ver tool_badge_html() en
   tools/build_site.py): guías / asistentes interactivos / comparadores,
   cada uno con su icono + fondo/borde propios — nunca solo por color. */
.tool-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px; border: 1px solid; line-height: 1;
}
.tool-badge-icon { width: 14px; height: 14px; flex: none; }
.tool-badge-guia { color: var(--ink-soft); background: var(--bg-alt); border-color: var(--line); }
.tool-badge-asistente { color: var(--accent-dark); background: var(--accent-light); border-color: var(--accent); }
.tool-badge-comparador { color: var(--brand-dark); background: var(--brand-light); border-color: var(--brand); }
/* Dentro de una tarjeta .cat-card-flat (fondo ya coloreado), el badge sigue
   necesitando su propio contorno para no fundirse con el fondo de la
   tarjeta -- se le da un fondo sólido (blanco) en vez del tinte suave. */
.cat-card-flat .tool-badge { background: var(--surface); margin-bottom: .5rem; }
.cat-card-flat .cat-card-accion { display: block; margin-top: .6rem; font-size: .82rem; font-weight: 700; color: var(--accent-dark); }

/* Bloque "Herramientas para elegir y entender tu equipo" (portada). Cada
   tarjeta es UN solo <a>/contenedor con UN botón real — nunca un enlace
   anidado dentro de otro ni un botón dentro de un enlace. */
.herramientas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.3rem; }
@media (max-width: 900px) { .herramientas-grid { grid-template-columns: 1fr; } }
.herramienta-card {
  display: grid; gap: .6rem; align-content: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm);
}
.herramienta-card h3 { font-size: 1.05rem; margin: 0; }
.herramienta-card p { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.herramienta-card .btn { justify-self: start; margin-top: .2rem; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(16,26,51,.88) 0%, rgba(16,26,51,.55) 55%, rgba(16,26,51,.25) 100%); }
.hero-inner { position: relative; z-index: 1; padding-block: clamp(4rem, 12vw, 7.5rem); color: #fff; max-width: 46rem; }
.hero-inner h1 { color: #fff; }
.hero-inner .lede { color: rgba(255,255,255,.86); }
.hero-actions { display: flex; gap: .9rem; margin-top: 1.8rem; flex-wrap: wrap; }
.hero-trust { margin-top: 2.4rem; display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: .85rem; color: rgba(255,255,255,.78); }
.hero-trust strong { color: #fff; display: block; font-family: var(--serif); font-size: 1.4rem; }

/* Portada editorial (build_home_editorial): estadísticas grandes en formato
   editorial en vez del bloque .hero-trust pequeño de la portada de ejemplo
   (build_home) — .hero-trust se conserva intacta arriba, sigue usándose ahí. */
.hero-stats { margin-top: 2.8rem; display: flex; flex-wrap: wrap; }
.hero-stat { padding: 0 1.8rem; border-left: 1px solid rgba(255,255,255,.24); }
.hero-stat:first-child { padding-left: 0; border-left: none; }
.hero-stat strong { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; line-height: 1; }
.hero-stat span { display: block; margin-top: .35rem; font-size: .82rem; color: rgba(255,255,255,.72); }

/* Cómo elegimos / trust block */
.trust-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.trust-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.trust-item .num { font-family: var(--serif); font-size: 1.8rem; color: var(--accent); display: block; margin-bottom: .3rem; }
.trust-item h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.trust-item-lead { background: var(--brand-dark); border-color: var(--brand-dark); }
.trust-item-lead h3, .trust-item-lead p { color: #fff; }
.trust-item-lead p { color: rgba(255,255,255,.78); }
.trust-item-accent { background: var(--accent-light); border-color: transparent; }
.trust-figure { font-family: var(--serif); font-size: 1.15em; color: var(--accent-dark); }

/* Ficha de producto */
.ficha-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
@media (max-width: 959px) { .ficha-layout { grid-template-columns: 1fr; } }

.ficha-galeria { position: sticky; top: 90px; }
@media (max-width: 959px) { .ficha-galeria { position: static; } }
.ficha-img-main { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-alt); box-shadow: var(--shadow-sm); }
.ficha-thumbs { display: flex; gap: .6rem; margin-top: .8rem; }
.ficha-thumbs button { width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; flex: none; }
.ficha-thumbs button.is-active { border-color: var(--accent); }
.ficha-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.ficha-marca { font-weight: 700; color: var(--accent-dark); text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.ficha-nombre { margin-top: .35rem; }
.ficha-rating { margin-top: .6rem; display: flex; align-items: center; gap: .5rem; color: var(--ink-soft); font-size: .92rem; }
.ficha-precio { margin-top: 1.1rem; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.ficha-precio .precio-actual { font-size: 2.1rem; font-weight: 800; color: var(--brand-dark); font-family: var(--serif); }
.ficha-precio .precio-antes { font-size: 1.1rem; color: var(--muted); text-decoration: line-through; }
.precio-nota { display: block; margin-top: .3rem; font-size: .82rem; color: var(--muted); width: 100%; }
.precio-demo-nota {
  margin-top: 1rem; font-size: .92rem; color: var(--muted); font-style: italic;
  padding: .8rem 1rem; border-radius: var(--radius-sm); background: var(--bg-alt);
}
.ficha-head .btn-comprar { margin-top: 1.2rem; }

.ejemplo-banner {
  margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  background: #fde3d3; color: var(--accent-dark); font-size: .88rem; font-weight: 600;
  border: 1px dashed var(--accent);
}

.ficha-radar { margin-top: clamp(2rem, 5vw, 3rem); }
.radar-wrap { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.radar-svg { width: 280px; height: 280px; flex: none; }
.radar-legend { display: grid; gap: .5rem; flex: 1; min-width: 220px; }
.radar-legend-item { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; padding-block: .25rem; border-bottom: 1px dotted var(--line); }
.radar-legend-item strong { color: var(--brand-dark); }
.radar-nota, .nota { font-size: .82rem; color: var(--muted); margin-top: .6rem; }

.ficha-specs { margin-top: clamp(2rem, 5vw, 3rem); }
.spec-group { margin-top: 1.2rem; }
.spec-group h3 { font-size: 1rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
table.spec-table td, table.spec-table th { padding: .65rem .4rem; border-bottom: 1px solid var(--line); text-align: left; font-size: .94rem; }
table.spec-table th { width: 45%; color: var(--ink-soft); font-weight: 600; }
table.spec-table td { font-weight: 600; }
.specs-extra { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .2rem 1rem; }
.specs-extra summary { cursor: pointer; padding: .7rem 0; font-weight: 700; }

.tabla-scroll { overflow-x: auto; margin: 1.2rem 0; }
table.guia-tabla-comparativa { width: 100%; border-collapse: collapse; }
table.guia-tabla-comparativa th, table.guia-tabla-comparativa td { border: 1px solid var(--line); padding: .65rem .7rem; text-align: left; font-size: .9rem; vertical-align: top; }
table.guia-tabla-comparativa thead th { background: var(--brand-light); font-weight: 700; }
table.guia-tabla-comparativa tbody th[scope="row"] { background: var(--bg-alt); font-weight: 600; color: var(--ink-soft); }
@media (max-width: 480px) {
  table.guia-tabla-comparativa th, table.guia-tabla-comparativa td { font-size: .84rem; padding: .55rem .55rem; }
}

.ficha-editorial { margin-top: clamp(2rem, 5vw, 3rem); }
.editorial-cuerpo { color: var(--ink-soft); display: grid; gap: 1rem; }
.editorial-cuerpo p { max-width: 68ch; }
.pros-contras { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.4rem; }
@media (max-width: 539px) { .pros-contras { grid-template-columns: 1fr; } }
.pros-contras h4 { font-family: var(--sans); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
.pros li, .contras li { padding: .35rem 0 .35rem 1.5rem; position: relative; font-size: .94rem; }
.pros li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.contras li::before { content: "–"; position: absolute; left: .25rem; color: var(--accent-dark); font-weight: 800; }
.ideal-para { margin-top: 1.4rem; padding: 1rem 1.2rem; background: var(--brand-light); border-radius: var(--radius-sm); color: var(--brand-dark); }

.ficha-resenas { margin-top: clamp(2rem, 5vw, 3rem); }
.resenas-lista { display: grid; gap: 1rem; margin-top: 1rem; }
.resena { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.resena-head { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }

.similares { margin-top: 1.2rem; }

.aviso-afiliados { font-size: .82rem; color: var(--muted); margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* Comparador */
.comp-resumen-estatico { margin: 1.6rem 0 2rem; }
.comp-resumen-estatico p { color: var(--ink-soft); font-size: .92rem; max-width: 68ch; margin-bottom: .8rem; }
.comparador-setup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem clamp(1.2rem, 4vw, 2rem); }
.comparador-setup label { font-weight: 700; font-size: .9rem; display: block; margin-bottom: .4rem; }
.comparador-setup select { width: 100%; padding: .7rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg); font: inherit; margin-bottom: 1.1rem; }
.comparador-checks { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 1.2rem; }
.comparador-checks label { display: flex; align-items: center; gap: .55rem; font-weight: 500; font-size: .92rem; background: var(--bg); border: 1px solid var(--line); padding: .6rem .8rem; border-radius: var(--radius-sm); }

.comparador-resultado { margin-top: 2rem; overflow-x: auto; }
table.tabla-comparar { min-width: 640px; }
table.tabla-comparar th, table.tabla-comparar td { border: 1px solid var(--line); padding: .7rem .8rem; font-size: .92rem; vertical-align: top; }
table.tabla-comparar thead th { background: var(--brand-light); }
table.tabla-comparar td.is-best { background: #eaf7ee; font-weight: 700; }
table.tabla-comparar .col-head-prod { text-align: center; }
table.tabla-comparar .col-head-prod img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); margin: 0 auto .5rem; }
.comparador-radares { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.comparador-vacio { color: var(--muted); padding: 2rem 0; text-align: center; }

/* Guías relacionadas en el hub de una categoría */
.cat-guias { margin-top: 2rem; }
.cat-guias-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }

/* "Cómo elegir según tu uso" (hub de básculas inteligentes) */
.cat-elegir-uso { margin-top: clamp(2rem, 5vw, 3rem); }
.cat-elegir-uso ul { display: grid; gap: .8rem; margin: 1rem 0 1.4rem; padding-left: 1.2rem; }
.cat-elegir-uso li { font-size: .94rem; color: var(--ink-soft); }
.cat-elegir-uso li strong { color: var(--ink); }

/* Asistente "Encuentra una báscula que encaje contigo" */
.cat-asistente { margin-top: clamp(2rem, 5vw, 3rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem clamp(1.2rem, 4vw, 2rem); }
.cat-asistente > p { color: var(--ink-soft); margin-bottom: 1rem; }
.cat-asistente > .tool-badge { margin-bottom: .7rem; }
.asistente-pregunta { border: 0; padding: 0; margin: 0 0 1.1rem; }
.asistente-pregunta legend { font-weight: 700; font-size: .94rem; margin-bottom: .5rem; padding: 0; }
.asistente-opcion { display: flex; align-items: center; gap: .5rem; font-size: .92rem; padding: .35rem 0; cursor: pointer; }
.asistente-opcion input { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
[data-asistente-reset] { margin-top: .4rem; }
.asistente-resultados { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.asistente-resultados h3 { font-size: 1rem; margin-bottom: .8rem; }
.asistente-resultados h3:not(:first-child) { margin-top: 1.6rem; }
.asistente-sin-match { color: var(--muted); font-style: italic; }
.asistente-resultado-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.asistente-resultado-card { display: flex; flex-direction: column; gap: .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem; background: var(--bg); }
.asistente-img-link { display: block; }
.asistente-img-link:focus-visible { outline-offset: -3px; }
.asistente-img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; border-radius: var(--radius-sm); }
.asistente-resultado-marca { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0; }
.asistente-resultado-nombre { font-weight: 700; }
.asistente-resultado-nota { font-size: .86rem; color: var(--ink-soft); margin: 0; }
.asistente-resultado-nd { font-style: italic; }
.asistente-resultado-no { color: var(--accent-dark); }
.asistente-resultado-condicion { border-left: 2px solid var(--line); padding-left: .5rem; }
.asistente-resultado-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.asistente-add-aviso { font-size: .82rem; color: var(--accent-dark); margin: 0; }
.comp-asistente-cta { margin: 1rem 0; font-size: .92rem; }

/* Asistente de consulta del manual (Beurer EM 49, 25/09/2026) — navegador
   documental por pasos: opciones como botones reales (foco/teclado nativos),
   nunca casillas de síntomas. Prefijo .manual-asistente-* propio, sin
   colisionar con .asistente-* (báscula) ni .comp-* (comparador). */
.manual-asistente { margin-top: clamp(1.4rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.2rem, 3vw, 1.7rem); }
.manual-asistente-pregunta { font-weight: 700; font-size: 1.05rem; margin: 0 0 .9rem; color: var(--brand-dark); }
.manual-asistente-opciones { display: grid; gap: .6rem; }
.manual-asistente-opcion {
  text-align: left; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--bg); font: inherit; font-size: .95rem; cursor: pointer; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.manual-asistente-opcion:hover { border-color: var(--brand); background: var(--brand-light); }
.manual-asistente-opcion:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.manual-asistente-select { padding: .6rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--line); font: inherit; margin-right: .6rem; background: var(--bg); max-width: 100%; }
.manual-asistente-resultado { display: grid; gap: .6rem; }
/* ul,ol{list-style:none} es un reset global (ver más arriba) — los pasos
   de "Resolución de problemas" SÍ necesitan numeración visible (son una
   secuencia ordenada, "en este orden"), así que se restaura aquí. */
.manual-asistente-resultado ol { list-style: decimal; padding-left: 1.3rem; display: grid; gap: .4rem; }
.manual-asistente-resultado h3 { color: var(--brand-dark); font-size: 1.1rem; margin: 0; }
.manual-asistente-advertencia { background: var(--brand-light); border-left: 3px solid var(--accent-dark); padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .9rem; margin: 0; }
.manual-asistente-nav { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.cat-comparativa-directa { margin: 1.2rem 0; font-size: .92rem; }
.mercado-vacio {
  grid-column: 1 / -1; color: var(--muted); text-align: center;
  padding: 2rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius-sm);
}

/* Datos legales pendientes */
.legal-pendiente { display: grid; gap: .1rem; margin-top: 1rem; border: 1px dashed var(--warn); border-radius: var(--radius-sm); padding: 1rem 1.2rem; background: #fff3da; }
.legal-pendiente dt { font-weight: 700; margin-top: .8rem; }
.legal-pendiente dt:first-child { margin-top: 0; }
.legal-pendiente dd { margin: 0 0 .2rem; color: var(--ink-soft); font-size: .92rem; }

/* Datos legales YA confirmados (identidad, contacto, alojamiento) — misma
   estructura que .legal-pendiente pero sin el tono de advertencia, para no
   presentar un dato real como si siguiera pendiente. */
.legal-datos { display: grid; gap: .1rem; margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.2rem; background: var(--surface); }
.legal-datos dt { font-weight: 700; margin-top: .8rem; }
.legal-datos dt:first-child { margin-top: 0; }
.legal-datos dd { margin: 0 0 .2rem; color: var(--ink-soft); font-size: .92rem; }

/* Ofertas */
.oferta-badge { background: var(--accent); color: #fff; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--line); padding-block: 1rem; }
.faq-item summary { cursor: pointer; font-weight: 700; color: var(--brand-dark); }
.faq-item p { margin-top: .6rem; color: var(--ink-soft); }

/* Guías */
.guia-hero { max-width: 70ch; }
.guia-hero > .tool-badge { margin-bottom: .6rem; }
.manual-guia-completa-cta { margin: 1.2rem 0; }
.guia-cuerpo { max-width: 72ch; display: grid; gap: 1.2rem; color: var(--ink-soft); }
.guia-cuerpo h2 { color: var(--brand-dark); margin-top: 1rem; }
.guia-shortlist { margin-top: 2.5rem; }

/* Índice breve de anclas al principio de una guía larga (24/09/2026,
   guia-tens-vs-ems-diferencias.html) — enlaces reales a #anclas del mismo
   documento, sin JavaScript. flex-wrap para que en móvil los elementos
   pasen a su propia línea en vez de desbordar. */
.guia-indice { max-width: 70ch; margin-top: 1rem; font-size: .92rem; }
.guia-indice p { font-weight: 700; color: var(--brand-dark); margin: 0 0 .45rem; }
.guia-indice ul { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; list-style: none; padding: 0; margin: 0; }
.guia-indice a { color: var(--ink-soft); }

/* Bloque práctico de 3 tarjetas ("Antes de comparar...", 24/09/2026) —
   contenido visible sin JavaScript, mismo criterio que .destacados/
   .destacado-card (fichas comerciales) pero con su propio prefijo porque
   estas tarjetas viven en una guía editorial, no en una ficha de producto. */
.guia-practico { margin-top: clamp(1.4rem, 3vw, 2rem); }
.guia-practico-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: .9rem; }
@media (max-width: 767px) { .guia-practico-grid { grid-template-columns: 1fr; } }
.guia-practico-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
}
.guia-practico-card h3 { font-size: 1rem; margin-bottom: .4rem; color: var(--brand-dark); }
.guia-practico-card p { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; margin: 0; }

/* Lista de fuentes con entidad/título/enlace (24/09/2026) — lista simple,
   sin necesitar su propia tarjeta: hereda el color y el ancho de
   .guia-cuerpo, solo añade la viñeta y el espaciado entre fuentes. */
.guia-fuentes { list-style: disc; margin: 0 0 0 1.3rem; padding: 0; display: grid; gap: .6rem; }

/* Formularios (contacto) */
.form-field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.form-field label { font-weight: 700; font-size: .9rem; }
.form-field input, .form-field textarea {
  padding: .8rem .95rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); font: inherit;
}

/* Banda de cierre (peak-end antes del footer, solo portada editorial) */
.closing-band { background: var(--brand-dark); background-image: radial-gradient(120% 140% at 15% -10%, rgba(230,148,38,.28), transparent 55%); }
.closing-band-inner { padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; max-width: 46rem; margin-inline: auto; }
.closing-band h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.closing-band p { color: rgba(255,255,255,.78); margin-top: 1rem; font-size: 1.05rem; }
.closing-band-actions { margin-top: 2rem; display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* Footer */
.site-footer { background: var(--brand-dark); color: rgba(255,255,255,.82); }
.site-footer .container { padding-block: clamp(2.4rem, 6vw, 3.6rem); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 539px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: #fff; font-family: var(--sans); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .8rem; }
.footer-grid a { display: block; padding: .3rem 0; font-size: .92rem; color: rgba(255,255,255,.75); }
.footer-grid a:hover { color: #fff; }
.footer-cookie-config { display: block; width: 100%; text-align: left; padding: .3rem 0; font-size: .92rem; font-family: inherit; color: rgba(255,255,255,.75); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
.footer-cookie-config:hover, .footer-cookie-config:focus-visible { color: #fff; }

/* Aviso de consentimiento (consentimiento.js) — banda no bloqueante al pie
   de la ventana: nunca cubre toda la pantalla ni impide interactuar con el
   resto de la página (comparador incluido) mientras está visible. */
.rp-consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.rp-consent-banner-inner { max-width: 1100px; margin: 0 auto; padding: 1rem 1.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.rp-consent-texto { flex: 1 1 380px; margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
.rp-consent-texto a { color: var(--brand-dark); }
.rp-consent-botones { display: flex; gap: .6rem; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 539px) { .rp-consent-botones { width: 100%; } .rp-consent-botones .btn { flex: 1 1 0; } }
.footer-brand { color: #fff; font-family: var(--serif); font-size: 1.3rem; margin-bottom: .6rem; }
.footer-legal { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .8rem; color: rgba(255,255,255,.6); }
.footer-legal p + p { margin-top: .5rem; }

/* Breadcrumbs */
.breadcrumbs { font-size: .84rem; color: var(--muted); margin-bottom: 1.2rem; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--brand-dark); }

/* Filtros de categoría */
.filtros-bar { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.6rem; align-items: center; }
.filtros-bar select { padding: .6rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); font: inherit; }

/* =============================================================
   8. Responsive genérico ya cubierto por breakpoints puntuales arriba
   ============================================================= */
@media (min-width: 540px)  { }
@media (min-width: 720px)  { }
@media (min-width: 960px)  { }
@media (min-width: 1280px) { }

/* =============================================================
   9. Reduced motion
   ============================================================= */
/* La animación de .reveal ya está condicionada por completo a
   prefers-reduced-motion: no-preference (ver sección de Utilidades) —
   nada que anular aquí para el caso "reduce": el contenido nunca se oculta. */

/* =============================================================
   10. Ficha documental (candidato sin datos comerciales) — reutiliza
   .ficha-layout/.ficha-galeria/.ficha-img-main/.ficha-marca/.ficha-nombre/
   .ficha-head/.spec-table/.badge/.nota/.aviso-afiliados ya existentes;
   solo lo nuevo va aquí.
   ============================================================= */
.ficha-doc-preview-banner {
  margin-bottom: 1.4rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  background: #fde3d3; color: var(--accent-dark); font-weight: 700; font-size: .92rem;
  border: 1px dashed var(--accent);
}
.ficha-doc-declaracion { font-size: .92rem; color: var(--muted); font-style: italic; margin-bottom: 1.4rem; max-width: 60ch; }
.ficha-doc-intro { margin-top: 1rem; color: var(--ink-soft); max-width: 60ch; }
.ficha-doc-para-quien { margin-top: 1rem; color: var(--ink-soft); max-width: 60ch; }
.ficha-doc-cta { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ficha-doc-cta-tag { font-size: .78rem; font-weight: 500; opacity: .85; white-space: normal; }
.ficha-doc-specs, .ficha-doc-garantia, .ficha-doc-limites, .ficha-doc-enlaces, .ficha-doc-vendedor {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}
.ficha-doc-comparativa { color: var(--muted); font-size: .9rem; margin-top: 1rem; }
.ficha-doc-estado { font-size: .8rem; color: var(--muted); font-style: italic; }
.ficha-doc-fuente { font-size: .8rem; color: var(--muted); }
.ficha-doc-aviso-enlace { font-size: .82rem; color: var(--muted); margin-top: .4rem; }
.ficha-doc-analisis { margin-top: clamp(2rem, 5vw, 3rem); }
/* Ficha documental sin imagen (opcional, ver build_ficha_documental()):
   una sola columna a cualquier ancho — sin esto, .ficha-layout (grid de
   dos columnas) reservaría igualmente el hueco de la columna de imagen,
   vacío, aunque no hubiera ningún <div class="ficha-galeria"> dentro. */
.ficha-layout-sin-imagen { grid-template-columns: 1fr; }
/* Sin la columna de imagen hay más ancho disponible para la cabecera —
   el límite de legibilidad pensado para la columna estrecha (60-62ch)
   dejaría un hueco vacío a la derecha del texto si se mantuviera aquí. */
.ficha-layout-sin-imagen .ficha-com-intro,
.ficha-layout-sin-imagen .ficha-doc-intro,
.ficha-layout-sin-imagen .ficha-doc-para-quien { max-width: 88ch; }

/* =============================================================
   11. Rediseño comercial + comparador (dist-lanzamiento-comercial-revision/)
   — reutiliza .ficha-layout/.ficha-doc-*/.spec-table/.badge/.btn/.card ya
   existentes; solo lo nuevo de las 5 fichas comerciales y del comparador
   va aquí. Cada componente lleva su propio prefijo de clase (destacado-*,
   encaja-*, comp-*, proto-dialog) para no colisionar con nada anterior.
   ============================================================= */
.ficha-com-intro { margin-top: .7rem; color: var(--ink-soft); max-width: 62ch; font-size: 1.03rem; }
.ficha-com-cta-row { margin-top: 1.1rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }

.destacados { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: clamp(1.3rem, 3vw, 1.8rem); }
@media (max-width: 767px) { .destacados { grid-template-columns: 1fr; } }
.destacado-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
}
.destacado-card .destacado-icono {
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-light);
  display: flex; align-items: center; justify-content: center; margin-bottom: .55rem;
  font-size: 1.05rem; color: var(--brand-dark);
}
.destacado-card h3 { font-size: 1rem; margin-bottom: .3rem; line-height: 1.25; }
.destacado-card p { color: var(--ink-soft); font-size: .88rem; line-height: 1.45; }

.encaja-block { margin-top: clamp(1.4rem, 3vw, 2rem); background: var(--brand-light); border-radius: var(--radius-lg); padding: clamp(1.2rem, 3vw, 1.7rem); }
.encaja-block h2 { color: var(--brand-dark); }
.encaja-lista { margin-top: .9rem; display: grid; gap: .6rem; }
.encaja-lista li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; color: var(--ink); }
.encaja-lista li::before {
  content: "✓"; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}

.specs-com { margin-top: clamp(1.5rem, 3.5vw, 2.2rem); }

.cat-comparador-cta { margin: 1rem 0 1.4rem; }

/* ---------- Comparador ---------- */
.comp-selector { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 4vw, 1.8rem); }
.comp-selector-intro { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1.1rem; max-width: 64ch; }
.comp-modelos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.comp-modelo-check {
  display: flex; align-items: flex-start; gap: .6rem; padding: .8rem .9rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .9rem; cursor: pointer; transition: border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.comp-modelo-check:has(input:checked) { border-color: var(--brand); background: var(--brand-light); }
.comp-modelo-check input { margin-top: .2rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--brand); }
.comp-modelo-check .comp-modelo-nombre { font-weight: 700; color: var(--brand-dark); display: block; }
.comp-modelo-check .comp-modelo-marca { color: var(--muted); font-size: .8rem; }
.comp-modelo-check.is-disabled { opacity: .5; cursor: not-allowed; }

.comp-limite-nota { margin-top: .9rem; font-size: .83rem; color: var(--muted); }

.comp-seleccion-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.comp-chip {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--brand); color: #fff;
  padding: .4rem .5rem .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
}
.comp-chip button {
  width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: .85rem; line-height: 1;
}
.comp-chip button:hover { background: rgba(255,255,255,.4); }

.comp-vista-selector {
  margin-top: 1rem; padding: .7rem .85rem; border-radius: var(--radius-sm);
  background: var(--bg-alt); border: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.comp-vista-selector-label { font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-right: .2rem; }
.comp-vista-pill {
  padding: .35rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.comp-vista-pill:not(:disabled):hover { border-color: var(--brand); color: var(--brand-dark); }
.comp-vista-pill.is-active { background: var(--brand); border-color: var(--brand); color: #fff; cursor: default; }
.comp-vista-pill:disabled { opacity: 1; }

.comp-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }
.comp-toggle-label { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.comp-switch {
  position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--line);
  transition: background .2s var(--ease-out); flex: none;
}
.comp-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease-out);
}
.comp-toggle-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.comp-toggle-label input:checked + .comp-switch { background: var(--brand); }
.comp-toggle-label input:checked + .comp-switch::after { transform: translateX(1.1rem); }
.comp-toggle-label input:focus-visible + .comp-switch { outline: 2px solid var(--accent); outline-offset: 3px; }

.comp-vacio { color: var(--muted); text-align: center; padding: 2.5rem 1rem; }

/* La tabla ocupa siempre el 100% del contenedor, nunca más: con
   table-layout:fixed y sin min-width, las columnas de producto se
   reparten el ancho disponible entre sí (la de "campo" tiene un ancho
   fijo, más estrecho en móvil) y el texto envuelve en varias líneas en
   vez de desbordar — así los 2 productos de una vista en móvil se ven
   siempre completos, sin scroll horizontal. overflow-x:auto en el
   contenedor queda como red de seguridad, no como mecanismo principal. */
.comp-resultado { margin-top: 1.8rem; overflow-x: auto; }
table.comp-tabla { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
table.comp-tabla th, table.comp-tabla td {
  padding: .65rem .5rem; border-bottom: 1px solid var(--line); text-align: left;
  font-size: .89rem; vertical-align: top; word-break: break-word; overflow-wrap: break-word;
}
table.comp-tabla thead th { background: var(--brand-light); position: sticky; top: 0; }
table.comp-tabla th.comp-col-campo { width: 84px; color: var(--ink-soft); font-weight: 600; background: var(--bg-alt); padding-right: .35rem; }
table.comp-tabla tr.comp-row-diff td:not(.comp-col-campo) { background: #fff7e8; }
table.comp-tabla td.comp-valor-no { color: var(--muted); }
table.comp-tabla td.comp-valor-nd { color: var(--muted); font-style: italic; }

.comp-col-head { text-align: center !important; }
.comp-col-head-inner { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
/* Foto de cabecera del comparador: enlaza a la misma ficha que el nombre
   (hermano del enlace del nombre, nunca anidado con él) — su propio
   control "Quitar" más abajo sigue siendo el único que quita el modelo. */
.comp-img-link { display: block; width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.comp-img-link:focus-visible { outline-offset: -3px; }
.comp-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.comp-col-head-inner .comp-marca { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-dark); }
.comp-col-head-inner a.comp-nombre-link { font-family: var(--serif); font-weight: 700; color: var(--brand-dark); font-size: .92rem; line-height: 1.2; }
.comp-col-head-inner a.comp-nombre-link:hover { text-decoration: underline; }
.comp-tagline { font-size: .74rem; color: var(--ink-soft); line-height: 1.3; margin: 0; }
.comp-mini-cta { padding: .35rem .6rem; font-size: .74rem; white-space: normal; }
.comp-quitar { font-size: .74rem; color: var(--muted); text-decoration: underline; background: none; border-radius: 4px; padding: .2rem; }
.comp-quitar:hover { color: var(--accent-dark); }

tr.comp-row-cta td { border-bottom: none; padding-top: 1.1rem; }
.comp-row-cta .btn { width: 100%; white-space: normal; }

.comp-campo-label { display: block; font-size: .82rem; }
.comp-detalle-btn {
  display: inline-block; margin-top: .3rem; font-size: .72rem; font-weight: 600;
  color: var(--brand); text-decoration: underline; background: none; padding: 0; border-radius: 4px;
}
.comp-detalle-btn:hover { color: var(--brand-dark); }
.comp-detalle-btn[aria-expanded="true"] { color: var(--accent-dark); }

tr.comp-detail-row td { background: var(--bg-alt); font-size: .82rem; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
tr.comp-detail-row td.comp-col-campo { background: var(--bg-alt); }
.comp-sin-notas { color: var(--muted); font-style: italic; }
.comp-valor-amb { color: var(--warn); font-weight: 600; }

@media (min-width: 540px) {
  table.comp-tabla th.comp-col-campo { width: 110px; }
  table.comp-tabla th, table.comp-tabla td { padding: .7rem .65rem; }
  .comp-campo-label { font-size: .87rem; }
}
@media (min-width: 768px) {
  table.comp-tabla th.comp-col-campo { width: 170px; }
  table.comp-tabla th, table.comp-tabla td { padding: .75rem .9rem; font-size: .92rem; }
  .comp-col-head-inner a.comp-nombre-link { font-size: 1rem; }
  .comp-tagline { font-size: .8rem; }
  .comp-campo-label { font-size: .92rem; }
}

.comp-print-nota { font-size: .8rem; color: var(--muted); margin-top: 1rem; }
.comp-garantia-legal-nota { font-size: .85rem; }

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

/* ---------- Diálogo de sustitución ("Añadir al comparador" con 3 ya elegidos) ---------- */
dialog.proto-dialog {
  border: none; border-radius: var(--radius); padding: clamp(1.3rem, 4vw, 1.8rem);
  max-width: 420px; width: calc(100% - 2rem); box-shadow: var(--shadow-lg);
  background: var(--surface); color: var(--ink);
}
dialog.proto-dialog::backdrop { background: rgba(14, 22, 40, .5); }
dialog.proto-dialog h2 { font-size: 1.2rem; margin-bottom: .6rem; }
dialog.proto-dialog p { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1rem; }
.proto-dialog-opts { display: grid; gap: .5rem; margin-bottom: 1.4rem; }
.proto-dialog-opt {
  display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .92rem; cursor: pointer;
}
.proto-dialog-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-light); }
.proto-dialog-opt input { accent-color: var(--brand); }
.proto-dialog-actions { display: flex; justify-content: flex-end; gap: .7rem; }

/* ---------- "Manuales y ayuda para empezar" (bloque de recursos_uso,
   solo TENS/EMS por ahora — ver _recursos_uso_html() en build_site.py).
   Mismas variables de color/radio que el resto del rediseño comercial,
   sin clases nuevas para los propios botones (reutilizan .btn/.btn-ghost/
   .btn-sm ya existentes). ---------- */
.recursos-uso { margin-top: clamp(1.2rem, 3vw, 1.7rem); background: var(--brand-light); border-radius: var(--radius-lg); padding: clamp(1.1rem, 3vw, 1.5rem); }
.recursos-uso h2 { color: var(--brand-dark); margin-bottom: .4rem; }
.recursos-uso-botones { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0; }
.recursos-uso-seguridad { margin-top: .6rem; }