/* ==========================================================================
   HERRAMIENTAS DE MARCA · CRUZ ROJA JUVENTUD · Estilos
   --------------------------------------------------------------------------
   Índice
     1. Fuentes
     2. Variables (colores de la paleta y temas claro / oscuro)
     3. Base
     4. Barra superior, menú lateral y barra inferior (móvil)
     5. Componentes: botones, campos, chips, tarjetas, avisos
     6. Inicio: héroe y panel de herramientas
     7. Vistas de herramienta (lienzo + panel)
     8. Estilos de cada herramienta
     9. Guía de uso y manual
    10. Bandeja, buscador, visor y avisos flotantes
    11. Adaptación por dispositivo (táctil, móvil, tablet, pantallas grandes)
    12. Movimiento reducido e impresión
   ========================================================================== */

/* 1. FUENTES ---------------------------------------------------------------- */
@font-face { font-family: 'Montserrat'; font-weight: 300; font-display: swap; src: url('../recursos/fuentes/montserrat-300.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 400; font-display: swap; src: url('../recursos/fuentes/montserrat-400.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-display: swap; src: url('../recursos/fuentes/montserrat-500.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('../recursos/fuentes/montserrat-600.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url('../recursos/fuentes/montserrat-700.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-display: swap; src: url('../recursos/fuentes/montserrat-800.woff') format('woff'); }
@font-face { font-family: 'Montserrat'; font-weight: 900; font-display: swap; src: url('../recursos/fuentes/montserrat-900.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url('../recursos/fuentes/open-sans-400.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('../recursos/fuentes/open-sans-400-italic.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url('../recursos/fuentes/open-sans-600.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-display: swap; src: url('../recursos/fuentes/open-sans-700.woff') format('woff'); }
@font-face { font-family: 'Billy Ohio'; font-weight: 400; font-display: swap; src: url('../recursos/fuentes/billy-ohio.woff') format('woff'); }
@font-face { font-family: 'Playlist Script'; font-weight: 400; font-display: swap; src: url('../recursos/fuentes/playlist-script.woff') format('woff'); }

/* 2. VARIABLES -------------------------------------------------------------- */
:root {
  /* Paleta oficial */
  --rojo: #f5333f;
  --aguamarina: #6cb9b7;
  --gris-oscuro: #323232;
  --gris-claro: #ededed;
  --blanco: #ffffff;
  --amarillo: #e8e821;
  --rosa: #ff97e5;
  --verde: #84d61c;
  --azul: #00aff5;

  /* Tema claro (por defecto) */
  --fondo: #ffffff;
  --fondo-2: #f5f5f5;
  --fondo-3: #ededed;
  --superficie: #ffffff;
  --texto: #323232;
  --texto-2: rgba(50, 50, 50, .72);
  --linea: rgba(50, 50, 50, .13);
  --cristal: rgba(255, 255, 255, .86);
  --sombra: 0 1px 2px rgba(50, 50, 50, .05), 0 8px 24px rgba(50, 50, 50, .07);
  --cuadros: rgba(50, 50, 50, .07);
    /* Barra superior y cinta de iconos (tema claro) */
  --barra-fondo: rgba(255, 255, 255, .92);
  --barra-texto: #323232;
  --barra-texto-2: rgba(50, 50, 50, .75);
  --barra-boton: #ededed;
  --barra-borde: rgba(50, 50, 50, .13);
  --cinta-fondo: #f5f5f5;
  --cinta-borde: rgba(50, 50, 50, .1);
  --cinta-neutro: #323232;   /* color de los iconos que en oscuro son blancos */

  /* Acento de la interfaz (se cambia desde el menú) */
  --acento: var(--rojo);
  --sobre-acento: #ffffff;

  --f-titulos: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --f-texto: 'Open Sans', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --radio: 14px;
  --barra-h: 60px;
  --menu-w: 290px;
  --pestanas-h: 0px;
  --margen: clamp(16px, 3.4vw, 44px);
  color-scheme: light;
}
/* Tema oscuro: se activa con data-tema-activo="oscuro" en <html> */
:root[data-tema-activo="oscuro"] {
  --fondo: #1c1c1c;
  --fondo-2: #262626;
  --fondo-3: #323232;
  --superficie: #262626;
  --texto: #ededed;
  --texto-2: rgba(237, 237, 237, .7);
  --linea: rgba(237, 237, 237, .14);
  --cristal: rgba(28, 28, 28, .86);
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
  --cuadros: rgba(255, 255, 255, .07);
    /* Barra superior y cinta de iconos (tema oscuro) */
  --barra-fondo: rgba(50, 50, 50, .94);
  --barra-texto: #ffffff;
  --barra-texto-2: rgba(255, 255, 255, .75);
  --barra-boton: rgba(255, 255, 255, .1);
  --barra-borde: rgba(255, 255, 255, .08);
  --cinta-fondo: #323232;
  --cinta-borde: rgba(255, 255, 255, .08);
  --cinta-neutro: #ffffff;
  color-scheme: dark;
}

/* 3. BASE ------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15.5px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: clip;
  padding-bottom: var(--pestanas-h);
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-titulos); margin: 0; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
a:not([class]) { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font: 600 .88em var(--f-titulos); background: var(--fondo-3); padding: .08em .45em; border-radius: 6px; word-break: break-word; }
svg { width: 18px; height: 18px; flex: none; }
:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--gris-oscuro); color: #fff; padding: 10px 14px; border-radius: 10px; font: 600 14px var(--f-titulos); text-decoration: none; }
.saltar:focus { top: 12px; }
.small { font-size: 13px; line-height: 1.5; }
.muted { color: var(--texto-2); }
.error { color: var(--rojo); font-weight: 600; }
.envoltura { max-width: 1240px; margin: 0 auto; padding-inline: var(--margen); }

/* Barras de desplazamiento con los colores de la marca */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--fondo-2); }
  ::-webkit-scrollbar-thumb { background: var(--acento); border-radius: 999px; border: 3px solid var(--fondo-2); }
  ::-webkit-scrollbar-thumb:hover { background: var(--gris-oscuro); }
  :root[data-tema-activo="oscuro"] ::-webkit-scrollbar-thumb:hover { background: #fff; }
  ::-webkit-scrollbar-corner { background: transparent; }
  .menu-nav::-webkit-scrollbar, .miniaturas::-webkit-scrollbar, .plantilla-miniaturas::-webkit-scrollbar { width: 8px; height: 8px; }
  .menu-nav::-webkit-scrollbar-thumb, .miniaturas::-webkit-scrollbar-thumb, .plantilla-miniaturas::-webkit-scrollbar-thumb { border-width: 2px; }
}
@supports not selector(::-webkit-scrollbar) {
  html, .menu-nav { scrollbar-color: var(--acento) var(--fondo-2); scrollbar-width: thin; }
}
/* Puntero propio en ordenador: flecha en gris oscuro y un círculo de acento en
   lo que se puede pulsar. Un anillo sigue al ratón (js/app.js, sección 5b). */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M4 3l16 7.5-6.6 1.7 3.9 7.3-2.6 1.4-3.9-7.3-4.8 4.6z' fill='%23323232' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto; }
  a, button, summary, label, select, [role="button"], .chip, input[type=range], input[type=checkbox] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='7' fill='%23f5333f' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 14 14, pointer;
  }
  input[type=text], input[type=email], input[type=tel], input[type=search], input[type=number], textarea, [contenteditable="true"] { cursor: text; }
  button:disabled { cursor: not-allowed; }
  .anillo-cursor {
    position: fixed; left: 0; top: 0; z-index: 300; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
    border: 2px solid var(--acento); pointer-events: none; opacity: 0; transition: opacity .2s, width .2s, height .2s, margin .2s, background .2s;
  }
  .anillo-cursor.visible { opacity: .55; }
  .anillo-cursor.sobre { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: color-mix(in srgb, var(--acento) 12%, transparent); opacity: .8; }
  .anillo-cursor.pulsado { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
}

/* 4. BARRA SUPERIOR, MENÚ Y PESTAÑAS -------------------------------------- */
.barra {
  position: sticky; top: 0; z-index: 60; height: calc(var(--barra-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 12px;
    background: var(--barra-fondo); color: var(--barra-texto); border-bottom: 1px solid var(--barra-borde);
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
/* La barra sigue el tema: clara en claro y gris oscuro en oscuro */
.barra .ibtn { background: var(--barra-boton); color: var(--barra-texto); }
.barra .buscar { background: var(--barra-boton); color: var(--barra-texto-2); }
.barra .buscar kbd { background: var(--barra-boton); color: var(--barra-texto); }
.barra .barra-titulo { color: var(--barra-texto-2); }
.barra-logo img { height: 34px; width: auto; border-radius: 2px; }
.barra-titulo { font: 700 14px/1.2 var(--f-titulos); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-2); }
.buscar {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border-radius: 12px; border: 0; background: var(--fondo-3); font: 500 13px/1 var(--f-titulos); color: var(--texto-2); min-width: 200px; margin-left: auto;
}
.buscar kbd { margin-left: auto; font: 600 11px/1 var(--f-titulos); padding: 4px 6px; border-radius: 6px; background: var(--fondo-3); color: var(--texto); }
.buscar:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 2px; }
.ibtn {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 12px; border: 0; background: var(--fondo-3); transition: transform .15s, background .15s;
}
.ibtn:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 2px; }
.ibtn:disabled { opacity: .4; cursor: not-allowed; }

.menu {
  position: fixed; left: 0; top: calc(var(--barra-h) + env(safe-area-inset-top, 0px)); bottom: 0; z-index: 58; width: var(--menu-w);
  background: var(--fondo-2); border-right: 1px solid var(--linea); display: flex; flex-direction: column;
  transform: translateX(-102%); visibility: hidden;
  transition: transform .3s cubic-bezier(.3, .8, .2, 1), visibility 0s linear .3s;
}
html.menu-abierto .menu { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.3, .8, .2, 1); }
.menu-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 18px max(10px, env(safe-area-inset-left)); scrollbar-width: thin; }
.menu-inicio { margin-bottom: 4px; }
.menu-seccion { display: flex; align-items: center; gap: 10px; margin: 18px 6px 4px; font: 800 11px/1 var(--f-titulos); letter-spacing: .18em; text-transform: uppercase; color: var(--texto); }
.menu-seccion::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--linea); }
.menu-bloque { margin: 8px 0 6px; padding-bottom: 8px; border-bottom: 1px dashed var(--linea); }
.menu-bloque:last-child { border-bottom: 0; }
.menu-grupo { display: flex; align-items: center; gap: 10px; padding: 8px 8px 6px; font: 700 13px/1.2 var(--f-titulos); color: var(--texto); }
.menu-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--c); display: grid; place-items: center; box-shadow: 0 6px 14px -8px var(--c); }
.menu-ic span { width: 20px; height: 20px; background: var(--tinta, #fff); -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat; }
.menu-bloque a { position: relative; margin-left: 22px; padding-left: 26px !important; }
.menu-bloque a::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c); opacity: .45; transition: opacity .15s, transform .15s; }
.menu-bloque a:hover::before { opacity: 1; transform: scale(1.3); }
.menu-bloque a[aria-current="page"]::before { background: var(--sobre-acento); opacity: 1; }
.menu-nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none;
  font: 600 13.5px/1.25 var(--f-titulos); color: var(--texto-2); transition: background .15s, color .15s;
}
.menu-nav a svg { width: 16px; height: 16px; }
.menu-nav a:hover { background: var(--linea); color: var(--texto); }
.menu-nav a[aria-current="page"] { background: var(--acento); color: var(--sobre-acento); }
.menu-pie { border-top: 1px solid var(--linea); padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; }
.acentos { display: flex; gap: 8px; }
.acentos button { all: unset; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.acentos button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fondo-2), 0 0 0 4px var(--texto); }
.acentos button:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }
.velo { position: fixed; inset: 0; z-index: 57; background: rgba(20, 20, 20, .45); }
.pagina { min-width: 0; transition: margin-left .3s cubic-bezier(.3, .8, .2, 1); }

