/* Hoja del blog de atalaya.red. La base es la de la guía «Revisar su web»
   (26/08/2026), que pasó a ser la primera pieza del blog el 05/10/2026; al
   final van los estilos de lo que pinta el generador común de blogs (spec 007
   de creator): migas, cabecera de pieza, cuerpo, fuentes, índice y familias. */
:root{
  --papel:#f7f6f2; --papel2:#efeee8; --tinta:#14161a; --gris:#5b6270;
  --anot:#c0392b; --anot-suave:rgba(192,57,43,.10);
  --regla:#dedcd4; --sello:#1f3a34;
  --crit:#a01f14; --alta:#b45309; --media:#8a6a00; --ok:#1f6b5e;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--papel); color:var(--tinta); font-family:var(--sans);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
/* grano de papel, muy sutil, generado sin imágenes externas */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(20,22,26,.055) 1px, transparent 0);
  background-size:4px 4px;
}
main,header,footer{position:relative;z-index:1}
.env{max-width:76rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.estrecho{max-width:44rem}
a{color:inherit}

/* ── cabecera ── */
.top{border-bottom:1px solid var(--regla)}
.top .env{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.1rem;padding-bottom:1.1rem}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.32rem;letter-spacing:.01em;text-decoration:none}
.logo svg{display:block;flex:none}
.top nav{display:flex;gap:1.6rem;font-size:.86rem;color:var(--gris)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--anot)}
.top nav .btn-nav{
  color:var(--papel);background:var(--tinta);border-radius:2px;
  padding:.34rem .7rem;font-weight:600;
}
.top nav .btn-nav:hover{color:var(--papel);background:var(--anot)}
/* En tablet el nav sigue a la vista y el dedo tambien: medido a 34px de alto en
   768x1024, por debajo del minimo tocable. */
@media(max-width:1024px){
  .top nav .btn-nav{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:640px){.top nav{display:none}}

/* ── hero ── */
.hero{padding:clamp(3rem,9vw,6.5rem) 0 clamp(2.5rem,6vw,4rem)}
.folio{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:baseline;
  font:.7rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--gris);
  border-bottom:2px solid var(--tinta);padding-bottom:.65rem;margin-bottom:clamp(1.8rem,4vw,2.8rem);
}
.folio .der{margin-left:auto}
h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.3rem,6.2vw,4.6rem);line-height:1.04;letter-spacing:-.022em;
  max-width:19ch;text-wrap:balance;
}
.subrayado{position:relative;white-space:nowrap}
.subrayado svg{position:absolute;left:-2%;bottom:-.24em;width:104%;height:.42em;overflow:visible}
.subrayado path{fill:none;stroke:var(--anot);stroke-width:7;stroke-linecap:round;opacity:.8}
.entradilla{
  margin-top:1.6rem;max-width:50ch;font-size:1.12rem;color:var(--gris);
  border-left:3px solid var(--anot);padding-left:1.1rem;
}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:600;
  font-size:.97rem;padding:.85rem 1.5rem;border:1.5px solid var(--tinta);
}
.btn-p{background:var(--tinta);color:var(--papel)}
.btn-p:hover{background:var(--anot);border-color:var(--anot)}
.btn-s:hover{border-color:var(--anot);color:var(--anot)}
.nota-cta{font-size:.84rem;color:var(--gris)}
.nota-informe{margin-top:1.2rem;font-size:.9rem;color:var(--gris);border-left:3px solid var(--regla);padding-left:.9rem}

/* ── las ocho áreas ── */
.areas{display:grid;gap:1rem;margin-top:2.4rem;grid-template-columns:1fr}
@media(min-width:700px){.areas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.areas{grid-template-columns:repeat(4,1fr)}}
.area{background:var(--papel);border:1px solid var(--regla);padding:1.1rem 1.15rem}
.area h3{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  font-size:1.02rem;margin-bottom:.5rem;
}
.area h3 b{
  font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--anot);
  background:var(--anot-suave);padding:.18rem .45rem;border-radius:2px;flex:none;
  font-variant-numeric:tabular-nums;
}
.area p{font-size:.87rem;color:var(--gris);line-height:1.55}
.area code{font:.9em var(--mono);background:var(--papel2);padding:.05em .28em}

/* ── cifras ── */
/* Columnas explícitas por breakpoint, no auto-fit: hay que saber cuál es la
   primera de cada fila para dejarla a ras del margen y separar del filete las
   demás. Con auto-fit el número de columnas es desconocido y el texto acababa
   pegado a la línea divisoria. */
