@import url(fuentes.css);
/* Sin Tropiezos. Columna de lectura única; el foco de teclado es amarillo y negro,
   muy visible a propósito: la web tiene que cumplir lo que vende. */
:root {
  --fondo: #f6f8fa;
  --papel: #ffffff;
  --tinta: #14212e;
  --suave: #4a5866;
  --linea: #d3dbe3;
  --acento: #0e6470;          /* 6,6:1 sobre blanco */
  --acento-tinta: #ffffff;
  --acento-suave: #e3f1f2;
  --bien: #17703a;
  --medio: #8a5300;
  --mal: #b42318;
  --foco: #ffd23f;
  --codigo: #eef2f5;
  --f-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-dato: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e161e; --papel: #15202b; --tinta: #e8eef3; --suave: #a9b6c2; --linea: #2b3a48;
    --acento: #5cc3cf; --acento-tinta: #06252a; --acento-suave: #133238;
    --bien: #5fd38a; --medio: #f0b24a; --mal: #ff8a7a; --codigo: #1c2a37;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 1.0625rem/1.6 var(--f-texto);
}
a { color: var(--acento); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; box-shadow: 0 0 0 6px var(--foco); }
img { max-width: 100%; height: auto; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; background: var(--foco); color: #000; padding: .6rem 1rem; z-index: 10; }
.saltar:focus { top: 1rem; }

.envoltura { max-width: 64rem; margin: 0 auto; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.estrecha { max-width: 44rem; }

/* Cabecera y pie */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--papel); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.marca { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.15rem; color: var(--tinta); text-decoration: none; }
.marca svg { flex: none; }
.cabecera nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.cabecera nav a { color: var(--tinta); text-decoration: none; font-weight: 700; font-size: .95rem; }
.cabecera nav a:hover { text-decoration: underline; }
/* Selector de idioma: un desplegable nativo (<details>), que no necesita JavaScript.
   La lengua actual va subrayada y en negrita (no solo por el color) */
.idiomas { position: relative; }
.idiomas summary { cursor: pointer; font-weight: 700; font-size: .95rem; padding: .3rem .1rem; color: var(--tinta); }
.idiomas ul { position: absolute; right: 0; top: 100%; z-index: 5; margin: .3rem 0 0; padding: .4rem 0; list-style: none;
              min-width: 10rem; background: var(--papel); border: 1px solid var(--linea); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cabecera .idiomas nav { display: block; }
.idiomas li a { display: block; padding: .45rem 1rem; color: var(--tinta); text-decoration: none; font-weight: 400; }
.idiomas li a:hover { text-decoration: underline; }
.idiomas a[aria-current] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media print { .idiomas { display: none; } }
.pie { margin-top: 4rem; border-top: 1px solid var(--linea); color: var(--suave); font-size: .9rem; }
.pie .envoltura { padding-block: 1.5rem 2.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.pie a { color: var(--suave); }

/* Tipografía */
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); letter-spacing: -.01em; margin: 0 0 1rem; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); margin: 0 0 .8rem; }
h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; max-width: 66ch; }
.entradilla { font-size: 1.2rem; color: var(--suave); }
.etiqueta { font: 500 .78rem var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin: 0 0 .6rem; }

/* Portada */
.portada { padding-block: 3.5rem 2.5rem; }
.portada .ley { display: inline-block; font: 500 .82rem var(--f-dato); background: var(--acento-suave); color: var(--tinta); padding: .3rem .6rem; border-radius: 4px; margin-bottom: 1.2rem; }

