/* Estilos de las páginas del servidor (reseña, ciudad, guías, legales).
   Hasta el 2 ago 2026 vivían EN LÍNEA dentro de layout() en src/index.js:
   18 KB repetidos en cada respuesta HTML del Worker que el navegador no
   podía reutilizar entre páginas. Ahora los sirve Cloudflare Assets con
   caché larga. Si se cambia algo aquí, subir el ?v= del <link> en layout(). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--black:#0a0a0a;--white:#f5f0e8;--yellow:#ffe600;--red:#ff1a1a;--green:#00cc44;--grey:#c8c0b0;
/* Fuente de LECTURA. VT323 tiene trazo de 1px y altura-x muy baja: a 20px se
   lee como una fuente normal de 13. Va bien en el marco y en textos cortos,
   pero cansa en parrafos largos. Entra SOLO en la prosa de guias, las paginas
   legales y los formularios de esas paginas. Las fichas de resena no se tocan. */
--font-read:'JetBrains Mono',ui-monospace,'Cascadia Mono',Menlo,monospace}
body{background:var(--white);color:var(--black);font-family:'VT323',monospace;font-size:20px;line-height:1.5;
background-image:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(0,0,0,.05) 39px,rgba(0,0,0,.05) 40px)}
header{background:var(--black);border-bottom:5px solid var(--yellow);padding:12px 24px;display:flex;align-items:center;justify-content:space-between}
header a.logo{font-size:2.4rem;color:var(--yellow);text-transform:uppercase;letter-spacing:2px;text-decoration:none}
header a.back{color:var(--white);font-family:'Share Tech Mono',monospace;font-size:.8rem;text-decoration:none;border:2px solid var(--yellow);padding:6px 12px}
.wrap{max-width:820px;margin:32px auto;padding:0 16px 80px}
.card{background:var(--white);border:3px solid var(--black);box-shadow:4px 4px 0 var(--black)}
.card-header{background:var(--black);color:var(--yellow);padding:12px 18px}
.card-header h1{font-size:1.8rem;letter-spacing:1px}
.meta{padding:12px 18px;display:flex;gap:24px;flex-wrap:wrap;font-family:'Share Tech Mono',monospace;font-size:.82rem;border-bottom:2px dashed var(--black)}
.meta b{display:block;font-size:1.1rem;font-family:'VT323',monospace}
.meta span{opacity:.55;text-transform:uppercase;letter-spacing:1px}
.body{padding:18px;font-size:1.25rem}
.rv-headline{font-size:1.5rem;font-weight:bold;line-height:1.2;margin-bottom:6px}
.rv-verdict{display:inline-block;font-family:'Share Tech Mono',monospace;font-size:.95rem;letter-spacing:1px;padding:3px 12px;border:2px solid var(--black);box-shadow:3px 3px 0 var(--black);text-transform:uppercase;margin-bottom:14px;font-weight:bold}
.rv-verdict.rv-yes{background:var(--green);color:var(--black)}
.rv-verdict.rv-no{background:var(--red);color:#fff}
.rv-pro,.rv-con{padding:10px 12px;margin-bottom:8px;border-left:5px solid;line-height:1.45}
.rv-pro{background:rgba(0,204,68,.10);border-left-color:var(--green)}
.rv-con{background:rgba(255,26,26,.09);border-left-color:var(--red)}
.rv-tag{display:inline-block;font-family:'Share Tech Mono',monospace;font-size:.8rem;letter-spacing:1px;text-transform:uppercase;font-weight:bold;margin-right:6px;opacity:.85}
.rv-line{margin-bottom:10px;line-height:1.62}
.rv-consejo{margin:14px 0 4px;padding:12px 16px;border-left:5px solid var(--black);background:rgba(0,0,0,.045);line-height:1.55;max-width:min(68ch,100%)}
.rv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rv-chip{display:inline-flex;align-items:baseline;gap:7px;padding:4px 11px;border:2px solid var(--black);background:var(--white);font-family:'Share Tech Mono',monospace;font-size:.74rem;letter-spacing:.5px}
.rv-chip-k{opacity:.6;text-transform:uppercase}
.rv-chip-v{font-family:'VT323',monospace;font-size:1.05rem;font-weight:bold;letter-spacing:0}
.imgs{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 18px}
.imgs img{width:180px;height:120px;object-fit:cover;border:2px solid var(--black);cursor:zoom-in;transition:transform .08s,box-shadow .08s}
.imgs img:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--black)}
.imgs img:focus-visible{outline:4px solid var(--yellow);outline-offset:2px}
/* Visor de la ficha. Es DELIBERADAMENTE más simple que el de la portada: aquí
   no hace falta pie con dirección ni veredicto porque la página entera ya es
   eso. Lo que sí comparte es el comportamiento: fondo que cierra, botón atrás
   del móvil, deslizar, teclado y foco de vuelta. */
