/* Estilos de las páginas de texto (privacidad y accesibilidad) y de las
   landings por plataforma/guías. Mismo sistema Modernist que index.html:
   ver design_handoff_revisatusitio_modernist/styles.css (fuente de verdad). */
@font-face{font-family:'Archivo';font-weight:400;font-style:normal;font-display:swap;src:url('/tipografia/Archivo-400-latin.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url('/tipografia/Archivo-700-latin.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:800;font-style:normal;font-display:swap;src:url('/tipografia/Archivo-800-latin.woff2') format('woff2')}

:root{
  color-scheme:light;
  --color-bg:#f3f2f2;
  /* 15-09-2026, igual que la portada: #eae9e9 medía 1,08:1 contra el fondo y la
     barra, el pie y las fichas no se separaban de la página. */
  --color-surface:#e3e1e0;
  --color-text:#201e1d;
  /* Rojo de la marca. El 20-08-2026 se bajo un punto respecto del tono anterior:
     con texto encima daba 3,76:1 y AA exige 4,5:1 para 15px. A simple vista es el
     mismo rojo. El logo lo hereda por currentColor, no lo repite.
     (No escribir el hex antiguo aca: un grep futuro lo confunde con un resto.) */
  --color-accent:#dd2b0f;
  /* Lo unico que puede ir ESCRITO sobre el acento: blanco puro (4,74:1).
     Con --color-bg encima da 4,25:1 y no pasa. */
  --color-sobre-accent:#ffffff;
  /* 52%: al 40% las reglas daban 2,4:1 y el borde del buscador no llegaba al 3:1
     de un elemento de interfaz. */
  --color-divider:color-mix(in srgb, #201e1d 52%, transparent);
  --color-neutral-100:#f8f4f4;
  --color-neutral-400:#bab6b6;
  --color-accent-100:#fff2ef;
  --color-accent-400:#ff9783;
  /* OJO: accent-600 quedo con el MISMO valor que --color-accent tras el ajuste
     del 20-08-2026. Usarlo para un hover no produce cambio visible: para eso va
     accent-700. Se conserva solo para no dejar hueco en la escala. */
  --color-accent-600:#dd2b0f;
  --color-accent-700:#ae1800;
  --color-accent-800:#7c1405;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--color-bg);color:var(--color-text);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,monospace}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}

.saltar{
  position:absolute;left:-9999px;top:0;background:var(--color-text);color:var(--color-bg);
  padding:10px 16px;z-index:10;
}
.saltar:focus{left:0}

.topbar{background:var(--color-surface);border-bottom:2px solid var(--color-divider);padding:16px 0}
.topbar .wrap{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap}
/* El SVG del logo hereda el rojo con currentColor: el color vive UNA vez, en el
   token. Si se vuelve a escribir "#..." dentro del SVG, cambiar el acento pasa a
   ser una cacería archivo por archivo. No hacerlo. */
.topbar svg{display:block;flex:none;color:var(--color-accent)}
/* La marca empuja el nav a la derecha; el nav es navegacion real, no decoracion:
   estas paginas son donde se aterriza desde Google y antes solo tenian el logo. */
.topbar .marca{
  color:var(--color-text);text-decoration:none;display:flex;align-items:center;gap:10px;margin-right:auto;
}
.topbar .marca span{
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:16px;color:var(--color-text);
}
.topbar nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar nav a{color:var(--color-text);text-decoration:none;font-size:14px}
.topbar nav a:hover{color:var(--color-accent-700);text-decoration:underline;text-underline-offset:3px}
.topbar nav a[aria-current="page"]{color:var(--color-accent-700);font-weight:700}
.topbar a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

main{padding:60px 0 84px}
.encabezado{border-bottom:2px solid var(--color-divider);padding-bottom:26px;margin-bottom:38px}
.encabezado p.etiqueta{
  font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--color-accent-700);margin-bottom:12px;
}
h1{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(30px,4.6vw,50px);letter-spacing:-.035em;line-height:1.02;
  max-width:20ch;text-wrap:balance;
}
.entradilla{margin-top:16px;max-width:66ch;font-size:17px;color:color-mix(in srgb, var(--color-text) 75%, transparent);text-wrap:pretty}
.fecha{margin-top:14px;font-family:ui-monospace,monospace;font-size:12.5px;color:color-mix(in srgb, var(--color-text) 72%, transparent)}

.texto{max-width:74ch}
.texto h2{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:23px;letter-spacing:-.02em;margin:40px 0 12px;
}
.texto h3{font-size:17px;font-weight:700;margin:24px 0 6px;letter-spacing:-.01em}
.texto p{margin-bottom:14px;color:color-mix(in srgb, var(--color-text) 75%, transparent)}
.texto strong{color:var(--color-text);font-weight:700}
.texto ul{margin:0 0 16px 0;list-style:none}
.texto li{position:relative;padding-left:20px;margin-bottom:9px;color:color-mix(in srgb, var(--color-text) 75%, transparent)}
.texto li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:6px;height:6px;background:var(--color-accent);
}
.texto a{color:var(--color-accent-700);text-decoration:underline;text-underline-offset:2px}
.texto a:hover{color:var(--color-accent-800)}
.texto a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.ficha{
  background:var(--color-surface);border:2px solid var(--color-divider);
  padding:20px 22px;margin:8px 0 20px;
}
.ficha dl{display:grid;grid-template-columns:max-content 1fr;gap:9px 18px;font-size:15px}
@media(max-width:520px){.ficha dl{grid-template-columns:1fr;gap:2px 0}.ficha dd{margin-bottom:10px}}
.ficha dt{color:color-mix(in srgb, var(--color-text) 72%, transparent);font-size:12px;letter-spacing:.07em;text-transform:uppercase;padding-top:3px}
.ficha dd{font-family:ui-monospace,monospace;font-size:14px;word-break:break-word}

.aviso-caja{
  border-left:2px solid var(--color-accent);padding:4px 0 4px 16px;
  margin:22px 0;color:color-mix(in srgb, var(--color-text) 75%, transparent);
}

footer{border-top:2px solid var(--color-divider);padding:24px 0 40px;background:var(--color-surface)}
.pie{display:flex;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;align-items:baseline}
.pie p,.pie nav{font-size:12.5px;color:color-mix(in srgb, var(--color-text) 72%, transparent)}
.pie nav{display:flex;gap:16px;flex-wrap:wrap}
.pie a{color:var(--color-accent-700);text-decoration:underline;text-underline-offset:2px}
.pie a:hover{color:var(--color-accent-800)}
.pie a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ─────────────────────────────────────────────────────────────────────────
   Landings por plataforma (/wordpress/, /wix/, /shopify/) y guias (/guias/).

   Estas paginas NO llevan JavaScript propio: el buscador es un <form> normal
   que hace GET a "/" con el campo url, y el analizador de la portada lo lee
   y arranca solo. Sin script no hay hash de CSP que mantener.
   ───────────────────────────────────────────────────────────────────────── */

.buscador{
  display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;
  margin:26px 0 10px;max-width:600px;
}
.buscador input{
  flex:1 1 240px;min-width:0;font-family:ui-monospace,monospace;font-size:15px;
  padding:13px 15px;border:1px solid var(--color-divider);
  background:var(--color-surface);color:var(--color-text);
}
.buscador input::placeholder{color:color-mix(in srgb, var(--color-text) 60%, transparent)}
.buscador input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-color:var(--color-accent)}
.buscador button{
  font-family:'Archivo',system-ui,sans-serif;font-size:15px;font-weight:800;
  padding:13px 26px;border:1px solid var(--color-accent);cursor:pointer;
  background:var(--color-accent);color:var(--color-sobre-accent);transition:background .15s ease;
  touch-action:manipulation;
}
.buscador button:hover{background:var(--color-accent-700)}
.buscador button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.bajo-buscador{font-size:13.5px;color:color-mix(in srgb, var(--color-text) 72%, transparent);max-width:60ch;margin-bottom:8px}

