@import url('/estatico/lectura-confianza-lucida.css');
@import url('/estatico/lectura-diez-anos.css');
@import url('/estatico/lectura-abuso-temprano.css');
@import url('/estatico/lectura-abuso-conciencia.css');
@import url('/estatico/lectura-revista-17.css');
@import url('/estatico/lectura-revista-junio-2020.css');
@import url('/estatico/lectura-revista-julio-2020.css');
@import url('/estatico/lectura-revista-noviembre-2020.css');
@import url('/estatico/lectura-revista-marzo-2021.css');
@import url('/estatico/lectura-revista-abril-2021.css');
@import url('/estatico/lectura-revista-mayo-2021.css');
@import url('/estatico/lectura-revista-junio-2021.css');
@import url('/estatico/lectura-revista-julio-2021.css');
@import url('/estatico/lectura-revista-agosto-2021.css');
@import url('/estatico/lectura-revista-septiembre-2021.css');
@import url('/estatico/lectura-revista-octubre-2021.css');
@import url('/estatico/lectura-revista-diciembre-2021.css');
/* Textos de Recursos editados para leer en la web (formato: lectura en org/contenido/).
   Usa los tokens de base.css y los trazos del sol del logo (marca/README.md). Los colores del sol son gráficos:
   trazos, fondos y marcas; el texto va siempre en --color-texto o --color-texto-secundario. */
.diseno-lectura {
  --sol-rojo: #fa4702;
  --sol-naranja: #fa6208;
  --sol-naranja-claro: #fca012;
  --sol-oro: #fca901;
  --sol-amarillo: #fcc63a;
  --sol-oliva: #a29548;
  --sol-arena: #e0cabd;
  --sol-lila: #bfb2d5;
  --sol-rosado: #f97dc2;
  --lectura-coral-fondo: #fdebe3;
  --lectura-oro-fondo: #fff4d6;
  --lectura-verde-fondo: #eef0dc;
}

/* Portada: título a mano y un trazo del sol debajo. */
.diseno-lectura .org-portada h1 { max-width: 22ch; }
.diseno-lectura .org-portada h1::after {
  content: ''; display: block; width: 7rem; height: 8px; margin-top: 1rem; border-radius: 8px;
  background: linear-gradient(90deg, var(--sol-rojo) 0 33%, var(--sol-oro) 33% 66%, var(--color-petroleo) 66%);
}
.diseno-lectura .portada-texto>p:not(.ante) { max-width: 52ch; }
.diseno-lectura .org-portada .boton { margin-right: 1rem; }

/* Índice a la izquierda y texto a la derecha; en el celular, uno sobre otro. */
.diseno-codex.org-pagina .org-cuerpo>.org-lectura {
  display: grid; grid-template-columns: 15rem minmax(0, var(--ancho-lectura)); gap: clamp(2rem, 5vw, 5rem);
  justify-content: start; padding-top: 1rem;
}
.lectura-indice { position: sticky; top: 6rem; align-self: start; font-size: .98rem; }
.lectura-indice ol { list-style: none; counter-reset: indice; margin: 0; padding: 0; border-left: 2px solid var(--color-linea); }
.lectura-indice li { counter-increment: indice; }
.lectura-indice li a, .lectura-indice-pie a {
  display: flex; gap: .55rem; padding: .3rem 0 .3rem 1rem; color: var(--color-texto); text-decoration: none; line-height: 1.35;
}
.lectura-indice li a::before { content: counter(indice, upper-roman); min-width: 2.2rem; color: var(--color-texto-secundario); font-variant-numeric: lining-nums; }
.lectura-indice a:hover { color: var(--color-petroleo); text-decoration: underline; }
.lectura-indice-titulo, .lectura-rotulo {
  margin: 0 0 .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--color-texto-secundario);
}
.lectura-indice-pie { margin: .6rem 0 0; }