/* Barra de pestañas inferior (solo móviles; ver sección 11) */
.pestanas { display: none; }

/* 5. COMPONENTES ------------------------------------------------------------ */
.btn {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: 12px; font: 700 14px/1.1 var(--f-titulos); letter-spacing: -.01em; text-align: center;
  background: var(--acento); color: var(--sobre-acento); transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2.5px solid var(--texto); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-fantasma { background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linea); }
.btn-peq { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn-ancho { width: 100%; }
.btn svg { width: 16px; height: 16px; }
.fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fila.entre { justify-content: space-between; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .5); flex: none; }
.chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--texto); }
.chip:focus-visible { outline: 2.5px solid var(--texto); outline-offset: 4px; }
.chip.transparente { background: conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0) 0 0 / 10px 10px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fondo-3); border: 1px solid var(--linea); max-width: 100%; }
.seg button { all: unset; cursor: pointer; padding: 8px 12px; border-radius: 9px; font: 600 13px/1 var(--f-titulos); color: var(--texto-2); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.seg button:focus-visible { outline: 2px solid var(--acento); }
.campo { display: grid; gap: 6px; font: 600 12.5px/1.25 var(--f-titulos); color: var(--texto-2); min-width: 0; }
.etq, .etq-inline { font: 600 12.5px/1.25 var(--f-titulos); color: var(--texto-2); }
.valor { font: 600 12px/1 var(--f-titulos); color: var(--texto); font-variant-numeric: tabular-nums; }
input[type=text], input[type=email], input[type=tel], input[type=search], input[type=number], textarea, select {
  width: 100%; min-width: 0; border: 1px solid var(--linea); background: var(--superficie); border-radius: 12px;
  padding: 10px 12px; font: 400 15px/1.3 var(--f-texto); color: var(--texto); outline: none;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
input[type=range] { width: 100%; accent-color: var(--acento); }
.select-peq { width: auto; padding: 7px 10px; font-size: 14px; }
.check { display: flex; gap: 8px; align-items: center; font: 600 13px/1.3 var(--f-titulos); cursor: pointer; }
.check input { accent-color: var(--acento); width: 17px; height: 17px; flex: none; }
.subir { position: relative; }
.subir input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rejilla { display: grid; gap: clamp(12px, 1.8vw, 20px); }
.rejilla > * { min-width: 0; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.r5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(16px, 2vw, 22px); box-shadow: var(--sombra); min-width: 0; }
.tarjeta h3 { font-size: 17px; margin-bottom: 6px; }
.tarjeta p, .tarjeta li { color: var(--texto-2); font-size: 14.5px; }
.tarjeta b { color: var(--texto); }
ul.puntos { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
ul.puntos li { position: relative; padding-left: 18px; }
ul.puntos li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
ul.puntos.x li::before { content: "✕"; background: none; color: var(--rojo); font: 700 11px/1 var(--f-titulos); top: .45em; width: auto; height: auto; }
.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; font-size: 14px; background: color-mix(in srgb, var(--aguamarina) 14%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--aguamarina) 45%, transparent); }
.aviso svg { margin-top: 2px; }
.sello { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--f-titulos); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.sello.ok { color: #2c6a10; background: rgba(132, 214, 28, .22); }
.sello.no { color: #c0101b; background: rgba(245, 51, 63, .12); }
.sello.info { color: var(--texto); background: var(--fondo-3); }
.sello.ok::before { content: "✓"; }
.sello.no::before { content: "✕"; }
:root[data-tema-activo="oscuro"] .sello.ok { color: #b6f06a; }
:root[data-tema-activo="oscuro"] .sello.no { color: #ff8a92; }
.enlaces-canva { display: flex; flex-wrap: wrap; gap: 8px; }
.enlaces-canva a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 10px; text-decoration: none;
  font: 700 13px/1 var(--f-titulos); background: color-mix(in srgb, var(--aguamarina) 18%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--aguamarina) 50%, transparent);
}
.enlaces-canva a svg { width: 15px; height: 15px; }

/* 6. INICIO ----------------------------------------------------------------- */
/* Héroe: fondo rojo con foco de luz que sigue al ratón, título en Billy Ohio
   que aparece de izquierda a derecha, foto de grupo con contorno blanco. */
.heroe { position: relative; overflow: hidden; background: var(--rojo); color: #fff; isolation: isolate; }
.heroe::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(620px circle at var(--hx, 8%) var(--hy, 45%), rgba(255, 255, 255, .2), transparent 62%); transition: background .2s; }
.heroe-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding-block: clamp(28px, 5vh, 64px) clamp(0px, 2vh, 12px); min-height: calc(100svh - var(--barra-h) - 74px - var(--pestanas-h)); }
.heroe-kicker { font: 700 12.5px/1.3 var(--f-titulos); letter-spacing: .18em; text-transform: uppercase; opacity: .92; }
.heroe-titulo { font: 700 clamp(26px, 3.2vw, 40px)/1 var(--f-titulos); letter-spacing: -.05em; margin-top: 14px; }
.heroe-billy {
  display: grid; font: 400 clamp(64px, 9.4vw, 150px)/.86 'Billy Ohio', cursive; margin-top: 6px; letter-spacing: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28)); animation: aparece 1.4s cubic-bezier(.7, 0, .2, 1) .2s both; margin-bottom: .14em;
}
.heroe-billy span:last-child { padding-left: .02em; }
@keyframes aparece { from { clip-path: inset(-20% 110% -30% -10%); } to { clip-path: inset(-20% -10% -30% -10%); } }
.heroe-sub { font: 500 clamp(15px, 1.4vw, 18px)/1.5 var(--f-titulos); max-width: 42ch; margin-top: 18px; opacity: .95; }
.heroe .fila { margin-top: 24px; }
.btn-blanco { background: #fff; color: var(--gris-oscuro); }
.btn-borde { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.heroe-logo { display: block; width: 190px; height: auto; margin-top: 28px; border-radius: 2px; }
.heroe-arte { position: relative; align-self: end; width: 100%; max-width: 640px; aspect-ratio: 1 / 1; justify-self: end; }
.heroe-forma {
  position: absolute; inset: 4% 0 24% 12%; background: rgba(255, 255, 255, .3);
  -webkit-mask: var(--img-forma-1) center / contain no-repeat; mask: var(--img-forma-1) center / contain no-repeat;
  transform: translate(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 10px)) rotate(-12deg); transition: transform .4s ease-out; animation: respira 9s ease-in-out infinite alternate;
}
.heroe-foto {
  position: absolute; left: -2%; right: -6%; bottom: 0; width: 108%; max-width: none; height: auto;
  filter: drop-shadow(-14px -10px 0 #fff); transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -6px)); transition: transform .3s ease-out;
}
@keyframes respira { to { scale: 1.06; rotate: 6deg; } }
.flota { position: absolute; aspect-ratio: 1; background: #fff; -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat; pointer-events: none;
  transform: translate(calc(var(--mx, 0) * 20px), calc(var(--my, 0) * 20px)); transition: transform .5s ease-out; animation: flota var(--t, 6s) ease-in-out infinite alternate; }
@keyframes flota { from { translate: 0 0; rotate: -6deg; } to { translate: 0 -12px; rotate: 6deg; } }
.heroe.pausa .flota, .heroe.pausa .heroe-forma, .cinta.pausa .cinta-pista { animation-play-state: paused; }
/* Cinta de iconos */
.cinta { background: var(--cinta-fondo); overflow: hidden; border-block: 1px solid var(--cinta-borde); }
.cinta-pista { display: flex; gap: 34px; width: max-content; padding: 18px 0; animation: cinta 60s linear infinite; }
.cinta-pista span { width: 38px; height: 38px; flex: none; -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Bloques de inicio y tarjetas de herramientas */
.bloque-inicio { padding-block: clamp(36px, 6vw, 64px); }
.cab-seccion { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
.cab-seccion h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.045em; }
.filtros-herr { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filtros-herr button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--fondo-2); font: 700 13px/1 var(--f-titulos); color: var(--texto-2); }
.filtros-herr button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--texto-2)); }
.filtros-herr button[aria-pressed="true"] { background: var(--gris-oscuro); color: #fff; }
:root[data-tema-activo="oscuro"] .filtros-herr button[aria-pressed="true"] { background: #fff; color: var(--gris-oscuro); }
.filtros-herr button:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 2px; }
.rejilla-herr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.herr {
  position: relative; display: grid; grid-template-rows: auto 1fr; min-height: 100%; text-decoration: none; overflow: hidden;
  border-radius: 18px; background: var(--superficie); border: 1px solid var(--linea); transition: transform .2s, box-shadow .2s;
}
.herr-cara { position: relative; aspect-ratio: 16 / 9; background: var(--c); display: grid; place-items: center; overflow: hidden; }
.herr-cara::after { content: ""; position: absolute; inset: auto -10% -45% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.herr-ic { width: 44%; aspect-ratio: 1; background: var(--tinta, #fff); -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); position: relative; z-index: 1; }
.herr-num { position: absolute; top: 12px; left: 14px; font: 800 12px/1 var(--f-titulos); color: var(--tinta, #fff); opacity: .75; letter-spacing: .06em; }
.herr-txt { display: grid; gap: 4px; align-content: start; padding: 14px 16px 18px; }
.herr-txt b { font: 700 16px/1.2 var(--f-titulos); letter-spacing: -.02em; }
.herr-txt small { font-size: 13.5px; line-height: 1.4; color: var(--texto-2); }
.herr-nuevo { position: absolute; top: 10px; right: 10px; z-index: 2; font: 800 10px/1 var(--f-titulos); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: #fff; color: var(--gris-oscuro); }
.herr:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.tarjeta-guia { display: grid; gap: 6px; padding: 18px; border-radius: var(--radio); background: var(--fondo-2); text-decoration: none; transition: background .15s; }
.tarjeta-guia b { font: 700 16px/1.2 var(--f-titulos); }
.tarjeta-guia span { font-size: 14px; color: var(--texto-2); }

/* Scroll por secciones: cada vista se divide en «tramos» (js/app.js, sección 6).
   El desplazamiento es libre y, al detenerse cerca del inicio de un tramo,
   la página se ajusta suavemente a él (efecto imán). */
html.con-tramos { scroll-padding-top: calc(var(--barra-h) + env(safe-area-inset-top, 0px)); scroll-padding-bottom: var(--pestanas-h); }
.tramo { position: relative; }
#inicio > .tramo:first-child { min-height: calc(100svh - var(--barra-h) - env(safe-area-inset-top, 0px) - var(--pestanas-h)); }
.vista:not(#inicio) > .tramo { padding-block: clamp(24px, 4vw, 44px); }
.vista:not(#inicio) > .tramo + .tramo { border-top: 1px solid var(--linea); }
.tramo-final { display: flex; flex-direction: column; }
.tramo-final > .pie { margin-top: auto; }
.vista:not(#inicio) > .tramo-final { padding-bottom: 16px; }
.vista:not(#inicio) .pie { border-radius: var(--radio); margin-top: auto; }
.tramo-final > :nth-last-child(2) { margin-bottom: 32px; }
/* Puntos de navegación por secciones (escritorio) */
.puntos-nav { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 45; display: grid; gap: 10px; }
.puntos-nav button { all: unset; cursor: pointer; position: relative; width: 11px; height: 11px; border-radius: 50%; background: rgba(128, 128, 128, .55); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); transition: transform .2s, background .2s; }
.puntos-nav button[aria-current="true"] { background: var(--gris-oscuro); transform: scale(1.35); }
.puntos-nav button span { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 12px/1 var(--f-titulos); padding: 6px 9px; border-radius: 8px; background: var(--gris-oscuro); color: #fff; opacity: 0; pointer-events: none; transition: opacity .15s; }
.puntos-nav button:hover span, .puntos-nav button:focus-visible span { opacity: 1; }
.puntos-nav button:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
@media (max-width: 1099px) { .puntos-nav { display: none; } }

/* 7. VISTAS DE HERRAMIENTA ------------------------------------------------- */
.vista:not(#inicio) { max-width: 1240px; margin: 0 auto; padding: 0 var(--margen); }
.vcab { margin-bottom: clamp(20px, 3vw, 30px); display: grid; gap: 8px; max-width: 800px; }
.miga { font: 700 11.5px/1.2 var(--f-titulos); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.miga a { text-decoration: none; color: var(--acento); }
.vcab h1 { font-size: clamp(28px, 4.2vw, 46px); line-height: 1.02; letter-spacing: -.045em; }
[tabindex="-1"]:focus { outline: none; }
.entradilla { font-size: clamp(15px, 1.4vw, 17px); color: var(--texto-2); }
.entradilla b { color: var(--texto); }
.subtitulo { font-size: clamp(18px, 2vw, 22px); margin: clamp(28px, 4vw, 40px) 0 14px; }
.subtitulo .muted { font: 500 14px var(--f-titulos); letter-spacing: 0; }
.herramienta { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, 1fr); gap: clamp(16px, 2.6vw, 28px); align-items: start; }
.lienzo { display: grid; gap: 12px; min-width: 0; }
.panel { display: grid; gap: 14px; align-content: start; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(16px, 2vw, 22px); box-shadow: var(--sombra); min-width: 0; }
.escenario {
  border-radius: var(--radio); border: 1px solid var(--linea); display: grid; place-items: center; min-height: 300px;
  padding: clamp(14px, 3vw, 30px); background-color: var(--fondo-3); transition: background-color .3s; overflow: hidden;
}
.escenario canvas { max-width: 100%; max-height: 560px; width: auto; height: auto; display: block; }
.escenario.cuadros { background-color: var(--superficie); background-image: conic-gradient(var(--cuadros) 25%, transparent 0 50%, var(--cuadros) 0 75%, transparent 0); background-size: 22px 22px; }
.escenario.blanco { background: #fff; }
.escenario.arrastrando { outline: 3px dashed var(--aguamarina); outline-offset: -8px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.acciones:empty { display: none; }
.regla { margin-top: clamp(24px, 3vw, 36px); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo-2); padding: 0 18px; }
.regla summary { cursor: pointer; padding: 14px 0; font: 700 14.5px var(--f-titulos); list-style: none; display: flex; align-items: center; gap: 10px; }
.regla summary::-webkit-details-marker { display: none; }
.regla summary::before { content: "+"; width: 22px; height: 22px; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); display: grid; place-items: center; font-size: 15px; line-height: 1; }
.regla[open] summary::before { content: "−"; }
.regla[open] { padding-bottom: 16px; }
.regla > * + * { margin-top: 12px; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; }
.ref { all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--linea); background: var(--superficie); font: 600 12px/1 var(--f-titulos); color: var(--texto-2); }
.ref::before { content: "📄"; font-size: 11px; margin-right: 5px; filter: grayscale(1); }
.ref:focus-visible { outline: 2px solid var(--acento); }

/* 8. CADA HERRAMIENTA ------------------------------------------------------- */
/* Logo */
#logo-escenario { min-height: 320px; }
#logo-escenario img { width: 100%; max-width: var(--ancho-logo, 440px); height: auto; }
/* Logo sobre imagen */
.posiciones { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; }
.posiciones button { all: unset; cursor: pointer; width: 44px; height: 32px; border-radius: 8px; border: 1px solid var(--linea); background: var(--superficie); display: grid; place-items: center; }
.posiciones button::after { content: ""; width: 14px; height: 6px; border-radius: 2px; background: var(--texto-2); }
.posiciones button[aria-pressed="true"] { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, var(--superficie)); }
.posiciones button[aria-pressed="true"]::after { background: var(--acento); }
.posiciones button:focus-visible { outline: 2px solid var(--acento); }
/* Firma */
.firma-escenario { place-items: center start; overflow-x: auto; }
#firma-vista { color: #323232; }
/* Pie de financiadores */
.lista-logos { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.lista-logos li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo-2); }
.lista-logos img { width: 44px; height: 32px; object-fit: contain; background: #fff; border-radius: 6px; }
.lista-logos .datos { display: grid; gap: 4px; min-width: 0; }
.lista-logos input, .lista-logos select { padding: 5px 8px; font-size: 13px; border-radius: 8px; }
.lista-logos .botones { display: flex; gap: 2px; }
.lista-logos .botones button { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; }
.lista-logos .botones button:hover { background: var(--linea); }
.lista-logos .botones svg { width: 15px; height: 15px; }
/* Colores */
.muestra-color { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea); background: var(--superficie); box-shadow: var(--sombra); display: grid; grid-template-rows: auto 1fr; }
.muestra-color .bloque { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; box-shadow: inset 0 -1px 0 var(--linea); }
.muestra-color .bloque b { font: 700 15px/1.1 var(--f-titulos); }
.muestra-color .bloque span { font: 600 11.5px/1.2 var(--f-titulos); opacity: .85; }
.muestra-color .codigos { padding: 8px 10px; display: grid; gap: 1px; }
.muestra-color .codigos button { all: unset; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; margin: 0 -6px; border-radius: 6px; font: 500 12.5px/1.5 var(--f-titulos); font-variant-numeric: tabular-nums; }
.muestra-color .codigos button span:first-child { color: var(--texto-2); font-weight: 600; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.muestra-color .codigos button span:last-child { text-align: right; }
.muestra-color .codigos button:hover { background: var(--fondo-2); }
.muestra-color .codigos button:focus-visible { outline: 2px solid var(--acento); }
.mezcla { border-radius: var(--radio); padding: 28px; display: grid; align-content: space-between; gap: 20px; min-height: 240px; border: 1px solid var(--linea); transition: background .3s, color .3s; }
.mezcla-grande { font: 700 clamp(24px, 3.4vw, 38px)/1 var(--f-titulos); letter-spacing: -.05em; text-transform: uppercase; }
.mezcla-texto { font: 400 16px/1.5 var(--f-texto); }
.ratio { font: 700 28px/1 var(--f-titulos); letter-spacing: -.03em; color: var(--texto); }
.veredicto { display: flex; flex-wrap: wrap; gap: 8px; }
/* Editor de texto */
.texto-escenario { container-type: inline-size; place-items: center stretch; min-height: 300px; }
#tx-texto { width: 100%; outline: none; overflow-wrap: anywhere; white-space: pre-wrap; min-height: 1em; cursor: text; }
#tx-texto:empty::before { content: attr(data-placeholder); opacity: .45; }
.ficha-valores { font: 500 13px/1.6 var(--f-titulos); background: var(--fondo-2); border-radius: 12px; padding: 12px 14px; border: 1px solid var(--linea); display: grid; }
.avisos { font: 600 12.5px/1.45 var(--f-titulos); color: #b0101a; display: grid; gap: 4px; }
:root[data-tema-activo="oscuro"] .avisos { color: #ff8a92; }
.estilos { display: flex; flex-wrap: wrap; gap: 6px; }
.estilos button { all: unset; cursor: pointer; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--linea); background: var(--superficie); font: 600 12.5px/1 var(--f-titulos); }
.estilos .estilo-cita { font: 400 18px/.8 'Billy Ohio', cursive; padding: 6px 12px; }
.estilos button:focus-visible { outline: 2px solid var(--acento); }
.fuentes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fuentes button { all: unset; cursor: pointer; display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); min-width: 0; }
.fuentes button span { font-size: 21px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fuentes button small { font: 600 11px/1.2 var(--f-titulos); color: var(--texto-2); }
.fuentes button[aria-pressed="true"] { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.fuentes button:focus-visible { outline: 2px solid var(--acento); }
/* Iconos */
.barra-herr { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.buscador { flex: 1 1 240px; max-width: 420px; position: relative; }
.buscador svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .6; }
.buscador input { padding-left: 38px; }
.rejilla-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 12px; border-radius: var(--radio); background: var(--fondo-iconos, var(--superficie)); border: 1px solid var(--linea); transition: background .3s; }
.rejilla-iconos button { all: unset; cursor: pointer; aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; transition: background .15s, transform .15s; }
.rejilla-iconos button[aria-pressed="true"] { background: color-mix(in srgb, #808080 18%, transparent); box-shadow: inset 0 0 0 2px var(--acento); }
.rejilla-iconos button:focus-visible { outline: 2.5px solid var(--acento); }
.rejilla-iconos .ic { width: 68%; height: 68%; background: var(--color-iconos, #6cb9b7); -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat; transition: background .3s; }
.vacio { padding: 30px; text-align: center; color: var(--texto-2); grid-column: 1 / -1; }
/* Elementos */
.rejilla-recursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.rejilla-recursos.peq { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.recurso { display: grid; gap: 8px; align-content: start; }
.recurso button { all: unset; box-sizing: border-box; cursor: pointer; position: relative; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--fondo-2); border: 1px solid var(--linea); overflow: hidden; transition: transform .2s; }
.recurso button:focus-visible { outline: 2.5px solid var(--acento); }
.recurso .x { position: absolute; inset: 12%; background-size: contain; background-repeat: no-repeat; background-position: center; -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat; }
.recurso .x.color-fijo { -webkit-mask: none; mask: none; }
.recurso span.nombre { font: 600 13px/1.3 var(--f-titulos); }
/* Letras */
.filtro-letras { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.filtro-letras button { all: unset; cursor: pointer; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; display: grid; place-items: center; font: 700 13px/1 var(--f-titulos); background: var(--superficie); border: 1px solid var(--linea); }
.filtro-letras button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: transparent; }
.filtro-letras button:focus-visible { outline: 2px solid var(--acento); }
.rejilla-letras { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.rejilla-letras button { all: unset; cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; transition: background .15s, transform .15s; }
.rejilla-letras button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--acento); }
.rejilla-letras button:focus-visible { outline: 2.5px solid var(--acento); }
.rejilla-letras span { width: 84%; height: 84%; background: var(--imagen) center / contain no-repeat; }
/* Formatos y rostros */
canvas.arrastrable { cursor: grab; touch-action: none; }
canvas.arrastrable:active { cursor: grabbing; }
canvas.dibujable { cursor: crosshair; touch-action: none; }
/* Carrusel */
.soltar-zona { position: relative; display: grid; place-items: center; min-height: 260px; border-radius: var(--radio); border: 2px dashed color-mix(in srgb, var(--aguamarina) 55%, transparent); background: var(--superficie); cursor: pointer; padding: 18px; }
.soltar-zona.arrastrando { border-color: var(--aguamarina); background: color-mix(in srgb, var(--aguamarina) 8%, var(--superficie)); }
.soltar-zona:focus-within { outline: 2.5px solid var(--acento); outline-offset: 3px; }
.soltar-zona.cargada { border-style: solid; border-color: var(--linea); }
.soltar-zona input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.soltar-vacio { display: grid; justify-items: center; gap: 8px; text-align: center; font-family: var(--f-titulos); }
.soltar-vacio svg { width: 34px; height: 34px; color: var(--aguamarina); }
.ca-previa { position: relative; display: block; width: 100%; }
.ca-previa img { width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: 8px; }
.ca-lineas { position: absolute; inset: 0; }
.ca-linea { position: absolute; top: 0; bottom: 0; border-left: 2px dashed #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.ca-num { position: absolute; top: 8px; transform: translateX(-50%); min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--rojo); color: #fff; font: 700 12px/26px var(--f-titulos); text-align: center; }
.pasos { display: flex; gap: 8px; align-items: center; }
.pasos input { text-align: center; font: 700 18px/1 var(--f-titulos); max-width: 90px; }
.pasos .ibtn { font: 700 20px/1 var(--f-titulos); }
.ca-resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr)); gap: 14px; margin-top: 22px; }
.ca-resultados:empty { display: none; }
.ca-parte { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; display: grid; gap: 10px; box-shadow: var(--sombra); }
.ca-parte img { width: 100%; height: auto; max-height: 260px; object-fit: contain; border-radius: 8px; background: var(--fondo-2); }
/* Contorno */
.miniaturas { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: thin; }
.miniaturas button { all: unset; cursor: pointer; flex: none; width: 68px; height: 68px; border-radius: 12px; background: var(--fondo-3) var(--imagen) center / contain no-repeat; box-shadow: inset 0 0 0 1px var(--linea); }
.miniaturas button[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--acento); }
.miniaturas button:focus-visible { outline: 2.5px solid var(--acento); }
/* Plantillas y documentos */
.plantilla { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); overflow: hidden; }
.plantilla-vista { all: unset; cursor: zoom-in; position: relative; display: block; aspect-ratio: 4 / 3; background: var(--fondo-3); overflow: hidden; }
.plantilla-vista img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.plantilla-vista .cuenta { position: absolute; right: 10px; bottom: 10px; font: 700 11.5px/1 var(--f-titulos); padding: 6px 9px; border-radius: 999px; background: rgba(50, 50, 50, .82); color: #fff; }
.plantilla-vista:focus-visible { outline: 2.5px solid var(--acento); outline-offset: -3px; }
.plantilla-miniaturas { display: flex; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: thin; background: var(--fondo-2); }
.plantilla-miniaturas button { all: unset; cursor: pointer; flex: none; width: 54px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--fondo-3); box-shadow: inset 0 0 0 1px var(--linea); }
.plantilla-miniaturas button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--acento); }
.plantilla-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.plantilla-txt { padding: 16px 18px 18px; display: grid; gap: 10px; align-content: start; }
.plantilla-txt h3 { font-size: 17px; }
.plantilla-txt p { font-size: 14px; color: var(--texto-2); }
.descargas { display: grid; gap: 6px; }
.descargas a, .lista-descargas a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px; text-decoration: none;
  background: var(--fondo-2); font: 600 13px/1.3 var(--f-titulos);
}
.descargas a .tipo, .lista-descargas a .tipo { flex: none; font: 800 10px/1 var(--f-titulos); letter-spacing: .06em; padding: 5px 6px; border-radius: 6px; color: #fff; background: #2b579a; }
.descargas a .tipo.ppt { background: #c43e1c; }
.descargas a svg, .lista-descargas a svg { margin-left: auto; width: 16px; height: 16px; opacity: .7; }
.lista-descargas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
/* Ejemplos de diseños */
.rejilla-ejemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.ejemplo { display: grid; gap: 8px; align-content: start; margin: 0; }
.ejemplo button { all: unset; box-sizing: border-box; cursor: zoom-in; display: block; width: 100%; border-radius: 14px; overflow: hidden; aspect-ratio: 9 / 16; background: var(--fondo-3); box-shadow: 0 0 0 1px var(--linea), 0 14px 30px -18px rgba(0, 0, 0, .45); }
.ejemplo button img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ejemplo button:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 3px; }
.ejemplo .fila { justify-content: space-between; flex-wrap: nowrap; gap: 6px; }
.ejemplo b { font: 600 13px/1.3 var(--f-titulos); }
.ejemplo .ibtn { width: 36px; height: 36px; }

/* 9. GUÍA Y MANUAL ---------------------------------------------------------- */
.esencial .tarjeta { border-top: 4px solid var(--c, var(--acento)); display: grid; gap: 8px; align-content: start; }
.esencial .tarjeta a { font: 700 13px var(--f-titulos); color: var(--acento); text-decoration: none; }
.figura { margin: 0; display: grid; gap: 10px; align-content: start; }
.figura figcaption { font-size: 13.5px; color: var(--texto-2); }
.figura figcaption b { color: var(--texto); }
.captura { all: unset; cursor: zoom-in; display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); background: #fff; transition: transform .2s; }
.captura img { width: 100%; height: auto; aspect-ratio: 842 / 595; object-fit: cover; }
.captura:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 3px; }
.caso { margin: 0; display: grid; gap: 10px; align-content: start; }
.caso-img { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--linea); background: #ededed; }
.caso-img img { width: 100%; height: auto; }
.caso-img.si { aspect-ratio: 200 / 117; display: grid; place-items: center; }
.caso-img.si img { width: 62%; }
.caso-img .sello { position: absolute; top: 10px; left: 10px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.caso figcaption { font: 600 13.5px/1.4 var(--f-titulos); }
.familia { display: grid; gap: 12px; align-content: start; }
.familia .muestra { min-height: 100px; display: flex; align-items: center; border-radius: 10px; background: var(--fondo-2); padding: 16px; overflow: hidden; }
.jerarquia { display: grid; grid-template-columns: 210px minmax(0, 1fr); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); overflow: hidden; }
.jerarquia > div { padding: 18px 20px; border-bottom: 1px solid var(--linea); }
.jerarquia > div:nth-last-child(-n+2) { border-bottom: 0; }
.j-k { font: 600 13px/1.35 var(--f-titulos); color: var(--rojo); background: var(--fondo-2); display: grid; gap: 4px; align-content: start; }
.j-k span { color: var(--texto-2); font-weight: 500; font-size: 12px; }
.j-v { display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.ej-destacado { font: 700 clamp(18px, 2.4vw, 28px)/1.1 var(--f-titulos); letter-spacing: -.04em; color: var(--rojo); text-transform: uppercase; }
.ej-titulo { font: 700 clamp(18px, 2.2vw, 26px)/1.2 var(--f-titulos); letter-spacing: -.03em; color: var(--rojo); }
.ej-parrafo { font: 400 16px/1.6 var(--f-texto); }
.ej-cita { font: 400 clamp(30px, 4vw, 46px)/1 'Billy Ohio', cursive; color: var(--aguamarina); }
.paso-guia { display: flex; justify-content: space-between; gap: 12px; margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--linea); }
.paso-guia a { display: grid; gap: 2px; text-decoration: none; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--linea); background: var(--superficie); max-width: 48%; }
.paso-guia a small { font: 600 11px/1.2 var(--f-titulos); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.paso-guia a b { font: 700 15px/1.25 var(--f-titulos); }
.paso-guia a.sig { margin-left: auto; text-align: right; }
.checklist { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: start; }
.lista-control { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.lc-grupo { font: 700 11px/1 var(--f-titulos); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); padding: 14px 12px 6px; }
.lista-control label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; cursor: pointer; font-size: 14.5px; }
.lista-control input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--texto-2); display: grid; place-items: center; margin: 1px 0 0; }
.lista-control input:checked { background: var(--acento); border-color: var(--acento); }
.lista-control input:checked::after { content: "✓"; color: var(--sobre-acento); font: 700 13px/1 var(--f-titulos); }
.lista-control input:checked + span { text-decoration: line-through; color: var(--texto-2); }
.progreso-control { display: flex; gap: 20px; align-items: center; position: sticky; top: calc(var(--barra-h) + 16px); }
.anillo { --v: 0; width: 112px; height: 112px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--acento) calc(var(--v) * 1%), var(--linea) 0); }
.anillo div { width: 88px; height: 88px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; font: 700 22px/1 var(--f-titulos); }
.filtro-capitulos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rejilla-paginas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.rejilla-paginas button { all: unset; cursor: zoom-in; display: grid; gap: 6px; align-content: start; }
.rejilla-paginas img { width: 100%; height: auto; aspect-ratio: 842 / 595; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px var(--linea); background: var(--fondo-3); transition: transform .2s; }
.rejilla-paginas b { font: 700 11px/1.2 var(--f-titulos); letter-spacing: .06em; color: var(--texto-2); text-transform: uppercase; }
.rejilla-paginas b i { font-style: normal; display: block; margin-top: 2px; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--texto); font-weight: 600; }
.rejilla-paginas button:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 3px; border-radius: 8px; }
.lista-botones { display: grid; gap: 8px; align-content: start; }
.lista-botones .btn { justify-content: flex-start; }
.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 28px var(--margen); border-top: 1px solid var(--linea); background: var(--fondo-2); font: 500 13px/1.5 var(--f-titulos); color: var(--texto-2); }

