/* 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. */

@font-face { font-family: "Inter"; src: url("../fuentes/inter-v20-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fuentes/oswald-v57-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  --ink-950: #0a0a0a; --ink-900: #121212; --ink-800: #1f1f1f; --ink-700: #333; --ink-600: #4d4d4d;
  --ink-500: #6b6b6b; --ink-400: #8f8f8f; --ink-300: #b3b3b3; --ink-200: #d4d4d4; --ink-150: #e4e4e4;
  --ink-100: #ececec; --ink-50: #f6f6f6; --papel: #fff; --fondo: #f7f7f4;
  --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: "Oswald", "Inter", system-ui, sans-serif;
  --sans: "Inter", 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: #f4f4f2; --ink-900: #e6e6e3; --ink-800: #d6d6d2; --ink-700: #bdbdb8; --ink-600: #a3a39e;
    --ink-500: #8b8b86; --ink-400: #6f6f6b; --ink-300: #55554f; --ink-200: #3a3a36; --ink-150: #2c2c29;
    --ink-100: #232320; --ink-50: #1a1a18; --papel: #151513; --fondo: #0c0c0b;
    --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: #f4f4f2; --ink-900: #e6e6e3; --ink-800: #d6d6d2; --ink-700: #bdbdb8; --ink-600: #a3a39e;
  --ink-500: #8b8b86; --ink-400: #6f6f6b; --ink-300: #55554f; --ink-200: #3a3a36; --ink-150: #2c2c29;
  --ink-100: #232320; --ink-50: #1a1a18; --papel: #151513; --fondo: #0c0c0b;
  --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; }
.seccion__titulo { font-family: var(--display); font-weight: 600; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1; margin: 6px 0 0; text-transform: uppercase; }
.seccion__titulo em { font-style: normal; color: var(--marca); }
.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; }
.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: 36px; 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; 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; }
:root[data-tema="oscuro"] .portada { background: #1c1c1a; color: #f4f4f2; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .portada { background: #1c1c1a; color: #f4f4f2; } }
.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 ——— */
.filtros { position: sticky; top: 0; z-index: 5; padding: 10px 0 12px; margin: 0 -16px; padding-inline: 16px; background: linear-gradient(var(--fondo) 75%, transparent); }
.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-art + .fila-art { 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%); }
.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 26px; 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: 999px; 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; white-space: nowrap; }
.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; }

/* ——— LEYES 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; }