/* ProtegeINE — estilos globales (mobile-first) */

:root {
  --azul: #1B3A5C;
  --azul-oscuro: #12293F;
  --teal: #0E9488;           /* solo acentos decorativos: iconos, bordes, sliders */
  --teal-oscuro: #0B766D;    /* texto y botones: 5.49:1 sobre blanco, cumple AA */
  --teal-hover: #095F58;
  --ambar: #D97706;
  --tinta: #1F2937;
  --gris-suave: #F5F4F0;
  --gris-borde: #D8D5CE;
  --blanco: #FFFFFF;
  --radio: 10px;
  --ancho-max: 1080px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-text-size-adjust: 100%;
}

img, svg, canvas { max-width: 100%; height: auto; }

a { color: var(--teal-oscuro); }
a:hover { color: var(--azul); }

.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 1rem;
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
}

/* ---------- Encabezado ---------- */
.encabezado {
  background: var(--azul);
  color: var(--blanco);
}
.encabezado-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: .7rem 1rem;
  max-width: var(--ancho-max);
  margin: 0 auto;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--blanco);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.logo svg { flex: none; }
.nav-principal {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .4rem;
}
.nav-principal a {
  color: #DDE7F2;
  text-decoration: none;
  padding: .35rem .6rem;
  border-radius: 6px;
  font-size: .95rem;
}
.nav-principal a:hover,
.nav-principal a:focus-visible { background: var(--azul-oscuro); color: var(--blanco); }
.nav-principal a[aria-current="page"] {
  background: var(--azul-oscuro);
  color: var(--blanco);
  font-weight: 600;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--azul) 0%, var(--azul-oscuro) 100%);
  color: var(--blanco);
  padding: 2rem 0 2.2rem;
  text-align: center;
}
.hero h1 {
  margin: 0 auto .6rem;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.2;
  max-width: 22ch;
  letter-spacing: -.01em;
}
.hero .subtitulo {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: #CBD9E8;
}
/* La página de la herramienta usa un encabezado más corto: ahí lo que importa
   es que la zona de subida quede a la vista cuanto antes. */
.hero-compacto { padding: 1.5rem 0 1.6rem; }
.hero-compacto h1 { font-size: clamp(1.45rem, 4vw, 2rem); }

.cta-hero { margin: 1.4rem 0 0; }
.boton-grande { padding: 1rem 2.1rem; font-size: 1.15rem; }

.hero .candado {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: .9rem;
  color: #E8F4F2;
}

/* En móvil compactamos la portada para que el botón de la herramienta
   quede visible sin hacer scroll. */
@media (max-width: 600px) {
  .encabezado-inner { padding: .5rem .8rem; }
  .nav-principal a { padding: .25rem .45rem; font-size: .85rem; }
  .hero { padding: 1.2rem 0 1.3rem; }
  .hero .subtitulo { font-size: .95rem; }
  .hero .candado { margin-top: .7rem; padding: .4rem .75rem; font-size: .82rem; }
  .herramienta { padding: 1rem 0 1.6rem; }
  .tarjeta-tool { padding: .7rem; }
  .zona-subida { padding: 1.4rem .8rem; }
  .zona-subida > svg { width: 34px; height: 34px; }
  .zona-subida p { margin: .3rem 0; font-size: .9rem; }
}

/* ---------- Herramienta ---------- */
.herramienta {
  padding: 1.4rem 0 2rem;
  background: var(--gris-suave);
}
.tarjeta-tool {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(27,58,92,.07);
}

.zona-subida {
  border: 2px dashed var(--gris-borde);
  border-radius: var(--radio);
  padding: 2.2rem 1rem;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.zona-subida.arrastrando {
  border-color: var(--teal);
  background: #EDF7F6;
}
.zona-subida p { margin: .4rem 0; color: #55606E; }
.zona-subida .nota-privacidad {
  font-size: .9rem;
  color: var(--teal-oscuro);
  font-weight: 600;
}

.boton {
  display: inline-block;
  border: 0;
  border-radius: 8px;
  padding: .8rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: var(--teal-oscuro);
  color: var(--blanco);
  text-decoration: none;
}
.boton:hover, .boton:focus-visible { background: var(--teal-hover); }
.boton-secundario {
  background: transparent;
  color: var(--azul);
  border: 2px solid var(--azul);
}
.boton-secundario:hover, .boton-secundario:focus-visible {
  background: var(--azul);
  color: var(--blanco);
}
.boton-chico {
  padding: .4rem .8rem;
  font-size: .88rem;
  font-weight: 600;
  border-radius: 6px;
}
.boton[disabled] { opacity: .5; cursor: not-allowed; }

.mensaje-error {
  color: #B42318;
  background: #FEF3F2;
  border: 1px solid #F8C9C4;
  border-radius: 8px;
  padding: .6rem .9rem;
  margin-top: .8rem;
  font-size: .95rem;
}
.mensaje-exito {
  color: #12694F;
  background: #EDF7F2;
  border: 1px solid #BFE3D2;
  border-radius: 8px;
  padding: .6rem .9rem;
  margin-top: .8rem;
  font-size: .95rem;
}
[hidden] { display: none !important; }

/* Editor */
.editor { display: grid; gap: 1rem; }
.lienzo-marco {
  background: repeating-conic-gradient(#EAE8E2 0% 25%, #F5F4F0 0% 50%) 0 0 / 22px 22px;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: .6rem;
  display: flex;
  justify-content: center;
}
#lienzo {
  max-width: 100%;
  max-height: 68vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  display: block;
}
#lienzo.modo-tachar { cursor: crosshair; touch-action: none; }

.panel-controles {
  display: grid;
  gap: 1rem;
}
.grupo-control {
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: .9rem;
  margin: 0;
}
.grupo-control legend, .grupo-control .titulo-grupo {
  font-weight: 700;
  color: var(--azul);
  padding: 0 .3rem;
  font-size: 1rem;
}
.grupo-control label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin: .7rem 0 .25rem;
  color: #3B4653;
}
.grupo-control label:first-of-type { margin-top: .2rem; }
.campo-texto {
  width: 100%;
  font: inherit;
  padding: .55rem .7rem;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
}
.plantillas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
}
.chip {
  border: 1px solid var(--gris-borde);
  background: var(--gris-suave);
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--tinta);
}
.chip:hover, .chip:focus-visible { border-color: var(--teal); background: #EDF7F6; }

.fila-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  align-items: center;
}
.opciones-radio { display: flex; gap: .3rem .9rem; flex-wrap: wrap; }
.opciones-radio label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}
input[type="range"] { width: 100%; max-width: 240px; accent-color: var(--teal); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--teal); width: 1.05rem; height: 1.05rem; }