/* 10. BANDEJA, BUSCADOR, VISOR Y AVISOS ----------------------------------- */
.bandeja {
  position: fixed; left: 50%; bottom: calc(16px + var(--pestanas-h) + env(safe-area-inset-bottom, 0px)); z-index: 70; width: min(620px, calc(100% - 24px));
  transform: translate(-50%, 150%); visibility: hidden; transition: transform .35s cubic-bezier(.3, .8, .2, 1), visibility 0s linear .35s;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 48px 12px 12px;
  background: var(--cristal); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--linea); border-radius: 20px; box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .35);
}
.bandeja.abierta { transform: translate(-50%, 0); visibility: visible; transition: transform .35s cubic-bezier(.3, .8, .2, 1), visibility 0s; }
.bandeja-previa { width: 64px; height: 64px; border-radius: 12px; background: var(--fondo-3); display: grid; place-items: center; overflow: hidden; }
.bandeja-previa canvas { max-width: 56px; max-height: 56px; }
.bandeja-info { display: grid; gap: 8px; min-width: 0; }
.bandeja-info b { font: 700 14px/1.2 var(--f-titulos); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandeja .chip { width: 24px; height: 24px; }
.bandeja-cerrar { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 9px; }
dialog { border: 0; padding: 0; background: transparent; color: var(--texto); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(20, 20, 20, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.buscador-caja { width: min(640px, calc(100vw - 24px)); margin: min(12vh, 100px) auto 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); overflow: hidden; }
.buscador-caja input { border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; padding: 18px 20px; font-size: 17px; box-shadow: none !important; }
.buscador-caja ul { list-style: none; margin: 0; padding: 8px; max-height: min(56vh, 440px); overflow: auto; overscroll-behavior: contain; }
.buscador-caja li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; font: 500 14.5px/1.3 var(--f-titulos); }
.buscador-caja li[aria-selected="true"] { background: var(--acento); color: var(--sobre-acento); }
.buscador-caja li .tipo { margin-left: auto; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
.buscador-caja li .mini { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--fondo-3); }
.buscador-caja li .mini.ic { border-radius: 0; background: currentColor; -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat; }
.buscador-pie { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--linea); font: 500 12px/1 var(--f-titulos); color: var(--texto-2); }
.visor { width: min(96vw, 1200px); height: min(94vh, 94dvh); margin: 3vh auto 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.visor-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; font: 600 14px/1.3 var(--f-titulos); }
.visor-barra .ibtn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); color: #fff; }
.visor-img { display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: pan-y; }
.visor-img img { max-width: 100%; max-height: calc(min(94vh, 94dvh) - 120px); object-fit: contain; border-radius: 8px; background: #fff; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .6); }
.visor-nav { display: flex; justify-content: center; gap: 10px; }
.visor-nav .ibtn { background: #fff; color: #323232; }
.avisos-flotantes { position: fixed; top: calc(var(--barra-h) + 12px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 90; display: grid; gap: 8px; pointer-events: none; }
.toast { background: var(--gris-oscuro); color: #fff; font: 600 13.5px/1.35 var(--f-titulos); padding: 11px 14px; border-radius: 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); animation: entra .3s ease-out both; max-width: 340px; }
.toast.sale { animation: sale .3s ease-in both; }
@keyframes entra { from { opacity: 0; transform: translateY(-8px); } }
@keyframes sale { to { opacity: 0; transform: translateY(-8px); } }

/* 11. ADAPTACIÓN POR DISPOSITIVO ------------------------------------------ */

/* Ratón / trackpad: efectos al pasar por encima y textos de teclado */
.solo-tactil { display: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 8px 20px -8px var(--acento); transform: translateY(-1px); }
  .btn-fantasma:hover { box-shadow: inset 0 0 0 1.5px var(--texto); }
  .ibtn:hover { transform: translateY(-1px); }
  .herr:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .35); }
  .herr:hover .herr-ic { transform: scale(1.12) rotate(-6deg); }
  .tarjeta-guia:hover { background: var(--fondo-3); }
  .paso-guia a:hover { border-color: var(--texto-2); }
  .ejemplo button:hover img, .plantilla-vista:hover img { transform: scale(1.03); }
  .rejilla-iconos button:hover { background: color-mix(in srgb, #808080 14%, transparent); transform: scale(1.04); }
  .rejilla-letras button:hover { background: var(--fondo-3); transform: scale(1.06) rotate(-2deg); }
  .recurso button:hover, .captura:hover { transform: translateY(-2px); }
  .rejilla-paginas button:hover img { transform: translateY(-3px); }
  .plantilla-img button:hover img { transform: scale(1.04); }
  .enlaces-canva a:hover { background: color-mix(in srgb, var(--aguamarina) 30%, var(--superficie)); }
  .ref:hover { color: var(--texto); border-color: var(--texto-2); }
}
/* Pantallas táctiles: objetivos más grandes y sin textos de teclado */
@media (pointer: coarse) {
  .solo-raton, .solo-teclado { display: none !important; }
  .solo-tactil { display: revert; }
  .btn { min-height: 46px; }
  .btn-peq { min-height: 42px; }
  .ibtn { width: 44px; height: 44px; }
  .chip { width: 34px; height: 34px; }
  .chips { gap: 10px; }
  .seg button { padding: 11px 14px; }
  .ref { min-height: 34px; }
  .menu-nav a { padding: 11px 12px; }
  .filtro-letras button { min-width: 38px; height: 38px; }
  input[type=range] { height: 32px; }
  .lista-logos .botones button { width: 36px; height: 36px; }
  .posiciones button { height: 40px; }
}
/* Pantallas grandes */
@media (min-width: 1600px) {
  .envoltura, .vista:not(#inicio) { max-width: 1440px; }
  .rejilla-herr { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Escritorio: el menú abierto empuja el contenido en lugar de taparlo */
@media (min-width: 1100px) {
  html.menu-abierto .pagina { margin-left: var(--menu-w); }
  html.menu-abierto .bandeja { left: calc(50% + var(--menu-w) / 2); width: min(620px, calc(100% - var(--menu-w) - 24px)); }
  .velo { display: none; }
}
/* Tablet y portátiles pequeños */
@media (max-width: 1099px) {
  .rejilla-herr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .herramienta { grid-template-columns: 1fr; }
  /* La vista previa se queda fija arriba mientras se ajustan los controles */
  .herramienta > .lienzo { display: contents; }
  .herramienta > .lienzo > .escenario, .herramienta > .lienzo > .soltar-zona {
    position: sticky; top: calc(var(--barra-h) + env(safe-area-inset-top, 0px) + 8px); z-index: 5;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); min-height: 0; max-height: 44svh;
  }
  .herramienta > .lienzo > .escenario canvas, .herramienta > .lienzo > .escenario > img { max-height: calc(44svh - 40px); }
  .texto-escenario { min-height: 180px !important; overflow-y: auto; }
  #logo-escenario { min-height: 0; padding-block: 36px; }
  .r4, .r5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .checklist { grid-template-columns: 1fr; }
  .progreso-control { order: -1; position: static; }
}
@media (max-width: 820px) {
  .heroe-in { grid-template-columns: 1fr; padding-top: 28px; align-content: space-between; }
  .heroe-billy { font-size: clamp(64px, 15vw, 128px); }
  .heroe-arte { max-width: 520px; justify-self: center; aspect-ratio: 1 / .78; margin-top: 8px; }
  .flota { display: none; }
  .rejilla-herr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r3, .r4, .r5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buscar { min-width: 0; }
  .buscar span, .buscar kbd { display: none; }
}
/* Móviles */
@media (max-width: 700px) {
  :root { --barra-h: 56px; --pestanas-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .barra { gap: 8px; }
  .barra-logo img { height: 28px; }
  .barra-titulo { font-size: 13px; }
  .pestanas {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    height: var(--pestanas-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--cristal); border-top: 1px solid var(--linea); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .pestanas a, .pestanas button { all: unset; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 3px; font: 600 11px/1 var(--f-titulos); color: var(--texto-2); }
  .pestanas svg { width: 22px; height: 22px; }
  .pestanas [aria-current="page"] { color: var(--acento); }
  .menu { bottom: var(--pestanas-h); width: min(320px, 88vw); }
  .menu-pie { padding-bottom: 12px; }
  .r2, .r3 { grid-template-columns: 1fr; }
  .dos { grid-template-columns: 1fr 1fr; }
  .rejilla-herr { gap: 10px; }
  .herr { border-radius: 14px; }
  .herr-txt { padding: 10px 12px 14px; }
  .herr-txt b { font-size: 14.5px; }
  .herr-txt small { display: none; }
  .filtros-herr { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); scrollbar-width: none; }
  .filtros-herr button { flex: none; }
  .heroe-billy { font-size: clamp(58px, 17vw, 90px); }
  .heroe-arte { max-width: 340px; }
  .heroe-in { min-height: 0; }
  .heroe-logo { width: 160px; margin-top: 22px; }
  .rejilla-iconos { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 4px; padding: 8px; }
  .rejilla-letras { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
  .rejilla-paginas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jerarquia { grid-template-columns: 1fr; }
  .jerarquia > div:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
  .bandeja { grid-template-columns: 52px minmax(0, 1fr); padding: 10px 44px 10px 10px; }
  .bandeja-previa { width: 52px; height: 52px; }
  .bandeja-previa canvas { max-width: 46px; max-height: 46px; }
  .avisos-flotantes { left: 12px; right: 12px; top: auto; bottom: calc(var(--pestanas-h) + 12px); }
  .toast { max-width: none; }
  .paso-guia a { max-width: 50%; padding: 10px 12px; }
  .pie { padding-bottom: 20px; }
  .escenario { padding: 10px; }
  .herramienta > .lienzo > .escenario, .herramienta > .lienzo > .soltar-zona { max-height: 38svh; }
  .herramienta > .lienzo > .escenario canvas, .herramienta > .lienzo > .escenario > img { max-height: calc(38svh - 24px); }
  .texto-escenario { min-height: 140px !important; }
  .bandeja .acciones { flex-wrap: nowrap; }
  .bandeja .btn { min-height: 40px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 380px) {
  .barra-titulo { display: none; }
}
/* Móvil en horizontal: el visor ocupa toda la pantalla */
@media (max-height: 500px) and (orientation: landscape) {
  .visor { height: 96dvh; margin-top: 2dvh; }
  .visor-img img { max-height: calc(96dvh - 100px); }
  .herramienta > .lienzo > .escenario { max-height: 70svh; }
}
/* Modo de alto contraste del sistema */
@media (forced-colors: active) {
  .chip, .acentos button { forced-color-adjust: none; }
  .btn, .seg button[aria-pressed="true"] { border: 2px solid ButtonText; }
}

/* 12. MOVIMIENTO REDUCIDO E IMPRESIÓN ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .barra, .menu, .velo, .pestanas, .bandeja, .avisos-flotantes, .acciones, .panel, .heroe .fila { display: none !important; }
  .pagina { margin: 0 !important; }
  body { padding: 0; }
  .regla { break-inside: avoid; }
  details.regla:not([open]) > :not(summary) { display: block; }
}