.cifras{display:grid;grid-template-columns:1fr;border-top:1px solid var(--regla);margin-top:clamp(2.5rem,6vw,4rem)}
.cifra{padding:1.3rem 0;border-top:1px solid var(--regla)}
.cifra:first-child{border-top:0}
@media(min-width:640px){
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifra{padding:1.4rem 1.6rem;border-left:1px solid var(--regla);border-top:0}
  .cifra:nth-child(2n+1){padding-left:0;border-left:0}
  .cifra:nth-child(n+3){border-top:1px solid var(--regla)}
}
@media(min-width:1060px){
  .cifras{grid-template-columns:repeat(4,1fr)}
  .cifra:nth-child(2n+1){padding-left:1.6rem;border-left:1px solid var(--regla)}
  .cifra:nth-child(4n+1){padding-left:0;border-left:0}
  .cifra:nth-child(n+3){border-top:0}
}
.cifra b{display:block;font-family:var(--serif);font-size:clamp(2rem,4.4vw,2.9rem);line-height:1;font-variant-numeric:tabular-nums}
.cifra span{display:block;margin-top:.4rem;font-size:.82rem;color:var(--gris)}

/* ── secciones ── */
section{padding:clamp(3rem,8vw,5.5rem) 0}
.banda{background:var(--papel2);border-top:1px solid var(--regla);border-bottom:1px solid var(--regla)}
.eyebrow{
  font:700 .7rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--anot);margin-bottom:1rem;
}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,3.8vw,2.6rem);line-height:1.12;letter-spacing:-.018em;text-wrap:balance;max-width:22ch}
h3{font-family:var(--serif);font-weight:600;font-size:1.22rem;line-height:1.25;letter-spacing:-.01em}
.intro{margin-top:1rem;max-width:52ch;color:var(--gris)}

/* ── los tres desmentidos ── */
.mitos{display:grid;gap:1.1rem;margin-top:2.6rem;grid-template-columns:1fr}
@media(min-width:900px){.mitos{grid-template-columns:repeat(3,1fr)}}
.mito{background:var(--papel);border:1px solid var(--regla);padding:1.6rem 1.5rem 1.4rem;position:relative}
.mito .tachado{
  font-family:var(--serif);font-size:1.14rem;color:var(--gris);
  text-decoration:line-through;text-decoration-color:var(--anot);
  text-decoration-thickness:2px;display:block;margin-bottom:.7rem;
}
.mito p{font-size:.95rem;color:var(--gris)}
.mito .sello{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
  font:700 .64rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--sello);border:1.5px solid var(--sello);border-radius:2px;padding:.34rem .6rem;
  transform:rotate(-1.2deg);
}
.mito .sello::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sello)}

/* ── extracto de informe ── */
.doc{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:1fr;align-items:start;margin-top:2.4rem}
@media(min-width:940px){.doc{grid-template-columns:1fr 1.08fr}}
.hoja{
  background:#fff;border:1px solid var(--regla);
  box-shadow:0 1px 0 var(--regla),0 24px 48px -34px rgba(20,22,26,.55);
  padding:1.5rem 1.5rem 1.2rem;
}
.hoja .cab{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--tinta);padding-bottom:.55rem;margin-bottom:1rem;font:.64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.hallazgo{display:grid;grid-template-columns:3px 1fr auto;gap:.85rem;align-items:start;padding:.72rem 0;border-bottom:1px solid var(--regla)}
.hallazgo:last-of-type{border-bottom:0}
.hallazgo i{display:block;align-self:stretch;border-radius:2px;min-height:2.1rem}
.hallazgo strong{display:block;font-weight:550;font-size:.92rem;line-height:1.35}
.hallazgo em{font-style:normal;display:block;margin-top:.2rem;font:.7rem/1.4 var(--mono);color:var(--gris)}
.hallazgo .sev{font:700 .62rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-top:.15rem}
/* ── el resultado del escaneo, dentro de esta misma página ──
   Se usa el MISMO marcado que genera el informe de verdad, así que aquí va una
   copia de sus estilos acotada a #resultado. No puede pisar nada de la landing
   (la tarjeta de ejemplo de arriba usa .hallazgo como fila y sigue igual), y se
   evita el iframe, que da más problemas de altura y de foco de los que resuelve.
   Si el informe cambia de aspecto, esto hay que traerlo a mano: es el precio de
   no meter su hoja de estilos entera dentro de la portada. */
.resultado{margin-top:2.2rem;text-align:left;
  --tarjeta:#fff; --linea:var(--regla); --apagado:var(--gris);
  --tarjeta-suave:var(--papel2); --acento:var(--sello);
  --sev-critica:var(--crit); --sev-alta:var(--alta); --sev-media:var(--media);
  --sev-baja:#5b6270; --sev-informativa:#175cd3}
.resultado:empty{display:none}
.pasos{list-style:none;display:grid;gap:.55rem;font:.95rem/1.35 var(--sans);color:var(--gris);margin:0}
.pasos li{display:flex;gap:.65rem;align-items:center}
.pasos li::before{content:"✓";color:var(--ok);font-weight:700;font-size:.9rem;width:.9rem}
.pasos li[aria-current]{color:var(--tinta)}
.pasos li[aria-current]::before{content:"";width:.55rem;height:.55rem;margin:0 .17rem;
  border-radius:50%;background:var(--anot);animation:latido 1.1s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.3}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.pasos li[aria-current]::before{animation:none;opacity:1}}
.tardando{margin-top:.9rem;font-size:.92rem;line-height:1.35;color:var(--anot);
  display:flex;gap:.65rem;align-items:flex-start}