/* El texto. */
.org-texto { font-size: 1.15rem; line-height: 1.75; }
.org-texto>p { margin: 0 0 1.15rem; hyphens: auto; }
.org-texto h2 {
  position: relative; margin: 3.5rem 0 1.25rem; padding-top: 2.25rem; border-top: 1px solid var(--color-linea);
  font-family: var(--tipo-titulos); font-size: clamp(1.8rem, 3vw, 2.4rem); scroll-margin-top: 7rem;
}
.org-texto h2[data-n]::before {
  content: attr(data-n); display: block; margin-bottom: .4rem; font: 600 .95rem/1 var(--tipo-lectura); letter-spacing: .12em;
  color: var(--color-texto-secundario);
}
.org-texto h2::after {
  content: ''; position: absolute; top: -2px; left: 0; width: 3.5rem; height: 4px; border-radius: 4px; background: var(--sol-naranja);
}
.org-texto h2:nth-of-type(3n+2)::after { background: var(--sol-oro); }
.org-texto h2:nth-of-type(3n)::after { background: var(--color-petroleo); }
.org-texto h3 {
  display: flex; align-items: baseline; gap: .8rem; margin: 2.75rem 0 1rem; font-size: 1.35rem; line-height: 1.35; scroll-margin-top: 7rem;
}
.org-texto h3[data-n]::before {
  content: attr(data-n); flex: 0 0 2.4rem; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: 50%; background: var(--color-accion); color: var(--color-texto); font: 400 1.35rem/1 var(--tipo-titulos);
  transform: translateY(.35rem);
}

/* Epígrafe, definición, destacado y notas. */
.org-texto blockquote.lectura-epigrafe {
  margin: 0 0 2.5rem; padding: 0 0 0 1.25rem; border-left: 4px solid var(--sol-oro); font-family: var(--tipo-titulos); font-size: 1.6rem; line-height: 1.35;
}
.lectura-epigrafe p { margin: 0 0 .5rem; }
.lectura-epigrafe cite { display: block; font: 400 .95rem/1.5 var(--tipo-lectura); color: var(--color-texto-secundario); font-style: normal; }
.lectura-definicion {
  margin: 2rem 0; padding: 1.5rem 1.75rem; background: var(--color-superficie); border: 1px solid var(--color-linea);
  border-left: 6px solid var(--color-petroleo); border-radius: var(--radio-superficie); font-size: 1.08rem;
}
.lectura-definicion p:last-child { margin-bottom: 0; }
.lectura-destacado {
  margin: 2rem 0; padding: 1.25rem 1.5rem; background: var(--color-accion); border-radius: var(--radio-superficie);
  font-family: var(--tipo-titulos); font-size: 1.55rem; line-height: 1.35;
}
.lectura-nota {
  margin-top: 3rem; padding: 1.5rem 1.75rem; background: var(--color-franja); border-radius: var(--radio-superficie); font-size: 1rem;
}
.lectura-nota p:last-child { margin-bottom: 0; }
.org-texto .lectura-bibliografia + ul { padding-left: 1.1rem; font-size: 1rem; line-height: 1.6; }
.org-texto .lectura-bibliografia + ul li { margin-bottom: .55rem; }

/* Figuras e infografías: comunes. */
.lectura-figura { margin: 2.25rem 0; }
.lectura-figura figcaption { margin-top: .9rem; font-size: .95rem; line-height: 1.5; color: var(--color-texto-secundario); }
.lectura-figura ul, .lectura-figura ol { list-style: none; margin: 0; padding: 0; }

/* Proceso (antes, durante, después) y línea de tiempo: tres pasos unidos por un trazo. */
.lectura-proceso ol, .lectura-linea ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.lectura-proceso li, .lectura-linea li { position: relative; padding-top: 1.4rem; font-size: 1rem; line-height: 1.45; }
.lectura-proceso li::before, .lectura-linea li::before {
  content: ''; position: absolute; top: 0; left: 0; right: -1rem; height: 8px; border-radius: 8px; background: var(--sol-oro);
}
.lectura-proceso li:nth-child(2)::before { background: var(--sol-rojo); }
.lectura-proceso li:nth-child(3)::before { background: var(--sol-lila); right: 0; }
.lectura-linea li:nth-child(2)::before { background: var(--sol-naranja-claro); }
.lectura-linea li:nth-child(3)::before { background: var(--color-petroleo); right: 0; }
.lectura-proceso b, .lectura-linea b { display: block; margin-bottom: .25rem; font: 400 1.6rem/1.1 var(--tipo-titulos); }

/* Una de cada cuatro personas. */
.lectura-cuarto { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 1.5rem; align-items: center; }
.lectura-cuarto svg { width: 100%; height: auto; }
.lectura-cuarto figcaption { margin: 0; font-size: 1.1rem; color: var(--color-texto); }
.persona circle, .persona path { stroke-width: 4; stroke-linecap: round; }
.persona path { fill: none; }
.persona.t-coral circle { fill: var(--sol-naranja); stroke: var(--sol-naranja); }
.persona.t-coral path { stroke: var(--sol-naranja); }
.persona.t-gris circle { fill: var(--color-linea); stroke: var(--color-linea); }
.persona.t-gris path { stroke: var(--color-borde-control); }