/* Lista de comprobaciones, con el punto del color de la gravedad */
.comprobaciones{list-style:none;margin:4px 0 20px;display:flex;flex-direction:column;gap:13px}
.comprobaciones li{position:relative;padding-left:26px}
.comprobaciones li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:10px;height:10px;background:var(--color-neutral-400);
}
.comprobaciones li[data-sev="critical"]::before{background:var(--color-accent)}
.comprobaciones li[data-sev="warn"]::before{background:var(--color-accent-400)}
.comprobaciones li[data-sev="info"]::before{background:var(--color-neutral-400)}
.comprobaciones b{display:block;font-weight:700;color:var(--color-text);font-size:15.5px}
.comprobaciones span{display:block;color:color-mix(in srgb, var(--color-text) 75%, transparent);font-size:14.5px;margin-top:2px}

/* Nombres que la herramienta reconoce (plugins, constructores) */
.reconoce{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 18px}
.reconoce span{
  font-family:ui-monospace,monospace;font-size:12.5px;
  background:var(--color-surface);border:1px solid var(--color-divider);
  padding:5px 11px;color:color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* Ejemplo de instruccion: generica vs. la de tu plataforma */
.contraste{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--color-divider);
  border:2px solid var(--color-divider);overflow:hidden;margin:6px 0 20px}
@media(max-width:620px){.contraste{grid-template-columns:1fr}}
.contraste > div{background:var(--color-surface);padding:15px 17px}
.contraste .rot{
  font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:color-mix(in srgb, var(--color-text) 72%, transparent);margin-bottom:7px;
}
.contraste p{font-size:14.5px;color:color-mix(in srgb, var(--color-text) 75%, transparent);margin:0}
.contraste .buena .rot{color:var(--color-accent-700)}
.contraste .buena p{color:var(--color-text)}

/* Franja de plataformas, va en la portada y al pie de cada landing */
.franja-plat{border-top:2px solid var(--color-divider);margin-top:44px;padding-top:22px}
.franja-plat h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;margin-bottom:12px}
.franja-plat nav{display:flex;flex-wrap:wrap;gap:8px}
.franja-plat a{
  font-size:14px;font-weight:700;text-decoration:none;color:var(--color-accent-700);
  border:1px solid var(--color-accent);padding:7px 14px;background:transparent;
}
.franja-plat a:hover{background:var(--color-accent-100);color:var(--color-accent-800)}
.franja-plat a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* codigo en linea dentro de las guias */
.texto code{font-family:ui-monospace,monospace;font-size:.9em;background:var(--color-accent-100);
  color:var(--color-accent-800);padding:1px 5px;border-radius:3px;word-break:break-word}