.tardando[hidden]{display:none}
/* La misma columna que las palomas de los pasos, para que el aviso no baile. */
.tardando::before{content:"";flex:none;width:.9rem;height:.9rem;margin-top:.16rem;
  border-radius:50%;border:2px solid var(--regla);border-top-color:var(--anot);
  animation:girando .9s linear infinite}
@keyframes girando{to{transform:rotate(1turn)}}
/* Va DESPUÉS de la regla que pone la animación: misma especificidad, así que
   gana la última, y puesta antes no apagaba nada. */
@media(prefers-reduced-motion:reduce){.tardando::before{animation:none}}

#resultado .puntuacion{background:var(--tarjeta);border:1px solid var(--linea);
  border-radius:.6rem;padding:1.1rem 1.3rem;margin:0 0 1.4rem}
#resultado .titular-r{font-size:1.05rem;line-height:1.45;margin:0 0 .5rem}
#resultado .puntuacion .puente-r{margin:.7rem 0 0;color:inherit;font-size:1.02rem;line-height:1.55}
#resultado .pedir-r+.puntuacion{margin-top:1.4rem}
#resultado .titular-r b{font-size:1.6rem;font-family:var(--serif);
  font-variant-numeric:tabular-nums}
#resultado .puntuacion p{margin:.3rem 0 0;color:var(--apagado);font-size:.88rem;line-height:1.55}
#resultado article.hallazgo{display:block;background:var(--tarjeta);
  border:1px solid var(--linea);border-radius:.6rem;padding:1.1rem 1.25rem;margin-bottom:1rem}
#resultado article.hallazgo h3{margin:0 0 .5rem;font:600 1.02rem/1.35 var(--sans);
  letter-spacing:-.01em}
#resultado .chips{margin:0 0 .5rem}
#resultado .chip{display:inline-block;font-size:.72rem;padding:.12rem .55rem;
  border-radius:999px;border:1px solid var(--linea);color:var(--apagado);
  margin:0 .3rem .3rem 0;background:var(--tarjeta);white-space:nowrap}
#resultado .chip[class*="sev-"]{color:#fff;border:none;font-weight:600}
#resultado .sev-critica{background:var(--sev-critica)}
#resultado .sev-alta{background:var(--sev-alta)}
#resultado .sev-media{background:var(--sev-media)}
#resultado .sev-baja{background:var(--sev-baja)}
#resultado .sev-informativa{background:var(--sev-informativa)}
#resultado .porque p{margin:.45rem 0;font-size:.93rem;line-height:1.6}
#resultado ul.fuentes{margin:.7rem 0 0;padding-left:1.1rem;font-size:.78rem;color:var(--apagado)}
#resultado ul.fuentes a{word-break:break-word}
#resultado .retenido{background:var(--tarjeta-suave);border:1px dashed var(--linea);
  border-radius:.6rem;padding:1.1rem 1.25rem;margin-top:1rem}
#resultado .retenido h3{margin:0 0 .7rem;font:600 1rem/1.3 var(--sans)}
#resultado .retenido p{margin:.8rem 0 0;font-size:.88rem;color:var(--apagado);line-height:1.55}
#resultado ul.lista-retenida{margin:0;padding:0;list-style:none;font-size:.92rem;display:grid;gap:.4rem}
#resultado .vacio{color:var(--apagado)}
#resultado .remate-venta{margin-top:1.8rem;padding:1.4rem 1.5rem;background:var(--papel2);
  border-left:4px solid var(--sello);border-radius:4px}
#resultado .remate-venta h3{font:600 1.05rem/1.3 var(--sans);margin:0 0 .6rem}
#resultado ul.lista-venta{list-style:none;margin:0;display:grid;gap:.55rem}
#resultado ul.lista-venta li{position:relative;padding-left:1.5rem;font-size:.95rem;line-height:1.5}
#resultado ul.lista-venta li::before{content:"";position:absolute;left:0;top:.5rem;
  width:8px;height:8px;background:var(--sello);border-radius:1px}
#resultado .contacto-venta{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--linea);
  font-size:.95rem;line-height:1.55}
#resultado .pie-r{margin-top:.7rem;font-size:.85rem;color:var(--gris)}
#resultado .envio-r{margin-top:1.5rem;padding:1.4rem 1.5rem;background:var(--tarjeta);
  border:1px solid var(--linea);border-radius:.6rem}
#resultado .envio-r h3{font:600 1.05rem/1.3 var(--sans);margin:0 0 .4rem}
/* Embebido en el bloque de retenidos: la caja ya la pone el retenido. */
#resultado .retenido .envio-r{margin-top:1.1rem;padding:1rem 0 0;background:transparent;border:0;border-top:1px solid var(--linea);border-radius:0}
#resultado .envio-r p{font-size:.95rem;line-height:1.55;margin:0}
#resultado .campo-envio{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
#resultado .campo-envio input{flex:1 1 15rem;min-width:0;padding:.7rem .85rem;
  font:1rem var(--sans);border:1px solid var(--linea);border-radius:.4rem;
  background:var(--papel);color:var(--tinta)}