/* Tres maneras de confiar. */
.lectura-confianzas { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: .9rem; align-items: stretch; }
.lectura-confianzas figcaption { grid-column: 1 / -1; margin-top: 0; }
.confianza { padding: 1.25rem; border-radius: var(--radio-superficie); font-size: .98rem; line-height: 1.5; border: 1px solid var(--color-linea); background: var(--color-superficie); }
.confianza p { margin: 0; }
.confianza .confianza-nombre { margin-bottom: .5rem; font: 400 1.45rem/1.15 var(--tipo-titulos); }
.confianza-ciega { border-top: 6px solid var(--sol-lila); }
.confianza-total { border-top: 6px solid var(--sol-rojo); }
.confianza-lucida { border: 2px solid var(--color-petroleo); border-top-width: 6px; background: var(--color-area-fondo); }

/* Diagramas de la geometría del abuso. */
.lectura-diagrama svg { display: block; width: 100%; max-width: 30rem; height: auto; margin-inline: auto; }
.lectura-diagrama-angosto svg { max-width: 20rem; }
.lectura-par { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2.25rem 0; }
.lectura-par .lectura-figura { margin: 0; padding: 1rem; background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radio-superficie); }
.d-nodo { font: 600 17px var(--tipo-lectura); fill: var(--color-texto); }
.d-rotulo { font: 400 19px var(--tipo-titulos); fill: var(--color-texto); }
.d-centro { font: 400 17px var(--tipo-lectura); fill: var(--color-texto); }
.d-trazo { stroke-width: 5; stroke-linecap: round; fill: none; }
.d-punta { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.t-coral { stroke: var(--sol-naranja); }
.t-petroleo { stroke: var(--color-petroleo); }
.d-triangulo { stroke-width: 2; stroke-linejoin: round; }
.d-abusivo { fill: var(--lectura-coral-fondo); stroke: var(--sol-naranja-claro); }
.d-garante { fill: var(--color-area-fondo); stroke: var(--color-petroleo); }
.d-rombo { fill: var(--lectura-oro-fondo); stroke: var(--sol-oro); stroke-width: 2; stroke-linejoin: round; }

/* El silencio en cifras. */
.lectura-cifras ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.lectura-cifras li { padding: 1.25rem; background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radio-superficie); }
.lectura-cifras b { display: block; font: 400 2.6rem/1 var(--tipo-titulos); }
.lectura-cifras span { display: block; margin-top: .4rem; font-size: 1rem; line-height: 1.4; }
.lectura-cifras .barra { display: block; height: 10px; margin-top: .9rem; border-radius: 10px; background: var(--color-linea); position: relative; overflow: hidden; }
.lectura-cifras .barra::before { content: ''; position: absolute; inset: 0 auto 0 0; border-radius: 10px; background: var(--color-barra); }
.lectura-cifras .b-50::before { width: 50%; }
.lectura-cifras .b-10::before { width: 10%; }
.lectura-cifras .b-20::before { width: 20%; }
.cifra-coral { --color-barra: var(--sol-naranja); border-top: 6px solid var(--sol-naranja) !important; }
.cifra-dorado { --color-barra: var(--sol-oro); border-top: 6px solid var(--sol-oro) !important; }
.cifra-verde { --color-barra: var(--sol-oliva); border-top: 6px solid var(--sol-oliva) !important; }
.cifra-petroleo { border-top: 6px solid var(--color-petroleo) !important; }

/* Lo que silencia: fichas con un trazo del sol cada una. */
.lectura-causas ul { display: flex; flex-wrap: wrap; gap: .6rem; }
.lectura-causas li {
  display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem .5rem .8rem; min-height: 44px;
  border-radius: 999px; background: var(--color-superficie); border: 1px solid var(--color-linea); font-size: 1rem;
}
.lectura-causas li::before { content: ''; width: 18px; height: 6px; border-radius: 6px; background: var(--sol-rojo); transform: rotate(-35deg); }
.lectura-causas li:nth-child(2)::before { background: var(--sol-naranja); }
.lectura-causas li:nth-child(3)::before { background: var(--sol-naranja-claro); }
.lectura-causas li:nth-child(4)::before { background: var(--sol-oro); }
.lectura-causas li:nth-child(5)::before { background: var(--sol-oliva); }
.lectura-causas li:nth-child(6)::before { background: var(--sol-arena); }
.lectura-causas li:nth-child(7)::before { background: var(--sol-lila); }
.lectura-causas li:nth-child(8)::before { background: var(--sol-rosado); }

