/* VIAMOS · páginas de lectura (guías en /p y textos legales en /legal).
   Se apoya en guia.css. Aquí manda leer: una cabecera de papel, una columna tranquila y un
   solo bloque de color al final. Sin animaciones de entrada. */

.lectura-cab{position:relative;isolation:isolate;overflow:hidden;background:var(--amarillo);padding:clamp(96px,10vw,132px) 0 clamp(44px,6vw,76px)}
/* al leer, la cabecera se queda arriba: flotando taparía el texto */
body:has(main.lectura) .cab{position:absolute;left:0;right:0}
.lectura .wrap{max-width:820px}
.lectura .miga{font-size:15px;font-weight:600;margin-bottom:18px}
.lectura .miga a{text-underline-offset:3px}
.lectura h1{font-size:clamp(36px,5.4vw,60px);line-height:1.04;margin-bottom:18px;text-wrap:balance}
/* el remate del título, en su etiqueta, como en la portada */
.lectura h1 em{display:inline-block;width:fit-content;font-style:normal;background:#fff;border:var(--borde);border-radius:.16em;padding:.1em .18em .12em;margin-top:.06em;line-height:1;rotate:-.7deg}
.lectura .entradilla{font-size:clamp(20px,1.8vw,23px);line-height:1.4;font-weight:400;max-width:34em}
.lectura .entradilla b{font-weight:600}
.lectura .actualizado{font-size:15px;font-weight:600;color:var(--tinta-2)}
.lectura-cuerpo{background:#fff;padding:clamp(44px,6vw,76px) 0 clamp(56px,8vw,104px);font-size:19px;line-height:1.6;font-weight:400}
.lectura h2{font-size:clamp(27px,3.4vw,38px);line-height:1.08;margin:52px 0 14px}
.lectura-cuerpo .wrap>h2:first-child{margin-top:0}
.lectura h3{font-size:20px;margin:30px 0 8px}
.lectura-cuerpo .wrap>:is(p,ul,ol,h2,h3){max-width:58ch}
.lectura p{margin-bottom:16px}
.lectura p b,.lectura li b,.lectura td b{font-weight:600}
.lectura a{color:var(--tinta);text-underline-offset:3px}
.lectura ul,.lectura ol{margin:0 0 20px 22px}
.lectura li{margin-bottom:9px}
.lectura li::marker{color:var(--naranja);font-weight:600}
.lectura table{width:100%;border-collapse:separate;border-spacing:0;margin:18px 0 24px;font-size:16px;border:var(--borde);border-radius:18px;overflow:hidden}
.lectura th{text-align:left;font-size:15px;font-weight:600;background:var(--amarillo);border-bottom:var(--borde);padding:10px 14px}
.lectura td{padding:11px 14px;border-bottom:1px solid var(--linea);vertical-align:top}
.lectura tr:last-child td{border-bottom:0}
/* en el móvil la tabla con cabecera no cabe: menos aire y, si aun así se sale, se desplaza ella */
@media (max-width:480px){
  .lectura table:has(th){display:block;overflow-x:auto}
  .lectura table:has(th) :is(th,td){padding-left:8px;padding-right:8px;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}
}

/* caja destacada */
.lectura .caja{background:var(--amarillo);border:var(--borde);border-radius:22px;padding:20px 24px;margin:28px 0}
.lectura .caja p:last-child{margin-bottom:0}

/* cierre: la acción principal de la página, como pegatina grande */
.lectura .cierre{background:var(--naranja);border:var(--borde);border-radius:32px;padding:clamp(28px,4vw,44px) clamp(22px,4vw,40px);margin:60px 0 10px}
.lectura .cierre h2{margin:0 0 10px;font-size:clamp(30px,4.4vw,48px);line-height:1.04}
.lectura .cierre p{font-weight:400}
.lectura .cierre .mini{font-size:15px;font-weight:600;margin:14px 0 0}
.lectura .cierre .btn{margin-top:6px;color:#fff}
.lectura .cierre .btn:hover{background:#fff;color:var(--tinta)}

/* sigue leyendo */
.lectura .otras{margin:56px 0 0}
.lectura .otras h2{font-size:26px;margin:0 0 14px}
.lectura .otras ul{list-style:none;margin:0;display:grid;gap:8px}
.lectura .otras li{margin:0}
.lectura .otras a{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:56px;padding:10px 20px;background:#fff;border:var(--borde);border-radius:999px;text-decoration:none;font-size:16px;font-weight:600;letter-spacing:0;transition:background .18s}
.lectura .otras a:hover{background:var(--amarillo)}
.lectura .otras a::after{content:"";flex:none;width:8px;height:14px;background:var(--tinta);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

mark.pendiente{background:var(--amarillo);border:1px solid var(--tinta);color:var(--tinta);border-radius:6px;padding:1px 8px;font-size:15px;font-weight:600}
.nota-traduccion{margin:0 0 28px;padding:14px 18px;border:var(--borde);border-radius:16px;font-size:16px;font-weight:500}