#resultado .casilla-envio{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;
  font-size:.93rem;line-height:1.5;cursor:pointer}
#resultado .casilla-envio input{margin-top:.1rem;flex:none;width:1.25rem;height:1.25rem;accent-color:var(--anot)}
#resultado .casilla-envio.obligatoria{font-weight:550}
#resultado .casilla-envio em{font-style:normal;font-size:.82rem;color:var(--gris);
  text-transform:uppercase;letter-spacing:.08em}
#resultado .letra-chica{margin-top:.9rem;font-size:.85rem;line-height:1.55;color:var(--gris)}
#resultado .respuesta-envio{margin-top:.8rem;font-size:.95rem;font-weight:550}
#resultado .respuesta-envio.mal{color:var(--anot)}
#resultado .respuesta-envio.bien{color:var(--ok)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acciones-r{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.error-r{padding:1.2rem 1.4rem;background:var(--anot-suave);border-left:3px solid var(--anot)}
.error-r h3{font:600 1.05rem/1.3 var(--sans);margin:0 0 .5rem}
.error-r p{font-size:.97rem;line-height:1.55}
.error-r p+p{margin-top:.7rem}
.titular-r:focus{outline:none}
.titular-r:focus-visible{outline:2px solid var(--sello);outline-offset:4px}
.s-crit i{background:var(--crit)} .s-crit .sev{color:var(--crit)}
.s-alta i{background:var(--alta)} .s-alta .sev{color:var(--alta)}
.s-media i{background:var(--media)} .s-media .sev{color:var(--media)}
.s-ok i{background:var(--ok)} .s-ok .sev{color:var(--ok)}
.marginalia{
  margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--anot);
  font-family:var(--serif);font-style:italic;font-size:.94rem;color:var(--anot);
}
.etq-plan{font:700 .68rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--gris);margin-top:1.8rem}
.gratis{margin-top:.7rem;padding:1.05rem 1.2rem;background:rgba(20,22,26,.028);border-left:3px solid var(--anot)}
.gratis p{font-size:.95rem}
.gratis p+p{margin-top:.6rem}
.doc ul{list-style:none;margin-top:1.4rem;display:grid;gap:.9rem}
/* El cuadradito va posicionado, NO como celda de grid: el li mezcla texto suelto
   con <strong>, y en un grid cada nodo de texto se vuelve una celda anónima. Con
   dos columnas eso partía cada frase en trozos apilados. */
.doc ul li{position:relative;padding-left:1.55rem;font-size:.97rem}
.doc ul li::before{content:"";position:absolute;left:0;top:.52rem;width:9px;height:9px;background:var(--anot);border-radius:1px}

/* ── precios ── */
.planes{display:grid;gap:1.1rem;margin-top:2.6rem;grid-template-columns:1fr}
@media(min-width:860px){.planes{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--papel);border:1px solid var(--regla);padding:1.7rem 1.5rem;display:flex;flex-direction:column}
.plan.destacado{border:2px solid var(--tinta);position:relative}
.plan.destacado::after{
  content:"El que recomendamos";position:absolute;top:-.72rem;left:1.4rem;
  background:var(--tinta);color:var(--papel);font:700 .62rem/1 var(--sans);
  letter-spacing:.13em;text-transform:uppercase;padding:.34rem .6rem;
}
.plan .precio{font-family:var(--serif);font-size:2.5rem;line-height:1;margin:.7rem 0 .2rem;font-variant-numeric:tabular-nums}
.plan .periodo{font-size:.84rem;color:var(--gris)}
.plan p{margin-top:.9rem;font-size:.93rem;color:var(--gris);flex:1}
.plan .btn{margin-top:1.3rem;justify-content:center}

/* ── lo que no hacemos ── */
.nohacemos{display:grid;gap:1.6rem 2.4rem;margin-top:2.4rem;grid-template-columns:1fr}
@media(min-width:820px){.nohacemos{grid-template-columns:1fr 1fr}}
.nohacemos div{border-top:1px solid var(--regla);padding-top:1rem}
.nohacemos h3{color:var(--anot);font-size:1.06rem}
.nohacemos p{margin-top:.45rem;font-size:.95rem;color:var(--gris)}