#visor{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:500;display:none;align-items:center;justify-content:center}
#visor.abierto{display:flex}
#v-img{max-width:92vw;max-height:86vh;border:4px solid var(--yellow);box-shadow:0 0 40px rgba(255,230,0,.25);object-fit:contain;user-select:none}
.v-flecha{position:absolute;top:50%;transform:translateY(-50%);background:var(--yellow);color:var(--black);border:3px solid var(--black);font-family:'VT323',monospace;font-size:2rem;width:52px;height:52px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:4px 4px 0 var(--black)}
#v-ant{left:16px}#v-sig{right:16px}
#v-cerrar{position:absolute;top:14px;right:18px;background:var(--red);color:var(--white);border:3px solid var(--black);font-family:'VT323',monospace;font-size:1.8rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:4px 4px 0 var(--black);z-index:2}
#v-cuenta{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-family:'Share Tech Mono',monospace;font-size:.8rem;color:var(--yellow);letter-spacing:2px;background:rgba(0,0,0,.6);padding:4px 12px;border:1px solid var(--yellow)}
.acciones{padding:0 18px 16px;display:flex;justify-content:flex-end}
.acciones button{font-family:'Share Tech Mono',monospace;font-size:.78rem;background:none;border:none;border-bottom:1px dotted var(--black);color:var(--black);cursor:pointer;padding:0 0 1px;opacity:.7}
.acciones button:hover{opacity:1;color:var(--red);border-bottom-color:var(--red)}
.acciones button.copiado{opacity:1;background:var(--yellow);border-bottom-color:transparent;padding:2px 8px;font-weight:bold;letter-spacing:1px}
/* El aviso se pone por encima del visor (500) o no se vería al compartir. */
#aviso{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--black);color:var(--yellow);font-family:'Share Tech Mono',monospace;font-size:1rem;padding:14px 26px;border:4px solid var(--yellow);box-shadow:0 0 0 3px var(--black),6px 6px 0 rgba(0,0,0,.55);transition:transform .2s;z-index:900;max-width:92vw}
#aviso.visible{transform:translateX(-50%) translateY(0)}
.votes{padding:14px 18px;border-top:2px dashed var(--black);font-family:'Share Tech Mono',monospace;font-size:.85rem;display:flex;flex-direction:column;gap:7px}
.votes .u{color:var(--green)}.votes .n{color:var(--red)}
/* El termino medio va en un ambar oscuro y no en gris: gris se lee como
   "desactivado" y este voto cuenta igual que los otros dos. */