.formulario { background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 1.4rem; display: grid; gap: 1rem; margin-top: 1.8rem; box-shadow: 0 1px 2px rgba(20, 33, 46, .06); }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 700; }
.campo .ayuda { color: var(--suave); font-size: .92rem; margin: 0; }
input[type=text], input[type=email], input[type=url] {
  font: inherit; color: var(--tinta); background: var(--papel); width: 100%;
  border: 2px solid var(--suave); border-radius: 6px; padding: .7rem .8rem; min-height: 3rem;
}
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.casilla input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--acento); }
.fila-boton { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }
.boton {
  font: 700 1.05rem var(--f-texto); background: var(--acento); color: var(--acento-tinta); border: 0;
  border-radius: 6px; padding: .85rem 1.4rem; min-height: 3rem; cursor: pointer; text-decoration: none; display: inline-block;
}
.boton:hover { filter: brightness(.92); }
.boton.secundario { background: transparent; color: var(--acento); border: 2px solid var(--acento); }
.error { border-left: 4px solid var(--mal); background: var(--papel); padding: .7rem 1rem; color: var(--tinta); margin: 0; }

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; padding: 0; list-style: none; counter-reset: paso; margin: 0; }
.pasos li { counter-increment: paso; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 1.1rem 1.2rem; }
.pasos li::before { content: counter(paso); font: 500 .9rem var(--f-dato); display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--acento); color: var(--acento-tinta); margin-bottom: .6rem; }
.pasos p { margin: 0; color: var(--suave); }
.bloque { padding-block: 2.2rem; }
.bloque + .bloque { border-top: 1px solid var(--linea); }
.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem 2.5rem; }
.precio { background: var(--papel); border: 2px solid var(--acento); border-radius: 10px; padding: 1.4rem; }
.precio .cifra { font: 500 2.4rem var(--f-dato); margin: .2rem 0 .6rem; }
.lista-marcas { padding-left: 1.2rem; margin: 0 0 1rem; }
.lista-marcas li { margin-bottom: .35rem; }
details.pregunta { border-bottom: 1px solid var(--linea); padding: .9rem 0; }
details.pregunta summary { font-weight: 700; cursor: pointer; }
details.pregunta p { margin: .6rem 0 0; color: var(--suave); }

/* Resultado */
.resultado-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem 2rem; align-items: center; padding-block: 2.5rem 1.5rem; }
@media (max-width: 40rem) { .resultado-cab { grid-template-columns: minmax(0, 1fr); } }
.nota { --color: var(--mal); width: 9.5rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: conic-gradient(var(--color) calc(var(--valor) * 1%), var(--linea) 0); position: relative; }
.nota::before { content: ""; position: absolute; inset: .75rem; border-radius: 50%; background: var(--fondo); }
.nota > * { position: relative; }
.nota b { font: 500 2.8rem/1 var(--f-dato); color: var(--tinta); }
.nota span { font-size: .85rem; color: var(--suave); }
.nota.bien { --color: var(--bien); } .nota.medio { --color: var(--medio); }
.sitio-analizado { font: 500 1rem var(--f-dato); color: var(--suave); overflow-wrap: anywhere; margin: 0 0 .3rem; }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; margin: 0 0 2rem; }
.cifras div { background: var(--papel); padding: .9rem 1rem; }
.cifras b { display: block; font: 500 1.5rem var(--f-dato); font-variant-numeric: tabular-nums; }
.cifras span { color: var(--suave); font-size: .88rem; }
@media (max-width: 40rem) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.captura { border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; margin: 0 0 2rem; max-height: 22rem; }
.captura img { display: block; width: 100%; }

.fallos { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .8rem; }
.fallo { background: var(--papel); border: 1px solid var(--linea); border-left: 5px solid var(--mal); border-radius: 8px; padding: 1rem 1.2rem; }
.fallo.serious { border-left-color: var(--medio); } .fallo.moderate, .fallo.minor { border-left-color: var(--suave); }
.fallo .cuantos { font: 500 .85rem var(--f-dato); color: var(--suave); }
.fallo p { margin: .3rem 0 0; }
.chip { display: inline-block; font: 500 .72rem var(--f-dato); letter-spacing: .05em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 4px; border: 1.5px solid currentColor; margin-right: .4rem; }
.chip.critical { color: var(--mal); } .chip.serious { color: var(--medio); } .chip.moderate, .chip.minor { color: var(--suave); }
.bloqueados { position: relative; }
.bloqueados .fallo { filter: blur(5px); user-select: none; }
.candado { background: var(--papel); border: 2px solid var(--acento); border-radius: 10px; padding: 1.4rem; display: grid; gap: .6rem; margin-top: 1rem; }
.candado ul { margin: 0 0 .4rem; padding-left: 1.2rem; }
.espera { text-align: center; padding-block: 4rem; }
.girando { width: 3rem; height: 3rem; border-radius: 50%; border: 4px solid var(--linea); border-top-color: var(--acento); margin: 0 auto 1.5rem; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; border-top-color: var(--linea); } }