/* ── cierre ── */
.cierre{text-align:center}
.cierre h2{margin:0 auto;max-width:20ch}
.cierre .entradilla{border:0;padding:0;margin:1.2rem auto 0;text-align:center}
.cierre .acciones{justify-content:center}
.form-escaneo{max-width:34rem;margin:2rem auto 0;text-align:left}
.form-escaneo label{
  display:block;font:700 .7rem/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.6rem;
}
.form-escaneo .campo{display:flex;flex-wrap:wrap;gap:.6rem}
.form-escaneo input{
  flex:1 1 14rem;font:inherit;font-size:1.05rem;padding:.8rem 1rem;
  border:1.5px solid var(--tinta);background:#fff;color:var(--tinta);border-radius:0;
}
.form-escaneo input::placeholder{color:#9aa0a8}
.form-escaneo input:focus-visible{outline:2px solid var(--anot);outline-offset:2px}
.form-escaneo button{cursor:pointer;font-family:inherit}
.form-escaneo .ayuda{margin-top:.8rem;font-size:.85rem;color:var(--gris)}
.form-escaneo code{font:.92em var(--mono);background:var(--papel2);padding:.08em .3em}
.alternativa{margin-top:1.4rem;font-size:.9rem;color:var(--gris)}
.alternativa a{color:var(--anot)}
:focus-visible{outline:2px solid var(--anot);outline-offset:3px}

footer{border-top:1px solid var(--regla);padding:2.2rem 0 3rem;font-size:.85rem;color:var(--gris)}
footer .env{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:baseline}
footer a{text-decoration:none}
/* Medido el 27/08/2026: los enlaces del pie salian a 22px de alto en movil y el
   logo a 35px, por debajo de los 44px que un dedo acierta sin pelearse. Se
   agranda el area tocable con padding, sin tocar el tamano del texto ni el
   ritmo visual del pie. */
/* Hasta 1024px se asume dedo, no raton: la tablet tambien se toca, y ahi los
   enlaces del pie seguian a 22px. */
@media(max-width:1024px){
  footer .env{align-items:center;gap:.2rem 1.4rem}
  footer a{display:inline-flex;align-items:center;min-height:44px}
  .top .logo{min-height:44px}
}
footer a:hover{color:var(--anot)}
footer .der{margin-left:auto}
@media(prefers-reduced-motion:no-preference){
  .subrayado path{stroke-dasharray:260;stroke-dashoffset:260;animation:trazo .9s .35s ease-out forwards}
  @keyframes trazo{to{stroke-dashoffset:0}}
}

/* ── propio de la guía ─────────────────────────────────────
   Lo de arriba es la hoja de la portada, copiada para que la cabecera, el
   formulario y el resultado del escaneo se vean exactamente igual. Si el
   informe cambia de aspecto hay que traerlo a los dos sitios: es el mismo
   precio que ya se paga en la portada por no incrustar su hoja entera. */

.guia{position:relative;z-index:1}
.miga{
  font:.72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  padding:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;
}
.miga a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--regla)}
.miga a:hover{color:var(--anot);border-color:var(--anot)}
.miga span[aria-current]{color:var(--tinta)}

.g-hero{padding:clamp(2.2rem,6vw,3.6rem) 0 clamp(1.6rem,4vw,2.4rem)}
.g-hero h1{max-width:17ch}
.g-hero .entradilla{margin-top:1.5rem}

.lectura{max-width:44rem}
.lectura p{margin:1.05rem 0;max-width:66ch}
.lectura p:first-child{margin-top:0}

/* sumario de entrada */
.sumario{margin-top:2rem;max-width:52rem}
.sumario .rot{
  font:700 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
  display:block;margin-bottom:.9rem;
}
.sumario ul{list-style:none;margin:0;display:grid;gap:.6rem}
@media(min-width:820px){.sumario ul{grid-template-columns:1fr 1fr;gap:.7rem 2.2rem}}
.sumario li{position:relative;padding-left:1.15rem;font-size:.97rem;line-height:1.5;margin:0}
.sumario li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--anot)}

/* panel de testigos: es una pantalla, y por eso va oscuro sobre el papel */
.panel{
  margin-top:clamp(2rem,5vw,3rem);
  background:#0e1116;border:1px solid #232a33;
  --pan-apagado:#95a3b2; --pan-ok:#39414c; --pan-crit:#ff5f4a; --pan-alta:#ffab2e;
  box-shadow:0 18px 40px -32px rgba(20,22,26,.9);
}
.panel-top{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  padding:.8rem 1.05rem;border-bottom:1px solid #232a33;
  font:.66rem/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--pan-apagado);
}
.panel-top .vivo{display:inline-flex;align-items:center;gap:.45rem;color:var(--pan-alta)}
.panel-top .vivo i{width:6px;height:6px;border-radius:50%;background:var(--pan-alta)}
.testigos{display:grid;gap:1px;background:#232a33;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.testigos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.testigos{grid-template-columns:repeat(6,1fr)}}
.t{
  background:#0e1116;padding:1.15rem .8rem 1rem;color:var(--pan-ok);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;
}
.t svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:color .5s ease}
.t span{font:.62rem/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7d8b9a;transition:color .5s ease}
.t[data-estado="crit"], .t[data-estado="crit"] span{color:var(--pan-crit)}
.t[data-estado="alta"], .t[data-estado="alta"] span{color:var(--pan-alta)}
.t[data-estado="crit"] svg{filter:drop-shadow(0 0 9px rgba(255,95,74,.55));animation:latido 2.6s ease-in-out infinite}
.t[data-estado="alta"] svg{filter:drop-shadow(0 0 9px rgba(255,171,46,.4))}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.42}}
.panel-pie{padding:.95rem 1.05rem;border-top:1px solid #232a33;color:var(--pan-apagado);font-size:.87rem;line-height:1.5}
.panel-pie b{color:#c9d4e0;font-weight:500}

/* dato suelto */
.dato{margin:2.2rem 0 0;padding:1.5rem 1.4rem;border-left:3px solid var(--anot);background:var(--anot-suave)}
.dato .cifra{font-family:var(--serif);font-size:clamp(1.9rem,5vw,2.7rem);line-height:1.05;font-weight:600}
.dato p{margin:.5rem 0 0;max-width:60ch}

/* cronología */
.crono{display:grid;gap:1px;background:var(--regla);border:1px solid var(--regla);margin-top:2rem}
@media(min-width:820px){.crono{grid-template-columns:repeat(4,1fr)}}
.hito{background:var(--papel);padding:1.3rem 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.hito .fecha{font:.7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--anot)}
.hito h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;line-height:1.35;margin:0}
.hito p{margin:0;font-size:.89rem;color:var(--gris);line-height:1.55}

/* focos */
.focos{display:grid;gap:1.1rem;margin-top:2rem}
@media(min-width:900px){.focos{grid-template-columns:repeat(2,1fr)}}
.foco{background:var(--papel);border:1px solid var(--regla);padding:1.45rem 1.4rem;display:flex;flex-direction:column;gap:.8rem}
.foco .enc{display:flex;align-items:center;gap:.7rem}
.foco .enc svg{width:22px;height:22px;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;stroke:var(--anot)}
.foco h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;margin:0;line-height:1.2}
.foco p{margin:0;font-size:.95rem;line-height:1.58;max-width:none}
.foco .apunte{border-top:1px dashed var(--regla);padding-top:.8rem;font-size:.87rem;color:var(--gris)}
.foco--acc .enc svg{stroke:var(--alta)}
.foco--rend .enc svg{stroke:var(--sello)}
.foco--ia .enc svg{stroke:var(--tinta)}