/* Lo que hace una denuncia, la red y el protocolo: listas con marca. */
.lectura-efectos ul, .lectura-red ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.lectura-efectos li, .lectura-red li {
  padding: 1rem 1.1rem 1rem 3rem; position: relative; background: var(--color-superficie); border: 1px solid var(--color-linea);
  border-radius: var(--radio-superficie); font-size: 1rem; line-height: 1.45;
}
.lectura-efectos li::before {
  content: ''; position: absolute; left: 1.1rem; top: 1.25rem; width: 14px; height: 14px; border-radius: 50%; background: var(--color-petroleo);
}
.lectura-red li::before {
  content: ''; position: absolute; left: 1rem; top: 1.35rem; width: 20px; height: 6px; border-radius: 6px; background: var(--sol-oliva); transform: rotate(-35deg);
}
.lectura-red li:nth-child(odd)::before { background: var(--sol-naranja-claro); }
.lectura-lista { padding: 1.5rem 1.75rem; background: var(--lectura-oro-fondo); border-radius: var(--radio-superficie); }
.lectura-lista li { position: relative; padding: .35rem 0 .35rem 2.1rem; font-size: 1.02rem; line-height: 1.5; }
.lectura-lista li::before {
  content: ''; position: absolute; left: .2rem; top: .7rem; width: 1rem; height: .5rem;
  border-left: 3px solid var(--color-petroleo); border-bottom: 3px solid var(--color-petroleo); transform: rotate(-45deg);
}

/* Los diez consejos de un vistazo. */
.lectura-consejos ol { list-style: none; margin: 1.5rem 0 1rem; padding: 0; counter-reset: consejo; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.lectura-consejos li { counter-increment: consejo; }
.lectura-consejos a {
  display: flex; gap: .75rem; align-items: center; height: 100%; padding: .75rem 1rem; color: var(--color-texto); text-decoration: none;
  background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radio-superficie); font-size: 1rem; line-height: 1.35;
}
.lectura-consejos a::before {
  content: counter(consejo); flex: 0 0 2rem; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--color-accion); font: 400 1.15rem/1 var(--tipo-titulos);
}
.lectura-consejos a:hover { border-color: var(--color-petroleo); }

/* Datos del consejo 5. */
.org-texto .lectura-datos { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.lectura-datos li { padding: 1.1rem 1.2rem; background: var(--color-superficie); border: 1px solid var(--color-linea); border-left: 5px solid var(--sol-oro); border-radius: var(--radio-superficie); font-size: 1rem; line-height: 1.45; }
.lectura-datos li:nth-child(3n+2) { border-left-color: var(--sol-naranja); }
.lectura-datos li:nth-child(3n) { border-left-color: var(--color-petroleo); }
.lectura-datos b { display: block; margin-bottom: .2rem; font: 400 2rem/1.1 var(--tipo-titulos); }

/* Precondiciones de Finkelhor. */
.lectura-barreras ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; counter-reset: barrera; }
.lectura-barreras li { counter-increment: barrera; padding: 1.1rem 1.2rem; border-radius: var(--radio-superficie); font-size: 1rem; line-height: 1.45; border: 1px dashed var(--color-borde-control); }
.lectura-barreras li::before { content: counter(barrera); display: block; font: 400 1.8rem/1 var(--tipo-titulos); color: var(--color-texto-secundario); }
.lectura-barreras b { display: block; margin: .3rem 0 .25rem; }
.lectura-barreras .barrera-externa { border: 2px solid var(--color-petroleo); background: var(--color-area-fondo); }

@media (max-width: 900px) {
  .diseno-codex.org-pagina .org-cuerpo>.org-lectura { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .lectura-indice { position: static; padding: 1.25rem; background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radio-superficie); }
  .lectura-indice ol { border-left: 0; }
  .lectura-indice li a { padding-left: 0; }
}
@media (max-width: 640px) {
  .org-texto { font-size: 1.08rem; }
  .lectura-proceso ol, .lectura-linea ol, .lectura-barreras ol { grid-template-columns: 1fr; }
  .lectura-proceso li::before, .lectura-linea li::before { right: 0; }
  .lectura-confianzas { grid-template-columns: 1fr; }
  .lectura-confianzas .confianza-lucida { order: 3; }
  .lectura-confianzas figcaption { order: 4; }
  .lectura-par { grid-template-columns: 1fr; }
  .lectura-cuarto { grid-template-columns: 1fr; gap: .75rem; }
  .lectura-cifras ul, .lectura-efectos ul, .lectura-red ul, .lectura-consejos ol, .org-texto .lectura-datos { grid-template-columns: 1fr; }
  .org-texto blockquote.lectura-epigrafe { font-size: 1.35rem; }
}
@media print {
  .lectura-indice { display: none; }
  .diseno-codex.org-pagina .org-cuerpo>.org-lectura { display: block; }
}