/* La página de la herramienta se sirve con style-src 'self': los estilos en
   línea quedan bloqueados por el navegador. Todo va en clases, sin excepción. */
/* Va calificada con .grupo-control para ganarle en especificidad a la regla
   `.grupo-control label { display: block }` de más arriba. */
.grupo-control label.opcion-tachar {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: .2rem 0 0;
  font-weight: 600;
  cursor: pointer;
}
.enlace-tras-caja { margin-top: 1.4rem; }

.aviso-tachar {
  font-size: .88rem;
  color: #55606E;
  background: var(--gris-suave);
  border-radius: 8px;
  padding: .55rem .8rem;
  margin-top: .6rem;
}
.botones-tachar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

.fila-descarga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.2rem;
  border-top: 1px solid var(--gris-borde);
  padding-top: 1rem;
}

/* Escritorio: lienzo + panel lado a lado */
@media (min-width: 860px) {
  .editor { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); align-items: start; }
  .fila-descarga { grid-column: 1 / -1; }
}

/* ---------- Secciones de contenido ---------- */
.seccion { padding: 2.4rem 0; }
.seccion-alterna { background: var(--gris-suave); }
.seccion h2 {
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  color: var(--azul);
  margin: 0 0 1.2rem;
  letter-spacing: -.01em;
}

.entradilla {
  max-width: 68ch;
  font-size: 1.05rem;
  color: #44505E;
  margin: -.4rem 0 1.4rem;
}
.cta-seccion { margin-top: 1.5rem; }

.casos { padding-left: 1.2rem; margin: 0 0 1.2rem; max-width: 68ch; }
.casos li { margin-bottom: .5rem; }
.casos strong { color: var(--azul); }

/* Caja de comprobación de la página de la herramienta */
.caja-comprobar {
  background: var(--gris-suave);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--teal-oscuro);
  border-radius: var(--radio);
  padding: 1.4rem 1.3rem;
  max-width: 72ch;
}
.caja-comprobar h2 { margin: 0 0 .7rem; font-size: clamp(1.25rem, 3.2vw, 1.5rem); }
.caja-comprobar h3 {
  margin: 1.3rem 0 .35rem;
  font-size: 1.02rem;
  color: var(--azul);
}
.caja-comprobar p { margin: 0 0 .7rem; }
.caja-comprobar code {
  background: #E7E9E4;
  border-radius: 4px;
  padding: .1rem .35rem;
  font-size: .92em;
}
.caja-comprobar kbd {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: .05rem .4rem;
  font-family: inherit;
  font-size: .88em;
  font-weight: 600;
}

.pasos { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; counter-reset: paso; }
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li {
  counter-increment: paso;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 1.1rem 1.1rem 1.1rem 3.4rem;
  position: relative;
}
.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 1rem; top: 1.05rem;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--teal-oscuro);
  color: var(--blanco);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
}
.pasos strong { color: var(--azul); }

.confianza { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
@media (min-width: 700px) { .confianza { grid-template-columns: repeat(2, 1fr); } }
.confianza li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 1rem;
}
.confianza .icono {
  flex: none;
  width: 2.4rem; height: 2.4rem;
  border-radius: 8px;
  background: #EDF7F6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-oscuro);
}
.confianza strong { color: var(--azul); display: block; margin-bottom: .15rem; }
.confianza p { margin: 0; font-size: .95rem; color: #44505E; }

/* FAQ */
.faq details {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  margin-bottom: .7rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--azul);
  padding: .9rem 1rem;
  list-style-position: outside;
}
.faq details > div { padding: 0 1rem .9rem; }
.faq details p { margin: .2rem 0 .6rem; }