/* ventajas */
.ventajas{display:grid;gap:1px;background:var(--regla);border-block:1px solid var(--regla);margin-top:2rem}
@media(min-width:760px){.ventajas{grid-template-columns:repeat(2,1fr)}}
.v{background:var(--papel);padding:1.35rem 1.25rem;display:flex;flex-direction:column;gap:.45rem}
.v h3{font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.35;margin:0}
.v p{margin:0;font-size:.91rem;color:var(--gris);line-height:1.55}

/* dos columnas de la IA */
.dos{display:grid;gap:1.1rem;margin-top:1.9rem}
@media(min-width:820px){.dos{grid-template-columns:1fr 1fr}}
.caja{border:1px solid var(--regla);padding:1.35rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;background:var(--papel)}
.caja h3{font-family:var(--sans);font-size:1.03rem;font-weight:600;margin:0}
.caja ul{margin:0 0 0 1rem;display:flex;flex-direction:column;gap:.45rem}
.caja li{margin:0;font-size:.92rem;color:var(--gris);line-height:1.5}
.caja li b{color:var(--tinta);font-weight:600}
.caja--si{border-left:3px solid var(--sello)}
.caja--no{border-left:3px solid var(--anot)}

/* las cinco comprobaciones */
.chequeo{list-style:none;counter-reset:paso;margin:2rem 0 0;display:grid;gap:1px;background:var(--regla);border:1px solid var(--regla)}
.chequeo li{
  counter-increment:paso;background:var(--papel);padding:1.25rem 1.3rem 1.3rem;margin:0;
  display:grid;grid-template-columns:2.1rem 1fr;gap:.4rem 0;align-items:start;
}
.chequeo li::before{content:counter(paso);grid-row:span 2;font:1.15rem/1 var(--mono);color:var(--anot);font-variant-numeric:tabular-nums;padding-top:.2rem}
.chequeo h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;line-height:1.35;margin:0}
.chequeo p{margin:0;font-size:.91rem;color:var(--gris);line-height:1.55;max-width:none}
.remate{margin-top:1.5rem;max-width:62ch;font-size:.94rem;color:var(--gris);border-left:3px solid var(--regla);padding-left:1rem}