/* Informe completo */
.informe h2 { margin-top: 2rem; }
.regla { background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; break-inside: avoid; }
.regla .como { background: var(--acento-suave); border-radius: 6px; padding: .7rem .9rem; margin: .7rem 0; }
.regla code, .ejemplo code { font: .82rem/1.45 var(--f-dato); background: var(--codigo); padding: .1rem .3rem; border-radius: 3px; overflow-wrap: anywhere; }
.ejemplo { margin: .5rem 0 0; font-size: .9rem; }
.ejemplo small { color: var(--suave); display: block; overflow-wrap: anywhere; }
.tabla-paginas { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla-paginas th, .tabla-paginas td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--linea); overflow-wrap: anywhere; }
.tabla-paginas td:last-child, .tabla-paginas th:last-child { text-align: right; font-family: var(--f-dato); }
.aviso { background: var(--acento-suave); border-radius: 8px; padding: 1rem 1.2rem; }

@media print {
  .cabecera nav, .pie, .no-imprimir { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
}

/* ---------- Portada mínima ----------
   Blanco, texto negro, una columna alineada a la izquierda y un solo acento: el botón. */
.precio .cifra .ayuda { font: 1rem var(--f-texto); color: var(--suave); }
@media (max-width: 40rem) { .cabecera .envoltura { flex-wrap: wrap; } .cabecera nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; } .cabecera nav a { margin: 0; } }
.minima .cabecera { border-bottom: 0; background: transparent; }
.inicio { padding-block: 5rem 3rem; }
.inicio h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; max-width: 16ch; margin: 0 0 1.2rem; }
.inicio .entradilla { max-width: 34rem; margin-bottom: 2.2rem; }
.sobrio { font: 500 .9rem var(--f-dato); color: var(--suave); margin: 0 0 1.5rem; }
.analizar { display: grid; gap: .7rem; max-width: 34rem; }
.analizar-fila { display: flex; gap: .5rem; }
.analizar-fila input { flex: 1; min-width: 0; }
.analizar-fila .boton { flex: none; }
.analizar .nota-pie { color: var(--suave); font-size: .92rem; margin: 0; }
.analizar details { color: var(--suave); font-size: .95rem; }
.analizar details summary { cursor: pointer; width: fit-content; }
.analizar details[open] { display: grid; gap: .7rem; }
@media (max-width: 30rem) { .analizar-fila { flex-direction: column; } }
.raya { border: 0; border-top: 1px solid var(--linea); margin: 0; }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding: 0; margin: 0; list-style: none; }
@media (max-width: 48rem) { .tres { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.tres h3 { font-size: 1.05rem; margin: 0 0 .35rem; }
.tres p { color: var(--suave); margin: 0; }
.tres small { display: block; font: 500 .8rem var(--f-dato); color: var(--suave); margin-bottom: .6rem; }
.seccion { padding-block: 3.5rem; }
.seccion h2 { font-size: 1.5rem; }
.linea-precio { font-size: 1.15rem; max-width: 40rem; }
.linea-precio b { font-family: var(--f-dato); font-weight: 500; }
.minima details.pregunta { max-width: 44rem; }

/* ---------- Portada "carta": voz propia ----------
   Titulares con la serif del sistema (como una carta), texto en una columna de lectura
   y el ejemplo de lo que oye un lector de pantalla como pieza central. */
.carta { --f-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif; }
.carta h1, .carta h2 { font-family: var(--f-serif); font-weight: 700; letter-spacing: -.01em; }
.carta .inicio { padding-block: 4rem 2rem; }
.carta .inicio .envoltura, .texto-corrido { max-width: 44rem; margin-left: max(0px, calc((100% - 64rem) / 2)); }
@media (prefers-color-scheme: light) { .carta { --fondo: #ffffff; } }
.carta h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.12; max-width: 20ch; }
.carta h2 { font-size: 1.6rem; margin-bottom: 1rem; }
.texto-corrido p { font-size: 1.08rem; }

.oido { margin: 2rem 0 2.2rem; padding: 0; }
.oido-lista { list-style: none; margin: 0; padding: .4rem 0 .4rem 1.1rem; border-left: 2px solid var(--linea); display: grid; gap: .25rem;
  font: 500 1rem/1.5 var(--f-dato); counter-reset: oido; }
.oido-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; }
.oido-lista em { font: italic 1rem var(--f-serif); color: var(--mal); }
.oido-lista em::before { content: "← "; content: "← " / ""; font-style: normal; }   /* la flecha no se lee */
.oido figcaption, .oido-pie { margin-top: .9rem; font-size: .9rem; color: var(--suave); max-width: 36rem; }

.carta .seccion { padding-block: 2.5rem; }
.carta .seccion + .seccion { border-top: 1px solid var(--linea); }
.carta .inicio + .seccion { border-top: 1px solid var(--linea); }
.dos-lineas { margin: 0 0 1rem; display: grid; gap: 1rem; }
.dos-lineas div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.dos-lineas dt { font: 500 1.05rem var(--f-dato); }
.dos-lineas dd { margin: 0; }

/* ---------- Resultado e informe, mismo tono de carta ---------- */
.carta .resultado, .carta .informe { padding-block: 3rem 1rem; }
.cab-resultado .nota-linea { display: flex; align-items: center; gap: 1.5rem; margin: .5rem 0 1.2rem; }
.cab-resultado .nota { width: 6.5rem; flex: none; }
.cab-resultado .nota b { font-size: 2rem; }
.cab-resultado .nota::before { inset: .55rem; background: var(--fondo); }
.cab-resultado h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); margin: 0; max-width: 22ch; }
@media (max-width: 30rem) { .cab-resultado .nota-linea { flex-direction: column; align-items: flex-start; } }
.cab-resultado p { font-size: 1.08rem; }
.seccion-r { padding-block: 2rem; border-top: 1px solid var(--linea); }
.seccion-r h2 { font-size: 1.4rem; }
.seccion-r .oido { margin: 1rem 0 0; }
.arreglos { margin: 0; padding-left: 1.4rem; display: grid; gap: 1rem; }
.arreglos li::marker { font-family: var(--f-dato); color: var(--suave); }
.arreglos p { margin: 0; font-size: 1.08rem; }
.arreglos small { color: var(--suave); }
.comprar { display: grid; gap: 1rem; margin-top: 1.2rem; }
.captura-carta { margin: 2rem 0 0; padding-top: 2rem; border-top: 1px solid var(--linea); }
.captura-carta img { display: block; border: 1px solid var(--linea); border-radius: 6px; max-height: 20rem; object-fit: cover; object-position: top; width: 100%; }
.captura-carta figcaption { color: var(--suave); font-size: .9rem; margin-top: .5rem; }
.espera-carta { padding-block: 3rem; }
.espera-carta .girando { margin: 0 0 1.5rem; }
.fallo-carta { padding-block: 1.2rem; }
.fallo-carta + .fallo-carta { border-top: 1px dashed var(--linea); }
.fallo-carta h3 { font-family: var(--f-serif); font-size: 1.2rem; margin-bottom: .3rem; }
.fallo-carta .sobrio { margin-bottom: .7rem; }
.firma { margin-top: 2rem; }
@media print { .carta .seccion-r, .fallo-carta { break-inside: avoid-page; } }
.texto-corrido p.sobrio { font-size: .9rem; }