/* Tarjetas de guías */
.tarjetas-guias { display: grid; gap: 1rem; }
@media (min-width: 700px) { .tarjetas-guias { grid-template-columns: 1fr 1fr; } }
.tarjeta-guia {
  display: block;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 1.1rem;
  text-decoration: none;
  color: inherit;
}
.tarjeta-guia:hover { border-color: var(--teal); }
.tarjeta-guia h3 { margin: 0 0 .35rem; color: var(--azul); font-size: 1.08rem; }
.tarjeta-guia p { margin: 0; font-size: .93rem; color: #44505E; }
.tarjeta-guia .leer { color: var(--teal-oscuro); font-weight: 700; font-size: .9rem; }

/* ---------- Espacios publicitarios ----------
   Cada espacio reserva su altura DESDE EL PRIMER PINTADO. Es deliberado: si el
   anuncio empujara el contenido al cargar, se dispararía el Cumulative Layout
   Shift y Google penalizaría el posicionamiento — justo lo que sostiene a este
   sitio. El marcador punteado desaparece solo cuando entra el anuncio real. */
.ad-zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin: 1.6rem auto;
}
.ad-zona__etiqueta {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  /* Legible a propósito (5.31:1): las políticas de Google exigen que la
     publicidad esté claramente identificada como tal. */
  color: #646C78;
}
.ad-zona__caja {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  border: 1px dashed var(--gris-borde);
  border-radius: 8px;
  color: #B4BAC2;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .012);
}
/* Cuando el código real de AdSense se inserte, quita el marcador punteado. */
.ad-zona__caja:not(:empty),
.ad-zona__caja.cargado { border-style: none; background: none; }

/* Formato horizontal (leaderboard) */
.ad-leaderboard .ad-zona__caja { width: 728px; height: 90px; }
/* Formato rectángulo */
.ad-rectangulo .ad-zona__caja { width: 300px; height: 250px; }

@media (max-width: 780px) {
  /* En móvil el leaderboard baja a 320x50: es el mínimo que admite AdSense,
     cabe sin desbordar y no empuja el contenido fuera de la primera pantalla. */
  .ad-leaderboard .ad-zona__caja { width: 320px; height: 50px; }
}

@media (min-width: 781px) {
  /* El cuerpo del artículo mide 720px y un leaderboard necesita 728. Dejamos
     que el bloque sobresalga 4px por lado en vez de recortar el anuncio, que
     rompería su formato. */
  .articulo .ad-leaderboard { margin-left: -4px; margin-right: -4px; }
}

/* El espacio del hero se revela poco después de cargar, pero su altura ya
   estaba reservada, así que nada se mueve de sitio. */
.ad-hero { margin: 1.2rem auto 0; }
.ad-hero .ad-zona__etiqueta { color: #8FA3B8; }
.ad-hero .ad-zona__caja { border-color: rgba(255,255,255,.22); color: #7E93A9; background: rgba(255,255,255,.04); }
.ad-hero.revelando { opacity: 0; }
.ad-hero.revelado { opacity: 1; transition: opacity .45s ease; }
@media (prefers-reduced-motion: reduce) {
  .ad-hero.revelando { opacity: 1; }
  .ad-hero.revelado { transition: none; }
}

.ad-pie { margin: 0 auto 1.4rem; }
.ad-pie .ad-zona__etiqueta { color: #8497A9; }
.ad-pie .ad-zona__caja { border-color: rgba(255,255,255,.16); color: #7A8B9C; background: rgba(255,255,255,.03); }

/* ---------- Artículos ---------- */
.articulo { padding: 2.2rem 0 1rem; max-width: 720px; }
.articulo h1 {
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  color: var(--azul);
  line-height: 1.25;
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}
.articulo .meta-articulo { color: #6A7482; font-size: .9rem; margin-bottom: 1.4rem; }
.articulo h2 { font-size: 1.3rem; color: var(--azul); margin: 1.8rem 0 .5rem; }
.articulo h3 { font-size: 1.1rem; color: var(--azul); margin: 1.4rem 0 .4rem; }
.articulo ul, .articulo ol { padding-left: 1.3rem; }
.articulo li { margin-bottom: .35rem; }
.caja-cta {
  background: #EDF7F6;
  border: 1px solid #BFE3DE;
  border-radius: var(--radio);
  padding: 1.2rem;
  margin: 1.8rem 0;
}
.caja-cta p { margin: 0 0 .8rem; }
.nota-legal-articulo {
  font-size: .85rem;
  color: #6A7482;
  border-top: 1px solid var(--gris-borde);
  padding-top: 1rem;
  margin-top: 2rem;
}

/* ---------- Pie ---------- */
.pie {
  background: var(--azul-oscuro);
  color: #B9C7D6;
  padding: 2rem 0 1.5rem;
  margin-top: 2.5rem;
  font-size: .9rem;
}
.pie a { color: #DDE7F2; }
.pie-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.pie .disclaimer {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1rem;
  margin-top: .5rem;
  max-width: 68ch;
}