/* lo que miramos nosotros */
.areas-guia{display:grid;gap:1px;background:var(--regla);border:1px solid var(--regla);margin-top:2rem}
@media(min-width:620px){.areas-guia{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.areas-guia{grid-template-columns:repeat(4,1fr)}}
.ag{background:var(--papel);padding:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.ag .cab-a{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.ag h3{font-family:var(--sans);font-size:.98rem;font-weight:600;margin:0}
.ag b{font:700 .76rem/1 var(--sans);color:var(--anot);background:var(--anot-suave);padding:.2rem .42rem;font-variant-numeric:tabular-nums}
.ag p{margin:0;font-size:.85rem;color:var(--gris);line-height:1.5}

/* barra de acción */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  align-items:center;gap:.7rem 1.1rem;flex-wrap:wrap;
  padding:.7rem clamp(.9rem,4vw,2.2rem);
  background:var(--papel2);border-top:1px solid var(--tinta);
  transform:translateY(115%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.barra.vista{transform:none}
.barra p{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .7rem;flex:1 1 14rem;min-width:0}
.barra b{font-weight:700;font-size:.97rem}
.barra .suave{font-size:.86rem;color:var(--gris)}
.barra .btn{padding:.6rem 1.05rem;font-size:.9rem}
.barra-x{flex:none;width:2.5rem;height:2.5rem;font:1.15rem/1 var(--sans);background:transparent;border:1px solid var(--regla);color:var(--gris);cursor:pointer}
.barra-x:hover{color:var(--tinta);border-color:var(--tinta)}
footer{padding-bottom:6rem}
@media(max-width:520px){.barra .suave{display:none}}

/* Aquí vivía un revelado por scroll que hacía nacer el contenido con
   opacity:0 a la espera del observador. Fuera: si el observador no entrega,
   el lector se queda mirando huecos en blanco, y esta misma página explica
   dos secciones más abajo por qué el texto no debe depender de JavaScript. */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}


/* ── pedir la auditoria completa, dentro del resultado ──
   Se separa del resto con fondo y filete propios porque es la accion que
   importa, no un parrafo mas del informe. Aire generoso a la izquierda del
   filete: el texto pegado a la linea es un vicio recurrente. */
#resultado .pedir-r{
  margin-top:1.8rem;padding:1.3rem 1.4rem;background:var(--papel2);
  border-left:3px solid var(--anot);
}
#resultado .pedir-r h3{font-family:var(--serif);font-size:1.28rem;line-height:1.2;margin-bottom:.5rem}
#resultado .pedir-r > p{margin-bottom:1rem}
#resultado .planes-r{border:0;margin:0 0 1rem}
#resultado .planes-r legend{
  font:700 .68rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);margin-bottom:.6rem;padding:0;
}
#resultado .planes-r label{
  display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  padding:.7rem .8rem;background:var(--papel);border:1px solid var(--regla);
  margin-bottom:.5rem;
}
#resultado .planes-r label:hover{border-color:var(--anot)}
#resultado .planes-r input{margin-top:.2rem;flex:none;width:1.25rem;height:1.25rem;accent-color:var(--anot)}
#resultado .planes-r label:has(input:checked){border-color:var(--anot);box-shadow:inset 0 0 0 1px var(--anot)}
#resultado .campo-contratar{display:flex;flex-wrap:wrap;gap:.6rem}
#resultado .campo-contratar input{
  flex:1 1 13rem;min-width:0;padding:.7rem .85rem;font:inherit;
  border:1px solid var(--tinta);background:#fff;
}
#resultado .campo-contratar input:focus-visible{outline:2px solid var(--anot);outline-offset:2px}
#resultado .ancho-r{width:100%;margin-top:.7rem;cursor:pointer;font-family:inherit}
#resultado .respuesta-contratar:not(:empty){margin-top:.7rem;font-size:.92rem}
#resultado .respuesta-contratar.bien{color:var(--ok);font-weight:600}
#resultado .respuesta-contratar.mal{color:var(--crit)}
#resultado .pedir-r .letra-chica{margin-top:1rem}

/* ── accion siempre a mano en movil ──
   Medido el 27/08/2026: en la guia el formulario esta a 15,8 pantallas de movil
   del principio, y en la portada estaba a 13,3. Quien decidia analizar su web a
   mitad de lectura no tenia donde pulsar: habia que subir del todo o bajar del
   todo. La barra sale cuando su objetivo NO esta a la vista y se retira cuando
   si lo esta, para no ofrecer dos veces lo mismo. Desde el 31/08/2026 tiene dos
   estados (los pinta escaneo.js): sin resultado apunta al formulario
   (#analisis); con resultado pintado apunta al bloque de presupuesto (#pedir).

   Sin JavaScript se queda fuera de pantalla y no molesta: no es la unica via al
   formulario, es un atajo. */
.barra-accion{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--papel);border-top:1px solid var(--regla);
  padding:.7rem clamp(1rem,4vw,1.5rem);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  transform:translateY(115%);visibility:hidden;
  transition:transform .18s ease-out,visibility .18s;
}
.barra-accion[data-visible]{transform:none;visibility:visible}
.barra-accion .btn{display:block;width:100%;text-align:center}
@media(min-width:641px){.barra-accion{display:none}}
@media(prefers-reduced-motion:reduce){.barra-accion{transition:none}}
/* Sitio para la barra: es fija y de 78px, asi que sin esto se come el final del
   pie. Medido el 27/08/2026 en 375x667. */
@media(max-width:640px){body{padding-bottom:5.5rem}}

/* Pantallas bajas (iPhone SE y companía, y cualquier movil con el navegador a
   media asta). Medido: a 332x590 el campo del hero caia justo por debajo del
   pliegue y a 375x667 se salvaba por 38px, que no es margen. Se comprime el
   aire del hero para que el campo entre siempre, sin tocar el resto. */
@media(max-width:640px) and (max-height:700px){
  .hero{padding-top:1.2rem;padding-bottom:1.2rem}
  .hero h1{font-size:1.85rem;line-height:1.06}
  .hero .entradilla{font-size:.92rem;line-height:1.45;padding-left:.7rem}
  .folio{margin-bottom:.45rem;font-size:.62rem}
  .form-escaneo{margin-top:1rem}
  .form-escaneo .ayuda{font-size:.78rem}
}