.votes .p{color:#8a6d00}
.votes .vacio{opacity:.55}
.vbar{display:flex;height:12px;border:2px solid var(--black);overflow:hidden}
.vbar-si{background:var(--green)}.vbar-pe{background:#ffc400}.vbar-no{background:var(--red)}
.vtxt{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.vtxt b{font-size:1rem}
.rv-fuente{margin:16px 0 2px;font-family:'Share Tech Mono',monospace;font-size:.72rem;letter-spacing:.4px;color:#5c574e}
.rv-fuente a{color:var(--black)}
footer{text-align:center;padding:24px;font-family:'Share Tech Mono',monospace;font-size:.72rem;opacity:.6}
footer a{color:var(--black)}
.legal{padding:8px 18px;font-family:var(--font-read);font-size:.74rem;line-height:1.6;color:#5c574e}
/* PROSA DE GUIAS Y LEGALES: es texto largo que la gente lee de verdad (y a
   menudo con prisa y cabreada). Pasa a la fuente de lectura con medida maxima
   de 68 caracteres e interlineado 1.75. Los titulos se quedan en VT323 para
   no perder el aire retro; de hecho se agrandan para marcar mas la jerarquia. */
.prose{font-family:var(--font-read);font-size:.95rem;line-height:1.75}
.prose h2{font-family:'VT323',monospace;font-size:1.75rem;line-height:1.15;margin:30px 0 10px;border-bottom:2px solid var(--black);padding-bottom:5px}
.prose h3{font-family:'VT323',monospace;font-size:1.4rem;line-height:1.2;margin:22px 0 6px}
.prose p{margin:14px 0;max-width:68ch}
.prose ul,.prose ol{margin:14px 0 14px 24px;max-width:66ch}
.prose li{margin:7px 0}
.prose a{color:#0a0a0a;text-decoration:underline;text-underline-offset:3px}
/* La negrita en monoespaciada se nota poco; el subrayado amarillo la ancla. */
.prose b,.prose strong{font-weight:700;background:linear-gradient(transparent 62%,rgba(255,230,0,.7) 62%)}
.prose .aviso{background:var(--yellow);border:2px solid var(--black);padding:12px 16px;font-size:.92rem;line-height:1.65;margin:22px 0}
.prose .aviso b,.prose .aviso strong{background:none}
.prose .clave{border:3px solid var(--black);box-shadow:4px 4px 0 var(--black);padding:16px 20px;margin:20px 0 26px;background:#fffdf0}
.prose .clave b.t{display:block;font-family:var(--font-read);font-size:.78rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;background:none}
.prose .clave ul{margin:0 0 0 20px}
.prose .clave li{margin:7px 0}
.prose .ejemplo{border-left:5px solid var(--black);background:rgba(0,0,0,.045);padding:12px 16px;margin:18px 0}
.prose .ejemplo b.t{font-family:var(--font-read);font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:6px;color:#4a463d;background:none}
.prose .plantilla{background:var(--black);color:#f2ede4;padding:16px 18px;margin:18px 0;font-family:var(--font-read);font-size:.85rem;line-height:1.75;white-space:pre-wrap}
/* Referencia legal: iba a .76rem con opacity .62 sobre crema, por debajo del
   contraste minimo. Mismo gris pero solido y un punto mas grande. */
.prose .ley{font-family:var(--font-read);font-size:.76rem;color:#5c574e;display:block;margin-top:-6px;margin-bottom:14px}
/* La referencia legal ahora enlaza al articulo en el BOE. El enlace hereda el
   gris de la linea: si tomara el negro de .prose a, la referencia dejaria de
   leerse como nota al pie y competiria con el texto. */
.prose .ley a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(92,87,78,.55)}
.prose .ley a:hover{color:var(--black);text-decoration-color:currentColor}
/* FUENTES: el bloque que cierra cada guia. Va detras de la FAQ, separado por
   una regla gruesa, en cuerpo pequeno: es aparato critico, no lectura. Lo que
   busca es que se pueda comprobar cada dato (y que un buscador o un asistente
   vea de donde sale) sin robarle peso al articulo. */
.prose .fuentes{margin-top:34px;border-top:3px solid var(--black);padding-top:14px}
.prose .fuentes h2{font-size:1.4rem;border-bottom:0;margin:0 0 4px;padding-bottom:0}
.prose .fuentes ol{margin:12px 0 0 22px;max-width:70ch}
.prose .fuentes li{margin:10px 0;font-size:.84rem;line-height:1.6}
.prose .fuentes .f-d{display:block;color:#5c574e;font-size:.79rem;margin-top:2px}
.prose .verificado{font-family:var(--font-read);font-size:.8rem;color:#5c574e;margin:0;max-width:70ch}
.guias-list{list-style:none;margin:0;padding:0}
.guias-list li{border:3px solid var(--black);box-shadow:4px 4px 0 var(--black);margin-bottom:16px;padding:14px 18px;background:var(--white)}
.guias-list a{color:#0a0a0a;text-decoration:none;font-size:1.5rem}
.guias-list p{font-family:var(--font-read);font-size:.86rem;line-height:1.65;margin-top:8px;color:#4a463d;max-width:64ch}
.crumbs{font-family:var(--font-read);font-size:.76rem;margin-bottom:14px;color:#5c574e}
.crumbs a{color:var(--black)}
.rel{margin-top:22px;border:3px solid var(--black);box-shadow:4px 4px 0 var(--black);background:var(--white)}
.rel h2{background:var(--black);color:var(--yellow);font-size:1.1rem;letter-spacing:1px;padding:8px 16px;text-transform:uppercase}
.rel ul{list-style:none;margin:0;padding:10px 16px 14px}
.rel li{padding:5px 0;border-bottom:1px dotted rgba(0,0,0,.2)}
.rel li:last-child{border-bottom:0}
.rel a{color:var(--black);text-decoration:none;border-bottom:2px solid var(--yellow)}
.rel a:hover{background:var(--yellow)}
.rel .rel-city{font-family:'Share Tech Mono',monospace;font-size:.72rem;opacity:.6}
.faq{margin-top:26px}
.faq h3{font-family:'VT323',monospace;font-size:1.4rem;margin:20px 0 4px}
.toc{background:rgba(0,0,0,.04);border-left:5px solid var(--yellow);padding:12px 16px;margin:18px 0;font-family:var(--font-read);font-size:.88rem;line-height:1.7}
.toc ul{margin:8px 0 0 22px}
.toc li{margin:5px 0}
form.pa label{display:block;font-family:var(--font-read);font-size:.8rem;letter-spacing:.8px;text-transform:uppercase;margin:20px 0 6px;font-weight:700}
form.pa input[type=text],form.pa input[type=email],form.pa select,form.pa textarea{width:100%;font-family:var(--font-read);font-size:.95rem;line-height:1.6;padding:11px 12px;border:3px solid var(--black);background:#fffdf0;color:var(--black)}
form.pa input::placeholder,form.pa textarea::placeholder{color:#6b6558;opacity:1}
form.pa textarea{min-height:150px;line-height:1.65;resize:vertical}
form.pa input:focus,form.pa select:focus,form.pa textarea:focus{outline:none;box-shadow:4px 4px 0 var(--yellow)}
form.pa .ayuda{font-family:var(--font-read);font-size:.8rem;color:#4a463d;margin-top:6px;line-height:1.6;max-width:62ch}
form.pa button{margin-top:22px;background:var(--yellow);border:3px solid var(--black);box-shadow:5px 5px 0 var(--black);padding:11px 26px;font-family:'VT323',monospace;font-size:1.35rem;letter-spacing:1px;cursor:pointer;text-transform:uppercase}
form.pa button:hover{background:var(--black);color:var(--yellow)}
form.pa button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--black)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok-box{border:3px solid var(--black);box-shadow:5px 5px 0 var(--green);background:#f2fff6;padding:18px 20px;margin-bottom:18px}
.err-box{border:3px solid var(--black);box-shadow:5px 5px 0 var(--red);background:#fff4f4;padding:14px 18px;margin-bottom:18px}
.ciudad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;list-style:none;margin:16px 0 0;padding:0}
.ciudad-grid a{display:block;border:3px solid var(--black);box-shadow:3px 3px 0 var(--black);padding:9px 12px;text-decoration:none;color:var(--black);background:var(--white)}
.ciudad-grid a:hover{background:var(--yellow)}
.ciudad-grid .n{font-family:'Share Tech Mono',monospace;font-size:.72rem;opacity:.65;display:block}
.lista-res{list-style:none;margin:0;padding:0}
.lista-res li{border-bottom:2px dashed rgba(0,0,0,.25);padding:14px 0}
.lista-res li:last-child{border-bottom:0}
.lista-res a.dir{font-size:1.3rem;color:var(--black);text-decoration:none;border-bottom:2px solid var(--yellow)}
.lista-res .extracto{margin-top:7px;font-family:var(--font-read);font-size:.88rem;line-height:1.65;color:#2c2925;max-width:70ch}
.lista-res .datos{font-family:var(--font-read);font-size:.74rem;color:#5c574e;margin-top:7px}
.pager{display:flex;gap:12px;justify-content:center;margin-top:22px;font-family:var(--font-read);font-size:.82rem}
.pager a{border:2px solid var(--black);padding:7px 14px;text-decoration:none;color:var(--black);background:var(--white)}
.pager a:hover{background:var(--yellow)}
/* MÓVIL — estas páginas (reseña, ciudad, guías, legales) no tenían NINGUNA
   regla responsive: en 390px la cabecera desbordaba, las direcciones largas
   provocaban scroll horizontal y los campos del formulario se salían. */
html,body{overflow-x:hidden;max-width:100%}
@media(max-width:720px){
 body{font-size:19px}
 header{padding:10px 12px;flex-wrap:wrap;gap:8px}
 header a.logo{font-size:1.8rem;letter-spacing:1px}
 header a.back{font-size:.7rem;padding:5px 9px}
 .wrap{margin:18px auto;padding:0 12px 60px}
 .card-header{padding:10px 12px}
 .card-header h1{font-size:1.25rem;letter-spacing:0;overflow-wrap:anywhere}
 .meta{padding:10px 12px;gap:8px 16px;font-size:.74rem}
 .body{padding:14px 12px;font-size:1.12rem}
 .rv-headline{font-size:1.25rem}
 .rv-verdict{font-size:.8rem;padding:3px 9px}
 .rv-pro,.rv-con,.rv-consejo{padding:10px 12px}
 .imgs{padding:0 12px 14px}
 .imgs img{width:calc(50% - 4px);height:110px}
 .v-flecha{width:38px;height:38px;font-size:1.3rem;opacity:.85}
 #v-ant{left:2px}#v-sig{right:2px}
 #v-img{max-width:96vw;max-height:78vh}
 .votes{padding:12px;gap:14px;flex-wrap:wrap}
 .legal{padding:8px 12px}
 .rel h2{font-size:1rem;padding:8px 12px}
 .rel ul{padding:10px 12px 12px}
 .rel a{overflow-wrap:anywhere}
 .ciudad-grid{grid-template-columns:1fr 1fr}
 .lista-res a.dir{font-size:1.15rem;overflow-wrap:anywhere}
 /* En movil la prosa NO se encoge: es donde peor se leia. Solo se recorta el
    margen lateral y se bajan los titulares, que si sobran de ancho. */
 .prose h2{font-size:1.45rem}
 .prose h3{font-size:1.2rem}
 .prose .plantilla{font-size:.8rem;padding:12px;line-height:1.7}
 .prose .clave,.prose .ejemplo{padding:12px 14px}
 /* 16px reales en los campos: por debajo, iOS hace zoom al enfocarlos. */
 form.pa input[type=text],form.pa input[type=email],form.pa select,form.pa textarea{font-size:1rem}
 form.pa button{width:100%;padding:13px 20px}
 .pager{flex-wrap:wrap}
}
@media(max-width:380px){
 header a.logo{font-size:1.55rem}
 .card-header h1{font-size:1.1rem}
 .imgs img{width:100%}
}