/* ---------- Informe ampliado ---------- */
.opciones { border: 0; padding: 0; margin: 0; display: grid; gap: .7rem; }
.opcion { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid var(--linea); border-radius: 8px; padding: .9rem 1rem; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.opcion input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; flex: none; accent-color: var(--acento); }
.opcion b { display: block; margin-bottom: .2rem; }
.opcion span { color: var(--tinta); }
.prueba-teclado { padding-block: .8rem; }
.prueba-teclado h3 { font: 500 .85rem var(--f-dato); color: var(--suave); overflow-wrap: anywhere; margin-bottom: .5rem; }
.comprobaciones { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .45rem; }
.comprobaciones li { position: relative; }
.comprobaciones li::before { position: absolute; left: 0; font-weight: 700; }
.comprobaciones li.ok::before { content: "✓"; color: var(--bien); }
.comprobaciones li.mal::before { content: "✗"; color: var(--mal); }
.imagenes-ia { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1.2rem; }
.imagenes-ia li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 30rem) { .imagenes-ia li { grid-template-columns: minmax(0, 1fr); } }
.imagenes-ia img { width: 100%; max-height: 9rem; object-fit: contain; border: 1px solid var(--linea); border-radius: 4px; background: var(--papel); }
.imagenes-ia p { margin: 0 0 .3rem; }
.imagenes-ia code { overflow-wrap: anywhere; }
.borrador { border: 1px dashed var(--suave); border-radius: 8px; padding: 1rem 1.2rem; background: var(--papel); }
.borrador h3 { font-family: var(--f-serif); font-size: 1.2rem; }
.borrador h4 { font-size: 1rem; margin: 1rem 0 .3rem; }
.borrador p, .borrador li { font-size: 1rem; }
.borrador ul { padding-left: 1.2rem; }
.comparacion { background: var(--acento-suave); border-radius: 6px; padding: .7rem .9rem; }
.resumen-direccion ul { padding-left: 1.2rem; display: grid; gap: .5rem; }
.resumen-direccion li { font-size: 1.05rem; }
.fila-boton form { margin: 0; }
.nombres-ia { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.nombres-ia li { border-left: 3px solid var(--linea); padding-left: 1rem; }
.nombres-ia p { margin: 0 0 .25rem; }
.contador { font-size: 1.05rem; }
.contador b { font: 500 1.2rem var(--f-dato); }
.pasos-vivo { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: .35rem; font-size: .98rem; color: var(--suave); }
.pasos-vivo li { padding-left: 1.6rem; position: relative; }
.pasos-vivo li::before { content: "✓" / ""; position: absolute; left: 0; color: var(--bien); font-weight: 700; }
.pasos-vivo li:last-child { color: var(--tinta); }
.que-miramos { margin-bottom: 1.2rem; }
.que-miramos summary { cursor: pointer; font-weight: 700; width: fit-content; }
.que-miramos ul { padding-left: 1.2rem; margin: .7rem 0 0; display: grid; gap: .3rem; color: var(--suave); }

.aviso-widget { border-left: 3px solid var(--mal); padding: .2rem 0 .2rem .9rem; }
.cifras { margin: 1.2rem 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.cifras b { font: 500 1.35rem var(--f-dato); margin-right: .4rem; }

/* La nota sin estilo en línea (la CSP no lo permite): un valor por clase */
.nota[data-valor="0"]{--valor:0}.nota[data-valor="1"]{--valor:1}.nota[data-valor="2"]{--valor:2}.nota[data-valor="3"]{--valor:3}.nota[data-valor="4"]{--valor:4}.nota[data-valor="5"]{--valor:5}.nota[data-valor="6"]{--valor:6}.nota[data-valor="7"]{--valor:7}.nota[data-valor="8"]{--valor:8}.nota[data-valor="9"]{--valor:9}
.nota[data-valor="10"]{--valor:10}.nota[data-valor="11"]{--valor:11}.nota[data-valor="12"]{--valor:12}.nota[data-valor="13"]{--valor:13}.nota[data-valor="14"]{--valor:14}.nota[data-valor="15"]{--valor:15}.nota[data-valor="16"]{--valor:16}.nota[data-valor="17"]{--valor:17}.nota[data-valor="18"]{--valor:18}.nota[data-valor="19"]{--valor:19}
.nota[data-valor="20"]{--valor:20}.nota[data-valor="21"]{--valor:21}.nota[data-valor="22"]{--valor:22}.nota[data-valor="23"]{--valor:23}.nota[data-valor="24"]{--valor:24}.nota[data-valor="25"]{--valor:25}.nota[data-valor="26"]{--valor:26}.nota[data-valor="27"]{--valor:27}.nota[data-valor="28"]{--valor:28}.nota[data-valor="29"]{--valor:29}
.nota[data-valor="30"]{--valor:30}.nota[data-valor="31"]{--valor:31}.nota[data-valor="32"]{--valor:32}.nota[data-valor="33"]{--valor:33}.nota[data-valor="34"]{--valor:34}.nota[data-valor="35"]{--valor:35}.nota[data-valor="36"]{--valor:36}.nota[data-valor="37"]{--valor:37}.nota[data-valor="38"]{--valor:38}.nota[data-valor="39"]{--valor:39}
.nota[data-valor="40"]{--valor:40}.nota[data-valor="41"]{--valor:41}.nota[data-valor="42"]{--valor:42}.nota[data-valor="43"]{--valor:43}.nota[data-valor="44"]{--valor:44}.nota[data-valor="45"]{--valor:45}.nota[data-valor="46"]{--valor:46}.nota[data-valor="47"]{--valor:47}.nota[data-valor="48"]{--valor:48}.nota[data-valor="49"]{--valor:49}
.nota[data-valor="50"]{--valor:50}.nota[data-valor="51"]{--valor:51}.nota[data-valor="52"]{--valor:52}.nota[data-valor="53"]{--valor:53}.nota[data-valor="54"]{--valor:54}.nota[data-valor="55"]{--valor:55}.nota[data-valor="56"]{--valor:56}.nota[data-valor="57"]{--valor:57}.nota[data-valor="58"]{--valor:58}.nota[data-valor="59"]{--valor:59}
.nota[data-valor="60"]{--valor:60}.nota[data-valor="61"]{--valor:61}.nota[data-valor="62"]{--valor:62}.nota[data-valor="63"]{--valor:63}.nota[data-valor="64"]{--valor:64}.nota[data-valor="65"]{--valor:65}.nota[data-valor="66"]{--valor:66}.nota[data-valor="67"]{--valor:67}.nota[data-valor="68"]{--valor:68}.nota[data-valor="69"]{--valor:69}
.nota[data-valor="70"]{--valor:70}.nota[data-valor="71"]{--valor:71}.nota[data-valor="72"]{--valor:72}.nota[data-valor="73"]{--valor:73}.nota[data-valor="74"]{--valor:74}.nota[data-valor="75"]{--valor:75}.nota[data-valor="76"]{--valor:76}.nota[data-valor="77"]{--valor:77}.nota[data-valor="78"]{--valor:78}.nota[data-valor="79"]{--valor:79}
.nota[data-valor="80"]{--valor:80}.nota[data-valor="81"]{--valor:81}.nota[data-valor="82"]{--valor:82}.nota[data-valor="83"]{--valor:83}.nota[data-valor="84"]{--valor:84}.nota[data-valor="85"]{--valor:85}.nota[data-valor="86"]{--valor:86}.nota[data-valor="87"]{--valor:87}.nota[data-valor="88"]{--valor:88}.nota[data-valor="89"]{--valor:89}
.nota[data-valor="90"]{--valor:90}.nota[data-valor="91"]{--valor:91}.nota[data-valor="92"]{--valor:92}.nota[data-valor="93"]{--valor:93}.nota[data-valor="94"]{--valor:94}.nota[data-valor="95"]{--valor:95}.nota[data-valor="96"]{--valor:96}.nota[data-valor="97"]{--valor:97}.nota[data-valor="98"]{--valor:98}.nota[data-valor="99"]{--valor:99}
.nota[data-valor="100"]{--valor:100}
.etiqueta-url { display: block; font-weight: 600; margin-bottom: .4rem; }
.comprobaciones .marca-ok { color: var(--bien); font-weight: 700; margin-right: .4rem; }
.comprobaciones .marca-mal { color: var(--mal); font-weight: 700; margin-right: .4rem; }
@media print { .oido-lista em::before, .pasos-vivo li::before { content: none; } }


/* En pantalla, el ✓/✗ y el texto para el lector; impreso (PDF), la palabra a la vista y sin glifos */
.impreso { display: none; }
@media print {
  .impreso { display: inline; font-weight: 700; }
  .comprobaciones .oculto, .comprobaciones [aria-hidden="true"] { display: none !important; }
}
.marca-recomendacion { font-weight: 700; margin-right: .4rem; }
small { font-size: .875rem; }
code { font-size: .9rem; }
.nota.mal { box-shadow: 0 0 0 3px var(--mal); }
.subtitulo { font-size: 1.1rem; font-weight: 600; margin: 0 0 .6rem; max-width: 36rem; }
.prueba-teclado .ayuda, .ejemplo small, .tabla-paginas small, .sobrio { overflow-wrap: anywhere; }
@media (forced-colors: active) { .boton { border: 2px solid ButtonText; } }
.ejemplo small + small { display: block; margin-top: .3rem; }
.dos-lineas dt { white-space: nowrap; }

/* Índice del informe */
.indice { margin: 1rem 0 0; padding-left: 1.2rem; columns: 2 16rem; }
.indice li { margin-bottom: .3rem; }

/* Informe recién comprado: qué hacer primero */
.listo { background: var(--papel); border: 2px solid var(--acento); border-radius: 10px; padding: 1.2rem 1.4rem; margin-top: 1.4rem; }
.listo h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
.listo ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .9rem; }
.listo li > .boton, .listo li form { margin-top: .5rem; }
.listo li > .boton:first-child { margin-top: 0; }
.listo .ayuda { margin: 1rem 0 0; }
.listo li > button.boton, .listo li > .boton { display: table; }