/* ── Blog: lo que pinta el generador común ── */
.blog-env{position:relative;z-index:1}
.migas{padding-top:1.4rem;font:.74rem/1.4 var(--mono);letter-spacing:.06em;color:var(--gris)}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 0}
.migas li+li::before{content:"›";margin:0 .55rem;color:var(--regla)}
.migas a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--regla)}
.migas a:hover{color:var(--anot);border-color:var(--anot)}
.migas li[aria-current]{color:var(--tinta)}
.pieza,.blog{max-width:46rem;padding:clamp(1.8rem,4.5vw,3rem) 0 1rem}
.pieza-cabecera{border-bottom:1px solid var(--regla);padding-bottom:1.7rem;margin-bottom:2.2rem}
.pieza-familia{font:.74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem}
.pieza-familia a{color:var(--anot);text-decoration:none}
.pieza h1,.blog h1{font-size:clamp(2.1rem,5.4vw,3.6rem);max-width:20ch}
.pieza-resumen{font-family:var(--serif);font-size:1.22rem;line-height:1.5;color:var(--gris);margin-top:1.2rem;max-width:60ch}
.pieza-firma,.pieza-verificado{font-size:.88rem;color:var(--gris);margin-top:1.1rem}
.pieza-verificado{margin-top:.25rem}
.pieza-ia{font-size:.82rem;color:var(--gris);margin-top:.7rem;padding-left:.8rem;border-left:2px solid var(--regla);max-width:60ch}
.pieza-cuerpo>*+*{margin-top:1.05rem}
.pieza-cuerpo p,.pieza-cuerpo li{max-width:66ch}
.pieza-cuerpo h2{margin-top:2.8rem;max-width:24ch}
.pieza-cuerpo h3{margin-top:1.9rem}
.pieza-cuerpo h2+*,.pieza-cuerpo h3+*{margin-top:.8rem}
.pieza-cuerpo ul,.pieza-cuerpo ol{padding-left:1.3rem}
.pieza-cuerpo li+li{margin-top:.45rem}
.pieza-cuerpo a{color:var(--tinta);text-decoration-color:var(--anot);text-underline-offset:3px}
.pieza-cuerpo a:hover{color:var(--anot)}
.pieza-cuerpo blockquote{border-left:3px solid var(--anot);padding:.2rem 0 .2rem 1rem;color:var(--gris)}
.pieza-cuerpo table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.92rem;line-height:1.45}
.pieza-cuerpo th,.pieza-cuerpo td{border-bottom:1px solid var(--regla);padding:.6rem .9rem .6rem 0;text-align:left;vertical-align:top}
.pieza-cuerpo th{font-weight:600}
.pieza-cuerpo .alinea-center{text-align:center}
.pieza-cuerpo .alinea-right{text-align:right}
.pieza-cuerpo code{font:.88em var(--mono);background:var(--papel2);padding:.08em .3em}
.pieza-cuerpo sup.cita{font:.68em var(--mono);margin-left:.08em;line-height:0}
.pieza-cuerpo sup.cita a{color:var(--anot);text-decoration:none;padding:0 .12em}
.pieza-cuerpo .panel{margin-top:2rem}
.pieza-cuerpo .dato{margin-top:1.6rem}
.pieza-fuentes{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--regla)}
.pieza-fuentes h2{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);max-width:none}
.pieza-fuentes ol{margin-top:1rem;padding-left:1.4rem;font-size:.86rem;line-height:1.55;color:var(--gris)}
.pieza-fuentes li+li{margin-top:.55rem}
.pieza-fuentes a{color:var(--tinta);overflow-wrap:anywhere;text-decoration-color:var(--regla);text-underline-offset:3px}
.pieza-fuentes li:target{background:var(--anot-suave)}
.pieza-llamada{margin-top:3rem;border-top:1px solid var(--regla)}
.pieza-llamada .cierre{padding:clamp(2.4rem,6vw,3.6rem) 0 1rem}
.blog-cabecera{border-bottom:1px solid var(--regla);padding-bottom:1.7rem}
.blog-cabecera>p{font-family:var(--serif);font-size:1.2rem;line-height:1.5;color:var(--gris);margin-top:1.1rem;max-width:60ch}
.blog-familias ul{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;margin-top:1.4rem;font-size:.9rem}
.blog-familias a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--regla)}
.blog-familias a[aria-current]{color:var(--anot);border-bottom-color:var(--anot)}
.blog-lista{list-style:none}
.blog-lista>li{border-bottom:1px solid var(--regla);padding:1.8rem 0}
.blog-lista h2{font-size:clamp(1.4rem,3vw,1.8rem);max-width:none}
.blog-lista h2 a{text-decoration:none}
.blog-lista h2 a:hover{color:var(--anot)}
.blog-meta{font:.74rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-top:.6rem}
.blog-meta a{color:inherit}
.blog-lista p:last-child{color:var(--gris);margin-top:.6rem;max-width:62ch}
.blog-feed{margin-top:1.8rem;font-size:.88rem}
.blog-feed a{color:var(--anot)}
.blog-vacio{margin-top:1.8rem;color:var(--gris)}