/* Tus Derechos · mismo acabado que Divará (barra en píldora, isla, bento, pila y hojas).
   Tokens de INTEGRA: escala ink, papel, radios 28/16/12 y píldora; la marca aquí es verde. */

/* Letras del generador INGO (todas OFL, servidas desde aquí): Playfair Display para títulos, Cormorant Garamond
   para lomos y portadas de libro, Literata para leer la ley, Manrope para la interfaz y Montserrat para rótulos. */
@font-face { font-family: "Playfair Display"; src: url("../fuentes/playfair-display-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fuentes/playfair-display-latin-italica.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fuentes/cormorant-garamond-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fuentes/cormorant-garamond-latin-italica.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("../fuentes/literata-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fuentes/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fuentes/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fuentes/oswald-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
/* Marca JUSTO: recortadas a las letras del wordmark (J U S T O · L E Y S D M É X I C), 1–2 KB cada una. */
@font-face { font-family: "Noto Serif Display JUSTO"; src: url("../fuentes/noto-serif-display-justo.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Noto Serif JUSTO"; src: url("../fuentes/noto-serif-justo.woff2") format("woff2"); font-weight: 700; font-display: block; }

:root {
  --ink-950: #000; --ink-900: #111; --ink-800: #1f1f1f; --ink-700: #333; --ink-600: #4d4d4d;
  --ink-500: #6b6b6b; --ink-400: #767676; --ink-300: #b3b3b3; --ink-200: #d4d4d4; --ink-150: #e4e4e4;
  --ink-100: #ededed; --ink-50: #f5f5f5; --papel: #fff; --fondo: #fff;
  --marca: #0b6b4b; --marca-fuerte: #07583d; --marca-50: #e7f3ed; --marca-100: #cfe8db;
  --senal: #c81e2c; --senal-50: #fdecee; --aviso: #8a5a00; --aviso-50: #fff5e0;
  --resalte: #fde68a;
  --r-panel: 1.75rem; --r-2xl: 1rem; --r-xl: .75rem;
  --sombra: 0 10px 24px -16px rgb(10 10 10 / .5);
  --sombra-lg: 0 18px 40px -22px rgb(10 10 10 / .55), 0 2px 8px rgb(10 10 10 / .07);
  --sombra-2xl: 0 32px 70px -32px rgb(10 10 10 / .65);
  --ios: cubic-bezier(.32, .72, 0, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --clasica: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --rotulo: "Montserrat", "Manrope", system-ui, sans-serif;
  --sans: "Manrope", system-ui, "Segoe UI", Roboto, sans-serif;
  --lectura: 1.0625rem;
  --alto-barra: 128px;
  color-scheme: light;
}
:root[data-texto="grande"] { --lectura: 1.1875rem; }
:root[data-texto="enorme"] { --lectura: 1.375rem; }
:root[data-texto="grande"] body { font-size: 1.0625rem; }
:root[data-texto="enorme"] body { font-size: 1.125rem; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ink-950: #fff; --ink-900: #ececec; --ink-800: #dadada; --ink-700: #c2c2c2; --ink-600: #a6a6a6;
    --ink-500: #8c8c8c; --ink-400: #7c7c7c; --ink-300: #555; --ink-200: #383838; --ink-150: #2a2a2a;
    --ink-100: #1f1f1f; --ink-50: #141414; --papel: #0a0a0a; --fondo: #000;
    --marca: #4fc796; --marca-fuerte: #6ad6a8; --marca-50: #0f2a1f; --marca-100: #164331;
    --senal: #ff6b76; --senal-50: #3a1418; --aviso: #f3c562; --aviso-50: #33270c; --resalte: #6b5a12;
    --sombra: 0 10px 24px -16px rgb(0 0 0 / .9); --sombra-lg: 0 18px 40px -22px rgb(0 0 0 / .9); --sombra-2xl: 0 32px 70px -32px rgb(0 0 0 / .95);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --ink-950: #fff; --ink-900: #ececec; --ink-800: #dadada; --ink-700: #c2c2c2; --ink-600: #a6a6a6;
  --ink-500: #8c8c8c; --ink-400: #7c7c7c; --ink-300: #555; --ink-200: #383838; --ink-150: #2a2a2a;
  --ink-100: #1f1f1f; --ink-50: #141414; --papel: #0a0a0a; --fondo: #000;
  --marca: #4fc796; --marca-fuerte: #6ad6a8; --marca-50: #0f2a1f; --marca-100: #164331;
  --senal: #ff6b76; --senal-50: #3a1418; --aviso: #f3c562; --aviso-50: #33270c; --resalte: #6b5a12;
  --sombra: 0 10px 24px -16px rgb(0 0 0 / .9); --sombra-lg: 0 18px 40px -22px rgb(0 0 0 / .9); --sombra-2xl: 0 32px 70px -32px rgb(0 0 0 / .95);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-synthesis: style; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: var(--sans); color: var(--ink-950); background: var(--fondo); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
::selection { background: var(--ink-950); color: var(--papel); }
mark { background: var(--resalte); color: inherit; border-radius: 3px; padding: 0 1px; }
[hidden] { display: none !important; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-movimiento="reducido"] *, :root[data-movimiento="reducido"] *::before { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.display { font-family: var(--display); letter-spacing: .01em; font-weight: 600; text-transform: uppercase; }
.etiqueta { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-500); }
.marca-texto { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--marca); }
.envoltura { width: min(1240px, 100% - 32px); margin-inline: auto; }
.seccion { padding-block: 18px 8px; }
.seccion__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 16px; margin: 22px 0 16px; }
/* Una sola regla de tamaño para los títulos de sección (antes había dos y la de abajo pisaba a esta). El peso y el
   espaciado los fijan las reglas tipográficas de más abajo. */
.seccion__titulo { font-family: var(--display); font-size: clamp(2.5rem, 10.5vw, 3.7rem); line-height: .98; margin: 10px 0 0; }
.seccion__texto { max-width: 52ch; color: var(--ink-600); margin: 8px 0 0; }

/* ——— Vidrio ——— */
.vidrio { background-color: color-mix(in oklab, var(--papel) 76%, transparent); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid color-mix(in oklab, var(--ink-950) 9%, transparent); }

/* ——— Botones ——— */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--r-2xl); font-weight: 600; font-size: .9375rem; transition: transform .2s var(--suave), background-color .2s, border-color .2s; white-space: nowrap; }
.boton:active { transform: scale(.97); }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton--primario { background: var(--ink-950); color: var(--papel); box-shadow: var(--sombra); }
.boton--primario:hover { background: var(--ink-800); }
.boton--marca { background: var(--marca); color: #fff; }
:root[data-tema="oscuro"] .boton--marca { color: #04140d; }
/* En oscuro el verde es claro (#4fc796): con letra blanca no se lee (~1,9:1). También cuando el oscuro viene del sistema. */
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .boton--marca { color: #04140d; } }
.boton--marca:hover { background: var(--marca-fuerte); }
.boton--secundario { background: var(--papel); color: var(--ink-950); border: 1px solid var(--ink-200); }
.boton--secundario:hover { border-color: var(--ink-950); }
.boton--suave { background: var(--ink-100); color: var(--ink-800); }
.boton--suave:hover { background: var(--ink-150); }
.boton--ancho { width: 100%; }
.boton--chico { min-height: 44px; padding: 6px 12px; font-size: .84rem; border-radius: 999px; }
.boton[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.icono-redondo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--ink-100); color: var(--ink-800); flex: none; transition: transform .2s var(--suave), background-color .2s; }
.icono-redondo:hover { background: var(--ink-150); }
.icono-redondo:active { transform: scale(.94); }
.icono-redondo svg { width: 20px; height: 20px; }
.icono-redondo[aria-pressed="true"] { background: var(--marca-50); color: var(--marca); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--papel); border: 1px solid var(--ink-150); font-size: .84rem; font-weight: 600; color: var(--ink-700); white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--ink-400); }
.chip svg { width: 15px; height: 15px; }
.chip[aria-pressed="true"] { background: var(--ink-950); border-color: var(--ink-950); color: var(--papel); }
.pastilla { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; background: var(--marca-50); color: var(--marca); white-space: nowrap; }
.pastilla svg { width: 13px; height: 13px; }
.pastilla--tinta { background: var(--ink-100); color: var(--ink-700); }

/* ——— Barra superior ——— */
.barra { position: fixed; z-index: 50; inset: 0 0 auto; padding: max(10px, env(safe-area-inset-top)) 0 8px; transition: transform .4s var(--ios); pointer-events: none; }
.barra > * { pointer-events: auto; }
.barra[data-escondida="true"] { transform: translateY(calc(-100% + 6px)); }
.barra__caja { display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; border-radius: 999px; box-shadow: var(--sombra-lg); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1; }
.logo__marca { width: 30px; height: 30px; flex: none; }
.logo small { display: block; white-space: nowrap; font-family: var(--sans); font-size: .58rem; letter-spacing: .1em; font-weight: 700; color: var(--marca); margin-top: 3px; }
.barra__nav { display: flex; gap: 2px; margin-left: auto; }
.barra__nav a { padding: 10px 14px; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--ink-600); transition: background-color .2s, color .2s; }
.barra__nav a:hover { background: var(--ink-100); color: var(--ink-950); }
.barra__nav a[aria-current="true"] { background: var(--ink-950); color: var(--papel); }
.barra__acciones { display: flex; gap: 6px; align-items: center; }
@media (max-width: 960px) { .barra__nav { display: none; } .barra__acciones { margin-left: auto; } }

.pestanas { position: relative; display: flex; gap: 2px; margin-top: 8px; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; box-shadow: var(--sombra); }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a { position: relative; z-index: 1; flex: 1 0 auto; text-align: center; padding: 9px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink-600); transition: color .25s; white-space: nowrap; }
.pestanas a[aria-current="true"] { color: var(--papel); }
.pestanas__indicador { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 60px); transform: translateX(var(--x, 4px)); border-radius: 999px; background: var(--ink-950); transition: transform .35s var(--ios), width .35s var(--ios); }
.pestanas[data-arrastrando] .pestanas__indicador { transition: none; }
@media (min-width: 961px) { .pestanas { display: none; } :root { --alto-barra: 86px; } }
@media (max-width: 380px) { .pestanas a { padding: 8px 9px; font-size: .74rem; } .logo { font-size: 1.1rem; } }

/* ——— Páginas que se deslizan ——— */
.paginas { display: flex; height: 100dvh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.paginas::-webkit-scrollbar { display: none; }
.pagina { flex: 0 0 100%; width: 100%; height: 100dvh; overflow-y: auto; overflow-x: hidden; scroll-snap-align: start; scroll-snap-stop: always; padding-top: var(--alto-barra); padding-bottom: calc(118px + env(safe-area-inset-bottom)); overscroll-behavior-y: contain; contain: layout paint; }
@media (min-width: 961px) { .pagina { padding-bottom: 48px; } }

/* ——— Isla inferior ——— */
.isla { position: fixed; z-index: 60; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; align-items: center; gap: 2px; padding: 6px; border-radius: 999px; box-shadow: var(--sombra-2xl); transition: transform .4s var(--ios); }
.isla[data-escondida="true"] { transform: translate(-50%, calc(100% + 24px)); }
.isla a { display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 7px 6px 6px; border-radius: 999px; font-size: .625rem; font-weight: 600; color: var(--ink-600); transition: background-color .25s var(--ios), color .25s; }
.isla a svg { width: 20px; height: 20px; }
.isla a[aria-current="true"] { background: var(--ink-950); color: var(--papel); }
.isla .isla__centro { margin-inline: 2px; }
.isla__centro span { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -2px; border-radius: 999px; background: var(--marca); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--marca) 80%, black); }
.isla a.isla__centro[aria-current="true"] { background: transparent; color: var(--ink-950); }
.isla__centro svg { width: 22px !important; height: 22px !important; }
@media (max-width: 960px) { .isla { display: flex; } }
@media (max-width: 360px) { .isla a { min-width: 52px; } }

/* ——— Paneles y bento ——— */
.panel { position: relative; border-radius: var(--r-panel); background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--sombra); padding: clamp(18px, 3vw, 28px); }
a.panel, button.panel { display: block; text-align: left; width: 100%; transition: transform .35s var(--suave), box-shadow .35s; }
a.panel:hover, button.panel:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ink-200), var(--sombra-lg); }
a.panel:active, button.panel:active { transform: scale(.985); }
.panel__icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--marca-50); color: var(--marca); }
.panel__icono svg { width: 22px; height: 22px; }
.panel h3 { font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; margin: 14px 0 6px; letter-spacing: .01em; }
.panel p { margin: 0; color: var(--ink-600); font-size: .92rem; }
.panel__flecha { position: absolute; right: 18px; top: 18px; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--ink-100); color: var(--ink-700); }
.panel__flecha svg { width: 16px; height: 16px; }

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.bento > * { grid-column: span 12; }
.bento > .b-3 { grid-column: span 6; }
@media (max-width: 699px) { .bento > .b-3 { padding: 16px; } .bento > .b-3 h3 { font-size: 1.12rem; margin-top: 12px; } .bento > .b-3 p { font-size: .8rem; } .bento > .b-3 .panel__flecha { right: 12px; top: 12px; width: 30px; height: 30px; } }
@media (min-width: 700px) {
  .b-6 { grid-column: span 6; } .b-4 { grid-column: span 4; } .b-8 { grid-column: span 8; } .b-3 { grid-column: span 6; }
}
@media (min-width: 1040px) { .b-3 { grid-column: span 3; } }
.entra { opacity: 0; transform: translateY(14px); animation: entrar .7s var(--suave) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes entrar { to { opacity: 1; transform: none; } }

/* Portada (panel oscuro) */
.portada { padding: clamp(24px, 4.5vw, 48px); background: var(--ink-950); color: var(--papel); box-shadow: var(--sombra-2xl); overflow: hidden; isolation: isolate; }
.portada::before { content: ""; position: absolute; inset: auto -12% -40% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, #0b6b4b 70%, transparent), transparent); z-index: -1; opacity: .75; }
.portada h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.5rem, 7vw, 4.75rem); line-height: .92; margin: 16px 0 14px; letter-spacing: .005em; }
.portada h1 em { font-style: normal; color: #6ad6a8; }
.portada p { color: color-mix(in oklab, currentColor 72%, transparent); max-width: 50ch; margin: 0 0 22px; font-size: 1rem; }
.portada .pastilla { background: rgb(255 255 255 / .1); color: #b6ebd2; }
.buscador { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--papel); color: var(--ink-950); box-shadow: var(--sombra-lg); max-width: 620px; }
.portada .buscador { background: #fff; color: #0a0a0a; }
.buscador svg { width: 20px; height: 20px; color: var(--ink-500); flex: none; }
.portada .buscador svg { color: #6b6b6b; }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 1rem; padding: 10px 0; }
.buscador input::placeholder { color: var(--ink-400); }
.portada .buscador input::placeholder { color: #8f8f8f; }
.buscador .boton { min-height: 42px; border-radius: 999px; }
.portada .buscador .boton { background: #0b6b4b; color: #fff; }
.rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.portada .chip { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); color: #f1f1ee; }
.portada .chip:hover { background: rgb(255 255 255 / .16); }
.cifras { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: clamp(14px, 4vw, 40px); margin-top: 26px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .12); }
.cifra b { display: block; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1; }
.cifra span { display: block; font-size: .76rem; opacity: .65; font-weight: 500; line-height: 1.25; }
@media (max-width: 420px) { .cifra b { font-size: 1.45rem; } .cifra span { font-size: .7rem; } }

/* Pila inteligente (widgets que rotan) */
.pila { position: relative; height: 250px; }
@media (min-width: 700px) { .pila { height: 100%; min-height: 250px; } }
.pila__pista { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; border-radius: var(--r-panel); overscroll-behavior: contain; box-shadow: inset 0 0 0 1px var(--ink-150), var(--sombra-lg); background: var(--papel); }
.pila__pista::-webkit-scrollbar { display: none; }
.widget { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: 22px 54px 22px 22px; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%; }
.widget__cabeza { display: flex; align-items: center; gap: 8px; }
.widget__cabeza svg { width: 16px; height: 16px; color: var(--marca); }
.widget h4 { margin: 4px 0 0; font-family: var(--display); font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; font-weight: 600; }
.widget p { margin: 0; color: var(--ink-600); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.widget__pie { margin-top: auto; display: flex; gap: 8px; align-items: center; font-size: .82rem; font-weight: 600; color: var(--marca); }
.widget__pie svg { width: 16px; height: 16px; }
.pila__puntos { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.pila__puntos i { display: block; width: 6px; height: 6px; border-radius: 999px; background: var(--ink-200); transition: height .3s var(--ios), background-color .3s; }
.pila__puntos i[data-activo] { height: 18px; background: var(--ink-950); }

/* Mosaico de temas */
.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tema { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--sombra); text-align: left; transition: transform .3s var(--suave); min-height: 140px; }
.tema:hover { transform: translateY(-2px); }
.tema:active { transform: scale(.97); }
.tema .panel__icono { width: 40px; height: 40px; border-radius: 12px; }
.tema .panel__icono svg { width: 19px; height: 19px; }
.tema b { font-family: var(--display); font-weight: 600; font-size: 1.08rem; text-transform: uppercase; line-height: 1.05; letter-spacing: .01em; }
.tema small { color: var(--ink-500); font-size: .78rem; line-height: 1.3; }
.tema .etiqueta { margin-top: auto; font-size: .64rem; color: var(--marca); }

/* Guías (¿qué te pasó?) */
.guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.panel.guia { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px; }
.guia h3 { margin: 0 0 2px; font-size: 1.12rem; }
.guia p { font-size: .86rem; }
.guia .panel__flecha { position: static; }

/* ——— Constitución ——— */
/* El buscador de la ley se queda arriba: justo bajo la barra, y sube cuando la barra se esconde. */
.filtros { position: sticky; top: 0; z-index: 5; padding: 10px 16px 10px; margin: 0 -16px; background: color-mix(in oklab, var(--fondo) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 10px 18px -16px rgb(0 0 0 / .35); transition: top .4s var(--ios); }
:root[data-barras="ocultas"] .filtros { top: calc(-1 * var(--alto-barra) + max(6px, env(safe-area-inset-top))); }
.filtros__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 2px 2px; }
.filtros__chips::-webkit-scrollbar { display: none; }
.titulo-bloque { margin-bottom: 16px; padding: 0; overflow: hidden; scroll-margin-top: 140px; }
.titulo-bloque__cabeza { display: flex; justify-content: space-between; gap: 16px; align-items: end; padding: 22px 22px 14px; border-bottom: 1px solid var(--ink-100); }
.titulo-bloque__cabeza h3 { margin: 4px 0 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.titulo-bloque__cabeza p { font-size: .88rem; }
.capitulo { padding: 14px 22px 6px; }
.capitulo + .capitulo { border-top: 1px solid var(--ink-100); }
.capitulo__nombre { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-weight: 700; font-size: .92rem; margin: 2px 0 6px; }
.capitulo__nombre span { color: var(--ink-500); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.seccion-nombre { font-size: .78rem; font-weight: 700; color: var(--marca); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 2px; }
.fila-art { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 11px 6px; border-radius: 14px; text-align: left; transition: background-color .2s; }
.fila-art:hover { background: var(--ink-50); }
.fila-con + .fila-con { border-top: 1px solid var(--ink-100); }
.fila-art__num { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1; color: var(--ink-950); }
.fila-art__num small { display: block; font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-500); text-transform: uppercase; margin-bottom: 3px; }
.fila-art__texto { font-size: .88rem; color: var(--ink-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fila-art__marcas { display: flex; gap: 6px; color: var(--ink-400); }
.fila-art__marcas svg { width: 16px; height: 16px; }
.fila-art__marcas .guardado { color: var(--marca); }
.fila-art__marcas .leido { color: var(--marca); opacity: .6; }
.resultado { display: block; width: 100%; text-align: left; padding: 16px 18px; margin-bottom: 10px; }
.resultado b { font-family: var(--display); font-size: 1.15rem; font-weight: 600; text-transform: uppercase; }
.resultado p { margin: 6px 0 0; font-size: .9rem; }
.resultado .etiqueta { display: block; margin-top: 2px; }
.vacio { text-align: center; padding: 40px 20px; color: var(--ink-500); }
.vacio svg { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--ink-300); }

/* Texto del artículo */
.texto-art { font-size: var(--lectura); line-height: 1.7; color: var(--ink-900); }
.texto-art p { margin: 0 0 .85em; }
.texto-art .fraccion { padding-left: 2.6em; text-indent: -2.6em; }
.texto-art .inciso { padding-left: 4.2em; text-indent: -1.8em; }
.texto-art .apartado { font-weight: 600; margin-top: 1.2em; }
.texto-art .rotulo { font-weight: 700; color: var(--ink-950); }
.texto-art .nota { display: block; text-indent: 0; margin-top: 4px; font-size: .72rem; line-height: 1.4; color: var(--ink-500); font-weight: 500; }
:root[data-notas="no"] .texto-art .nota, :root[data-notas="no"] .nota-art { display: none; }
.texto-art [data-resaltado] { background: color-mix(in oklab, var(--resalte) 55%, transparent); border-radius: 8px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--resalte) 55%, transparent); }
.nota-art { font-size: .76rem; color: var(--ink-500); border-top: 1px dashed var(--ink-200); padding-top: 10px; margin-top: 14px; }
.ruta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .78rem; color: var(--ink-500); font-weight: 600; margin-bottom: 8px; }
.ruta span + span::before { content: "›"; margin-right: 8px; color: var(--ink-300); }

/* ——— Pregunta ——— */
.preguntar { padding: clamp(20px, 3.5vw, 32px); }
.preguntar textarea { width: 100%; min-height: 96px; resize: vertical; border: 1px solid var(--ink-200); border-radius: 18px; padding: 14px 16px; background: var(--fondo); font-size: 1.05rem; line-height: 1.5; outline: none; transition: border-color .2s; }
.preguntar textarea:focus { border-color: var(--ink-950); }
.preguntar__acciones { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; }
.burbuja { max-width: 86%; margin: 0 0 12px auto; padding: 12px 16px; border-radius: 20px 20px 6px 20px; background: var(--ink-950); color: var(--papel); font-size: .95rem; width: fit-content; }
.respuesta { display: grid; gap: 12px; }
.respuesta__titulo { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; }
.respuesta__titulo svg { width: 16px; height: 16px; color: var(--marca); }
.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--aviso-50); color: var(--ink-800); font-size: .84rem; line-height: 1.45; }
.aviso svg { width: 18px; height: 18px; flex: none; color: var(--aviso); margin-top: 1px; }
.aviso--marca { background: var(--marca-50); }
.aviso--marca svg { color: var(--marca); }

/* ——— Solicita ——— */
.formato { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: .8rem; font-weight: 700; color: var(--ink-700); }
.campo small { color: var(--ink-500); font-size: .76rem; }
.campo input, .campo textarea, .campo select { width: 100%; border: 1px solid var(--ink-200); border-radius: 14px; padding: 12px 14px; background: var(--papel); font-size: 1rem; outline: none; transition: border-color .2s; }
.campo textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--ink-950); }
.campos-2 { display: grid; gap: 14px; }
@media (min-width: 640px) { .campos-2 { grid-template-columns: 1fr 1fr; } }
.hoja-escrito { display: grid; gap: 18px; }
@media (min-width: 900px) { .hoja-escrito { grid-template-columns: 1fr 1fr; align-items: start; } .hoja-escrito .papel { position: sticky; top: 0; } }
.papel { background: #fffdf8; color: #1a1a1a; border-radius: 16px; padding: 26px 24px; box-shadow: inset 0 0 0 1px #ebe4d6, var(--sombra); font-family: Georgia, "Times New Roman", serif; font-size: .9rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 70vh; overflow: auto; }
.papel .vacio-campo { background: #fff3c4; border-radius: 4px; padding: 0 3px; font-family: var(--sans); font-size: .8rem; color: #8a5a00; }
.acciones-escrito { display: flex; flex-wrap: wrap; gap: 8px; }

/* ——— Hoja inferior ——— */
.velo { position: fixed; inset: 0; z-index: 80; background: rgb(10 10 10 / .42); opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; backdrop-filter: blur(2px); }
.velo[data-abierto="true"] { opacity: 1; visibility: visible; transition: opacity .35s; }
.hoja { position: fixed; z-index: 90; left: 50%; bottom: 0; width: min(760px, 100%); max-height: min(94dvh, 940px); display: flex; flex-direction: column; border-radius: 28px 28px 0 0; background: var(--papel); box-shadow: var(--sombra-2xl); transform: translate(-50%, 104%); transition: transform .45s var(--ios); will-change: transform; }
.hoja[data-abierto="true"] { transform: translate(-50%, 0); }
.hoja:not([data-abierto="true"]) { visibility: hidden; transition: transform .45s var(--ios), visibility 0s .45s; }
.hoja[data-arrastre="true"] { transition: none; }
.hoja--ancha { width: min(1080px, 100%); }
@media (max-width: 760px) { .hoja--completa { height: 100dvh; max-height: 100dvh; padding-top: env(safe-area-inset-top); border-radius: 0; } }
.hoja__asa { width: 44px; height: 5px; border-radius: 999px; background: var(--ink-200); margin: 9px auto 0; flex: none; cursor: grab; touch-action: none; }
.hoja__cabeza { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px 22px; flex: none; touch-action: none; }
.hoja__cabeza h2 { flex: 1; min-width: 0; margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.1; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoja__cabeza .icono-redondo { width: 40px; height: 40px; }
.hoja__cuerpo { overflow-y: auto; padding: 6px 22px calc(26px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.hoja__pie { padding: 12px 18px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--ink-100); display: flex; gap: 10px; flex: none; background: var(--papel); }
.hoja__pie .boton { flex: 1; min-width: 0; padding-inline: 12px; }
.hoja__pie [data-accion] span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .hoja__pie [data-accion] span { display: none; } .hoja__pie [data-accion="imprimir"] { flex: 2; } .hoja__pie [data-accion="imprimir"] span { display: inline; } }
.ord { text-transform: none; }
.hoja__herramientas { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 16px; }
.hoja h3.display { font-size: 1.5rem; margin: 18px 0 10px; line-height: 1.05; }

.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0; display: grid; gap: 10px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; font-size: .96rem; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--ink-950); color: var(--papel); font-family: var(--display); font-weight: 600; }
.cita { display: block; width: 100%; text-align: left; padding: 16px 18px; border-radius: 18px; background: var(--fondo); box-shadow: inset 3px 0 0 var(--marca); margin-bottom: 10px; transition: background-color .2s; }
.cita:hover { background: var(--ink-50); }
.cita q { display: block; font-size: .95rem; line-height: 1.6; color: var(--ink-800); quotes: "«" "»"; }
.cita span { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: .78rem; font-weight: 700; color: var(--marca); }
.cita span svg { width: 14px; height: 14px; }
.lista-acudir { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lista-acudir li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .92rem; }
.lista-acudir svg { width: 18px; height: 18px; color: var(--marca); margin-top: 2px; }

/* Cuestionario */
.quiz__barra { height: 6px; border-radius: 999px; background: var(--ink-100); overflow: hidden; margin: 4px 0 18px; }
.quiz__barra i { display: block; height: 100%; background: var(--marca); width: var(--p, 0%); transition: width .4s var(--suave); }
.quiz__pregunta { font-family: var(--display); font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.1; text-transform: uppercase; font-weight: 600; margin: 0 0 18px; }
.opciones { display: grid; gap: 10px; }
.opcion { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); text-align: left; font-weight: 600; transition: background-color .2s, box-shadow .2s, transform .2s; }
.opcion:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--ink-950); }
.opcion svg { width: 18px; height: 18px; margin-left: auto; }
.opcion[data-estado="ok"] { background: var(--marca-50); box-shadow: inset 0 0 0 2px var(--marca); color: var(--marca-fuerte); }
.opcion[data-estado="mal"] { background: var(--senal-50); box-shadow: inset 0 0 0 2px var(--senal); color: var(--senal); }
.opcion[disabled] { cursor: default; }
.quiz__fin { text-align: center; padding: 20px 0; }
.quiz__fin b { display: block; font-family: var(--display); font-size: 4rem; line-height: 1; }

/* Ajustes */
.ajuste { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ink-100); }
.ajuste > div:first-child { display: grid; gap: 2px; }
.ajuste b { font-size: .95rem; }
.ajuste small { color: var(--ink-500); font-size: .8rem; }
.segmento { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ink-100); }
.segmento button { padding: 7px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--ink-600); }
.segmento button[aria-pressed="true"] { background: var(--papel); color: var(--ink-950); box-shadow: var(--sombra); }
.interruptor { position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--ink-200); transition: background-color .25s; flex: none; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .25); transition: transform .3s var(--ios); }
.interruptor[aria-checked="true"] { background: var(--marca); }
.interruptor[aria-checked="true"]::after { transform: translateX(20px); }

.pie { margin-top: 30px; padding: 22px 0 8px; border-top: 1px solid var(--ink-150); font-size: .8rem; color: var(--ink-500); display: grid; gap: 6px; }
.pie a { color: var(--marca); font-weight: 600; }

.aviso-toast { position: fixed; z-index: 120; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 22px; background: var(--ink-950); color: var(--papel); font-size: .88rem; font-weight: 600; box-shadow: var(--sombra-2xl); opacity: 0; transition: opacity .3s, transform .4s var(--ios); pointer-events: none; width: max-content; max-width: calc(100vw - 32px); text-align: center; text-wrap: balance; }
.aviso-toast[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 961px) { .aviso-toast { bottom: 28px; } }

.cargando { display: grid; place-items: center; height: 60vh; color: var(--ink-500); gap: 12px; }

@media print {
  body { overflow: visible; background: #fff; }
  body > *:not(#impresion) { display: none !important; }
  #impresion { display: block !important; white-space: pre-wrap; font-family: Georgia, serif; font-size: 12pt; line-height: 1.6; color: #000; }
}
#impresion { display: none; }

/* ——— JUSTO 1.1 ——— */
/* Son leyes: el texto corrido va justificado y con guiones de corte en español. */
p, li, q, .texto-art, .seccion__texto, .aviso span, .papel, .intro { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; }
.centro, .vacio p, .quiz__fin p { text-align: center; hyphens: manual; }
.tema small, .chip, .boton, .fund, .etiqueta, .marca-texto, h1, h2, h3, h4 { text-align: left; hyphens: manual; }
.intro { margin: 0 0 16px; font-size: 1.02rem; color: var(--ink-800); }
.enlace { color: var(--marca); font-weight: 600; font-size: inherit; text-decoration: underline; }

/* Fundamento: chips que abren el párrafo exacto */
.funds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fund { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px 6px 8px; border-radius: 10px; background: var(--marca-50); color: var(--marca-fuerte); font-size: .76rem; font-weight: 600; line-height: 1.25; transition: background-color .2s, transform .2s var(--suave); }
.fund:hover { background: var(--marca-100); }
.fund:active { transform: scale(.97); }
.fund svg { width: 13px; height: 13px; flex: none; }
.fund span { min-width: 0; }
.fund b { font-weight: 700; color: var(--ink-600); padding-left: 6px; border-left: 1px solid color-mix(in oklab, var(--marca) 30%, transparent); white-space: nowrap; }
.cita-legal { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin: 0 0 14px; border-radius: 12px; background: var(--marca-50); color: var(--marca-fuerte); font-size: .84rem; font-weight: 600; text-align: left; }
.cita-legal svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* Pasos con su fundamento */
.pasos li { grid-template-columns: 32px 1fr; }
.pasos li > div > p { margin: 4px 0 0; }
.lista-acudir li > div > p { margin: 0; }
.cita span { flex-wrap: wrap; text-align: left; }

/* Texto de las leyes */
.texto-art .epigrafe { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05em; text-align: left; margin-bottom: .5em; }
.texto-art .numeral { padding-left: 2.4em; text-indent: -2.4em; font-size: .94em; }
.ruta__ley { color: var(--marca); }
.ruta__ley + span::before { content: "›"; margin-right: 8px; color: var(--ink-300); }
.resultado__ley { display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 999px; background: var(--ink-100); color: var(--ink-700); font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.resultado b { display: block; }
.ficha-ley h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); margin: 6px 0 8px; }
.ficha-ley { margin-bottom: 4px; }

/* Calculadora de multas */
.calc { padding: clamp(18px, 3vw, 28px); }
.calc__cabeza { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.calc__cabeza h3 { margin: 0; }
.calc__cabeza p { font-size: .84rem; text-align: left; }
.buscador--claro { background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); max-width: none; }
.calc__lista { display: grid; gap: 6px; margin-top: 8px; }
.calc__fila { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--fondo); text-align: left; font-size: .88rem; transition: background-color .2s, box-shadow .2s; }
.calc__fila:hover { box-shadow: inset 0 0 0 1px var(--ink-300); }
.calc__fila[aria-pressed="true"] { background: var(--marca-50); box-shadow: inset 0 0 0 2px var(--marca); }
.calc__fila b { font-size: .74rem; white-space: nowrap; color: var(--ink-700); text-align: right; }
.calc__no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--ink-950); color: var(--papel); font-family: var(--display); font-weight: 600; font-size: .9rem; }
.calc__detalle { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ink-150); }
.calc__inf { font-size: 1.05rem; font-weight: 600; margin: 6px 0 12px; }
.calc__montos { display: grid; gap: 10px; }
@media (min-width: 640px) { .calc__montos { grid-template-columns: 1fr 1fr; } }
.monto { display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); }
.monto span { font-size: .74rem; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .05em; }
.monto b { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; }
.monto small { color: var(--ink-600); font-size: .82rem; }
.monto--marca { background: var(--marca-50); box-shadow: inset 0 0 0 1px var(--marca-100); }
.monto--tope { margin-top: 12px; background: var(--ink-950); color: var(--papel); box-shadow: none; }
.monto--tope span, .monto--tope small { color: color-mix(in oklab, var(--papel) 75%, transparent); }
.calc__tope { margin-top: 16px; padding: 16px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--ink-150); }
.calc__tope > p { margin: 0 0 10px; font-size: .92rem; }
.segmento--envuelve { flex-wrap: wrap; border-radius: 18px; }
.segmento--envuelve button { flex: 1 1 auto; border-radius: 14px; }
.calc .campo input { max-width: 220px; font-size: 1.1rem; font-weight: 600; }
.lugares { display: grid; gap: 4px; margin: -4px 0 16px; }
.lugares__fase .filtros__chips { padding-top: 6px; }

/* Ubicación y listas tipo menú (como la carta de Divará: nombre, puntos guía y valor) */
.ubicacion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 12px; font-size: .8rem; color: var(--ink-500); }
.ubicacion span { text-align: left; }
.calc__fila { grid-template-columns: 30px minmax(0, auto) minmax(12px, 1fr) auto; }
.menu__nombre { min-width: 0; }
.menu__puntos { align-self: end; margin-bottom: .45em; border-bottom: 2px dotted var(--ink-300); min-width: 12px; }

/* ——— Defiéndete: preguntas que se ramifican ——— */
.flujos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.flujos::-webkit-scrollbar { display: none; }
.flujo-tarjeta { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 16px; min-height: 132px; border-radius: 22px; background: var(--ink-950); color: var(--papel); text-align: left; transition: transform .3s var(--suave); }
.flujo-tarjeta:active { transform: scale(.97); }
.flujo-tarjeta .panel__icono { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in oklab, var(--marca) 30%, transparent); color: var(--papel); }
.flujo-tarjeta .panel__icono svg { width: 19px; height: 19px; }
.flujo-tarjeta b { font-family: var(--display); font-weight: 600; font-size: 1.04rem; text-transform: uppercase; line-height: 1.05; }
.flujo-tarjeta small { margin-top: auto; font-size: .72rem; opacity: .7; }
.flujo-entrada { display: grid; grid-template-columns: 22px 1fr 18px; gap: 12px; align-items: center; width: 100%; padding: 14px 16px; margin: 4px 0 18px; border-radius: 18px; background: var(--ink-950); color: var(--papel); text-align: left; }
.flujo-entrada svg { width: 20px; height: 20px; }
.flujo-entrada b { display: block; font-size: .95rem; }
.flujo-entrada small { display: block; font-size: .78rem; opacity: .75; line-height: 1.35; margin-top: 2px; }
.flujo__lugar { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.flujo__lugar svg { width: 12px; height: 12px; }
.flujo__camino { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; font-size: .8rem; color: var(--ink-500); }
.flujo__camino li { display: grid; grid-template-columns: minmax(0, auto) minmax(12px, 1fr) auto; gap: 8px; align-items: end; }
.flujo__camino li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flujo__camino b { color: var(--ink-950); font-weight: 700; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flujo__titulo { margin-top: 4px; }
.guion { position: relative; padding: 16px 18px; border-radius: 18px; background: var(--marca-50); margin: 10px 0 20px; }
.guion .etiqueta { display: inline-flex; align-items: center; gap: 6px; color: var(--marca-fuerte); }
.guion .etiqueta svg { width: 14px; height: 14px; }
.guion p { margin: 8px 0 12px; font-size: 1.02rem; line-height: 1.55; color: var(--ink-950); font-weight: 500; }
.flujo__pie { display: flex; gap: 10px; width: 100%; }
.flujo__pie .boton { flex: 1; }
.flujo__pie [data-flujo-reinicio] { flex: 0 0 48px; padding-inline: 0; }

/* ——— Menú con puntos guía (nombre ……… valor) ——— */
.menu { display: grid; gap: 2px; }
.panel.menu { padding: 8px; }
.menu__fila { display: grid; grid-template-columns: minmax(0, auto) minmax(12px, 1fr) auto; gap: 8px; align-items: end; width: 100%; padding: 11px 12px; border-radius: 12px; text-align: left; font-size: .92rem; font-weight: 600; color: var(--ink-950); transition: background-color .2s; }
.menu__fila:hover { background: var(--fondo); }
.menu__fila[aria-current="true"] { background: var(--marca-50); color: var(--marca-fuerte); }
.menu__fila .menu__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.menu__fila .menu__nombre svg { width: 14px; height: 14px; color: var(--aviso); flex: none; }
.menu__fila b { font-size: .78rem; font-weight: 700; color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu__seccion { margin: 14px 12px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.indice-leyes { padding: 0; margin-bottom: 16px; overflow: hidden; }
.indice-leyes summary { list-style: none; display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; }
.indice-leyes summary::-webkit-details-marker { display: none; }
.indice-leyes summary b { display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.12rem; line-height: 1.1; margin-top: 2px; }
.indice-leyes summary .pastilla svg { width: 14px; height: 14px; transition: transform .3s var(--suave); }
.indice-leyes[open] summary .pastilla svg { transform: rotate(180deg); }
.indice-leyes > .filtros__chips { padding: 0 16px 6px; }
.indice-leyes [data-indice-lista] { padding: 0 8px 10px; max-height: 58vh; overflow-y: auto; }
.grupos .chip[aria-pressed="true"] svg { color: currentColor; }
/* Textos cortos de una línea: sin justificar (evita huecos). */
.bento .panel > p, .guia p, .flujo-entrada small { text-align: left; hyphens: manual; }
.quiz__pregunta { text-align: left; hyphens: manual; }
.flujo__pie .boton { white-space: nowrap; overflow: hidden; }
.menu__fila .menu__nombre { white-space: normal; overflow: visible; }

/* ——— Ventana de la multa ——— */
.multa__inf { font-family: var(--display); font-size: clamp(1.3rem, 4.6vw, 1.7rem); font-weight: 600; text-transform: uppercase; line-height: 1.08; margin: 6px 0 14px; text-align: left; hyphens: manual; }
.multa__uma { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.multa__uma span { font-family: var(--display); font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.multa__uma small { color: var(--ink-500); font-size: .82rem; }
.escenarios { display: grid; gap: 10px; }
.escenario { --tono: var(--marca); --tono-50: var(--marca-50); display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--tono-50); box-shadow: inset 4px 0 0 var(--tono); }
.escenario--aviso { --tono: var(--aviso); --tono-50: var(--aviso-50); }
.escenario--senal { --tono: var(--senal); --tono-50: var(--senal-50); }
.escenario__cabeza { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-700); }
.escenario__cabeza em { font-style: normal; padding: 3px 9px; border-radius: 999px; background: var(--tono); color: var(--papel); font-size: .74rem; letter-spacing: 0; white-space: nowrap; }
.escenario small { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 700; color: var(--tono); }
.escenario small svg { width: 16px; height: 16px; }
.escenario--senal small { color: var(--ink-500); font-weight: 600; }
.recibo { padding: 16px; border-radius: 18px; background: var(--fondo); }
.recibo__fila { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.recibo__fila b { font-family: var(--display); font-size: 1.5rem; }
.recibo__nota { margin: 8px 0 0; color: var(--ink-600); font-size: .9rem; }

/* ——— Modo lectura (derechos): grande, justificado y tranquilo ——— */
.lectura { max-width: 62ch; margin: 0 auto; padding: 4px 2px 24px; }
.lectura p { font-size: clamp(1.12rem, 4.4vw, 1.3rem); line-height: 1.75; color: var(--ink-900, var(--ink-950)); text-align: justify; hyphens: auto; margin: 0 0 6px; font-weight: 400; }
.lectura .lectura__frase { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.1; text-align: left; hyphens: manual; margin: 4px 0 22px; color: var(--ink-950); }
.lectura__cita { display: block; margin: 0 0 28px; padding: 0; font-size: .8rem; color: var(--ink-500); text-align: left; text-decoration: underline; text-decoration-color: var(--ink-200, var(--ink-150)); text-underline-offset: 3px; }
.lectura__cita:hover { color: var(--ink-950); }
.multa__uma span::after { content: " UMA"; font-size: 1.1rem; color: var(--ink-500); }
.umas { margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--ink-150); }
.umas p { margin: 0 0 10px; font-size: .9rem; font-weight: 600; }
.umas__boleta { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .86rem; color: var(--ink-600); }
.umas__boleta input { width: 84px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--ink-150); background: var(--papel); font: inherit; font-weight: 700; color: var(--ink-950); text-align: center; }
.cuenta { display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.cuenta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; color: var(--ink-700); }
.cuenta > div b { font-weight: 700; color: var(--ink-950); white-space: nowrap; }
.cuenta__menos b { color: var(--tono) !important; }
.cuenta__total { margin-top: 4px; padding-top: 10px; border-top: 2px solid color-mix(in oklab, var(--tono) 35%, transparent); align-items: center !important; }
.cuenta__total span { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-950); }
.cuenta__total b { font-family: var(--display); font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 600; line-height: 1; color: var(--tono) !important; letter-spacing: -.01em; }
.escenario--senal .cuenta__total b { color: var(--ink-950) !important; }

/* ——— Biblioteca: portadas y menús ——— */
.estado-elige { margin: -2px 0 18px; }
.estado-elige > .etiqueta { display: inline-flex; align-items: center; gap: 6px; }
.estado-elige > .etiqueta svg { width: 13px; height: 13px; }
.estado-elige .filtros__chips { padding-top: 8px; }
.portadas__titulo { margin: 0 0 10px; }
.portadas { display: grid; grid-auto-flow: column; grid-auto-columns: 156px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 16px 14px; margin: 0 -16px 10px; scrollbar-width: none; }
.portadas::-webkit-scrollbar { display: none; }
.portada-ley { --f: var(--ink-950); --t: var(--papel); --acento: var(--marca); position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; height: 214px; padding: 16px 14px 14px 18px; border-radius: 6px 20px 20px 6px; background: var(--f); color: var(--t); text-align: left; overflow: hidden; box-shadow: var(--sombra), inset 6px 0 0 color-mix(in oklab, var(--t) 12%, transparent); transition: transform .35s var(--suave); }
.portada-ley::after { content: ""; position: absolute; left: 18px; right: 14px; top: 12px; height: 2px; background: var(--acento); border-radius: 2px; }
.portada-ley:active { transform: scale(.97); }
.portada-ley--estatal { --f: var(--marca); --acento: var(--papel); }
.portada-ley--municipal { --f: var(--aviso-50); --t: var(--ink-950); --acento: var(--aviso); }
.portada-ley__sigla { margin-top: 12px; font-family: var(--display); font-weight: 600; font-size: 2.1rem; line-height: .95; letter-spacing: .01em; word-break: break-word; }
.portada-ley__titulo { font-family: var(--display); text-transform: uppercase; font-size: 1rem; line-height: 1.08; font-weight: 500; }
.portada-ley__pie { margin-top: auto; font-size: .7rem; opacity: .72; font-variant-numeric: tabular-nums; }
.menu-portada { padding: 0; overflow: hidden; margin-bottom: 14px; }
.menu-portada__cabeza { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; padding: 18px 18px 12px; }
.menu-portada__cabeza h3 { margin: 2px 0 0; font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.menu-portada .menu { padding: 2px 8px 10px; }
.menu-portada__temas { padding: 0 18px 8px; }
.volver { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); font-size: .86rem; font-weight: 600; }
.volver svg { width: 16px; height: 16px; }
.portada-hero { --f: var(--ink-950); --t: var(--papel); position: relative; overflow: hidden; padding: 22px 20px 18px; border-radius: 26px; background: var(--f); color: var(--t); }
.portada-hero.portada-ley--estatal { --f: var(--marca); }
.portada-hero.portada-ley--municipal { --f: var(--aviso-50); --t: var(--ink-950); }
.portada-hero__sigla { position: absolute; right: -6px; bottom: -18px; font-family: var(--display); font-weight: 600; font-size: 6.5rem; line-height: 1; opacity: .09; pointer-events: none; }
.portada-hero .etiqueta { color: inherit; opacity: .75; }
.portada-hero h2 { position: relative; margin: 8px 0 8px; font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem, 6vw, 2.3rem); line-height: 1.02; font-weight: 600; text-align: left; hyphens: manual; }
.portada-hero p { position: relative; margin: 0; font-size: .86rem; opacity: .8; text-align: left; hyphens: manual; }
.portada-hero__botones { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.portada-hero__botones .boton { background: color-mix(in oklab, var(--t) 14%, transparent); color: inherit; box-shadow: none; }

/* ——— Aprende: feed vertical a pantalla completa ——— */
.aprende-banner { display: grid; grid-template-columns: 54px 1fr 20px; gap: 14px; align-items: center; width: 100%; margin: 22px 0 0; padding: 16px 18px; border-radius: 24px; background: linear-gradient(135deg, var(--ink-950), color-mix(in oklab, var(--marca) 55%, var(--ink-950))); color: var(--papel); text-align: left; box-shadow: var(--sombra); }
.aprende-banner--chico { margin: 0 0 16px; padding: 12px 16px; grid-template-columns: 44px 1fr 18px; }
.aprende-banner .etiqueta { color: color-mix(in oklab, var(--papel) 70%, transparent); }
.aprende-banner b { display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; margin: 2px 0; }
.aprende-banner--chico b { font-size: 1.05rem; }
.aprende-banner small { display: block; font-size: .78rem; opacity: .75; }
.aprende-banner > svg { width: 20px; height: 20px; animation: sube 1.6s var(--suave) infinite; }
@keyframes sube { 0%, 100% { transform: translateY(2px); opacity: .6; } 50% { transform: translateY(-3px); opacity: 1; } }
.aprende-banner__pila { position: relative; height: 54px; }
.aprende-banner--chico .aprende-banner__pila { height: 44px; }
.aprende-banner__pila i { position: absolute; inset: 0; border-radius: 10px; background: var(--papel); opacity: .25; transform: translateY(calc(var(--k) * -5px)) scale(calc(1 - var(--k) * .1)); }
.aprende-banner__pila i:nth-child(1) { --k: 2; opacity: .18; } .aprende-banner__pila i:nth-child(2) { --k: 1; opacity: .35; } .aprende-banner__pila i:nth-child(3) { --k: 0; opacity: 1; background: var(--marca); }
:root[data-feed-abierto] body { overflow: hidden; }
.feed { position: fixed; inset: 0; z-index: 90; background: #050505; color: #fff; animation: feedEntra .35s var(--ios); }
@keyframes feedEntra { from { transform: translateY(6%); opacity: 0; } }
.feed__cabeza { position: absolute; z-index: 2; inset: 0 0 auto; display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: max(12px, env(safe-area-inset-top)) 14px 10px; background: linear-gradient(rgb(0 0 0 / .65), transparent); }
.feed__cerrar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgb(255 255 255 / .14); color: #fff; }
.feed__cerrar svg { width: 20px; height: 20px; }
.feed__temas { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.feed__temas::-webkit-scrollbar { display: none; }
.feed__temas button { flex: none; padding: 7px 12px; border-radius: 999px; color: rgb(255 255 255 / .7); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.feed__temas button[aria-pressed="true"] { color: #fff; background: rgb(255 255 255 / .16); }
.feed__racha { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: rgb(255 255 255 / .14); font-weight: 700; font-size: .84rem; font-variant-numeric: tabular-nums; }
.feed__racha svg { width: 15px; height: 15px; color: #ffb347; }
.feed__pista { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.feed__pista::-webkit-scrollbar { display: none; }
.tarjeta { --f1: #000; --f2: #1b2a22; --ac: #6ad6a8; position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: 1fr 64px; align-items: end; padding: 84px 8px max(28px, env(safe-area-inset-bottom)) 22px; background: radial-gradient(120% 80% at 10% 0%, var(--f2), var(--f1)); overflow: hidden; }
.tarjeta--pregunta { --f2: #0b6b4b; --f1: #07261b; --ac: #b7f5d8; }
.tarjeta--caso { --f2: #3a2a5c; --f1: #120c1f; --ac: #c9b6ff; }
.tarjeta--tip { --f2: #5c4410; --f1: #1d1505; --ac: #ffd27a; }
.tarjeta--fuente { --f2: #23303f; --f1: #0a0f15; --ac: #9cc8ff; }
.tarjeta--novedad { --f2: #5a1d24; --f1: #1a0709; --ac: #ffa3ab; }
.tarjeta--paso { --f2: #14333a; --f1: #061316; --ac: #8fe3f0; }
.tarjeta__cuerpo { align-self: center; max-height: 100%; overflow-y: auto; scrollbar-width: none; padding-right: 6px; }
.tarjeta__etq { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / .1); color: var(--ac); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tarjeta__etq svg { width: 14px; height: 14px; }
.tarjeta__parati { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 6px 11px; border-radius: 999px; background: color-mix(in oklab, var(--ac) 16%, transparent); color: var(--ac); font-size: .72rem; font-weight: 700; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tarjeta__parati svg { width: 13px; height: 13px; flex: none; }
.tarjeta h3 { margin: 16px 0 14px; font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: clamp(1.7rem, 7.4vw, 2.6rem); line-height: 1.02; text-align: left; hyphens: manual; color: #fff; }
.tarjeta__sub { display: block; margin-top: 14px; color: var(--ac); font-weight: 700; font-size: .86rem; }
.tarjeta__texto { margin: 0 0 14px; font-size: clamp(1.05rem, 4.2vw, 1.22rem); line-height: 1.6; color: rgb(255 255 255 / .9); text-align: justify; hyphens: auto; }
.tarjeta__texto--grande { font-size: clamp(1.2rem, 5vw, 1.45rem); line-height: 1.5; text-align: left; hyphens: manual; }
.tarjeta__cita { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 8px 0; padding: 8px 12px; border-radius: 12px; background: rgb(255 255 255 / .1); color: #fff; font-size: .82rem; font-weight: 600; text-align: left; }
.tarjeta__cita svg { width: 14px; height: 14px; color: var(--ac); flex: none; }
.tarjeta__ops { display: grid; gap: 10px; }
.tarjeta .opcion { background: rgb(255 255 255 / .1); box-shadow: none; color: #fff; }
.tarjeta .opcion[data-estado="ok"] { background: #e7f3ed; color: #07583d; box-shadow: none; }
.tarjeta .opcion[data-estado="mal"] { background: #fdecee; color: #c81e2c; box-shadow: none; }
.tarjeta__revela { margin-top: 16px; animation: feedEntra .35s var(--ios); }
.tarjeta__titulo2 { margin: 0 0 8px; font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; color: var(--ac); }
.tarjeta__guion { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: rgb(255 255 255 / .1); font-size: 1.1rem; line-height: 1.5; }
.tarjeta__icono { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 16px; border-radius: 20px; background: rgb(255 255 255 / .1); color: var(--ac); }
.tarjeta__icono svg { width: 30px; height: 30px; }
.boton--claro { background: #fff; color: #0a0a0a; }
.tarjeta__lado { display: grid; gap: 18px; justify-items: center; padding-bottom: 10px; }
.tarjeta__lado button { display: grid; justify-items: center; gap: 4px; color: #fff; }
.tarjeta__lado svg { width: 28px; height: 28px; padding: 12px; box-sizing: content-box; border-radius: 999px; background: rgb(255 255 255 / .12); }
.tarjeta__lado small { font-size: .68rem; font-weight: 600; opacity: .8; }
.tarjeta__lado [aria-pressed="true"] svg { background: var(--ac); color: #0a0a0a; fill: currentColor; }
@media (min-width: 761px) { .tarjeta { padding-inline: max(22px, calc(50% - 300px)); } }
.tarjeta__titulo2, .tarjeta__guion, .tarjeta__sub { text-align: left; hyphens: manual; }
.multa__extras { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.multa__extras li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 10px 14px; border-radius: 14px; background: var(--fondo); font-size: .9rem; font-weight: 600; color: var(--ink-800); text-align: left; }
.multa__extras svg { width: 18px; height: 18px; color: var(--senal); margin-top: 1px; }
.multa__inf--largo { font-family: inherit; text-transform: none; font-size: 1.05rem; line-height: 1.5; font-weight: 600; text-align: justify; hyphens: auto; }

/* ——— Guías y recorridos en modo lectura: sin viñetas, letra grande, citas discretas ——— */
.guia__resumen { margin: 4px 0 22px; font-size: clamp(1.15rem, 4.6vw, 1.35rem); line-height: 1.6; color: var(--ink-950); text-align: justify; hyphens: auto; }
.titulo-l { margin: 30px 0 6px; font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: clamp(1.25rem, 5vw, 1.5rem); line-height: 1.1; color: var(--ink-950); text-align: left; }
.pasos-l { display: grid; }
.paso-l { padding: 16px 0; border-bottom: 1px solid var(--ink-100); }
.paso-l:last-child { border-bottom: 0; }
.paso-l p { margin: 0; font-size: clamp(1.08rem, 4.3vw, 1.25rem); line-height: 1.65; color: var(--ink-950); text-align: justify; hyphens: auto; }
.paso-l__citas { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.paso-l__citas .lectura__cita, .lectura--cita .lectura__cita { margin: 0; }
/* Costos de un trámite según su ficha oficial (licencia de conducir). */
.oficial__costos { display: grid; margin: 10px 0 0; border: 1px solid var(--ink-100); border-radius: 16px; overflow: hidden; }
.oficial__costos > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 16px; }
.oficial__costos > div + div { border-top: 1px solid var(--ink-100); }
.oficial__costos dt { min-width: 0; color: var(--ink-700, var(--ink-950)); line-height: 1.4; }
.oficial__costos dd { margin: 0; flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-950); }
.oficial__nota { margin: 8px 0 18px; font-size: .86rem; color: var(--ink-500); }
.vigente-al.oficial__fuente { flex-wrap: nowrap; margin: 0 0 8px; text-align: left; }
.oficial__fuente > span { min-width: 0; }
.lectura--cita { margin: 0; padding: 14px 0 18px; border-bottom: 1px solid var(--ink-100); max-width: none; }
.lectura--cita:last-of-type { border-bottom: 0; }
.lectura--cita p { margin-bottom: 8px; }
.lectura .lectura__frase + .lectura--cita, article.lectura + .lectura--cita { padding-top: 0; }

/* ——— Tránsito: tarjeta de ubicación y ventana para ubicarte ——— */
.lugar-actual { display: grid; grid-template-columns: 46px 1fr; gap: 6px 14px; align-items: center; width: 100%; margin: 0 0 18px; padding: 16px; border-radius: 24px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--sombra); text-align: left; }
.lugar-actual__texto b { display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; margin: 2px 0 3px; }
.lugar-actual__texto small { display: block; font-size: .82rem; color: var(--ink-500); line-height: 1.35; }
.lugar-actual__accion { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 11px 14px; border-radius: 999px; background: var(--ink-950); color: var(--papel); font-weight: 700; font-size: .9rem; }
.lugar-actual__accion svg { width: 18px; height: 18px; }
.ubicarme { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: center; width: 100%; padding: 18px; border-radius: 22px; background: var(--marca); color: var(--papel); text-align: left; }
.ubicarme svg { width: 26px; height: 26px; }
.ubicarme b { display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.4rem; line-height: 1; }
.ubicarme small { display: block; margin-top: 4px; font-size: .8rem; opacity: .85; }
.ubicarme__resultado { margin: 12px 2px 0; font-size: .95rem; color: var(--ink-700); text-align: left; }
/* Ubicación única: pastilla en la barra superior; abre la ventana para ubicarte o elegir lugar. */
.ubicacion-pill { display: inline-flex; align-items: center; gap: 6px; height: 44px; max-width: 132px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--ink-950); color: var(--papel); font-size: .84rem; font-weight: 700; flex: none; }
.ubicacion-pill svg { width: 17px; height: 17px; flex: none; color: var(--marca-100); }
.ubicacion-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .ubicacion-pill { max-width: 104px; padding-inline: 10px; } }

/* Reels: el contenido nunca se corta arriba (centrado con margen automático, que es «seguro») y ocupa más pantalla. */
.tarjeta { grid-template-columns: 1fr 58px; padding: 76px 6px max(24px, env(safe-area-inset-bottom)) 18px; }
.tarjeta__cuerpo { align-self: stretch; display: flex; flex-direction: column; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 6px 6px 12px 0; }
.tarjeta__dentro { margin-block: auto; }
.tarjeta h3 { font-size: clamp(1.9rem, 8.6vw, 2.9rem); line-height: 1; }
.tarjeta--pregunta h3 { font-size: clamp(2.1rem, 9.6vw, 3.2rem); margin-bottom: 20px; }
.tarjeta .opcion { padding: 18px 18px; font-size: clamp(1.05rem, 4.4vw, 1.25rem); line-height: 1.3; border-radius: 20px; }
.tarjeta__ops { gap: 12px; }
.tarjeta__texto { font-size: clamp(1.12rem, 4.6vw, 1.35rem); }
.tarjeta__lado { gap: 14px; }
.tarjeta__lado svg { width: 24px; height: 24px; padding: 11px; }

/* Navegación: sin fila de secciones bajo la barra (la isla inferior ya las tiene); «Inicio» es el logo. */
.pestanas { display: none; }
:root { --alto-barra: 84px; }
@media (min-width: 961px) { :root { --alto-barra: 86px; } }
.isla button { display: grid; justify-items: center; gap: 2px; min-width: 58px; padding: 7px 6px 6px; border-radius: 999px; font-size: .625rem; font-weight: 600; color: var(--ink-600); }
.isla button svg { width: 20px; height: 20px; }
.preguntar__acciones { justify-content: flex-end; }
.preguntar__acciones .boton { min-width: 150px; }
/* Paneles de Aprende con ícono de aprendizaje */
.aprende-banner__icono { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: color-mix(in oklab, var(--papel) 16%, transparent); }
.aprende-banner--chico .aprende-banner__icono { width: 44px; height: 44px; border-radius: 14px; }
.aprende-banner__icono svg { width: 26px; height: 26px; }
.aprende-banner--chico .aprende-banner__icono svg { width: 22px; height: 22px; }
.cuenta__nota { margin: 4px 0 0; font-size: .8rem; color: var(--ink-600); text-align: left; }
/* Inicio: nada se sale del panel en pantallas angostas. */
.portada { min-width: 0; overflow: hidden; }
.portada .pastilla { max-width: 100%; white-space: normal; line-height: 1.3; }
.portada .cifras { grid-template-columns: repeat(4, minmax(0, auto)); gap: 12px; }
.portada .cifra b { font-size: clamp(1.3rem, 6vw, 2rem); }
.flujos { margin-inline: 0; }

/* ═══ Fase 1 · Inicio = reels, isla nueva, Pregúntame, 911, perfil ═══ */
/* Inicio: el feed ocupa toda la pantalla, bajo la barra de vidrio. */
#reels.pagina { padding: 0; overflow: hidden; }
#reels > .envoltura { width: 100%; height: 100%; }
.feed--inicio { position: relative; inset: auto; z-index: auto; height: 100dvh; animation: none; }
.feed--inicio .feed__cabeza { top: calc(var(--alto-barra) - 6px); grid-template-columns: 1fr auto; padding: 4px 12px 8px; background: none; }
.feed--inicio .tarjeta { padding-top: calc(var(--alto-barra) + 58px); padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
.tarjeta[style*="--seccion"] { background: radial-gradient(120% 80% at 10% 0%, color-mix(in oklab, var(--seccion) 55%, #000), #000 70%); --ac: color-mix(in oklab, var(--seccion) 45%, #fff); }

/* Libritos: elegir sección como lomos de libro de colores, sutiles y en una fila. */
.libritos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: flex-end; padding: 6px 2px 2px; mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.libritos::-webkit-scrollbar { display: none; }
.librito { --c: var(--marca); flex: none; position: relative; height: 34px; padding: 0 12px 0 16px; border-radius: 4px 10px 10px 4px; background: color-mix(in oklab, var(--c) 28%, rgb(20 20 20 / .55)); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .01em; box-shadow: inset 5px 0 0 var(--c), 0 4px 10px -6px rgb(0 0 0 / .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: height .25s var(--ios), background-color .25s; white-space: nowrap; }
.librito::after { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 1px; background: rgb(255 255 255 / .35); }
.librito[aria-selected="true"] { height: 42px; background: var(--c); box-shadow: inset 5px 0 0 rgb(0 0 0 / .18), 0 8px 16px -8px var(--c); }
.libritos--perfil { mask-image: none; flex-wrap: wrap; }
.libritos--perfil .librito { height: 38px; background: var(--c); }

/* Reel: «Ver más», Pregúntame arriba de Guardar/Compartir, aviso breve y guía para deslizar. */
.tarjeta__texto--recorte { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__texto--abierto { display: block; -webkit-line-clamp: unset; }
.tarjeta__mas { margin: -6px 0 12px; padding: 4px 0; color: var(--ac); font-weight: 700; font-size: .92rem; }
.tarjeta__dentro[data-detalle] { cursor: pointer; }
.tarjeta__preguntame svg { background: var(--marca) !important; color: #fff; }
.tarjeta__preguntame { position: relative; }
.burbuja-aviso { position: absolute; right: calc(100% + 8px); top: 8px; white-space: nowrap; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #fff; color: #0a0a0a; font-size: .82rem; font-weight: 700; box-shadow: 0 8px 20px -8px rgb(0 0 0 / .6); animation: aparece .35s var(--ios), seVa .4s ease 3.4s forwards; }
@keyframes aparece { from { opacity: 0; transform: translateX(8px); } }
@keyframes seVa { to { opacity: 0; transform: translateX(8px); } }
.tarjeta__ops--vf { grid-template-columns: 1fr 1fr; }
.feed__guia { position: absolute; z-index: 3; left: 50%; bottom: calc(118px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 10px 16px; border-radius: 18px; background: rgb(0 0 0 / .45); color: #fff; font-size: .82rem; font-weight: 700; pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.feed__guia svg { width: 26px; height: 26px; animation: sube 1.4s var(--suave) infinite; }
:root[data-movimiento="reducido"] .feed__guia svg, :root[data-movimiento="reducido"] .burbuja-aviso { animation: none; }

/* Isla: 911 (rojo) · Leyes · Pregúntame (principal) · Vial · Derechos */
.isla { gap: 0; padding: 6px 8px; }
.isla .isla__911 { min-width: 50px; padding: 4px 4px; }
.isla__911 span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: #d62828; color: #fff; font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .02em; box-shadow: 0 6px 14px -6px #d62828; }
.isla button.isla__centro { display: grid; justify-items: center; gap: 1px; min-width: 76px; padding: 0 4px 4px; margin-top: -18px; }
.isla button.isla__centro span { width: 56px; height: 56px; border: 4px solid var(--papel); box-shadow: 0 10px 22px -8px color-mix(in oklab, var(--marca) 85%, black); }
.isla button.isla__centro small { font-size: .62rem; font-weight: 700; color: var(--ink-800); }
.isla button.isla__centro svg { width: 26px !important; height: 26px !important; }
.icono-gorra { width: 20px; height: 20px; }

/* Ventana 911 y líneas */
.lineas { display: grid; gap: 8px; }
.linea { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); text-align: left; }
.linea b { display: block; font-size: 1rem; }
.linea small { display: block; color: var(--ink-500); font-size: .8rem; line-height: 1.35; }
.linea__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--marca-50); color: var(--marca); }
.linea__icono svg { width: 20px; height: 20px; }
.linea__num { font-family: var(--display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.linea--911 { background: #d62828; color: #fff; box-shadow: none; }
.linea--911 small { color: rgb(255 255 255 / .85); }
.linea--911 .linea__icono { background: rgb(255 255 255 / .18); color: #fff; }
.linea--911 .linea__num { font-size: 1.6rem; }
.ayuda-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 -22px; padding: 4px 22px 6px; scrollbar-width: none; scroll-padding-inline: 22px; }
.ayuda-chips::-webkit-scrollbar, .ayuda-carrusel::-webkit-scrollbar { display: none; }
.ayuda-chips .chip { flex: none; }
.ayuda-chips .chip[aria-selected="true"] { background: var(--ink-950); border-color: var(--ink-950); color: var(--papel); }
.ayuda-carrusel { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; margin: 8px -22px 0; padding: 4px 22px 8px; scroll-snap-type: x mandatory; scroll-padding-inline: 22px; overscroll-behavior-x: contain; scrollbar-width: none; }
.ayuda-carrusel:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: 22px; }
.ayuda-sec__mas summary { display: inline-flex; align-items: center; gap: 4px; margin: 10px auto 8px; padding: 8px 14px; border-radius: 999px; color: var(--ink-500); font-weight: 600; font-size: .9rem; cursor: pointer; list-style: none; }
.ayuda-sec__mas summary::-webkit-details-marker { display: none; }
.ayuda-sec__mas summary svg { width: 16px; height: 16px; transition: transform .2s var(--ios); }
.ayuda-sec__mas[open] summary svg { transform: rotate(180deg); }
.ayuda-sec__sub { margin: 0 0 4px; font-family: var(--rotulo); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); text-align: left; }
/* Ayuda ahora: primero lo urgente (911, qué hacer, atajos por situación); debajo, el directorio por temas. */
.hoja__cuerpo:has(.ayuda) { overflow-x: hidden; }
.ayuda { display: grid; gap: 14px; min-width: 0; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.ayuda :is(a, button, summary):focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.ayuda-grupos, .ayuda-grupo { display: grid; min-width: 0; }
/* El 911 es un círculo que late: la sirena se balancea y las ondas salen del borde. Sin animación queda quieto y sin ondas. */
/* En Ayuda, también en la portada del 911, se sale deslizando hacia abajo, tocando afuera, con Esc o con «atrás»: la X no se
   ve, para que los tres paneles y las sugerencias suban. Sigue ahí para el lector de pantalla y el teclado. */
.hoja:has(.ayuda) [data-hoja-cerrar] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.hoja:has(.ayuda) .hoja__asa { width: 56px; height: 6px; }
/* Portada de Ayuda: el fondo rojo y negro de los reels, en dos pantallas que encajan al deslizar. Oscura en los dos temas. */
.hoja:has(.ayuda-inicio) { --hueco: calc(84px + env(safe-area-inset-top)); --d: min(calc((100dvh - var(--hueco) - 232px - env(safe-area-inset-bottom)) / 3), 62vw, 210px); height: calc(100dvh - var(--hueco)); max-height: calc(100dvh - var(--hueco)); background: radial-gradient(70% 26% at 50% 28%, rgb(79 220 134 / .2), transparent), radial-gradient(70% 26% at 50% 56%, rgb(255 210 63 / .18), transparent), radial-gradient(70% 26% at 50% 84%, rgb(238 59 59 / .2), transparent), color-mix(in oklab, var(--papel) 84%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.hoja:has(.ayuda-inicio) .hoja__cabeza { height: auto; min-height: 0; padding: 0 14px; position: relative; z-index: 3; }
.hoja:has(.ayuda-inicio) .hoja__cabeza h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hoja__cuerpo:has(.ayuda-inicio) { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
.ayuda.ayuda-inicio { display: block; height: 100%; padding: 0; }
.ayuda-portada { display: flex; flex-direction: column; align-items: center; gap: 16px; height: 100%; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); touch-action: none; }
.ayuda-portada .ayuda-pregunta { position: relative; flex: none; width: min(100%, 460px); height: 52px; box-shadow: 0 14px 26px -8px color-mix(in oklab, var(--ink-950) 42%, transparent); }
/* En modo oscuro la burbuja se invierte: blanca con líneas negras y luz blanca abajo. */
:root[data-tema="oscuro"] .ayuda-pregunta .orbe { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .ayuda-pregunta .orbe { filter: invert(1); } }
.ayuda-pregunta .orbe__frase { font-family: var(--rotulo); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
.ayuda-semaforo { display: grid; gap: 20px; flex: none; margin: auto; }
.ayuda-luz { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--d) * .03); width: var(--d); height: var(--d); border-radius: 50%; background: radial-gradient(ellipse 58% 34% at 50% 15%, rgb(255 255 255 / .58), transparent 72%), linear-gradient(to bottom, var(--luz), var(--luz-baja)); color: var(--tinta); box-shadow: inset 0 3px 3px rgb(255 255 255 / .42), inset 0 -14px 22px rgb(0 0 0 / .24), 0 10px 0 var(--luz-base), 0 22px 24px -8px rgb(0 0 0 / .42), 0 0 44px -6px var(--luz); -webkit-tap-highlight-color: transparent; transition: transform .12s var(--ios), box-shadow .12s var(--ios); }
.ayuda-semaforo .ayuda-luz { touch-action: none; }
.ayuda-luz svg { width: calc(var(--d) * .3); height: calc(var(--d) * .3); stroke-width: 2.1; transform-origin: 50% 85%; animation: ayuda-sirena .9s ease-in-out infinite alternate; }
.ayuda-luz b { font-family: var(--rotulo); font-weight: 800; font-size: calc(var(--d) * .125); line-height: 1.1; }
.ayuda-luz:active { transform: translateY(8px); box-shadow: inset 0 3px 3px rgb(255 255 255 / .3), inset 0 -8px 16px rgb(0 0 0 / .3), 0 2px 0 var(--luz-base), 0 8px 12px -4px rgb(0 0 0 / .6), 0 0 30px -8px var(--luz); }
.ayuda .ayuda-luz:focus-visible { outline: 3px solid var(--ink-950); outline-offset: 3px; }
.ayuda-luz--amarillo { --luz: #ffd23f; --luz-baja: #eda90c; --luz-base: #a86f00; --onda: rgb(255 214 90 / .85); --tinta: #2b1d00; }
.ayuda-luz--verde { --luz: #4fdc86; --luz-baja: #1fa458; --luz-base: #0f6e38; --onda: rgb(110 240 160 / .85); --tinta: #04240f; }
.ayuda-911 { --luz: #ee3b3b; --luz-baja: #bd1a1f; --luz-base: #7d0d12; --onda: rgb(255 120 120 / .85); --tinta: #fff; }
.ayuda-911 b { font-size: calc(var(--d) * .3); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.ayuda-luz::before, .ayuda-luz::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--onda); opacity: 0; pointer-events: none; animation: ayuda-onda 2s ease-out infinite; }
.ayuda-luz::after { animation-delay: 1s; }
:root[data-movimiento="reducido"] .ayuda-luz::after { animation: none; }
@keyframes ayuda-sirena { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes ayuda-onda { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.13); } }
.ayuda-tema summary::-webkit-details-marker { display: none; }
.ayuda-sec__sub:is(.ayuda *) { margin: 0; }
.ayuda-cartas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ayuda-cartas--lista { grid-template-columns: minmax(0, 1fr); }
.ayuda-carta { display: grid; justify-items: start; align-content: start; gap: 4px; min-width: 0; padding: 12px; border-radius: 18px; background: color-mix(in oklab, var(--tema) 11%, var(--fondo)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--tema) 48%, transparent), 0 4px 0 color-mix(in oklab, var(--tema) 48%, transparent); text-align: left; -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ios); }
.ayuda-carta:active { transform: translateY(3px); }
.ayuda-carta > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 50%; background: linear-gradient(to bottom, color-mix(in oklab, var(--tema) 80%, #fff), var(--tema)); color: #fff; box-shadow: inset 0 2px 1px rgb(255 255 255 / .35), 0 3px 0 color-mix(in oklab, var(--tema) 66%, #000); }
.ayuda-carta svg { width: 21px; height: 21px; }
.ayuda-carta b { color: var(--tema-texto); font-family: var(--rotulo); font-weight: 800; line-height: 1.2; }
.ayuda-carta small { color: var(--ink-500); font-size: .82em; line-height: 1.35; }
.ayuda-tips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ayuda-tips li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: color-mix(in oklab, #f7c325 13%, var(--fondo)); font-size: .92em; line-height: 1.4; }
.ayuda-tips svg { width: 20px; height: 20px; color: #c98a00; }
.ayuda-guia { display: grid; justify-items: center; gap: 14px; min-height: 280px; text-align: center; }
.ayuda-guia .boton { width: min(100%, 300px); }
.ayuda-guia .ayuda-cartas { width: 100%; }
.ayuda-guia__intro { margin: 0; color: var(--ink-700); }
.ayuda-guia__titulo { margin: 0; font-family: var(--rotulo); font-size: 1.15rem; font-weight: 800; }
.ayuda-guia__texto { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
.ayuda-guia__cuenta { margin: 0; color: var(--ink-500); font-family: var(--rotulo); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.ayuda-guia__aviso { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); }
.ayuda-guia__aviso p { margin: 0; color: var(--ink-700); font-size: .88em; line-height: 1.4; }
.ayuda-respira { display: grid; place-items: center; width: 150px; height: 150px; margin: 34px 0; border-radius: 50%; background: radial-gradient(ellipse 58% 34% at 50% 15%, rgb(255 255 255 / .5), transparent 72%), linear-gradient(to bottom, #3bc9db, #0c8599); color: #fff; font-family: var(--rotulo); font-size: 1.2rem; font-weight: 800; box-shadow: 0 0 44px -6px #15aabf; transition: transform 2s ease-in-out; }
.ayuda-respira[data-fase="inhala"] { transform: scale(1.35); transition-duration: 4s; }
.ayuda-respira[data-fase="sosten"] { transform: scale(1.35); }
.ayuda-respira[data-fase="exhala"] { transform: scale(.85); transition-duration: 6s; }
:root[data-movimiento="reducido"] .ayuda-respira { transform: none; transition: none; }
.ayuda-atajos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ayuda-atajo { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 8px; align-content: space-between; min-height: 76px; padding: 10px; border-radius: 18px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ios), box-shadow .2s; }
.ayuda-atajo:active { transform: scale(.97); }
.ayuda-atajo svg { width: 20px; height: 20px; color: var(--marca); }
.ayuda-atajo span { font-weight: 700; font-size: .86em; line-height: 1.2; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.ayuda-atajo b { grid-column: 1 / -1; font-family: var(--rotulo); font-weight: 800; font-size: clamp(.8rem, 4.3vw, 1.02rem); color: var(--marca); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ayuda-atajo small { margin-left: 6px; font-family: var(--sans); font-size: .72em; font-weight: 600; color: var(--ink-500); }
/* La vista Directorio: buscador y lugar fijos arriba, los temas se deslizan debajo. */
.ayuda-fija { position: sticky; top: -6px; z-index: 3; display: flex; align-items: center; gap: 6px; margin: -6px -22px 10px; padding: 6px 22px 10px; background: var(--papel); }
.ayuda-fija .ayuda-buscador { flex: 1; min-width: 0; }
.ayuda-lugar { display: inline-flex; align-items: center; gap: 5px; flex: 0 1 auto; max-width: 42%; min-width: 0; min-height: 44px; padding: 6px 10px; border-radius: 999px; color: var(--ink-700); font-size: .86em; font-weight: 700; }
.ayuda-lugar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ayuda-lugar svg { flex: none; width: 16px; height: 16px; color: var(--marca); }
.ayuda-lugar svg:last-child { color: var(--ink-500); }
.ayuda-buscador { margin: 0; }
.ayuda-grupos { gap: 18px; }
.ayuda-grupos[hidden] { display: none; }
.ayuda-grupo { gap: 8px; }
.ayuda-grupo__temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; gap: 12px; min-width: 0; }
.ayuda-tema { min-width: 0; border-radius: 20px; background: color-mix(in oklab, var(--tema) 11%, var(--fondo)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--tema) 48%, transparent), 0 4px 0 color-mix(in oklab, var(--tema) 48%, transparent); overflow: clip; }
.ayuda-tema summary { display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 12px; align-items: center; min-height: 68px; padding: 10px 14px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.ayuda-tema summary:focus-visible { outline-offset: -3px; border-radius: 22px; }
.ayuda-tema summary > svg { width: 18px; height: 18px; color: var(--tema-texto); transition: transform .2s var(--ios); }
.ayuda-tema[open] summary > svg { transform: rotate(180deg); }
.ayuda-tema__nombre b { display: block; font-family: var(--rotulo); font-size: 1em; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.ayuda-tema__nombre small { display: block; color: var(--tema-texto); font-size: .78em; font-weight: 700; }
.ayuda-tema, .ayuda-linea, .ayuda-carta { --tema-texto: color-mix(in oklab, var(--tema) 62%, var(--ink-950)); }
.ayuda-tema .linea__icono { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(to bottom, color-mix(in oklab, var(--tema) 80%, #fff), var(--tema)); color: #fff; box-shadow: inset 0 2px 1px rgb(255 255 255 / .35), 0 3px 0 color-mix(in oklab, var(--tema) 66%, #000); }
.ayuda-tema .linea__icono svg { width: 23px; height: 23px; }
.ayuda-tema__lineas { display: grid; gap: 8px; margin: 0; padding: 0 12px 12px; list-style: none; }
.ayuda-linea { display: grid; gap: 10px; min-width: 0; padding: 12px 12px 14px 16px; border-radius: 16px; background: var(--papel); box-shadow: inset 5px 0 0 var(--tema), inset 0 0 0 1px color-mix(in oklab, var(--tema) 30%, transparent); }
.ayuda-linea__txt { min-width: 0; }
.ayuda-linea__txt b { display: block; color: var(--tema-texto); text-align: left; font-family: var(--rotulo); font-size: 1em; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.ayuda-linea__txt p { margin: 3px 0 0; font-size: .88em; line-height: 1.45; color: var(--ink-500); }
.ayuda-linea__sec { display: block; margin-bottom: 2px; font-family: var(--rotulo); font-size: .68em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tema-texto); }
.ayuda-linea__acciones { display: flex; gap: 8px; min-width: 0; }
.ayuda-linea__acciones .linea-boton { flex: 1; min-width: 0; }
.ayuda-copiar { display: none; }
.ayuda-resultados { margin: 2px 0 0; }
.ayuda-resultados .ayuda-tema__lineas { margin-top: 8px; padding: 0; }
.ayuda-resultados__nada { margin: 8px 0; color: var(--ink-500); text-align: center; }
.linea-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-height: 48px; padding: 8px 20px; border-radius: 999px; background: var(--marca); color: var(--papel); -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ios); }
.linea-boton:active { transform: scale(.96); }
.linea-boton svg { width: 18px; height: 18px; flex: none; }
.linea-boton b { font-family: var(--rotulo); font-size: 1.2em; font-weight: 800; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.linea-boton small { font-size: .74em; font-weight: 600; opacity: .85; white-space: nowrap; }
.linea-boton--web { background: var(--marca-50); color: var(--marca); }
.linea-boton--web b { font-size: 1em; }
.linea-boton--911 { background: #d62828; color: #fff; }
.ayuda-linea .linea-boton { min-height: 56px; padding: 8px 14px; background: linear-gradient(to bottom, color-mix(in oklab, var(--tema) 84%, #fff), var(--tema)); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 4px 0 color-mix(in oklab, var(--tema) 66%, #000); }
.ayuda-linea .linea-boton b { font-size: clamp(1.1rem, 6vw, 1.45rem); }
.ayuda-linea .linea-boton:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 1px 0 color-mix(in oklab, var(--tema) 66%, #000); }
.ayuda-linea .linea-boton--web { background: none; color: var(--tema-texto); box-shadow: inset 0 0 0 2px var(--tema); }
.ayuda-linea .linea-boton--web b { font-size: 1.02em; }
/* Con ratón no hay marcador: el número también se puede copiar para llamar desde el teléfono. */
@media (hover: hover) and (pointer: fine) {
  .ayuda-copiar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 999px; color: var(--ink-700); box-shadow: inset 0 0 0 1px var(--ink-150); transition: background-color .2s; }
  .ayuda-copiar:hover { background: var(--ink-100); }
  .ayuda-copiar svg { width: 18px; height: 18px; }
  .ayuda-atajo:hover { box-shadow: inset 0 0 0 1px var(--marca); }
  .ayuda-tema summary:hover { background: var(--ink-50); }
}
/* App móvil: el 911 siempre a un toque, toques sin demora ni menú de enlace, y pantallas chicas o en horizontal. */
.ayuda-flotante { position: sticky; z-index: 2; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; margin: -52px 0 0 auto; border-radius: 50%; background: #d62828; color: #fff; box-shadow: 0 10px 24px -8px rgb(214 40 40 / .75), 0 2px 8px rgb(0 0 0 / .3); -webkit-tap-highlight-color: transparent; animation: ayuda-flotante .22s var(--ios); }
.ayuda-flotante[hidden] { display: none; }
.ayuda-flotante svg { width: 15px; height: 15px; }
.ayuda-flotante b { font-family: var(--rotulo); font-size: .78rem; font-weight: 800; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.ayuda-flotante:active { transform: scale(.96); background: #b81f1f; }
@keyframes ayuda-flotante { from { opacity: 0; transform: translateY(10px); } }
.ayuda :is(a, button, summary), .ayuda-flotante, .ayuda-lugar { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ayuda-tema summary:active { background: var(--ink-100); }
.ayuda:has(+ .ayuda-flotante) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
@media (pointer: coarse) {
  .hoja__cabeza .icono-redondo { width: 44px; height: 44px; }
  .hoja__cuerpo { scrollbar-width: none; }
  .hoja__cuerpo::-webkit-scrollbar { display: none; }
}
/* En teléfonos angostos el rótulo necesita todo el ancho: «desaparecida» no se parte. */
@media (max-width: 360px) {
  .ayuda-atajo { grid-template-columns: minmax(0, 1fr); min-height: 72px; }
  .ayuda-atajo svg { display: none; }
}
@media (max-height: 700px) {
  .ayuda-atajo { min-height: 76px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .hoja:has(.ayuda-inicio) { --hueco: calc(40px + env(safe-area-inset-top)); --d: min(calc(100dvh - var(--hueco) - 122px - env(safe-area-inset-bottom)), calc((100vw - 84px) / 3), 190px); background: radial-gradient(32% 70% at 20% 62%, rgb(79 220 134 / .2), transparent), radial-gradient(32% 70% at 50% 62%, rgb(255 210 63 / .18), transparent), radial-gradient(32% 70% at 80% 62%, rgb(238 59 59 / .2), transparent), color-mix(in oklab, var(--papel) 84%, transparent); }
  .ayuda-portada { gap: 10px; padding-top: 2px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .ayuda-portada .ayuda-pregunta { width: 420px; }
  .ayuda-semaforo { grid-auto-flow: column; }
  .ayuda-atajos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ayuda-atajo { grid-template-columns: minmax(0, 1fr); min-height: 68px; }
  .ayuda-atajo svg { display: none; }
  .ayuda-atajo b { font-size: .84rem; }
}
@media (min-width: 760px) {
  .ayuda-atajos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Pregúntame */
.preguntame__tema { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: var(--marca-50); color: var(--marca-fuerte); font-size: .84rem; font-weight: 700; }
.preguntame__tema svg { width: 15px; height: 15px; }
.preguntame__etq { display: block; margin-bottom: 8px; font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; }
.preguntame__caja { width: 100%; min-height: 120px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--ink-150); background: var(--fondo); color: var(--ink-950); font: inherit; font-size: 1.1rem; line-height: 1.5; resize: vertical; }
.preguntame__caja:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
.preguntame__guia { margin: 14px 0 6px; padding: 16px; border-radius: 20px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); }
.preguntame__guia h3 { margin: 4px 0 6px; font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; }
.preguntame__guia p { margin: 0 0 12px; font-size: 1rem; line-height: 1.55; text-align: left; }

/* Perfil y tema */
.perfil { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.perfil__avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--marca); color: #fff; font-family: var(--display); font-size: 1.6rem; font-weight: 700; }
.perfil__avatar svg { width: 26px; height: 26px; }
.perfil__nombre { width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--ink-150); background: transparent; color: var(--ink-950); font: inherit; font-size: 1.15rem; font-weight: 700; }
.perfil__nombre:focus { outline: none; border-bottom-color: var(--marca); }
.perfil__datos small { display: block; margin-top: 4px; color: var(--ink-500); font-size: .78rem; }
.perfil__cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.perfil__cifras div { padding: 12px 8px; border-radius: 16px; background: var(--fondo); text-align: center; }
.perfil__cifras b { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.perfil__cifras span { display: block; margin-top: 4px; font-size: .68rem; color: var(--ink-500); line-height: 1.2; }
.interruptor--tema { width: 64px; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; background: #f2c94c; }
.interruptor--tema svg { position: relative; z-index: 1; width: 15px; height: 15px; color: #fff; }
.interruptor--tema::after { width: 28px; height: 28px; }
.interruptor--tema[aria-checked="true"] { background: #2d3a66; }
.interruptor--tema[aria-checked="true"]::after { transform: translateX(30px); }
/* Cuenta de la suite (opcional) */
.cuenta { padding: 14px; border-radius: 18px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); }
.cuenta .boton--ancho { width: 100%; justify-content: center; }
.entrada { display: grid; gap: 10px; }
.entrada .intro { margin: 0 0 4px; }
.entrada__boton { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--ink-150); border-radius: 14px; background: var(--papel); color: var(--ink-950); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.entrada__boton svg { width: 22px; height: 22px; flex: none; }
.entrada__boton span { flex: 1; min-width: 0; }
.entrada__boton small { font-size: .74rem; font-weight: 600; color: var(--ink-500); }
.entrada__boton:disabled { cursor: default; opacity: .62; }
.entrada__forma { display: flex; align-items: center; gap: 8px; }
.entrada__forma input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--ink-150); background: var(--papel); color: var(--ink-950); font: inherit; font-size: 1rem; }
.entrada__lada { font-weight: 700; color: var(--ink-700); }
.entrada__salida { justify-self: center; margin-top: 4px; font-size: .88rem; color: var(--ink-600); }
.cuenta__correo { display: flex; gap: 8px; margin-top: 10px; }
.cuenta__correo input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--ink-150); background: var(--papel); color: var(--ink-950); font: inherit; }
.cuenta__nota { display: block; margin-top: 10px; color: var(--ink-500); font-size: .76rem; line-height: 1.4; }
.cuenta--dentro { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; }
.cuenta--dentro svg { width: 22px; height: 22px; color: var(--marca); }
.cuenta--dentro small { display: block; color: var(--ink-500); font-size: .76rem; }

/* ═══ 1.10 · Reels a pantalla completa, Litigar, balanza dorada, multa como carta ═══ */
:root { --oro: #e9c46a; --oro-fuerte: #f5d78e; --oro-sombra: rgb(233 196 106 / .55); }
/* En los reels la barra se oculta: queda la tuerca discreta y, en su lugar, las secciones. */
:root[data-vista="reels"] .barra { transform: translateY(-120%); pointer-events: none; }
.feed--inicio .feed__cabeza { top: 0; padding: max(10px, env(safe-area-inset-top)) 10px 8px 12px; grid-template-columns: 1fr auto auto; gap: 8px; background: linear-gradient(rgb(0 0 0 / .55), transparent); }
.feed--inicio .tarjeta { padding-top: calc(max(10px, env(safe-area-inset-top)) + 66px); }
.feed__ajustes { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgb(255 255 255 / .1); color: rgb(255 255 255 / .85); }
.feed__ajustes svg { width: 18px; height: 18px; }
.feed__racha { padding: 6px 9px; font-size: .8rem; }

/* Libritos premium: lomo de piel con filete dorado; el elegido se levanta. */
.librito { height: 38px; padding: 0 14px 0 18px; border-radius: 3px 8px 8px 3px; background: linear-gradient(90deg, color-mix(in oklab, var(--c) 55%, #111) 0 6px, color-mix(in oklab, var(--c) 22%, rgb(18 18 18 / .82)) 6px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 6px 14px -10px #000; font-family: var(--display); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .82); }
.librito::after { left: 10px; top: 7px; bottom: 7px; width: 1px; background: linear-gradient(var(--oro), transparent 30%, transparent 70%, var(--oro)); opacity: .55; }
.librito::before { content: ""; position: absolute; left: 18px; right: 14px; bottom: 6px; height: 1px; background: var(--oro); opacity: 0; transition: opacity .25s; }
.librito[aria-selected="true"] { height: 46px; color: #fff; background: linear-gradient(160deg, color-mix(in oklab, var(--c) 92%, #fff 8%), color-mix(in oklab, var(--c) 70%, #000)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 10px 22px -12px var(--c); }
.librito[aria-selected="true"]::before { opacity: .9; }
.librito span { position: relative; top: -1px; }

/* Botón central: negro, sin contorno, balanza dorada con brillo. Lleva a los reels. */
.isla a.isla__centro, .isla .isla__centro { display: grid; place-items: center; min-width: 74px; padding: 0 4px; margin-top: -20px; background: transparent !important; }
.isla .isla__centro span { width: 58px; height: 58px; border: 0 !important; background: radial-gradient(circle at 50% 35%, #1d1d1d, #050505 70%); color: var(--oro); box-shadow: 0 12px 26px -10px #000, 0 0 0 1px rgb(233 196 106 / .25), 0 0 22px -6px var(--oro-sombra); }
.isla .isla__centro svg { width: 28px !important; height: 28px !important; color: var(--oro); filter: drop-shadow(0 0 6px var(--oro-sombra)) drop-shadow(0 0 2px var(--oro-fuerte)); }
.isla a.isla__centro[aria-current="true"] span { box-shadow: 0 12px 26px -10px #000, 0 0 0 1.5px var(--oro), 0 0 28px -4px var(--oro-sombra); }
:root[data-movimiento="reducido"] .isla__centro svg { filter: none; }

/* Botón Litigar del reel: librito que se abre y se cierra. */
.tarjeta__libro { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 999px; background: radial-gradient(circle at 50% 35%, #222, #050505 72%); box-shadow: 0 0 0 1px rgb(233 196 106 / .3), 0 0 16px -6px var(--oro-sombra); }
.tarjeta__preguntame svg.libro-anim { width: 26px !important; height: 26px !important; padding: 0 !important; background: none !important; color: var(--oro); overflow: visible; }
.libro-anim path { transform-box: fill-box; }
.libro-anim__izq { transform-origin: right center; animation: hojaIzq 3.2s var(--ios) infinite; }
.libro-anim__der { transform-origin: left center; animation: hojaDer 3.2s var(--ios) infinite; }
@keyframes hojaIzq { 0%, 40%, 100% { transform: scaleX(1); } 55%, 75% { transform: scaleX(.12); } }
@keyframes hojaDer { 0%, 40%, 100% { transform: scaleX(1); } 55%, 75% { transform: scaleX(.12); } }
:root[data-movimiento="reducido"] .libro-anim path { animation: none; }
.tarjeta__preguntame small { color: var(--oro); }

/* Litigar: chat discreto sobre los reels (se ven detrás). */
.litigar:empty { display: none; }
.litigar { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; padding: 0 10px calc(96px + env(safe-area-inset-bottom)); background: linear-gradient(transparent 30%, rgb(0 0 0 / .45)); }
.litigar__panel { width: min(560px, 100%); max-height: min(70dvh, 620px); display: flex; flex-direction: column; border-radius: 26px; background: rgb(14 14 14 / .78); color: #fff; -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 24px 60px -20px #000, inset 0 0 0 1px rgb(255 255 255 / .08); animation: aparece .3s var(--ios); }
.litigar__cabeza { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 16px; }
.litigar__marca { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .86rem; color: var(--oro); }
.litigar__marca svg { width: 18px; height: 18px; filter: drop-shadow(0 0 4px var(--oro-sombra)); }
.litigar__cerrar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: rgb(255 255 255 / .1); color: #fff; }
.litigar__cerrar svg { width: 16px; height: 16px; }
.litigar__hilo { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 14px 10px; display: grid; gap: 10px; align-content: start; overscroll-behavior: contain; }
.litigar__msj { max-width: 92%; padding: 11px 14px; border-radius: 18px; font-size: .98rem; line-height: 1.5; text-align: left; hyphens: manual; }
.litigar__msj p { margin: 0 0 8px; }
.litigar__msj--app { background: rgb(255 255 255 / .08); border-bottom-left-radius: 6px; justify-self: start; }
.litigar__msj--yo { background: var(--oro); color: #111; border-bottom-right-radius: 6px; justify-self: end; font-weight: 600; }
.litigar__ops { display: grid; gap: 6px; margin-top: 10px; }
.litigar__ops button { padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .1); color: #fff; text-align: left; font-weight: 600; }
.litigar__ops button[data-elegido] { background: var(--oro); color: #111; }
.litigar__accion { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; width: 100%; margin: 6px 0 0; padding: 11px 12px; border-radius: 14px; background: rgb(255 255 255 / .08); color: #fff; text-align: left; }
.litigar__accion svg { width: 20px; height: 20px; color: var(--oro); }
.litigar__accion b { display: block; font-size: .92rem; }
.litigar__accion small { display: block; font-size: .76rem; opacity: .75; }
.litigar__accion--marca { background: linear-gradient(135deg, rgb(233 196 106 / .22), rgb(233 196 106 / .08)); box-shadow: inset 0 0 0 1px rgb(233 196 106 / .35); }
.hoja .litigar__accion { background: var(--ink-950); }
.litigar__cita { display: block; width: 100%; margin: 6px 0 0; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .05); color: rgb(255 255 255 / .9); text-align: left; font-size: .88rem; line-height: 1.45; }
.litigar__cita small { display: block; margin-top: 4px; color: var(--oro); font-size: .74rem; font-weight: 600; }
.litigar__sub { margin: 12px 0 6px !important; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.litigar__tels { display: flex; flex-wrap: wrap; gap: 6px; }
.litigar__tels a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgb(255 255 255 / .1); color: #fff; font-size: .82rem; font-weight: 700; }
.litigar__tels a.rojo { background: #d62828; }
.litigar__tels svg { width: 14px; height: 14px; }
.litigar__directorio { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 0; color: var(--oro); font-size: .82rem; font-weight: 700; }
.litigar__directorio svg { width: 15px; height: 15px; }
.litigar__escribiendo { display: inline-flex; gap: 4px; }
.litigar__escribiendo i { width: 7px; height: 7px; border-radius: 999px; background: rgb(255 255 255 / .6); animation: punto 1s infinite; }
.litigar__escribiendo i:nth-child(2) { animation-delay: .15s; } .litigar__escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 50% { opacity: .2; transform: translateY(-2px); } }
.litigar__caja { display: flex; align-items: flex-end; gap: 8px; margin: 0 10px; padding: 6px 6px 6px 14px; border-radius: 22px; background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.litigar__caja textarea { flex: 1; min-height: 24px; max-height: 140px; padding: 8px 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 1rem; line-height: 1.4; resize: none; }
.litigar__caja textarea:focus { outline: none; }
.litigar__caja textarea::placeholder { color: rgb(255 255 255 / .5); }
.litigar__enviar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 999px; background: var(--oro); color: #111; }
.litigar__enviar svg { width: 18px; height: 18px; }
.litigar__nota { margin: 6px 16px 10px; font-size: .68rem; opacity: .55; text-align: center; }

/* Multa como carta (estilo DIVARA): renglones con puntos guía y precio en la letra de títulos. */
.carta-multa { margin: 4px 0 14px; padding: 16px 16px 6px; border-radius: 22px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); }
.carta-multa__cabeza { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid var(--ink-950); }
.carta-multa__cabeza span { font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; line-height: 1; }
.carta-multa__cabeza b { grid-column: 1; font-size: .8rem; font-weight: 600; color: var(--ink-500); }
.carta-multa__cabeza strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--ink-500); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in oklab, var(--senal) 70%, transparent); }
.carta-multa__lista { list-style: none; margin: 0; padding: 0; }
.plazo { padding: 13px 0; border-bottom: 1px dashed var(--ink-200); }
.plazo:last-child { border-bottom: 0; }
.plazo__linea { display: flex; align-items: baseline; gap: 8px; }
.plazo__nombre { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.plazo__puntos { flex: 1; min-width: 14px; border-bottom: 2px dotted var(--ink-300); transform: translateY(-4px); }
.plazo__precio { font-family: var(--display); font-weight: 600; font-size: 1.45rem; white-space: nowrap; }
.plazo__desc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: .8rem; color: var(--ink-500); }
.plazo__marca { padding: 2px 8px; border-radius: 999px; background: var(--marca-50); color: var(--marca-fuerte); font-weight: 800; font-size: .72rem; letter-spacing: .02em; }
.plazo__mejor { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #111; color: var(--oro); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.plazo--mejor .plazo__precio { font-size: 2rem; color: var(--marca-fuerte); }
.plazo--sin .plazo__precio { color: var(--ink-950); }
.boton--litigar { background: #0b0b0b; color: var(--oro); box-shadow: 0 0 0 1px rgb(233 196 106 / .35), 0 10px 22px -12px #000; }
.boton--litigar svg { color: var(--oro); filter: drop-shadow(0 0 4px var(--oro-sombra)); }
.hoja__pie .boton[data-compartir-multa] { flex: 0 0 52px; }
.hoja__pie .boton.pie__icono { flex: 0 0 52px; padding-inline: 0; }
.lugar-chip { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 16px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); font-size: .88rem; font-weight: 700; }
.lugar-chip svg { width: 16px; height: 16px; color: var(--marca); }
.lugar-chip small { color: var(--marca); font-weight: 700; }
.ayuda-lista { margin: 4px 0 6px; padding-left: 20px; font-size: 1rem; line-height: 1.6; }

/* Celulares pequeños: aire y jerarquía; nada se amontona. */
@media (max-width: 380px) {
  .feed--inicio .tarjeta { grid-template-columns: 1fr 52px; padding-left: 14px; padding-right: 4px; }
  .tarjeta h3 { font-size: clamp(1.45rem, 7.4vw, 1.9rem); margin: 12px 0 10px; }
  .tarjeta--pregunta h3, .tarjeta--vf h3 { font-size: clamp(1.6rem, 8vw, 2.1rem); }
  .tarjeta__texto { font-size: 1rem; line-height: 1.55; }
  .tarjeta__texto--grande { font-size: 1.08rem; }
  .tarjeta .opcion { padding: 14px; font-size: 1rem; }
  .tarjeta__lado { gap: 10px; }
  .tarjeta__lado svg { width: 20px; height: 20px; padding: 10px; }
  .tarjeta__libro { width: 44px; height: 44px; }
  .tarjeta__lado small { font-size: .62rem; }
  .tarjeta__cita { font-size: .76rem; padding: 7px 10px; }
  .tarjeta__etq { font-size: .66rem; padding: 5px 10px; }
  .librito { height: 34px; font-size: .66rem; padding: 0 11px 0 15px; }
  .librito[aria-selected="true"] { height: 40px; }
  .plazo__precio { font-size: 1.25rem; } .plazo--mejor .plazo__precio { font-size: 1.6rem; }
}
@media (max-height: 680px) { .tarjeta__texto--recorte { -webkit-line-clamp: 4; } .feed--inicio .tarjeta { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } }
.plazo__nombre, .plazo__desc, .litigar__msj, .litigar__cita { text-align: left; hyphens: manual; }
/* Cambio de página inmediato con fundido corto. */
.pagina--entra > .envoltura { animation: paginaEntra .28s var(--ios); }
@keyframes paginaEntra { from { opacity: 0; transform: translateY(8px); } }
/* En los reels la barra se va del todo (no asoma). */
:root[data-vista="reels"] .barra { transform: translateY(-140%); opacity: 0; visibility: hidden; transition: transform .35s var(--ios), opacity .2s, visibility 0s .35s; }
/* Una página a la vez (antes: tira horizontal con las seis; en iPhone dejaba la pantalla en negro al cambiar). */
.paginas { overflow: hidden !important; scroll-snap-type: none !important; }
.pagina { display: none; }
.pagina.pagina--activa { display: block; }
/* Las animaciones de entrada solo la primera vez: al volver a una página, se ve completa de inmediato. */
.pagina--vista .entra { animation: none; opacity: 1; transform: none; }
.entra { animation-duration: .4s; animation-delay: calc(var(--i, 0) * 35ms); }

/* ═══ 1.11 · Barra amplia, subisla Pregúntame, chat en blanco y negro, reels claros/oscuros ═══ */
/* Barra superior un tercio más amplia (hacia abajo). */
:root { --alto-barra: 106px; }
@media (min-width: 961px) { :root { --alto-barra: 110px; } }
.barra__caja { padding: 13px 12px 13px 22px; border-radius: 30px; }
.logo { font-size: 1.6rem; gap: 12px; }
.logo__marca { width: 42px; height: 42px; }
.logo small { font-size: .66rem; margin-top: 4px; }
.barra .icono-redondo { width: 52px; height: 52px; }
.barra .icono-redondo svg { width: 22px; height: 22px; }
.ubicacion-pill { height: 52px; max-width: 150px; padding: 0 16px 0 13px; font-size: .9rem; }
@media (max-width: 380px) { .logo { font-size: 1.35rem; } .logo__marca { width: 36px; height: 36px; } .barra .icono-redondo, .ubicacion-pill { height: 46px; } .barra .icono-redondo { width: 46px; } .ubicacion-pill { max-width: 112px; } }

/* Isla: Derechos con insignia azul rellena. */
.icono-insignia { width: 22px; height: 22px; }
/* Subisla «Pregúntame»: sale de la isla, más pequeña y fundida con ella; invita a deslizar hacia arriba. */
.isla { position: fixed; }
.subisla { position: absolute; left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; width: 168px; padding: 6px 14px 8px; border-radius: 20px 20px 0 0; background: inherit; color: var(--ink-950); box-shadow: 0 -10px 22px -16px rgb(0 0 0 / .35); touch-action: none; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); transition: transform .25s var(--ios); }
.subisla__asa { width: 34px; height: 4px; border-radius: 999px; background: var(--ink-300); }
.subisla__texto { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; }
.subisla__texto svg { width: 16px; height: 16px; animation: sube 1.6s var(--suave) infinite; }
:root[data-movimiento="reducido"] .subisla__texto svg { animation: none; }
:root[data-litigar="abierto"] .subisla { opacity: 0; pointer-events: none; }

/* Chat «Pregúntame» en blanco y negro (lo único dorado: la balanza), letra grande. */
.litigar { background: linear-gradient(transparent 20%, rgb(0 0 0 / .35)); padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.litigar__panel { max-height: min(76dvh, 680px); background: #fff; color: #0d0d0d; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 30px 70px -24px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(0 0 0 / .06); }
.litigar__marca { color: #0d0d0d; font-size: .95rem; }
.litigar__marca svg { color: var(--oro); }
.litigar__cerrar { background: #f2f2f2; color: #0d0d0d; }
.litigar__msj { font-size: 1.08rem; line-height: 1.55; }
.litigar__msj--app { background: #f2f2f2; color: #0d0d0d; }
.litigar__msj--yo { background: #0d0d0d; color: #fff; }
.litigar__ops button { background: #fff; color: #0d0d0d; box-shadow: inset 0 0 0 1.5px #0d0d0d; font-size: 1rem; padding: 12px 14px; }
.litigar__ops button:hover:not(:disabled) { background: #0d0d0d; color: #fff; }
.litigar__ops button[data-elegido] { background: #0d0d0d; color: #fff; }
.litigar__accion { background: #fff; color: #0d0d0d; box-shadow: inset 0 0 0 1px #e3e3e0; padding: 13px 14px; }
.litigar__accion svg { color: #0d0d0d; }
.litigar__accion b { font-size: 1rem; }
.litigar__accion--marca { background: #0d0d0d; color: #fff; box-shadow: none; }
.litigar__accion--marca svg { color: #fff; }
.litigar__cita { background: #fafaf8; color: #1d1d1d; box-shadow: inset 3px 0 0 #0d0d0d; font-size: .95rem; }
.litigar__cita small { color: #6b6b6b; }
.litigar__tels a { background: #f2f2f2; color: #0d0d0d; }
.litigar__tels a.rojo { background: #d62828; color: #fff; }
.litigar__sigue { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.litigar__sigue button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #d9d9d6; color: #0d0d0d; font-size: .86rem; font-weight: 700; }
.litigar__sigue svg { width: 15px; height: 15px; }
.litigar__escribiendo i { background: #9a9a96; }
.litigar__caja { background: #f2f2f2; box-shadow: none; }
.litigar__caja textarea { color: #0d0d0d; font-size: 1.08rem; }
.litigar__caja textarea::placeholder { color: #8a8a86; }
.litigar__enviar { background: #0d0d0d; color: #fff; }
.litigar__nota { color: #6b6b6b; opacity: 1; }
:root[data-tema="oscuro"] .litigar__panel { background: #111; color: #f2f2f2; box-shadow: 0 30px 70px -24px #000, inset 0 0 0 1px rgb(255 255 255 / .08); }
:root[data-tema="oscuro"] .litigar__marca, :root[data-tema="oscuro"] .litigar__cerrar, :root[data-tema="oscuro"] .litigar__accion, :root[data-tema="oscuro"] .litigar__accion svg, :root[data-tema="oscuro"] .litigar__ops button, :root[data-tema="oscuro"] .litigar__sigue button, :root[data-tema="oscuro"] .litigar__caja textarea, :root[data-tema="oscuro"] .litigar__tels a { color: #f2f2f2; }
:root[data-tema="oscuro"] .litigar__cerrar, :root[data-tema="oscuro"] .litigar__msj--app, :root[data-tema="oscuro"] .litigar__caja, :root[data-tema="oscuro"] .litigar__tels a { background: #1e1e1e; color: #f2f2f2; }
:root[data-tema="oscuro"] .litigar__msj--yo, :root[data-tema="oscuro"] .litigar__accion--marca, :root[data-tema="oscuro"] .litigar__enviar { background: #f2f2f2; color: #0d0d0d; }
:root[data-tema="oscuro"] .litigar__accion--marca svg { color: #0d0d0d; }
:root[data-tema="oscuro"] .litigar__accion, :root[data-tema="oscuro"] .litigar__ops button, :root[data-tema="oscuro"] .litigar__sigue button { background: #161616; box-shadow: inset 0 0 0 1px #333; }
:root[data-tema="oscuro"] .litigar__cita { background: #171717; color: #e6e6e3; box-shadow: inset 3px 0 0 #f2f2f2; }

/* Reels: secciones más grandes; fondo oscuro con tinte sutil de la sección (claro abajo, según tu tema). */
.feed--inicio { --tx: #fff; --tx2: rgb(255 255 255 / .88); --sup: rgb(255 255 255 / .1); --sup2: rgb(255 255 255 / .16); background: #000; color: var(--tx); }
.feed--inicio .tarjeta { background: linear-gradient(165deg, color-mix(in oklab, var(--seccion, #0b6b4b) 32%, #000) 0%, #000 58%, color-mix(in oklab, var(--seccion, #0b6b4b) 12%, #000) 100%); --ac: color-mix(in oklab, var(--seccion, #4fc796) 50%, #fff); padding-top: calc(max(10px, env(safe-area-inset-top)) + 82px); }
.feed--inicio .tarjeta h3, .feed--inicio .tarjeta__lado button { color: var(--tx); }
.feed--inicio .tarjeta__texto { color: var(--tx2); }
.feed--inicio .tarjeta__etq, .feed--inicio .tarjeta__cita, .feed--inicio .tarjeta .opcion, .feed--inicio .tarjeta__guion, .feed--inicio .feed__racha, .feed--inicio .feed__ajustes { background: var(--sup); color: var(--tx); }
.feed--inicio .tarjeta__lado svg { background: var(--sup2); color: var(--tx); }
.feed--inicio .tarjeta__etq, .feed--inicio .tarjeta__sub, .feed--inicio .tarjeta__titulo2, .feed--inicio .tarjeta__mas, .feed--inicio .tarjeta__cita svg { color: var(--ac); }
.feed--inicio .feed__cabeza { padding-top: max(12px, env(safe-area-inset-top)); }
.feed--inicio .librito { height: 48px; padding: 0 18px 0 22px; font-size: .9rem; letter-spacing: .06em; border-radius: 4px 12px 12px 4px; }
.feed--inicio .librito[aria-selected="true"] { height: 58px; font-size: .98rem; }
.feed--inicio .feed__racha, .feed--inicio .feed__ajustes { height: 40px; }
.feed--inicio .feed__ajustes { width: 40px; }
@media (max-width: 380px) { .feed--inicio .librito { height: 42px; font-size: .8rem; padding: 0 14px 0 18px; } .feed--inicio .librito[aria-selected="true"] { height: 50px; font-size: .86rem; } .feed--inicio .tarjeta { padding-top: calc(max(10px, env(safe-area-inset-top)) + 72px); } }

:root[data-tema="claro"] .feed--inicio { --tx: #000; --tx2: #1c1c1c; --sup: rgb(0 0 0 / .06); --sup2: rgb(0 0 0 / .1); background: #fff; color: var(--tx); }
:root[data-tema="claro"] .feed--inicio .tarjeta { background: linear-gradient(165deg, color-mix(in oklab, var(--seccion, #0b6b4b) 15%, #fff) 0%, #fff 52%, color-mix(in oklab, var(--seccion, #0b6b4b) 7%, #fff) 100%); --ac: color-mix(in oklab, var(--seccion, #0b6b4b) 78%, #000); }
:root[data-tema="claro"] .feed--inicio .feed__cabeza { background: linear-gradient(#fff 40%, transparent); }
:root[data-tema="claro"] .feed--inicio .librito { color: #222; background: linear-gradient(90deg, var(--c) 0 6px, color-mix(in oklab, var(--c) 12%, #fff) 6px); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06), 0 6px 14px -10px rgb(0 0 0 / .3); }
:root[data-tema="claro"] .feed--inicio .librito[aria-selected="true"] { color: #fff; }
:root[data-tema="claro"] .feed--inicio .boton--claro { background: #111; color: #fff; }
:root[data-tema="claro"] .feed--inicio .feed__guia { background: rgb(0 0 0 / .62); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) .feed--inicio { --tx: #000; --tx2: #1c1c1c; --sup: rgb(0 0 0 / .06); --sup2: rgb(0 0 0 / .1); background: #fff; color: var(--tx); }
  :root:not([data-tema="oscuro"]) .feed--inicio .tarjeta { background: linear-gradient(165deg, color-mix(in oklab, var(--seccion, #0b6b4b) 15%, #fff) 0%, #fff 52%, color-mix(in oklab, var(--seccion, #0b6b4b) 7%, #fff) 100%); --ac: color-mix(in oklab, var(--seccion, #0b6b4b) 78%, #000); }
  :root:not([data-tema="oscuro"]) .feed--inicio .feed__cabeza { background: linear-gradient(#fff 40%, transparent); }
  :root:not([data-tema="oscuro"]) .feed--inicio .librito { color: #222; background: linear-gradient(90deg, var(--c) 0 6px, color-mix(in oklab, var(--c) 12%, #fff) 6px); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06), 0 6px 14px -10px rgb(0 0 0 / .3); }
  :root:not([data-tema="oscuro"]) .feed--inicio .librito[aria-selected="true"] { color: #fff; }
  :root:not([data-tema="oscuro"]) .feed--inicio .boton--claro { background: #111; color: #fff; }
  :root:not([data-tema="oscuro"]) .feed--inicio .feed__guia { background: rgb(0 0 0 / .62); }
}

/* Paneles de Aprende: verde/azul suaves (tecnología y leyes), visibles en cada pantalla. */
.aprende-banner { background: linear-gradient(120deg, #e3f3ee 0%, #e4eefb 100%); color: #10302a; box-shadow: inset 0 0 0 1px rgb(16 48 42 / .08), 0 10px 24px -18px rgb(16 48 42 / .45); margin: 6px 0 18px; }
.aprende-banner .etiqueta { color: #1f7a64; }
.aprende-banner b { color: #0f2b3d; }
.aprende-banner small { color: #3b5a66; opacity: 1; }
.aprende-banner__icono { background: linear-gradient(135deg, #1f8f73, #2c6fd1); color: #fff; }
.aprende-banner > svg { color: #2c6fd1; }
:root[data-tema="oscuro"] .aprende-banner { background: linear-gradient(120deg, #0f2a25 0%, #13233d 100%); color: #e6f3ef; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
:root[data-tema="oscuro"] .aprende-banner b { color: #eef4ff; }
:root[data-tema="oscuro"] .aprende-banner small { color: #a9c3cf; }
:root[data-tema="oscuro"] .aprende-banner .etiqueta { color: #6fd3b5; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .aprende-banner { background: linear-gradient(120deg, #0f2a25 0%, #13233d 100%); color: #e6f3ef; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); } :root:not([data-tema="claro"]) .aprende-banner b { color: #eef4ff; } :root:not([data-tema="claro"]) .aprende-banner small { color: #a9c3cf; } :root:not([data-tema="claro"]) .aprende-banner .etiqueta { color: #6fd3b5; } }

/* Leyes: buscador arriba y carta por secciones (como DIVARA). */
.buscador-leyes { margin: 0 0 12px; }
.buscador-leyes input { font-size: 1rem; }
.busqueda:empty { display: none; }
.busqueda { margin: 0 0 18px; padding: 10px; border-radius: 22px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); }
.busqueda__directo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 14px; margin-bottom: 6px; border-radius: 16px; background: var(--ink-950); color: var(--papel); text-align: left; font-size: .95rem; }
.busqueda__directo svg { width: 18px; height: 18px; flex: none; }
.carta-leyes .menu-portada__cabeza { grid-template-columns: 46px 1fr auto; border-bottom: 2px solid var(--ink-950); margin: 0 18px 4px; padding: 18px 0 12px; }
.carta-leyes__n { font-family: var(--display); font-size: 1.1rem; color: var(--ink-400); }
.menu--corta .menu__fila:nth-of-type(n+7) { display: none; }
.carta-leyes__mas { display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 20px); margin: 0 10px 12px; padding: 12px; border-radius: 14px; background: var(--fondo); font-weight: 700; font-size: .9rem; }
.carta-leyes__mas svg { width: 16px; height: 16px; }

/* La subisla deja espacio a la balanza del centro (que sobresale) y el texto queda arriba de ella. */
.subisla { width: 196px; padding: 7px 14px 28px; bottom: calc(100% - 22px); z-index: -1; }
:root[data-tema="claro"] .feed--inicio .librito[aria-selected="true"] { color: #fff; background: linear-gradient(160deg, color-mix(in oklab, var(--c) 92%, #fff 8%), color-mix(in oklab, var(--c) 72%, #000)); }
@media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) .feed--inicio .librito[aria-selected="true"] { color: #fff; background: linear-gradient(160deg, color-mix(in oklab, var(--c) 92%, #fff 8%), color-mix(in oklab, var(--c) 72%, #000)); } }
.subisla { bottom: calc(100% - 4px); padding: 7px 16px 26px; width: 200px; }
.subisla { padding-bottom: 38px; gap: 3px; }
.isla .subisla { position: absolute; left: 50%; bottom: calc(100% - 4px); width: 200px; min-width: 0; padding: 7px 16px 36px; border-radius: 20px 20px 0 0; gap: 3px; color: var(--ink-950); font-size: inherit; }
.feed__guia { bottom: calc(196px + env(safe-area-inset-bottom)); } .feed--inicio .tarjeta { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } .feed--inicio .tarjeta__lado { padding-bottom: 0; }

/* ═══ 1.12 · Arranque con logo, subisla compacta, reels que asoman, barra con título grande ═══ */
/* Pantalla de inicio (como DIVARA): logo JUSTO · México mientras se prepara la app. */
.arranque { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 6px; background: #000; color: #fff; transition: opacity .4s var(--ios), visibility 0s .4s; }
.arranque__logo { width: 76px; height: 76px; margin-bottom: 14px; animation: latido 1.6s var(--suave) infinite; }
.arranque b { font-family: var(--display); font-weight: 700; font-size: 2.6rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1; }
.arranque small { font-family: var(--display); font-size: .95rem; letter-spacing: .4em; text-transform: uppercase; color: var(--marca); padding-left: .4em; }
.arranque__barra { width: 120px; height: 3px; margin-top: 26px; border-radius: 999px; background: rgb(127 127 127 / .25); overflow: hidden; }
.arranque__barra i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--marca); animation: carga 1.1s var(--suave) infinite; }
.arranque--fuera { opacity: 0; visibility: hidden; }
@keyframes latido { 50% { transform: scale(1.06); } }
@keyframes carga { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
:root[data-movimiento="reducido"] .arranque__logo, :root[data-movimiento="reducido"] .arranque__barra i { animation: none; }

/* Barra superior: título grande que resalta, botones compactos. */
.logo { font-size: 1.95rem; letter-spacing: .12em; gap: 12px; }
.logo__marca { width: 46px; height: 46px; }
.logo small { font-size: .74rem; letter-spacing: .32em; margin-top: 5px; }
.barra .icono-redondo { width: 42px; height: 42px; }
.barra .icono-redondo svg { width: 19px; height: 19px; }
.ubicacion-pill { height: 42px; max-width: 128px; padding: 0 13px 0 10px; font-size: .82rem; }
.ubicacion-pill svg { width: 15px; height: 15px; }
.barra__acciones { gap: 6px; }
@media (max-width: 380px) { .logo { font-size: 1.55rem; } .logo__marca { width: 38px; height: 38px; } .barra .icono-redondo, .ubicacion-pill { height: 38px; } .barra .icono-redondo { width: 38px; } .ubicacion-pill { max-width: 96px; font-size: .76rem; } }

/* Subisla «Pregúntame»: compacta, pegada a la isla y con un vaivén que invita a deslizar. */
.isla .subisla { width: 156px; padding: 5px 12px 30px; bottom: calc(100% - 6px); gap: 1px; animation: vaiven 2.4s var(--suave) infinite; }
.subisla__asa { width: 28px; height: 4px; }
.subisla__texto { font-size: .74rem; }
@keyframes vaiven { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -6px; } }
:root[data-movimiento="reducido"] .isla .subisla { animation: none; }

/* Reels: secciones arriba; racha y ajustes debajo, más grandes; el siguiente reel se asoma. */
.feed--inicio { display: flex; flex-direction: column; }
.feed--inicio .feed__cabeza { position: relative; inset: auto; flex: none; display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "libros libros libros" ". racha ajustes"; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 12px 6px; background: transparent; }
.feed--inicio .libritos { grid-area: libros; }
.feed--inicio .feed__racha { grid-area: racha; height: 44px; padding: 0 14px; font-size: .95rem; gap: 6px; border-radius: 999px; }
.feed--inicio .feed__racha svg { width: 18px; height: 18px; }
.feed--inicio .feed__ajustes { grid-area: ajustes; width: 44px; height: 44px; }
.feed--inicio .feed__ajustes svg { width: 20px; height: 20px; }
.feed--inicio .librito::after, .feed--inicio .librito::before { display: none; }
.feed--inicio .librito { padding: 0 18px; border-radius: 14px; background: color-mix(in oklab, var(--c) 24%, #161616); color: rgb(255 255 255 / .9); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 30%, transparent); }
.feed--inicio .librito[aria-selected="true"] { background: var(--c); color: #fff; box-shadow: 0 10px 22px -12px var(--c); }
.feed--inicio .feed__pista { flex: 1; min-height: 0; height: auto; padding-bottom: 196px; scroll-padding-top: 0; }
.feed--inicio .tarjeta { height: calc(100% - 196px); margin: 0 8px; padding: 22px 4px 18px 18px; border-radius: 28px 28px 0 0; box-shadow: 0 -8px 24px -18px rgb(0 0 0 / .45); }
.feed--inicio .tarjeta + .tarjeta { margin-top: 0; }
.feed--inicio .feed__guia { bottom: calc(150px + env(safe-area-inset-bottom)); }
@media (max-width: 380px) { .feed--inicio .tarjeta { height: calc(100% - 182px); padding: 18px 2px 14px 14px; } .feed--inicio .feed__pista { padding-bottom: 182px; } }

:root[data-tema="claro"] .feed--inicio .librito { color: #1d1d1d; background: color-mix(in oklab, var(--c) 13%, #fff); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 18%, transparent); }
:root[data-tema="claro"] .feed--inicio .librito[aria-selected="true"] { color: #fff; background: var(--c); box-shadow: 0 10px 22px -12px var(--c); }
:root[data-tema="claro"] .arranque { background: #fff; color: #0d0d0d; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) .feed--inicio .librito { color: #1d1d1d; background: color-mix(in oklab, var(--c) 13%, #fff); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 18%, transparent); }
  :root:not([data-tema="oscuro"]) .feed--inicio .librito[aria-selected="true"] { color: #fff; background: var(--c); box-shadow: 0 10px 22px -12px var(--c); }
  :root:not([data-tema="oscuro"]) .arranque { background: #fff; color: #0d0d0d; }
}
/* El reel ocupa el alto útil (la pista ya descuenta el espacio de abajo con su relleno); el siguiente asoma ~56 px. */
.feed--inicio .feed__pista { padding-bottom: 150px; }
.feed--inicio .tarjeta { height: calc(100% + 94px); }
@media (max-width: 380px) { .feed--inicio .feed__pista { padding-bottom: 140px; } .feed--inicio .tarjeta { height: calc(100% + 90px); } }
.feed--inicio .tarjeta { height: calc(100% - 40px); }
@media (max-width: 380px) { .feed--inicio .tarjeta { height: calc(100% - 36px); } }
.arranque__aviso { margin: 22px 0 8px; font-size: .9rem; opacity: .75; }

/* ═══ 1.13 · Sol y luna, secciones grandes, isla baja con «Pregúntame» a la derecha, Vial justificado ═══ */
/* Sol/luna: en oscuro se ve el sol (pasar a claro); en claro, la luna. */
.tema-rapido .lucide-moon { display: none; }
:root[data-tema="claro"] .tema-rapido .lucide-sun { display: none; }
:root[data-tema="claro"] .tema-rapido .lucide-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) .tema-rapido .lucide-sun { display: none; }
  :root:not([data-tema="oscuro"]) .tema-rapido .lucide-moon { display: block; }
}
.tema-rapido svg { animation: gira-tema .45s var(--suave); }
@keyframes gira-tema { from { rotate: -60deg; opacity: 0; } }
:root[data-movimiento="reducido"] .tema-rapido svg { animation: none; }
.feed--inicio .feed__cabeza { grid-template-columns: 1fr auto auto auto; grid-template-areas: "libros libros libros libros" ". racha tema ajustes"; }
.feed--inicio .feed__tema { grid-area: tema; }

/* Secciones de los reels más grandes. */
.feed--inicio .libritos { gap: 8px; padding-top: 4px; }
.feed--inicio .librito { height: 56px; padding: 0 22px; font-size: 1rem; border-radius: 16px; }
.feed--inicio .librito[aria-selected="true"] { height: 66px; font-size: 1.08rem; }
@media (max-width: 380px) { .feed--inicio .librito { height: 50px; padding: 0 18px; font-size: .9rem; } .feed--inicio .librito[aria-selected="true"] { height: 58px; font-size: .96rem; } }

/* Isla más pegada al borde de abajo; se oculta deslizándose y desvaneciéndose, sin brusquedad. */
.isla { --sedoso: cubic-bezier(.45, 0, .2, 1); bottom: max(6px, calc(env(safe-area-inset-bottom) - 16px)); transition: transform .8s var(--sedoso), opacity .65s var(--sedoso), filter .65s var(--sedoso); }
.isla[data-escondida="true"] { transform: translate(-50%, calc(100% + 18px)) scale(.94); opacity: 0; filter: blur(2px); pointer-events: none; }
.barra { transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .65s cubic-bezier(.45, 0, .2, 1); }
.barra[data-escondida="true"] { opacity: 0; }
:root[data-movimiento="reducido"] .isla, :root[data-movimiento="reducido"] .barra { transition-duration: .01s; }

/* «Pregúntame»: solo la palabra, pequeña, saliendo del lado derecho de la isla; sin bloque blanco. */
.isla .subisla { left: auto; right: 16px; bottom: calc(100% + 2px); transform: none; width: auto; min-width: 0; padding: 4px 4px 2px; gap: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 0; animation: vaiven 2.8s var(--suave) infinite; }
.isla .subisla .subisla__asa { display: none; }
.isla .subisla .subisla__texto { gap: 4px; font-size: .68rem; letter-spacing: .1em; color: var(--ink-950); text-shadow: 0 0 6px var(--papel), 0 0 2px var(--papel); }
.isla .subisla .subisla__texto svg { width: 13px; height: 13px; }
@keyframes vaiven { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -4px; } }
.isla[data-escondida="true"] .subisla { animation: none; }

/* Reels: con la isla más abajo, el reel gana alto. */
.feed--inicio .feed__pista { padding-bottom: 122px; }
@media (max-width: 380px) { .feed--inicio .feed__pista { padding-bottom: 114px; } }
.feed--inicio .feed__guia { bottom: calc(118px + env(safe-area-inset-bottom)); }

/* Vial: cada infracción ocupa todo el renglón (justificada, máximo tres líneas) y el monto va debajo. */
.calc__fila { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "no nombre" "no monto"; column-gap: 12px; row-gap: 6px; align-items: start; padding: 12px 14px; }
.calc__fila .calc__no { grid-area: no; align-self: center; }
.calc__fila .menu__nombre { grid-area: nombre; text-align: justify; hyphens: auto; -webkit-hyphens: auto; line-height: 1.38; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.calc__fila .menu__puntos { display: none; }
.calc__fila b { grid-area: monto; justify-self: start; padding: 3px 10px; border-radius: 999px; background: color-mix(in oklab, var(--marca) 14%, transparent); color: var(--marca); font-size: .74rem; }
.multa__extras li, .recibo__nota, .plazo__desc, .calc__tope small, .nota-art { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.multa__inf { text-wrap: balance; }
/* Plazos con nombre largo: el nombre usa todo el renglón y el precio queda debajo, alineado a la derecha. */
.plazo__linea--larga { flex-wrap: wrap; row-gap: 2px; }
.plazo__linea--larga .plazo__nombre { flex: 1 1 100%; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* ═══ 1.14 · Barra limpia (título y ubicación); sol/luna y ajustes debajo del panel ═══ */
.barra .envoltura { position: relative; }
.barra__bajo { position: absolute; top: calc(100% + 8px); right: 0; display: flex; gap: 8px; pointer-events: auto; }
.barra__bajo .icono-redondo { width: 38px; height: 38px; background: color-mix(in oklab, var(--papel) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--ink-200), 0 6px 16px -10px rgb(0 0 0 / .4); }
.barra__bajo .icono-redondo svg { width: 17px; height: 17px; }
.barra__caja .ubicacion-pill { max-width: 46vw; }

/* Leyes · títulos de sección con acabado editorial: antetítulo fino, título grande, cifra en contorno y filete dorado. */
.carta-leyes .menu-portada__cabeza { position: relative; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: end; border-bottom: 0; margin: 0 20px 6px; padding: 22px 0 14px; }
.carta-leyes .menu-portada__cabeza::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--oro) 0 44px, var(--ink-200) 44px); }
.carta-leyes .menu-portada__cabeza .panel__icono { display: none; }
.carta-leyes .menu-portada__cabeza .etiqueta { display: block; font-size: .66rem; letter-spacing: .18em; color: var(--marca); margin-bottom: 6px; }
.carta-leyes .menu-portada__cabeza h3 { font-size: 1.9rem; letter-spacing: .015em; }
.carta-leyes__n { font-size: 2.6rem; line-height: .85; font-weight: 600; color: transparent; -webkit-text-stroke: 1px var(--ink-400); }
.portadas__titulo, .estado-elige > .etiqueta { display: flex; align-items: center; gap: 10px; letter-spacing: .16em; font-size: .68rem; }
.portadas__titulo::after, .estado-elige > .etiqueta::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ink-200), transparent); }

/* Leyes · el buscador acompaña a la barra: se queda arriba al leer y se va, suave como la isla, al bajar. */
.buscador-leyes { position: sticky; top: 28px; z-index: 6; transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .6s cubic-bezier(.45, 0, .2, 1); box-shadow: 0 10px 24px -18px rgb(0 0 0 / .5); }
.filtros { transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .6s cubic-bezier(.45, 0, .2, 1); }
:root[data-barras="ocultas"] .buscador-leyes, :root[data-barras="ocultas"] .filtros { transform: translateY(-24px); opacity: 0; pointer-events: none; }
.buscador-leyes { background: color-mix(in oklab, var(--papel) 92%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--ink-200), 0 12px 26px -18px rgb(0 0 0 / .6); }

/* Reels · la cabeza flota sobre el reel (así el reel usa toda la pantalla) y el dedo lo controla la app. */
.feed--inicio { position: relative; }
.feed--inicio .feed__cabeza { position: absolute; inset: 0 0 auto; z-index: 3; transition: opacity .7s cubic-bezier(.45, 0, .2, 1), transform .8s cubic-bezier(.45, 0, .2, 1); }
.feed--inicio .feed__pista { position: relative; height: 100%; touch-action: pan-x; }
.feed--inicio .tarjeta { padding-top: calc(max(12px, env(safe-area-inset-top)) + 150px); }
.feed--inicio .tarjeta__texto { font-size: clamp(1.14rem, 4.9vw, 1.42rem); line-height: 1.58; }
.feed--inicio .tarjeta__texto--recorte { -webkit-line-clamp: 8; }
@media (max-height: 700px) { .feed--inicio .tarjeta__texto--recorte { -webkit-line-clamp: 6; } }

/* Modo inmersivo: desde el primer desliz se desvanecen secciones, racha, ajustes y la isla; solo asoma «Pregúntame». */
:root[data-vista="reels"][data-inmerso] .feed__cabeza { opacity: 0; transform: translateY(-18px); pointer-events: none; }
.isla > :not(.subisla) { transition: opacity .6s cubic-bezier(.45, 0, .2, 1), transform .8s cubic-bezier(.45, 0, .2, 1); }
.isla { transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .65s cubic-bezier(.45, 0, .2, 1), background-color .6s, box-shadow .6s, border-color .6s; }
.isla .subisla { transition: bottom .8s cubic-bezier(.45, 0, .2, 1), right .8s cubic-bezier(.45, 0, .2, 1); }
:root[data-vista="reels"][data-inmerso] .isla { background-color: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
:root[data-vista="reels"][data-inmerso] .isla > :not(.subisla) { opacity: 0; transform: translateY(26px); pointer-events: none; }
:root[data-vista="reels"][data-inmerso] .isla .subisla { bottom: 10px; right: 6px; pointer-events: auto; }
.feed--inicio .feed__pista, .feed--inicio .feed__pista * { touch-action: pan-x; }

/* Reels: el contenido al centro del panel, los botones abajo. */
.feed--inicio .tarjeta { align-items: center; }
.feed--inicio .tarjeta__lado { align-self: end; }

/* Intro como inicio de sesión: el logo aparece, JUSTO se cierra letra a letra, el lema y la barra se llenan; al salir,
   el telón se abre hacia arriba y la app aparece debajo. Si la sesión sigue viva, no se muestra. */
:root[data-sin-intro] .arranque { display: none; }
.arranque { transition: opacity .75s cubic-bezier(.45, 0, .2, 1), transform .8s cubic-bezier(.45, 0, .2, 1), filter .75s, visibility 0s .8s; }
.arranque__logo { animation: intro-logo 1s var(--suave) both, latido 1.8s var(--suave) 1s infinite; }
.arranque b { animation: intro-letras 1.1s var(--suave) .2s both; }
.arranque small { animation: intro-sube .8s var(--suave) .55s both; }
.arranque__lema { font-style: normal; font-size: .82rem; letter-spacing: .04em; opacity: .6; margin-top: 10px; animation: intro-sube .8s var(--suave) .8s both; }
.arranque__barra i { width: 100%; transform-origin: left; animation: intro-carga 1.7s cubic-bezier(.45, 0, .2, 1) .15s both; }
.arranque--fuera { opacity: 0; transform: translateY(-3%) scale(1.04); filter: blur(6px); }
@keyframes intro-logo { from { opacity: 0; transform: scale(.6) rotate(-8deg); filter: blur(8px); } }
@keyframes intro-letras { from { opacity: 0; letter-spacing: .7em; filter: blur(4px); } }
@keyframes intro-sube { from { opacity: 0; transform: translateY(10px); } }
@keyframes intro-carga { from { transform: scaleX(0); } to { transform: scaleX(1); } }
:root[data-entrando] .paginas, :root[data-entrando] .isla { animation: intro-app .8s var(--suave) both; }
@keyframes intro-app { from { opacity: 0; transform: scale(.985); } }
:root[data-entrando] .isla { animation-name: intro-isla; }
@keyframes intro-isla { from { opacity: 0; translate: 0 20px; } }
:root[data-movimiento="reducido"] .arranque *, :root[data-movimiento="reducido"] .paginas { animation: none !important; }

/* Pregúntame con voz: micrófono para dictar y bocina para oír la respuesta. */
.litigar__voz { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; margin-right: 8px; border-radius: 999px; background: #f2f2f2; color: #6b6b67; }
.litigar__voz svg { width: 16px; height: 16px; }
.litigar__voz .lucide-volume-2 { display: none; }
.litigar__voz[aria-pressed="true"] { background: #0d0d0d; color: var(--oro); }
.litigar__voz[aria-pressed="true"] .lucide-volume-2 { display: block; }
.litigar__voz[aria-pressed="true"] .lucide-volume-x { display: none; }
.litigar__mic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 999px; background: transparent; color: #0d0d0d; box-shadow: inset 0 0 0 1px #d8d8d4; transition: background-color .25s, color .25s; }
.litigar__mic svg { width: 18px; height: 18px; }
.litigar__mic[data-escuchando] { background: #d62828; color: #fff; box-shadow: 0 0 0 0 rgb(214 40 40 / .5); animation: escucha 1.3s ease-out infinite; }
@keyframes escucha { to { box-shadow: 0 0 0 14px rgb(214 40 40 / 0); } }
:root[data-movimiento="reducido"] .litigar__mic[data-escuchando] { animation: none; }

/* ═══ 1.15 · Libro de leyes: la letra de la ley en tipografía de libro, filetes dorados y citas en versalitas ═══ */
:root { --libro: "Literata", Georgia, "Times New Roman", serif; }
.texto-art, .lectura p, .tarjeta__texto, .guia__resumen, .litigar__cita span { font-family: var(--libro); font-optical-sizing: auto; font-feature-settings: "kern", "liga", "onum"; }
.texto-art { line-height: 1.75; }
.lectura p { font-size: clamp(1.1rem, 4.3vw, 1.26rem); line-height: 1.78; }
/* El antetítulo de cada página lleva el signo de sección, como en un código. */
.seccion__cabeza .marca-texto::before { content: "§ "; color: var(--oro); font-family: var(--libro); font-weight: 600; }
/* Las citas («Artículo 162, párrafo segundo») en versalitas de libro. */
.tarjeta__cita, .lectura__cita, .litigar__cita small { font-family: var(--libro); font-variant-caps: all-small-caps; letter-spacing: .05em; font-weight: 600; }
.tarjeta__cita { font-size: .95rem; }

/* Pregúntame: lo que dice la ley se lee igual que un artículo (sin cajas ni etiquetas): texto de libro, filete dorado y la cita debajo. */
.litigar__cita { margin: 12px 0 4px; padding: 2px 0 2px 16px; border-radius: 0; background: none !important; box-shadow: inset 2px 0 0 var(--oro) !important; color: inherit !important; }
.litigar__cita span { display: block; font-size: 1.06rem; line-height: 1.72; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.litigar__cita small { margin-top: 6px; font-size: .9rem; color: #8a6d1f !important; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--oro) 55%, transparent); text-underline-offset: 3px; }
:root[data-tema="oscuro"] .litigar__cita small { color: var(--oro) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .litigar__cita small { color: var(--oro) !important; } }
.litigar__msj p { font-size: 1.02rem; }
.litigar__accion b { font-family: var(--libro); font-weight: 600; }

/* Reels: sello de la sección, capitular dorada en la letra de la ley y el puente «En la práctica». */
.tarjeta__sello { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--libro); font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: .95rem; font-weight: 600; color: var(--tx2, rgb(255 255 255 / .75)); }
.tarjeta__sello svg { width: 26px; height: 26px; padding: 6px; box-sizing: content-box; border-radius: 999px; color: var(--seccion, var(--oro)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--seccion, var(--oro)) 55%, transparent), 0 0 0 4px color-mix(in oklab, var(--seccion, var(--oro)) 10%, transparent); }
.tarjeta__sello::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--seccion, var(--oro)) 45%, transparent), transparent); }
.tarjeta__texto--capitular::first-letter { font-family: var(--libro); font-weight: 600; font-size: 1.5em; color: var(--oro); }
.tarjeta__practica { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 4px; padding: 12px 14px; border-radius: 16px; background: color-mix(in oklab, var(--seccion, var(--marca)) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--seccion, var(--marca)) 26%, transparent); color: inherit; text-align: left; }
.tarjeta__practica > svg:first-child { width: 22px; height: 22px; flex: none; color: var(--seccion, var(--marca)); }
.tarjeta__practica > svg:last-child { width: 18px; height: 18px; flex: none; margin-left: auto; opacity: .55; }
.tarjeta__practica span { display: grid; gap: 1px; font-weight: 700; font-size: .98rem; line-height: 1.3; }
.tarjeta__practica small { font-family: var(--libro); font-variant-caps: all-small-caps; letter-spacing: .08em; font-size: .85rem; font-weight: 600; opacity: .7; }
/* Riel de acciones: cuatro, más finos. */
.feed--inicio .tarjeta__lado { gap: 10px; }
.feed--inicio .tarjeta__lado svg { width: 21px; height: 21px; padding: 10px; }
.feed--inicio .tarjeta__lado small { font-size: .62rem; }
.tarjeta__lado [data-escuchar-tarjeta][aria-pressed="true"] svg { background: var(--oro); color: #111; fill: none; animation: escucha-reel 1.4s ease-out infinite; }
@keyframes escucha-reel { 0% { box-shadow: 0 0 0 0 rgb(233 196 106 / .55); } 100% { box-shadow: 0 0 0 12px rgb(233 196 106 / 0); } }
@media (max-height: 700px) { .feed--inicio .tarjeta__lado small { display: none; } }

/* Vial: un semáforo (rojo, ámbar y verde); cuando estás en Vial, la luz cambia como un semáforo de verdad. */
.isla .icono-semaforo { width: 22px; height: 22px; }
.isla a[aria-current="true"] .icono-semaforo circle { animation: semaforo 4.5s steps(1) infinite; opacity: .3; }
.isla a[aria-current="true"] .icono-semaforo circle:nth-of-type(1) { animation-delay: -1.5s; }
.isla a[aria-current="true"] .icono-semaforo circle:nth-of-type(2) { animation-delay: -3s; }
@keyframes semaforo { 0%, 33% { opacity: 1; } 34%, 100% { opacity: .3; } }
:root[data-movimiento="reducido"] .icono-semaforo circle { animation: none !important; opacity: 1 !important; }
/* Que todo el reel quepa: centrado si cabe; si no, empieza arriba (nunca se corta). */
.feed--inicio .tarjeta { align-items: safe center; }
.feed--inicio .tarjeta__texto { font-size: clamp(1.06rem, 4.5vw, 1.3rem); line-height: 1.6; }
.feed--inicio .tarjeta__texto--recorte { -webkit-line-clamp: 7; }
.tarjeta__cita { font-size: .9rem; line-height: 1.3; }
.feed--inicio .tarjeta h3 { margin-bottom: 10px; }
@media (max-height: 740px) { .tarjeta__sello { margin-bottom: 8px; } }
.isla .icono-semaforo { width: 26px; height: 26px; margin-block: -2px; }

/* ═══ 1.16 · Tipografía del generador INGO: títulos en Playfair Display (como portada de código impreso), rótulos en
   Montserrat espaciada, interfaz en Manrope y la ley en Literata. Los títulos van en altas y bajas, como un libro. ═══ */
body { font-feature-settings: "kern", "liga"; }
.seccion__titulo, .panel h3, .portada h1, .widget h4, .tema b, .resultado b, .hoja__cabeza h2, .quiz__pregunta, .flujo-tarjeta b,
.indice-leyes summary b, .multa__inf, .lectura .lectura__frase, .portada-ley__titulo, .menu-portada__cabeza h3, .portada-hero h2,
.aprende-banner b, .tarjeta h3, .tarjeta__titulo2, .titulo-l, .lugar-actual__texto b, .ubicarme b, .preguntame__etq, .preguntame__guia h3,
.carta-multa__cabeza span, .texto-art .epigrafe {
  text-transform: none; letter-spacing: -.012em; font-weight: 700; font-optical-sizing: auto;
}
/* Cifras: de línea y tabulares, para que los montos se alineen como en una factura. */
.cifra b, .fila-art__num, .calc__no, .monto b, .multa__uma span, .recibo__fila b, .cuenta__total b, .plazo__precio, .carta-multa__cabeza strong,
.quiz__fin b, .perfil__cifras b, .linea__num, .carta-leyes__n, .isla__911 span, .pasos li::before { font-variant-numeric: lining-nums tabular-nums; }
/* Rótulos (antetítulos, marca, sellos): Montserrat en versal espaciada. */
.etiqueta, .marca-texto, .logo, .arranque small, .subisla__texto, .litigar__marca, .display { font-family: var(--rotulo); }
.logo, .arranque b { font-family: var(--display); text-transform: none; letter-spacing: .01em; }
.arranque b { font-size: 3rem; font-weight: 800; }
.arranque small { letter-spacing: .5em; font-weight: 600; font-size: .78rem; }

/* Títulos de sección: más grandes y con presencia; el antetítulo con filete y el subtítulo legible. */
.seccion__cabeza { margin: 26px 0 20px; }
.seccion__cabeza .marca-texto { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; letter-spacing: .22em; font-weight: 700; }
.seccion__cabeza .marca-texto::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .45; }
.seccion__titulo em { font-style: italic; font-weight: 600; color: var(--marca); }
.seccion__texto { max-width: 46ch; margin-top: 12px; font-size: 1.08rem; line-height: 1.5; color: var(--ink-600); text-wrap: pretty; }
.titulo-l { font-size: clamp(1.55rem, 6.4vw, 1.95rem); line-height: 1.05; margin-top: 36px; }
.titulo-l::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 12px; background: var(--oro); }
.panel h3 { font-size: 1.4rem; line-height: 1.08; }
.tarjeta h3 { font-size: clamp(1.9rem, 8.2vw, 2.8rem); line-height: 1.02; letter-spacing: -.02em; }
.hoja__cabeza h2 { font-size: 1.45rem; }
.portada h1 { font-size: clamp(2.8rem, 11vw, 5rem); letter-spacing: -.03em; line-height: .95; }
.portada-hero h2 { font-size: clamp(1.8rem, 7.4vw, 2.6rem); line-height: 1.02; }
.portada-hero__sigla, .portada-ley__sigla { font-family: var(--clasica); font-weight: 700; letter-spacing: -.01em; }
.multa__inf { font-size: clamp(1.4rem, 5.4vw, 1.85rem); line-height: 1.12; }
.cuenta__total b, .multa__uma span { font-weight: 800; letter-spacing: -.03em; }

/* ——— Vial: el número de cada infracción grande, como numeral de código. ——— */
.calc__fila { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px; }
.calc__fila .calc__no { width: 52px; height: 52px; border-radius: 16px; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }

/* ——— «Ver más»: todo lo secundario plegado (fuentes, avisos, más escenarios, otros estados). ——— */
.ver-mas { margin-top: 14px; }
.ver-mas > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--ink-50); cursor: pointer; font-weight: 700; color: var(--ink-800); }
.ver-mas > summary::-webkit-details-marker { display: none; }
.ver-mas > summary > span { flex: 1; display: inline-flex; align-items: center; gap: 8px; }
.ver-mas > summary > span svg { width: 17px; height: 17px; }
.ver-mas > summary small { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); font-family: var(--rotulo); }
.ver-mas > summary > svg { width: 18px; height: 18px; transition: transform .35s var(--suave); }
.ver-mas[open] > summary > svg { transform: rotate(180deg); }
.ver-mas[open] > :not(summary) { animation: aparece .4s var(--suave); }
@keyframes aparece { from { opacity: 0; transform: translateY(-6px); } }
.pie { gap: 10px; }
.pie__mas { margin-top: 0; display: grid; gap: 8px; }
.pie__mas > summary { padding: 12px 14px; font-size: .86rem; }
.pie__mas > span { padding: 0 4px; line-height: 1.55; }
.otros-estados .filtros__chips { padding: 12px 2px 4px; flex-wrap: wrap; }

/* ——— Escenarios: tarjetas con su peor desenlace y la gravedad en cinco barras. ——— */
.escenarios { display: grid; gap: 10px; }
@media (min-width: 720px) { .escenarios { grid-template-columns: 1fr 1fr; } }
.escenario { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px 16px; border-radius: 20px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); text-align: left; transition: box-shadow .25s, transform .25s var(--suave); }
.escenario:active { transform: scale(.985); }
.escenario:hover { box-shadow: inset 0 0 0 1px var(--ink-400); }
.escenario__icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in oklab, var(--senal) 12%, transparent); color: var(--senal); }
.escenario__icono svg { width: 22px; height: 22px; }
.escenario__cuerpo b { display: block; font-family: var(--display); font-size: 1.12rem; line-height: 1.15; letter-spacing: -.01em; }
.escenario__cuerpo small { display: block; margin-top: 4px; color: var(--ink-600); font-size: .86rem; line-height: 1.4; }
.gravedad { display: inline-flex; align-items: end; gap: 3px; height: 22px; }
.gravedad i { width: 4px; border-radius: 2px; background: var(--ink-150); }
.gravedad i:nth-child(1) { height: 30%; } .gravedad i:nth-child(2) { height: 45%; } .gravedad i:nth-child(3) { height: 60%; } .gravedad i:nth-child(4) { height: 80%; } .gravedad i:nth-child(5) { height: 100%; }
.gravedad i[data-si] { background: var(--senal); }
.peor { padding: 18px 18px 14px; border-radius: 20px; background: var(--senal-50); color: var(--ink-950); box-shadow: inset 4px 0 0 var(--senal); }
.peor__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.peor__rotulo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rotulo); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--senal); }
.peor__rotulo svg { width: 17px; height: 17px; }
.peor p { margin: 10px 0 8px; font-family: var(--libro); font-size: 1.12rem; line-height: 1.6; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.evita .paso-l { box-shadow: inset 3px 0 0 var(--senal); }
.guion { margin: 10px 0; padding: 14px 18px; border-radius: 16px; background: var(--ink-50); font-family: var(--libro); font-style: italic; font-size: 1.08rem; line-height: 1.6; }
.guion::before { content: "«"; color: var(--oro); font-weight: 700; } .guion::after { content: "»"; color: var(--oro); font-weight: 700; }

/* ——— Biblioteca: alas, volúmenes en estantes y lomos de piel con filetes dorados. ——— */
.estado-elige { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.estado-elige > .etiqueta { flex-basis: 100%; }
.estado-elige__actual { font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.015em; margin-right: auto; }
.ala { margin: 34px 0 10px; }
.ala__cabeza { margin-bottom: 14px; }
.ala__cabeza .marca-texto { letter-spacing: .22em; }
.ala__cabeza h3 { margin: 6px 0 0; font-family: var(--display); font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.ala__cabeza h3 em { font-style: italic; font-weight: 600; color: var(--marca); }
.ala__cabeza p { margin: 8px 0 0; color: var(--ink-600); font-size: 1rem; }
.ala__temas { margin: 4px 0 6px; }
.estante { margin: 18px 0 4px; }
.estante__cabeza { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.estante__vol { font-family: var(--clasica); font-style: italic; font-weight: 600; font-size: 1.05rem; color: var(--oro); }
:root[data-tema="claro"] .estante__vol { color: #8a6d1f; }
@media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) .estante__vol { color: #8a6d1f; } }
.estante__cabeza h4 { margin: 0; font-family: var(--clasica); font-size: 1.45rem; font-weight: 700; line-height: 1; }
.estante__cabeza small { margin-left: auto; font-family: var(--rotulo); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500); }
/* El estante: libros de pie sobre una repisa, se deslizan de lado. */
.estante__libros { position: relative; display: flex; align-items: flex-end; gap: 5px; overflow-x: auto; padding: 6px 16px 16px; margin: 0 -16px; scrollbar-width: none; scroll-snap-type: x proximity; }
.estante__libros::-webkit-scrollbar { display: none; }
.estante__libros::after { content: ""; position: sticky; flex: none; width: 1px; }
.estante { background: linear-gradient(transparent calc(100% - 10px), color-mix(in oklab, var(--ink-950) 10%, transparent) calc(100% - 10px), transparent calc(100% - 4px)); }
.lomo { position: relative; flex: none; scroll-snap-align: start; width: var(--ancho); height: var(--alto); display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 14px 0 12px; border-radius: 3px 3px 2px 2px; color: #f3e6c4;
  background: linear-gradient(90deg, rgb(0 0 0 / .38), rgb(255 255 255 / .1) 18%, rgb(255 255 255 / .02) 40%, rgb(0 0 0 / .12) 78%, rgb(0 0 0 / .42)), color-mix(in oklab, var(--c) 70%, #120c08);
  box-shadow: 0 14px 18px -12px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(0 0 0 / .25); transition: transform .35s var(--suave), box-shadow .35s; }
.lomo::before, .lomo::after { content: ""; position: absolute; left: 4px; right: 4px; height: 6px; border-block: 1px solid rgb(233 196 106 / .7); }
.lomo::before { top: 34px; } .lomo::after { bottom: 34px; }
.lomo:hover, .lomo:focus-visible { transform: translateY(-8px); box-shadow: 0 22px 22px -14px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(0 0 0 / .25); }
.lomo:active { transform: translateY(-4px) scale(.98); }
.lomo__sigla { font-family: var(--clasica); font-weight: 700; font-size: .78rem; letter-spacing: .04em; color: var(--oro-fuerte); max-width: calc(var(--ancho) - 6px); overflow: hidden; text-overflow: clip; white-space: nowrap; }
.lomo__titulo { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; max-height: calc(var(--alto) - 100px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--clasica); font-weight: 600; font-size: 1.02rem; letter-spacing: .02em; line-height: 1; }
.lomo__pie { font-family: var(--rotulo); font-size: .54rem; font-weight: 700; letter-spacing: .08em; color: rgb(243 230 196 / .72); }
/* Dentro de una ley: cada título se presenta como una portadilla de libro. */
.titulo-bloque__cabeza h3.display { font-family: var(--clasica); text-transform: none; font-weight: 700; font-size: clamp(1.55rem, 6.4vw, 2.1rem); letter-spacing: 0; line-height: 1.05; }
.titulo-bloque__cabeza .marca-texto { letter-spacing: .18em; }
.titulo-bloque__cabeza p { font-family: var(--libro); font-style: italic; font-size: .98rem; }
.capitulo__nombre { font-family: var(--clasica); font-size: 1.12rem; font-weight: 700; }
.capitulo__nombre span { font-family: var(--rotulo); letter-spacing: .16em; }
.portada-ley__titulo { font-family: var(--clasica); font-size: 1.12rem; font-weight: 700; }

/* ——— Sensor de conversación en Pregúntame. ——— */
.sensor { display: grid; gap: 8px; margin-bottom: 10px; }
.sensor__calma { display: flex; gap: 8px; align-items: center; margin: 0 !important; font-weight: 700; font-size: .96rem; }
.sensor__calma svg { width: 18px; height: 18px; flex: none; color: var(--senal); }
.sensor__senal { padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 3px 0 0 #c81e2c; }
.sensor__senal--tu { box-shadow: inset 3px 0 0 #b8741a; }
.sensor__senal[data-g="2"], .sensor__senal[data-g="3"] { box-shadow: inset 3px 0 0 #b8741a; }
.sensor__marca { display: inline-flex; align-items: center; gap: 6px; font-family: var(--rotulo); font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #c81e2c; }
.sensor__senal--tu .sensor__marca { color: #9a5e10; }
.sensor__marca svg { width: 14px; height: 14px; }
.sensor__senal b { display: block; margin-top: 4px; font-family: var(--display); font-size: 1.08rem; line-height: 1.2; }
.sensor__senal p { margin: 4px 0 6px !important; font-size: .96rem !important; line-height: 1.5; }
.sensor__evidencia { display: block; font-size: .76rem; color: #6b6b6b; font-style: italic; }
.litigar__peor { margin: 0 0 10px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 3px 0 0 #c81e2c; }
.litigar__peor .peor__rotulo { color: #c81e2c; }
.litigar__peor > p { margin: 6px 0 !important; font-family: var(--libro); font-size: 1rem; line-height: 1.55; }
.litigar__pasos { margin: 4px 0 6px; padding-left: 20px; display: grid; gap: 4px; font-size: .96rem; line-height: 1.45; }
.litigar__pasos li::marker { font-family: var(--display); font-weight: 800; color: #c81e2c; }

/* ——— Pregúntame: una ventana que nace de la isla (su extensión), con fondo azul tenue. ——— */
.litigar { background: linear-gradient(transparent 35%, rgb(0 0 0 / .28)); padding: 0 8px calc(max(6px, env(safe-area-inset-bottom) - 16px) + 74px); }
.litigar__panel { --azul: #e6effc; --azul-2: #d5e4fa; --tinta-az: #0d2340; width: min(480px, 100%); max-height: min(72dvh, 640px); border-radius: 30px 30px 26px 26px; background: linear-gradient(180deg, var(--azul) 0%, #f3f7fe 100%); color: var(--tinta-az);
  box-shadow: 0 30px 60px -26px rgb(13 35 64 / .55), inset 0 0 0 1px rgb(13 35 64 / .08); transform-origin: 82% 100%; animation: nace-isla .55s cubic-bezier(.2, .9, .25, 1.08); }
@keyframes nace-isla { from { opacity: 0; transform: translateY(46px) scale(.42, .18); border-radius: 999px; } 60% { opacity: 1; } }
.litigar__panel::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 64px; height: 10px; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: #f3f7fe; box-shadow: 0 1px 0 rgb(13 35 64 / .06); }
.litigar__panel { position: relative; }
.litigar__marca { color: var(--tinta-az); font-family: var(--display); text-transform: none; letter-spacing: -.01em; font-size: 1.32rem; font-weight: 800; }
.litigar__marca svg { color: #2c6fd1; filter: none; width: 20px; height: 20px; }
.litigar__cerrar, .litigar__voz { background: rgb(255 255 255 / .75); color: var(--tinta-az); }
.litigar__msj--app { background: rgb(255 255 255 / .82); color: var(--tinta-az); box-shadow: 0 1px 0 rgb(13 35 64 / .05); }
.litigar__msj--yo { background: #0d2340; color: #fff; }
.litigar__accion { background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1px rgb(13 35 64 / .1); color: var(--tinta-az); }
.litigar__accion svg { color: #2c6fd1; }
.litigar__accion--marca { background: #0d2340; color: #fff; }
.litigar__accion--marca svg { color: #9cc2ff; }
.litigar__caja { margin: 0 10px; background: #fff; box-shadow: 0 6px 16px -10px rgb(13 35 64 / .35), inset 0 0 0 1px rgb(13 35 64 / .08); }
.litigar__caja textarea { color: var(--tinta-az); }
.litigar__enviar { background: #2c6fd1; color: #fff; }
.litigar__sigue button, .litigar__tels a { background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px rgb(13 35 64 / .1); color: var(--tinta-az); }
.litigar__nota { color: rgb(13 35 64 / .6); }
.litigar__cita small { color: #1d4f9e !important; }
:root[data-tema="oscuro"] .litigar__panel { --azul: #0e1d33; --tinta-az: #e8f0fc; background: linear-gradient(180deg, #0f1f38 0%, #0a1526 100%); color: var(--tinta-az); box-shadow: 0 30px 60px -26px #000, inset 0 0 0 1px rgb(156 194 255 / .14); }
:root[data-tema="oscuro"] .litigar__panel::after { background: #0a1526; }
:root[data-tema="oscuro"] :is(.litigar__msj--app, .litigar__accion, .litigar__cerrar, .litigar__voz, .litigar__caja, .litigar__sigue button, .litigar__tels a, .litigar__ops button, .sensor__senal, .litigar__peor) { background: rgb(255 255 255 / .07); color: var(--tinta-az); }
:root[data-tema="oscuro"] .litigar__msj--yo, :root[data-tema="oscuro"] .litigar__accion--marca { background: #9cc2ff; color: #0a1526; }
:root[data-tema="oscuro"] .litigar__accion svg, :root[data-tema="oscuro"] .litigar__marca svg { color: #9cc2ff; }
:root[data-tema="oscuro"] .litigar__caja textarea { color: var(--tinta-az); }
:root[data-tema="oscuro"] .litigar__cita small { color: #9cc2ff !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .litigar__panel { --azul: #0e1d33; --tinta-az: #e8f0fc; background: linear-gradient(180deg, #0f1f38 0%, #0a1526 100%); color: var(--tinta-az); box-shadow: 0 30px 60px -26px #000, inset 0 0 0 1px rgb(156 194 255 / .14); }
  :root:not([data-tema="claro"]) .litigar__panel::after { background: #0a1526; }
  :root:not([data-tema="claro"]) :is(.litigar__msj--app, .litigar__accion, .litigar__cerrar, .litigar__voz, .litigar__caja, .litigar__sigue button, .litigar__tels a, .litigar__ops button, .sensor__senal, .litigar__peor) { background: rgb(255 255 255 / .07); color: var(--tinta-az); }
  :root:not([data-tema="claro"]) .litigar__msj--yo, :root:not([data-tema="claro"]) .litigar__accion--marca { background: #9cc2ff; color: #0a1526; }
  :root:not([data-tema="claro"]) .litigar__accion svg, :root:not([data-tema="claro"]) .litigar__marca svg { color: #9cc2ff; }
  :root:not([data-tema="claro"]) .litigar__caja textarea { color: var(--tinta-az); }
  :root:not([data-tema="claro"]) .litigar__cita small { color: #9cc2ff !important; }
}
:root[data-movimiento="reducido"] .litigar__panel { animation: none; }
/* Mientras Pregúntame está abierto, la isla queda debajo como su base. */
:root[data-litigar="abierto"] .isla { z-index: 71; }
:root[data-litigar="abierto"] .isla > :not(.subisla) { opacity: .35; }

/* ——— En todas las secciones, como en los reels: al bajar se desvanecen la barra y la isla; solo asoma «Pregúntame». ——— */
.isla[data-escondida="true"] { transform: translateX(-50%); opacity: 1; filter: none; background-color: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.isla[data-escondida="true"] > :not(.subisla) { opacity: 0; transform: translateY(26px); pointer-events: none; }
.isla[data-escondida="true"] .subisla { bottom: 10px; right: 6px; pointer-events: auto; animation: vaiven 2.8s var(--suave) infinite; }
.barra[data-escondida="true"] { opacity: 0; transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .6s cubic-bezier(.45, 0, .2, 1); }
.barra { transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .6s cubic-bezier(.45, 0, .2, 1); }
/* Lomos: el nombre completo en dos renglones si hace falta; la sigla siempre cabe. */
.lomo__titulo { white-space: normal; text-overflow: clip; max-inline-size: calc(var(--alto) - 96px); max-block-size: calc(var(--ancho) - 10px); font-size: .9rem; line-height: 1.04; text-align: center; overflow: hidden; }
.lomo__sigla { font-size: .64rem; letter-spacing: 0; }
.seccion__texto, .ala__cabeza p { text-align: left; hyphens: manual; }
/* Títulos de hoja en dos renglones (no se cortan) y nota legible en Pregúntame oscuro. */
.hoja__cabeza h2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.12; }
:root[data-tema="oscuro"] .litigar__nota { color: rgb(232 240 252 / .6); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .litigar__nota { color: rgb(232 240 252 / .6); } }
.librito { font-family: var(--rotulo); font-weight: 700; letter-spacing: .08em; }
/* Lectura en blanco y negro: el rojo solo vive en las barras de gravedad (sin fondos rojos que cansen la vista). */
.escenario__icono { background: var(--ink-50); color: var(--ink-950); }
.peor { background: none; padding: 4px 0 4px 18px; border-radius: 0; box-shadow: inset 2px 0 0 var(--ink-950); }
.peor__rotulo, .litigar__peor .peor__rotulo, .sensor__marca, .sensor__senal--tu .sensor__marca { color: var(--ink-950); }
.evita .paso-l { box-shadow: none; }
.sensor__senal, .sensor__senal--tu, .sensor__senal[data-g], .litigar__peor { box-shadow: inset 2px 0 0 currentColor; }
.sensor__calma svg, .litigar__pasos li::marker { color: currentColor; }
.litigar__peor .peor__rotulo, .sensor__marca { color: inherit; }

/* ——— Vial: la calculadora es la protagonista (tarjeta en tinta, buscador grande y los tres pasos). ——— */
.calc--foco { padding: 22px 18px 18px; border-radius: 30px; background: var(--ink-950); color: var(--papel); box-shadow: var(--sombra-lg); }
.calc__pasos { display: flex; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.calc__pasos li { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 6px 12px 6px 6px; border-radius: 999px; background: color-mix(in oklab, var(--papel) 10%, transparent); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.calc__pasos b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--papel); color: var(--ink-950); font-family: var(--display); font-size: .82rem; }
.calc__titulo { display: block; margin: 0 2px 12px; font-family: var(--display); font-size: clamp(1.7rem, 7.4vw, 2.2rem); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; }
.calc__titulo em { font-style: italic; font-weight: 600; }
.calc__buscador { min-height: 62px; padding: 0 18px; border-radius: 20px; background: var(--papel); color: var(--ink-950); border: 0; box-shadow: 0 10px 26px -14px rgb(0 0 0 / .6); }
.calc__buscador svg { width: 24px; height: 24px; color: var(--ink-950); }
.calc__buscador input { font-size: 1.12rem; font-weight: 600; color: var(--ink-950); }
.calc__buscador input::placeholder { color: var(--ink-400); font-weight: 500; }
.calc__buscador:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, var(--papel) 55%, transparent), 0 10px 26px -14px rgb(0 0 0 / .6); }
.calc__lugar { display: flex; align-items: center; gap: 8px; width: 100%; margin: 12px 2px 4px; text-align: left; font-size: .8rem; line-height: 1.35; color: color-mix(in oklab, var(--papel) 72%, transparent); }
.calc__lugar svg { width: 15px; height: 15px; flex: none; }
.calc__lugar b { color: var(--papel); }
.calc__lugar small { margin-left: auto; padding-left: 8px; font-weight: 700; color: var(--papel); text-decoration: underline; text-underline-offset: 3px; }
.calc--foco .etiqueta { color: color-mix(in oklab, var(--papel) 60%, transparent); }
.calc--foco .calc__fila { background: color-mix(in oklab, var(--papel) 7%, transparent); color: var(--papel); }
.calc--foco .calc__fila:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--papel) 35%, transparent); }
.calc--foco .calc__fila .calc__no { background: var(--papel); color: var(--ink-950); }
.calc--foco .calc__fila b { background: color-mix(in oklab, var(--papel) 14%, transparent); color: var(--papel); }
.calc--foco .calc__lista { display: grid; gap: 8px; }
.calc--foco .centro { color: color-mix(in oklab, var(--papel) 65%, transparent) !important; }
.calc__pasos { flex-wrap: wrap; }
/* Entrada escalonada corta: las listas largas no dejan huecos en blanco mientras aparecen. */
.entra { animation-delay: calc(min(var(--i, 0), 5) * 30ms); }

/* ——— Pregúntame chiquita: una burbuja compacta que nace de la isla, en el azul de Derechos (tenue). Crece solo
   lo necesario con la conversación. ——— */
.litigar { padding-bottom: calc(max(6px, env(safe-area-inset-bottom) - 16px) + 70px); }
.litigar__panel { width: min(372px, calc(100% - 20px)); max-height: min(58dvh, 520px); border-radius: 26px 26px 22px 22px; background: linear-gradient(180deg, #e8f5fe 0%, #f5fbff 100%); --tinta-az: #0f1419; }
.litigar__panel::after { background: #f5fbff; }
.litigar__cabeza { padding: 10px 10px 2px 14px; }
.litigar__marca { font-size: 1.08rem; gap: 7px; }
.litigar__marca svg, .litigar__accion svg { color: #1d9bf0; }
.litigar__cerrar, .litigar__voz { width: 30px; height: 30px; }
.litigar__hilo { padding: 4px 12px 8px; gap: 8px; }
.litigar__msj { font-size: .98rem; padding: 9px 12px; border-radius: 16px; }
.litigar__msj p { font-size: .96rem; }
.litigar__msj--yo { background: #0f1419; }
.litigar__caja { margin: 0 8px; padding: 4px 4px 4px 12px; border-radius: 18px; }
.litigar__caja textarea { font-size: 1rem; }
.litigar__enviar { width: 34px; height: 34px; background: #1d9bf0; }
.litigar__mic { width: 34px; height: 34px; }
.litigar__nota { margin: 4px 14px 8px; font-size: .62rem; }
.litigar__cita small { color: #0c7abf !important; }
:root[data-tema="oscuro"] .litigar__panel { background: linear-gradient(180deg, #0c1c29 0%, #08121b 100%); --tinta-az: #e7f4fd; }
:root[data-tema="oscuro"] .litigar__panel::after { background: #08121b; }
:root[data-tema="oscuro"] .litigar__msj--yo, :root[data-tema="oscuro"] .litigar__accion--marca { background: #1d9bf0; color: #fff; }
:root[data-tema="oscuro"] .litigar__cita small, :root[data-tema="oscuro"] .litigar__accion svg, :root[data-tema="oscuro"] .litigar__marca svg { color: #6cc4f7 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .litigar__panel { background: linear-gradient(180deg, #0c1c29 0%, #08121b 100%); --tinta-az: #e7f4fd; }
  :root:not([data-tema="claro"]) .litigar__panel::after { background: #08121b; }
  :root:not([data-tema="claro"]) .litigar__msj--yo, :root:not([data-tema="claro"]) .litigar__accion--marca { background: #1d9bf0; color: #fff; }
  :root:not([data-tema="claro"]) .litigar__cita small, :root:not([data-tema="claro"]) .litigar__accion svg, :root:not([data-tema="claro"]) .litigar__marca svg { color: #6cc4f7 !important; }
}
/* Librito que se abre y se cierra en el riel del reel (botón «Pregunta»). */
.feed--inicio .tarjeta__lado svg.libro-anim { overflow: visible; }

/* 1.16.2 · Isla de arriba de los reels: secciones y «Pregúntame» en una sola pieza pegada al borde superior.
   Se recorre hacia arriba para esconderla; queda una lengüeta para bajarla. Al pasar de reel se van todas las islas. */
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__cabeza {
  grid-template-columns: 1fr; grid-template-areas: "libros" "isla" "asa"; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 10px 8px;
  background: color-mix(in oklab, var(--papel) 86%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border-radius: 0 0 30px 30px;
  box-shadow: 0 20px 36px -28px rgb(0 0 0 / .5), inset 0 -1px 0 color-mix(in oklab, var(--ink-950) 7%, transparent);
  touch-action: pan-x;
}
.feed--inicio .libritos { touch-action: pan-x; }
.feed__isla { grid-area: isla; display: flex; align-items: center; gap: 6px; min-width: 0; }
.feed__pregunta { flex: 1; min-width: 0; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 7px; border-radius: 999px; text-align: left;
  background: linear-gradient(180deg, #e8f5fe 0%, #d6ecfc 100%); color: #0f1419;
  box-shadow: inset 0 0 0 1px rgb(29 155 240 / .28), 0 10px 22px -16px rgb(29 155 240 / .9); transition: transform .2s var(--ios); }
.feed__pregunta:active { transform: scale(.98); }
.feed__pregunta-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: #1d9bf0; color: #fff; box-shadow: 0 4px 12px -4px rgb(29 155 240 / .8); }
.feed__pregunta-ic svg { width: 21px; height: 21px; overflow: visible; }
.feed__pregunta-txt { display: grid; min-width: 0; line-height: 1.15; }
.feed__pregunta-txt b { font-family: var(--sans); font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.feed__pregunta-txt small { font-size: .74rem; font-weight: 600; color: #536471; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed--inicio .feed__isla .feed__ajustes, .feed--inicio .feed__isla .feed__racha { width: 40px; height: 40px; flex: none; }
.feed--inicio .feed__isla .feed__racha { width: auto; padding: 0 11px; font-size: .88rem; }
.feed--inicio .feed__isla .feed__voz { background: rgb(29 155 240 / .14); color: #1d9bf0; }
.feed__asa { grid-area: asa; justify-self: center; width: 38px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--ink-950) 20%, transparent); }
:root[data-tema="oscuro"] .feed__pregunta { background: linear-gradient(180deg, #0f2638 0%, #0c1c29 100%); color: #e7f4fd; box-shadow: inset 0 0 0 1px rgb(29 155 240 / .35), 0 10px 22px -16px rgb(29 155 240 / .6); }
:root[data-tema="oscuro"] .feed__pregunta-txt small { color: #8b98a5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .feed__pregunta { background: linear-gradient(180deg, #0f2638 0%, #0c1c29 100%); color: #e7f4fd; box-shadow: inset 0 0 0 1px rgb(29 155 240 / .35), 0 10px 22px -16px rgb(29 155 240 / .6); }
  :root:not([data-tema="claro"]) .feed__pregunta-txt small { color: #8b98a5; }
}
@media (max-width: 380px) {
  .feed--inicio .feed__isla .feed__racha, .feed--inicio .feed__isla .feed__tema { display: none; }
  .feed__pregunta { height: 48px; }
  .feed__pregunta-ic { width: 34px; height: 34px; }
}
/* Escondida: sube con el dedo y deja la lengüeta pegada al borde. */
:root[data-cabeza-oculta] .feed--inicio .feed__cabeza { opacity: 0; transform: translateY(calc(-100% - 12px)); pointer-events: none; }
.feed__lengueta { position: absolute; z-index: 3; top: 0; left: 50%; display: flex; align-items: center; gap: 6px; padding: max(6px, env(safe-area-inset-top)) 14px 7px 12px; border-radius: 0 0 18px 18px;
  background: color-mix(in oklab, var(--papel) 86%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 10px 24px -18px rgb(0 0 0 / .55);
  color: var(--ink-950); font-family: var(--rotulo); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transform: translate(-50%, -120%); transition: transform .6s cubic-bezier(.2, .9, .25, 1); }
.feed__lengueta svg { width: 16px; height: 16px; }
.feed__lengueta .libro-anim { color: #1d9bf0; width: 18px; height: 18px; overflow: visible; }
:root[data-cabeza-oculta]:not([data-inmerso]) .feed__lengueta { transform: translate(-50%, 0); }
/* El reel empieza debajo de la isla; si la escondes, gana ese espacio. */
.feed--inicio .tarjeta { padding-top: calc(var(--alto-cabeza, 172px) + 10px); transition: padding-top .6s cubic-bezier(.2, .9, .25, 1); }
:root[data-cabeza-oculta] .feed--inicio .tarjeta { padding-top: calc(max(12px, env(safe-area-inset-top)) + 40px); }
/* En los reels «Pregúntame» vive arriba: la subisla de abajo sobra. */
:root[data-vista="reels"] .isla .subisla { display: none; }
/* Pregúntame que nace de la isla de arriba. */
.litigar.litigar--arriba { align-items: flex-start; padding-bottom: 0; background: linear-gradient(rgb(0 0 0 / .26), transparent 70%); }
.litigar--arriba .litigar__panel { transform-origin: 50% 0; animation-name: nace-arriba; max-height: min(62dvh, 540px); }
@keyframes nace-arriba { from { opacity: 0; transform: translateY(-30px) scale(.55, .14); border-radius: 999px; } 60% { opacity: 1; } }
/* Tarjeta compacta cuando el texto no cabe (la app lo decide por tarjeta). */
/* Pantallas bajas: el reel llega hasta la isla de abajo (sin asomar el siguiente) para que quepa el texto. */
@media (max-height: 700px) {
  .feed--inicio .tarjeta { height: 100%; }
  .feed--inicio .feed__pista { padding-bottom: 84px; }
  :root:is([data-tema], :not([data-tema])) .feed--inicio .feed__cabeza { gap: 8px; padding-bottom: 6px; }
}
.linea__lugar { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: color-mix(in oklab, var(--ink-950) 8%, transparent); font-style: normal; font-family: var(--rotulo); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
/* Reels al pasar de reel: las secciones se desvanecen y «Pregúntame» sube a su lugar y se queda fija; al regresar
   (desliz hacia abajo) baja y vuelven las secciones. Si la escondiste con el dedo, queda solo la lengüeta. */
.feed--inicio .libritos { transition: opacity .5s cubic-bezier(.45, 0, .2, 1); }
:root[data-vista="reels"][data-inmerso] .feed--inicio .feed__cabeza { opacity: 1; transform: translateY(calc(-1 * var(--sube, 66px))); pointer-events: auto; }
:root[data-vista="reels"][data-inmerso] .feed--inicio .libritos { opacity: 0; pointer-events: none; }
:root[data-vista="reels"][data-cabeza-oculta] .feed--inicio .feed__cabeza { opacity: 0; transform: translateY(calc(-100% - 12px)); pointer-events: none; }
:root[data-cabeza-oculta] .feed__lengueta { transform: translate(-50%, 0); }

/* 1.17 · Juegos en los reels: completar, ¿qué ley lo dice? y unir parejas. */
.tarjeta__juego { font-size: clamp(1.02rem, 4.3vw, 1.2rem) !important; line-height: 1.55; margin-bottom: 12px; }
.hueco { display: inline-block; min-width: 4.5em; padding: 0 6px; border-bottom: 2px solid var(--seccion, var(--marca)); color: var(--seccion, var(--marca)); font-weight: 700; text-align: center; transition: color .3s, background-color .3s; }
.hueco[data-lleno] { border-radius: 6px; background: color-mix(in oklab, var(--seccion, var(--marca)) 14%, transparent); }
.unir { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; margin-top: 4px; }
.unir__col { display: grid; gap: 8px; align-content: start; }
.tarjeta .unir .opcion { padding: 10px 12px; border-radius: 14px; font-size: .84rem; line-height: 1.3; font-weight: 600; text-align: left; min-height: 64px; }
.tarjeta .unir__b { font-family: var(--rotulo); font-size: .76rem !important; letter-spacing: .02em; justify-content: center; text-align: center !important; }
.tarjeta .unir .opcion[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--seccion, var(--marca)); transform: scale(.98); }
.tarjeta .unir .opcion[data-estado="mal"] { animation: tiembla .4s; }
@keyframes tiembla { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.opcion { position: relative; }
.xp-flota { position: absolute; right: 12px; top: -6px; font-family: var(--rotulo); font-weight: 800; font-size: .9rem; color: #1d9bf0; pointer-events: none; animation: xp-sube 1.2s cubic-bezier(.2, .9, .25, 1) forwards; }
@keyframes xp-sube { from { opacity: 0; transform: translateY(6px) scale(.8); } 25% { opacity: 1; transform: translateY(-8px) scale(1.1); } to { opacity: 0; transform: translateY(-34px); } }
:root[data-movimiento="reducido"] .xp-flota, :root[data-movimiento="reducido"] .tarjeta .unir .opcion[data-estado="mal"] { animation: none; }
/* Respuestas de los juegos: borde de color (verde acierto, rojo error) sin fondos que cansen la vista. */
.feed--inicio .tarjeta .opcion[data-estado="ok"] { background: color-mix(in oklab, #12a36b 14%, var(--sup, transparent)); box-shadow: inset 0 0 0 2px #12a36b; color: var(--tx); }
.feed--inicio .tarjeta .opcion[data-estado="mal"] { background: var(--sup, transparent); box-shadow: inset 0 0 0 2px #e0364a; color: var(--tx); }
.feed--inicio .tarjeta .opcion[data-estado="ok"]::after { content: "✓"; margin-left: auto; font-weight: 800; color: #12a36b; }
.feed--inicio .tarjeta .opcion[data-estado="mal"]::after { content: "✕"; margin-left: auto; font-weight: 800; color: #e0364a; }
.feed--inicio .tarjeta .unir .opcion[data-estado]::after { display: none; }
.tarjeta--unir .tarjeta__cita > span { display: block; text-align: left; }
.tarjeta--unir .tarjeta__cita > span > small { display: block; margin-top: 2px; font-family: var(--sans); font-weight: 500; font-size: .78rem; opacity: .75; letter-spacing: 0; }
.tarjeta--unir .tarjeta__revela { display: grid; gap: 8px; }
/* Juegos compactos cuando la tarjeta no alcanza (pantallas bajas). */
.unir[hidden] { display: none; }
/* Reels a lo alto: el siguiente asoma la mitad, el título arriba y el texto completo usa todo el alto
   (solo se recorta si de verdad no cabe; entonces aparece «Ver más»). */
.feed--inicio .feed__pista { padding-bottom: 84px; }
.feed--inicio .tarjeta { height: 100%; align-items: start; }
.feed--inicio .tarjeta__cuerpo { align-self: stretch; }
.feed--inicio .tarjeta__dentro { margin-block: 0 auto; padding-top: 4px; }
.feed--inicio .tarjeta__lado { align-self: end; }
.feed--inicio .tarjeta__texto--recorte { display: block; -webkit-line-clamp: unset; overflow: visible; }
.feed--inicio .tarjeta__mas[hidden] { display: none; }

/* 1.17 · Perfil como panel: nivel, cifras, tiempo por sección. */
.perfil-tarjeta { --tarjeta: var(--papel); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 10px 10px 12px; border-radius: 30px; background: var(--tarjeta); box-shadow: inset 0 0 0 1px var(--ink-100), 0 22px 40px -28px rgb(0 0 0 / .45); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .perfil-tarjeta { --tarjeta: #1b1b1d; } }
:root[data-tema="oscuro"] .perfil-tarjeta { --tarjeta: #1b1b1d; }
.perfil-tarjeta__portada { position: relative; height: 112px; border-radius: 22px; background: radial-gradient(60% 130% at 16% 18%, #12b886, transparent 70%), radial-gradient(50% 130% at 74% 4%, #f59f00, transparent 70%), radial-gradient(60% 140% at 62% 112%, #e03131, transparent 72%), radial-gradient(42% 110% at 104% 86%, #1971c2, transparent 72%), #0b3d33; }
.perfil-tarjeta__nivel { position: absolute; right: 8px; bottom: -14px; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--tarjeta); color: var(--ink-950); font-family: var(--rotulo); font-size: .8rem; font-weight: 700; box-shadow: 0 6px 16px -8px rgb(0 0 0 / .5); }
.perfil-tarjeta__nivel svg { width: 16px; height: 16px; color: #f5b301; }
.perfil-tarjeta__avatar { position: absolute; left: 22px; top: 74px; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(var(--marca) var(--avance), var(--tarjeta) 0); }
.perfil-tarjeta__avatar > span { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: color-mix(in oklab, var(--marca) 18%, var(--tarjeta)); color: var(--marca); font-family: var(--rotulo); font-size: 1.7rem; font-weight: 800; }
.perfil-tarjeta__avatar svg { width: 28px; height: 28px; stroke-width: 1.6; }
.perfil-tarjeta__quien { display: flex; align-items: center; gap: 10px; margin-top: 34px; padding: 0 12px; }
.perfil-tarjeta__quien > div { flex: 1; min-width: 0; }
.perfil-tarjeta .perfil__nombre { padding: 0; border: 0; background: none; color: var(--ink-950); font-family: var(--rotulo); font-size: 1.2rem; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; }
.perfil-tarjeta .perfil__nombre::placeholder { color: var(--ink-500); }
.perfil-tarjeta__quien small { display: block; color: var(--ink-500); font-size: .84rem; }
.perfil-tarjeta__guardar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-950); box-shadow: inset 0 0 0 1px var(--ink-150); }
.perfil-tarjeta__guardar svg { width: 20px; height: 20px; stroke-width: 1.7; }
.perfil-tarjeta__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 12px; }
.perfil-tarjeta__cifras > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.perfil-tarjeta__cifras svg { width: 19px; height: 19px; }
.perfil-tarjeta__cifras > div:nth-child(1) svg { color: #f5b301; }
.perfil-tarjeta__cifras > div:nth-child(2) svg { color: #f76707; }
.perfil-tarjeta__cifras > div:nth-child(3) svg { color: #9775fa; }
.perfil-tarjeta__cifras b { white-space: nowrap; font-size: .92rem; font-weight: 700; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.perfil-tarjeta__cifras span { grid-column: 1 / -1; margin-top: 2px; color: var(--ink-500); font-size: .76rem; line-height: 1.2; text-align: left; white-space: nowrap; }
.perfil-tarjeta__accion { min-height: 52px; border-radius: 20px; background: linear-gradient(to bottom, #fff, #f3f3f3); color: #111; font-family: var(--rotulo); font-size: .95rem; font-weight: 700; box-shadow: inset 0 0 0 1px var(--ink-150); transition: transform .15s var(--ios); }
.perfil-tarjeta__accion:active { transform: scale(.98); }
.perfil-busca { margin: 14px 0 10px; }
.perfil-grupos { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--ink-150); overflow: clip; }
.perfil-grupo { scroll-margin-top: 8px; border-top: 1px solid var(--ink-100); }
.perfil-grupo:first-child { border-top: 0; }
.perfil-grupo[hidden] { display: none; }
.perfil-grupo > summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.perfil-grupo > summary::-webkit-details-marker { display: none; }
.perfil-grupo > summary > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ink-100); color: var(--ink-950); }
.perfil-grupo > summary svg { width: 20px; height: 20px; stroke-width: 1.7; }
.perfil-grupo > summary > span:nth-child(2) { display: grid; min-width: 0; }
.perfil-grupo > summary b { font-size: .98rem; line-height: 1.25; }
.perfil-grupo > summary small { color: var(--ink-500); font-size: .8rem; line-height: 1.25; }
.perfil-grupo > summary > svg { width: 18px; height: 18px; color: var(--ink-500); transition: transform .2s var(--ios); }
.perfil-grupo[open] > summary > svg { transform: rotate(180deg); }
.perfil-grupo__cuerpo { padding: 0 14px 14px; min-width: 0; }
.perfil-grupo__cuerpo > [data-fuera] { display: none !important; }
.perfil-grupo__cuerpo > .ajuste:last-child { border-bottom: 0; }
.perfil-grupo__cuerpo > .ayuda-sec__sub { margin: 16px 0 8px; }
.perfil-grupo__cuerpo > .cifras-panel { margin-top: 0; }
.perfil-grupo__cuerpo > .soporte-ingo { margin: 0; }
.perfil-nada { margin: 12px 4px; color: var(--ink-600); }
@media (max-width: 360px) { .cuenta, .respaldo .respaldo__botones { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .perfil-tarjeta__accion { background: linear-gradient(to bottom, #5aa9f7, #2f7fe6); color: #fff; box-shadow: none; } }
:root[data-tema="oscuro"] .perfil-tarjeta__accion { background: linear-gradient(to bottom, #5aa9f7, #2f7fe6); color: #fff; box-shadow: none; }
.menu-derechos { display: grid; gap: 8px; }
.menu-derechos .ayuda-sec__sub { margin: 12px 0 0; }
.menu-derechos .ayuda-sec__sub:first-child { margin-top: 0; }
.menu-lista { display: grid; }
.menu-fila { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 2px; color: var(--ink-950); text-align: left; -webkit-tap-highlight-color: transparent; }
.menu-fila:active { opacity: .6; }
.menu-fila > svg:first-child, .menu-fila.tema-rapido > svg { flex: none; width: 24px; height: 24px; stroke-width: 1.6; }
.menu-fila > span { flex: 1; min-width: 0; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.menu-fila > small { flex: none; max-width: 40%; overflow: hidden; color: var(--ink-500); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.menu-fila > svg:last-child:not(:first-child) { flex: none; width: 18px; height: 18px; color: var(--ink-400); }
.menu-fila.tema-rapido > svg:last-of-type { width: 24px; height: 24px; color: inherit; }
.menu-vacio { margin: 8px 0; color: var(--ink-600); }
.menu-borrar { margin-top: 12px; width: 100%; }
.der-busca { display: flex; align-items: center; gap: 10px; min-height: 52px; margin: 10px 0 18px; padding: 0 6px 0 16px; border-radius: 18px; background: var(--papel); box-shadow: inset 0 0 0 1.5px var(--ink-200), 0 8px 18px -14px rgb(0 0 0 / .5); }
.der-busca:focus-within { box-shadow: inset 0 0 0 2px var(--marca), 0 0 0 4px var(--marca-50); }
.der-busca > svg { flex: none; width: 20px; height: 20px; color: var(--ink-500); }
.der-busca input { flex: 1; min-width: 0; min-height: 48px; border: 0; background: none; color: var(--ink-950); font: inherit; font-size: 1rem; outline: 0; }
.der-busca input::placeholder { color: var(--ink-500); }
.der-busca input::-webkit-search-cancel-button { display: none; }
.der-busca button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-500); }
.der-busca button[hidden] { display: none; }
.der-busca button svg { width: 18px; height: 18px; }
/* Perfil con más vida: portada que se mueve despacio, avance que se llena y secciones con color. */
@property --avance { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@keyframes perfil-aurora { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }
@keyframes perfil-llena { from { --avance: 0%; } }
@keyframes perfil-sube { from { opacity: 0; transform: translateY(10px); } }
@keyframes perfil-pop { from { opacity: 0; transform: scale(.7); } 70% { transform: scale(1.06); } }
@keyframes perfil-llama { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(-4deg); } }
.perfil-tarjeta__portada { background: linear-gradient(115deg, #00c896, #16a3ff 28%, #8b5cf6 52%, #ff4d6d 76%, #ffb020); background-size: 220% 220%; animation: perfil-aurora 14s ease-in-out infinite alternate; }
.perfil-tarjeta__portada + .perfil-tarjeta__avatar { z-index: 1; }
.perfil-tarjeta { overflow: visible; }
.perfil-tarjeta__nivel { animation: perfil-pop .5s var(--ios) .2s backwards; }
.perfil-tarjeta__avatar { background: conic-gradient(#00c896, #16a3ff var(--avance), var(--tarjeta) 0); animation: perfil-llena 1.1s var(--suave) .15s backwards; }
.perfil-tarjeta__guardar { color: #fff; background: #e0245e; box-shadow: none; transition: transform .15s var(--ios); }
.perfil-tarjeta__guardar:active { transform: scale(.9); }
.perfil-tarjeta__cifras > div { animation: perfil-sube .45s var(--ios) backwards; }
.perfil-tarjeta__cifras > div:nth-child(1) { animation-delay: .12s; }
.perfil-tarjeta__cifras > div:nth-child(2) { animation-delay: .2s; }
.perfil-tarjeta__cifras > div:nth-child(3) { animation-delay: .28s; }
.perfil-tarjeta__cifras > div:nth-child(1) svg { color: #16a3ff; }
.perfil-tarjeta__cifras > div:nth-child(2) svg { color: #ff6b00; animation: perfil-llama 1.8s ease-in-out infinite; }
.perfil-tarjeta__cifras > div:nth-child(3) svg { color: #8b5cf6; }
.perfil-tarjeta__accion, :root[data-tema="oscuro"] .perfil-tarjeta__accion { background: #1283e6; color: #fff; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .perfil-tarjeta__accion { background: #1283e6; box-shadow: none; } }
.perfil-grupo { --c: #16a3ff; animation: perfil-sube .42s var(--ios) backwards; }
.perfil-grupo:nth-child(1) { --c: #00a878; animation-delay: .1s; }
.perfil-grupo:nth-child(2) { --c: #1283e6; animation-delay: .14s; }
.perfil-grupo:nth-child(3) { --c: #8b5cf6; animation-delay: .18s; }
.perfil-grupo:nth-child(4) { --c: #e0389a; animation-delay: .22s; }
.perfil-grupo:nth-child(5) { --c: #f08c00; animation-delay: .26s; }
.perfil-grupo:nth-child(6) { --c: #0ca5a5; animation-delay: .3s; }
.perfil-grupo:nth-child(7) { --c: #e03131; animation-delay: .34s; }
.perfil-grupo:nth-child(8) { --c: #5c6ac4; animation-delay: .38s; }
.perfil-grupo > summary { transition: background-color .2s; }
.perfil-grupo > summary:active { background: color-mix(in oklab, var(--c) 10%, transparent); }
.perfil-grupo > summary > span:first-child { background: var(--c); color: #fff; transition: transform .2s var(--ios); }
.perfil-grupo > summary:active > span:first-child { transform: scale(.9); }
.perfil-grupo[open] > summary > svg { color: var(--c); }
.perfil-grupo[open] > .perfil-grupo__cuerpo { animation: perfil-sube .3s var(--ios); }
.cifras-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 6px; }
@media (min-width: 560px) { .cifras-panel { grid-template-columns: repeat(3, 1fr); } }
.cifras-panel > div { display: grid; gap: 2px; padding: 14px; border-radius: 20px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); }
.cifras-panel svg { width: 20px; height: 20px; color: #1d9bf0; margin-bottom: 4px; }
.cifras-panel b { font-family: var(--display); font-size: 1.55rem; font-weight: 800; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.cifras-panel span { font-size: .78rem; color: var(--ink-600); line-height: 1.3; }
.uso-barras { display: grid; gap: 10px; }
.uso-barra { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; font-size: .86rem; }
.uso-barra > span { font-weight: 700; }
.uso-barra > i { height: 10px; border-radius: 999px; background: var(--ink-100, rgb(0 0 0 / .06)); position: relative; overflow: hidden; }
.uso-barra > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--ink-950); }
.uso-barra > b { font-size: .78rem; color: var(--ink-600); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Soporte INGO: panel con la bola de INGO y una red de nodos que se comunican. */
.soporte-ingo { position: relative; overflow: hidden; display: grid; gap: 8px; margin: 26px 0 12px; padding: 0 20px 20px; border-radius: 28px; background: linear-gradient(160deg, #0d1b2a 0%, #050608 70%); color: #fff; box-shadow: 0 30px 60px -36px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .06); }
.soporte-ingo__red { width: calc(100% + 40px); margin: 0 -20px -6px; height: auto; display: block; }
.soporte-ingo__lineas path { fill: none; stroke: rgb(140 205 251 / .22); stroke-width: 1; }
.soporte-ingo__pulsos path { fill: none; stroke: #7cd3ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 140; animation: pulso-red 2.6s linear infinite; }
.soporte-ingo__pulsos path:nth-child(2) { animation-delay: .7s; } .soporte-ingo__pulsos path:nth-child(3) { animation-delay: 1.3s; } .soporte-ingo__pulsos path:nth-child(4) { animation-delay: 1.9s; }
@keyframes pulso-red { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }
.soporte-ingo__nodos circle { fill: #0d1b2a; stroke: #7cd3ff; stroke-width: 1.5; animation: nodo-late 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.soporte-ingo__nodos circle:nth-child(even) { animation-delay: 1.1s; }
@keyframes nodo-late { 50% { fill: #1d9bf0; transform: scale(1.25); } }
.soporte-ingo__halo { fill: rgb(29 155 240 / .18); animation: halo-ingo 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo-ingo { 50% { transform: scale(1.35); opacity: .4; } }
.soporte-ingo__bola { fill: url(#none); fill: #fff; filter: drop-shadow(0 0 10px #7cd3ff) drop-shadow(0 0 22px #1d9bf0); }
:root[data-movimiento="reducido"] .soporte-ingo * { animation: none !important; }
.soporte-ingo__marca { font-family: var(--rotulo); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7cd3ff; }
.soporte-ingo h3 { margin: 0; font-family: var(--display); font-size: 1.5rem; line-height: 1.1; color: #fff; }
.soporte-ingo p { margin: 0; font-size: .92rem; color: rgb(255 255 255 / .72); line-height: 1.45; }
.soporte-ingo__acciones { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.soporte-ingo__acciones .boton { flex: 1; min-width: 130px; justify-content: center; border-radius: 999px; }
.soporte-ingo__wa { background: #1d9bf0; color: #fff; }
.soporte-ingo__tel { background: rgb(255 255 255 / .1); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
/* Avisos legales y Acerca. */
.legales-lista { display: grid; margin: 4px 0 10px; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ink-150); }
.legales-lista button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; font-weight: 600; font-size: .95rem; border-top: 1px solid var(--ink-150); }
.legales-lista button:first-child { border-top: 0; }
.legales-lista svg { width: 18px; height: 18px; flex: none; }
.legales-lista svg:last-child { margin-left: auto; opacity: .45; }
.acerca { margin-top: 6px; }
.legal__resumen { font-family: var(--display); font-size: 1.2rem; line-height: 1.35; margin: 0 0 14px; }
.legal__sec { margin-top: 8px; }
.legal__sec p { text-align: justify; hyphens: auto; line-height: 1.6; margin: 10px 0 0; }
.legal__f { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.legal__f .chip svg { width: 14px; height: 14px; }
/* Reels largos: sección, etiqueta y título fijos arriba; el texto se desliza debajo y se desvanece al pasar. */
.feed--inicio .tarjeta__cuerpo { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.feed--inicio .tarjeta__dentro { display: flex; flex-direction: column; min-height: 0; max-height: 100%; margin-block: 0; }
.feed--inicio .tarjeta__tope { flex: none; }
.feed--inicio .tarjeta__lectura { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 14px; }
.feed--inicio .tarjeta__lectura::-webkit-scrollbar { display: none; }
.feed--inicio .tarjeta__mas { display: none; }
.feed--inicio .tarjeta__texto--recorte { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* Toque firme: pantalla limpia, solo el artículo. */
:root[data-vista="reels"] .feed--inicio .tarjeta__lado { transition: opacity .45s cubic-bezier(.45, 0, .2, 1), transform .5s cubic-bezier(.45, 0, .2, 1); }
:root[data-vista="reels"][data-limpio] .feed--inicio .feed__cabeza, :root[data-vista="reels"][data-limpio] .feed__lengueta { opacity: 0 !important; transform: translateY(calc(-100% - 12px)) !important; pointer-events: none !important; }
:root[data-vista="reels"][data-limpio] .feed__lengueta { transform: translate(-50%, -130%) !important; }
:root[data-vista="reels"][data-limpio] .isla { opacity: 0 !important; transform: translateY(40px) !important; pointer-events: none !important; }
/* Mantener presionado es un gesto de la app (modo lectura), no seleccionar texto. */
.feed--inicio .feed__pista { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* 1.18.0 · Vitrina de leyes compacta: los grupos y un renglón «Defiéndete»; lo demás se abre en una ventana. */
.vitrina { margin: 4px 0 18px; }
.vitrina__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 10px; margin: 0 -16px; }
.vitrina__chips .chip { flex: none; }
.vitrina__chips .chip[aria-selected="true"] { background: var(--ink-950); color: var(--fondo); border-color: var(--ink-950); }
.vitrina__boton { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border: 1px solid var(--ink-150); border-radius: 18px; background: var(--papel); color: var(--ink-950); text-align: left; font: inherit; cursor: pointer; transition: transform .15s, border-color .2s; }
.vitrina__boton:active { transform: scale(.985); }
.vitrina__boton > svg { flex: none; width: 18px; height: 18px; opacity: .5; }
.vitrina__escudo { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--ink-950); color: var(--fondo); }
.vitrina__escudo svg { width: 20px; height: 20px; }
.vitrina__texto { flex: 1; min-width: 0; }
.vitrina__texto b { display: block; font-size: 1.02rem; line-height: 1.2; }
.vitrina__texto small { display: block; margin-top: 2px; font-size: .86rem; color: var(--ink-600); line-height: 1.3; }
.vitrina__cabeza { display: flex; gap: 12px; align-items: flex-start; }
.vitrina__cabeza .vitrina__escudo { width: 46px; height: 46px; border-radius: 15px; }
.vitrina__cabeza b { display: block; font-size: 1.12rem; line-height: 1.25; }
.vitrina__cabeza p { margin: 4px 0 0; color: var(--ink-600); font-size: .93rem; line-height: 1.45; text-align: left; }

/* Situaciones por tema (Biblioteca): «¿Qué te está pasando?» con opciones grandes; cada una abre un caso parecido,
   lo que te protege, lo de tu estado, el paso a paso y a quién acudir. --c es el color del tema. */
.situ { --c-tinta: color-mix(in oklab, var(--c) 72%, var(--ink-950)); margin: 4px 0 20px; padding: 18px 14px 14px; border-radius: 24px; background: color-mix(in oklab, var(--c) 8%, var(--papel)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 24%, var(--ink-150)); }
.situ__cabeza { padding: 0 4px; }
.situ__cabeza h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 5.6vw, 1.7rem); line-height: 1.08; color: var(--ink-950); letter-spacing: -.01em; }
.situ__cabeza p { margin: 6px 0 14px; font-size: .92rem; line-height: 1.45; color: var(--ink-600); text-align: left; hyphens: manual; }
.situ__ops { display: grid; gap: 8px; }
@media (min-width: 720px) { .situ__ops { grid-template-columns: 1fr 1fr; } }
.situ__op { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 10px 12px; border: 0; border-radius: 17px; background: var(--cristal, var(--papel)); color: var(--ink-950); box-shadow: inset 0 0 0 1px var(--cristal-borde, var(--ink-150)), var(--cristal-luz, none); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.situ__op:active { transform: scale(.985); }
.situ__op:focus-visible { outline: 2px solid var(--c-tinta); outline-offset: 2px; }
.situ__op > svg { width: 18px; height: 18px; opacity: .45; }
.situ__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in oklab, var(--c) 16%, var(--papel)); color: var(--c-tinta); }
.situ__ic svg { width: 19px; height: 19px; }
.situ__t { min-width: 0; font-size: .97rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.situ__t small { display: block; margin-top: 2px; font-weight: 400; font-size: .76rem; color: var(--ink-500); }
.situ__leyes { margin-top: 2px; }
.situ__urgente { margin: 0 0 14px; padding: 14px; border-radius: 18px; background: color-mix(in srgb, #d32f2f 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #d32f2f 30%, transparent); }
.situ__urgente p { margin: 0 0 10px; line-height: 1.45; text-align: left; hyphens: manual; }
.situ__urgente .lineas { margin: 0; }
.situ__caso { margin: 2px 0 4px; padding: 16px; border-radius: 18px; background: var(--ink-50); box-shadow: inset 0 0 0 1px var(--ink-100); }
.situ__caso .etiqueta { display: inline-flex; gap: 6px; align-items: center; }
.situ__caso .etiqueta svg { width: 14px; height: 14px; }
.situ__caso p { margin: 6px 0 0; font-size: clamp(1.02rem, 4.2vw, 1.15rem); line-height: 1.55; color: var(--ink-900); text-align: left; hyphens: manual; }
.situ__estado { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 4px; }
.situ__estado > span { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: var(--ink-950); }
.situ__estado > span svg { width: 16px; height: 16px; }
.situ__estado .chip { flex: none; }
.situ__nota { margin: 8px 0 4px; }
.situ__sin { margin: 8px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--ink-50); color: var(--ink-700); font-size: .95rem; line-height: 1.5; text-align: left; }
.situ__sin b { color: var(--ink-950); }
.situ__pasos .pasos-l { counter-reset: paso; }
.situ__pasos .paso-l { counter-increment: paso; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; }
.situ__pasos .paso-l::before { content: counter(paso); grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; margin-top: 3px; border-radius: 999px; background: var(--ink-950); color: var(--fondo); font-weight: 700; font-size: .88rem; }
.situ__pasos .paso-l p { text-align: left; hyphens: manual; }
.situ__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.situ__apoyo { display: grid; gap: 6px; }
.situ__sitio { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-left: 14px; font-size: .82rem; color: var(--ink-600); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.situ__sitio svg { width: 13px; height: 13px; flex: none; }
.situ__ingo { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 12px; align-items: center; width: 100%; margin-top: 22px; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--ink-50); color: var(--ink-950); box-shadow: inset 0 0 0 1px var(--ink-150); font: inherit; text-align: left; cursor: pointer; }
.situ__ingo svg { width: 20px; height: 20px; }
.situ__ingo > svg:last-child { width: 18px; height: 18px; opacity: .45; }
.situ__ingo b { display: block; font-size: .95rem; }
.situ__ingo small { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink-600); }
.vitrina__defiende { margin: 16px 0 6px; padding: 14px; border-radius: 16px; background: var(--ink-950); color: var(--fondo); }
.vitrina__defiende .etiqueta { color: inherit; opacity: .75; display: inline-flex; gap: 6px; align-items: center; }
.vitrina__defiende .etiqueta svg { width: 14px; height: 14px; }
.vitrina__defiende b { display: block; font-size: 1.05rem; margin-top: 4px; }
.vitrina__defiende p { margin: 4px 0 12px; font-size: .92rem; line-height: 1.45; opacity: .9; text-align: left; }
.vitrina__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.vitrina__acciones .boton { padding: 9px 14px; font-size: .86rem; }
.vitrina__defiende .boton { background: transparent; color: inherit; border: 1px solid currentColor; }
.vitrina__defiende .boton--primario { background: var(--fondo); color: var(--ink-950); border-color: var(--fondo); }
.vitrina__lista { list-style: none; counter-reset: vit; margin: 4px 0 0; padding: 0; }
.vitrina__lista li { counter-increment: vit; position: relative; padding: 14px 0 14px 36px; border-top: 1px solid var(--ink-150); }
.vitrina__lista li::before { content: counter(vit, decimal-leading-zero); position: absolute; left: 0; top: 15px; font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 700; opacity: .45; }
.vitrina__lista b { display: block; font-size: 1rem; line-height: 1.3; }
.vitrina__lista p { margin: 4px 0 0; font-size: .92rem; line-height: 1.45; text-align: left; }
.vitrina__lista .legal__f { margin-top: 8px; }
.vitrina__lista .legal__f .chip { white-space: normal; text-align: left; line-height: 1.25; }
.vitrina__lista .legal__f .chip svg { flex: none; }
.vitrina__sub { display: block; margin: 18px 0 8px; }
.vitrina__lineas .linea--911 { background: var(--ink-950); color: var(--fondo); border-color: var(--ink-950); }
.vitrina__lineas .linea--911 .linea__icono { background: rgb(127 127 127 / .22); color: inherit; }

/* 1.18.0 · Leyes: la isla, debajo el buscador y debajo los botones de tema y ajustes. */
:root[data-vista="leyes"][data-biblioteca] .barra__bajo { display: none; }
.buscador-leyes--arriba { margin: 0 0 10px; top: 0; }
:root[data-vista="leyes"][data-biblioteca] #leyes.pagina { padding-top: calc(var(--alto-barra) - 14px); }
.vitrina__lista b { text-align: left; }
/* Tema y ajustes viven dentro del buscador de Leyes: comparten el espacio, no la función (una línea fina los separa). */
.buscador__acciones { display: flex; align-items: center; gap: 2px; flex: none; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--ink-200); }
.buscador__ic { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-600); cursor: pointer; transition: background .2s var(--suave), color .2s var(--suave); }
.buscador__ic:hover, .buscador__ic:focus-visible { background: var(--ink-100); color: var(--ink-950); }
.buscador .buscador__ic svg { width: 18px; height: 18px; color: currentColor; }
.buscador input[type="search"]::-webkit-search-cancel-button { margin-right: 2px; }

/* 1.18.0 · Librito de Pregúntame: una hoja pasa sobre el lomo (también se ve con «reducir movimiento», solo que sin girar). */
.libro-anim path { animation: none; }
.libro-anim .libro-anim__hoja { transform-box: view-box; transform-origin: 12px 12px; animation: pasaHoja 3s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes pasaHoja { 0%, 20% { transform: scaleX(1); opacity: 0; } 24% { opacity: 1; } 50% { transform: scaleX(-1); opacity: 1; } 56%, 100% { transform: scaleX(-1); opacity: 0; } }
@keyframes hojaSuave { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .libro-anim .libro-anim__hoja { animation: hojaSuave 3s ease-in-out infinite !important; transform: none; } }
:root[data-movimiento="reducido"] .libro-anim .libro-anim__hoja { animation: none !important; opacity: 0; }

/* 1.18.0 · Reels: el fondo toma con suavidad el color de la sección en pantalla y cambia al deslizar. */
@property --tono { syntax: "<color>"; inherits: true; initial-value: #0b6b4b; }
.feed--inicio { transition: --tono 1s ease; background: radial-gradient(130% 75% at 50% 0%, color-mix(in oklab, var(--tono) 34%, #000), #000 72%), #000; }
.feed--inicio .tarjeta { background: linear-gradient(170deg, color-mix(in oklab, var(--seccion, var(--tono)) 26%, transparent) 0%, transparent 52%, color-mix(in oklab, var(--seccion, var(--tono)) 16%, transparent) 100%); }
:root[data-tema="claro"] .feed--inicio { background: radial-gradient(130% 75% at 50% 0%, color-mix(in oklab, var(--tono) 18%, #fff), #fff 72%), #fff; }
:root[data-tema="claro"] .feed--inicio .tarjeta { background: linear-gradient(170deg, color-mix(in oklab, var(--seccion, var(--tono)) 14%, transparent) 0%, transparent 52%, color-mix(in oklab, var(--seccion, var(--tono)) 9%, transparent) 100%); }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) .feed--inicio { background: radial-gradient(130% 75% at 50% 0%, color-mix(in oklab, var(--tono) 18%, #fff), #fff 72%), #fff; }
  :root:not([data-tema="oscuro"]) .feed--inicio .tarjeta { background: linear-gradient(170deg, color-mix(in oklab, var(--seccion, var(--tono)) 14%, transparent) 0%, transparent 52%, color-mix(in oklab, var(--seccion, var(--tono)) 9%, transparent) 100%); }
}

/* 1.18.0 · Defiéndete en amarillo de advertencia: el escudo como señal, el renglón de Leyes y los paneles de Derechos. */
:root { --amarillo: #f5b800; --amarillo-tinta: #161100; }
.vitrina__escudo { background: var(--amarillo); color: var(--amarillo-tinta); box-shadow: 0 6px 16px -8px rgb(245 184 0 / .75), inset 0 -2px 0 rgb(0 0 0 / .12); }
.vitrina__escudo svg { stroke-width: 2.3; }
.vitrina__boton { padding: 12px 12px 12px 12px; border-color: color-mix(in oklab, var(--amarillo) 45%, var(--ink-150)); background: linear-gradient(100deg, color-mix(in oklab, var(--amarillo) 13%, var(--papel)), var(--papel) 70%); }
.vitrina__boton > svg { width: 30px; height: 30px; padding: 7px; border-radius: 999px; background: var(--ink-950); color: var(--fondo); opacity: 1; }
.vitrina__texto b { font-size: 1.08rem; letter-spacing: -.01em; }
.vitrina__defiende { background: #121212; color: #f4f4f1; box-shadow: inset 0 0 0 1px rgb(245 184 0 / .35); }
.vitrina__defiende .etiqueta { color: var(--amarillo); opacity: 1; }
.vitrina__defiende .boton { color: #f4f4f1; }
.vitrina__defiende .boton--primario { background: var(--amarillo); color: var(--amarillo-tinta); border-color: var(--amarillo); }
.defiendete { margin: 0 0 22px; }
.defiendete__cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.defiendete__cabeza b { display: block; font-family: var(--display); font-size: 1.5rem; line-height: 1.05; }
.defiendete__cabeza small { display: block; margin-top: 3px; font-size: .88rem; line-height: 1.35; color: var(--ink-600); }
.defiendete__paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.defiendete__panel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 168px; padding: 16px; border-radius: 22px; border: 1px solid color-mix(in oklab, var(--amarillo) 38%, var(--ink-150)); background: linear-gradient(160deg, color-mix(in oklab, var(--amarillo) 12%, var(--papel)), var(--papel) 65%); color: var(--ink-950); text-align: left; font: inherit; cursor: pointer; transition: transform .15s; }
.defiendete__panel:active { transform: scale(.98); }
.defiendete__panel:first-child { grid-column: 1 / -1; min-height: 0; }
.defiendete__panel .vitrina__escudo { margin-bottom: 4px; }
.defiendete__panel b { font-size: 1.08rem; line-height: 1.2; }
.defiendete__panel small { font-size: .86rem; line-height: 1.35; color: var(--ink-600); }
.defiendete__ir { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.defiendete__ir svg { width: 15px; height: 15px; }

/* 1.18.0 · Todas las portadas en formato clásico: tapa de piel, doble filete dorado, letras doradas y ornamento.
   El color de la piel sigue siendo el de su sección (o el de su ámbito); la Constitución, en negro. */
.portada-ley, .portada-hero { --oro-tapa: #e9c46a; --f: #5c1a22; }
.portada-ley--estatal, .portada-hero.portada-ley--estatal { --f: #1b2f52; }
.portada-ley--municipal, .portada-hero.portada-ley--municipal { --f: #1f4130; }
.portada-ley[data-ley-abrir="cpeum"] { --f: #0d0d0d; }
.portada-ley { align-items: center; justify-content: flex-start; gap: 6px; padding: 22px 16px 18px 20px; border-radius: 3px 10px 10px 3px; color: #f3e6c4; text-align: center;
  background: radial-gradient(130% 90% at 30% 15%, rgb(255 255 255 / .12), transparent 55%), linear-gradient(90deg, rgb(0 0 0 / .5) 0 6px, rgb(255 255 255 / .1) 6px 8px, transparent 8px), color-mix(in oklab, var(--f) 74%, #120c08);
  box-shadow: 0 16px 22px -14px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(0 0 0 / .3); }
.portada-ley::before { content: ""; position: absolute; inset: 8px 7px 8px 13px; border: 3px double rgb(233 196 106 / .72); border-radius: 2px; pointer-events: none; }
.portada-ley::after { display: none; }
.portada-ley__sigla { margin-top: 10px; color: var(--oro-tapa); font-size: 1.85rem; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.portada-ley__sigla::after { content: "❦"; display: block; margin-top: 4px; font-size: .8rem; line-height: 1; opacity: .8; }
.portada-ley__titulo { color: #f3e6c4; font-size: 1rem; line-height: 1.12; text-transform: none; }
.portada-ley__pie { color: rgb(233 196 106 / .85); opacity: 1; font-size: .64rem; letter-spacing: .06em; }
.portada-hero { color: #f3e6c4; border-radius: 4px 18px 18px 4px;
  background: radial-gradient(120% 90% at 25% 10%, rgb(255 255 255 / .1), transparent 55%), linear-gradient(90deg, rgb(0 0 0 / .5) 0 8px, rgb(255 255 255 / .1) 8px 10px, transparent 10px), color-mix(in oklab, var(--f) 74%, #120c08);
  box-shadow: 0 18px 28px -18px rgb(0 0 0 / .65); }
.portada-hero::before { content: ""; position: absolute; inset: 10px 10px 10px 18px; border: 3px double rgb(233 196 106 / .6); border-radius: 3px; pointer-events: none; }
.portada-hero h2 { color: #f3e6c4; text-transform: none; }
.portada-hero .etiqueta { color: var(--oro-tapa); opacity: 1; }
.portada-hero__sigla { color: var(--oro-tapa); opacity: .14; }
.portada-hero__botones .boton { background: rgb(233 196 106 / .14); color: #f3e6c4; box-shadow: inset 0 0 0 1px rgb(233 196 106 / .4); }
.portada-ley { padding: 22px 12px 18px 16px; }
.portada-ley__pie { max-width: 100%; letter-spacing: .01em; font-size: .62rem; line-height: 1.35; text-wrap: balance; padding: 0 4px; }
.portada-hero { padding: 32px 28px 26px 38px; }

/* 1.18.0 · Tu estante (Todo México): lo esencial, tus favoritas y lo reciente, de frente y a la mano. */
.preferidas { margin: 4px 0 22px; padding: 16px 16px 4px; border-radius: 22px; background: linear-gradient(180deg, color-mix(in oklab, var(--oro) 10%, var(--papel)), var(--papel)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--oro) 35%, var(--ink-150)); }
.preferidas .estante__cabeza { margin-bottom: 4px; }
.preferidas .estante__vol svg { width: 18px; height: 18px; fill: currentColor; vertical-align: -2px; }
.preferidas__nota { margin: 0 0 10px; font-size: .86rem; line-height: 1.4; color: var(--ink-600); text-align: left; }
.preferidas .portadas { grid-auto-columns: 120px; gap: 10px; margin: 0 -16px 0; padding: 4px 16px 18px;
  background: linear-gradient(transparent calc(100% - 12px), color-mix(in oklab, #6b4a2b 55%, transparent) calc(100% - 12px), color-mix(in oklab, #3a2716 60%, transparent) calc(100% - 4px), transparent calc(100% - 4px)); }
.preferidas .portada-ley { height: 170px; padding: 18px 10px 14px 14px; }
.preferidas .portada-ley__sigla { margin-top: 6px; font-size: 1.35rem; }
.preferidas .portada-ley__titulo { font-size: .84rem; }
.preferidas .portada-ley__pie { font-size: .56rem; }
.portada-ley__fav { position: absolute; top: 3px; right: 6px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--oro); color: #1a1406; }
.portada-ley__fav svg { width: 12px; height: 12px; fill: currentColor; }
.portada-hero__botones [data-favorita][aria-pressed="true"] { background: var(--oro); color: #1a1406; box-shadow: none; }

/* 1.18.0 · Aprende tus derechos: formulario del plan y panel «Hoy toca». */
.plan__intro { margin: 0 0 14px; color: var(--ink-600); font-size: .95rem; line-height: 1.45; text-align: left; }
.plan fieldset { margin: 0 0 18px; padding: 0; border: 0; }
.plan legend { margin-bottom: 10px; font-family: var(--display); font-size: 1.12rem; font-weight: 700; }
.plan__ops { display: flex; flex-wrap: wrap; gap: 8px; }
.plan__op, .plan__tema { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--ink-200); background: var(--papel); font-size: .92rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.plan__op input, .plan__tema input { position: absolute; opacity: 0; pointer-events: none; }
.plan__op svg, .plan__tema svg { width: 17px; height: 17px; flex: none; }
.plan__op:has(input:checked) { background: var(--ink-950); color: var(--fondo); border-color: var(--ink-950); }
.plan__op:has(input:focus-visible), .plan__tema:has(input:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }
.plan__temas { display: flex; flex-wrap: wrap; gap: 8px; }
.plan__tema svg { color: var(--c); }
.plan__tema:has(input:checked) { background: var(--c); color: #fff; border-color: var(--c); }
.plan__tema:has(input:checked) svg { color: #fff; }
.plan__error { margin: -6px 0 12px; color: var(--senal); font-weight: 700; font-size: .9rem; }
.plan__listo { width: 100%; justify-content: center; }
.plan__nota { display: flex; align-items: center; gap: 6px; margin: 12px 0; font-size: .82rem; color: var(--ink-600); line-height: 1.4; text-align: left; }
.plan__nota svg { width: 14px; height: 14px; flex: none; }
.plan-hoy { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 22px; background: var(--ink-950); color: var(--fondo); }
.plan-hoy .etiqueta { color: inherit; opacity: .7; }
.plan-hoy b { display: block; font-size: 1.08rem; line-height: 1.25; margin-top: 2px; }
.plan-hoy small { display: block; margin-top: 3px; font-size: .84rem; opacity: .75; }
.plan-hoy__meta { flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 999px; background: radial-gradient(closest-side, var(--ink-950) 78%, transparent 80% 100%), conic-gradient(var(--amarillo) calc(var(--p) * 360deg), rgb(127 127 127 / .3) 0); }
.plan-hoy__meta span { font-size: .8rem; opacity: .85; }
.plan-hoy__meta span b { display: inline; font-size: 1.4rem; opacity: 1; }
.plan__defiende { margin-top: 12px; }
.plan-pasos { display: grid; gap: 8px; }
.plan-paso { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--ink-150); background: var(--papel); color: var(--ink-950); text-align: left; font: inherit; cursor: pointer; }
.plan-paso > svg { width: 20px; height: 20px; flex: none; }
.plan-paso > svg:last-child { width: 18px; height: 18px; opacity: .45; }
.plan-paso > span:not(.plan-paso__n) { flex: 1; min-width: 0; }
.plan-paso b { display: block; font-size: 1rem; }
.plan-paso small { display: block; margin-top: 2px; font-size: .84rem; color: var(--ink-600); }
.plan-paso__n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--ink-150); font-size: .78rem; font-weight: 800; }
.plan-paso--uno { border-color: var(--ink-950); box-shadow: inset 0 0 0 1px var(--ink-950); }
.plan-paso--uno .plan-paso__n { background: var(--amarillo); color: var(--amarillo-tinta); }
.plan-dominio { display: grid; gap: 10px; }
.plan-dominio__fila { display: grid; grid-template-columns: minmax(0, 9.5em) 1fr 3em; align-items: center; gap: 10px; font-size: .9rem; }
.plan-dominio__fila span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-dominio__fila i { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--c) calc(var(--p) * 100%), var(--ink-150) 0); }
.plan-dominio__fila b { text-align: right; font-variant-numeric: tabular-nums; }

/* 1.18.0 · Libros: todo el texto dentro del filete (la sigla se achica según sus letras y el título se parte). */
.portada-ley { padding: 20px 17px 17px 22px; }
.portada-ley > span { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.portada-ley__sigla { font-size: calc(2.5rem - var(--s, 5) * .17rem); line-height: 1; }
.portada-ley__titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.portada-ley__pie { padding: 0; }
.preferidas .portada-ley { padding: 17px 13px 15px 18px; }
.preferidas .portada-ley__sigla { font-size: calc((2.5rem - var(--s, 5) * .17rem) * .74); }
.preferidas .portada-ley__titulo { -webkit-line-clamp: 3; }
.preferidas .estante__cabeza { margin-bottom: 10px; }
.portada-hero__sigla { right: 20px; bottom: 12px; font-size: 4.6rem; }
.portada-hero h2 { overflow-wrap: anywhere; }

/* 1.18.0 · Vial: la calculadora en claro (sin el bloque negro); la tinta queda en letras, números e íconos. */
.calc--foco { background: var(--papel); color: var(--ink-950); box-shadow: inset 0 0 0 1px var(--ink-150), 0 14px 30px -22px rgb(0 0 0 / .35); }
.calc__pasos li { background: color-mix(in oklab, var(--ink-950) 6%, transparent); }
.calc__pasos b { background: var(--ink-950); color: var(--papel); }
.calc__buscador { background: var(--fondo); box-shadow: inset 0 0 0 1.5px var(--ink-950); }
.calc__buscador:focus-within { box-shadow: inset 0 0 0 2px var(--ink-950), 0 0 0 4px color-mix(in oklab, var(--ink-950) 12%, transparent); }
.calc__lugar { color: var(--ink-600); }
.calc__lugar b, .calc__lugar small { color: var(--ink-950); }
.calc--foco .etiqueta { color: var(--ink-600); }
.calc--foco .calc__fila { background: color-mix(in oklab, var(--ink-950) 4%, transparent); color: var(--ink-950); }
.calc--foco .calc__fila:hover { box-shadow: inset 0 0 0 1px var(--ink-200); }
.calc--foco .calc__fila .calc__no { background: var(--ink-950); color: var(--papel); }
.calc--foco .calc__fila b { background: color-mix(in oklab, var(--ink-950) 8%, transparent); color: var(--ink-950); }
.calc--foco .centro { color: var(--ink-600) !important; }
.calc--foco .calc__fila .calc__no { background: transparent; color: var(--ink-950); box-shadow: inset 0 0 0 1.5px var(--ink-950); }

/* 1.18.1 · Pregúntame como un orbe de voz: una píldora azul luminosa en la isla de los reels (tocar = hablar o
   escribir) y, al deslizar, solo la bola. */
.orbe { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 999px; isolation: isolate;
  background: radial-gradient(120% 140% at 50% 120%, #8fd0ff 0%, #2f8bff 38%, #1a4fd8 70%, #0e2a8a 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -10px 22px -10px rgb(255 255 255 / .55), 0 10px 26px -10px rgb(47 139 255 / .85); }
.orbe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgb(255 255 255 / .28), transparent 45%); pointer-events: none; }
.orbe i { position: absolute; border-radius: 999px; filter: blur(10px); mix-blend-mode: screen; opacity: .85; }
.orbe i:nth-child(1) { width: 60%; height: 120%; left: -10%; top: 10%; background: #41c7ff; animation: orbeA 6s ease-in-out infinite alternate; }
.orbe i:nth-child(2) { width: 55%; height: 110%; right: -12%; top: 20%; background: #6d5bff; animation: orbeB 7.5s ease-in-out infinite alternate; }
.orbe i:nth-child(3) { width: 40%; height: 90%; left: 30%; top: 45%; background: #b9e6ff; opacity: .7; animation: orbeC 5s ease-in-out infinite alternate; }
@keyframes orbeA { to { transform: translate(55%, -18%) scale(1.15); } }
@keyframes orbeB { to { transform: translate(-60%, -10%) scale(.9); } }
@keyframes orbeC { to { transform: translate(-30%, -25%) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .orbe i { animation: none !important; } }
:root[data-movimiento="reducido"] .orbe i { animation: none !important; }
.feed__orbe { flex: 1; min-width: 0; height: 52px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; transition: transform .2s; -webkit-tap-highlight-color: transparent; }
.feed__orbe:active { transform: scale(.97); }
.feed__orbe:focus-visible { outline: 2px solid #2f8bff; outline-offset: 3px; }
:root[data-litigar] .feed__orbe .orbe { box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 0 0 3px rgb(143 208 255 / .45), 0 12px 32px -8px rgb(47 139 255 / .95); }
@media (max-width: 380px) { .feed__orbe { height: 46px; } }
/* La lengüeta: solo la bola, sin texto. */
.feed__lengueta--bola { gap: 0; width: 44px; height: auto; padding: max(6px, env(safe-area-inset-top)) 0 8px; background: none !important; box-shadow: none !important; border: 0 !important; }
.feed__lengueta--bola .orbe { width: 34px; height: 34px; }

/* 1.18.1 · Títulos con tipografía tipo Apple: San Francisco en iPhone y Mac; en los demás, Inter (la más cercana,
   licencia OFL). Peso firme, tracking apretado y sin itálicas; los libros conservan su letra clásica. */
@font-face { font-family: "Inter"; src: url("../fuentes/inter-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
:root { --display: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Inter", system-ui, sans-serif; }
.seccion__titulo, .ala__cabeza h3, .calc__titulo, .hoja__cabeza h2, .tarjeta h3, .defiendete__cabeza b, .plan legend, .estado-elige__actual, .preguntame__guia h3, .titulo-l {
  font-family: var(--display); font-weight: 700; letter-spacing: -.022em; font-optical-sizing: auto; }
.seccion__titulo em, .ala__cabeza h3 em, .calc__titulo em { font-style: normal; font-weight: 700; }

/* ═══ 1.19.0 · Estilos de libro (Ajustes → Estilo de los libros). El color de cada libro sigue siendo el de su
   sección (--f); cambia la encuadernación. Por omisión: piel y oro. ═══ */
.ajuste--libros { flex-wrap: wrap; }
.ajuste--libros > div:first-child { flex-basis: 100%; }
.estilos-libro { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; width: 100%; }
.estilo-libro { flex: none; display: grid; justify-items: center; gap: 6px; padding: 6px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--ink-950); font: inherit; cursor: pointer; }
.estilo-libro[aria-pressed="true"] { border-color: var(--ink-950); background: color-mix(in oklab, var(--ink-950) 5%, transparent); }
.estilo-libro small { font-size: .74rem; font-weight: 600; }
.estilo-libro__tapa { --f: #1b2f52; position: relative; display: grid; place-items: center; width: 48px; height: 64px; border-radius: 2px 6px 6px 2px; overflow: hidden; font-size: .7rem; font-weight: 800; }
.estilo-libro--piel .estilo-libro__tapa { background: linear-gradient(90deg, rgb(0 0 0 / .45) 0 4px, transparent 4px), color-mix(in oklab, var(--f) 74%, #120c08); color: #e9c46a; box-shadow: inset 0 0 0 4px color-mix(in oklab, var(--f) 74%, #120c08), inset 0 0 0 5px #e9c46a; font-family: var(--clasica); }
.estilo-libro--tela .estilo-libro__tapa { background: repeating-linear-gradient(45deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgb(0 0 0 / .1) 0 1px, transparent 1px 3px), #2f5d50; }
.estilo-libro--tela .estilo-libro__tapa i { padding: 3px 5px; background: #f3ead7; color: #1d1d1b; font-style: normal; font-family: var(--clasica); }
.estilo-libro--moderno .estilo-libro__tapa { background: linear-gradient(var(--f) 0 9px, #f4efe6 9px); color: #111; place-items: end start; padding: 6px; font-family: var(--display); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.estilo-libro--franjas .estilo-libro__tapa { background: linear-gradient(#c8102e 0 32%, #faf7f0 32% 68%, #c8102e 68%); color: #111; font-family: var(--clasica); }
.estilo-libro--deco .estilo-libro__tapa { background: repeating-conic-gradient(from 270deg at 50% 0%, rgb(233 196 106 / .25) 0 3deg, transparent 3deg 12deg), #141414; color: #e9c46a; box-shadow: inset 0 0 0 3px #141414, inset 0 0 0 4px #e9c46a; font-family: var(--rotulo); letter-spacing: .14em; }
.estilo-libro__tapa i { font-style: normal; }

/* — Tela de editorial: tela con trama, el título en una etiqueta crema pegada al centro. — */
:root[data-libros="tela"] .portada-ley, :root[data-libros="tela"] .portada-hero { background: repeating-linear-gradient(45deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgb(0 0 0 / .12) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgb(0 0 0 / .3) 0 6px, transparent 6px), color-mix(in oklab, var(--f) 82%, #1b1b1b); }
:root[data-libros="tela"] .portada-ley::before { inset: auto 14px 50% 18px; height: 0; border: 0; }
:root[data-libros="tela"] .portada-ley { justify-content: center; gap: 0; }
:root[data-libros="tela"] .portada-ley__sigla, :root[data-libros="tela"] .portada-ley__titulo { width: 100%; background: #f3ead7; color: #1d1d1b; text-shadow: none; }
:root[data-libros="tela"] .portada-ley__sigla { margin: auto 0 0; padding: 10px 6px 2px; border-radius: 3px 3px 0 0; }
:root[data-libros="tela"] .portada-ley__titulo { padding: 2px 6px 10px; border-radius: 0 0 3px 3px; box-shadow: 0 6px 12px -8px rgb(0 0 0 / .5); }
:root[data-libros="tela"] .portada-ley__sigla::after { color: #7a5b16; }
:root[data-libros="tela"] .portada-ley__pie { margin-top: auto; color: #f3ead7; }
:root[data-libros="tela"] .portada-hero::before { border: 1px solid rgb(243 234 215 / .5); border-style: dashed; }
:root[data-libros="tela"] .portada-hero .etiqueta, :root[data-libros="tela"] .portada-hero__sigla { color: #f3ead7; }

/* — Moderno (tipográfico): papel crema, una franja del color de la sección y la sigla enorme en negro. — */
:root[data-libros="moderno"] .portada-ley { align-items: flex-start; text-align: left; justify-content: flex-start; color: #111; border-radius: 4px 12px 12px 4px; padding: 28px 14px 14px 16px;
  background: linear-gradient(var(--f) 0 12px, #f4efe6 12px); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1), 0 14px 22px -16px rgb(0 0 0 / .5); }
:root[data-libros="moderno"] .portada-ley::before, :root[data-libros="moderno"] .portada-ley__sigla::after { display: none; }
:root[data-libros="moderno"] .portada-ley__sigla { margin-top: 4px; color: #111; text-shadow: none; font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: calc(2.9rem - var(--s, 5) * .22rem); }
:root[data-libros="moderno"] .portada-ley__titulo { color: #111; font-family: var(--display); font-weight: 600; font-size: .92rem; letter-spacing: -.01em; }
:root[data-libros="moderno"] .portada-ley__pie { color: #555; }
:root[data-libros="moderno"] .portada-ley__fav { background: #111; color: #f4efe6; }
:root[data-libros="moderno"] .portada-hero { color: #111; background: linear-gradient(var(--f) 0 14px, #f4efe6 14px); }
:root[data-libros="moderno"] .portada-hero::before { display: none; }
:root[data-libros="moderno"] .portada-hero h2 { color: #111; font-family: var(--display); }
:root[data-libros="moderno"] .portada-hero .etiqueta { color: #555; }
:root[data-libros="moderno"] .portada-hero__sigla { color: #111; opacity: .07; }
:root[data-libros="moderno"] .portada-hero__botones .boton { background: #111; color: #f4efe6; box-shadow: none; }

/* — Tres franjas: color arriba y abajo, el título en la franja clara del centro. — */
:root[data-libros="franjas"] .portada-ley { justify-content: space-between; color: #111; background: linear-gradient(var(--f) 0 30%, #faf7f0 30% 66%, var(--f) 66%); }
:root[data-libros="franjas"] .portada-ley::before, :root[data-libros="franjas"] .portada-ley__sigla::after { display: none; }
:root[data-libros="franjas"] .portada-ley__sigla { margin-top: 0; color: #fff; text-shadow: none; font-family: var(--rotulo); font-weight: 700; letter-spacing: .1em; font-size: calc(1.6rem - var(--s, 5) * .1rem); }
:root[data-libros="franjas"] .portada-ley__titulo { color: #111; margin-block: auto; padding-top: 8px; }
:root[data-libros="franjas"] .portada-ley__pie { margin-top: 0; }
:root[data-libros="franjas"] .portada-ley__pie { color: #fff; }
:root[data-libros="franjas"] .portada-hero { background: linear-gradient(var(--f) 0 18%, #faf7f0 18% 84%, var(--f) 84%); color: #111; }
:root[data-libros="franjas"] .portada-hero::before { display: none; }
:root[data-libros="franjas"] .portada-hero h2 { color: #111; }
:root[data-libros="franjas"] .portada-hero .etiqueta { color: #fff; }
:root[data-libros="franjas"] .portada-hero__sigla { color: #111; opacity: .06; }
:root[data-libros="franjas"] .portada-hero__botones .boton { background: #111; color: #faf7f0; box-shadow: none; }

/* — Art déco: negro con abanico dorado, doble marco y letras espaciadas. — */
:root[data-libros="deco"] .portada-ley, :root[data-libros="deco"] .portada-hero { background: repeating-conic-gradient(from 270deg at 50% 0%, rgb(233 196 106 / .16) 0 2deg, transparent 2deg 10deg), linear-gradient(180deg, color-mix(in oklab, var(--f) 35%, #0d0d0d), #0d0d0d 70%); }
:root[data-libros="deco"] .portada-ley::before { inset: 7px; border: 1px solid rgb(233 196 106 / .8); box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgb(233 196 106 / .45); border-radius: 0; }
:root[data-libros="deco"] .portada-ley__sigla { font-family: var(--rotulo); font-weight: 600; letter-spacing: .16em; font-size: calc(1.5rem - var(--s, 5) * .09rem); }
:root[data-libros="deco"] .portada-ley__sigla::after { content: "◆"; font-size: .55rem; letter-spacing: 0; }
:root[data-libros="deco"] .portada-ley__titulo { font-family: var(--rotulo); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; line-height: 1.35; }
:root[data-libros="deco"] .portada-hero::before { border: 1px solid rgb(233 196 106 / .7); border-radius: 0; }
:root[data-libros="deco"] .portada-hero h2 { font-family: var(--rotulo); text-transform: uppercase; letter-spacing: .05em; font-size: clamp(1.25rem, 5vw, 1.7rem); }

/* Lomos del estante, en el mismo estilo. */
:root[data-libros="tela"] .lomo { background: repeating-linear-gradient(45deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgb(0 0 0 / .12) 0 1px, transparent 1px 3px), color-mix(in oklab, var(--c) 82%, #1b1b1b); color: #f3ead7; }
:root[data-libros="tela"] .lomo::before, :root[data-libros="tela"] .lomo::after { border-color: rgb(243 234 215 / .5); }
:root[data-libros="tela"] .lomo__sigla { color: #f3ead7; }
:root[data-libros="moderno"] .lomo { background: linear-gradient(var(--c) 0 14px, #f4efe6 14px); color: #111; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12), 0 14px 18px -12px rgb(0 0 0 / .45); }
:root[data-libros="moderno"] .lomo::before, :root[data-libros="moderno"] .lomo::after { display: none; }
:root[data-libros="moderno"] .lomo__sigla, :root[data-libros="moderno"] .lomo__titulo { color: #111; font-family: var(--display); }
:root[data-libros="moderno"] .lomo__pie { color: #555; }
:root[data-libros="franjas"] .lomo { background: linear-gradient(var(--c) 0 22%, #faf7f0 22% 80%, var(--c) 80%); color: #111; }
:root[data-libros="franjas"] .lomo::before, :root[data-libros="franjas"] .lomo::after { display: none; }
:root[data-libros="franjas"] .lomo__sigla, :root[data-libros="franjas"] .lomo__pie { color: #fff; }
:root[data-libros="deco"] .lomo { background: repeating-linear-gradient(0deg, rgb(233 196 106 / .12) 0 1px, transparent 1px 9px), linear-gradient(90deg, #070707, color-mix(in oklab, var(--c) 30%, #111) 50%, #070707); }
:root[data-libros="deco"] .lomo__titulo { font-family: var(--rotulo); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }

/* 1.19.0 · El orbe en blanco y negro: negro con luz blanca en modo claro y blanco con sombra negra en oscuro (sigue
   los tokens de tinta y papel). En la píldora pasan frases («Hola», «¿Qué te pasó?»…) que suben y se desvanecen. */
.orbe { background: radial-gradient(120% 140% at 50% 120%, color-mix(in oklab, var(--ink-950) 70%, var(--papel)) 0%, var(--ink-950) 62%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--papel) 35%, transparent), 0 10px 24px -12px rgb(0 0 0 / .55); }
.orbe::after { background: linear-gradient(180deg, color-mix(in oklab, var(--papel) 18%, transparent), transparent 45%); }
.orbe i { mix-blend-mode: normal; background: var(--papel) !important; opacity: .2; filter: blur(12px); }
.orbe i:nth-child(3) { opacity: .28; }
:root[data-litigar] .feed__orbe .orbe { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink-950) 22%, transparent), 0 12px 28px -10px rgb(0 0 0 / .6); }
.feed__orbe:focus-visible { outline-color: var(--ink-950); }
.orbe__frase { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; color: #fff; text-shadow: 0 0 10px #000, 0 0 2px #000; font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.015em; white-space: nowrap; }
.orbe__frase > span { grid-area: 1 / 1; }
.orbe__frase .frase-entra { animation: fraseEntra .5s cubic-bezier(.2, .8, .2, 1) both; }
.orbe__frase .frase-sale { animation: fraseSale .45s ease-in both; }
@keyframes fraseEntra { from { opacity: 0; transform: translateY(70%); filter: blur(4px); } }
@keyframes fraseSale { to { opacity: 0; transform: translateY(-70%); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .orbe__frase .frase-entra, .orbe__frase .frase-sale { animation-name: fraseSuave; } }
:root[data-movimiento="reducido"] .orbe__frase .frase-entra, :root[data-movimiento="reducido"] .orbe__frase .frase-sale { animation-name: fraseSuave; }
@keyframes fraseSuave { from { opacity: 0; } }
:root[data-movimiento="reducido"] .orbe__frase .frase-sale { animation: none; display: none; }
@media (max-width: 380px) { .orbe__frase { font-size: .94rem; } }

/* 1.19.0 · Sello de confianza bajo cada respuesta y botón de borrar los datos de la nube. */
.sello { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--ink-950) 4%, transparent); border: 1px solid color-mix(in oklab, var(--ink-950) 10%, transparent); font-size: .78rem; line-height: 1.4; color: var(--ink-700); }
.sello svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ink-950); }
.cuenta__borrar { display: block; margin: 10px auto 0; font-size: .82rem; color: var(--ink-600); }

/* 1.19.0 · Portadas con personalidad: cada libro dice de qué trata. Un emblema del tema en lugar del ornamento, una
   línea en palabras de la calle y, al fondo, el mismo dibujo en grande y muy tenue (como un grabado en la piel). */
.portada-ley__sigla::after { content: none; }
.portada-ley__arte { position: absolute; right: -18px; bottom: 6px; z-index: 0; color: currentColor; opacity: .1; pointer-events: none; }
.portada-ley__arte svg { width: 118px; height: 118px; stroke-width: 1; }
.portada-ley > :not(.portada-ley__arte) { position: relative; z-index: 1; }
.portada-ley__emblema { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; border: 1px solid rgb(233 196 106 / .7); color: var(--oro-tapa); flex: none; }
.portada-ley__emblema svg { width: 14px; height: 14px; stroke-width: 1.6; }
.portada-ley__titulo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.portada-ley__trata { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: auto; font-family: var(--display); font-size: .66rem; font-weight: 500; line-height: 1.25; letter-spacing: 0; color: currentColor; opacity: .9; text-wrap: balance; }
.portada-ley__pie { margin-top: 2px; }
.preferidas .portada-ley__pie { display: none; }
.preferidas .portada-ley__emblema { width: 22px; height: 22px; }
.preferidas .portada-ley__emblema svg { width: 12px; height: 12px; }
.preferidas .portada-ley__titulo { -webkit-line-clamp: 2; }
.preferidas .portada-ley__trata { font-size: .58rem; }
.preferidas .portada-ley__arte svg { width: 92px; height: 92px; }
.portada-hero__arte { position: absolute; right: 14px; top: 14px; opacity: .14; pointer-events: none; }
.portada-hero__arte svg { width: 88px; height: 88px; stroke-width: 1; }
.portada-hero__trata { display: flex; gap: 8px; align-items: center; margin: 0 0 10px !important; font-size: .9rem !important; opacity: 1 !important; }
.portada-hero__trata svg { flex: none; width: 18px; height: 18px; color: var(--oro-tapa); }
.lomo__pie svg { width: 14px; height: 14px; stroke-width: 1.8; color: var(--oro-fuerte); }

/* El emblema en cada encuadernación. */
:root[data-libros="tela"] .portada-ley__emblema { width: 100%; height: auto; padding: 0 0 2px; border: 0; border-radius: 0; background: #f3ead7; color: #7a5b16; }
:root[data-libros="tela"] .portada-ley__titulo { -webkit-line-clamp: 3; }
:root[data-libros="tela"] .portada-ley__trata { color: #f3ead7; }
:root[data-libros="tela"] .portada-ley__sigla { margin-top: 0; }
:root[data-libros="tela"] .portada-ley { justify-content: flex-start; }
:root[data-libros="tela"] .portada-ley__sigla { margin-top: 6px; }
:root[data-libros="moderno"] .portada-ley__emblema { border-color: #111; color: #111; }
:root[data-libros="moderno"] .portada-ley__arte { color: var(--f); opacity: .16; }
:root[data-libros="moderno"] .portada-ley__trata { color: #333; }
:root[data-libros="moderno"] .portada-hero__trata svg, :root[data-libros="franjas"] .portada-hero__trata svg { color: #111; }
:root[data-libros="moderno"] .lomo__pie svg, :root[data-libros="franjas"] .lomo__pie svg { color: currentColor; }
:root[data-libros="franjas"] .portada-ley__emblema { margin-top: auto; border-color: #111; color: #111; background: #faf7f0; }
:root[data-libros="franjas"] .portada-ley__titulo { margin-block: 0 auto; padding-top: 0; }
:root[data-libros="franjas"] .portada-ley__trata { margin-top: 0; padding-top: 6px; color: #fff; }
:root[data-libros="franjas"] .portada-ley__arte { opacity: .07; color: #111; bottom: 40%; }
:root[data-libros="deco"] .portada-ley__emblema { border-radius: 0; transform: rotate(45deg); width: 22px; height: 22px; }
:root[data-libros="deco"] .portada-ley__emblema svg { transform: rotate(-45deg); width: 12px; height: 12px; }
:root[data-libros="deco"] .portada-ley__trata { font-family: var(--rotulo); text-transform: uppercase; letter-spacing: .06em; font-size: .55rem; color: rgb(233 196 106 / .9); }

/* 1.19.0 · «Me están deteniendo / Me paró tránsito»: atajos grandes y una hoja de bolsillo. */
.momento__atajos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.momento__atajos button { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--ink-950) 14%, transparent); background: var(--papel); color: var(--ink-950); text-align: left; font: inherit; cursor: pointer; }
.momento__atajos button svg { flex: none; width: 22px; height: 22px; }
.momento__atajos b { display: block; font-size: .9rem; line-height: 1.15; }
.momento__atajos small { display: block; font-size: .74rem; color: var(--ink-600); }
.momento__atajos button:active { transform: scale(.98); }
.defiendete .momento__atajos { margin: 12px 0; }
.defiendete .momento__atajos button { background: var(--amarillo-tinta); color: #fff; border: 0; }
.defiendete .momento__atajos small { color: rgb(255 255 255 / .7); }
.momento__pestanas { width: 100%; margin-bottom: 14px; }
.momento__pestanas button { flex: 1; }
.momento__guion { margin: 0 0 12px; padding-left: 1.3em; display: grid; gap: 6px; font-family: var(--display); font-size: 1.12rem; font-weight: 600; line-height: 1.3; }
.momento__notas { display: grid; gap: 10px; margin-bottom: 8px; }
.momento__notas label { display: grid; gap: 4px; font-size: .8rem; color: var(--ink-600); }
.momento__notas input { padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--ink-950) 16%, transparent); background: var(--papel); color: var(--ink-950); font: inherit; font-size: 1rem; }
.momento__casos { display: grid; gap: 8px; }
@media (max-width: 360px) { .momento__atajos { grid-template-columns: 1fr; } }
.frecuentes { margin: 14px 0 0; }
.frecuentes summary span { display: inline-flex; gap: 8px; align-items: center; }
.frecuentes summary svg { width: 18px; height: 18px; }
.frecuentes__q { display: flex; width: 100%; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 2px; border: 0; border-top: 1px solid color-mix(in oklab, var(--ink-950) 8%, transparent); background: none; color: var(--ink-950); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.frecuentes__q svg { flex: none; width: 16px; height: 16px; opacity: .5; }

/* 1.19.0 · El núcleo: fuera de los reels, Pregúntame es una bola en blanco y negro que respira sobre la isla. Tócala
   y te escucha; mientras piensa gira más rápido y cuando habla late con la voz. El mismo estado anima la píldora de
   los reels y la bola del chat. */
.isla .subisla.subisla--nucleo { left: auto; right: 14px; bottom: calc(100% + 10px); width: 54px; height: 54px; min-width: 0; padding: 0; border-radius: 999px; background: none; box-shadow: none; animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.isla[data-escondida="true"] .subisla.subisla--nucleo { bottom: 10px; right: 6px; animation: none; }
.nucleo { position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; animation: respira 4.2s ease-in-out infinite; }
.nucleo .orbe { position: absolute; inset: 0; box-shadow: 0 10px 26px -8px rgb(0 0 0 / .55), inset 0 1px 0 color-mix(in oklab, var(--papel) 35%, transparent); }
.nucleo__onda { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--ink-950); opacity: 0; pointer-events: none; }
.nucleo--chico { display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; }
.nucleo--chico .nucleo__onda { border-width: 1.5px; }
@keyframes respira { 50% { transform: scale(1.06); } }
@keyframes onda { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes late { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.12); } 40% { transform: scale(.97); } 60% { transform: scale(1.08); } }
/* Escucha: ondas que salen. Piensa: la luz gira deprisa. Habla: late. */
:root[data-nucleo="escucha"] .nucleo__onda { animation: onda 1.3s ease-out infinite; }
:root[data-nucleo="escucha"] .nucleo { animation-duration: 1.6s; }
:root[data-nucleo="piensa"] .nucleo .orbe i, :root[data-nucleo="piensa"] .feed__orbe .orbe i { animation-duration: 1.1s !important; }
:root[data-nucleo="piensa"] .nucleo { animation: respira 1s ease-in-out infinite; }
:root[data-nucleo="habla"] .nucleo { animation: late .9s ease-in-out infinite; }
:root[data-nucleo="habla"] .feed__orbe .orbe, :root[data-nucleo="escucha"] .feed__orbe .orbe { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink-950) 25%, transparent), 0 12px 28px -10px rgb(0 0 0 / .6); }
:root[data-movimiento="reducido"] .nucleo, :root[data-movimiento="reducido"] .nucleo__onda { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .nucleo, .nucleo__onda { animation: none !important; } }
:root[data-movimiento="reducido"][data-nucleo] .nucleo__onda { opacity: .5; }

/* 1.19.0 · Biblioteca por estado o todo el país, y Favoritos que editas. */
.alcance { display: grid; gap: 10px; margin: 0 0 18px; }
.alcance .segmento { width: 100%; }
.alcance .segmento button { flex: 1; }
.alcance .estado-elige { display: flex; gap: 8px; align-items: center; margin: 0; }
.estado-elige__select { position: relative; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 44px; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--ink-950) 14%, transparent); background: var(--papel); color: var(--ink-950); }
.estado-elige__select svg { flex: none; width: 16px; height: 16px; pointer-events: none; }
.estado-elige__select select { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: inherit; font: inherit; font-family: var(--display); font-weight: 700; font-size: 1.05rem; -webkit-appearance: none; appearance: none; cursor: pointer; }
.estado-ala { margin: 0 0 8px; }
.estado-ala summary span { display: inline-flex; gap: 8px; align-items: center; }
.estado-ala summary svg { width: 16px; height: 16px; }
.preferidas .estante__cabeza { align-items: center; }
.preferidas__editar { margin-left: auto; }
.fav-fila { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid color-mix(in oklab, var(--ink-950) 8%, transparent); }
.fav-fila > span:nth-child(2) { flex: 1; min-width: 0; }
.fav-fila b { display: block; font-size: .95rem; }
.fav-fila small { display: block; font-size: .76rem; color: var(--ink-600); }
.fav-fila__icono { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in oklab, var(--ink-950) 6%, transparent); }
.fav-fila__icono svg { width: 18px; height: 18px; }
.fav-fila .chip { flex: none; }
[data-fav-buscar] { width: 100%; }
.portada-ley__nueva { position: absolute; top: 4px; left: 12px; z-index: 2 !important; padding: 2px 7px; border-radius: 999px; background: var(--amarillo); color: var(--amarillo-tinta); font-family: var(--display); font-size: .56rem; font-weight: 700; letter-spacing: .02em; }
.portada-hero__nueva { position: relative; display: inline-flex; gap: 6px; align-items: center; margin: 0 0 8px !important; padding: 4px 10px; border-radius: 999px; background: var(--amarillo); color: var(--amarillo-tinta) !important; opacity: 1 !important; font-size: .78rem !important; font-weight: 700; }
.portada-hero__nueva svg { width: 14px; height: 14px; }

/* 1.19.0 · La bolita vive en la isla de arriba, junto a la ubicación; suelta, flota donde la dejes. La de abajo sobra. */
.isla .subisla.subisla--nucleo { display: none; }
.nucleo-boton { flex: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.nucleo-boton:focus-visible { outline: 2px solid var(--ink-950); outline-offset: 3px; }
.nucleo-boton--suelto { position: fixed; z-index: 70; width: 56px; height: 56px; transition: width .25s var(--ios), height .25s var(--ios); }
.nucleo-boton--arrastra { transform: scale(1.12); transition: transform .15s; }
.nucleo-boton--arrastra .nucleo { animation: none; }
:root[data-vista="reels"] .nucleo-boton--suelto, :root[data-litigar] .nucleo-boton--suelto { opacity: 0; pointer-events: none; }
@media (max-width: 380px) { .nucleo-boton:not(.nucleo-boton--suelto) { width: 38px; height: 38px; } }
/* El lienzo del núcleo va debajo del brillo y de las frases; las manchas de CSS quedan solo de respaldo. */
.orbe > canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; z-index: 0; }
.orbe[data-vivo] > i { display: none; }
.orbe[data-vivo] { background: #000; }
.orbe[data-vivo]::after { display: none; }
:root[data-tema="oscuro"] .orbe[data-vivo] { outline: 1px solid rgb(255 255 255 / .16); outline-offset: -1px; }
/* 1.19.1 · Pregúntame a pantalla completa: se lee como un artículo, sin marco ni isla encima; solo la X para cerrar. */
.litigar, .litigar.litigar--arriba { z-index: 85; padding: 0; align-items: stretch; background: none; }
:root[data-litigar="abierto"] .isla { z-index: 60; opacity: 0; pointer-events: none; }
.litigar__panel, .litigar--arriba .litigar__panel { width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0; padding: max(10px, env(safe-area-inset-top)) 0 max(10px, env(safe-area-inset-bottom)); background: var(--papel); color: var(--ink-950); box-shadow: none; transform-origin: 50% 100%; }
.litigar__panel::after { display: none; }
:root[data-tema="oscuro"] .litigar__panel { background: var(--papel); color: var(--ink-950); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .litigar__panel { background: var(--papel); color: var(--ink-950); } }
.litigar__cabeza { padding: 6px 16px 10px; }
.litigar__marca { font-size: 0; gap: 0; }
.litigar__cerrar { width: 44px; height: 44px; background: var(--ink-100, #f0f0f0); color: var(--ink-950); }
.litigar__cerrar svg { width: 22px; height: 22px; }
.litigar__voz { width: 44px; height: 44px; background: var(--ink-100, #f0f0f0); color: var(--ink-950); }
.litigar__hilo { width: min(720px, 100%); margin: 0 auto; padding: 8px 20px 18px; gap: 14px; }
.litigar__msj { max-width: 100%; font-size: clamp(1.08rem, 4.2vw, 1.22rem); line-height: 1.7; }
.litigar__msj--app { background: none; padding: 4px 0; text-align: justify; hyphens: auto; }
.litigar__msj--yo { max-width: 86%; }
.litigar__cita { font-size: 1rem; line-height: 1.6; padding: 14px 16px; }
.litigar__accion b { font-size: 1rem; } .litigar__accion small { font-size: .84rem; }
.litigar__caja { width: min(720px, calc(100% - 24px)); margin: 0 auto; }
.litigar__caja textarea { font-size: 1.08rem; }
.litigar__nota { margin-bottom: 4px; }
/* Isla y buscador sólidos: al reaparecer no se transparenta lo que hay detrás. */
.barra__caja.vidrio { background-color: color-mix(in oklab, var(--papel) 96%, transparent); }
.buscador-leyes { background: color-mix(in oklab, var(--papel) 98%, transparent); }
:root .litigar .litigar__msj--app, :root[data-tema="oscuro"] .litigar .litigar__msj--app { background: none; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .litigar .litigar__msj--app { background: none; box-shadow: none; } }
.litigar .litigar__msj--app { text-align: left; hyphens: manual; }
.litigar .litigar__msj--app > p { text-align: justify; hyphens: auto; }
/* Antes de presentarlo: cada nota con su artículo, sin viñetas. */
.escrito-notas { display: grid; gap: 10px; margin: 0 0 14px; }
.escrito-notas p { margin: 0; font-size: 1rem; line-height: 1.55; }
.escrito-notas .funds { display: flex; margin-top: 4px; }

/* ——— 1.20 · Idioma ——— */
html[data-traduciendo] body { visibility: hidden; }
.aviso-idioma { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; font-size: .86rem; line-height: 1.45; color: var(--ink-700); }
.aviso-idioma svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ajuste--idioma { flex-wrap: wrap; }
.tarjeta__nota { margin: 14px 0 0; font-size: .8rem; line-height: 1.4; opacity: .72; }

/* 1.23 · Vial: la calculadora va primero, sin rótulo ni pasos; los atajos bajan. */
.seccion__cabeza .marca-texto:empty { display: none; }
.calc--arriba { margin-top: 40px; }
.calc__fila .menu__nombre { text-align: left; }
.calc--arriba .calc__titulo { margin-top: 0; }
.vial-despues { margin-top: 16px; }
.vial-despues .momento__atajos { margin: 0; }

/* 1.24 · Reels: la isla de arriba se estira con el dedo y muestra todas las secciones; la bolita va a la derecha. */
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__cabeza { grid-template-areas: "libros" "isla" "mas" "asa"; }
.feed__mas { grid-area: mas; height: var(--abre, 0px); margin-top: -10px; overflow: hidden; transition: height .35s var(--ios); }
.feed__cabeza[data-abierta] .feed__mas { margin-top: 0; }
.feed__cabeza[data-arrastra] .feed__mas { transition: none; }
.feed__mas-grilla { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 2px 2px 6px; }
.feed__mas-seccion { --c: var(--marca); min-height: 34px; max-width: 100%; padding: 6px 12px; border-radius: 12px; background: color-mix(in oklab, var(--c) 14%, var(--papel)); color: var(--ink-950); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 30%, transparent); font-family: var(--rotulo); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.feed__mas-seccion[aria-pressed="true"] { background: var(--c); color: #fff; }
.feed__asa { position: relative; width: 72px; height: 18px; margin: -6px 0 -4px; background: none !important; touch-action: none; cursor: grab; }
.feed__asa::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 5px; border-radius: 999px; transform: translate(-50%, -50%); background: color-mix(in oklab, var(--ink-950) 22%, transparent); }
.feed__cabeza[data-abierta] .feed__asa::after { width: 26px; }
/* Bolita a la derecha (no al centro); en modo lectura también se ve, para volver con un toque. */
.feed .feed__lengueta--bola { left: auto; right: 10px; transform: translateY(-130%); }
:root[data-cabeza-oculta] .feed .feed__lengueta--bola { transform: translateY(0); }
:root[data-vista="reels"][data-limpio] .feed .feed__lengueta--bola { opacity: .85 !important; transform: translateY(0) !important; pointer-events: auto !important; }

/* «Une las parejas»: frases arriba con su espacio, leyes abajo y un hilo de color entre cada pareja. */
.tarjeta .unir, .feed--inicio .tarjeta[data-ajuste] .unir { position: relative; grid-template-columns: 1fr; row-gap: 34px; }
.tarjeta .unir__col:last-of-type { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tarjeta .unir .unir__a { min-height: 0; }
.tarjeta .unir .unir__b { min-height: 52px; padding: 8px 6px; font-size: .7rem !important; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.tarjeta .unir .opcion { position: relative; z-index: 2; }
.tarjeta .unir .opcion[data-estado="ok"] { box-shadow: inset 0 0 0 2px var(--hilo, var(--marca)); background: color-mix(in oklab, var(--hilo, var(--marca)) 14%, var(--papel)); opacity: 1; }
.unir__hilos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.tarjeta .unir .unir__a:not([data-estado="ok"]) { background: color-mix(in oklab, var(--papel) 92%, var(--ink-950)); }
.unir__hilos path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: hilo .55s var(--ios) forwards; }
@keyframes hilo { to { stroke-dashoffset: 0; } }
:root[data-movimiento="reducido"] .unir__hilos path { animation: none; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .unir__hilos path { animation: none; stroke-dashoffset: 0; } }

/* 1.25 · Leyes: selección por sección bajo el buscador, selector de estado tipo formulario, Favoritos plegable. */
.vitrina__chips--arriba { margin-top: 2px; margin-bottom: 8px; }
.ala__cabeza .marca-texto:empty { display: none; }
.campo-premium { position: relative; margin: 6px 0 18px; }
.campo-premium__etq { position: absolute; left: 18px; top: -8px; z-index: 1; padding: 0 6px; border-radius: 6px; background: var(--fondo); color: var(--ink-500); font-family: var(--rotulo); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.campo-premium__valor { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: 20px; background: var(--papel); color: var(--ink-950); box-shadow: inset 0 0 0 1.5px var(--ink-150), 0 12px 26px -20px rgb(0 0 0 / .35); text-align: left; transition: box-shadow .2s, transform .15s var(--ios); }
.campo-premium__valor:active { transform: scale(.99); }
.campo-premium__valor:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--marca), 0 0 0 4px var(--marca-50); }
.campo-premium__valor > svg { flex: none; width: 18px; height: 18px; color: var(--ink-500); }
.campo-premium__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--marca-50); color: var(--marca); }
.campo-premium__ic svg { width: 20px; height: 20px; }
.campo-premium__txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.campo-premium__txt b { font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.campo-premium__txt small { font-size: .78rem; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-estado__busca { margin: 4px 0 12px; }
.selector-estado { display: grid; gap: 6px; }
.selector-estado [data-lista-estados] { display: grid; gap: 6px; }
.selector-estado__op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 7px 14px 7px 7px; border-radius: 16px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); text-align: left; color: var(--ink-950); }
.selector-estado__op[hidden] { display: none; }
.selector-estado__op > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.selector-estado__op b { font-size: 1rem; overflow-wrap: anywhere; }
.selector-estado__op small { font-size: .78rem; color: var(--ink-500); }
.selector-estado__op > svg { flex: none; width: 20px; height: 20px; color: var(--marca); }
.selector-estado__op[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--marca); }
.selector-estado__op .campo-premium__ic { width: 40px; height: 40px; border-radius: 12px; }
.selector-estado__sep { margin: 10px 2px 2px; font-family: var(--rotulo); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); text-align: left; }
[data-vitrina-boton] { margin: 4px 0 6px; }
.favoritos-plegable { padding-bottom: 12px; }
.favoritos-plegable > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; margin: 0 !important; }
.favoritos-plegable > summary::-webkit-details-marker { display: none; }
.favoritos-plegable__n { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: color-mix(in oklab, var(--oro) 22%, transparent); font-size: .74rem; font-weight: 700; text-align: center; }
.favoritos-plegable__ver { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-size: .84rem; font-weight: 600; color: var(--ink-600); }
.favoritos-plegable__ver svg { width: 16px; height: 16px; transition: transform .2s var(--ios); }
.favoritos-plegable[open] .favoritos-plegable__ver svg { transform: rotate(90deg); }
.favoritos-plegable__barra { display: flex; justify-content: flex-end; margin: 10px 0 4px; }
.favoritos-plegable[open] { padding-bottom: 4px; }

/* 1.26 · Derechos: entrada por situación, Defiéndete compacto y Mi carpeta (el carrusel se retiró en 1.67). */
.der-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.der-cabeza .seccion__cabeza { margin-bottom: 0; }
.der-situaciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.der-situaciones button { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px; border-radius: 16px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-950); font-size: .88rem; font-weight: 600; line-height: 1.2; text-align: left; overflow-wrap: anywhere; }
.der-situaciones svg { flex: none; width: 18px; height: 18px; color: var(--marca); }
.defiendete--compacto { margin: 0 0 8px; padding: 0; background: none; box-shadow: none; }
.defiendete__rotulo { display: flex; align-items: center; gap: 6px; }
.defiendete__rotulo svg { width: 14px; height: 14px; }
.defiendete__chips { margin-top: 6px; }
.der-fila { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 9px 10px 9px 12px; border-radius: 16px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-950); text-align: left; }
.der-fila > svg:first-child { flex: none; width: 18px; height: 18px; color: var(--c); }
.der-fila > svg:last-child { flex: none; width: 16px; height: 16px; color: var(--ink-400); }
.der-fila > span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.der-fila b { font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.der-fila small { font-size: .78rem; line-height: 1.3; color: var(--ink-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.der-carpeta { margin-top: 22px; }
.der-carpeta__cuerpo { padding: 10px 0 8px; }
.der-carpeta__vacia { margin: 0 0 10px; font-size: .9rem; color: var(--ink-600); }
.der-carpeta__ver-menos, .der-carpeta[open] .der-carpeta__ver-mas { display: none; }
.der-carpeta[open] .der-carpeta__ver-menos { display: inline; }
.der-carpeta .legal__f { display: flex; flex-wrap: wrap; gap: 6px; }
.der-mas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.der-mas > * { display: grid; min-height: 56px; justify-items: center; gap: 2px; padding: 14px 6px; border-radius: 18px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-950); text-align: center; }
.der-mas svg { width: 20px; height: 20px; color: var(--marca); margin-bottom: 2px; }
.der-mas b { font-size: .9rem; }
.der-mas small { font-size: .7rem; color: var(--ink-500); line-height: 1.2; }
@media (max-width: 360px) { .der-situaciones { grid-template-columns: 1fr; } }

/* 1.28.0 · La bolita de Reels «habla»: una nube pequeña de vidrio a su izquierda con las mismas frases que rotan
   en Pregúntame. Sutil: letra chica, fondo translúcido y una colita hacia la bola. */
.feed__lengueta--bola { overflow: visible; }
.bola__nube { position: absolute; right: calc(100% + 4px); top: calc(max(6px, env(safe-area-inset-top)) + 17px); translate: 0 -50%; display: grid; overflow: hidden;
  min-width: 92px; max-width: 46vw; padding: 5px 11px; border-radius: 14px 14px 4px 14px; pointer-events: none;
  font: 600 .74rem/1.2 var(--display); letter-spacing: -.01em; white-space: nowrap; text-align: center;
  color: color-mix(in oklab, var(--ink-950) 72%, transparent);
  background: color-mix(in oklab, var(--superficie, #fff) 62%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid color-mix(in oklab, var(--ink-950) 8%, transparent); box-shadow: 0 6px 18px -10px rgb(0 0 0 / .35);
  opacity: .9; animation: nubeFlota 4.5s ease-in-out infinite; }
.bola__nube > span { grid-area: 1 / 1; }
.bola__nube .frase-entra { animation: fraseEntra .5s cubic-bezier(.2, .8, .2, 1) both; }
.bola__nube .frase-sale { animation: fraseSale .45s ease-in both; }
:root[data-tema="oscuro"] .bola__nube { color: rgb(255 255 255 / .82); background: rgb(30 30 34 / .55); border-color: rgb(255 255 255 / .1); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .bola__nube { color: rgb(255 255 255 / .82); background: rgb(30 30 34 / .55); border-color: rgb(255 255 255 / .1); } }
@keyframes nubeFlota { 50% { transform: translateY(-2px); } }
:root[data-movimiento="reducido"] .bola__nube { animation: none; }
:root[data-movimiento="reducido"] .bola__nube .frase-sale { display: none; }
@media (prefers-reduced-motion: reduce) { .bola__nube { animation: none; } }
/* En modo lectura la nube baja aún más el tono, para no distraer del reel. */
:root[data-vista="reels"][data-limpio] .bola__nube { opacity: .6; }

/* 1.28.0 · Cambiar de sección deslizando: la nueva página entra desde el lado hacia donde fue el dedo. */
.pagina--de-der { animation: paginaDeDer .32s cubic-bezier(.2, .8, .2, 1) both; }
.pagina--de-izq { animation: paginaDeIzq .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes paginaDeDer { from { opacity: .4; transform: translateX(14%); } }
@keyframes paginaDeIzq { from { opacity: .4; transform: translateX(-14%); } }
:root[data-movimiento="reducido"] .pagina--de-der, :root[data-movimiento="reducido"] .pagina--de-izq { animation: none; }
@media (prefers-reduced-motion: reduce) { .pagina--de-der, .pagina--de-izq { animation: none; } }
.bola__nube { text-transform: none; }

/* 1.30 · Reels: la isla de arriba por escalones. Bolita → panel de Pregúntame a todo el renglón (tema y ajustes
   viven dentro, como en el buscador de Leyes) → secciones compactas debajo. Cada desliz mueve un escalón. */
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__cabeza { grid-template-areas: "isla" "mas" "asa"; gap: 8px; }
.feed--inicio .feed__cabeza .libritos { display: none; }
.feed__panel { position: relative; flex: 1; min-width: 0; display: flex; }
.feed__panel .feed__orbe { height: 54px; }
.feed__panel .orbe__frase { padding-right: 84px; }
.feed__panel-acc { position: absolute; z-index: 2; right: 7px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; padding-left: 6px; border-left: 1px solid rgb(255 255 255 / .22); }
.feed__panel-ic { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 999px; background: transparent; color: rgb(255 255 255 / .88); text-shadow: none; cursor: pointer; transition: background .2s var(--suave), color .2s var(--suave); -webkit-tap-highlight-color: transparent; }
.feed__panel-ic:hover, .feed__panel-ic:focus-visible { background: rgb(255 255 255 / .14); color: #fff; }
.feed__panel-ic svg { width: 19px; height: 19px; }
@media (max-width: 380px) { .feed__panel .feed__orbe { height: 48px; } .feed__panel-ic { width: 34px; height: 34px; } .feed__panel .orbe__frase { padding-right: 76px; } }
/* Al pasar de reel el panel se queda en su lugar y las secciones se recogen. */
:root[data-vista="reels"][data-inmerso] .feed--inicio .feed__cabeza { transform: none; }
:root[data-vista="reels"][data-inmerso] .feed--inicio .feed__mas { height: 0; margin-top: -8px; }
/* Secciones compactas: chips con su punto de color, en minúsculas y bien alineados. */
.feed__mas { margin-top: -8px; }
.feed__mas-grilla { justify-content: flex-start; gap: 6px; padding: 2px 2px 8px; }
.feed__mas-titulo { flex-basis: 100%; margin: 2px 4px 2px; font-family: var(--rotulo); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.feed__mas-seccion { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: color-mix(in oklab, var(--ink-950) 5%, var(--papel)); color: var(--ink-900); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink-950) 8%, transparent); font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; transition: background .2s var(--suave), color .2s var(--suave), transform .15s var(--suave); }
.feed__mas-seccion::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 999px; background: var(--c); }
.feed__mas-seccion:active { transform: scale(.96); }
.feed__mas-seccion[aria-pressed="true"] { background: var(--c); color: #fff; box-shadow: 0 6px 14px -8px var(--c); }
.feed__mas-seccion[aria-pressed="true"]::before { background: #fff; }
/* Fueguito de racha arriba de Escuchar: gris hasta el primer artículo del día, encendido después. */
.tarjeta__racha svg { color: var(--ink-400); }
.tarjeta__racha[data-encendida] svg { color: #ff7a1a; fill: #ffb347; background: color-mix(in oklab, #ff7a1a 16%, var(--sup2, transparent)) !important; }
.tarjeta__racha small { font-variant-numeric: tabular-nums; font-weight: 800; opacity: 1; }
.tarjeta__racha[data-encendida] small { color: #ff7a1a; }
/* Vial y Derechos: tema y ajustes dentro de su buscador, igual que en Leyes; los botones sueltos de arriba sobran. */
:root[data-vista="transito"] .barra__bajo, :root[data-vista="derechos"] .barra__bajo { display: none; }
.calc--arriba { margin-top: 12px; }
.calc__buscador .buscador__ic svg { width: 19px; height: 19px; color: currentColor; }
/* Justo con IA (1.31.0): la respuesta razonada va primero, con filete dorado; cada cita es un botón al artículo oficial. */
.ingo-ia { margin: 0 0 14px; padding: 2px 0 2px 16px; box-shadow: inset 2px 0 0 var(--oro); }
.ingo-ia p { margin: 0 0 8px; }
.ingo-ia__rotulo { display: flex; align-items: center; gap: 8px; font-family: var(--libro); font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 600; font-size: .95rem; }
.ingo-ia__rotulo svg { width: 18px; height: 18px; color: var(--oro); }
.ingo-ia__cita { display: inline; padding: 0 2px; font: inherit; font-family: var(--libro); font-variant-caps: all-small-caps; letter-spacing: .04em; font-weight: 600; color: #8a6d1f; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--oro) 55%, transparent); text-underline-offset: 3px; background: none; }
:root[data-tema="oscuro"] .ingo-ia__cita { color: var(--oro); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .ingo-ia__cita { color: var(--oro); } }
.ingo-ia__aviso { font-size: .8rem; opacity: .7; }
.ingo-ia p, .ingo-ia li { text-align: left; hyphens: manual; }
.ingo-ia__cita { white-space: nowrap; }
/* ——— Escritorio (1.32.0): la barra de arriba se vuelve un riel lateral fijo con iconos, atajos (1-6, ← →, /),
   911, ubicación, Pregúntame, tema y ajustes; los Reels quedan en una columna central y siempre hay navegación. ——— */
.barra__911 { display: none; }
.barra__nav kbd { display: none; }
@media (min-width: 961px) {
  :root { --riel: 252px; --alto-barra: 28px; }
  .barra, .barra[data-escondida="true"], :root[data-vista="reels"] .barra { inset: 0 auto 0 0; width: var(--riel); padding: 12px 0 12px 12px; transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
  .barra .envoltura { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; }
  .barra__caja { flex: 1; min-height: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 20px 12px 12px; border-radius: 28px; overflow-y: auto; scrollbar-width: none; }
  .barra .logo { padding: 0 8px 18px; }
  .barra__nav { flex-direction: column; gap: 2px; margin: 0; }
  .barra__nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; font-size: .95rem; }
  .barra__nav a svg { width: 20px; height: 20px; flex: none; }
  .barra__nav kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 5px; border-radius: 6px; font: 700 .68rem/1 var(--sans); opacity: 0; box-shadow: inset 0 0 0 1px currentColor; transition: opacity .2s; }
  .barra__nav a:hover kbd, .barra__nav a:focus-visible kbd { opacity: .5; }
  .barra__acciones { margin: auto 0 0; padding-top: 16px; flex-direction: column; align-items: stretch; gap: 8px; }
  .barra .nucleo-boton:not(.nucleo-boton--suelto) { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0 12px 0 8px; border-radius: 16px; background: var(--ink-100); text-align: left; }
  .barra .nucleo-boton:not(.nucleo-boton--suelto) .nucleo { width: 36px; height: 36px; }
  .barra .nucleo-boton:not(.nucleo-boton--suelto)::after { content: "Pregúntame tu caso"; font-size: .9rem; font-weight: 700; color: var(--ink-900); }
  .barra .nucleo-boton:not(.nucleo-boton--suelto):hover { background: var(--ink-150); }
  .barra__911 { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 14px; background: #d62828; color: #fff; font-size: .9rem; font-weight: 700; transition: background-color .2s; }
  .barra__911:hover { background: #b71f1f; }
  .barra__911 svg { width: 19px; height: 19px; }
  .barra .ubicacion-pill { width: 100%; max-width: none; height: 44px; border-radius: 14px; justify-content: flex-start; padding: 0 14px; }
  .barra .ubicacion-pill span { overflow: hidden; text-overflow: ellipsis; }
  .barra__caja { padding-bottom: 66px; }
  .barra .barra__bajo { position: absolute; top: auto; right: auto; left: 12px; bottom: 12px; display: flex !important; gap: 8px; padding: 0 0 0 4px; }
  .barra .barra__bajo .icono-redondo { width: 40px; height: 40px; background: var(--ink-100); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .paginas .envoltura { width: min(1240px, 100% - 64px); }
  .pestanas, .isla { display: none !important; }
  .paginas { margin-left: var(--riel); }
  .pagina { padding-top: 28px; }
  /* El tema y los ajustes ya viven en el riel: los buscadores y el panel de los Reels quedan limpios. */
  .pagina .buscador__acciones, .feed__panel-acc { display: none; }
  .aviso-toast { left: calc(50% + var(--riel) / 2); }
  .hoja { left: calc(50% + var(--riel) / 2); width: min(760px, 100% - var(--riel)); }
  .hoja--ancha { width: min(1080px, 100% - var(--riel)); }
  /* Reels: una columna central, como en una pantalla de video, con su isla de Pregúntame del mismo ancho. */
  #reels.pagina { padding: 0; }
  .feed--inicio .feed__cabeza { width: min(720px, 100% - 48px); margin-inline: auto; }
  .feed--inicio .tarjeta { width: min(720px, 100% - 48px); margin-inline: auto; padding-inline: 28px 12px; grid-template-columns: 1fr 64px; }
  .feed--inicio .feed__guia { left: 50%; }
  /* Vial: las infracciones frecuentes en dos columnas. */
  .calc__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__lista > p { grid-column: 1 / -1; }
}
@media (min-width: 961px) and (max-width: 1199px) {
  :root { --riel: 96px; }
  .barra__caja { padding: 16px 8px 10px; }
  .barra .logo { justify-content: center; padding: 0 0 14px; }
  .barra .logo > span { display: none; }
  .barra__nav a { flex-direction: column; gap: 3px; padding: 9px 4px; font-size: .68rem; text-align: center; }
  .barra__nav kbd { display: none; }
  .barra .nucleo-boton:not(.nucleo-boton--suelto) { grid-template-columns: 1fr; justify-items: center; height: 56px; padding: 0; }
  .barra .nucleo-boton:not(.nucleo-boton--suelto)::after { content: none; }
  .barra__911 { justify-content: center; padding: 0; }
  .barra__911 span { display: none; }
  .barra .ubicacion-pill { justify-content: center; padding: 0; }
  .barra .ubicacion-pill span { display: none; }
  .barra__caja { padding-bottom: 112px; }
  .barra .barra__bajo { left: 0; right: 0; flex-direction: column; align-items: center; padding: 0; }
  .paginas .envoltura { width: min(1240px, 100% - 48px); }
}

/* 1.35.0 · Secciones Leyes y Libros arriba de la biblioteca, y «Todo México» en la píldora junto a la bola. */
.vista-bib { width: 100%; margin: 6px 0 18px; padding: 4px; }
.vista-bib button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 12px; font-size: .92rem; }
.vista-bib svg { width: 17px; height: 17px; }

/* 1.35.0 · Reels: solo la isla negra, sin ventana de fondo. Su lengüeta la abre hacia abajo y ahí mismo, en negro,
   aparece un carrusel de secciones con su color, su ícono y el título grande. */
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__cabeza { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; box-shadow: none; gap: 6px; }
.feed--inicio .feed__mas { margin-top: -6px; border-radius: 26px; background: #0b0b0c; box-shadow: 0 18px 34px -22px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 255 255 / .06); }
.feed--inicio .feed__cabeza[data-abierta] .feed__mas { margin-top: 0; }
.feed--inicio .feed__mas-grilla { display: block; padding: 12px 0 14px; }
.feed--inicio .feed__mas-titulo { display: flex; align-items: baseline; justify-content: space-between; margin: 0 16px 10px; color: rgb(255 255 255 / .62); }
.feed--inicio .feed__mas-titulo small { font-family: var(--texto, inherit); font-size: .7rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgb(255 255 255 / .42); }
.feed__carrusel { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; padding: 2px 14px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.feed__carrusel::-webkit-scrollbar { display: none; }
.feed__sec { --c: #2f7a55; flex: 0 0 auto; scroll-snap-align: start; display: grid; align-content: space-between; gap: 10px; width: 132px; min-height: 104px; padding: 12px; border-radius: 20px; text-align: left; color: #fff;
  background: linear-gradient(155deg, color-mix(in oklab, var(--c) 92%, #fff) 0%, color-mix(in oklab, var(--c) 70%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 10px 20px -14px var(--c); transition: transform .2s var(--ios), box-shadow .2s var(--ios); -webkit-tap-highlight-color: transparent; }
.feed__sec:active { transform: scale(.96); }
.feed__sec[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff, 0 12px 24px -12px var(--c); }
.feed__sec-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgb(255 255 255 / .2); }
.feed__sec-ic svg { width: 18px; height: 18px; }
.feed__sec b { font-family: var(--display); font-size: 1.02rem; font-weight: 700; line-height: 1.18; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.feed--inicio .feed__asa { margin: -2px 0 -6px; }
.feed--inicio .feed__asa::after { width: 42px; height: 5px; background: rgb(12 12 12 / .55); box-shadow: 0 0 0 1px rgb(255 255 255 / .35); }
:root[data-tema="oscuro"] .feed--inicio .feed__asa::after { background: rgb(255 255 255 / .55); box-shadow: 0 0 0 1px rgb(0 0 0 / .35); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .feed--inicio .feed__asa::after { background: rgb(255 255 255 / .55); box-shadow: 0 0 0 1px rgb(0 0 0 / .35); } }

/* 1.36.0 · En tu mesa son tus Favoritos (con «Editar») y Libros es la sección de libros de autores. */
.mesa { margin: 0 0 6px; }
.mesa .portadas__titulo { margin-bottom: 10px; }
.mesa .portadas__titulo::after { order: 1; }
.mesa .portadas__titulo .mesa__editar { order: 2; height: 30px; padding: 0 11px; font-size: .74rem; letter-spacing: 0; text-transform: none; }
.mesa .portadas { grid-auto-columns: 156px; gap: 12px; margin: 0 -16px 10px; padding: 2px 16px 14px; }
.libros-autores__intro { margin: 0 0 12px; color: var(--ink-600); font-size: .92rem; line-height: 1.45; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.lomo--autor .lomo__sigla { font-family: var(--display); font-size: .6rem; letter-spacing: 0; text-overflow: ellipsis; }
.libro-ficha { display: grid; gap: 6px; padding: 18px; margin: 0 0 14px; border-radius: 20px; color: #fff; background: linear-gradient(155deg, color-mix(in oklab, var(--c) 88%, #fff) 0%, color-mix(in oklab, var(--c) 62%, #000) 100%); }
.libro-ficha__tema { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.libro-ficha__tema svg { width: 15px; height: 15px; }
.libro-ficha h3 { margin: 4px 0 0; font-family: var(--clasica); font-size: 1.4rem; line-height: 1.2; }
.libro-ficha__autor { margin: 0; font-weight: 700; }
.libro-ficha__datos { margin: 0; font-size: .85rem; opacity: .8; }

/* 1.36.1 · Aviso de versión nueva, sin interrumpir la lectura. */
.aviso-version { position: fixed; z-index: 121; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 12px 18px; border: 0; border-radius: 999px; background: var(--ink-950); color: var(--papel); font: inherit; font-size: .88rem; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 28px rgb(0 0 0 / .28); cursor: pointer; }
.aviso-version svg { width: 16px; height: 16px; }
@media (min-width: 961px) { .aviso-version { bottom: 28px; left: calc(50% + var(--riel) / 2); } }

/* 1.37.0 · Pregúntame se ubica con lo que dices */
.litigar__ubicado { display: inline; }
.litigar__ubicado i { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }
.litigar__volver { display: block; margin-top: 8px; padding: 6px 12px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .85em; opacity: .8; }
.litigar__volver:disabled { opacity: .4; }

/* 1.37.0 · Cabecera hasta el asa */
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__cabeza { isolation: isolate; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
.feed--inicio .feed__panel .orbe, .feed--inicio .feed__panel .orbe[data-vivo] { background: none; box-shadow: none; outline: 0; }
.feed--inicio .feed__panel .orbe > canvas { display: none; }
.feed--inicio .tarjeta { padding-top: calc(var(--alto-cabeza, 172px) + 14px); }
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__asa { height: 26px; margin: -2px 0 -4px; }
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__asa::after { top: 7px; background: rgb(255 255 255 / .6); box-shadow: none; }

/* 1.37.0 · Títulos de los reels: grandes y formales */
.feed--inicio .tarjeta h3 { font-family: var(--libro); text-transform: none; font-weight: 600; font-size: clamp(2.3rem, 10.5vw, 3.3rem); line-height: 1.06; letter-spacing: -.018em; }

/* 1.37.0 · Al deslizar: sin íconos a la derecha, texto a todo el ancho */
.feed--inicio .tarjeta { transition: padding-top .6s cubic-bezier(.2, .9, .25, 1), grid-template-columns .35s cubic-bezier(.45, 0, .2, 1); }

/* 1.37.0 · Isla de secciones (mismo lenguaje que la hoja de productos de la tienda de INTEGRA) */
.islita { --alto: min(68dvh, 540px); --chica: calc(74px + env(safe-area-inset-bottom)); position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 0; height: var(--alto); display: flex; flex-direction: column; border-radius: 26px 26px 0 0; background: #1c1c1e; color: #fff; box-shadow: 0 -14px 34px -18px rgb(0 0 0 / .7); opacity: 0; pointer-events: none; transform: translateY(100%); transition: transform .42s cubic-bezier(.2, .9, .25, 1), opacity .3s; }
:root[data-vista="reels"]:is([data-inmerso], [data-limpio]) .islita { opacity: 1; pointer-events: auto; transform: translateY(calc(var(--alto) - var(--ve) + var(--dedo, 0px))); }
.islita[data-estado="oculta"] { --ve: -30px; }
.islita[data-estado="chica"] { --ve: var(--chica); }
.islita[data-arrastra] { transition: none; }
.islita__cabeza { flex: none; touch-action: pan-x; padding-bottom: 8px; }
.islita__asa { display: block; width: 100%; height: 20px; padding: 0; border: 0; background: none; touch-action: none; cursor: grab; }
.islita__asa::after { content: ""; display: block; width: 40px; height: 5px; margin: 7px auto 0; border-radius: 999px; background: rgb(255 255 255 / .4); }
.islita__fila { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 12px; }
.islita__bola, .islita__lupa { flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgb(255 255 255 / .1); }
.islita__bola { position: relative; overflow: hidden; background: none; }
.islita__bola .orbe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: inherit; }
.islita__lupa svg { width: 22px; height: 22px; }
.islita__chips { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding-right: 12px; scrollbar-width: none; }
.islita__chips::-webkit-scrollbar { display: none; }
.islita__chip { flex: none; padding: 8px 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .1); color: #fff; font: 600 .85rem var(--rotulo); }
.islita__chip[aria-pressed="true"] { background: var(--c); }

/* 1.37.0 · Pellizco */
.zoom-marca { position: fixed; z-index: 90; left: 50%; top: 50%; padding: 8px 16px; border-radius: 999px; background: rgb(0 0 0 / .75); color: #fff; font: 600 1rem var(--rotulo); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .2s; }
.zoom-marca[data-ver] { opacity: 1; }
.zoom-marca { display: flex; align-items: center; gap: 10px; }
.zoom-marca button { display: none; padding: 4px 12px; border-radius: 999px; background: #fff; color: #111; font: inherit; font-size: .85rem; }
.zoom-marca[data-ajustar] { pointer-events: auto; }
.zoom-marca[data-ajustar] button { display: block; }

/* 1.37.0 · Resumen de un artículo */
.explica { margin-bottom: 16px; }
.explica__rotulo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 .8rem var(--rotulo); opacity: .75; }
.explica__rotulo svg { width: 16px; height: 16px; }
.explica__resumen { margin: 0 0 12px; font-size: 1.2rem; line-height: 1.5; }
.explica__puntos { margin: 0 0 12px; padding-left: 20px; line-height: 1.5; }
.explica__palabras { margin: 0 0 12px; }
.explica__palabras dt { font-weight: 700; }
.explica__palabras dd { margin: 0 0 8px; opacity: .85; }

/* 1.37.0 · Libros de frente */
.estante__libros:has(.libro-frente) { align-items: flex-end; gap: 12px; }
.libro-frente { flex: none; width: 118px; padding: 0; border: 0; background: none; color: inherit; text-align: left; scroll-snap-align: start; }
.libro-frente__hecha { height: 168px; }
.libro-frente img, .libro-frente__hecha { display: block; width: 118px; border-radius: 4px 8px 8px 4px; box-shadow: 0 10px 18px -10px rgb(0 0 0 / .6), inset 3px 0 0 rgb(0 0 0 / .12); }
.libro-frente__hecha { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 10px; color: #fff; background: linear-gradient(155deg, color-mix(in oklab, var(--c) 86%, #fff), color-mix(in oklab, var(--c) 82%, #000)); }
.libro-frente__hecha b { font: 600 .82rem/1.2 var(--display); }
.libro-frente__hecha svg { width: 46px; height: 46px; stroke-width: 1.4; opacity: .92; }
.libro-frente small { display: block; margin-top: 6px; font-size: .72rem; line-height: 1.25; opacity: .75; }
.libro-ficha__portada { display: block; width: 150px; margin: 0 auto 14px; border-radius: 5px 9px 9px 5px; box-shadow: 0 16px 28px -14px rgb(0 0 0 / .7); }
.libro-ficha__arte { display: grid; place-items: center; width: 118px; height: 168px; margin: 0 auto 14px; border-radius: 5px 9px 9px 5px; color: #fff; background: linear-gradient(155deg, color-mix(in oklab, var(--c) 86%, #fff), color-mix(in oklab, var(--c) 82%, #000)); box-shadow: 0 16px 28px -14px rgb(0 0 0 / .7), inset 3px 0 0 rgb(0 0 0 / .12); }
.libro-ficha__arte svg { width: 58px; height: 58px; stroke-width: 1.3; }
.boton + .boton { margin-top: 8px; }
.estante__libros:has(.libro-frente) { padding-inline: 16px; scroll-padding-inline: 16px; }

/* 1.37.0 · Cabecera de los reels a la mitad de su alto */
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__cabeza { gap: 0; padding: max(4px, env(safe-area-inset-top)) 10px 0; }
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__isla { min-height: 0; padding: 0; }
.feed--inicio .feed__panel .feed__orbe { height: 40px; }
.feed--inicio .feed__panel .orbe__frase { font-size: 1.2rem; }
.feed--inicio .feed__panel-ic { width: 30px; height: 30px; }
.feed--inicio .feed__panel-ic svg { width: 16px; height: 16px; }
.feed--inicio .feed__panel-acc { right: 2px; }
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__asa { height: 16px; margin: 0; }
:root:is([data-tema], :not([data-tema])) .feed--inicio .feed__asa::after { display: none; }
.feed--inicio .feed__panel-acc { border-left: 0; }

/* 1.37.0 · Pregúntame: círculos de grabar, guardar y enviar */
.litigar__forma { display: grid; gap: 10px; }
.litigar__dock { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 2px 0 0; }
.litigar__circulo, .litigar__grabar { display: grid; justify-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.litigar__circulo svg { box-sizing: content-box; width: 22px; height: 22px; padding: 16px; border-radius: 999px; background: rgb(127 127 127 / .2); transition: opacity .2s, transform .15s; }
.litigar__circulo small, .litigar__grabar small { font: 600 .72rem var(--rotulo); font-variant-numeric: tabular-nums; opacity: .8; }
.litigar__circulo:disabled { opacity: .35; }
.litigar__circulo:active:not(:disabled) svg { transform: scale(.93); }
.litigar__circulo--enviar svg { background: #fff; color: #000; }
:root[data-tema="claro"] .litigar__circulo--enviar svg { background: #0d0d0d; color: #fff; }
.litigar__grabar { position: relative; }
.litigar__punto { position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 999px; box-shadow: inset 0 0 0 3px currentColor; }
.litigar__punto::after { content: ""; width: 58px; height: 58px; border-radius: 999px; background: #e0312f; transition: width .22s var(--ios, ease), height .22s var(--ios, ease), border-radius .22s var(--ios, ease); }
.litigar__grabar[aria-pressed="true"] .litigar__punto::after { width: 30px; height: 30px; border-radius: 8px; }
.litigar__grabar[aria-pressed="true"] .litigar__punto { animation: grabaPulso 1.6s ease-out infinite; }
@keyframes grabaPulso { 0% { box-shadow: inset 0 0 0 3px currentColor, 0 0 0 0 rgb(224 49 47 / .5); } 100% { box-shadow: inset 0 0 0 3px currentColor, 0 0 0 18px rgb(224 49 47 / 0); } }
:root[data-movimiento="reducido"] .litigar__grabar[aria-pressed="true"] .litigar__punto { animation: none; }
.litigar__voz, :root:is([data-tema], :not([data-tema])) .litigar__voz { display: inline-flex; align-items: center; gap: 7px; width: auto; height: 44px; padding: 0 15px; margin-left: auto; font: 600 .85rem var(--rotulo); white-space: nowrap; }
.litigar__voz svg { width: 22px; height: 22px; }
:root:is([data-tema], :not([data-tema])) .litigar__voz[aria-pressed="true"] { background: var(--oro); color: #111; box-shadow: 0 0 0 4px color-mix(in oklab, var(--oro) 28%, transparent); }
.litigar__notas { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; margin-right: 8px; border: 0; border-radius: 999px; background: rgb(127 127 127 / .18); color: inherit; }
.litigar__notas svg { width: 20px; height: 20px; }
.litigar__notas + .litigar__voz { margin-left: 0; }
.nota-audio { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid rgb(127 127 127 / .25); }
.nota-audio header { display: flex; justify-content: space-between; gap: 10px; }
.nota-audio audio { width: 100%; height: 40px; }
.nota-audio p { margin: 0; opacity: .8; }
.nota-audio__acc { display: flex; gap: 8px; }
.litigar__circulo--enviar svg, :root[data-tema="claro"] .litigar__circulo--enviar svg { background: var(--ink-950); color: var(--papel); }
.litigar__cabeza { justify-content: flex-start; }
.litigar__dock { padding-bottom: 4px; }

/* 1.38.0 · Reels sin panel superior */
.feed--inicio .feed__cabeza, .feed--inicio .feed__lengueta { display: none !important; }
:root[data-vista="reels"] .feed--inicio .tarjeta { padding-top: max(26px, calc(env(safe-area-inset-top) + 14px)); }

/* 1.38.0 · La bola: balanza con líneas blancas; en los reels solo las líneas */
.nucleo-boton, .subisla--nucleo { display: none !important; }
.isla a.isla__centro, .isla .isla__centro { position: relative; align-self: stretch; }
.isla .isla__centro .isla__bola { position: absolute; z-index: 2; left: 50%; bottom: 6px; overflow: hidden; transform: translateX(-50%); transition: width .5s cubic-bezier(.2, .9, .25, 1), height .5s cubic-bezier(.2, .9, .25, 1); }
.isla .isla__centro .isla__bola .orbe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: inherit; box-shadow: none; }
.isla .isla__centro .isla__bola > svg { position: relative; z-index: 1; }
:root[data-vista="reels"] .isla .isla__centro .isla__bola > svg { display: none; }
:root[data-vista="reels"] .feed--inicio .tarjeta { padding-bottom: 14px; }

/* 1.38.0 · Chat al abrir: una frase grande, casos frecuentes y «Cuéntame» sobre grabar */
.litigar__inicio { display: grid; gap: 18px; align-content: center; min-height: 100%; }
.litigar__hola { margin: 0; font: 600 clamp(2.5rem, 12vw, 3.4rem)/1.05 var(--display); letter-spacing: -.02em; }
.litigar__rapidos { display: flex; flex-wrap: wrap; gap: 8px; }
.litigar__rapidos button { padding: 11px 15px; border: 1px solid rgb(127 127 127 / .35); border-radius: 999px; background: none; color: inherit; font: 500 1.05rem/1.15 var(--rotulo); }
.litigar__rapidos button:active { transform: scale(.97); }
.litigar__dock { align-items: flex-end; }
.litigar__cuentame { font: 700 1.5rem/1 var(--display); letter-spacing: -.01em; margin-bottom: 4px; }


/* 1.38.1 · Secciones más grandes en modo lectura */
.islita { --chica: calc(88px + env(safe-area-inset-bottom)); --alto: var(--chica); }
.islita__chip { padding: 11px 18px; font-size: 1.02rem; }

/* 1.38.2 · Bola flotante del modo lectura y su nube */
:root[data-vista="reels"]:is([data-limpio], [data-inmerso]) :root[data-litigar] @media (min-width: 961px) { .bola-nube { display: none !important; } }
.bola-nube { position: fixed; z-index: 63; left: 0; top: 0; max-width: 220px; padding: 8px 13px; border: 0; border-radius: 16px; background: rgb(17 17 17 / .78); color: #fff; font: 500 .88rem/1.2 var(--rotulo); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(6px) scale(.94); transform-origin: var(--cola, 50%) 100%; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .9, .25, 1); }
.bola-nube::after { content: ""; position: absolute; left: var(--cola, 50%); bottom: -6px; width: 14px; height: 6px; margin-left: -7px; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bola-nube[data-abajo]::after { top: -6px; bottom: auto; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bola-nube[data-ver] { opacity: 1; pointer-events: auto; transform: none; }
.bola-nube[data-explota] { opacity: 0; pointer-events: none; transform: scale(1.4); transition: opacity .22s ease-out, transform .22s ease-out; }
.bola-chispa { position: fixed; z-index: 63; width: 7px; height: 7px; margin: -3.5px; border-radius: 999px; background: rgb(17 17 17 / .75); box-shadow: 0 0 0 1px rgb(255 255 255 / .5); pointer-events: none; animation: bolaChispa .42s cubic-bezier(.15, .7, .3, 1) both; }
@keyframes bolaChispa { to { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); } }
@media (prefers-reduced-motion: reduce) { .bola-chispa { display: none; } }
:root[data-movimiento="reducido"] .bola-chispa { display: none; }

/* 1.39.1 · Ubicación compacta en el panel superior: del ancho de su texto */
@media (max-width: 960px) {
  .barra__caja .ubicacion-pill { height: 42px; max-width: 46vw; gap: 6px; padding: 0 14px 0 11px; font-size: .9rem; }
  .barra__caja .ubicacion-pill svg { width: 16px; height: 16px; }
}

/* En modo oscuro la nube se aclara un poco para que se distinga del fondo negro */
:root[data-tema="oscuro"] .bola-nube, :root[data-tema="oscuro"] .bola-chispa { background: rgb(62 62 66 / .92); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .bola-nube, :root:not([data-tema="claro"]) .bola-chispa { background: rgb(62 62 66 / .92); } }

/* 1.41.0 · Diálogo con Justo: Terminar a la izquierda y el estado del turno en el botón central */
.litigar__dock { gap: 20px; }
.litigar__circulo--terminar svg { background: #e0312f; color: #fff; }
.litigar__cuentame { white-space: nowrap; }
.litigar[data-turno] .litigar__cuentame { font-size: 1.15rem; }
.litigar[data-turno] .litigar__grabar { width: 140px; }
.litigar[data-turno] .litigar__grabar[aria-pressed="true"] .litigar__punto::after { width: 58px; height: 58px; border-radius: 999px; }
.litigar[data-turno="piensa"] .litigar__punto, .litigar[data-turno="habla"] .litigar__punto { animation: none !important; }
.litigar[data-turno="piensa"] .litigar__punto::after { opacity: .4; }
.litigar[data-turno="habla"] .litigar__punto::after { background: var(--marca); }

/* 1.33 · Artículo: «vigente al», mi nota y reporte de errores */
.vigente-al { display: flex; align-items: center; gap: 6px; margin: -8px 0 12px; font-size: .78rem; color: var(--ink-500); }
.vigente-al svg { width: 14px; height: 14px; flex: none; }
.mi-nota { margin: 16px 0 0; display: grid; gap: 6px; }
.mi-nota textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ink-200); background: transparent; color: inherit; font: inherit; font-size: .92rem; }
.mi-nota textarea:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; }
.reporte-art { margin: 10px 0 0; font-size: .78rem; }
.reporte-art a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); text-decoration: underline; text-underline-offset: 3px; }
.reporte-art svg { width: 14px; height: 14px; }

/* 1.33 · Calculadoras de la Ley Federal del Trabajo y de días hábiles */
.calc-lft__lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.calc-lft__fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--ink-200); }
.calc-lft__fila > div { display: grid; gap: 3px; min-width: 0; }
.calc-lft__fila small { color: var(--ink-500); font-size: .78rem; text-align: left; hyphens: manual; }
.calc-lft__fila strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-lft__fila--total { border-bottom: 0; font-size: 1.05rem; }
.titulo-l small { font-weight: 400; font-size: .8em; color: var(--ink-500); }
.campo--check { display: flex; align-items: center; gap: 8px; font-size: .9rem; }

/* 1.33 · Comparador entre estados */
.calc__comparar { margin: 0 0 10px; }
.comparador { list-style: none; margin: 0; padding: 0; }
.comparador__fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--ink-200); }
.comparador__fila > div { display: grid; gap: 4px; min-width: 0; }
.comparador__fila .enlace { text-align: left; font-size: .84rem; color: var(--ink-500); text-decoration: underline; text-underline-offset: 3px; }
.comparador__fila strong { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; display: grid; }
.comparador__fila strong small { font-weight: 400; font-size: .75rem; color: var(--ink-500); }
.comparador__fila--vacia span { color: var(--ink-500); font-size: .84rem; }

/* 1.43.0: reto de la semana, respaldo cifrado, aviso de que no es app de gobierno y resumen de la plática */
.reto-semana { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin: 10px 0 6px; padding: 14px; border-radius: 20px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-100); }
.reto-semana > div:first-child { display: grid; gap: 2px; }
.reto-semana small { color: var(--ink-600); font-size: .8rem; }
.reto-semana > span { font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums; }
.reto-semana__dias { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; }
.reto-semana__dias i { height: 8px; border-radius: 999px; background: var(--ink-100); }
.reto-semana__dias i[data-hecho] { background: #1d9bf0; }
.respaldo { margin-top: 10px; }
.respaldo__clave { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ink-200, var(--ink-100)); background: var(--papel); color: inherit; font: inherit; }
.respaldo__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.no-gobierno { display: flex; gap: 10px; margin: 16px 0 10px; font-size: .84rem; line-height: 1.4; color: var(--ink-600); }
.no-gobierno svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.resumen-charla { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .95rem; line-height: 1.45; }
.resumen-charla__citas { display: flex; flex-wrap: wrap; gap: 6px; }

/* Historias de los reels: una tira de tarjetas arriba de cada reel y el video a pantalla completa. */
.historias { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-left: -6px; padding: 2px 8px 2px 2px; overscroll-behavior-x: contain; }
.historias[hidden] { display: none; }
.historias::-webkit-scrollbar { display: none; }
.historia-tile { position: relative; flex: none; width: 116px; height: 166px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; color: #fff; text-align: left; background: linear-gradient(160deg, var(--seccion, #0b6b4b), #101010); box-shadow: 0 6px 14px -10px rgb(0 0 0 / .6); cursor: pointer; }
.historia-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.historia-tile::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / .82)); }
.historia-tile__yo { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #111; color: #fff; font: 700 .74rem/1 Manrope, sans-serif; box-shadow: 0 0 0 2px #fff; }
.historia-tile > .historia-tile__yo { position: absolute; top: 6px; left: 6px; }
.historia-tile--oficial > .historia-tile__yo { box-shadow: 0 0 0 2px #2fbf7f; }
.historia-tile__pie { position: absolute; z-index: 1; inset: auto 8px 8px; display: grid; gap: 2px; }
.historia-tile__pie small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 .66rem/1.2 Manrope, sans-serif; opacity: .85; }
.historia-tile__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 700 .78rem/1.2 Manrope, sans-serif; }
.tarjeta__foto { display: block; width: 100%; max-height: 190px; object-fit: cover; margin: 10px 0 12px; border-radius: 16px; background: rgb(127 127 127 / .14); }
.historia { position: fixed; z-index: 2147483000; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)); background: #000; color: #fff; }
.historia__cabeza { display: flex; align-items: center; gap: 10px; }
.historia .historia__perfil { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; width: auto; height: auto; padding: 0; border-radius: 12px; background: none; text-align: left; }
.historia__quien { flex: 1; min-width: 0; display: grid; }
.historia__quien small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .75; }
.historia button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgb(255 255 255 / .14); cursor: pointer; }
.historia__video { flex: 1; min-height: 0; display: grid; place-items: center; }
.historia__video iframe { width: 100%; max-width: 420px; height: 100%; border: 0; border-radius: 16px; background: #111; }
.historia__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.historia__pie a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-weight: 700; }
.historia__pie svg { width: 20px; height: 20px; }
.historia__nota { margin: 0; font-size: .74rem; line-height: 1.35; text-align: center; opacity: .72; }
/* «Ver la ley» en el visor: una píldora blanca entre el video y sus controles. */
.historia__ley { display: flex; justify-content: center; }
.historia .historia__ley-chip { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 44px; padding: 0 18px; border-radius: 999px; background: #fff; color: #000; font: 700 .88rem/1 var(--sans); }
.historia .historia__ley-chip svg { width: 17px; height: 17px; }

/* ═══ 1.47 · Sección Abogados: publicaciones, videos y perfiles ═══ */
.historia-tile--todos { display: grid; place-content: center; justify-items: center; gap: 8px; font: 700 .8rem/1.2 Manrope, sans-serif; text-decoration: none; }
.historia-tile--todos::after { display: none; }
.historia-tile--todos svg { width: 26px; height: 26px; }
.sello-oficial { display: inline-flex; align-items: center; gap: 3px; color: #1f9d68; font-size: .72rem; font-weight: 700; }
.sello-oficial svg { width: 14px; height: 14px; }
.ab-vistas { margin: 0 0 12px; }
.ab-vistas button { flex: 1; min-height: 40px; font-size: .88rem; }
.muro { display: grid; }
.post { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--ink-150); }
.post__yo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #111; font: 700 .82rem/1 Manrope, sans-serif; cursor: pointer; }
.post__yo--oficial { background: #17694a; }
.post__yo--nota { background: var(--marca); cursor: default; }
.post__yo svg { width: 20px; height: 20px; }
.post__cuerpo { min-width: 0; display: grid; gap: 6px; justify-items: start; }
.post__cuerpo > p { margin: 0; font-size: 1.02rem; line-height: 1.4; color: var(--ink-950); }
.post__quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 0; text-align: left; color: var(--ink-950); cursor: pointer; }
div.post__quien { cursor: default; }
.post__quien small { color: var(--ink-500); font-size: .8rem; }
.post__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; color: #fff; background: linear-gradient(160deg, #17694a, #101010); cursor: pointer; }
.post__media--sola { aspect-ratio: auto; min-height: 48px; }
.post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__media span { position: absolute; left: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / .72); font-size: .8rem; font-weight: 700; }
.post__fuente { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--ink-500); font-size: .8rem; }
.post__fuente svg { width: 14px; height: 14px; }
.ab-titulo { margin: 16px 0 8px; font-size: 1.05rem; }
.ab-perfiles { display: grid; gap: 8px; }
.ab-perfil { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 16px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-950); text-align: left; cursor: pointer; }
.ab-perfil > span:nth-child(2) { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.ab-perfil small { flex-basis: 100%; color: var(--ink-500); font-size: .8rem; }
.ab-perfil > svg { width: 18px; height: 18px; color: var(--ink-500); }
.ab-nota, .ab-vacio { margin: 16px 0 0; color: var(--ink-500); font-size: .8rem; line-height: 1.4; }
.perfil-ab { display: grid; gap: 10px; }
.perfil-ab h4 { margin: 8px 0 0; font-size: .95rem; }
.perfil-ab__yo--oficial { background: #17694a; }
.perfil-ab__datos { display: grid; gap: 6px; margin: 0; }
.perfil-ab__datos div { display: flex; justify-content: space-between; gap: 12px; }
.perfil-ab__datos dt { color: var(--ink-500); font-size: .85rem; }
.perfil-ab__datos dd { margin: 0; text-align: right; font-weight: 600; font-size: .9rem; }
.perfil-ab__datos small { display: block; font-weight: 400; color: var(--ink-500); }
.perfil-ab__bio { margin: 0; line-height: 1.4; }
.perfil-ab__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil-ab__boton { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-950); font-size: .88rem; font-weight: 600; }
.perfil-ab__boton svg { width: 16px; height: 16px; color: var(--marca); }
.perfil-ab__nota { margin: 8px 0 0; color: var(--ink-500); font-size: .78rem; line-height: 1.4; }
.perfil-ab__nota a { text-decoration: underline; }
/* Automovilista (1.65): lo vial y revisar un carro en un panel como Defiéndete, pero en azul claro. La tinta sobre
   --cielo pasa 7:1 y --cielo-texto pasa AA sobre el papel, en claro y en oscuro. */
:root { --cielo: #7cc4ff; --cielo-tinta: #062a4d; --cielo-texto: #0b5aa3; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --cielo: #8fcfff; --cielo-tinta: #04213f; --cielo-texto: #9fd6ff; } }
:root[data-tema="oscuro"] { --cielo: #8fcfff; --cielo-tinta: #04213f; --cielo-texto: #9fd6ff; }
.auto-panel { display: grid; gap: 12px; margin: 0 0 18px; padding: 14px 0; border: 1px solid color-mix(in oklab, var(--cielo) 55%, var(--ink-150)); border-radius: 22px; background: linear-gradient(100deg, color-mix(in oklab, var(--cielo) 22%, var(--papel)), var(--papel) 72%); overflow: hidden; }
.auto-panel__cabeza { display: flex; align-items: center; gap: 12px; padding: 0 14px; color: var(--ink-950); }
.auto-panel__ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--cielo); color: var(--cielo-tinta); box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--cielo) 80%, transparent), inset 0 -2px 0 rgb(0 0 0 / .12); }
.auto-panel__ic svg { width: 20px; height: 20px; stroke-width: 2.3; }
.auto-panel__texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.auto-panel__texto b { font: 800 1.05rem/1.2 var(--sans); }
.auto-panel__texto small { color: var(--ink-600); font-size: .86rem; line-height: 1.35; }
.auto-panel__cabeza > svg:last-child { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 999px; background: var(--ink-950); color: var(--fondo); }
.auto-panel__chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px; scrollbar-width: none; scroll-padding-inline: 14px; }
.auto-panel__chips::-webkit-scrollbar { display: none; }
.auto-panel__chips .chip { flex: none; min-height: 40px; }
.auto-panel__chips .chip svg { width: 16px; height: 16px; color: var(--cielo-texto); }
.auto-cabeza { margin-top: 4px; }
.auto-bloque { margin: 0 0 18px; padding: 16px; border: 1px solid color-mix(in oklab, var(--cielo) 55%, var(--ink-150)); border-radius: 22px; background: linear-gradient(170deg, color-mix(in oklab, var(--cielo) 16%, var(--papel)), var(--papel) 60%); }
.auto-bloque__titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font: 800 1.12rem/1.25 var(--sans); color: var(--ink-950); }
.auto-bloque .paso-l { border-color: color-mix(in oklab, var(--cielo) 30%, var(--ink-100)); }
.auto-bloque .paso-l p { font-size: 1rem; line-height: 1.55; text-align: left; }
.auto-bloque__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.auto-bloque__lista { display: grid; gap: 8px; margin-top: 10px; }
.auto-bloque .der-fila { --c: var(--cielo-texto); }
.boton--auto, .carro--auto .boton--marca { background: var(--cielo); color: var(--cielo-tinta); }
.boton--auto:hover, .carro--auto .boton--marca:hover { background: color-mix(in oklab, var(--cielo) 86%, var(--ink-950)); }
.carro--auto h3 { display: flex; align-items: center; gap: 8px; }
.carro--auto h3 svg { flex: none; width: 20px; height: 20px; color: var(--cielo-texto); }
.carro__estado { margin-top: 14px; padding: 12px; border-radius: 16px; background: color-mix(in oklab, var(--cielo) 14%, var(--papel)); }
.carro__sin { color: var(--ink-700); }
.vial-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-600); font-size: .88rem; font-weight: 600; }
.vial-volver svg { width: 18px; height: 18px; }
@media (max-height: 700px) { .historias .historia-tile { width: 96px; height: 132px; } .historias .historia-tile__yo { width: 30px; height: 30px; font-size: .66rem; } .historias .historia-tile__t { -webkit-line-clamp: 2; font-size: .72rem; } }
.historia-tile__yo, .post__yo, .perfil-ab__yo { position: relative; overflow: hidden; }
.historia-tile__yo img, .post__yo img, .perfil-ab__yo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.historia__video { position: relative; overflow: hidden; }
.historia__video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.historia__carga { position: absolute; width: 38px; height: 38px; border: 3px solid rgb(255 255 255 / .3); border-top-color: #fff; border-radius: 50%; animation: gira-carga .8s linear infinite; }
@keyframes gira-carga { to { transform: rotate(360deg); } }
.historia__video iframe { position: relative; opacity: 0; transition: opacity .25s; }
.historia__video iframe[data-listo] { opacity: 1; }
/* TikTok es vertical: su reproductor va en una caja 9:16 que cabe en el espacio, sin estirarse ni cortarse. */
@supports (width: 1cqh) {
  .historia__video--tiktok { container-type: size; }
  .historia__video--tiktok iframe { width: min(100cqw, 100cqh * 9 / 16, 420px); height: auto; max-width: none; aspect-ratio: 9 / 16; }
}
:root[data-vista="abogados"] .barra__bajo { display: none; }
.ab-buscador { display: flex; align-items: center; gap: 6px; margin: 8px 0 12px; padding-right: 6px; }
.ab-buscador input { flex: 1; min-width: 0; }
.ab-buscador button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: var(--ink-950); background: none; cursor: pointer; }
.ab-buscador button svg { width: 18px; height: 18px; }
.post__resumen { color: var(--ink-600) !important; font-size: .92rem !important; }
.post__mas { padding: 0; min-height: 28px; color: var(--marca); font-size: .85rem; font-weight: 700; cursor: pointer; }
.feed--inicio .tarjeta h3.tarjeta__h--media { font-size: clamp(1.65rem, 7.2vw, 2.25rem); line-height: 1.12; }
.feed--inicio .tarjeta h3.tarjeta__h--larga { font-size: clamp(1.32rem, 5.6vw, 1.75rem); line-height: 1.18; }
.tarjeta__h--larga > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tarjeta__h--abierta > span { display: block; }
.tarjeta__leer { display: block; padding: 4px 0 0; color: var(--ac, var(--marca)); font: 700 .88rem var(--rotulo); cursor: pointer; }
.barra__yo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: var(--papel); background: var(--ink-950); cursor: pointer; }
.barra__yo svg { width: 20px; height: 20px; }
@media (max-width: 960px) {
  .logo { font-size: 1.5rem; gap: 8px; letter-spacing: .08em; }
  .logo__marca { width: 26px; height: 26px; }
  .logo small { font-size: .6rem; letter-spacing: .24em; }
  .ubicacion-pill { height: 40px; max-width: 118px; padding: 0 11px 0 9px; font-size: .78rem; }
}
@media (max-width: 380px) {
  .logo { font-size: 1.3rem; }
  .logo__marca { display: none; }
  .ubicacion-pill { height: 38px; max-width: 108px; }
  .barra__yo { width: 38px; height: 38px; }
}
@media (min-width: 961px) { .barra__yo { align-self: center; } }
.historia { touch-action: none; }
.historia__borde { position: absolute; z-index: 2; top: 0; bottom: 22%; width: 22px; touch-action: none; }
.historia__borde--izq { left: 0; }
.historia__borde--der { right: 0; }
.historia__video--sube { animation: video-sube .28s var(--suave) both; }
.historia__video--baja { animation: video-baja .28s var(--suave) both; }
@keyframes video-sube { from { opacity: .4; transform: translateY(46px); } }
@keyframes video-baja { from { opacity: .4; transform: translateY(-46px); } }
:root[data-movimiento="reducido"] .historia__video--sube, :root[data-movimiento="reducido"] .historia__video--baja { animation: none; }
.historia__siguiente { position: fixed; left: -9px; top: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
/* Barra superior compacta, buscadores pegados a ella y nube de tres puntos cuando se esconden las secciones. */
@media (max-width: 960px) {
  .barra__caja .ubicacion-pill { position: relative; height: 32px; max-width: 104px; gap: 4px; padding: 0 10px 0 8px; font-size: .72rem; }
  .barra__caja .ubicacion-pill svg { width: 13px; height: 13px; }
  .barra__caja .ubicacion-pill::after { content: ""; position: absolute; inset: -6px 0; }
  .logo__marca { display: block; width: 28px; height: 28px; }
  :root[data-vista="abogados"] #abogados.pagina, :root[data-vista="derechos"] #derechos.pagina { padding-top: calc(max(10px, env(safe-area-inset-top)) + 78px); }
  .ab-buscador { margin: 0 0 8px; }
  .der-busca { margin: 0 0 12px; }
  .ab-cabeza .seccion__cabeza, .der-cabeza .seccion__cabeza { margin: 10px 0; }
}
.bola-nube[data-puntos] { display: block !important; left: 0 !important; top: auto !important; bottom: calc(92px + env(safe-area-inset-bottom)) !important; padding: 8px 14px 12px max(12px, env(safe-area-inset-left)); border-radius: 0 14px 14px 0; font-size: 1.1rem; line-height: 1; letter-spacing: .14em; }
.bola-nube[data-puntos]::after { display: none; }
.bola-nube[data-rodando] { opacity: 0; pointer-events: none; }
/* Reels en lectura continua: una sola columna centrada, sin imán ni una pantalla por artículo. */
.feed--inicio .feed__pista, .feed--inicio .feed__pista * { touch-action: pan-x pan-y; }
.feed--inicio .feed__pista { scroll-snap-type: none; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
:root[data-vista="reels"] .feed--inicio::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: env(safe-area-inset-top); background: var(--papel); pointer-events: none; }
:root[data-vista="reels"] .feed--inicio .tarjeta { display: block; width: auto; height: auto; max-width: 640px; margin: 0 auto; padding: 26px 18px 20px; border-radius: 0; background: none; box-shadow: none; scroll-snap-align: none; scroll-snap-stop: normal; }
:root[data-vista="reels"] .feed--inicio .tarjeta:first-child { padding-top: max(26px, calc(env(safe-area-inset-top) + 14px)); }
:root[data-vista="reels"] .feed--inicio .tarjeta + .tarjeta { border-top: 1px solid color-mix(in oklab, currentColor 12%, transparent); }
.feed--inicio .tarjeta__cuerpo { display: block; max-height: none; overflow: visible; padding: 0; }
.feed--inicio .tarjeta__dentro { display: block; max-height: none; padding-top: 0; }
.feed--inicio .tarjeta__lectura { overflow: visible; padding-bottom: 0; }
.feed--inicio .tarjeta__tope { text-align: center; }
.feed--inicio .tarjeta__sello { justify-content: center; }
.feed--inicio .tarjeta h3 { text-align: center; }
.feed--inicio .tarjeta__texto--recorte { display: block; max-height: 19em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 3em), transparent); mask-image: linear-gradient(#000 calc(100% - 3em), transparent); }
.feed--inicio .tarjeta__texto--abierto { max-height: none; -webkit-mask-image: none; mask-image: none; }
.feed--inicio .tarjeta__mas { display: block; margin: 0 auto 12px; padding: 8px 16px; }
.feed--inicio .tarjeta__lado { display: flex; justify-content: center; gap: 10px; padding: 14px 0 0; }
.feed--inicio .tarjeta__lado svg { width: 20px; height: 20px; padding: 10px; }
.feed--inicio .tarjeta__lado small { font-size: .64rem; }
.feed__videos { max-width: 640px; margin: 6px auto 8px; padding: 0 0 0 16px; }
.feed__videos[hidden] { display: none; }
.feed__videos-t { margin: 0 0 8px; color: var(--tx2); font: 700 .78rem var(--rotulo); letter-spacing: .08em; text-transform: uppercase; }
.feed__videos .historias { margin-left: 0; padding-right: 16px; }
.historia__pie a { white-space: nowrap; }
/* Perfil: portada y foto encimada como en las redes profesionales; cifras y cuadrícula de videos como en las de video. */
.perfil-ab { --orilla: 22px; display: block; }
.perfil-ab__portada { position: relative; height: 128px; margin: -6px calc(-1 * var(--orilla)) 0; overflow: hidden; background: linear-gradient(135deg, #2b2b30, #0d0d0f); }
.perfil-ab__portada--oficial { background: linear-gradient(135deg, #17694a, #0c2f22); }
.perfil-ab__portada img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(1.2); transform: scale(1.25); opacity: .85; }
.perfil-ab__yo { position: relative; z-index: 1; display: grid; place-items: center; width: 96px; height: 96px; margin-top: -52px; border-radius: 50%; color: #fff; background: #111; box-shadow: 0 0 0 4px var(--papel); font: 700 1.6rem/1 Manrope, sans-serif; }
.perfil-ab__cabeza { margin-top: 10px; }
.perfil-ab__cabeza h3 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.perfil-ab__cabeza p { margin: 2px 0 0; text-align: left; }
.perfil-ab__usuario { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-500); font-size: .9rem; }
.perfil-ab__titular { color: var(--ink-950); font-size: .98rem; line-height: 1.35; }
.perfil-ab__lugar { display: flex; align-items: center; gap: 4px; color: var(--ink-500); font-size: .85rem; }
.perfil-ab__lugar svg { width: 14px; height: 14px; }
.perfil-ab__cifras { display: flex; justify-content: space-around; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; text-align: center; }
.perfil-ab__cifras li { display: grid; gap: 1px; min-width: 0; }
.perfil-ab__cifras b { font-size: 1.15rem; }
.perfil-ab__cifras small { color: var(--ink-500); font-size: .78rem; }
.perfil-ab__acciones { display: flex; gap: 8px; margin-top: 14px; }
.perfil-ab__acciones > * { flex: 1; min-width: 0; justify-content: center; }
.perfil-ab__boton--uno { background: var(--ink-950); box-shadow: none; color: var(--papel); }
.perfil-ab__pestanas { display: flex; margin: 16px calc(-1 * var(--orilla)) 2px; border-bottom: 1px solid var(--ink-150); }
.perfil-ab__pestanas button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-500); font-size: .88rem; font-weight: 700; }
.perfil-ab__pestanas button[aria-pressed="true"] { border-color: var(--ink-950); color: var(--ink-950); }
.perfil-ab__pestanas svg { width: 17px; height: 17px; }
.perfil-ab__videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-inline: calc(-1 * var(--orilla)); }
.perfil-ab__videos[hidden], .perfil-ab__acerca[hidden] { display: none; }
.perfil-ab__videos .historia-tile { width: 100%; height: auto; aspect-ratio: 3 / 4.4; border-radius: 0; }
.perfil-ab__videos .historia-tile > .historia-tile__yo, .perfil-ab__videos .historia-tile__pie small { display: none; }
.perfil-ab__videos .historia-tile__pie { inset: auto 6px 6px; }
.perfil-ab__videos .historia-tile__t { font-size: .7rem; -webkit-line-clamp: 2; }
.perfil-ab__acerca { display: grid; gap: 10px; padding-top: 12px; }
.perfil-ab__acerca h4 { margin: 4px 0 0; }
.perfil-ab__nota { margin-top: 14px; }
.ab-perfil { grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 12px; }
.ab-perfil .post__yo { width: 56px; height: 56px; }
:root[data-vista="reels"][data-inmerso] .isla { opacity: 0 !important; transform: translateY(40px) !important; pointer-events: none !important; }
.isla { box-sizing: border-box; max-width: calc(100vw - 12px); }
.isla > a { min-width: 0; }
.isla > a, .isla > a > span:not(.isla__bola), .isla > a > small { font-size: min(.68rem, 11px); }

/* Libro y título más cerca del borde izquierdo de la barra */
@media (max-width: 960px) {
  .barra__caja { padding-left: 10px; }
  .logo { gap: 6px; }
}

/* Visor de videos: reproductor libre y controles grandes debajo */
.historia__pie { justify-content: center; gap: 14px; }
.historia .historia__grande { width: 76px; height: 76px; background: #fff; color: #000; }
.historia .historia__paso { width: 56px; height: 56px; }
.historia__grande svg { width: 34px; height: 34px; }
.historia__paso svg { width: 28px; height: 28px; }
.historia__grande[data-pausado="true"] svg:nth-of-type(2), .historia__grande[data-pausado="false"] svg:nth-of-type(1),
.historia__grande[data-mudo="true"] svg:nth-of-type(2), .historia__grande[data-mudo="false"] svg:nth-of-type(1) { display: none; }
.historia__nota a { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
@media (max-height: 600px) { .historia .historia__grande { width: 60px; height: 60px; } .historia .historia__paso { width: 46px; height: 46px; } .historia__nota { font-size: .66rem; } }

/* 1.54 · «Resumir» en artículos, búsquedas, leyes, libros, guías y secciones */
.resumir { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--marca) 11%, transparent); color: var(--ink-950); font: 600 .76rem var(--rotulo); white-space: nowrap; }
.resumir::before { content: ""; flex: none; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6L12 22.5l-2.6-7.9L1.5 12l7.9-2.6z'/%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 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6L12 22.5l-2.6-7.9L1.5 12l7.9-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.resumir:active { transform: scale(.96); }
.resumir--icono { justify-content: center; width: 44px; min-height: 44px; padding: 0; background: none; color: var(--ink-500); }
.resumir--icono::before { width: 16px; height: 16px; }
.resumir--icono span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fila-con { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.resultado-con { position: relative; }
.resultado-con .resultado { padding-bottom: 50px; }
.resultado-con .resumir { position: absolute; left: 18px; bottom: 12px; }
.lectura__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.titulo-bloque__lado { display: grid; justify-items: end; gap: 8px; flex: none; }
.capitulo__nombre .resumir--icono { align-self: center; margin: -10px -6px -10px auto; }
.explica__claves { list-style: none; margin: 0 0 12px; padding: 0; }
.explica__claves li { padding: 9px 0; border-bottom: 1px solid var(--ink-100); line-height: 1.45; }
.explica__claves b { display: block; font: 700 .72rem var(--rotulo); letter-spacing: .04em; opacity: .7; }
.explica__practica { margin: 0 0 12px; line-height: 1.5; }
.explica__pasos { margin: 0 0 12px; padding-left: 20px; line-height: 1.5; }
.explica__pasos li { margin-bottom: 8px; }
.explica__cita { display: block; margin-top: 2px; }
.explica__frase { display: grid; gap: 3px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink-100); background: none; color: inherit; font: inherit; text-align: left; line-height: 1.45; }
.explica__frase b { font: 700 .72rem var(--rotulo); letter-spacing: .04em; opacity: .7; }
.explica__frase small { color: var(--ink-500); font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
.explica__partes { display: grid; gap: 2px; margin-bottom: 12px; }
.explica__partes button { display: grid; gap: 2px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink-100); background: none; color: inherit; font: inherit; text-align: left; }
.explica__partes span { font-size: .9rem; opacity: .85; }
.explica__partes small { color: var(--ink-500); font-size: .76rem; }

/* 1.55 · Directorio de bibliotecas gratuitas */
.biblioteca { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--ink-100); color: inherit; text-decoration: none; }
.biblioteca b { font-size: 1rem; }
.biblioteca span { font-size: .9rem; opacity: .85; }
.biblioteca small { color: var(--ink-500); font-size: .76rem; }

/* Bibliotecas gratuitas: el enlace al sitio se ve en cada fila. */
.biblioteca__ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-style: normal; font-size: .84rem; font-weight: 700; color: var(--marca); min-width: 0; }
.biblioteca__ir svg { width: 15px; height: 15px; flex: none; }
.biblioteca__ir u { font-weight: 500; color: var(--ink-500); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Favoritos y Libros para leer: solo el título hasta que los tocas. */
.plegable { margin: 0 0 10px; }
.plegable > summary small { letter-spacing: 0; text-transform: none; font-family: inherit; font-weight: 600; font-size: .78rem; }
.plegable .portadas, .plegable .estante__libros { margin-top: 12px; }
.plegable__mas { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0 0 6px; }
.plegable__mas svg { width: 14px; height: 14px; }
.libro-ficha__aviso { margin: 0 0 12px; }

/* Justo: el saludo y los botones que se van al navegar mientras grabas, con el mismo paso que la isla. */
.litigar__inicio { align-content: safe center; }
.litigar__hola { font-size: clamp(2.3rem, 11vw, 3.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }
.litigar__hola small { display: block; margin-top: 10px; font-family: var(--texto, inherit); font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; opacity: .72; }
/* La manera de ser de Justo, en tres rasgos discretos. */
.ingo-rasgos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -6px 0 0; padding: 0; list-style: none; font: 600 .8rem/1.2 var(--rotulo); color: var(--ink-600); }
.ingo-rasgos li { display: inline-flex; align-items: center; gap: 5px; }
.ingo-rasgos svg { width: 15px; height: 15px; stroke-width: 2; color: var(--ink-500); }
/* Secciones en panel, como Tu perfil; adentro, las preguntas listas para tocar. */
/* Los paneles nunca se encogen: con el teclado abierto el chat se queda chico y, si se aplastaran, no habría nada que deslizar. */
.ingo-temas { margin-bottom: 6px; }
.litigar__inicio > * { min-height: min-content; }
.ingo-tema > summary { min-height: 60px; }
.ingo-tema__preguntas { display: flex; flex-wrap: wrap; gap: 8px; }
.ingo-tema__preguntas button { padding: 10px 14px; border: 1px solid color-mix(in oklab, var(--c) 35%, transparent); border-radius: 999px; background: color-mix(in oklab, var(--c) 8%, transparent); color: inherit; font: 500 .95rem/1.2 var(--rotulo); text-align: left; transition: transform .15s var(--ios), background-color .2s; -webkit-tap-highlight-color: transparent; }
.ingo-tema__preguntas button:active { transform: scale(.97); background: color-mix(in oklab, var(--c) 18%, transparent); }
.litigar__forma, .litigar__nota { transition: opacity .6s cubic-bezier(.45, 0, .2, 1), transform .8s cubic-bezier(.45, 0, .2, 1); }
.litigar[data-dock="oculto"] .litigar__forma, .litigar[data-dock="oculto"] .litigar__nota { opacity: 0; transform: translateY(26px); pointer-events: none; }
.litigar[data-dock="oculto"] .litigar__hilo { margin-bottom: calc(var(--dock-h, 0px) * -1); }
:root[data-movimiento="reducido"] .litigar__forma, :root[data-movimiento="reducido"] .litigar__nota { transition: opacity .2s; }

/* Revisa un carro */
.carro { display: grid; gap: 12px; }
.carro h3 { margin: 14px 0 0; }
.carro p { margin: 0; }
.carro__campo { display: grid; gap: 6px; font-weight: 600; }
.carro__campo input, .carro__campo select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--ink-200); border-radius: 14px; background: var(--fondo); color: inherit; font: inherit; font-weight: 400; }
.carro__campo input { letter-spacing: .04em; }
.carro__pista { min-height: 1.2em; color: var(--ink-500); font-size: .85rem; }
.carro .boton { justify-self: start; }
.carro .legal__f { display: flex; flex-wrap: wrap; gap: 8px; }
.carro__lista { display: grid; gap: 10px; margin: 0; padding-left: 18px; }
.carro__multa { display: grid; gap: 10px; }
.carro__multa:empty { display: none; }
.carro__nota { color: var(--ink-500); font-size: .82rem; }

/* Pulso que invita a tocar: el botón de hablar y la bola de los reels. Es un aro plano y se apaga con movimiento reducido. */
@keyframes invitaToque { 0% { box-shadow: inset 0 0 0 3px currentColor, 0 0 0 0 rgb(224 49 47 / .5); } 70%, 100% { box-shadow: inset 0 0 0 3px currentColor, 0 0 0 16px rgb(224 49 47 / 0); } }
@keyframes invitaBola { 0% { outline-color: rgb(255 255 255 / .55); outline-offset: 0; } 70%, 100% { outline-color: rgb(255 255 255 / 0); outline-offset: 10px; } }
.litigar__grabar[aria-pressed="false"] .litigar__punto { animation: invitaToque 1.8s ease-out infinite; }
:root[data-vista="reels"]:not([data-litigar]) .isla .isla__centro span.isla__bola { outline: 2px solid transparent; animation: invitaBola 2.4s ease-out infinite; }
:root[data-movimiento="reducido"] .litigar__grabar[aria-pressed="false"] .litigar__punto, :root[data-movimiento="reducido"] .isla .isla__centro span.isla__bola { animation: none; }
@media (prefers-reduced-motion: reduce) { .litigar__grabar[aria-pressed="false"] .litigar__punto, :root[data-vista="reels"] .isla .isla__centro span.isla__bola { animation: none; } }

/* Justo con cara: el avatar al centro de la cabecera con su nombre abajo; notas a la izquierda, voz y cerrar a la derecha. */
.litigar__cabeza--avatar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; padding: 10px 14px 6px; }
.litigar__cabeza--avatar .litigar__notas { justify-self: start; margin: 8px 0 0; }
.litigar__cabeza--avatar .litigar__voz { justify-self: end; margin: 8px 8px 0 auto; }
.litigar__cabeza--avatar .litigar__cerrar { margin-top: 8px; }
.litigar__cabeza--avatar > .litigar__voz, .litigar__cabeza--avatar > .litigar__cerrar { grid-column: 3; grid-row: 1; }
.litigar__cabeza--avatar > .litigar__cerrar { justify-self: end; }
.litigar__cabeza--avatar > .litigar__voz { margin-right: 52px; }
.litigar__quien { grid-column: 2; display: grid; justify-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.litigar__quien:active .avatar-ingo { transform: scale(.95); }
.litigar__nombre { margin-top: -10px; padding: 5px 14px; border-radius: 999px; background: var(--ink-950, #0d0d0d); color: var(--papel, #fff); font: 700 .95rem/1.1 var(--rotulo); box-shadow: 0 6px 16px -8px rgb(0 0 0 / .5); position: relative; z-index: 1; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-ingo { display: block; width: 76px; height: 76px; border-radius: 999px; overflow: hidden; background: #f4f4f6; box-shadow: 0 10px 26px -12px rgb(0 0 0 / .45), 0 0 0 3px var(--papel, #fff); transition: transform .2s var(--ios); }
.avatar-ingo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.avatar-ingo--bola { padding: 6px; background: var(--papel, #fff); }
.avatar-ingo--grande { width: 132px; height: 132px; }
:root[data-nucleo="habla"] .litigar__quien .avatar-ingo:not(.avatar-ingo--bola) { animation: avatarHabla 1.1s ease-in-out infinite; }
:root[data-nucleo="escucha"] .litigar__quien .avatar-ingo:not(.avatar-ingo--bola) { box-shadow: 0 10px 26px -12px rgb(0 0 0 / .45), 0 0 0 3px var(--papel, #fff), 0 0 0 7px color-mix(in oklab, #1d9bf0 45%, transparent); }
@keyframes avatarHabla { 50% { transform: scale(1.04); } }
:root[data-movimiento="reducido"] .litigar__quien .avatar-ingo { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .litigar__quien .avatar-ingo { animation: none !important; } }
/* Editor de tu Justo. */
.avatar-editor { display: grid; gap: 6px; padding-bottom: 8px; }
.avatar-editor__vista { display: grid; justify-items: center; gap: 4px; margin: 4px 0 8px; }
.avatar-editor__vista b { margin-top: 6px; font: 800 1.35rem/1.1 var(--display); }
.avatar-editor__vista small { color: var(--ink-500); font-weight: 600; }
.avatar-galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
@media (min-width: 560px) { .avatar-galeria { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.avatar-galeria button { display: grid; justify-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: inherit; font: 600 .78rem/1.15 var(--rotulo); text-align: center; -webkit-tap-highlight-color: transparent; }
.avatar-galeria .avatar-ingo { width: 100%; max-width: 74px; height: auto; aspect-ratio: 1; }
.avatar-galeria button[aria-checked="true"] .avatar-ingo { box-shadow: 0 0 0 3px var(--papel, #fff), 0 0 0 6px #1d9bf0; }
.avatar-galeria button:active .avatar-ingo { transform: scale(.94); }
.avatar-nombre { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--ink-200); border-radius: 14px; background: var(--fondo, transparent); color: inherit; font: 600 1.05rem var(--rotulo); }
.avatar-tonos { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-tonos button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border: 1px solid var(--linea, rgba(127,127,127,.25)); border-radius: 999px; background: none; color: inherit; font: 600 .86rem/1 var(--rotulo); -webkit-tap-highlight-color: transparent; }
.avatar-tonos__muestra { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 55%), var(--tono); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.avatar-tonos button[aria-checked="true"] { border-color: #1d9bf0; box-shadow: 0 0 0 1px #1d9bf0; }
.avatar-tonos button:active { transform: scale(.96); }
.avatar-personas { display: grid; gap: 8px; }
.avatar-personas button { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--ink-150); border-radius: 16px; background: none; color: inherit; text-align: left; -webkit-tap-highlight-color: transparent; transition: border-color .2s, background-color .2s; }
.avatar-personas button b { font-size: 1rem; }
.avatar-personas button small { color: var(--ink-500); font-size: .85rem; line-height: 1.3; }
.avatar-personas button[aria-checked="true"] { border-color: #1d9bf0; background: color-mix(in oklab, #1d9bf0 9%, transparent); }
.avatar-listo { margin-top: 10px; width: 100%; }

/* ——— Portada de entrada ——— */
.bienvenida { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: 1fr auto; background: var(--bv-fondo-abajo); color: var(--ink-950); overflow: hidden; transition: opacity .6s var(--ios), transform .6s var(--ios); --bv-fondo-abajo: #f6f4f1; }
.bienvenida--fuera { opacity: 0; transform: scale(1.04); pointer-events: none; }
.bienvenida__arriba { position: relative; min-height: 0; display: grid; grid-template-rows: auto 1fr; padding-top: max(18px, env(safe-area-inset-top)); background: radial-gradient(120% 70% at 85% 30%, #ffe1dc 0%, transparent 55%), radial-gradient(90% 60% at 10% 80%, #dcebff 0%, transparent 60%), linear-gradient(180deg, #fbfbfd 0%, #e8f1fb 100%); }
.bienvenida__marca { margin: 0; padding: 0 16px; font: 800 clamp(5rem, 30vw, 9rem)/.86 var(--rotulo); letter-spacing: -.06em; text-align: center; color: #0b0b0b; animation: bvMarca .9s var(--suave) both; }
.bienvenida__escena { position: relative; min-height: 300px; margin-top: 14px; }
/* Fondo de palabras de la portada: tenue, del color del degradado (cálido arriba, frío abajo), y se desvanece en las orillas. */
.bv-fondo { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: space-evenly; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; --bv-tinta: 130 60 52; --bv-alfa: .1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%); animation: bvFondo 1.6s .2s var(--suave) both; }
.bv-fondo__fila { flex: none; white-space: nowrap; color: rgb(var(--bv-tinta) / var(--bv-alfa)); }
.bv-fondo__fila:nth-child(n+4) { --bv-tinta: 70 72 92; }
.bv-fondo__fila:nth-child(n+7) { --bv-tinta: 38 84 150; }
.bv-fondo__pista { display: inline-flex; align-items: baseline; width: max-content; animation: bvDesliza calc(var(--v, 90s) * 2) linear infinite var(--dir, normal); will-change: transform; }
.bv-fondo__palabra { font: 600 clamp(1.7rem, 8.6vw, 3.1rem)/1.05 var(--rotulo); letter-spacing: -.02em; }
.bv-fondo__frase { font: italic 600 clamp(.86rem, 3.5vw, 1.14rem)/1.2 var(--sans); }
.bv-fondo__art { margin-left: .7em; font: 700 clamp(.62rem, 2.3vw, .76rem)/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: rgb(var(--bv-tinta) / calc(var(--bv-alfa) * 1.2)); }
.bv-fondo__sep { padding: 0 .9em; font-style: normal; font-weight: 700; opacity: .7; }
.bv-fondo__fila--palabras .bv-fondo__sep { font-size: clamp(.8rem, 3.4vw, 1.2rem); padding: 0 1.1em; opacity: .5; vertical-align: middle; }
/* Un halo del color del fondo separa la marca de las palabras que pasan detrás. */
.bienvenida__marca { position: relative; z-index: 1; text-shadow: 0 0 .22em rgb(251 251 253 / .95), 0 0 .5em rgb(251 251 253 / .8); }
.bv-cara { position: absolute; border-radius: 50%; overflow: hidden; box-shadow: 0 18px 40px -18px rgb(30 40 60 / .45); animation: bvEntra .8s var(--suave) both, bvFlota 6s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s), calc(var(--d, 0) * 1s + .8s); }
.bv-cara img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.bv-cara--1 { --d: .05; width: 34%; aspect-ratio: 1; left: -6%; top: 6%; }
.bv-cara--2 { --d: .15; width: 20%; aspect-ratio: 1; left: 39%; top: 2%; }
.bv-cara--3 { --d: .25; width: 36%; aspect-ratio: 1; right: -7%; top: 10%; }
.bv-cara--4 { --d: .35; width: 38%; aspect-ratio: 1; left: -8%; bottom: -6%; }
.bv-cara--5 { --d: .45; width: 40%; aspect-ratio: 1; right: -9%; bottom: -8%; }
.bv-cara--6 { --d: .55; width: 16%; aspect-ratio: 1; left: 44%; bottom: 4%; }
.bv-cara--ingo { --d: .3; width: 15%; aspect-ratio: 1; left: 30%; top: 40%; overflow: visible; box-shadow: none; display: grid; place-items: center; }
.bv-cara--ingo .avatar-ingo { width: 100%; height: 100%; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .6); }
.bienvenida__globo { position: absolute; left: 47%; top: 44%; padding: 10px 18px; border-radius: 999px; background: #0b0b0b; color: #fff; font: 800 clamp(1.05rem, 5vw, 1.4rem)/1 var(--rotulo); transform: rotate(-8deg); animation: bvGlobo .7s 1s var(--suave) both; }
.bienvenida__globo::after { content: ""; position: absolute; left: 22%; bottom: -7px; width: 16px; height: 16px; background: inherit; border-radius: 3px; transform: rotate(45deg) skew(8deg, 8deg); }
.bienvenida__chispa { position: absolute; left: 40%; top: 33%; display: flex; gap: 6px; transform: rotate(-20deg); }
.bienvenida__chispa i { width: 4px; height: 16px; border-radius: 4px; background: #111; animation: bvChispa 1.6s 1.4s ease-in-out infinite; }
.bienvenida__chispa i + i { height: 12px; margin-top: 6px; animation-delay: 1.55s; }
.bienvenida__abajo { position: relative; display: grid; gap: 12px; padding: 22px max(20px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-bottom)); width: min(520px, 100%); margin-inline: auto; animation: bvSube .7s .2s var(--suave) both; }
.bienvenida__lema { margin: 0 0 4px; text-align: center; color: var(--ink-600); font-size: .95rem; }
.bv-boton { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 22px; border-radius: 999px; font: 700 1.02rem/1 var(--sans); transition: transform .2s var(--suave), filter .2s; -webkit-tap-highlight-color: transparent; }
.bv-boton:active { transform: scale(.97); }
.bv-boton svg { width: 22px; height: 22px; flex: none; }
.bv-boton--verde { min-height: 64px; background: linear-gradient(180deg, #22a06b, #0b6b4b); color: #fff; font-size: 1.1rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .18), 0 16px 30px -14px #0b6b4b; }
.bv-boton--verde svg { position: absolute; right: 22px; }
.bv-boton--blanco { background: #fff; color: #111; box-shadow: 0 8px 24px -14px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(0 0 0 / .05); }
.bv-boton--negro { background: #0b0b0b; color: #fff; }
.bv-boton--cargando span { opacity: .4; }
.bv-boton--cargando::after { content: ""; position: absolute; right: 22px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: girar .8s linear infinite; }
.bienvenida__nota { text-align: center; color: var(--ink-500); font-size: .78rem; line-height: 1.45; }
:root[data-bienvenida] .isla, :root[data-bienvenida] .barra { visibility: hidden; }
@keyframes bvMarca { from { opacity: 0; transform: translateY(-14px) scale(.96); letter-spacing: 0; } }
@keyframes bvDesliza { to { transform: translateX(-50%); } }
@keyframes bvFondo { from { opacity: 0; } }
@keyframes bvEntra { from { opacity: 0; transform: scale(.6) translateY(20px); } }
@keyframes bvFlota { 50% { translate: 0 -10px; } }
@keyframes bvGlobo { from { opacity: 0; transform: rotate(-8deg) scale(.4); } }
@keyframes bvChispa { 50% { transform: scaleY(.55); opacity: .6; } }
@keyframes bvSube { from { opacity: 0; transform: translateY(24px); } }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .bienvenida { --bv-fondo-abajo: #0b0b0b; } :root:not([data-tema="claro"]) .bienvenida__arriba { background: #000; } :root:not([data-tema="claro"]) .bienvenida__marca { color: #fff; } :root:not([data-tema="claro"]) .bv-fondo { --bv-tinta: 255 214 204; --bv-alfa: .065; } :root:not([data-tema="claro"]) .bienvenida__marca { text-shadow: 0 0 .22em #000, 0 0 .5em #000; } :root:not([data-tema="claro"]) .bv-fondo__fila:nth-child(n+4) { --bv-tinta: 255 255 255; } :root:not([data-tema="claro"]) .bv-fondo__fila:nth-child(n+7) { --bv-tinta: 196 220 255; } :root:not([data-tema="claro"]) .bienvenida__globo { background: #fff; color: #0b0b0b; } :root:not([data-tema="claro"]) .bienvenida__chispa i { background: #fff; } :root:not([data-tema="claro"]) .bv-boton--negro { background: #2a2a2a; } }
:root[data-tema="oscuro"] .bienvenida { --bv-fondo-abajo: #0b0b0b; }
:root[data-tema="oscuro"] .bienvenida__arriba { background: #000; }
:root[data-tema="oscuro"] .bienvenida__marca { color: #fff; }
:root[data-tema="oscuro"] .bv-fondo { --bv-tinta: 255 214 204; --bv-alfa: .065; }
:root[data-tema="oscuro"] .bienvenida__marca { text-shadow: 0 0 .22em #000, 0 0 .5em #000; }
:root[data-tema="oscuro"] .bv-fondo__fila:nth-child(n+4) { --bv-tinta: 255 255 255; }
:root[data-tema="oscuro"] .bv-fondo__fila:nth-child(n+7) { --bv-tinta: 196 220 255; }
:root[data-tema="oscuro"] .bienvenida__globo { background: #fff; color: #0b0b0b; }
:root[data-tema="oscuro"] .bienvenida__chispa i { background: #fff; }
:root[data-tema="oscuro"] .bv-boton--negro { background: #2a2a2a; }
@media (max-height: 700px) { .bienvenida__escena { min-height: 230px; } .bv-boton { min-height: 52px; } .bv-boton--verde { min-height: 56px; } }

/* ——— Aviso de isla: píldora negra que sale del borde derecho (volumen, silencio, modo, conexión) ——— */
.aviso-isla { --c: #fff; position: fixed; z-index: 210; right: 0; top: 34%; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 18px 12px 16px; border-radius: 26px 0 0 26px; background: #000; color: #fff; transform: translateX(110%); pointer-events: none; transition: transform .55s cubic-bezier(.34, 1.4, .5, 1); box-shadow: -10px 14px 40px -18px rgb(0 0 0 / .7); }
.aviso-isla::before, .aviso-isla::after { content: ""; position: absolute; right: 0; width: 26px; height: 26px; background: radial-gradient(circle at 0 0, transparent 25.5px, #000 26px); }
.aviso-isla::before { bottom: 100%; background: radial-gradient(circle at 0 0, transparent 25.5px, #000 26px); }
.aviso-isla::after { top: 100%; background: radial-gradient(circle at 0 100%, transparent 25.5px, #000 26px); }
.aviso-isla--dentro { transform: none; }
.aviso-isla--fuera { transform: translateX(110%); transition-timing-function: var(--ios); }
.aviso-isla svg { width: 26px; height: 26px; color: var(--c); flex: none; }
.aviso-isla b { font: 800 .82rem/1 var(--rotulo); letter-spacing: .12em; text-transform: uppercase; }
.aviso-isla[data-modo="nivel"] { padding: 14px 12px; border-radius: 30px 0 0 30px; }
.aviso-isla__barra { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 54px; height: 150px; padding-bottom: 14px; border-radius: 20px; overflow: hidden; background: #2c2c2e; }
.aviso-isla__barra::before { content: ""; position: absolute; inset: auto 0 0; height: calc(var(--n) * 100%); background: #f2f2f7; border-radius: 0 0 20px 20px; transition: height .5s var(--suave); }
.aviso-isla__barra svg { position: relative; color: #3a3a3c; width: 24px; height: 24px; }
.aviso-isla--dentro .aviso-isla__barra::before { animation: avisoNivel .7s var(--suave) both; }
@keyframes avisoNivel { from { height: 0; } }

/* ——— Cargadores: un gesto distinto para cada espera ——— */
.cargando::before { content: ""; width: 40px; height: 40px; border-radius: 50%; border: 3px solid color-mix(in oklab, var(--ink-950) 14%, transparent); border-top-color: var(--ink-950); animation: girar .9s linear infinite; }
.cargando--puntos::before { width: 10px; height: 10px; border: 0; background: var(--ink-950); box-shadow: -18px 0 var(--ink-950), 18px 0 var(--ink-950); animation: cargaPuntos 1.1s ease-in-out infinite; }
.cargando--buscar::before { width: 26px; height: 26px; border: 3.5px solid var(--ink-950); background: none; animation: cargaLupa 1.4s ease-in-out infinite; }
.cargando--buscar::after { content: ""; width: 12px; height: 3.5px; margin-top: -24px; margin-left: 30px; border-radius: 3px; background: var(--ink-950); transform: rotate(45deg); animation: cargaLupaMango 1.4s ease-in-out infinite; }
.cargando--reloj::before { border: 3px solid var(--ink-950); background: conic-gradient(var(--ink-950) 0 2%, transparent 2% 100%) center / 100% 100%; animation: girar 1.6s steps(12) infinite; }
.cargando--descarga::before { width: 30px; height: 34px; border: 0; border-radius: 0; background: linear-gradient(var(--ink-950), var(--ink-950)) 50% 0 / 3.5px 22px no-repeat, conic-gradient(from 135deg at 50% 64%, var(--ink-950) 0 25%, transparent 0) 50% 6px / 18px 18px no-repeat, linear-gradient(var(--ink-950), var(--ink-950)) 50% 100% / 30px 3.5px no-repeat; animation: cargaBaja 1.2s var(--suave) infinite; }
.cargando--senal::before { width: 42px; height: 42px; border: 0; background: radial-gradient(circle at 50% 100%, var(--ink-950) 0 4px, transparent 5px 9px, var(--ink-950) 10px 13px, transparent 14px 18px, var(--ink-950) 19px 22px, transparent 23px) 50% 100% / 42px 42px no-repeat; -webkit-mask: conic-gradient(from -45deg at 50% 100%, #000 0 25%, transparent 0); mask: conic-gradient(from -45deg at 50% 100%, #000 0 25%, transparent 0); border-radius: 0; animation: cargaSenal 1.8s ease-in-out infinite; }
@keyframes cargaPuntos { 0%, 100% { box-shadow: -18px 0 var(--ink-950), 18px -8px var(--ink-950); transform: translateY(0); } 33% { box-shadow: -18px -8px var(--ink-950), 18px 0 var(--ink-950); transform: translateY(4px); } 66% { box-shadow: -18px 0 var(--ink-950), 18px 0 var(--ink-950); transform: translateY(-8px); } }
@keyframes cargaLupa { 0%, 100% { transform: translate(-8px, 0); } 25% { transform: translate(0, -6px); } 50% { transform: translate(8px, 0); } 75% { transform: translate(0, 4px); } }
@keyframes cargaLupaMango { 0%, 100% { translate: -8px 0; } 25% { translate: 0 -6px; } 50% { translate: 8px 0; } 75% { translate: 0 4px; } }
@keyframes cargaBaja { 0% { background-position: 50% -10px, 50% -4px, 50% 100%; opacity: .3; } 60%, 100% { background-position: 50% 0, 50% 6px, 50% 100%; opacity: 1; } }
@keyframes cargaSenal { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ——— Base de cristal: blanco liso en claro, negro liso en oscuro, sin brillos de fondo ———
   Paneles, filas, buscadores y botones son vidrio con borde de luz; el desenfoque real solo va en lo que flota
   (barra, isla y hojas), que es donde se ve y donde el teléfono lo aguanta sin trabarse. */
:root {
  --cristal: rgb(255 255 255 / .56); --cristal-fuerte: rgb(246 247 249 / .84); --cristal-borde: rgb(255 255 255 / .8);
  --cristal-luz: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(20 26 32 / .07);
  --cristal-sombra: 0 14px 34px -22px rgb(25 32 40 / .5);
  --cristal-boton: linear-gradient(180deg, rgb(255 255 255 / .85), rgb(255 255 255 / .38));
  --fondo-cristal: linear-gradient(#fff, #fff);
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) {
  --cristal: rgb(255 255 255 / .06); --cristal-fuerte: rgb(11 15 24 / .82); --cristal-borde: rgb(255 255 255 / .12);
  --cristal-luz: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .4);
  --cristal-sombra: 0 18px 40px -24px rgb(0 0 0 / .95);
  --cristal-boton: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .04));
  --fondo-cristal: linear-gradient(#000, #000);
} }
:root[data-tema="oscuro"] {
  --cristal: rgb(255 255 255 / .06); --cristal-fuerte: rgb(11 15 24 / .82); --cristal-borde: rgb(255 255 255 / .12);
  --cristal-luz: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .4);
  --cristal-sombra: 0 18px 40px -24px rgb(0 0 0 / .95);
  --cristal-boton: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .04));
  --fondo-cristal: linear-gradient(#000, #000);
}
body { background: var(--fondo-cristal) fixed, var(--fondo); }
.panel, .escenario, .busqueda, .carta-multa, .plan-paso, .guion, .resultado__ley, .lugar-actual, .vitrina__boton, .entrada__boton, .der-fila, .flujo-entrada, .der-busca, .buscador, .calc__buscador, .segmento, .chip, .volver, .boton--secundario, .boton--suave, .ayuda-fija, .lugar-chip {
  background-color: var(--cristal); background-image: none; border-color: var(--cristal-borde);
  box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz), var(--cristal-sombra);
}
.perfil-grupos { border-radius: 22px; background: var(--cristal); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz), var(--cristal-sombra); overflow: hidden; }
.perfil-grupo { border-top-color: color-mix(in oklab, var(--ink-950) 7%, transparent); }
.icono-redondo, .buscador__ic, .litigar__voz, .litigar__notas, .litigar__cerrar {
  background: var(--cristal-boton); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz), 0 6px 16px -10px rgb(0 0 0 / .45);
}
.boton--primario { background: linear-gradient(180deg, color-mix(in oklab, var(--ink-950) 78%, var(--papel)), var(--ink-950)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(0 0 0 / .35), var(--sombra); }
.boton--marca { background: linear-gradient(180deg, color-mix(in oklab, var(--marca) 80%, white), var(--marca)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 -1px 0 rgb(0 0 0 / .2), 0 12px 24px -14px var(--marca); }
.vidrio, .barra__caja.vidrio { background-color: var(--cristal-fuerte); border-color: var(--cristal-borde); box-shadow: var(--cristal-luz), var(--sombra-2xl); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); }
.hoja { background: var(--cristal-fuerte); backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%); box-shadow: var(--cristal-luz), var(--sombra-2xl); }
.hoja__pie { background: transparent; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hoja, .vidrio { background-color: var(--papel); } }

/* ——— 911: tarjetas grandes, sugerencias y el avatar que pregunta ——— */
.ayuda-portada { touch-action: pan-y; gap: 14px; justify-content: flex-start; }
.ayuda-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 520px); }
.ayuda-tarjeta { position: relative; display: grid; justify-items: start; align-content: end; gap: 2px; min-height: 132px; padding: 14px 12px 12px; border-radius: 26px; background: var(--cristal); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz), var(--cristal-sombra); color: var(--ink-950); text-align: left; transition: transform .2s var(--suave); -webkit-tap-highlight-color: transparent; }
.ayuda-tarjeta:active { transform: scale(.96); }
.ayuda-tarjeta > svg { width: 28px; height: 28px; margin-bottom: auto; color: var(--c); stroke-width: 2.2; }
.ayuda-tarjeta b { font: 800 1.02rem/1.1 var(--rotulo); }
.ayuda-tarjeta small { color: var(--ink-500); font-size: .72rem; line-height: 1.2; }
.ayuda-tarjeta__insignia { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px; background: var(--c); color: #fff; font: 800 .78rem/1 var(--rotulo); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 6px 14px -6px var(--c); }
.ayuda-tarjeta--911 { background: linear-gradient(160deg, #ff5a4f, #c8102e); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 0 rgb(0 0 0 / .25), 0 16px 30px -14px #c8102e; }
.ayuda-tarjeta--911 > svg { color: #fff; animation: ayuda-sirena .9s ease-in-out infinite alternate; transform-origin: 50% 85%; }
.ayuda-tarjeta--911 b { font-size: 1.6rem; letter-spacing: -.02em; }
.ayuda-tarjeta--911 small { color: rgb(255 255 255 / .85); }
.ayuda-tarjeta--911 .ayuda-tarjeta__insignia { background: #fff; color: #c8102e; }
.ayuda-sugiere__titulo { width: min(100%, 520px); margin: 4px 0 -4px; }
.ayuda-sugiere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 520px); }
.ayuda-sugiere > * { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 10px; border-radius: 18px; background: var(--cristal); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz); color: var(--ink-950); text-align: left; -webkit-tap-highlight-color: transparent; }
.ayuda-sugiere > *:active { transform: scale(.97); }
.ayuda-sugiere span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
.ayuda-sugiere span svg { width: 18px; height: 18px; }
.ayuda-sugiere b { display: grid; font-size: .82rem; line-height: 1.2; font-weight: 700; }
.ayuda-sugiere small { color: var(--ink-500); font-weight: 600; font-size: .74rem; }
.ayuda-pie { display: grid; grid-template-columns: 52px 1fr 52px; align-items: end; gap: 10px; width: min(100%, 520px); margin-top: auto; padding-top: 52px; }
.ayuda-pie__flecha { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cristal-boton); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz), 0 8px 18px -10px rgb(0 0 0 / .5); color: var(--ink-800); }
.ayuda-pie__flecha svg { width: 22px; height: 22px; }
.ayuda-pie__ingo { position: relative; justify-self: center; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.ayuda-pie__ingo .avatar-ingo { width: 78px; height: 78px; box-shadow: 0 0 0 4px var(--cristal-fuerte), 0 14px 30px -12px rgb(0 0 0 / .6); }
.ayuda-pie__ingo:active .avatar-ingo { transform: scale(.94); }
.ayuda-pie__globo { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; width: max-content; max-width: min(250px, 64vw); padding: 9px 14px; border-radius: 18px; background: var(--ink-950); color: var(--papel); font: 700 .86rem/1.25 var(--sans); text-align: center; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .6); }
.ayuda-pie__globo::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; margin-left: -7px; background: inherit; border-radius: 3px; transform: rotate(45deg); }
.ayuda-pie__globo--entra { animation: globoEntra .45s var(--suave); }
@keyframes globoEntra { from { opacity: 0; transform: translateY(6px) scale(.92); } }

/* ——— Abogados › Publicaciones: periódico con encabezado de Instagram ——— */
.diario { margin: 4px 0 6px; padding: 10px 0 8px; border-block: 3px double var(--ink-950); text-align: center; }
.diario__lema, .diario__fecha { margin: 0; font: 700 .68rem/1.3 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-600); }
.diario__fecha { padding-top: 6px; margin-top: 6px; border-top: 1px solid color-mix(in oklab, var(--ink-950) 25%, transparent); }
.diario__nombre { margin: 4px 0 2px; font: 900 clamp(2.6rem, 14vw, 4.2rem)/.95 var(--display); letter-spacing: -.01em; color: var(--ink-950); }
.muro--diario { gap: 0; }
.post--ig { display: block; padding: 18px 0 20px; border-bottom: 1px solid color-mix(in oklab, var(--ink-950) 14%, transparent); }
.post__cabeza { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.post--ig .post__yo { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px #e1306c; }
.post--ig .post__quien { display: grid; gap: 1px; min-width: 0; }
.post--ig .post__quien b { font-size: .92rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post--ig .post__quien small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post__fecha { color: var(--ink-500); font: 700 .72rem/1 var(--rotulo); letter-spacing: .06em; text-transform: uppercase; }
.post--ig .post__media { aspect-ratio: 4 / 5; width: calc(100% + 32px); margin-inline: -16px; border-radius: 0; background: #111; }
@media (min-width: 560px) { .post--ig .post__media { width: 100%; margin-inline: 0; border-radius: 22px; } }
.post--ig .post__media img { object-fit: cover; }
/* Videos sin portada propia: fondo verde de la casa con el logo de la cuenta en círculo; debajo, sus iniciales por si el logo
   falta o no carga. El play queda abajo, completo. */
.post--ig .post__media--sola, .post--ig .post__media--logo { background: radial-gradient(120% 80% at 50% 35%, #1d6b4f, #0d0d0d 70%); }
.post--ig .post__media--logo img, .post--ig .post__media .post__siglas { inset: 50% auto auto 50%; translate: -50% -62%; width: 42%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.post--ig .post__media--logo img { object-fit: cover; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 12px 32px rgb(0 0 0 / .35); }
.post--ig .post__media .post__siglas { display: grid; place-items: center; padding: 0; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55); font: 800 clamp(2rem, 11vw, 3.4rem)/1 var(--rotulo); letter-spacing: -.02em; }
.post--ig .post__media--logo .post__play, .post--ig .post__media--sola .post__play { top: auto; bottom: 13%; translate: -50% 0; }
.post__play { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; display: grid; place-items: center; width: 64px !important; height: 64px; padding: 0 !important; border-radius: 50%; background: rgb(0 0 0 / .35) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55); color: #fff; }
.post__play svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.post--ig .post__cuerpo { gap: 4px; margin-top: 12px; }
.post__antetitulo { margin: 0; color: var(--senal); font: 800 .7rem/1.2 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.post__titular { margin: 2px 0 4px; font: 800 clamp(1.4rem, 6.4vw, 1.9rem)/1.08 var(--display); letter-spacing: -.005em; color: var(--ink-950); text-transform: none; }
.post--principal .post__titular { font-size: clamp(1.9rem, 9vw, 2.7rem); }
.post--principal .post__antetitulo::before { content: "Principal"; padding: 3px 7px; border-radius: 4px; background: var(--senal); color: #fff; letter-spacing: .1em; }
.post__firma { margin: 0; color: var(--ink-600); font-size: .84rem; font-style: italic; }
.post__firma b { font-style: normal; color: var(--ink-950); }
.post__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.post__acciones > * { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--cristal-boton); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz); color: var(--ink-900); font: 700 .82rem/1 var(--sans); }
.post__acciones svg { width: 16px; height: 16px; }
.post--nota { display: block; padding: 20px 0 22px; border-bottom: 1px solid color-mix(in oklab, var(--ink-950) 14%, transparent); }
.post--nota .post__titular { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
.post--nota .post__cuerpo { display: block; }
.post__resumen--capitular { margin: 6px 0 8px; color: var(--ink-700) !important; font: 400 1rem/1.55 var(--clasica) !important; font-size: 1.12rem !important; text-align: justify; hyphens: auto; }
.post__resumen--capitular::first-letter { float: left; margin: 4px 8px 0 0; font: 800 3.4rem/.8 var(--display); color: var(--ink-950); }

/* ——— Abogados › Perfiles: cuadrícula tipo Explorar ——— */
.ab-explora { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-auto-flow: dense; gap: 3px; margin-inline: -16px; }
@media (min-width: 560px) { .ab-explora { margin-inline: 0; gap: 6px; border-radius: 18px; overflow: hidden; } }
.ab-explora__cuadro { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: linear-gradient(160deg, #2a2a2e, #111); color: #fff; text-align: left; -webkit-tap-highlight-color: transparent; }
.ab-explora__cuadro--alto { grid-row: span 2; aspect-ratio: auto; }
.ab-explora__cuadro > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--suave); }
.ab-explora__cuadro:active > img { transform: scale(1.05); }
.ab-explora__cuadro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgb(0 0 0 / .78)); }
.ab-explora__yo { position: absolute; z-index: 1; top: 8px; left: 8px; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: #e1306c; box-shadow: 0 0 0 2px #fff; font: 800 .62rem/1 var(--rotulo); }
.ab-explora__cuadro--oficial .ab-explora__yo { background: #17694a; }
.ab-explora__yo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-explora__texto { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; display: grid; gap: 2px; }
.ab-explora__texto b { font-size: .78rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-explora__texto small { font-size: .68rem; line-height: 1.2; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ab-explora__cuadro--alto .ab-explora__texto b { font-size: .92rem; }
.ab-explora__cuadro--alto .ab-explora__texto small { font-size: .76rem; -webkit-line-clamp: 3; }

/* 911: sin el panel de arriba; el avatar es lo principal y llena el hueco libre. Las sugerencias se deslizan. */
.ayuda-portada { padding-top: 0; gap: 12px; }
.ayuda-sugiere__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ayuda-sugiere__titulo small { color: var(--ink-500); font: 600 .7rem/1 var(--sans); letter-spacing: 0; text-transform: none; }
.ayuda-sugiere { flex: none; max-height: calc(3 * 58px + 2 * 8px + 4px); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; padding: 2px; margin: -2px; scrollbar-width: none; -webkit-mask: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask: linear-gradient(180deg, #000 calc(100% - 26px), transparent); touch-action: pan-y; }
.ayuda-sugiere::-webkit-scrollbar { display: none; }
.ayuda-sugiere > * { scroll-snap-align: start; }
.ayuda-pie { flex: 1; min-height: 0; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: end; padding-top: 8px; }
.ayuda-pie__ingo { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; min-height: 0; }
.ayuda-pie__ingo .avatar-ingo { flex: none; width: clamp(110px, min(54vw, 24dvh), 250px); height: auto; aspect-ratio: 1; box-shadow: 0 0 0 5px var(--cristal-fuerte), 0 22px 44px -18px rgb(0 0 0 / .6); }
.ayuda-pie__globo { position: relative; bottom: auto; left: auto; translate: none; max-width: calc(100% + 80px); padding: 10px 16px; font-size: .95rem; }
/* El diario usa tipografía de periódico (serif) aunque el resto de la app use la del sistema. */
.diario__nombre, .post__titular, .post__resumen--capitular::first-letter { font-family: "Playfair Display", Georgia, "Times New Roman", serif; }
.diario__nombre { font-weight: 900; font-style: italic; }
.post__media .post__play { left: 50%; top: 50%; bottom: auto; padding: 0; font-size: 0; }

/* ——— Chat de Justo con el formato del 911 (1.61.0) ———
   Arriba solo las sugerencias; abajo el avatar grande es el botón de grabar, con REC y el tiempo debajo.
   Al hablar tú, el avatar crece; cuando Justo responde, se hace pequeño y el hilo pasa a modo lectura. */
.litigar__ajuste { grid-column: 1; grid-row: 1; justify-self: start; display: grid; place-items: center; width: 44px; height: 44px; margin: 8px 0 0 52px; border: 0; border-radius: 999px; background: var(--cristal-boton); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz), 0 6px 16px -10px rgb(0 0 0 / .45); color: inherit; }
.litigar__ajuste svg { width: 20px; height: 20px; }
.litigar__inicio { align-content: end; gap: 14px; }
.litigar__dock { align-items: flex-end; gap: 18px; }
.litigar__grabar--cara, .litigar[data-turno] .litigar__grabar--cara { width: auto; display: grid; justify-items: center; gap: 8px; -webkit-tap-highlight-color: transparent; }
/* La cara de Justo en la plática mide lo mismo que la bola de la isla (72 px); solo al escucharte crece al doble, para que el texto se siga leyendo. */
.litigar__grabar--cara .avatar-ingo { width: 72px; height: auto; aspect-ratio: 1; box-shadow: 0 0 0 5px var(--cristal-fuerte, #fff), 0 22px 44px -18px rgb(0 0 0 / .6); transition: width .5s var(--suave), box-shadow .3s; }
.litigar__grabar--cara:active .avatar-ingo { transform: scale(.96); }
.litigar[data-turno="oye"] .litigar__grabar--cara .avatar-ingo { width: 144px; box-shadow: 0 0 0 5px var(--cristal-fuerte, #fff), 0 0 0 11px rgb(224 49 47 / .35), 0 24px 48px -18px rgb(0 0 0 / .6); animation: avatarOye 1.6s ease-in-out infinite; }
@keyframes avatarOye { 50% { transform: scale(1.035); } }
.litigar__rec { display: inline-flex; align-items: center; gap: 8px; font: 700 .8rem/1 var(--rotulo) !important; letter-spacing: .1em; font-variant-numeric: tabular-nums; opacity: .7; }
.litigar__rec b { display: inline-flex; align-items: center; gap: 5px; }
.litigar__rec b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #e0312f; }
.litigar__grabar[aria-pressed="true"] .litigar__rec { opacity: 1; color: #e0312f; }
.litigar__grabar[aria-pressed="true"] .litigar__rec b::before { animation: recParpadea 1s steps(2, start) infinite; }
@keyframes recParpadea { to { visibility: hidden; } }
:root[data-nucleo="habla"] .litigar__grabar--cara .avatar-ingo:not(.avatar-ingo--bola) { animation: avatarHabla 1.1s ease-in-out infinite; }
/* Modo lectura: ya hay respuesta y no estás hablando. Avatar chico, sin distracciones, texto cómodo de leer. */
.litigar:has(.litigar__msj--yo):not([data-turno="oye"]) .litigar__grabar--cara .avatar-ingo { width: 72px; box-shadow: 0 0 0 3px var(--cristal-fuerte, #fff), 0 10px 20px -10px rgb(0 0 0 / .5); }
.litigar:has(.litigar__msj--yo):not([data-turno="oye"]) .litigar__rec { font-size: .66rem !important; }
.litigar:has(.litigar__msj--yo):not([data-turno="oye"]) .litigar__nota { display: none; }
.litigar:has(.litigar__msj--yo):not([data-turno="oye"]) .litigar__dock { gap: 26px; }
.litigar:has(.litigar__msj--yo):not([data-turno="oye"]) .litigar__hilo { padding-inline: 22px; }
.litigar:has(.litigar__msj--yo):not([data-turno="oye"]) .litigar__msj--app { max-width: 100%; padding: 4px 0; background: none !important; box-shadow: none; font-size: clamp(1.12rem, 4.4vw, 1.26rem); line-height: 1.75; }
.litigar:has(.litigar__msj--yo):not([data-turno="oye"]) .litigar__msj--yo { opacity: .75; }
:root[data-movimiento="reducido"] .litigar__grabar--cara .avatar-ingo { animation: none !important; transition: none; }
@media (prefers-reduced-motion: reduce) { .litigar__grabar--cara .avatar-ingo { animation: none !important; transition: none; } }
.litigar__cabeza--avatar > .litigar__notas { grid-column: 1; grid-row: 1; }

/* Tu Justo › Sobre ti: a qué te dedicas. */
.avatar-oficios { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-oficios button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--cristal); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz); color: inherit; font: 600 .86rem/1.1 var(--sans); -webkit-tap-highlight-color: transparent; }
.avatar-oficios button svg { width: 16px; height: 16px; }
.avatar-oficios button[aria-checked="true"] { background: var(--ink-950); color: var(--papel); box-shadow: none; }

/* La cara de tu Justo dentro de la bola de la barra: en los reels (donde la bola abre la plática) y en la islita al leer. */
.isla__bola, .islita__bola { position: relative; }
.isla__cara { position: absolute; z-index: 1; inset: 0; display: none; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; transform: scale(1.06); pointer-events: none; }
:root[data-vista="reels"] .isla__bola .isla__cara, .islita__bola .isla__cara { display: block; }
.isla__bola:has(.isla__cara), .islita__bola:has(.isla__cara) { box-shadow: 0 0 0 2px var(--papel, #fff), 0 8px 18px -8px rgb(0 0 0 / .55); }

/* ——— Correcciones de la revisión 1.61.0 ——— */
/* Lo que se abre desde la portada (aviso de privacidad, toasts) va por encima de ella. */
:root[data-bienvenida] .velo { z-index: 155; }
:root[data-bienvenida] .hoja { z-index: 160; }
:root[data-bienvenida] .aviso-toast { z-index: 170; }
/* La escena de la portada se ajusta a la altura del teléfono y no tapa el lema. */
.bienvenida__escena, .bienvenida__escena[class] { min-height: 0; height: clamp(170px, 34dvh, 320px); }
@media (max-height: 700px) { .bienvenida__escena { min-height: 0; } }
/* La barra fija de Teléfonos debe tapar lo que pasa por debajo. */
.ayuda-fija { background-color: var(--cristal-fuerte); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ayuda-fija { background-color: var(--papel); } }
/* Cargador «buscar»: solo la lente, sin el mango suelto. */
.cargando--buscar::after { content: none; }
/* Movimiento reducido: las palabras del fondo de la portada se quedan quietas; nada se anima en ::after. */
:root[data-movimiento="reducido"] *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .bv-fondo, .bv-fondo__pista { animation: none; } }
/* Reels: botón fijo arriba a la derecha para volver a Inicio. */
.tema-reels { position: fixed; z-index: 64; top: calc(env(safe-area-inset-top) + 12px); right: 14px; display: none; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 999px; background: var(--cristal-fuerte); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz), 0 8px 18px -10px rgb(0 0 0 / .5); color: var(--ink-950); -webkit-tap-highlight-color: transparent; }
.tema-reels svg { width: 20px; height: 20px; }
.tema-reels:active { transform: scale(.94); }
:root[data-vista="reels"]:not([data-litigar]):not([data-bienvenida]) .tema-reels { display: grid; }
/* 911: las sugerencias ocupan todo el espacio libre hasta el avatar (se ven más de entrada; las demás, deslizando). */
.ayuda-sugiere { flex: 1 1 auto; min-height: calc(2 * 58px + 8px); max-height: none; align-content: start; }
.ayuda-pie { flex: none; }

/* Perfil: tu avatar y Salir. Botón de cuenta con tu cara. */
.perfil-tarjeta__extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.perfil-tarjeta__boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 999px; background: var(--cristal-boton); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz); color: var(--ink-950); font: 700 .9rem/1 var(--sans); }
.perfil-tarjeta__boton svg { width: 18px; height: 18px; }
.perfil-tarjeta__boton--salir { color: #e0312f; }
[data-avatar] img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transform: scale(1.06); }
[data-avatar]:has(img) { overflow: hidden; }
.barra__yo--cara { overflow: hidden; padding: 0; background: var(--papel); box-shadow: 0 0 0 2px var(--ink-950); }
.barra__yo--cara img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.avatar-ingo--vacio { display: grid; place-items: center; background: var(--ink-100); color: var(--ink-600); }
.avatar-ingo--vacio svg { width: 40%; height: 40%; }

/* Abogados: buscador y pestañas fusionados en una isla fija bajo la barra; se esconde al bajar y vuelve al subir. */
.ab-isla { position: sticky; z-index: 6; top: 0; display: grid; gap: 6px; margin: 0 0 12px; padding: 6px; border-radius: 26px; background: var(--cristal-fuerte); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: inset 0 0 0 1px var(--cristal-borde), 0 10px 28px -16px rgb(0 0 0 / .45); transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .24s ease; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ab-isla { background: var(--papel); } }
.ab-isla[data-oculta] { transform: translateY(calc(-100% - 110px)); opacity: 0; pointer-events: none; }
.ab-isla .ab-buscador, .ab-isla .ab-buscador[class] { margin: 0; max-width: none; padding: 2px 4px 2px 14px; background: transparent; box-shadow: none; }
.ab-isla .ab-buscador input { padding: 8px 0; }
.ab-isla .ab-vistas { margin: 0; }
.ab-cabeza .seccion__cabeza { margin: 6px 0 10px; }
:root[data-movimiento="reducido"] .ab-isla { transition: none; }

/* Avisos de texto (modo, conexión, avisos): salen del borde izquierdo, debajo de los tres puntitos, sin tapar el contenido. */
.aviso-isla[data-modo="texto"] { left: 0; right: auto; top: auto; bottom: calc(env(safe-area-inset-bottom) + 14px); min-height: 56px; padding: 10px 18px 10px 14px; border-radius: 0 28px 28px 0; transform: translateX(-110%); box-shadow: 10px 14px 40px -18px rgb(0 0 0 / .7); }
.aviso-isla[data-modo="texto"]::before, .aviso-isla[data-modo="texto"]::after { content: none; }
.aviso-isla[data-modo="texto"].aviso-isla--dentro { transform: none; }
.aviso-isla[data-modo="texto"].aviso-isla--fuera { transform: translateX(-110%); }

/* ═══ 1.62.0 · Isla única: en Abogados y la Biblioteca, la barra lleva el buscador, el sol/luna y las pestañas ═══ */
/* Único sol/luna de la app (2026-11-08): siempre en la barra, junto a la cuenta. */
.barra__tema { display: grid; place-items: center; flex: none; width: 36px; height: 42px; padding: 0; border: 0; background: none; color: var(--ink-950); -webkit-tap-highlight-color: transparent; }
.barra__tema svg { width: 21px; height: 21px; }
.barra__busca { display: flex; align-items: center; gap: 7px; min-width: 0; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--ink-100); color: var(--ink-600); }
.barra__busca[hidden], .barra__fila[hidden] { display: none !important; }
.barra__busca svg { width: 17px; height: 17px; flex: none; }
.barra__busca input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--ink-950); font: 600 .9rem/1 var(--sans); outline: none; -webkit-appearance: none; appearance: none; }
.barra__busca input::placeholder { color: var(--ink-500); font-weight: 500; }
.barra__busca:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink-950); }
.barra__fila { display: flex; gap: 2px; }
.barra__fila button { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 8px; font-size: .84rem; white-space: nowrap; }
.barra__fila button span { overflow: hidden; text-overflow: ellipsis; }
.barra__fila svg { width: 15px; height: 15px; flex: none; }
.barra__donde svg { color: var(--marca); }
@media (max-width: 960px) {
  .barra__caja .ubicacion-pill { display: none; }
  .barra__tema { display: grid; place-items: center; flex: none; width: 36px; height: 42px; padding: 0; border: 0; background: none; color: var(--ink-950); -webkit-tap-highlight-color: transparent; }
  .barra__tema svg { width: 21px; height: 21px; }
  :root[data-barra-isla] .barra__caja { flex-wrap: wrap; gap: 8px; row-gap: 10px; padding: 9px 8px 8px 12px; border-radius: 28px; }
  :root[data-barra-isla] .barra .logo { flex: none; gap: 7px; font-size: 1.1rem; letter-spacing: .05em; }
  :root[data-barra-isla] .barra .logo__marca { width: 32px; height: 32px; }
  :root[data-barra-isla] .barra .logo small { margin-top: 2px; font-size: .5rem; letter-spacing: .22em; }
  :root[data-barra-isla] .barra__busca { flex: 1 1 0; }
  :root[data-barra-isla] .barra__acciones { gap: 2px; margin-left: 0; }
  :root[data-barra-isla] .barra .barra__yo { width: 40px; height: 40px; }
  /* Al escribir, el buscador toma el lugar del nombre. */
  :root[data-barra-isla] .barra__caja:focus-within .logo > span { display: none; }
  :root[data-barra-isla] .barra__fila { flex: 1 1 100%; margin-left: -4px; }
  :root[data-barra-isla] .barra__bajo { display: none; }
  :root[data-barra-isla][data-vista] #abogados.pagina, :root[data-barra-isla][data-vista] #leyes.pagina { padding-top: var(--alto-isla, 150px); }
}
@media (min-width: 961px) {
  .barra__busca { flex: none; margin: 0 4px 12px; height: 44px; border-radius: 14px; }
  .barra__fila { flex: none; flex-direction: column; gap: 4px; margin: 12px 4px 0; padding: 4px; border-radius: 16px; }
  .barra__fila button { justify-content: flex-start; min-height: 40px; padding: 0 12px; border-radius: 12px; }
  .barra__caja .barra__acciones { order: 2; }
}

/* 911: sin la tache (se cierra tocando fuera o deslizando hacia abajo) y con la bola más chica. */
.hoja--sin-cerrar [data-hoja-cerrar] { display: none; }
.ayuda-pie__ingo .avatar-ingo, .ayuda-pie__ingo .avatar-ingo[class] { width: clamp(84px, min(34vw, 15dvh), 150px); }
/* Historias: aro de color si hay nuevas, gris si ya las viste. */
[data-anillo="nuevo"] { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px #e1306c !important; }
[data-anillo="visto"] { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px var(--ink-300) !important; }
.post--ig .post__yo:not([data-anillo]) { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3px var(--ink-200); }
.ab-historias { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px 14px; padding: 6px 16px 4px; scrollbar-width: none; }
.ab-historias::-webkit-scrollbar { display: none; }
.ab-historias__uno { flex: none; display: grid; justify-items: center; gap: 6px; width: 70px; padding: 0; border: 0; background: none; color: var(--ink-950); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ab-historias__yo { position: relative; display: grid; place-items: center; width: 62px; height: 62px; overflow: hidden; border-radius: 50%; background: #111; color: #fff; font: 700 .9rem/1 var(--sans); }
.ab-historias__yo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-historias__uno--subir .ab-historias__yo { background: var(--ink-100); color: var(--ink-950); box-shadow: inset 0 0 0 1.5px var(--ink-300); }
.ab-historias__uno--subir svg { width: 24px; height: 24px; }
.ab-historias__uno small { max-width: 100%; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.ab-historias__uno:active .ab-historias__yo { transform: scale(.95); }
.hist { position: fixed; z-index: 190; inset: 0; display: grid; grid-template-columns: 100%; grid-template-rows: auto auto 1fr auto; background: #000; color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; animation: histEntra .24s cubic-bezier(.2, .9, .25, 1); }
.hist--fuera { opacity: 0; transform: translateY(40px); transition: opacity .2s, transform .2s; }
@keyframes histEntra { from { opacity: 0; transform: scale(.96); } }
.hist__barras { display: flex; gap: 4px; padding: calc(env(safe-area-inset-top) + 10px) 10px 0; position: relative; z-index: 2; }
.hist__barras span { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / .35); }
.hist__barras i { display: block; width: 0; height: 100%; background: #fff; }
.hist__barras i[data-lleno] { width: 100%; }
.hist__barras i[data-corre] { animation: histCorre 6s linear forwards; }
@keyframes histCorre { to { width: 100%; } }
.hist__cabeza { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 8px 0 12px; }
.hist__quien { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: #fff; font: 700 .9rem/1.1 var(--sans); }
.hist__quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist__quien small { flex: none; font-weight: 500; opacity: .7; }
.hist__quien > svg { width: 15px; height: 15px; flex: none; color: #5ac8fa; }
.hist__yo { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: #222; font-size: .7rem; }
.hist__yo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hist__cerrar { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; }
.hist__cerrar svg { width: 26px; height: 26px; }
.hist__foto { grid-row: 1 / -1; grid-column: 1; margin: 0; display: grid; place-items: center; overflow: hidden; }
.hist__foto img { width: 100%; height: 100%; object-fit: cover; }
.hist__texto { position: relative; z-index: 2; grid-row: 4; display: grid; gap: 10px; justify-items: start; padding: 60px 18px calc(env(safe-area-inset-bottom) + 22px); background: linear-gradient(transparent, rgb(0 0 0 / .78) 45%); }
.hist__texto p { margin: 0; font: 700 1.15rem/1.3 var(--sans); text-wrap: balance; }
.hist__texto small { font-size: .72rem; opacity: .7; }
.hist__ver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #000; font: 700 .9rem/1 var(--sans); text-decoration: none; }
.hist__ver svg { width: 18px; height: 18px; }
.hist__barras, .hist__cabeza, .hist__texto { grid-column: 1; }
.hist__texto, .hist__texto p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.hist__barras { grid-row: 1; } .hist__cabeza { grid-row: 2; }
:root[data-movimiento="reducido"] .hist { animation: none; }
.sube-hist { display: grid; gap: 12px; justify-items: start; }
.sube-hist__icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink-100); }
.sube-hist__icono svg { width: 28px; height: 28px; }
.sube-hist p, .sube-hist ol { margin: 0; line-height: 1.45; }
.sube-hist ol { padding-left: 20px; display: grid; gap: 6px; }
.sube-hist__ir { justify-self: stretch; justify-content: center; }
/* Biblioteca: la bola principal es la de la balanza y te pregunta por lo que ves. */
:root[data-vista="leyes"]:not([data-litigar]) .isla .isla__centro span.isla__bola { outline: 2px solid transparent; animation: invitaBola 2.4s ease-out infinite; }
:root[data-movimiento="reducido"][data-vista="leyes"] .isla .isla__centro span.isla__bola { animation: none; }
:root[data-barras="ocultas"] .bola-nube[data-pantalla] { opacity: 0; pointer-events: none; }
.bola-nube[data-pantalla] { white-space: normal; text-align: center; }
.litigar__rapidos--pantalla { margin-top: 10px; }

/* ═══ 1.62.0 · Librería: categorías, «Para empezar» numerado y repisas de vidrio por tema ═══ */
.libreria { display: block; }
.libreria__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 0 12px; }
.libreria__cabeza:first-child { margin-top: 6px; }
.libreria__cabeza h3 { margin: 0; font: 800 1.3rem/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink-950); }
.libreria__cabeza small, .libreria__cabeza button { padding: 0; border: 0; background: none; color: var(--ink-600); font: 600 .9rem/1 var(--sans); }
.libreria__cats, .libreria__top { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.libreria__cats::-webkit-scrollbar, .libreria__top::-webkit-scrollbar, .repisa__libros::-webkit-scrollbar { display: none; }
.libreria__uno { flex: none; display: grid; gap: 4px; width: min(46vw, 210px); padding: 0; border: 0; background: none; color: var(--ink-950); text-align: left; scroll-snap-align: start; }
.libreria__caja { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 176px; padding: 0 16px; overflow: hidden; border-radius: 20px; background: var(--ink-100); }
.libreria__caja > b { position: absolute; left: 8px; bottom: 6px; font: 300 7.5rem/.9 var(--sans); letter-spacing: -.06em; color: color-mix(in oklab, var(--ink-950) 13%, transparent); }
.libreria__tapa { position: relative; display: block; width: 90px; height: 134px; overflow: hidden; border-radius: 3px 5px 5px 3px; box-shadow: 0 14px 22px -10px rgb(0 0 0 / .5); }
.libreria__tapa img { width: 100%; height: 100%; object-fit: cover; }
.libreria__uno strong { margin-top: 6px; overflow: hidden; font: 700 .95rem/1.25 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.libreria__uno small { overflow: hidden; color: var(--ink-600); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.tapa-hecha { display: grid; align-content: space-between; width: 100%; height: 100%; padding: 10px 8px; background: var(--c); color: #fff; text-align: left; }
.tapa-hecha svg { width: 22px; height: 22px; opacity: .85; }
.tapa-hecha b { display: -webkit-box; overflow: hidden; font: 700 .68rem/1.2 var(--sans); -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.repisa { margin-top: 26px; }
.repisa__cabeza { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.repisa__cabeza h3 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font: 800 1.15rem/1.2 var(--sans); text-overflow: ellipsis; white-space: nowrap; color: var(--ink-950); }
.repisa__cabeza small { flex: none; margin-right: 4px; color: var(--ink-600); font-size: .86rem; }
.repisa__cabeza button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-600); }
.repisa__cabeza button svg { width: 18px; height: 18px; }
.repisa__fila { position: relative; margin: 0 -16px; }
.repisa__libros { display: flex; gap: 14px; overflow-x: auto; padding: 0 16px 24px; scrollbar-width: none; scroll-snap-type: x proximity; }
.repisa__libro { flex: none; width: 96px; height: 142px; padding: 0; overflow: hidden; border: 0; border-radius: 2px 5px 5px 2px; background: var(--ink-100); box-shadow: 0 12px 18px -10px rgb(0 0 0 / .55); scroll-snap-align: start; }
.repisa__libro img { width: 100%; height: 100%; object-fit: cover; }
.repisa__libro:active { transform: translateY(-3px); }
/* La repisa de vidrio pasa por delante de la parte baja de los libros, con dos tornillos. */
.repisa__tabla { position: absolute; left: 0; right: 16px; bottom: 8px; height: 62px; border-radius: 0 16px 16px 0; background: color-mix(in oklab, var(--c) 60%, transparent); -webkit-backdrop-filter: blur(3px) saturate(150%); backdrop-filter: blur(3px) saturate(150%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 0 rgb(0 0 0 / .12), 0 10px 20px -12px rgb(0 0 0 / .45); pointer-events: none; }
.repisa__tabla::before, .repisa__tabla::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #a3a3a3 70%); box-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.repisa__tabla::before { left: 6px; }
.repisa__tabla::after { right: 10px; }
.libreria__bibliotecas { margin-top: 26px; }
/* Biblioteca: Favoritos y Libros para leer, debajo de las categorías de «Todo México». */
.bib-mesa { display: grid; gap: 10px; margin: 4px 0 18px; }
.bib-mesa > *, .bib-mesa [data-libros-rapido] > * { margin: 0; }
/* Al abrir Favoritos su fila de libros no debe ensanchar la tarjeta: un elemento de grid se encoge hasta el ancho de la pantalla. */
.bib-mesa > * { min-width: 0; }
/* Abogados: publicaciones con bordes redondos y líneas de orilla a orilla. */
.post--ig .post__media, .post--ig .post__media[class] { width: 100%; margin-inline: 0; overflow: hidden; border-radius: 22px; }
@media (max-width: 600px) {
  .post--ig, .post--nota, .diario { margin-inline: -16px; padding-inline: 16px; }
}
/* Historias dentro de la isla al subir. */
.barra__historias { display: none; }
.barra__hist { flex: none; padding: 4px; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
.barra__hist > span { position: relative; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: #111; color: #fff; font: 700 .68rem/1 var(--sans); }
.barra__hist img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
  :root[data-barra-isla="abogados"][data-isla-historias] .barra__historias:not(:empty) { display: flex; flex: 1 1 100%; gap: 6px; overflow-x: auto; margin: -4px -8px -4px -12px; padding: 0 10px; scrollbar-width: none; animation: histIsla .3s cubic-bezier(.2, .9, .25, 1); }
}
@keyframes histIsla { from { opacity: 0; transform: translateY(-6px); } }
.libreria__cats, .libreria__top, .repisa__libros { scroll-padding-inline: 16px; }
/* 911 sin la tache: tampoco su cabecera vacía; todo sube y el espacio queda abajo, junto al avatar. */
.hoja--sin-cerrar .hoja__cabeza { display: none; }

/* Reels con la letra de las publicaciones de Abogados: antetítulo en rótulo rojo, titular en Playfair,
   texto en Cormorant con capitular grande y la cita como firma. Solo cambia la letra; el reel sigue a pantalla completa. */
.feed--inicio .tarjeta__tope, .feed--inicio .tarjeta__lectura { text-align: left; }
.feed--inicio .tarjeta__sello { justify-content: flex-start; }
.feed--inicio .tarjeta__etq, .feed--inicio .tarjeta__parati { padding: 0; background: none; box-shadow: none; color: var(--senal); font: 800 .72rem/1.2 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; }
.feed--inicio .tarjeta__parati { margin-left: 10px; color: var(--tx2); }
.feed--inicio .tarjeta__etq svg, .feed--inicio .tarjeta__parati svg { width: 13px; height: 13px; }
.feed--inicio .tarjeta h3, .feed--inicio .tarjeta h3.tarjeta__h--media, .feed--inicio .tarjeta h3.tarjeta__h--larga { margin: 6px 0 10px; text-align: left; text-transform: none; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 800; letter-spacing: -.005em; color: var(--tx); }
.feed--inicio .tarjeta h3 { font-size: clamp(1.95rem, 9vw, 2.7rem); line-height: 1.06; }
.feed--inicio .tarjeta h3.tarjeta__h--media { font-size: clamp(1.55rem, 7vw, 2.1rem); line-height: 1.1; }
.feed--inicio .tarjeta h3.tarjeta__h--larga { font-size: clamp(1.3rem, 5.8vw, 1.7rem); line-height: 1.16; }
.feed--inicio .tarjeta__sub { margin-top: 8px; color: var(--tx2); font: italic 500 1.08rem/1.35 var(--clasica); letter-spacing: 0; }
.feed--inicio .tarjeta__texto { font: 400 clamp(1.22rem, 5.2vw, 1.42rem)/1.5 var(--clasica); color: var(--tx2); text-align: justify; hyphens: auto; }
.feed--inicio .tarjeta__texto--grande { font-size: clamp(1.3rem, 5.6vw, 1.55rem); }
.feed--inicio .tarjeta__texto--capitular::first-letter { float: left; margin: 6px 10px 0 0; font: 800 3.6em/.78 "Playfair Display", Georgia, "Times New Roman", serif; color: var(--tx); }
.feed--inicio .tarjeta__titulo2 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; color: var(--tx); }
.feed--inicio .tarjeta__cita { padding: 0; margin: 0 14px 10px 0; background: none; box-shadow: none; color: var(--tx2); font: italic 500 .95rem/1.35 var(--sans); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tx2) 35%, transparent); text-underline-offset: 4px; }
.feed--inicio .tarjeta__cita svg { color: var(--senal); }

/* Resumen: escuchar y el artículo con lo clave subrayado como con marcatextos. */
.explica__voz { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 16px; border: 0; border-radius: 999px; background: var(--ink-950); color: var(--papel); font: 700 .9rem/1 var(--sans); }
.explica__voz svg { width: 18px; height: 18px; }
.explica__voz[aria-pressed="true"] { background: var(--senal); color: #fff; }
.explica__voz[aria-pressed="true"] svg { animation: vozLate 1s ease-in-out infinite; }
@keyframes vozLate { 50% { transform: scale(1.18); } }
.explica__oficial { margin: 4px 0 8px; color: var(--ink-700); font: 400 1.1rem/1.55 var(--clasica); text-align: justify; hyphens: auto; }
.explica__oficial--corto { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 3em), transparent); mask-image: linear-gradient(#000 calc(100% - 3em), transparent); }
.explica__todo { display: block; margin: 0 0 12px; }
mark.subraya { padding: 0 1px; color: var(--ink-950); font-weight: 600; background: linear-gradient(transparent 58%, color-mix(in srgb, #f3c562 70%, transparent) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-tema="oscuro"] mark.subraya { background: linear-gradient(transparent 58%, rgb(243 197 98 / .42) 58%); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) mark.subraya { background: linear-gradient(transparent 58%, rgb(243 197 98 / .42) 58%); } }
:root[data-movimiento="reducido"] .explica__voz svg { animation: none; }

/* Reels: al recorrer las secciones, la bola y la lupa se recogen y las secciones avanzan sobre todo el panel. */
.islita__bola, .islita__lupa { transition: width .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease, margin .28s cubic-bezier(.2, .8, .2, 1); }
.islita[data-chips-corridos] .islita__bola, .islita[data-chips-corridos] .islita__lupa { width: 0; margin-right: -8px; opacity: 0; pointer-events: none; }
:root[data-movimiento="reducido"] .islita__bola, :root[data-movimiento="reducido"] .islita__lupa { transition: none; }
.feed--inicio .tarjeta__cita { display: inline-block; text-align: left; }
.feed--inicio .tarjeta__cita svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.feed--inicio .tarjeta__texto--capitular::first-letter { font-size: 3.1em; margin-top: 5px; }

/* Leyes con formato de librería: tapas hechas con la sigla de cada ley. */
.libreria--leyes { margin: 0; }
.libreria--leyes > .libreria__cabeza:first-child { margin-top: 0; }
.tapa-ley { align-content: start; gap: 12px; }
.tapa-ley em { font: 800 1.35rem/1 "Playfair Display", Georgia, serif; font-style: normal; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tapa-ley b { -webkit-line-clamp: 3; font-size: .66rem; opacity: .9; }
.tapa-ley em, .libreria__tapa .tapa-ley em { font-size: min(1.3rem, calc(102px / var(--s, 4))); overflow-wrap: normal; white-space: nowrap; }
.estado-ala [data-estado-estante] .repisa:first-child { margin-top: 12px; }
/* 1.62.1 · Reels: la primera letra solo en negrita, del mismo tamaño que el texto (sin capitular grande). */
.feed--inicio .tarjeta__texto--capitular::first-letter { float: none; margin: 0; font: inherit; font-weight: 800; font-size: 1em; line-height: inherit; color: var(--tx); }

/* 1.62.1 · Repisas: el nombre del tema va dentro del vidrio de color; arriba solo quedan el conteo y las flechas. */
.repisa { margin-top: 14px; }
.repisa__cabeza { justify-content: flex-end; margin-bottom: 6px; }
h3.repisa__tabla { z-index: 1; display: flex; align-items: center; margin: 0; padding: 0 30px 0 24px; overflow: hidden; color: #fff; font: 800 1.08rem/1.15 var(--sans); letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgb(0 0 0 / .45), 0 0 10px rgb(0 0 0 / .25); }
/* LGBT+: el vidrio con los seis colores de la bandera del orgullo. */
.repisa--orgullo .repisa__tabla { background: linear-gradient(90deg, rgb(228 3 3 / .72), rgb(255 140 0 / .72), rgb(255 237 0 / .72), rgb(0 128 38 / .72), rgb(36 64 142 / .72), rgb(115 41 130 / .72)); }

/* Biblioteca: «Defiéndete» y sus grupos en un solo panel. */
.defiende-uno { display: grid; gap: 12px; margin: 4px 0 8px; padding: 14px 0 14px; border: 1px solid color-mix(in oklab, var(--amarillo) 45%, var(--ink-150)); border-radius: 22px; background: linear-gradient(100deg, color-mix(in oklab, var(--amarillo) 13%, var(--papel)), var(--papel) 70%); overflow: hidden; }
.defiende-uno__cabeza { display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.defiende-uno__cabeza .vitrina__texto { display: grid; gap: 2px; }
.defiende-uno__cabeza b { font: 800 1.05rem/1.2 var(--sans); color: var(--ink-950); }
.defiende-uno__cabeza small { color: var(--ink-600); font-size: .86rem; }
.defiende-uno__grupos { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px; scrollbar-width: none; scroll-padding-inline: 14px; }
.defiende-uno__grupos::-webkit-scrollbar { display: none; }
.defiende-uno__grupos .chip { flex: none; }
/* Teléfonos: las categorías sin relleno, contorno ni borde de color; solo el ícono conserva su color. */
.ayuda-tema { background: transparent; box-shadow: none; }
.ayuda-tema__nombre small, .ayuda-tema summary > svg { color: var(--ink-600); }
/* Y las líneas de adentro: sin franja ni contorno de color; títulos y botones neutros. */
.ayuda-tema__lineas .ayuda-linea { box-shadow: inset 0 0 0 1px var(--ink-150); }
.ayuda-tema__lineas .ayuda-linea__txt b, .ayuda-tema__lineas .ayuda-linea__sec { color: var(--ink-950); }
.ayuda-tema__lineas .ayuda-linea .linea-boton { background: var(--ink-950); color: var(--papel); box-shadow: none; }
.ayuda-tema__lineas .ayuda-linea .linea-boton:active { box-shadow: none; }
.ayuda-tema__lineas .ayuda-linea .linea-boton--web { background: none; color: var(--ink-950); box-shadow: inset 0 0 0 1.5px var(--ink-300); }

/* Repisas: el vidrio sin los dos tornillos; solo el nombre del tema, más grande (hasta dos renglones si no cabe). */
.repisa__tabla::before, .repisa__tabla::after { content: none; }
h3.repisa__tabla { padding: 0 18px; font-size: clamp(1.25rem, 5.6vw, 1.5rem); line-height: 1.08; letter-spacing: 0; white-space: normal; text-wrap: balance; }
/* Título de la repisa con el icono de su sección. */
h3.repisa__tabla { gap: 10px; }
h3.repisa__tabla > svg { flex: none; width: 1.05em; height: 1.05em; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .45)); }
h3.repisa__tabla > span { min-width: 0; }
/* Repisas: los libros se apoyan en el vidrio (lo pisan 10px) en vez de quedar tapados por él; así no se solapa con la fila de libros. */
.repisa__libros { padding-bottom: 60px; }

/* Administración (solo la cuenta de administración la ve): invitaciones. */
.cuenta__admin { margin-top: 10px; }
.adm { display: grid; gap: 14px; }
.adm-vistas { width: 100%; }
.adm-vistas button small { opacity: .6; font-weight: 600; }
.adm-fila { display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); }
.adm-fila header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adm-fila header b { font: 800 1.02rem/1.25 var(--sans); color: var(--ink-950); overflow-wrap: anywhere; }
.adm-fila p, .adm-fila ul, .adm .intro { text-align: left; hyphens: manual; }
.adm-fila p, .adm-fila ul { margin: 0; color: var(--ink-600); font-size: .9rem; line-height: 1.45; }
.adm-fila ul { padding-left: 18px; }
.adm-fila__aviso { color: var(--ink-950) !important; font-weight: 600; }
.adm-fila__notas { font-style: italic; }
.adm-fila__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.adm-estado { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--ink-100); color: var(--ink-950); font: 700 .75rem/1.4 var(--sans); }
.adm-estado--acepto { background: #1f7a4a; color: #fff; }
.adm-estado--declino, .adm-estado--nunca { background: var(--ink-950); color: var(--papel); }
.adm-estado--intento3 { background: #b4530a; color: #fff; }
.adm-form { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--ink-50); }
.adm-form label { display: grid; gap: 4px; color: var(--ink-700); font: 600 .86rem/1.3 var(--sans); }
.adm-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .adm-form select, .adm-form textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ink-200); border-radius: 12px; background: var(--papel); color: var(--ink-950); font: 400 1rem/1.3 var(--sans); }
.adm-form__par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-check { display: flex !important; align-items: center; gap: 10px; min-height: 40px; }
.adm-check input { width: 20px; height: 20px; }

/* ——— Perfiles de abogados por invitación (Fase 2): mínimo, reclamar, editar y retiro ——— */
.adm-secciones { width: 100%; max-width: 100%; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.adm-secciones::-webkit-scrollbar { display: none; }
.adm-secciones button { flex: none; }
.adm { min-width: 0; }
.adm-estado--solicitado { background: #b4530a; color: #fff; }
.adm-estado--aprobado { background: #1f7a4a; color: #fff; }
.adm-estado--rechazado, .adm-estado--retirado { background: var(--ink-950); color: var(--papel); }
.adm-fila a { color: inherit; text-decoration: underline; }
.cuenta__abogado { display: block; margin: 12px auto 0; font-size: .86rem; }
.perfil-ab__minimo { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--ink-50); color: var(--ink-700); font-size: .84rem; line-height: 1.4; text-align: left; }
.perfil-ab__botones--reclamo { margin-top: 10px; }
.perfil-ab__botones--reclamo .perfil-ab__boton { font-size: .8rem; }
.sello-oficial--verificado { color: #0a84ff; }
.abg-form { text-align: left; }
.abg-form .intro { margin: 0; }
.abg-form .intro, .abg-form .nota-art, .abg p { text-align: left; hyphens: manual; }
.abg-form a { color: inherit; text-decoration: underline; }
.abg-codigo { margin: 6px 0; padding: 14px; border-radius: 14px; background: var(--ink-950); color: var(--papel); font: 700 1.3rem/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-align: center; user-select: all; }
.abg { text-align: left; }
.abg-foto { display: flex; align-items: center; gap: 14px; }
.abg-foto__yo { display: grid; place-items: center; flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: 50%; background: var(--ink-100); color: var(--ink-700); font: 700 1.1rem/1 var(--sans); }
.abg-foto__yo img { width: 100%; height: 100%; object-fit: cover; }
.abg-grupo { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.abg-grupo legend { margin-bottom: 6px; color: var(--ink-700); font: 600 .86rem/1.3 var(--sans); }
.abg-grupo .nota-art { margin: 0; }
.abg-enlace { display: flex; gap: 8px; align-items: center; }
.abg-enlace select { flex: 0 0 34%; }
.abg-enlace input { flex: 1; min-width: 0; }
.abg-enlace .enlace { flex: none; font-size: .8rem; }
.abg-quitar { display: block; margin: 6px auto 0; color: #c62828; font-size: .86rem; }

/* ——— Comunidad (Fase 3): muro cronológico, publicaciones con fundamento y preguntas ——— */
[data-comunidad] { display: grid; gap: 12px; padding: 4px 16px 24px; text-align: left; }
.com-sub { width: 100%; }
[data-com-cuerpo] { display: grid; gap: 12px; }
.com-vacio { display: grid; gap: 10px; justify-items: start; padding: 8px 0; }
.com-vacio h3 { margin: 0; }
.com-vacio p { margin: 0; color: var(--ink-700); line-height: 1.45; }
.com-pub { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--papel); box-shadow: 0 0 0 1px var(--ink-100); text-align: left; }
.com-pub header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.com-pub time { flex: none; color: var(--ink-600); font-size: .75rem; }
.com-quien { display: grid; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.com-quien b { font-size: .92rem; }
.com-quien small { color: var(--ink-600); font-size: .78rem; }
.com-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; text-align: left; hyphens: manual; }
.com-texto--grande { font-size: 1.05rem; font-weight: 600; }
.com-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.com-accion { font-size: .8rem; color: var(--ink-600); }
.com-video { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ink-950); color: var(--papel); font: 600 .84rem/1 var(--sans); cursor: pointer; }
.com-video svg { width: 16px; height: 16px; }
.com-marco { position: relative; width: 100%; max-width: 340px; overflow: hidden; border-radius: 14px; background: #000; }
.com-marco--tiktok { aspect-ratio: 9 / 16; }
.com-pub .com-marco--tiktok { justify-self: center; width: min(400px, 100% + 28px); max-width: none; margin-inline: -14px; }
.com-marco--youtube { aspect-ratio: 16 / 9; max-width: none; }
.com-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.com-pregunta { display: grid; gap: 4px; width: 100%; padding: 14px; border: 0; border-radius: 16px; background: var(--ink-50); color: inherit; font: 600 .95rem/1.4 var(--sans); text-align: left; cursor: pointer; }
.com-pregunta small { color: var(--ink-600); font-weight: 500; font-size: .76rem; }
.com-yo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 16px; background: var(--ink-50); }
.com-yo p { margin: 6px 0 0; font-size: .86rem; color: var(--ink-700); }
.com-busca { display: flex; gap: 8px; }
.com-busca input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ink-200); border-radius: 12px; background: var(--papel); color: inherit; font: inherit; }
.com-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ink-100); }
.com-hoja { display: grid; gap: 12px; text-align: left; }
.com-persona header { display: flex; align-items: center; gap: 14px; }
.com-persona h3, .com-persona header p { margin: 0; }
.com-persona header p { color: var(--ink-600); }
.com-fund select { width: 100%; }
.perfil-ab__seguir { justify-self: start; margin-top: 10px; }
.perfil-ab__seguir--ya { background: var(--ink-100); color: var(--ink-950); }
/* Con Comunidad, Abogados lleva cuatro pestañas: en teléfono, la ubicación queda solo con su ícono. */
@media (max-width: 480px) {
  [data-barra-isla="abogados"] .barra__donde { flex: 0 0 auto; padding: 0 10px; }
  [data-barra-isla="abogados"] .barra__donde span { display: none; }
}
.com-vacio p, [data-comunidad] .ab-vacio, .com-hoja .ab-vacio { text-align: left; hyphens: manual; }
.cuenta__paquete { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--ink-50); color: var(--ink-700); font-size: .84rem; line-height: 1.4; text-align: left; }

/* Grupos con asientos (Fase 5) */
.grp { display: grid; gap: 12px; text-align: left; }
.grp .intro, .grp .nota-art { text-align: left; }
.grp-cabeza { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: var(--ink-50); }
.grp-cabeza small { color: var(--ink-700); font-size: .84rem; line-height: 1.35; }
.grp-tipos, .grp-asientos { list-style: none; margin: 0; padding: 0; }
.grp-tipos li, .grp-asiento { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ink-100); }
.grp-tipos li { flex-direction: column; align-items: flex-start; gap: 2px; }
.grp-tipos span, .grp-asiento small { color: var(--ink-700); font-size: .82rem; text-align: left; }
.grp-asiento div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.grp-asiento .enlace { flex: none; white-space: nowrap; hyphens: none; }
.grp-asiento b { overflow-wrap: anywhere; font-size: .92rem; }
.grp-asiento--lleno small { color: #b4530a; font-weight: 600; }
.grp-invitaciones { display: grid; gap: 8px; }
.grp-invitacion { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid #0a84ff; }
.grp-invitacion div { display: grid; gap: 2px; }
.grp-invitacion small { color: var(--ink-700); font-size: .8rem; }
.grp-despacho h4 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.cuenta__invitacion { color: #0a84ff; font-weight: 700; }
.com-despacho { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--ink-100); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.com-despacho > span:first-child { display: grid; gap: 2px; }
.com-despacho small { color: var(--ink-700); font-size: .8rem; }
.com-titulo { margin: 16px 0 4px; font-size: .95rem; }
/* Comunidad: ejemplos marcados para ver cómo funciona. */
.com-ejemplos { display: grid; gap: 10px; margin-top: 6px; width: 100%; }
.com-pasos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.com-pasos li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-700); font-size: .88rem; line-height: 1.4; }
.com-pasos svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--marca); }
.com-pasos b { color: var(--ink-950); }
.com-pub--ejemplo { box-shadow: 0 0 0 1px var(--ink-100), inset 0 0 0 1px transparent; background: color-mix(in oklab, var(--papel) 92%, var(--marca)); }
.com-pub--ejemplo .com-quien { cursor: default; }
.com-sello-ejemplo { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--ink-950); color: var(--papel); font: 700 .66rem/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.com-ejemplo__resp { display: grid; gap: 2px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--ink-50, rgb(0 0 0 / .04)); }
.com-ejemplo__resp span { color: var(--ink-600); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* 1.65 · Vigencia honesta: hasta qué reforma llega la copia, su fuente y si puede haber cambiado. */
.vigente-al { flex-wrap: wrap; align-items: flex-start; color: var(--ink-600, var(--ink-500)); line-height: 1.45; }
.vigente-al svg { margin-top: 2px; }
.vigente-al a, .sello a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ficha-vigencia { margin-top: 14px; }
.ficha-vigencia .vigente-al { margin: 0 0 8px; }
.vigencia__antigua { display: flex; gap: 6px; align-items: flex-start; margin: -4px 0 12px; font-size: .78rem; line-height: 1.45; color: var(--ink-700); }
.vigencia__antigua svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: #b26b00; }
.aviso--revisar { margin: 0 0 14px; border-color: color-mix(in oklab, #d48a00 45%, transparent); background: color-mix(in oklab, #d48a00 12%, var(--papel)); }
.aviso--revisar svg { color: #b26b00; }
.aviso--revisar a, .revisar-cita a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.revisar-cita { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 8px; font-size: .78rem; line-height: 1.4; color: var(--ink-800, var(--ink-700)); }
.revisar-cita svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: #b26b00; }
.fund--revisar { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, #d48a00 70%, transparent); }
.fund--revisar svg { color: #b26b00; }
.resultado__revisar { font-style: normal; color: #9a5d00; font-weight: 700; }
.enlace-fuerte { font-weight: 700; text-decoration: underline; }

/* ——— 1.65 · Inicio «¿Qué te pasa?»: buscador grande, 911 a la vista y tres atajos (bento) ——— */
.qtp { max-width: 760px; margin: 0 auto; padding: clamp(18px, 4vw, 40px) 0 40px; display: grid; gap: 14px; }
.qtp__cabeza { display: grid; gap: 6px; }
.qtp__titulo { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 9vw, 4rem); line-height: .95; letter-spacing: -.01em; margin: 4px 0 2px; color: var(--ink-950); }
.qtp__titulo:focus { outline: none; }
.qtp__titulo:focus-visible { outline: 3px solid var(--marca); outline-offset: 4px; border-radius: 8px; }
.qtp__texto { margin: 0; color: var(--ink-600); font-size: 1rem; max-width: 52ch; }
.qtp__busca { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 8px 8px 18px; border-radius: 999px; box-shadow: var(--sombra-lg); }
.qtp__busca > svg { width: 22px; height: 22px; flex: none; color: var(--ink-600); }
.qtp__busca input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; color: var(--ink-950); font: inherit; font-size: 1.08rem; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none; }
.qtp__busca input::placeholder { color: var(--ink-500); font-weight: 500; }
.qtp__busca input::-webkit-search-cancel-button { display: none; }
.qtp__busca:focus-within { box-shadow: inset 0 0 0 2px var(--marca), 0 0 0 4px var(--marca-50), var(--sombra-lg); }
.qtp__ir { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 999px; background: var(--ink-950); color: var(--papel); transition: transform .2s var(--suave); }
.qtp__ir:active { transform: scale(.94); }
.qtp__ir svg { width: 20px; height: 20px; }
.qtp__ejemplos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.qtp__ejemplos::-webkit-scrollbar { display: none; }
.qtp__ejemplos .chip { min-height: 40px; }
.qtp__911 { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px 10px 10px; border-radius: 22px; background: var(--senal); color: #fff; text-decoration: none; box-shadow: 0 14px 30px -18px color-mix(in oklab, var(--senal) 80%, #000); transition: transform .2s var(--suave); }
.qtp__911:active { transform: scale(.985); }
.qtp__911 > span:nth-child(2) { display: grid; gap: 1px; flex: 1; min-width: 0; }
.qtp__911 b { font-size: 1rem; }
.qtp__911 small { font-size: .82rem; opacity: .92; }
.qtp__911 > svg { width: 22px; height: 22px; flex: none; }
.qtp__911-num { display: grid; place-items: center; flex: none; width: 56px; height: 44px; border-radius: 14px; background: rgb(255 255 255 / .18); font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; }
:root[data-tema="oscuro"] .qtp__911 { color: #1a0003; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .qtp__911 { color: #1a0003; } }
.qtp__911:focus-visible { outline: 3px solid var(--ink-950); outline-offset: 3px; }
.qtp__lineas { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 16px; background: var(--ink-50); color: var(--ink-800); font-weight: 600; font-size: .92rem; text-align: left; }
.qtp__lineas svg { width: 18px; height: 18px; flex: none; color: var(--senal); }
.qtp__lineas svg:last-child { margin-left: auto; color: var(--ink-500); }
.qtp__atajos { gap: 12px; margin-top: 4px; }
.atajo { display: grid; gap: 12px; padding: 0; overflow: hidden; }
.atajo__principal { position: relative; display: grid; justify-items: start; gap: 2px; width: 100%; padding: 18px 18px 4px; text-align: left; color: inherit; }
.atajo__principal .panel__icono { background: color-mix(in oklab, var(--c) 14%, var(--papel)); color: var(--c); }
.atajo__principal h2 { font-family: var(--display); font-weight: 650; font-size: 1.3rem; line-height: 1.1; margin: 12px 0 2px; color: var(--ink-950); }
.atajo__principal p { margin: 0; color: var(--ink-600); font-size: .9rem; }
.atajo__principal:focus-visible { outline-offset: -4px; border-radius: var(--r-panel); }
.atajo__mas { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 18px; }
.atajo__mas .chip { min-height: 44px; }
.qtp__reels { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: inherit; text-decoration: none; }
.qtp__reels > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.qtp__reels small { color: var(--ink-600); font-size: .86rem; }
.qtp__reels > svg { width: 20px; height: 20px; color: var(--ink-500); flex: none; }
.qtp__mas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qtp__mas a { display: grid; justify-items: center; gap: 6px; min-height: 72px; padding: 12px 4px; border-radius: 18px; background: var(--ink-50); color: var(--ink-800); text-decoration: none; font-size: .8rem; }
.qtp__mas a svg { width: 20px; height: 20px; color: var(--marca); }
.pie--qtp { margin-top: 10px; }
[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"], a[aria-busy="true"] { opacity: .7; }
@media (max-width: 380px) { .qtp__mas a { font-size: .72rem; } .qtp__busca input { font-size: 1rem; } }

/* ——— 1.65 · Consentimiento, términos de Comunidad y borrado rápido ——— */
.consentimiento { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--ink-50); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-800); font-size: .92rem; }
.consentimiento p { margin: 0; }
.consentimiento__lista, .com-terminos__lista { display: grid; gap: 6px; margin: 0; padding-left: 1.1em; }
.consentimiento__casilla { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 14px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-200); cursor: pointer; font-weight: 600; }
.consentimiento__casilla input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--marca); }
.consentimiento__casilla:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }
.consentimiento__aviso { font-size: .82rem; color: var(--ink-600); }
.consentimiento__aviso a, .com-terminos a { color: var(--marca); font-weight: 700; text-decoration: underline; }
.com-terminos { display: grid; gap: 12px; }
.momento__notas-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.momento__notas-cabeza .titulo-l { margin: 0; }
.momento__borrar { color: var(--senal); }

/* ——— 1.65 · Accesibilidad: foco visible en los buscadores y área táctil de al menos 44 px ——— */
.buscador:focus-within, .litigar__caja:focus-within { box-shadow: inset 0 0 0 2px var(--marca), 0 0 0 4px var(--marca-50); }
.litigar__cerrar, .litigar__voz, .litigar__enviar, .litigar__mic, .feed__ajustes, .buscador__ic, .feed__pregunta-ic { position: relative; }
.litigar__cerrar::after, .litigar__voz::after, .litigar__enviar::after, .litigar__mic::after, .feed__ajustes::after, .buscador__ic::after, .feed__pregunta-ic::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 999px; }
/* Avisos largos: en varias líneas dentro de la pantalla, no cortados a los lados. */
.aviso-toast { width: max-content; max-width: min(calc(100vw - 32px), 520px); white-space: normal; text-align: center; border-radius: 22px; line-height: 1.35; }
.qtp__ejemplos .chip { background: var(--ink-50); }
/* Títulos que reciben el foco al cambiar de página o abrir una hoja (para lectores de pantalla): no son controles, sin anillo. */
[tabindex="-1"]:is(h1, h2, h3, [data-titulo-pagina], #hoja-titulo):focus { outline: none; }
.atajo p, .qtp__texto, .qtp__reels small { text-align: left; hyphens: manual; }
.atajo__mas .chip { background: var(--ink-50); }
/* 1.65.0 · Caras vivas: respiran, inclinan la cabeza y mecen el cabello. Solo lo que se ve; con «Reducir movimiento», quietas. */
.avatar-ingo { position: relative; }
.av { position: absolute; inset: 0; display: block; transform: scale(1.06); transform-origin: 50% 50%; animation: avRespira 4.8s ease-in-out infinite; animation-delay: var(--d, 0s); will-change: transform; }
.av img.av__base, .av .av__foto, .av .av__pelo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: none; }
.av__vida, .av__cabeza, .av__pelo { position: absolute; inset: 0; display: block; pointer-events: none; }
.av__cabeza { transform-origin: var(--cx, 50%) var(--cuello, 62%); animation: avInclina 9.6s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: var(--d, 0s); }
/* La copia de la cabeza: elipse de la cabeza, sin el aro blanco que trae cada foto en la orilla (giraría con ella). */
.av .av__foto { -webkit-mask-image: radial-gradient(var(--rx) var(--ry) at var(--cx) var(--cy), #000 66%, transparent 100%), radial-gradient(circle at 50% 50%, #000 39%, transparent 43.5%); -webkit-mask-composite: source-in; mask-image: radial-gradient(var(--rx) var(--ry) at var(--cx) var(--cy), #000 66%, transparent 100%), radial-gradient(circle at 50% 50%, #000 39%, transparent 43.5%); mask-composite: intersect; }
.av__pelo { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transform-origin: var(--cx, 50%) var(--coronilla, 10%); animation: avMece 3.9s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * .7); }
.av__acc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.av__vida--quieta .av__cabeza { animation: none; }
@keyframes avRespira { 0%, 100% { transform: scale(1.06); } 42% { transform: translateY(-.5%) scale(1.072, 1.078); } }
@keyframes avInclina { 0%, 100% { transform: rotate(0); } 22% { transform: rotate(1.2deg); } 48% { transform: rotate(.3deg); } 71% { transform: rotate(-1.1deg); } 88% { transform: rotate(-.4deg); } }
@keyframes avMece { 0%, 100% { transform: rotate(0) skewX(0); } 30% { transform: rotate(.8deg) skewX(-.5deg); } 65% { transform: rotate(-.6deg) skewX(.4deg); } }
[data-fuera] .av, [data-fuera] .av *, :root[data-oculta] .av, :root[data-oculta] .av * { animation-play-state: paused; }
:root[data-movimiento="reducido"] .av, :root[data-movimiento="reducido"] .av * { animation: none; }
@media (prefers-reduced-motion: reduce) { .av, .av * { animation: none !important; } }
/* La cara en la bola de la isla: ya no es una foto suelta, sino la misma cara viva. */
.isla__cara { overflow: hidden; transform: none; }
.bv-cara .av img.av__base { transform: none; }
/* La bola central pinta todos sus span y svg (balanza dorada de antes): la cara viva va limpia por encima. */
.isla .isla__centro .isla__cara, .isla .isla__centro .isla__cara span { margin: 0; border: 0 !important; background: none; box-shadow: none; color: inherit; }
.isla .isla__centro .isla__cara span { display: block; }
/* La balanza se queda: la cara solo ocupa la bola en los reels y en la Biblioteca, como antes. */
.isla .isla__centro .isla__cara { display: none; }
/* La cara de Justo solo vive en los reels; en Biblioteca y las demás secciones la bola es la balanza. */
:root[data-vista="reels"] .isla .isla__centro .isla__cara { display: block; }
.isla .isla__centro .isla__cara { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.isla .isla__centro .isla__cara .av, .isla .isla__centro .isla__cara .av__vida, .isla .isla__centro .isla__cara .av__cabeza, .isla .isla__centro .isla__cara .av__pelo { position: absolute; inset: 0; width: 100%; height: 100%; }
.isla .isla__centro .isla__cara svg { width: 100% !important; height: 100% !important; filter: none; }
/* Su estilo: color de ropa en muestras redondas y accesorios en chips. */
.avatar-estilo { display: grid; gap: 14px; }
.avatar-estilo__grupo { display: grid; gap: 8px; }
.avatar-estilo__grupo > b { font: 600 .82rem/1.2 var(--rotulo); color: var(--ink-700); }
.avatar-estilo__ops { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-estilo__ops .chip { min-height: 40px; cursor: pointer; }
.avatar-estilo__ops .chip[aria-checked="true"] { border-color: #1d9bf0; box-shadow: 0 0 0 1px #1d9bf0; color: var(--ink-950); }
.avatar-estilo__ops--ropa button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.avatar-estilo__muestra { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .35), transparent 55%), var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14); transition: transform .2s var(--ios, ease); }
.avatar-estilo__muestra--original { background: conic-gradient(from 200deg, #c8372d, #c99a2e, #2f7a55, #2f6fde, #8b6fc6, #c8372d); }
.avatar-estilo__ops--ropa button[aria-checked="true"] .avatar-estilo__muestra { transform: scale(.82); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14), 0 0 0 4px var(--papel, #fff), 0 0 0 6px #1d9bf0; }
.avatar-estilo__ops--ropa button:active .avatar-estilo__muestra { transform: scale(.76); }

/* Con la portada abierta la isla está oculta: su anillo (anima el contorno, que se repinta en cada cuadro) espera. */
:root[data-bienvenida][data-vista] .isla .isla__centro span.isla__bola { animation-play-state: paused; }

/* Tu escenario: la tarjeta que Justo arma mientras platican (preguntas con opciones, desglose, sanción y qué hacer).
   Los fondos y bordes salen del color del texto, así funciona igual en tema claro y oscuro. */
.caso-vivo { display: grid; gap: 10px; margin: 0 0 12px; padding: 14px 14px 12px; border-radius: 20px; background: color-mix(in oklab, currentColor 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 12%, transparent); text-align: left; }
.caso-vivo__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.caso-vivo__rotulo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rotulo); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.caso-vivo__rotulo svg { width: 17px; height: 17px; color: #1d9bf0; }
.caso-vivo__avance { display: inline-flex; gap: 5px; }
.caso-vivo__avance i { width: 18px; height: 4px; border-radius: 999px; background: color-mix(in oklab, currentColor 16%, transparent); transition: background .3s var(--ios); }
.caso-vivo__avance i[data-hecho] { background: #1d9bf0; }
.caso-vivo__hechos { margin: 0; font-size: .86rem; line-height: 1.45; opacity: .72; }
.caso-vivo__cuenta { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; background: color-mix(in oklab, currentColor 6%, transparent); }
.caso-vivo__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .92rem; }
.caso-vivo__fila small { display: block; font-size: .76rem; opacity: .65; }
.caso-vivo__fila b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.caso-vivo__fila--total { margin-top: 4px; padding-top: 8px; border-top: 1px solid color-mix(in oklab, currentColor 14%, transparent); }
.caso-vivo__fila--total b { font-family: var(--display); font-size: 1.35rem; }
.caso-vivo__sub { margin: 2px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.caso-vivo__lista { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .92rem; line-height: 1.45; }
.caso-vivo__pregunta { display: grid; gap: 8px; padding-top: 2px; }
.caso-vivo__pregunta > p { margin: 0; font-weight: 700; font-size: 1rem; }
.caso-vivo__ops { display: flex; flex-wrap: wrap; gap: 8px; }
.caso-vivo__ops button { padding: 10px 14px; border: 1px solid color-mix(in oklab, #1d9bf0 45%, transparent); border-radius: 999px; background: color-mix(in oklab, #1d9bf0 10%, transparent); color: inherit; font: 600 .92rem/1.25 var(--rotulo); text-align: left; transition: transform .15s var(--ios), background .15s; -webkit-tap-highlight-color: transparent; }
.caso-vivo__ops button:active { transform: scale(.97); background: color-mix(in oklab, #1d9bf0 22%, transparent); }
.caso-vivo .litigar__accion { margin-top: 2px; }
.caso-vivo__nota { margin: 0; font-size: .7rem; line-height: 1.4; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .caso-vivo__ops button, .caso-vivo__avance i { transition: none; } }

/* Portada «Así funciona» (1.66.3): el mismo formato del 911 (tarjetas, mosaicos con icono de color e Justo con su globo). */
.qtp--app { gap: 12px; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.qtp--app :is(.qtp__pasos, .qtp__nota, .qtp__fichas, .qtp__texto) { text-align: left; hyphens: manual; }
.qtp--app .qtp__titulo { font-size: clamp(2.2rem, 8.4vw, 3.6rem); }
.qtp__tarjetas { width: 100%; }
.qtp__tarjetas .ayuda-tarjeta { text-decoration: none; }
.qtp__sub { margin: 10px 0 -2px; }
.qtp__grupo { display: grid; gap: 8px; }
.qtp__fichas, .qtp__fichas.ayuda-sugiere { flex: none; width: 100%; min-height: 0; max-height: none; overflow: visible; padding: 0; margin: 0; -webkit-mask: none; mask: none; }
.qtp__fichas > * { min-height: 62px; text-decoration: none; transition: transform .2s var(--suave); }
.qtp__fichas > *:active { transform: scale(.97); }
.qtp__fichas b { gap: 1px; }
.qtp__fichas small { font-weight: 500; }
.qtp__pasos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qtp__pasos li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--cristal); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz); }
.qtp__pasos li > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink-950); color: var(--papel); font: 800 .9rem/1 var(--rotulo); }
.qtp__pasos b { display: grid; gap: 2px; font-size: .94rem; line-height: 1.2; }
.qtp__pasos small { color: var(--ink-500); font-size: .8rem; font-weight: 500; }
.qtp__pie.ayuda-pie { flex: none; justify-self: center; width: min(100%, 520px); margin-top: 6px; padding-top: 4px; }
.qtp__pie .ayuda-pie__ingo .avatar-ingo, .qtp__pie .ayuda-pie__ingo .avatar-ingo[class] { width: 104px; }
.qtp__pie .ayuda-pie__globo { max-width: min(280px, 70vw); }
.qtp__nota { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--ink-50); color: var(--ink-600); font-size: .84rem; line-height: 1.35; }
.qtp__nota svg { flex: none; width: 18px; height: 18px; color: var(--ink-500); }
/* Video del día (P1): la portada vertical del video a la izquierda (tocarla lo abre aquí, con su reproductor oficial) y a
   la derecha título, cuenta y fecha, el enlace al original y «Ver la ley». Sin portada, quedan las iniciales de la cuenta. */
.vdd { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: 22px; background: var(--cristal); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz); text-align: left; hyphens: manual; }
.vdd p { text-align: left; }
.vdd__portada { position: relative; display: grid; place-items: center; width: 96px; aspect-ratio: 9 / 16; overflow: hidden; padding: 0; border: 0; border-radius: 14px; background: #1c1c1e; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s var(--suave); }
.vdd__portada:active { transform: scale(.97); }
.vdd__portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vdd__vacio { font: 800 1.5rem/1 var(--rotulo); opacity: .5; }
.vdd__play { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgb(0 0 0 / .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.vdd__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.vdd__datos { display: grid; gap: 6px; min-width: 0; align-content: start; padding-top: 2px; }
.vdd__titulo { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ink-950); font: 700 1.02rem/1.25 var(--sans); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.vdd__quien { display: grid; gap: 1px; margin: 0; color: var(--ink-700); font-size: .86rem; line-height: 1.3; }
.vdd__quien b { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vdd__quien b svg { flex: none; width: 14px; height: 14px; color: #1d9bf0; }
.vdd__quien small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-500); font-size: .78rem; }
.vdd__acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.vdd__acciones .chip { padding: 8px 12px; font-size: .8rem; text-decoration: none; }
.vdd__acciones .vdd__ley { background: var(--ink-950); border-color: var(--ink-950); color: var(--papel); }
.vdd__nota { margin: 0; color: var(--ink-500); font-size: .74rem; line-height: 1.35; text-align: left; }
@media (prefers-reduced-motion: reduce) { .vdd__portada { transition: none; } }
@media (prefers-reduced-motion: reduce) { .qtp__fichas > * { transition: none; } }
.qtp__confianza { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.qtp__confianza li { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-700); font-size: .82rem; font-weight: 600; }
.qtp__confianza svg { width: 15px; height: 15px; color: #2f9e5b; stroke-width: 2.8; }
.qtp__tarjetas .ayuda-tarjeta--911 > svg { animation: none; }
.qtp--app .qtp__titulo { text-wrap: balance; }
.qtp__tarjetas .ayuda-tarjeta { min-width: 0; }
.qtp__tarjetas .ayuda-tarjeta--911 b { font-size: 1.02rem; letter-spacing: 0; }
.qtp__tarjetas .ayuda-tarjeta small { overflow-wrap: anywhere; }
.qtp__tarjetas .qtp__contactos { background: linear-gradient(160deg, #3ddc6f, #17894a); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 0 rgb(0 0 0 / .25), 0 16px 30px -14px #17894a; }
.qtp__tarjetas .qtp__contactos .ayuda-tarjeta__insignia { color: #17894a; }
/* Portada: el botón de ubicación vive en la isla de arriba, junto al de tu cuenta (en el teléfono las demás secciones no lo llevan). */
@media (max-width: 960px) {
  :root[data-vista="inicio"] .barra__caja .barra__acciones { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  :root[data-vista="inicio"] .barra__caja .ubicacion-pill { display: inline-flex; max-width: 42vw; }
}
/* Portada en el teléfono: el modo claro/oscuro baja justo debajo del botón de tu cuenta, solo el icono; la ubicación crece.
   En las demás secciones el modo sigue junto a tu cuenta, como siempre. */
@media (max-width: 960px) {
  :root[data-vista="inicio"] .barra__caja { position: relative; }
  :root[data-vista="inicio"] .barra__caja .barra__tema { position: absolute; top: calc(100% + 8px); right: 14px; z-index: 2; width: 38px; height: 38px; }
  :root[data-vista="inicio"] .barra__caja .ubicacion-pill { height: 38px; max-width: 46vw; gap: 6px; padding: 0 14px 0 11px; font-size: .86rem; }
  :root[data-vista="inicio"] .barra__caja .ubicacion-pill svg { width: 16px; height: 16px; }
}
/* Reels: arriba a la derecha el modo claro/oscuro y junto, a su derecha, la casita; solo el icono, sin fondo; se desvanecen mientras deslizas. */
.tema-reels { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--ink-950); transition: opacity .35s var(--suave), transform .2s var(--suave); }
.tema-reels svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px color-mix(in oklab, var(--papel) 70%, transparent)); }
.reels-inicio { right: 8px; }
.reels-modo { right: 50px; }
:root[data-reels-rodando] .tema-reels { opacity: 0; pointer-events: none; }
:root[data-movimiento="reducido"] .tema-reels { transition: none; }

/* Publicaciones como TikTok: cada video va en vertical (9:16) y corre solo encima de su portada. El reproductor no
   recibe toques: el toque es del post y abre el visor a pantalla completa. TikTok llena el cuadro; YouTube, que es
   horizontal, se recorta al centro para llenarlo también. La bocina activa o quita el sonido de todos. */
.post__marco { position: relative; }
.post--ig .post__media[class] { aspect-ratio: 9 / 16; max-height: min(80svh, 820px); }
.post__media .post__vivo { position: absolute; left: 0; top: 50%; z-index: 1; width: 100%; height: auto; aspect-ratio: 9 / 16; translate: 0 -50%; border: 0; background: transparent; pointer-events: none; opacity: 0; transition: opacity .45s var(--suave); }
.post__media[data-red="youtube"] .post__vivo { left: 50%; top: 0; width: auto; height: 100%; aspect-ratio: 16 / 9; translate: -50% 0; }
.post__media[data-corre] .post__vivo { opacity: 1; }
.post__media[data-corre] .post__play, .post__media[data-corre] .post__red, .post__media[data-corre] .post__siglas { opacity: 0; transition: opacity .3s var(--suave); }
.post__bocina { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; cursor: pointer; }
.post__bocina svg { width: 18px; height: 18px; }
.post__bocina:active { transform: scale(.92); }
:root[data-movimiento="reducido"] .post__media .post__vivo, :root[data-movimiento="reducido"] .post__bocina { display: none; }

/* 1.66.7 · Chat de Justo en iPhone: la plática se desliza con el dedo (Safari necesita el gesto vertical declarado y el
   desplazamiento táctil en el propio hilo), y al escucharte la bola mide la mitad que antes (72 px en vez de 144): late y lleva el aro rojo, sin tapar la plática. */
.litigar__hilo { overflow-y: scroll; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-y: contain; scrollbar-width: none; }
.litigar__hilo::-webkit-scrollbar { display: none; }
.litigar[data-turno="oye"] .litigar__grabar--cara .avatar-ingo { width: 72px; }
/* 1.66.9 · Cuando TikTok no deja ver un video: su portada queda y el enlace lleva al original. */
.post__falla { position: absolute; left: 50%; bottom: 22%; translate: -50% 0; z-index: 3; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: rgb(0 0 0 / .72); color: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; }
.post__falla svg { width: 15px; height: 15px; }
.post__falla:active { transform: scale(.96); }
.post__media[data-falla] .post__play { opacity: 0; }
.historia__falla { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; max-width: 280px; padding: 18px 20px; border-radius: 18px; background: rgb(0 0 0 / .62); color: #fff; text-align: center; text-decoration: none; }
.historia__falla b { font-size: .95rem; font-weight: 600; line-height: 1.3; }
.historia__falla span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: #fff; color: #111; font-size: .85rem; font-weight: 600; }
.historia__falla svg { width: 15px; height: 15px; }

/* 1.67 · Derechos rediseñado (con Odin): búsqueda instantánea, los temas en 3 conjuntos en lista y la vista por tema.
   El color de cada tema solo va en su ícono; la fila es papel tranquilo. Todo toque mide 44 px o más. */
.der-contenido[hidden], .der-resultados[hidden] { display: none; }
.der-titulo { margin: 0 0 4px; font-family: var(--rotulo); font-size: 1.12rem; font-weight: 800; line-height: 1.2; color: var(--ink-950); }
.der-explora { margin-top: 22px; }
.der-conjunto { margin: 14px 0 0; }
.der-conjunto__titulo { margin: 0 0 8px; }
.der-temas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .der-temas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.der-tema { --c: var(--marca); display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 18px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-950); text-align: left; -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ios), box-shadow .15s; }
.der-tema:active { transform: scale(.98); }
.der-tema:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 45%, var(--ink-150)); }
.der-tema__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in oklab, var(--c) 14%, var(--papel)); color: var(--c); }
.der-tema__ic svg { width: 20px; height: 20px; }
.der-tema__texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.der-tema__texto b { font-size: .98rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.der-tema__texto small { font-size: .78rem; line-height: 1.3; color: var(--ink-500); }
.der-tema > svg:last-child { flex: none; width: 18px; height: 18px; color: var(--ink-400); }
.der-lista { display: grid; gap: 8px; }
.der-grupo { --c: var(--marca); display: grid; gap: 8px; }
.der-grupo .ayuda-sec__sub { margin: 12px 0 0; }
.der-grupo .ayuda-sec__sub:first-child { margin-top: 0; }
.der-fila__ref { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-style: normal; font-size: .74rem; font-weight: 700; color: var(--marca); }
.der-fila__ref svg { width: 12px; height: 12px; }
.der-resultados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-height: 120px; align-content: start; }
.der-resultados__nada { margin: 0; font-size: .9rem; color: var(--ink-600); }
.der-resultados__otra { margin: 6px 0 -2px; font-size: .85rem; color: var(--ink-500); }
.der-ingo { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 10px 14px; border-radius: 18px; background: var(--ink-950); color: var(--papel); text-align: left; }
.der-ingo > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.der-ingo small { overflow: hidden; opacity: .8; text-overflow: ellipsis; white-space: nowrap; }
.der-ingo > svg { flex: none; width: 20px; height: 20px; }
/* 1.67 · Derechos, paso 2: el estado junto al título, «Ver todo» dentro del panel de Automovilista,
   Mi carpeta en tres contadores y un error visible si Defiéndete no carga. */
.der-estado { margin: 0; min-height: 44px; }
.der-estado small { font-weight: 600; color: var(--ink-500); }
.auto-panel__mas { padding: 0 14px; }
.auto-panel__mas > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: .88rem; font-weight: 700; color: var(--cielo-texto, var(--ink-800)); cursor: pointer; list-style: none; }
.auto-panel__mas > summary::-webkit-details-marker { display: none; }
.auto-panel__mas > summary svg { width: 18px; height: 18px; transition: rotate .2s; }
.auto-panel__mas[open] > summary svg { rotate: 180deg; }
.auto-panel__mas .der-lista { --c: var(--cielo-texto, var(--ink-800)); margin: 4px 0 12px; }
.auto-panel__abrir { width: 100%; justify-content: center; margin-bottom: 2px; }
.der-carpeta__cuentas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.der-carpeta__cuentas > button { display: grid; justify-items: center; gap: 2px; min-height: 76px; padding: 10px 6px; border-radius: 16px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-950); text-align: center; }
.der-carpeta__cuentas svg { width: 18px; height: 18px; color: var(--marca); }
.der-carpeta__cuentas b { font-size: 1.1rem; line-height: 1.1; }
.der-carpeta__cuentas small { font-size: .72rem; line-height: 1.2; color: var(--ink-500); }
.der-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 16px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-800); font-size: .9rem; }
.der-error > svg { width: 18px; height: 18px; color: var(--ink-500); }
.der-error > span { flex: 1; min-width: 12ch; }
.der-esqueleto { display: flex; gap: 8px; overflow: hidden; padding: 6px 0; }
.der-esqueleto span { flex: none; width: 96px; height: 44px; border-radius: 999px; background: linear-gradient(90deg, var(--ink-100, #eee), color-mix(in oklab, var(--ink-100, #eee) 40%, var(--papel)), var(--ink-100, #eee)); background-size: 200% 100%; animation: derEsqueleto 1.2s linear infinite; }
@keyframes derEsqueleto { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .der-esqueleto span { animation: none; } }
.der-situaciones button > span { display: grid; gap: 2px; min-width: 0; }
.der-situaciones button b { font-weight: 600; }
.der-situaciones button small { font-size: .74rem; font-weight: 500; line-height: 1.25; color: var(--ink-500); }
.der-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; }
/* Búsquedas recientes: una píldora por búsqueda, con su «×» siempre visible (44 px cada parte). */
.der-recientes { margin: -6px 0 18px; }
.der-recientes[hidden] { display: none; }
.der-recientes__t { margin: 0 0 8px; font-size: .8rem; font-weight: 600; color: var(--ink-500); }
.der-recientes__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.der-reciente { display: inline-flex; align-items: center; max-width: 100%; border-radius: 999px; background: var(--papel); border: 1px solid var(--ink-150); }
.der-reciente button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0; padding: 0 2px 0 14px; font-size: .84rem; font-weight: 600; color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.der-reciente button svg { flex: none; width: 16px; height: 16px; color: var(--ink-500); }
.der-reciente .der-reciente__quitar { flex: none; justify-content: center; width: 44px; padding: 0; border-radius: 50%; }
.der-reciente:hover { border-color: var(--ink-400); }
.der-todas { margin-top: 10px; }
.der-grupo__estado { margin: 0 0 14px; }
.hoja-esqueleto { display: grid; gap: 12px; padding: 6px 0; }
.hoja-esqueleto span { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--ink-100), color-mix(in oklab, var(--ink-100) 40%, var(--papel)), var(--ink-100)); background-size: 200% 100%; animation: derEsqueleto 1.2s linear infinite; }
.hoja-esqueleto__corta { width: 60%; }
@media (prefers-reduced-motion: reduce) { .hoja-esqueleto span { animation: none; } }

/* Mudanza de leyes.ingofilma.date a justo.ingofilma.date: aviso fijo abajo, sobre todo lo demás. */
.mudanza { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); z-index: 120; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; padding: 12px 14px; border-radius: 18px; background: var(--papel, #fff); color: var(--tinta, #141414); box-shadow: 0 10px 30px rgb(0 0 0 / .18); max-width: 560px; margin: 0 auto; }
.mudanza p { margin: 0; font-size: .92rem; }

/* ——— Tema JUSTO: verde esmeralda con textura de papel acanalado y dorado de lacre ———
   El verde viste lo que manda (botones principales, paneles destacados y lo elegido); el dorado va en los detalles
   (filos, cifras y foco). Las islas (barra, pestañas e isla) conservan su cristal blanco o negro de siempre. Las páginas de lectura siguen claras para que la ley se lea bien.
   La textura es solo CSS y SVG: fibras diagonales (ruido estirado y girado), grano fino y estrías regulares. */
:root {
  --verde: #0e4a3a; --verde-hondo: #08332a; --verde-claro: #17604c;
  --marfil: #f7f1e1;
  --oro: #d4ae5a; --oro-fuerte: #f3dc9a; --oro-hondo: #8a6424; --oro-sombra: rgb(201 160 74 / .45);
  --oro-filo: rgb(222 189 110 / .42);
  --oro-metal: linear-gradient(140deg, #7a561b 0%, #b98d3c 17%, #f2d88f 36%, #d6ad59 50%, #9a7330 68%, #e8ca82 86%, #8a6424 100%);
  --fibras: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .085' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='.55 .16 0 .16 .5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect x='-500' y='-500' width='1900' height='1900' filter='url(%23f)' transform='rotate(-24 450 450)'/%3E%3C/svg%3E");
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .5 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --verde-tex:
    var(--grano) 0 0 / 160px 160px,
    var(--fibras) 0 0 / 900px 900px,
    repeating-linear-gradient(156deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 3px, rgb(0 0 0 / .07) 3px 4px, transparent 4px 6px),
    radial-gradient(130% 90% at 18% 0%, rgb(255 255 255 / .09), transparent 62%),
    linear-gradient(160deg, var(--verde-claro), var(--verde) 46%, var(--verde-hondo));
  --marca: #0f5a45; --marca-fuerte: #0a4636; --marca-50: #ebf3ee; --marca-100: #d3e6dc;
  --fondo: #faf8f2; --fondo-cristal: linear-gradient(#faf8f2, #faf8f2);
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fondo: #040a08; --papel: #08120e; --fondo-cristal: linear-gradient(#040a08, #040a08); } }
:root[data-tema="oscuro"] { --fondo: #040a08; --papel: #08120e; --fondo-cristal: linear-gradient(#040a08, #040a08); }

:focus-visible { outline-color: var(--oro); }





/* Rótulos pequeños en oro: hondo sobre claro (se lee), brillante sobre oscuro. */
:root { --oro-texto: #85601f; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --oro-texto: #dcbb6c; } }
:root[data-tema="oscuro"] { --oro-texto: #dcbb6c; }
.marca-texto { color: var(--oro-texto); }

/* ——— Portadas «Sombra» (estilo de libros predeterminado) ———
   Papel blanco, el nombre concreto de la ley en letra condensada y una persona pequeña de su tema, de cuerpo entero,
   con una sombra larga que cae desde otra luz: cada ley trae su propio lado, sesgo y largo (app.js · escenaLey).
   La sombra es la misma figura en negro, aplastada y sesgada sobre el piso, que se desvanece hacia la cabeza. */
.portada-ley__escena, .portada-ley__ambito, .tapa-ley__nombre { display: none; }
:root:not([data-libros]) .portada-ley {
  align-items: stretch; justify-content: flex-start; gap: 5px; padding: 14px 13px 11px; border-radius: 4px;
  background: #fff; color: #111; text-align: left;
  box-shadow: inset 0 0 0 1px rgb(17 17 17 / .07), 0 1px 0 rgb(17 17 17 / .04), 0 14px 26px -18px rgb(17 17 17 / .55);
}
:root:not([data-libros]) .portada-ley::before, :root:not([data-libros]) .portada-ley::after,
:root:not([data-libros]) .portada-ley__sigla, :root:not([data-libros]) .portada-ley__emblema,
:root:not([data-libros]) .portada-ley__arte, :root:not([data-libros]) .portada-ley__pie { display: none; }
:root:not([data-libros]) .portada-ley__titulo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  font-family: "Oswald", "Arial Narrow", var(--rotulo), sans-serif; font-weight: 700; text-transform: uppercase; color: #111;
  font-size: clamp(.92rem, calc(1.72rem - var(--n, 16) * .028rem), 1.62rem); line-height: .98; letter-spacing: .004em; text-wrap: balance; hyphens: manual;
}
:root:not([data-libros]) .portada-ley__trata {
  margin-top: 0; font-family: var(--clasica); font-style: italic; font-weight: 500; font-size: .74rem; line-height: 1.15; color: #6d6a63; text-transform: none; letter-spacing: 0;
}
:root:not([data-libros]) .portada-ley__escena { display: block; position: relative; flex: 1 1 auto; min-height: 44px; margin: 0 -13px; overflow: hidden; }
:root:not([data-libros]) .portada-ley__escena img {
  position: absolute; bottom: 7px; left: calc(50% + var(--x, 0%)); height: min(78%, 92px); width: auto; max-width: none;
  transform-origin: 50% 100%; translate: -50% 0;
}
:root:not([data-libros]) .portada-ley__figura { z-index: 1; scale: var(--espejo, 1) 1; }
:root:not([data-libros]) .portada-ley__sombra {
  transform: scaleX(var(--espejo, 1)) skewX(var(--sesgo, 50deg)) scaleY(var(--largo, .45));
  filter: brightness(0) blur(.4px); opacity: .17;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 92%); mask-image: linear-gradient(to top, #000 15%, transparent 92%);
}
:root:not([data-libros]) .portada-ley__ambito {
  display: block; font: 600 .5rem/1.2 var(--rotulo); letter-spacing: .2em; text-transform: uppercase; color: #8b867b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root:not([data-libros]) .preferidas .portada-ley { padding: 11px 10px 9px; }
:root:not([data-libros]) .preferidas .portada-ley__titulo { font-size: clamp(.78rem, calc(1.3rem - var(--n, 16) * .022rem), 1.2rem); -webkit-line-clamp: 3; }
:root:not([data-libros]) .preferidas .portada-ley__trata { display: none; }
:root:not([data-libros]) .preferidas .portada-ley__escena { margin: 0 -10px; }
:root:not([data-libros]) .portada-ley__fav { background: var(--oro-metal); color: #3a2a0c; }
/* Las tapas de la librería («Para empezar» y categorías) usan el mismo papel blanco con figura y sombra. */
:root:not([data-libros]) .tapa-ley { display: flex; flex-direction: column; gap: 4px; padding: 9px 8px 7px; background: #fff; color: #111; box-shadow: inset 0 0 0 1px rgb(17 17 17 / .07); }
:root:not([data-libros]) .tapa-ley > svg, :root:not([data-libros]) .tapa-ley > em, :root:not([data-libros]) .tapa-ley > b { display: none; }
:root:not([data-libros]) .tapa-ley__nombre {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  font-family: "Oswald", "Arial Narrow", var(--rotulo), sans-serif; font-weight: 700; text-transform: uppercase; color: #111;
  font-size: clamp(.74rem, calc(1.3rem - var(--n, 16) * .022rem), 1.22rem); line-height: .98; text-wrap: balance;
}
:root:not([data-libros]) .tapa-ley .portada-ley__escena { margin: 0 -8px; min-height: 30px; }
:root:not([data-libros]) .tapa-ley .portada-ley__escena img { bottom: 5px; height: min(80%, 52px); }
:root:not([data-libros]) .tapa-ley .portada-ley__ambito { font-size: .44rem; letter-spacing: .16em; }
:root:not([data-libros]) .portada-ley, :root:not([data-libros]) .tapa-ley { container-type: inline-size; }
:root:not([data-libros]) .portada-ley__titulo { font-size: min(clamp(.92rem, calc(1.72rem - var(--n, 16) * .028rem), 1.62rem), calc(100cqi / (var(--w, 8) * .58))); }
:root:not([data-libros]) .tapa-ley__nombre { font-size: min(clamp(.74rem, calc(1.3rem - var(--n, 16) * .022rem), 1.22rem), calc(100cqi / (var(--w, 8) * .58))); }
:root:not([data-libros]) .preferidas .portada-ley__titulo { font-size: min(clamp(.78rem, calc(1.3rem - var(--n, 16) * .022rem), 1.2rem), calc(100cqi / (var(--w, 8) * .58))); }
:root:not([data-libros]) .portada-ley__titulo, :root:not([data-libros]) .tapa-ley__nombre { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Repisas: el título de cada categoría va debajo de los libros, como una etiqueta discreta (tinte suave y filo de su color). */
.repisa__libros { padding-bottom: 14px; }
h3.repisa__tabla {
  position: static; height: auto; margin: 0 16px; padding: 9px 14px; border-radius: 14px; pointer-events: none;
  background: color-mix(in oklab, var(--c) 8%, var(--papel)); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 16%, transparent);
  color: var(--ink-900); text-shadow: none; font: 700 1rem/1.2 var(--sans); white-space: nowrap; text-overflow: ellipsis;
}
h3.repisa__tabla > svg { width: 1.05em; height: 1.05em; color: color-mix(in oklab, var(--c) 85%, var(--ink-950)); filter: none; }
.repisa--orgullo h3.repisa__tabla { background: linear-gradient(90deg, rgb(228 3 3 / .08), rgb(255 140 0 / .08), rgb(255 237 0 / .1), rgb(0 128 38 / .08), rgb(36 64 142 / .08), rgb(115 41 130 / .08)), var(--papel); }
.repisa { display: flex; flex-direction: column; margin-top: 24px; }
.repisa__cabeza { order: 2; position: relative; z-index: 2; align-self: flex-end; height: 32px; margin: -37px 20px 0 0; }
.repisa__cabeza small { font-size: .78rem; }
h3.repisa__tabla { padding-right: 132px; min-height: 42px; }
/* Ya debajo de los libros, la etiqueta lleva más color y la misma letra de las portadas. */
h3.repisa__tabla {
  background: color-mix(in oklab, var(--c) 24%, var(--papel));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 45%, transparent), inset 4px 0 0 var(--c);
  font: 700 1.12rem/1.1 "Oswald", "Arial Narrow", var(--rotulo), sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-950);
}
h3.repisa__tabla > svg { color: var(--c); }
.repisa--orgullo h3.repisa__tabla { background: linear-gradient(90deg, rgb(228 3 3 / .22), rgb(255 140 0 / .22), rgb(255 237 0 / .26), rgb(0 128 38 / .22), rgb(36 64 142 / .22), rgb(115 41 130 / .22)), var(--papel); }
/* «Para empezar»: números romanos en la letra clásica de las portadas. */
.libreria__caja > b { font: 500 calc(7rem - var(--r, 1) * .9rem)/.9 var(--clasica); letter-spacing: 0; }

/* ——— Abrir una ley: la portada crece en una ventana, la tapa gira y pasan las hojas ——— */
.abre-libro { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; perspective: 1600px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.abre-libro__fondo { position: absolute; inset: 0; background: rgb(10 10 10 / .52); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
.abre-libro__libro { position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; will-change: transform; }
.abre-libro__paginas, .abre-libro__tapa { position: absolute; inset: 0; transform-style: preserve-3d; }
.abre-libro__paginas { border-radius: 2px 6px 6px 2px; background: #fbf8f1; box-shadow: 1px 1px 0 #efe9dc, 2px 2px 0 #e6dfd0, 3px 3px 0 #ddd5c4, 4px 4px 0 #d3cab8, 0 30px 60px -20px rgb(0 0 0 / .6); }
.abre-libro__paginas > i { position: absolute; inset: 0; transform-origin: left center; border-radius: 0 6px 6px 0; backface-visibility: visible;
  background: repeating-linear-gradient(#fbf8f1 0 13px, #ece6d8 13px 14px) 0 34px / 100% calc(100% - 64px) no-repeat, linear-gradient(90deg, #e9e2d3, #fbf8f1 12%); box-shadow: inset 1px 0 0 #e2dacb; }
.abre-libro__hoja-final { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 20px; text-align: center; color: #1a1a1a;
  background: linear-gradient(90deg, #ece5d6, #fbf8f1 10%); border-radius: 0 6px 6px 0; }
.abre-libro__hoja-final small { font: 600 .56rem/1 var(--rotulo); letter-spacing: .24em; text-transform: uppercase; color: #8b867b; }
.abre-libro__hoja-final b { font: 700 1.05rem/1.12 "Oswald", var(--rotulo), sans-serif; text-transform: uppercase; text-wrap: balance; }
.abre-libro__hoja-final em { font: italic 500 .92rem/1.2 var(--clasica); color: #5f5a50; }
.abre-libro__hoja-final span { margin-top: 6px; font: 600 .62rem/1 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; color: #85601f; }
.abre-libro__tapa { z-index: 2; transform-origin: left center; }
.abre-libro__cara, .abre-libro__dorso { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 6px 6px 2px; overflow: hidden; }
.abre-libro__dorso { transform: rotateY(180deg); background: linear-gradient(270deg, #e6dfcf, #f6f1e6 18%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .05); }
.abre-libro__cara .portada-ley { width: 100%; height: 100%; animation: none; opacity: 1; transform: none; cursor: inherit; }
:root:not([data-libros]) .abre-libro__cara .portada-ley { padding: 22px 20px 16px; }
:root:not([data-libros]) .abre-libro__cara .portada-ley__titulo { -webkit-line-clamp: 5; }
:root:not([data-libros]) .abre-libro__cara .portada-ley__trata { font-size: .9rem; }
:root:not([data-libros]) .abre-libro__cara .portada-ley__escena img { height: min(80%, 150px); }
:root:not([data-libros]) .abre-libro__cara .portada-ley__ambito { font-size: .6rem; }
/* La portada grande dentro de la ley, en el mismo estilo «Sombra»: es el libro que se acaba de abrir. */
:root:not([data-libros]) .portada-hero {
  container-type: inline-size; padding: 26px 22px 20px; border-radius: 6px; background: #fff; color: #111;
  box-shadow: inset 0 0 0 1px rgb(17 17 17 / .07), 0 22px 44px -26px rgb(17 17 17 / .55);
}
:root:not([data-libros]) .portada-hero::before, :root:not([data-libros]) .portada-hero__sigla, :root:not([data-libros]) .portada-hero__arte { display: none; }
:root:not([data-libros]) .portada-hero .etiqueta { color: #8b867b; font: 600 .62rem/1.3 var(--rotulo); letter-spacing: .22em; text-transform: uppercase; opacity: 1; }
:root:not([data-libros]) .portada-hero h2 {
  margin: 10px 0 10px; color: #111; font-family: "Oswald", "Arial Narrow", var(--rotulo), sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: min(clamp(1.7rem, 8vw, 2.6rem), calc(100cqi / (var(--w, 10) * .58))); line-height: 1; letter-spacing: .005em; overflow-wrap: normal; text-wrap: balance;
}
:root:not([data-libros]) .portada-hero__trata { color: #4d4a44; font-family: var(--clasica); font-style: italic; font-size: 1.05rem !important; }
:root:not([data-libros]) .portada-hero__trata b { font-style: normal; font-family: var(--sans); font-size: .82rem; }
:root:not([data-libros]) .portada-hero__trata svg { color: #85601f; }
:root:not([data-libros]) .portada-hero > p { color: #6d6a63; opacity: 1; }
:root:not([data-libros]) .portada-hero .portada-ley__escena { display: block; position: relative; height: 150px; margin: 4px -22px 6px; overflow: hidden; }
:root:not([data-libros]) .portada-hero .portada-ley__escena img { height: 120px; bottom: 12px; }
:root:not([data-libros]) .portada-hero__botones .boton { background: #f4f3ef; color: #111; box-shadow: inset 0 0 0 1px rgb(17 17 17 / .08); }
:root:not([data-libros]) .portada-hero__botones [data-favorita][aria-pressed="true"] { background: var(--oro-metal); color: #2a1e08; }
/* La última página se vuelve el fondo de la app para fundirse con la ley. */
.abre-libro__funde { position: absolute; inset: -2px; z-index: 5; background: var(--fondo); opacity: 0; pointer-events: none; }
.abre-libro__libro { transform-origin: 50% 50%; }

/* Botones de la ley en un solo renglón: ícono arriba y nombre corto abajo, todos del mismo ancho. */
.portada-hero__botones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; flex-wrap: nowrap; }
.portada-hero__botones .boton {
  flex-direction: column; gap: 4px; min-width: 0; min-height: 58px; margin: 0; padding: 9px 0 8px; border-radius: 14px;
  font-size: .56rem; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; overflow: hidden; white-space: nowrap; text-align: center;
}
.portada-hero__botones .boton svg { width: 18px; height: 18px; }
:root:not([data-libros]) .portada-hero__botones { margin-inline: -10px; }

/* Abrir una ley en dos toques: la portada espera al centro con una pista y una X; al tocarla se abre el libro. */
.abre-libro__libro { cursor: pointer; outline: none; }
.abre-libro__libro:focus-visible { box-shadow: 0 0 0 3px var(--oro); border-radius: 6px; }
.abre-libro__pista { position: absolute; left: 50%; top: calc(50% + var(--h) / 2 + 26px); margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); color: #fff; font: 600 .82rem/1 var(--rotulo); letter-spacing: .02em; white-space: nowrap; opacity: 0; pointer-events: none; }
.abre-libro__pista { width: max-content; }
.abre-libro__pista svg { flex: none; width: 16px; height: 16px; color: var(--oro); }
.abre-libro__cerrar { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 18px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .24); color: #fff; cursor: pointer; opacity: 0; }
.abre-libro__cerrar svg { width: 20px; height: 20px; }

/* La ley abierta desde su portada: sin repetir la portada, su nombre y sus botones; luego «Para entenderla» con el
   formato del 911 (tarjetas grandes y paneles de dos columnas con su icono de color). */
.ley-cabeza { margin: 6px 0 0; text-align: left; }
.ley-cabeza__ambito { display: block; font: 600 .64rem/1.3 var(--rotulo); letter-spacing: .22em; text-transform: uppercase; color: var(--oro-texto); }
.ley-cabeza h2 { margin: 6px 0 6px; font: 700 clamp(1.6rem, 7.6vw, 2.3rem)/1.02 "Oswald", var(--display), sans-serif; text-transform: uppercase; letter-spacing: .005em; color: var(--ink-950); text-wrap: balance; hyphens: manual; overflow-wrap: normal; }
.ley-cabeza__trata { display: flex; align-items: center; gap: 8px; margin: 0; font: italic 500 1.08rem/1.25 var(--clasica); color: var(--ink-600); }
.ley-cabeza__trata svg { flex: none; width: 18px; height: 18px; color: var(--oro-texto); }
.ley-cabeza .portada-hero__nueva { margin: 10px 0 0; }
.ley-cabeza__botones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 16px; }
.ley-cabeza__botones .boton { flex-direction: column; gap: 4px; min-width: 0; min-height: 58px; margin: 0; padding: 9px 0 8px; border-radius: 16px; background: var(--cristal); color: var(--ink-950);
  box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz); font-size: .56rem; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; overflow: hidden; white-space: nowrap; text-align: center; text-decoration: none; }
.ley-cabeza__botones .boton svg { width: 18px; height: 18px; color: var(--oro-texto); }
.ley-cabeza__botones [data-favorita][aria-pressed="true"] { background: var(--oro-metal); color: #2a1e08; }
.ley-cabeza__botones [data-favorita][aria-pressed="true"] svg { color: inherit; }

.entiende { margin: 22px 0 0; }
.entiende__tarjetas { width: 100%; }
.entiende__tarjetas .ayuda-tarjeta { min-width: 0; min-height: 124px; text-decoration: none; }
.entiende__tarjetas .ayuda-tarjeta small { overflow-wrap: anywhere; }
.entiende__justo > .avatar-ingo { width: 46px; height: 46px; margin-bottom: auto; box-shadow: 0 0 0 2px var(--papel, #fff), 0 8px 18px -10px rgb(0 0 0 / .55); }
.entiende__texto { background: linear-gradient(160deg, #1f8f63, #0b6b4b); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -1px 0 rgb(0 0 0 / .25), 0 16px 30px -14px #0b6b4b; }
.entiende__texto > svg { color: #fff; }
.entiende__texto small { color: rgb(255 255 255 / .85); }
.entiende__texto .ayuda-tarjeta__insignia { background: #fff; color: #0b6b4b; }
.entiende__texto .ayuda-tarjeta__insignia svg { width: 14px; height: 14px; }
.entiende__titulo { width: 100%; margin: 24px 0 8px; }
.entiende__paneles.ayuda-sugiere { width: 100%; max-height: none; min-height: 0; overflow: visible; padding: 0; margin: 0; -webkit-mask: none; mask: none; }
.entiende__paneles > * { align-items: center; min-height: 64px; border: 0; font: inherit; cursor: pointer; transition: transform .2s var(--suave); }
.entiende__paneles b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; gap: 0; }
.entiende__paneles small { display: block; margin-top: 2px; font-weight: 500; }
.entiende__mas { margin-top: 8px; }
.entiende__mas > summary { padding: 11px 14px; font-size: .86rem; }
.entiende__mas .ayuda-sugiere { margin-top: 8px; }
.entiende__todo { margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid color-mix(in oklab, var(--ink-950) 10%, transparent); font: 700 1.2rem/1.1 "Oswald", var(--display), sans-serif; text-transform: uppercase; color: var(--ink-950); }
@media (prefers-reduced-motion: reduce) { .entiende__paneles > * { transition: none; } }

/* Isla superior: sin el icono, con el wordmark JUSTO (ver el final del archivo). En el riel angosto de escritorio
   (961–1199 px) no cabe el nombre, así que ahí se queda el icono. */
.barra .logo { gap: 0; }
.barra .logo__marca { display: none; }
@media (min-width: 961px) and (max-width: 1199px) { .barra .logo { gap: 12px; } .barra .logo__marca { display: block; } }


/* Isla inferior: la sección activa la marca una píldora que se desliza dentro de la cápsula al cambiar de sección. */
.isla .isla__pildora { position: absolute; left: 0; top: 0; z-index: 0; width: var(--w, 0); height: var(--h, 0); border-radius: 999px; background: var(--ink-950); box-shadow: 0 6px 14px -8px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .12); opacity: 0; pointer-events: none;
  transform: translate(var(--x, 0), var(--y, 0)); transition: transform .55s var(--ios), width .55s var(--ios), height .55s var(--ios), opacity .3s ease; }
.isla .isla__pildora[data-ver] { opacity: 1; }
.isla[data-escondida="true"] > .isla__pildora { opacity: 0; transform: translate(var(--x, 0), calc(var(--y, 0) + 26px)); }
.isla > a { position: relative; z-index: 1; }
.isla a[aria-current="true"]:not(.isla__centro) { background: transparent; }
@media (prefers-reduced-motion: reduce) { .isla .isla__pildora { transition: opacity .2s ease; } }

/* Campana de avisos en la barra y su tarjeta flotante translúcida (modo de avisos como un estado: todo, solo el día, silencio). */
.barra__campana { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 42px; padding: 0; border: 0; background: none; color: var(--ink-950); -webkit-tap-highlight-color: transparent; }
.barra__campana svg { width: 21px; height: 21px; }
.barra__campana::after { content: ""; position: absolute; top: 10px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px var(--papel); opacity: 0; transition: opacity .2s; }
.barra__campana[data-modo="todo"]::after, .barra__campana[data-modo="dia"]::after { opacity: 1; }
.barra__campana[data-modo="dia"]::after { background: #ffcc00; }
.barra__campana[data-modo="silencio"] { color: var(--ink-500); }
.avisos-tarjeta { position: fixed; z-index: 90; width: min(300px, calc(100vw - 24px)); padding: 14px 10px 10px; border-radius: 26px; background: var(--cristal-fuerte, rgb(246 247 249 / .84)); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: var(--cristal-luz), 0 24px 48px -20px rgb(10 20 30 / .45), 0 0 0 1px rgb(255 255 255 / .35); color: var(--ink-950); transform-origin: top right; animation: tarjeta-avisos .32s var(--ios) both; }
.avisos-tarjeta[data-sale] { animation: tarjeta-avisos-sale .18s ease both; }
@keyframes tarjeta-avisos { from { opacity: 0; transform: translateY(-6px) scale(.94); } }
@keyframes tarjeta-avisos-sale { to { opacity: 0; transform: translateY(-4px) scale(.96); } }
.avisos-tarjeta__titulo { margin: 0 8px 8px; font: 800 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.avisos-tarjeta__modos { display: grid; gap: 2px; }
.avisos-tarjeta__modos button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border: 0; border-radius: 16px; background: none; color: inherit; text-align: left; -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
.avisos-tarjeta__modos button:hover, .avisos-tarjeta__modos button:focus-visible { background: rgb(127 127 127 / .12); outline: none; }
.avisos-tarjeta__modos button[aria-checked="true"] { background: rgb(127 127 127 / .14); }
.avisos-tarjeta__punto { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 22%, transparent); }
.avisos-tarjeta__modos b { display: block; font: 700 .92rem/1.2 var(--sans); }
.avisos-tarjeta__modos small { display: block; margin-top: 2px; font: 500 .74rem/1.3 var(--sans); color: var(--ink-500); }
.avisos-tarjeta__modos svg { width: 18px; height: 18px; color: var(--marca); opacity: 0; }
.avisos-tarjeta__modos button[aria-checked="true"] svg { opacity: 1; }
.avisos-tarjeta__hora { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 6px 0; padding: 10px 4px 0; border-top: 1px solid rgb(127 127 127 / .18); font: 700 .8rem/1 var(--sans); }
.avisos-tarjeta__hora[hidden] { display: none; }
.avisos-tarjeta__mas { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px; border: 0; border-radius: 14px; background: none; font: 600 .8rem/1 var(--sans); color: var(--ink-600); }
.avisos-tarjeta__mas svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .avisos-tarjeta, .avisos-tarjeta[data-sale] { animation: none; } }
/* Con la campana, los botones de la barra se juntan un poco para que el buscador siga diciendo «Buscar» en 375 px. */
@media (max-width: 960px) { .barra .barra__acciones { gap: 0; } .barra .barra__campana, .barra .barra__tema { width: 40px; } :root[data-barra-isla] .barra .barra__tema { width: 44px; } }

/* Carrusel 3D (solo teléfono) en repisas y Favoritos: el libro del centro, grande y de frente; dos a cada lado, girados
   (todos miran a la izquierda), más chicos y un poco apagados; el resto se asoma difuminado (--nubla, --opa) en las
   orillas. --orilla la pone el código para que el primero y el último puedan quedar al centro. */
@media (max-width: 760px) {
  [data-carrusel] { gap: 4px; padding-inline: var(--orilla, 16px); scroll-snap-type: none; scroll-padding-inline: 0; }  /* encaja el código (app.js · encajar) */
  .repisa__libros[data-carrusel] { padding-top: 16px; padding-bottom: 18px; }
  .bib-mesa .portadas[data-carrusel] { padding-top: 12px; padding-bottom: 22px; }
  [data-carrusel] > * { position: relative; scroll-snap-align: center; transform: perspective(700px) translateX(var(--tx, 0)) rotateY(var(--giro, 0deg)) scale(var(--esc, 1)); filter: brightness(var(--luz, 1)) blur(var(--nubla, 0px)); opacity: var(--opa, 1); will-change: transform; transition: box-shadow .3s; }
  [data-carrusel] > .entra { animation: none; opacity: 1; }
  [data-carrusel] > [data-centro] { box-shadow: 0 22px 26px -14px rgb(0 0 0 / .55), 0 4px 10px -6px rgb(0 0 0 / .3); }
  [data-carrusel] > *:active { transform: perspective(700px) translateX(var(--tx, 0)) rotateY(var(--giro, 0deg)) scale(calc(var(--esc, 1) * .97)); }
}


/* Libros con las esquinas redondeadas (Arturo): en las repisas, en Favoritos y en el carrusel. */
:root:root .repisa__libro, :root:root .bib-mesa .portada-ley { border-radius: 16px; }
.repisa__libro img { border-radius: inherit; }

/* La campana va dentro del renglón de la isla (Leyes · Libros · México; Publicaciones · Perfiles · Comunidad). Donde
   hay renglón, la de la barra se esconde y el buscador recupera su ancho; donde no hay, la de la barra sigue. */
:root[data-barra-isla] .barra__acciones .barra__campana { display: none; }
.barra__fila .barra__campana--fila { flex: 0 0 auto; width: 42px; min-width: 42px; padding: 0; }
.barra__fila .barra__campana--fila svg { width: 18px; height: 18px; }
.barra__fila .barra__campana--fila::after { top: 8px; right: 9px; }
:root:root .tapa-hecha { border-radius: 12px; overflow: hidden; }

/* Criterio móvil (Ingo, 13-nov): zonas de toque de 44 px y textos legibles sin zoom en lo nuevo. */
/* La campana del renglón, de 44 px como el resto de los toques. */
.barra__fila .barra__campana--fila { width: 44px; min-width: 44px; }
/* Tarjeta de avisos: cada renglón tocable mide 44 px. */
.avisos-tarjeta__mas { min-height: 44px; }
.avisos-tarjeta .segmento button { min-height: 40px; }
/* Flechas de las repisas: 44 px en el teléfono (antes 32). */
@media (max-width: 760px) { .repisa__cabeza button { width: 44px; height: 44px; } .repisa__cabeza button svg { width: 20px; height: 20px; } }
/* Etiqueta de repisa en el teléfono: con las flechas de 44 px el contador encimaba el nombre («Mujeres y Género»).
   El contador se va (está en la cabecera del panel de categorías y en la etiqueta accesible de cada tarjeta) y el nombre usa todo el ancho, en dos renglones si hace falta. */
@media (max-width: 760px) {
  .repisa__cabeza { height: 44px; gap: 0; margin: -47px 10px 0 0; }
  .repisa__cabeza small { display: none; }
  h3.repisa__tabla { min-height: 50px; padding-right: 100px; overflow: hidden; white-space: normal; }
}

/* Respuesta lista en el chat de Justo (asistente sin internet, Fase 0): la situación que se parece a tu caso. */
.litigar__lista { display: grid; gap: 8px; margin: 2px 0 12px; padding: 14px; border-radius: 18px; background: color-mix(in oklab, var(--c) 9%, var(--papel)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 22%, transparent), inset 4px 0 0 var(--c); }
.litigar__lista .etiqueta { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in oklab, var(--c) 80%, var(--ink-950)); }
.litigar__lista .etiqueta svg { width: 16px; height: 16px; }
.litigar__lista-t { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.litigar__lista .pasos-l { margin: 0; }
.litigar__parecidas { display: grid; gap: 6px; margin: 2px 0 12px; }
.litigar__parecidas .litigar__accion { min-height: 48px; }

/* «¿Qué te pasó?»: el micrófono grande de la portada de Leyes (hablar primero, escribir opcional). */
.habla-justo { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 14px; padding: 14px 16px; border: 0; border-radius: 22px; background: var(--ink-950); color: var(--papel); text-align: left; box-shadow: 0 12px 26px -16px rgb(0 0 0 / .55); -webkit-tap-highlight-color: transparent; transition: transform .15s; }
.habla-justo:active { transform: scale(.98); }
.habla-justo__mic { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: #34c759; color: #fff; box-shadow: 0 0 0 6px rgb(52 199 89 / .18); }
.habla-justo__mic svg { width: 26px; height: 26px; }
.habla-justo__texto { display: grid; gap: 3px; min-width: 0; }
.habla-justo__texto b { font: 800 1.12rem/1.2 var(--sans); }
.habla-justo__texto small { font: 500 .86rem/1.35 var(--sans); opacity: .78; }
@media (prefers-reduced-motion: no-preference) { .habla-justo__mic { animation: habla-justo-late 2.4s ease-in-out infinite; } }
@keyframes habla-justo-late { 50% { box-shadow: 0 0 0 10px rgb(52 199 89 / .08); } }
.habla-justo__mic { overflow: hidden; background: #1c1c1e; }
.habla-justo__mic > * { width: 100%; height: 100%; }
.habla-justo__mic img { width: 100%; height: 100%; object-fit: cover; }
/* Auditoría 1.71.1 (P0): el 911 siempre a la vista. Cuando la isla se esconde (al bajar, o en los reels limpios o
   inmersos) se va todo menos el botón rojo, que se queda en su lugar; en la plática con Justo, que ocupa la pantalla y
   tapa la isla, el 911 va en su cabecera. */
.isla[data-escondida="true"] > .isla__911,
:root[data-vista="reels"]:is([data-limpio], [data-inmerso]) .isla > .isla__911 { opacity: 1 !important; transform: none !important; filter: none !important; pointer-events: auto !important; }
:root[data-vista="reels"]:is([data-limpio], [data-inmerso]) .isla { opacity: 1 !important; transform: translateX(-50%) !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; pointer-events: none !important; }
:root[data-vista="reels"]:is([data-limpio], [data-inmerso]) .isla > :not(.isla__911) { opacity: 0 !important; transform: translateY(26px) !important; pointer-events: none !important; }
.litigar__911 { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; -webkit-tap-highlight-color: transparent; }
.litigar__911 span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #d62828; color: #fff; font: 700 .9rem/1 var(--display); letter-spacing: .02em; box-shadow: 0 6px 14px -6px rgb(214 40 40 / .6); }
/* Auditoría 1.71.1 (P0): «Ayuda ahora» se ve. El título ocupa unos 34 px: la hoja sube lo mismo (hueco de arriba de 84
   a 48 px) y el cálculo de los círculos los descuenta, así que abajo no se corta nada. */
.hoja:has(.ayuda-inicio) { --hueco: calc(48px + env(safe-area-inset-top)); --d: min(calc((100dvh - var(--hueco) - 268px - env(safe-area-inset-bottom)) / 3), 62vw, 210px); }
.hoja:has(.ayuda-inicio) .hoja__cabeza h2 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin: 2px 0 6px; font: 800 1.3rem/1.2 var(--sans); color: var(--ink-950); }
/* Auditoría 1.71.1 (revisión de Ingo): notas, tema y 911 van en una fila flex en la columna izquierda, sin márgenes
   fijos; si cambia la cabecera, se acomodan solos. En pantallas de menos de 360 px, «Sin voz» queda solo con su ícono. */
.litigar__cabeza--avatar > .litigar__izq { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
.litigar__izq > .litigar__notas, .litigar__izq > .litigar__ajuste { margin: 0; flex: none; }
@media (max-width: 359px) {
  .litigar__cabeza--avatar { padding-inline: 10px; gap: 6px; }
  .litigar__izq { gap: 6px; }
  .litigar__cabeza--avatar .litigar__voz { padding: 0; width: 44px; justify-content: center; }
  .litigar__cabeza--avatar .litigar__voz [data-voz-texto] { display: none; }
}

/* Filas de botones: «.boton + .boton» es para botones apilados; en una fila bajaba 8 px a todos menos al primero
   (Resumir quedaba más alto y estirado que Guardar, y «anterior» desfasado de «siguiente» en el pie de la hoja). */
.hoja__herramientas > .boton, .hoja__pie > .boton, .portada-hero__botones > .boton { margin-top: 0; }
.hoja__herramientas { align-items: center; }

/* ——— Derechos rediseñado (prototipo de Odin, 2026-11): papel cálido, verde profundo, acento terracota y títulos con serif.
   Solo esta pantalla: los colores se redefinen dentro de #derechos, así que las hojas que abre y el resto de la app no cambian. */
#derechos {
  --fondo: #f4efe4; --papel: #fffcf5;
  --ink-950: #1d2620; --ink-900: #26302a; --ink-800: #333d36; --ink-700: #454f48; --ink-600: #59625b;
  --ink-500: #646d65; --ink-400: #7b827c; --ink-300: #b9b3a4; --ink-200: #ddd5c4; --ink-150: #e6ddcc; --ink-100: #eee7d9; --ink-50: #f7f2e8;
  --marca: #1f4a35; --marca-fuerte: #173a29; --marca-50: #e4ebde; --marca-100: #ccdac6;
  --d-terra: #a54629; --d-terra-50: #f5e1d6; --d-ambar: #86600f; --d-ambar-50: #f5e8ca;
  --d-rojo: #ae3529; --d-rojo-50: #f5dcd6; --d-verde: #2c6843; --d-verde-50: #dfeadb;
  --d-boton: #1f4a35; --d-boton-texto: #fff;
  --d-serif: "Literata", Georgia, "Times New Roman", serif;
  --d-sombra: 0 1px 2px rgb(70 50 20 / .05), 0 8px 20px -16px rgb(70 50 20 / .35);
  background: var(--fondo); color: var(--ink-950);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) #derechos {
    --fondo: #141914; --papel: #1c221d;
    --ink-950: #ece9df; --ink-900: #dedbd0; --ink-800: #ccc9be; --ink-700: #b6b4a9; --ink-600: #a3a196; --ink-500: #929086;
    --ink-400: #7c7a71; --ink-300: #4c524c; --ink-200: #353b35; --ink-150: #2b312b; --ink-100: #232923; --ink-50: #1a1f1a;
    --marca: #9cc9a3; --marca-fuerte: #b3d7b8; --marca-50: #1f2e23; --marca-100: #2a3f2f;
    --d-terra: #e8936c; --d-terra-50: #3a2419; --d-ambar: #e4b85e; --d-ambar-50: #342914;
    --d-rojo: #f08a7d; --d-rojo-50: #3b201c; --d-verde: #9cc9a3; --d-verde-50: #1f2e23;
    --d-boton: #2e4d39; --d-boton-texto: #eef5ec;
    --d-sombra: 0 10px 24px -18px rgb(0 0 0 / .9);
  }
}
:root[data-tema="oscuro"] #derechos {
  --fondo: #141914; --papel: #1c221d;
  --ink-950: #ece9df; --ink-900: #dedbd0; --ink-800: #ccc9be; --ink-700: #b6b4a9; --ink-600: #a3a196; --ink-500: #929086;
  --ink-400: #7c7a71; --ink-300: #4c524c; --ink-200: #353b35; --ink-150: #2b312b; --ink-100: #232923; --ink-50: #1a1f1a;
  --marca: #9cc9a3; --marca-fuerte: #b3d7b8; --marca-50: #1f2e23; --marca-100: #2a3f2f;
  --d-terra: #e8936c; --d-terra-50: #3a2419; --d-ambar: #e4b85e; --d-ambar-50: #342914;
  --d-rojo: #f08a7d; --d-rojo-50: #3b201c; --d-verde: #9cc9a3; --d-verde-50: #1f2e23;
  --d-boton: #2e4d39; --d-boton-texto: #eef5ec;
  --d-sombra: 0 10px 24px -18px rgb(0 0 0 / .9);
}
#derechos :focus-visible { outline-color: var(--d-terra); }

/* Cabeza: título con serif, la pregunta y el estado siempre a la vista. */
.der-heroe { margin: 6px 0 18px; }
.der-heroe__t { margin: 0 0 10px; font: 600 clamp(2.4rem, 10vw, 3.4rem)/1.02 var(--d-serif); letter-spacing: -.02em; color: var(--marca); }
.der-heroe__p { max-width: 34rem; margin: 0 0 16px; font-size: 1.05rem; line-height: 1.5; color: var(--ink-700); }
.der-heroe__p b { color: var(--ink-950); }
#derechos .der-estado { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--d-sombra); font-size: .92rem; color: var(--ink-700); }
#derechos .der-estado b { font-weight: 700; color: var(--d-terra); }
#derechos .der-estado svg { width: 16px; height: 16px; color: var(--d-terra); }
.der-estado__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--d-terra); }

/* Buscador como protagonista, con su botón «Buscar». */
#derechos .der-busca { min-height: 66px; margin: 0 0 14px; padding: 8px 8px 8px 18px; border-radius: 20px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--d-sombra); }
#derechos .der-busca:focus-within { box-shadow: inset 0 0 0 2px var(--d-terra), 0 0 0 4px var(--d-terra-50); }
#derechos .der-busca > svg { width: 22px; height: 22px; color: var(--d-terra); }
#derechos .der-busca input { font-size: 1.05rem; }
#derechos .der-busca .der-busca__ir { width: auto; height: 50px; padding: 0 20px; border-radius: 14px; background: var(--d-boton); color: var(--d-boton-texto); font-weight: 700; font-size: .98rem; }
#derechos .der-busca .der-busca__ir:active { transform: scale(.97); }
#derechos .der-recientes__t { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-600); }

/* Títulos de sección con serif. */
.der-seccion__t { margin: 30px 0 6px; font: 600 1.6rem/1.15 var(--d-serif); color: var(--ink-950); }
.der-seccion__p { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; color: var(--ink-600); }
.der-seccion__estado { margin-top: -6px; font-size: .9rem; }
#derechos .enlace { color: var(--d-terra); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Si está pasando ahora: cuatro tarjetas, cada una con su color de señal. */
#derechos .der-situaciones { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 22px; }
#derechos .der-situ { display: flex; align-items: flex-start; gap: 16px; min-height: 0; padding: 18px; border-radius: 18px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--d-sombra); text-align: left; color: var(--ink-950); transition: transform .2s var(--suave); }
#derechos .der-situ:active { transform: scale(.98); }
#derechos .der-situ:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t) 45%, var(--ink-150)), var(--d-sombra); }
.der-situ--ambar { --t: var(--d-ambar); --t50: var(--d-ambar-50); }
.der-situ--terra { --t: var(--d-terra); --t50: var(--d-terra-50); }
.der-situ--rojo { --t: var(--d-rojo); --t50: var(--d-rojo-50); }
.der-situ--verde { --t: var(--d-verde); --t50: var(--d-verde-50); }
.der-situ__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--t50); color: var(--t); }
#derechos .der-situ__ic svg { width: 22px; height: 22px; color: currentColor; }
.der-situ__tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
#derechos .der-situ__tx b { font-size: 1.08rem; font-weight: 800; line-height: 1.25; }
#derechos .der-situ__tx small { font-size: .92rem; font-weight: 500; line-height: 1.35; color: var(--ink-600); }
.der-situ__tx em { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-style: normal; font-size: .9rem; font-weight: 700; color: var(--t); }
#derechos .der-situ__tx em svg { width: 16px; height: 16px; color: currentColor; }

/* Defiéndete: tira de perfiles dentro de una tarjeta. */
#derechos .defiendete--compacto { margin: 0 0 14px; padding: 18px; border-radius: 20px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--d-sombra); }
#derechos .defiendete__rotulo { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.defiendete__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--marca-50); color: var(--marca); }
#derechos .defiendete__ic svg { width: 20px; height: 20px; }
#derechos .defiendete__rotulo b { display: block; font-size: 1.08rem; font-weight: 800; color: var(--ink-950); }
#derechos .defiendete__rotulo small { display: block; font-size: .88rem; color: var(--ink-600); }
#derechos .defiendete__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
#derechos .chip { background: var(--fondo); box-shadow: inset 0 0 0 1px var(--ink-150); color: var(--ink-900); }

/* Automovilista: sin el azul institucional; el aviso de la UMA va como nota dentro. */
#derechos .auto-panel { padding: 18px 0; border: 0; border-radius: 20px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--d-sombra); }
#derechos .auto-panel__cabeza { padding: 0 18px; }
#derechos .auto-panel__ic { background: var(--d-terra-50); color: var(--d-terra); box-shadow: none; }
#derechos .auto-panel__cabeza > svg:last-child { background: var(--fondo); color: var(--ink-700); box-shadow: inset 0 0 0 1px var(--ink-150); }
#derechos .auto-panel__chips { flex-wrap: wrap; overflow: visible; padding: 0 18px; }
#derechos .auto-panel__chips .chip svg { color: var(--d-terra); }
.auto-panel__nota { display: flex; gap: 8px; margin: 0 18px; font-size: .84rem; line-height: 1.45; color: var(--ink-600); }
.auto-panel__nota svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--d-ambar); }
#derechos .auto-panel__mas { padding: 0 18px; }
#derechos .auto-panel__mas summary { color: var(--d-terra); font-weight: 700; }

/* Temas en tres grupos plegables. */
#derechos .der-explora { margin-top: 8px; }
#derechos .der-conjunto { margin: 18px 0 0; }
#derechos .der-conjunto > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 10px; list-style: none; cursor: pointer; }
#derechos .der-conjunto > summary::-webkit-details-marker { display: none; }
#derechos .der-conjunto > summary .der-conjunto__titulo { margin: 0; font: 600 1.3rem/1.2 var(--d-serif); letter-spacing: 0; text-transform: none; color: var(--ink-950); }
#derechos .der-conjunto > summary small { flex: 1; display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--ink-500); white-space: nowrap; }
#derechos .der-conjunto > summary small::after { content: ""; flex: 1; height: 1px; background: var(--ink-200); }
#derechos .der-conjunto > summary svg { flex: none; width: 20px; height: 20px; color: var(--ink-600); transition: transform .2s var(--suave); }
#derechos .der-conjunto:not([open]) > summary svg { transform: rotate(-90deg); }
#derechos .der-tema { min-height: 72px; padding: 12px 14px; border-radius: 18px; background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150), var(--d-sombra); }
#derechos .der-tema { --cw: color-mix(in oklab, var(--c) 50%, var(--d-terra)); }
#derechos .der-tema__ic { width: 46px; height: 46px; border-radius: 13px; background: color-mix(in oklab, var(--cw) 16%, var(--papel)); color: color-mix(in oklab, var(--cw) 85%, var(--ink-950)); }
#derechos .der-tema__ic svg { width: 22px; height: 22px; }
#derechos .der-tema__texto b { font-size: 1.02rem; }
#derechos .der-tema__texto small { color: var(--ink-500); }

/* Lo demás de la pantalla toma la misma paleta. */
#derechos .der-fila, #derechos .der-mas > * { background: var(--papel); box-shadow: inset 0 0 0 1px var(--ink-150); }
#derechos .der-mas svg { color: var(--d-terra); }
#derechos .der-ingo { background: var(--d-boton); color: var(--d-boton-texto); }
#derechos .der-carpeta { background: var(--papel); }

@media (min-width: 700px) {
  #derechos .der-situaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #derechos .der-temas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Biblioteca sin esquinas duras: portadas, tapas y lomos redondos, con sombras más suaves. */
:root:root .tapa-hecha, :root:root .repisa__libro, :root:root .libreria__tapa, :root:root .libro-frente img, :root:root .libro-frente__hecha, :root:root [data-carrusel] > * { border-radius: 18px; }
:root:root .libreria__tapa { box-shadow: 0 10px 18px -10px rgb(0 0 0 / .32); }
:root:root .repisa__libro { box-shadow: 0 10px 16px -10px rgb(0 0 0 / .32); }
:root:root .lomo { border-radius: 8px; }

/* ═══ Marca JUSTO v1.0 (spec de marca, aprobada el 13-nov-2026) ═══
   Dos líneas pegadas y del mismo ancho: «JUSTO» en Noto Serif Display Bold con las letras juntas, y «LEY DE MÉXICO» en
   Noto Serif Bold con el orden de la bandera. Claro: JUSTO negro, LEY verde, DE blanco con contorno negro, MÉXICO rojo.
   Oscuro: JUSTO blanco, LEY verde claro, DE blanco sin contorno, MÉXICO rojo claro. --t es el tamaño de JUSTO; las medidas
   salen del PNG aprobado: JUSTO mide 3.74 veces su altura y el hueco, un tercio. La línea 2 dice «Leyes de México» (pedido de
   Arturo del 14-nov: «Leyes» en plural); como es más larga que «LEY DE MÉXICO» del PNG, va a .282 para medir lo mismo que JUSTO. */
.justo-marca { --t: 40px; --justo: #111; --ley: #006847; --de: #fff; --de-borde: #111; --mx: #ce1126; display: grid; width: max-content; }
.justo-marca b { display: block; font: 700 var(--t)/.8 "Noto Serif Display JUSTO", "Noto Serif Display", Georgia, serif; letter-spacing: -.12em; padding-right: .12em; color: var(--justo); text-transform: uppercase; text-box: trim-both cap alphabetic; }
.justo-marca small { display: block; contain: inline-size; margin: calc(var(--t) * .33) 0 0; font: 700 calc(var(--t) * var(--l2, .282))/.8 "Noto Serif JUSTO", "Noto Serif", Georgia, serif; letter-spacing: 0; text-transform: uppercase; text-align: justify; text-align-last: justify; white-space: nowrap; text-box: trim-both cap alphabetic; }
.justo-ley { color: var(--ley); }
.justo-de { color: var(--de); -webkit-text-stroke: max(1px, .07em) var(--de-borde); paint-order: stroke fill; }
.justo-mx { color: var(--mx); }
:root[data-tema="oscuro"] .justo-marca { --justo: #fff; --ley: #66bb6a; --de: #fff; --de-borde: transparent; --mx: #ef5350; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .justo-marca { --justo: #fff; --ley: #66bb6a; --de: #fff; --de-borde: transparent; --mx: #ef5350; } }
/* El arranque sigue el tema de la app: negro en oscuro y blanco en claro. */
:root[data-tema="claro"] .arranque .justo-marca { --justo: #111; --ley: #006847; --de: #fff; --de-borde: #111; --mx: #ce1126; }
@media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) .arranque .justo-marca { --justo: #111; --ley: #006847; --de: #fff; --de-borde: #111; --mx: #ce1126; } }

/* En la isla superior, el bloque es tan alto como el buscador (40 px en el celular, 52 en escritorio). */
.barra .logo > .justo-marca { --t: 32.1px; }
/* La regla vieja de la isla (`:root[data-barra-isla] .barra .logo small`: .5rem y .22em) ganaba por especificidad y la
   segunda línea se salía bajo el buscador; aquí manda la medida de la marca. */
:root:root .barra .logo > .justo-marca small { margin-top: calc(var(--t) * .33); font-size: calc(var(--t) * var(--l2, .282)); letter-spacing: 0; }
@media (min-width: 961px) { .barra .logo > .justo-marca { --t: 41.75px; } }
/* Arranque: el wordmark grande sustituye al libro; las letras de JUSTO llegan separadas y se pegan. */
.arranque .justo-marca { --t: 64px; margin-bottom: 4px; }
.arranque .justo-marca b { font-size: var(--t); font-weight: 700; font-family: "Noto Serif Display JUSTO", "Noto Serif Display", Georgia, serif; letter-spacing: -.12em; animation: intro-letras 1.1s var(--suave) .2s both; }
.arranque .justo-marca small { padding: 0; font-family: "Noto Serif JUSTO", "Noto Serif", Georgia, serif; font-size: calc(var(--t) * var(--l2, .282)); font-weight: 700; letter-spacing: 0; color: inherit; }
/* Bienvenida: el wordmark al centro, arriba de las caras (antes decía «leyes»). */
.bienvenida__marca { display: grid; justify-items: center; }
.bienvenida__marca .justo-marca { --t: clamp(64px, 22vw, 112px); letter-spacing: normal; }

/* ——— Panel de cristal «Explora por categoría» (Leyes y Libros; paquete panel + repisa, aprobado por Arturo el 13-nov) ———
   Una sola fila que se desliza con el dedo y encaja tarjeta por tarjeta, sobre un panel verde de Justo con un brillo
   dorado. Cada tarjeta es una píldora de vidrio esmerilado: el ícono (dorado) arriba, la letra grande con el color de la
   categoría y el nombre abajo, en chico. El ícono es el mismo que lleva el sello de las portadas de esa categoría. */
.libreria__cats {
  display: flex; gap: 8px; margin: 0; padding: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 10px; scrollbar-width: none; border-radius: 32px;
  background:
    radial-gradient(70% 140% at 92% 0%, rgb(233 196 106 / .28), transparent 62%),
    radial-gradient(60% 120% at 6% 100%, rgb(79 199 150 / .22), transparent 65%),
    linear-gradient(135deg, #12573f, #0b3b2b 58%, #082c20);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(233 196 106 / .26), 0 16px 30px -20px rgb(6 40 28 / .75);
}
.libreria__cats > .libreria__cat:last-child { scroll-snap-align: end; }
.libreria__cat {
  flex: none; display: grid; justify-items: center; align-content: center; gap: 2px; width: 76px; min-height: 100px;
  padding: 11px 5px 15px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; scroll-snap-align: start;
  background: linear-gradient(165deg, rgb(255 255 255 / .22), rgb(255 255 255 / .06) 52%, rgb(255 255 255 / .12)), color-mix(in oklab, var(--c) 22%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), inset 0 -10px 18px -14px rgb(255 255 255 / .3), 0 8px 16px -10px rgb(0 0 0 / .55);
  color: #fff; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, border-color .2s, box-shadow .2s, background-color .2s;
}
.libreria__cat > svg { width: 18px; height: 18px; stroke-width: 2; color: var(--oro, #e9c46a); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }
.libreria__cat > b { font: 700 1.62rem/1.02 "Playfair Display", Georgia, serif; color: color-mix(in oklab, var(--c) 58%, #fff); text-shadow: 0 1px 10px color-mix(in oklab, var(--c) 70%, transparent); }
.libreria__cat > small { display: -webkit-box; max-width: 100%; overflow: hidden; font: 600 .69rem/1.12 var(--sans); letter-spacing: -.005em; text-align: center; color: rgb(255 255 255 / .92); text-wrap: balance; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.libreria__cat[aria-pressed="true"] { border-color: var(--oro, #e9c46a); background-color: color-mix(in oklab, var(--c) 40%, transparent); box-shadow: inset 0 0 0 1px var(--oro, #e9c46a), inset 0 1px 0 rgb(255 255 255 / .45), 0 0 18px -4px rgb(233 196 106 / .6); }
.libreria__cat:active { transform: scale(.95); }
.libreria__cat:focus-visible { outline: 2px solid var(--oro, #e9c46a); outline-offset: 2px; }
.libreria__cat--orgullo > b { background: linear-gradient(180deg, #ff6b6b, #ffa53d, #ffe14d, #4fd27a, #6e9bff, #c77ae6); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .libreria__cat { transition: none; } }
@media (min-width: 761px) { .libreria__cats { padding: 12px; gap: 10px; } }

/* Panel en blanco y negro (pedido de Arturo, 14-nov): sin el fondo verde ni el dorado, solo las píldoras alargadas, como
   el resto de la app. Las tintas se invierten solas en el tema oscuro; la categoría elegida va invertida (negro sobre
   blanco o al revés). */
.libreria__cats { margin: 0 -16px; padding: 2px 16px 8px; scroll-padding-inline: 16px; border-radius: 0; background: none; box-shadow: none; }
.libreria__cat {
  border: 1px solid color-mix(in oklab, var(--ink-950) 14%, transparent);
  background: color-mix(in oklab, var(--ink-950) 5%, var(--papel)); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 6px 14px -12px rgb(0 0 0 / .45); color: var(--ink-950);
}
.libreria__cat > svg { color: var(--ink-950); filter: none; }
.libreria__cat > b, .libreria__cat--orgullo > b { background: none; color: var(--ink-950); text-shadow: none; }
.libreria__cat > small { color: var(--ink-700); }
.libreria__cat[aria-pressed="true"] { border-color: var(--ink-950); background: var(--ink-950); box-shadow: 0 8px 16px -10px rgb(0 0 0 / .5); }
.libreria__cat[aria-pressed="true"] > svg, .libreria__cat[aria-pressed="true"] > b, .libreria__cat[aria-pressed="true"] > small { color: var(--papel); }
.libreria__cat:focus-visible { outline-color: var(--ink-950); }
@media (min-width: 761px) { .libreria__cats { margin: 0; padding: 2px 0 8px; gap: 10px; } }
/* Cada píldora con un tono suave de su sección (pedido de Arturo, 14-nov): fondo apenas teñido, letra e ícono en el color
   de la sección; la elegida, un tono más lleno y con el filo de su color. */
.libreria__cat { border-color: color-mix(in oklab, var(--c, var(--ink-950)) 28%, transparent); background: color-mix(in oklab, var(--c, var(--ink-950)) 13%, var(--papel)); }
.libreria__cat > svg, .libreria__cat > b { color: color-mix(in oklab, var(--c, var(--ink-950)) 80%, var(--ink-950)); }
.libreria__cat[aria-pressed="true"] { border-color: color-mix(in oklab, var(--c, var(--ink-950)) 80%, var(--ink-950)); background: color-mix(in oklab, var(--c, var(--ink-950)) 30%, var(--papel)); box-shadow: 0 8px 16px -10px rgb(0 0 0 / .45); }
.libreria__cat[aria-pressed="true"] > svg, .libreria__cat[aria-pressed="true"] > b { color: color-mix(in oklab, var(--c, var(--ink-950)) 80%, var(--ink-950)); }
.libreria__cat[aria-pressed="true"] > small { color: var(--ink-950); }
.libreria__cat--orgullo { background: linear-gradient(180deg, rgb(228 3 3 / .14), rgb(255 140 0 / .14), rgb(255 237 0 / .16), rgb(0 128 38 / .14), rgb(36 64 142 / .14), rgb(115 41 130 / .14)), var(--papel); }

/* Etiqueta de cada repisa: solo el nombre, grande y con el color de su sección; sin pastilla, sin filo y sin ícono.
   El color se mezcla con la tinta para leerse en los dos temas (más oscuro en claro, más claro en oscuro). */
h3.repisa__tabla {
  background: none; box-shadow: none; border-radius: 0; padding-left: 16px;
  color: color-mix(in oklab, var(--c) 80%, var(--ink-950));
  font: 700 1.5rem/1.05 "Oswald", "Arial Narrow", var(--rotulo), sans-serif; letter-spacing: .03em; text-transform: uppercase;
}
h3.repisa__tabla > svg { display: none; }
.repisa--orgullo h3.repisa__tabla { background: none; }
.repisa--orgullo h3.repisa__tabla > span { background: linear-gradient(90deg, #e40303, #ff8c00, #d4b800, #008026, #24408e, #732982); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Repisa: libros un poco más grandes en el carrusel del teléfono y las orillas que se desvanecen. */
.repisa__libro { position: relative; }
@media (max-width: 760px) {
  .repisa__libros[data-carrusel] { padding-top: 20px; padding-bottom: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .repisa__libros[data-carrusel] > .repisa__libro { width: 112px; height: 166px; }
}

/* Sello de la portada: la letra grande con el color de la categoría y su ícono, igual que la tarjeta del panel. Pastilla
   clara en la esquina de abajo; no tapa el título (va arriba) ni la figura (va al centro). Sin backdrop-filter: hay cientos
   de portadas (cada repisa del carrusel se repite tres veces) y el desenfoque de fondo en cada una vuelve lenta la página. */
.tapa-sello {
  position: absolute; right: 6px; bottom: 6px; z-index: 3; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px 3px 7px; border-radius: 999px; pointer-events: none;
  background: rgb(255 255 255 / .88);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), 0 3px 8px -3px rgb(0 0 0 / .35);
  color: color-mix(in oklab, var(--c, #3a3f4b) 86%, #000);
}
.tapa-sello svg { width: 13px; height: 13px; stroke-width: 2.3; }
.tapa-sello b { font: 800 1.3rem/1 "Playfair Display", Georgia, serif; }
.repisa--orgullo .tapa-sello b { background: linear-gradient(180deg, #e40303, #ff8c00, #e0c400, #008026, #24408e, #732982); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* En las portadas hechas por la app el título va abajo: ahí el sello sube a la esquina de arriba. */
.repisa__libro--hecha > .tapa-sello { top: 6px; bottom: auto; }
/* Juicios (Casos, Fase 1): pestaña de Abogados con solo el ícono, lista de casos y la hoja de cada caso. */
.barra__fila .barra__tab-icono { flex: 0 0 auto; width: 44px; min-width: 44px; padding: 0; position: relative; }
.barra__fila .barra__tab-icono svg { width: 18px; height: 18px; }
.barra__tab-icono[data-pendiente]::after, .barra__campana[data-pendiente]::before { content: ""; position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px var(--papel); }
.barra__campana[data-pendiente]::before { top: 8px; left: 8px; right: auto; }
.barra__fila .barra__tab-icono span { display: none; }
@media (max-width: 520px) { .barra__fila [data-ab-vista] { flex: 1 1 0; justify-content: center; padding: 0; } .barra__fila [data-ab-vista] span { display: none; } .barra__fila [data-ab-vista] svg { width: 18px; height: 18px; } }
.juicios__cabeza { margin: 8px 0 12px; }
.juicios__cabeza h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 6vw, 1.9rem); text-transform: uppercase; line-height: 1.05; }
.juicios__cabeza p { margin: 6px 0 0; color: var(--ink-500); font-size: .9rem; line-height: 1.45; }
.juicios__filtros { display: flex; gap: 8px; margin: 0 -16px 8px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.juicios__filtros::-webkit-scrollbar { display: none; }
.juicios__filtros .chip { flex: none; scroll-snap-align: start; min-height: 38px; border-radius: 18px; }
.juicios__lista { display: grid; gap: 12px; margin-top: 8px; }
.caso { padding: 16px; border-radius: 18px; background: var(--papel); border: 1px solid var(--ink-150); box-shadow: 0 10px 18px -14px rgb(0 0 0 / .3); }
.caso--movido { border-color: #ffcc00; box-shadow: 0 0 0 1px #ffcc00, 0 10px 18px -14px rgb(0 0 0 / .3); }
.caso__ante { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font: 800 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--oro, #b8860b); }
.caso__estado { padding: 4px 8px; border-radius: 999px; letter-spacing: .04em; background: rgb(127 127 127 / .14); color: var(--ink-700); }
.caso__estado--resuelto { background: color-mix(in oklab, #006847 16%, transparent); color: #006847; }
.caso__estado--en-curso { background: color-mix(in oklab, #ff9500 18%, transparent); color: #b45309; }
.caso__nuevo { display: inline-flex; align-items: center; gap: 4px; color: #ff3b30; }
.caso__nuevo svg { width: 13px; height: 13px; }
.caso__titulo { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.caso__titulo button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; }
.caso__quien { margin: 6px 0 0; color: var(--ink-500); font-size: .8rem; }
.caso__resumen { margin: 10px 0 0; font-size: .95rem; line-height: 1.5; color: var(--ink-800, var(--ink-950)); }
.caso__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.caso__acciones button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--ink-150); background: none; color: var(--ink-950); font-size: .86rem; font-weight: 700; }
.caso__acciones svg { width: 16px; height: 16px; }
.caso__ver { background: var(--ink-950) !important; color: var(--papel) !important; border-color: var(--ink-950) !important; }
.caso__seguir[aria-pressed="true"] { border-color: #006847; color: #006847; }
.caso-hoja__titulo { margin: 0 0 12px; font-size: clamp(1.3rem, 5.5vw, 1.6rem); line-height: 1.2; }
.caso-hoja__ficha { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 18px; background: rgb(127 127 127 / .08); }
.caso-hoja__ficha div { display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; }
.caso-hoja__ficha dt { color: var(--ink-500); font-size: .8rem; }
.caso-hoja__ficha dd { margin: 0; font-size: .88rem; font-weight: 600; }
.caso-hoja__veredicto { font-weight: 700; }
.caso-hoja__parati { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border-radius: 18px; background: color-mix(in oklab, #006847 10%, transparent); }
.caso-hoja__parati svg { width: 20px; height: 20px; color: #006847; margin-top: 2px; }
.caso-hoja__parati p { margin: 0; line-height: 1.5; }
.caso-hoja__tiempo { list-style: none; margin: 8px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--ink-150); }
.caso-hoja__tiempo li { position: relative; padding: 0 0 18px 12px; }
.caso-hoja__tiempo li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--oro, #b8860b); box-shadow: 0 0 0 3px var(--papel); }
.caso-hoja__tiempo time { font: 800 .74rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.caso-hoja__tiempo p { margin: 6px 0; line-height: 1.45; }
.caso-hoja__tiempo a { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 600; }
.caso-hoja__tiempo a svg { width: 13px; height: 13px; }
.avisos-tarjeta__casos { display: grid; gap: 2px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgb(127 127 127 / .2); }
.avisos-tarjeta__casos button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 16px; background: color-mix(in oklab, #ffcc00 16%, transparent); color: inherit; text-align: left; }
.avisos-tarjeta__casos svg { width: 18px; height: 18px; color: #b45309; }
.avisos-tarjeta__casos b { display: block; font: 700 .86rem/1.25 var(--sans); }
.avisos-tarjeta__casos small { display: block; margin-top: 2px; font: 500 .74rem/1.3 var(--sans); color: var(--ink-500); }
.lectura .caso__ante, .lectura .caso__ante span { font: 800 .7rem/1 var(--sans); letter-spacing: .1em; text-align: left; }
.lectura .caso__estado { letter-spacing: .04em; }
:root[data-tema="oscuro"] .caso__estado--resuelto { background: rgb(102 187 106 / .16); color: #66bb6a; }
:root[data-tema="oscuro"] .caso__estado--en-curso { color: #ffb340; }
:root[data-tema="oscuro"] .caso__seguir[aria-pressed="true"] { border-color: #66bb6a; color: #66bb6a; }
:root[data-tema="oscuro"] .caso-hoja__parati { background: rgb(102 187 106 / .12); }
:root[data-tema="oscuro"] .caso-hoja__parati svg { color: #66bb6a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .caso__estado--resuelto { background: rgb(102 187 106 / .16); color: #66bb6a; }
  :root:not([data-tema="claro"]) .caso__estado--en-curso { color: #ffb340; }
  :root:not([data-tema="claro"]) .caso__seguir[aria-pressed="true"] { border-color: #66bb6a; color: #66bb6a; }
  :root:not([data-tema="claro"]) .caso-hoja__parati { background: rgb(102 187 106 / .12); }
  :root:not([data-tema="claro"]) .caso-hoja__parati svg { color: #66bb6a; }
}

/* Top 10 (en lugar de «Para empezar»): el mismo plegable y carrusel que Favoritos; cada libro lleva su lugar en número
   normal, grande, del lado izquierdo, a la altura de la figura (no tapa el título ni la figura del centro). */
.top10 { margin-top: 0; }
:root:root .portada-ley > .portada-ley__rango {
  position: absolute; display: block; margin: 0; width: auto; height: auto; left: 10px; bottom: 30px; z-index: 3; pointer-events: none;
  font: 800 2.7rem/.9 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums;
  color: color-mix(in oklab, var(--t, var(--ink-950)) 88%, transparent);
}

/* Botones de la ley solo con ícono (14-nov): una cápsula de cristal con los íconos repartidos, trazo fino y Favoritos en oro
   cuando está puesta. Mismo trato en la cabecera y en la portada grande. */
:root:root .ley-cabeza__botones, :root:root .portada-hero__botones { display: flex; justify-content: space-between; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin: 18px 0 0; padding: 6px; border-radius: 999px;
  background: var(--cristal); box-shadow: inset 0 0 0 1px var(--cristal-borde), var(--cristal-luz), 0 10px 28px -18px rgb(0 0 0 / .5); }
:root:root .ley-cabeza__botones .ley-ico, :root:root .portada-hero__botones .ley-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; min-height: 0; margin: 0; padding: 0; border-radius: 999px;
  background: transparent; box-shadow: none; color: var(--ink-950); transition: background .2s, transform .15s var(--ios, ease); }
:root:root .ley-ico svg { width: 21px; height: 21px; stroke-width: 1.7; color: inherit; }
:root:root .ley-ico:hover { background: color-mix(in oklab, var(--ink-950) 7%, transparent); }
:root:root .ley-ico:active { transform: scale(.92); }
:root:root .ley-ico[data-favorita][aria-pressed="true"] { background: var(--oro-metal); color: #2a1e08; box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 6px 14px -8px rgb(150 110 30 / .8); }
:root:root .ley-ico + .ley-ico[data-favorita] { margin-left: 6px; }
:root:root .portada-hero__botones { background: color-mix(in oklab, var(--t, #fff) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--t, #fff) 22%, transparent); }
:root:root .portada-hero__botones .ley-ico { color: var(--t, inherit); }
.ficha-vigencia:empty { display: none; }

/* Explora por categoría (Arturo, 14-nov): sin letra y sin círculo; solo el ícono, más grande y del color de su sección,
   con su palabra abajo. La elegida se marca con el nombre en negrita y una rayita de su color. */
:root:root .libreria__cat { width: 74px; min-height: 0; gap: 6px; padding: 6px 2px 8px; border: 0; border-radius: 14px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root:root .libreria__cat > b { display: none; }
:root:root .libreria__cat > svg { width: 30px; height: 30px; stroke-width: 1.7; filter: none; color: color-mix(in oklab, var(--c, var(--ink-950)) 82%, var(--ink-950)); transition: transform .2s var(--ios, ease); }
:root:root .libreria__cat > small { font-size: .74rem; font-weight: 500; color: var(--ink-700); }
:root:root .libreria__cat[aria-pressed="true"] { background: none; box-shadow: none; }
:root:root .libreria__cat[aria-pressed="true"] > svg { transform: scale(1.1); }
:root:root .libreria__cat[aria-pressed="true"] > small { color: var(--ink-950); font-weight: 700; }
:root:root .libreria__cat[aria-pressed="true"]::after { content: ""; justify-self: center; width: 18px; height: 3px; margin-top: -2px; border-radius: 3px; background: color-mix(in oklab, var(--c, var(--ink-950)) 82%, var(--ink-950)); }
:root:root .libreria__cat--orgullo { background: none; }
:root:root .libreria__cat--orgullo > svg { color: #c2185b; }
:root:root .libreria__cat--orgullo[aria-pressed="true"]::after { background: linear-gradient(90deg, #e40303, #ff8c00, #e0c400, #008026, #24408e, #732982); }

/* Sello de la portada: solo el ícono de la sección, sin la letra (Arturo, 14-nov). */
:root:root .tapa-sello { padding: 6px; gap: 0; }
:root:root .tapa-sello b { display: none; }
:root:root .tapa-sello svg { width: 15px; height: 15px; stroke-width: 2.1; }

/* El carrusel crece con el ancho de la fila (app.js · girarCarrusel pone --f y --extra) para ocupar los lados. */
@media (max-width: 760px) {
  .repisa__libros[data-carrusel] { padding-top: calc(16px + var(--extra, 0px)); padding-bottom: calc(18px + var(--extra, 0px)); }
  .bib-mesa .portadas[data-carrusel] { padding-top: calc(12px + var(--extra, 0px)); padding-bottom: calc(22px + var(--extra, 0px)); }
}

/* Defiéndete dentro de «¿Qué te pasó?»: el escudo naranja a la derecha (Arturo, 14-nov). */
.habla-justo-caja { position: relative; margin: 0 0 14px; }
.habla-justo-caja > .habla-justo { margin: 0; padding-right: 80px; }
.habla-justo__defiende { position: absolute; right: 14px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 17px;
  background: linear-gradient(160deg, #ffb340, #ff8a00); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(0 0 0 / .15), 0 10px 20px -10px rgb(255 138 0 / .8);
  transition: transform .15s var(--ios, ease); -webkit-tap-highlight-color: transparent; }
.habla-justo__defiende:active { transform: scale(.92); }
.habla-justo__defiende svg { width: 27px; height: 27px; stroke-width: 2; }
.defiende-hoja__nota { margin: 0 0 12px; color: var(--ink-500); }
.defiende-hoja { display: grid; gap: 8px; }
.defiende-hoja__grupo { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--cristal); box-shadow: inset 0 0 0 1px var(--cristal-borde); color: var(--ink-950); font: 600 1rem/1.2 var(--sans); text-align: left; }
.defiende-hoja__grupo > svg:first-child { width: 22px; height: 22px; color: #ff8a00; }
.defiende-hoja__grupo > span { flex: 1; }
.defiende-hoja__grupo > svg:last-child { width: 18px; height: 18px; color: var(--ink-500); }

/* Renglón de la isla de arriba sin fondo: solo el texto; la vista elegida en negrita y con su color pleno. */
:root:root .barra__fila.segmento { background: none; box-shadow: none; }
:root:root .barra__fila.segmento > button { background: none; box-shadow: none; color: var(--ink-500); }
:root:root .barra__fila.segmento > button[aria-pressed="true"] { background: none; box-shadow: none; color: var(--ink-950); font-weight: 700; }

/* Estrella de Favoritos y trofeo del Top 10 en dorado. */
:root:root [data-plegable="favoritos"] > summary > span > svg, :root:root [data-plegable="top10"] > summary > span > svg { color: var(--oro-texto, var(--oro, #c99a2e)); }

/* Juicios, paquete Fase 1 (14-nov): panel de 9 materias (mismo trazo que «Explora por categoría»), filtros como
   píldoras desplegables y la tarjeta de los casos de empresas. */
.juicios__panel { margin-bottom: 6px; }
.jz-filtros { align-items: center; scroll-padding-inline: 16px; }
.jz-filtro { position: relative; flex: none; display: inline-flex; align-items: center; scroll-snap-align: start; }
.jz-filtro select { appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 32px 0 14px; border: 1px solid color-mix(in oklab, var(--ink-950) 16%, transparent); border-radius: 999px;
  background: var(--cristal); color: var(--ink-950); font: 600 .86rem/1 var(--sans); cursor: pointer; }
.jz-filtro > svg { position: absolute; right: 11px; width: 15px; height: 15px; pointer-events: none; color: var(--ink-500); }
.jz-filtro--on select { border-color: var(--ink-950); background: var(--ink-950); color: var(--papel); }
.jz-filtro--on > svg { color: var(--papel); }
.jz-limpiar { flex: none; min-height: 40px; }
.caso__estado--firme { background: color-mix(in oklab, #b8860b 20%, transparent); color: #8a6508; }
.caso__estado--ejecucion { background: color-mix(in oklab, #ff3b30 14%, transparent); color: #c0392b; }
.caso__estado--suspendido, .caso__estado--sobreseido, .caso__estado--desistido, .caso__estado--desechado, .caso__estado--archivado { background: rgb(127 127 127 / .16); color: var(--ink-700); }
:root[data-tema="oscuro"] .caso__estado--firme { color: #dcbb6c; }
:root[data-tema="oscuro"] .caso__estado--ejecucion { color: #ff8a80; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .caso__estado--firme { color: #dcbb6c; } :root:not([data-tema="claro"]) .caso__estado--ejecucion { color: #ff8a80; } }
.caso__empresas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.caso__empresas span { padding: 4px 9px; border-radius: 999px; background: color-mix(in oklab, var(--ink-950) 7%, transparent); font: 600 .74rem/1.2 var(--sans); color: var(--ink-800, var(--ink-950)); }
.caso__datos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; }
.caso__datos div { min-width: 0; }
.caso__datos dt { font: 700 .62rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.caso__datos dd { margin: 3px 0 0; font: 700 .98rem/1.25 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-950); }
.caso__datos dd small { display: block; margin-top: 2px; font-weight: 500; font-size: .74rem; color: var(--ink-500); }
.caso__datos .caso__exp { flex-basis: 100%; }
.caso__datos .caso__exp dd { font-size: .8rem; font-weight: 500; line-height: 1.4; color: var(--ink-700); }
.caso__importa { margin: 8px 0 0; font-size: .92rem; line-height: 1.5; color: var(--ink-700); }
.caso__nota { display: flex; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--ink-950) 6%, transparent); font-size: .82rem; line-height: 1.4; color: var(--ink-700); }
.caso__nota svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.caso__fuente { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 18px; background: var(--ink-950); color: var(--papel); font: 600 .86rem/1 var(--sans); text-decoration: none; }
.caso__fuente svg { width: 16px; height: 16px; }
.caso__fuente--prensa { background: none; color: var(--ink-950); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink-950) 25%, transparent); }
.caso__fuente--otra { background: none; color: var(--ink-700); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink-950) 14%, transparent); }
.caso__origen { margin: 8px 0 0; font-size: .74rem; color: var(--ink-500); }

/* Título de Leyes: «LEYES DE MÉXICO» como la segunda línea del logo (Noto Serif, tricolor en el orden de la bandera). */
.justo-marca.ala__lmx { display: inline; width: auto; font: 700 clamp(1.7rem, 8.4vw, 2.5rem)/1.05 "Noto Serif JUSTO", "Noto Serif", Georgia, serif; letter-spacing: .01em; text-transform: uppercase; }
.justo-marca.ala__lmx .justo-de { -webkit-text-stroke-width: max(1px, .045em); }

/* Título «Leyes de México» centrado. */
.ala__cabeza:has(.ala__lmx), :root:root .ala__cabeza:has(.ala__lmx) h3 { text-align: center; }
/* Categorías: todas en gris; solo la elegida lleva su color. */
:root:root .libreria__cat > svg, :root:root .libreria__cat--orgullo > svg { color: var(--ink-500); }
:root:root .libreria__cat[aria-pressed="true"] > svg { color: color-mix(in oklab, var(--c, var(--ink-950)) 82%, var(--ink-950)); }
:root:root .libreria__cat--orgullo[aria-pressed="true"] > svg { color: #c2185b; }
/* «Te escucho…» con una onda de audio que se mueve mientras espera tu voz. */
.habla-justo__texto--onda { display: grid; flex: 1; gap: 2px; justify-items: stretch; }
.habla-justo__texto--onda > small { justify-self: center; font: 500 .78rem/1.2 var(--sans); letter-spacing: .02em; opacity: .55; }
.habla-onda { display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 44px; min-width: 0; overflow: hidden; }
.habla-onda i { flex: 1 1 0; min-width: 2px; max-width: 4px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #4cd964, #1f9d47); transform: scaleY(var(--a, .4)); transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .habla-onda i { animation: habla-onda var(--d, 1s) ease-in-out var(--r, 0s) infinite alternate; }
}
@keyframes habla-onda { from { transform: scaleY(calc(var(--a, .4) * .3)); } to { transform: scaleY(var(--a, .4)); } }

/* «Todas» y los íconos principales sin color propio: dorado. */
:root:root .libreria__cat--oro[aria-pressed="true"] > svg { color: var(--oro-icono); }
:root:root .libreria__cat--oro[aria-pressed="true"]::after { background: var(--oro-icono); }
/* Isla de arriba: solo texto; el lugar con ícono y texto; la campana azul, roja si hay avisos pendientes. */
:root:root .barra__fila [data-seccion-bib] { flex: 1 0 auto; width: auto; min-width: auto; padding: 0 8px; }
:root:root .barra__fila [data-seccion-bib] span { overflow: visible; text-overflow: clip; max-width: none; }
:root:root .barra__fila [data-ab-vista] { flex: 1 1 0; min-width: 40px; }
:root:root .barra__fila.segmento > [data-ab-vista][aria-pressed="true"] { color: var(--oro-icono); }
:root:root .barra__fila.segmento > .barra__donde span { display: inline; }
:root:root .barra__fila [data-seccion-bib] span { display: inline; white-space: nowrap; font-size: .86rem; }
:root:root .barra__campana, :root:root .barra__fila.segmento > .barra__campana { color: #0a84ff; }
:root:root .barra__campana[data-pendiente], :root:root .barra__fila.segmento > .barra__campana[data-pendiente] { color: #ff3b30; }
:root:root .barra__campana[data-pendiente]::before { content: none; }

/* Favoritos y Top 10 en un solo botón partido en dos; los carruseles se abren debajo, sin su propia barra. */
.mesa-dos { display: flex; align-items: stretch; margin: 0 0 12px; background: none; }
.mesa-dos__b { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; padding: 0 12px; border: 0; background: none; color: var(--ink-800); font: 700 .98rem/1 var(--sans); -webkit-tap-highlight-color: transparent; transition: background .2s; }
.mesa-dos__b > svg:first-child { width: 19px; height: 19px; flex: none; color: var(--oro-icono); }
.mesa-dos__b > small { padding: 2px 7px; border-radius: 999px; background: color-mix(in oklab, var(--ink-950) 8%, transparent); color: var(--ink-600); font: 600 .74rem/1.2 var(--sans); }
.mesa-dos__b > svg:last-child { width: 15px; height: 15px; flex: none; color: var(--ink-500); transition: transform .25s var(--ios, ease); }
.mesa-dos__b[aria-expanded="true"] { background: none; color: var(--ink-950); }
.mesa-dos__b[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.mesa-dos__b:active { background: none; opacity: .7; }
.mesa-dos__sep { flex: none; width: 1px; margin: 12px 0; background: color-mix(in oklab, var(--ink-950) 14%, transparent); }
:root:root .plegable[data-plegable="favoritos"] > summary, :root:root .plegable[data-plegable="top10"] > summary { display: none; }
:root:root .plegable[data-plegable="favoritos"]:not([open]), :root:root .plegable[data-plegable="top10"]:not([open]) { display: none; }
/* Isla: solo «JUSTO». */
.justo-marca--sola > small { display: none; }
/* Dorado para íconos: más vivo que el del texto, con contraste suficiente en claro y en oscuro. */
:root { --oro-icono: #b8892c; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --oro-icono: #e0bd62; } }
:root[data-tema="oscuro"] { --oro-icono: #e0bd62; }
/* Sin carrusel abierto, el contenedor del Top 10 no deja hueco. */
.bib-mesa:has(> .mesa-dos) { margin-bottom: 8px; }
.bib-mesa.top10:not(:has(details[open])) { display: none; }

/* Portadas con contexto: una escena por tema (img/escenas) o un grupo de personas. Las repisas fuera de la
   pantalla no se calculan (content-visibility), así las 1400 portadas no frenan el cambio de tema ni el desplazamiento. */
.repisa { content-visibility: auto; contain-intrinsic-size: auto 322px; }
:root:not([data-libros]) .portada-ley__escena--grupo img.esc-p { bottom: calc(7px + var(--piso, 0%)); transform: scale(var(--k, 1)); }
:root:not([data-libros]) .portada-ley__escena--grupo img.esc-p--fondo { filter: saturate(.55) brightness(1.3) contrast(.85); }
.esc-suelo { position: absolute; left: 6%; right: 6%; bottom: 3px; height: 9px; border-radius: 50%; background: radial-gradient(closest-side, rgb(17 17 17 / .14), transparent); }
:root:not([data-libros]) .portada-ley__escena--ctx img.esc-ctx { left: 50%; bottom: 2px; width: 104%; height: auto; max-height: 98%; translate: -50% 0; scale: var(--espejo, 1) 1; object-fit: contain; object-position: 50% 100%; }
/* Comunidad fusionada con Perfiles (14-nov-2026): fila de fotos de perfil, entrada compacta y posts de la comunidad con el
   formato de Publicaciones. */
.ab-perfiles { margin-bottom: 10px; }
.ab-historias__yo--oficial { background: #17694a; }
.com-entrar { margin: 0 0 14px; }
.post--com .post__titular--com { font-size: 1.02rem; line-height: 1.38; font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
.post--com .post__marco--com { padding: 0 14px; }
.post--com .post__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.com-umbral { margin-bottom: 14px; }
.com-umbral svg, .com-umbral-nota svg { width: 16px; height: 16px; color: var(--oro-icono, #b8892c); }
.com-umbral-nota { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 6px; padding: 12px 14px; border-radius: 14px; background: color-mix(in oklab, var(--oro-icono, #b8892c) 10%, transparent); font-size: .9rem; line-height: 1.4; }
/* Panel de Justo sin fondo negro (pedido de Arturo, 14-nov-2026): la onda, el avatar y el escudo se quedan igual. */
:root .habla-justo { background: transparent; color: var(--ink-900, #111); box-shadow: none; padding-left: 0; }
/* Panel de Justo (pedido de Arturo, 14-nov-2026): el avatar al centro y la onda verde solo en el tramo de en medio; el
   escudo se queda a la derecha y «Te escucho…» debajo del avatar. */
:root .habla-justo-caja > .habla-justo { position: relative; justify-content: center; padding: 10px 0 8px; }
:root .habla-justo .habla-justo__texto--onda { flex: none; width: 52%; gap: 14px; }
:root .habla-justo .habla-justo__texto--onda > small { position: relative; z-index: 2; }
:root .habla-justo .habla-justo__mic { position: absolute; z-index: 1; left: 50%; top: 32px; translate: -50% -50%; box-shadow: 0 0 0 7px var(--papel); animation: none; }
/* Favoritos y Top 10 sin separador y pegados a los libros. */
:root .mesa-dos { margin: 0; }
:root .bib-mesa:has(> .mesa-dos) { margin-bottom: 0; }
:root .bib-mesa.top10 + .repisa { margin-top: 4px; }
/* Título de cada repisa arriba de sus libros y centrado; las flechas, a la derecha en la misma línea. */
:root .repisa { position: relative; }
:root .repisa__fila { display: flex; flex-direction: column; }
:root h3.repisa__tabla { order: -1; justify-content: center; margin: 0 16px; padding: 0 84px; min-height: 40px; text-align: center; }
:root .repisa__cabeza { order: 0; position: absolute; top: 0; right: 10px; z-index: 2; height: 40px; margin: 0; }
:root .repisa__cabeza small { display: none; }
@media (max-width: 760px) { :root .repisa__cabeza button { width: 36px; height: 36px; } :root h3.repisa__tabla { padding: 0 76px; } }
:root .habla-justo-caja > .habla-justo__defiende { top: 32px; }
/* Isla de la Biblioteca (Arturo, 14-nov-2026): a la izquierda el lugar arriba y Leyes y Libros abajo, más grandes; a la
   derecha la voz de Justo (su cara al centro de la onda) y el escudo naranja de Defiéndete. La campana sube a la fila de
   arriba, junto a la luna y tu cuenta. */
:root[data-barra-isla] .barra__acciones .barra__campana { display: grid; }
.barra__fila[data-modo="biblioteca"] { align-items: center; gap: 10px; }
:root:root .barra__fila[data-modo="biblioteca"] .isla-bib__lado { flex: 0 0 auto; display: grid; justify-items: start; gap: 2px; min-width: 0; }
:root:root .barra__fila[data-modo="biblioteca"] .barra__donde { flex: none; min-height: 28px; padding: 0 6px; gap: 5px; background: none; box-shadow: none; color: var(--ink-700); font: 600 .9rem/1 var(--sans); }
:root:root .barra__fila[data-modo="biblioteca"] .barra__donde span { display: inline; }
:root:root .barra__fila[data-modo="biblioteca"] .barra__donde svg { width: 16px; height: 16px; }
.isla-bib__tabs { display: flex; gap: 2px; }
:root:root .barra__fila[data-modo="biblioteca"] [data-seccion-bib] { flex: none; min-height: 36px; padding: 0 8px; background: none; box-shadow: none; color: var(--ink-500); }
:root:root .barra__fila[data-modo="biblioteca"] [data-seccion-bib] span { display: inline; font: 600 1.08rem/1 var(--sans); }
:root:root .barra__fila[data-modo="biblioteca"] [data-seccion-bib][aria-pressed="true"] { color: var(--ink-950); }
:root:root .barra__fila[data-modo="biblioteca"] [data-seccion-bib][aria-pressed="true"] span { font-weight: 800; }
.isla-bib__voz { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
:root:root .barra__fila .isla-voz { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 56px; padding: 0; border: 0; background: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.isla-voz .habla-onda { width: 100%; height: 34px; }
.isla-voz__cara { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #1c1c1e; box-shadow: 0 0 0 5px var(--papel); }
.isla-voz__cara > * { width: 100%; height: 100%; }
.isla-voz__cara img { width: 100%; height: 100%; object-fit: cover; }
.isla-voz:active { transform: scale(.97); }
:root:root .barra__fila .isla-voz__escudo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 14px;
  background: linear-gradient(160deg, #ffb340, #ff8a00); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(0 0 0 / .15), 0 8px 16px -8px rgb(255 138 0 / .8); }
:root:root .barra__fila .isla-voz__escudo svg { width: 23px; height: 23px; stroke-width: 2; }
.isla-voz__escudo:active { transform: scale(.92); }
@media (min-width: 961px) { .barra__fila[data-modo="biblioteca"] { align-items: stretch; } .isla-bib__voz { flex: none; } }
/* Título de cada repisa: se toca como su categoría. */
:root h3.repisa__tabla--ir { pointer-events: auto; }
.repisa__tabla--ir > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.repisa__tabla--ir > button > svg { display: none; }
.repisa__tabla--ir > button:active { opacity: .6; }
.repisa--orgullo h3.repisa__tabla--ir > button > span { background: linear-gradient(90deg, #e40303, #ff8c00, #d4b800, #008026, #24408e, #732982); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* La mesa ya va después de la primera repisa. */
:root .bib-mesa--fav { margin: 4px 0 0; }
:root .bib-mesa.top10 + .repisa { margin-top: 18px; }
/* Sin el panel de voz en la página, el título sube junto a la isla. */
:root #leyes .ala:has(.ala__lmx) { margin-top: 6px; }
/* Teléfonos chicos: con la campana arriba, los botones se compactan para que el buscador quepa entero. */
@media (max-width: 400px) {
  :root[data-barra-isla] .barra__acciones { gap: 0; }
  :root[data-barra-isla] .barra .barra__campana, :root[data-barra-isla] .barra .barra__tema { width: 32px; }
  :root[data-barra-isla] .barra .barra__yo { width: 38px; height: 38px; }
  :root[data-barra-isla] .barra__caja { gap: 6px; }
  :root h3.repisa__tabla { padding: 0 68px; font-size: 1.32rem; }
}