/* ===== Titillium Web autoalojada (SIL OFL) ===== */
@font-face { font-family: "Titillium Web"; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/titillium-web-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Titillium Web"; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/titillium-web-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Titillium Web"; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/titillium-web-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Titillium Web"; font-style: normal; font-display: swap; font-weight: 600; src: url(fonts/titillium-web-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Titillium Web"; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/titillium-web-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Titillium Web"; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/titillium-web-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Titillium Web"; font-style: normal; font-display: swap; font-weight: 900; src: url(fonts/titillium-web-latin-ext-900-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Titillium Web"; font-style: normal; font-display: swap; font-weight: 900; src: url(fonts/titillium-web-latin-900-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Sistema visual tomado de tramitecadigital.com (misma familia de marca): azul marino #1e3a8a / #0f1e4a, ámbar #f59e0b,
   fondo #f0f0f0 con tarjetas blancas de radio 8px y sombra suave, Titillium Web para títulos y UI, Segoe UI/sistema para lectura,
   columna principal + barra lateral de 340px, títulos de sección en mayúsculas con subrayado ámbar, listas con ✓ ámbar. */
:root {
  --bg: #f0f0f0; --surface: #ffffff; --surface-2: #f8fafc; --surface-blue: #eff6ff; --surface-gold: #fffbeb;
  --fg: #334155; --fg-strong: #0f172a; --muted: #64748b; --line: #e2e8f0; --line-2: #f1f5f9;
  --navy: #1e3a8a; --navy-dark: #0f1e4a; --navy-ink: #1e3a8a; --blue: #3b82f6;
  --accent: #f59e0b; --accent-hover: #d97706; --accent-ink: #854f0b;
  --gold-bg: #fef9f0; --gold-line: #f0d28a; --gold-edge: #c8a263;
  --ok: #15803d; --ok-soft: #ecfdf5; --warn: #b45309; --warn-soft: #fffbeb; --bad: #dc2626; --bad-soft: #fef2f2;
  --ring: #3b82f6; --shadow: 0 4px 20px rgba(0, 0, 0, .04); --shadow-2: 0 10px 25px rgba(var(--navy-rgb), .12); --r: 8px;
  --font-display: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light only;
}
/* Sin modo oscuro: el sitio siempre se ve en claro (fondo gris claro + tarjetas blancas), igual que Tramiteca. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--navy-ink); text-decoration: none; } a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.15; color: var(--navy-ink); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; } h2 { font-size: 1.45rem; font-weight: 700; } h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0; } .tiny { font-size: .84rem; color: var(--muted); } .lead { font-size: 1.04rem; color: var(--muted); max-width: 70ch; margin-top: 10px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.chip { display: inline-block; background: var(--surface-blue); color: var(--navy-ink); font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; line-height: 1.5; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: var(--r); background: var(--navy); color: #fff; font-family: var(--font-display); font-weight: 700; border: 0; cursor: pointer; font-size: .95rem; white-space: nowrap; line-height: 1.2; }
.btn:hover { background: var(--navy-dark); text-decoration: none; color: #fff; }
.btn.accent { background: var(--accent); color: var(--on-accent); } .btn.accent:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.light { background: var(--surface-2); color: var(--navy-ink); border: 1px solid var(--line); } .btn.light:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 4px; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1.6; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.mute { background: var(--line-2); color: var(--muted); } .pill.brand { background: var(--surface-blue); color: var(--navy-ink); }
.demo { background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: .82rem; text-align: center; padding: 7px 16px; font-weight: 700; }
/* cabecera azul marino */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--navy-dark); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.top .wrap { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; color: #fff; white-space: nowrap; letter-spacing: -.01em; } .brand:hover { text-decoration: none; } .brand em { font-style: normal; color: var(--accent); }
.brand .mark { width: 30px; height: 30px; border-radius: 7px; background: var(--accent); display: grid; place-items: center; flex: none; } .brand .mark svg { width: 20px; height: 20px; }
.nav { display: flex; gap: 2px; } .nav a { padding: 8px 10px; border-radius: 6px; font-family: var(--font-display); font-weight: 600; color: rgba(255, 255, 255, .92); white-space: nowrap; font-size: .92rem; } .nav a:hover, .nav a.on { background: rgba(255, 255, 255, .12); text-decoration: none; color: #fff; }
.topq { margin-left: auto; } .topq input { width: 230px; max-width: 40vw; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 20px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: .88rem; } .topq input::placeholder { color: rgba(255, 255, 255, .6); }
@media (max-width: 960px) { .nav, .topq { display: none; } .menu { display: inline-flex !important; margin-left: auto; } }
.menu { display: none; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; padding: 7px 10px; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mnav { display: none; background: var(--navy); } .mnav.open { display: block; } .mnav .wrap { display: grid; gap: 2px; padding-block: 8px; } .mnav a { padding: 10px 8px; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
/* banda azul: portada completa en #inicio, compacta (solo cifras) en las demás vistas */
.band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: #fff; }
.band-main { padding: 40px 0 30px; } .band-main .wrap { display: grid; grid-template-columns: 1.4fr .8fr; gap: 30px; align-items: center; } @media (max-width: 860px) { .band-main .wrap { grid-template-columns: 1fr; } .band-art { display: none; } }
.band .kicker { font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.band h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 900; margin-top: 8px; } .band h1 em { font-style: normal; color: var(--accent); }
.band .lead { color: rgba(255, 255, 255, .82); margin-top: 12px; font-size: 1.02rem; }
.search { display: flex; gap: 6px; margin-top: 20px; background: #fff; border-radius: var(--r); padding: 5px; position: relative; box-shadow: var(--shadow-2); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 12px; font: inherit; font-size: 1rem; color: #0f172a; } .search input:focus { outline: none; }
.sug { position: absolute; left: 5px; right: 5px; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); z-index: 30; max-height: 320px; overflow: auto; text-align: left; }
.sug a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; color: var(--fg); border-bottom: 1px solid var(--line); font-size: .95rem; } .sug a:last-child { border-bottom: 0; } .sug a:hover { background: var(--surface-blue); text-decoration: none; } .sug small { color: var(--muted); white-space: nowrap; }
.band-art svg { width: 100%; max-width: 300px; display: block; margin: 0 auto; }
.stats { border-top: 1px solid rgba(255, 255, 255, .12); } .stats .wrap { display: flex; flex-wrap: wrap; }
.stat { display: flex; align-items: center; gap: 12px; padding: 14px 24px 14px 0; margin-right: 24px; border-right: 1px solid rgba(255, 255, 255, .15); } .stat:last-child { border-right: 0; margin-right: 0; } .stat .i { font-size: 1.5rem; }
.stat b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.1; } .stat span { font-size: .8rem; color: rgba(255, 255, 255, .75); }
@media (max-width: 640px) { .stat { border-right: 0; padding: 8px 0; margin-right: 0; width: 100%; } }

/* columna principal + barra lateral */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; padding-block: 30px; align-items: start; } @media (max-width: 1000px) { .layout { grid-template-columns: 1fr; } }
.main { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 28px; min-width: 0; container: main / inline-size; } @media (max-width: 640px) { .main { padding: 18px 14px; } }
.sidebar { min-width: 0; }
.widget { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; margin-bottom: 24px; position: relative; overflow: hidden; }
.widget.trust::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.trust .head { text-align: center; margin: 10px 0 14px; } .trust .shield { font-size: 2.6rem; line-height: 1; } .trust h3 { font-size: 1.2rem; margin-top: 6px; } .trust .sub { font-family: var(--font-display); font-size: .76rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.trust ul { list-style: none; margin: 0; padding: 0; } .trust li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; padding: 11px 0; border-bottom: 1px solid var(--line-2); line-height: 1.4; } .trust li:last-child { border-bottom: 0; } .trust li .i { color: var(--accent); font-size: 1.05rem; flex: none; } .trust li b { color: var(--fg-strong); }
.trust .soc { margin-top: 14px; text-align: center; } .trust .soc h4 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; } .trust .soc div { display: flex; justify-content: center; gap: 10px; }
.soc a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .78rem; font-family: var(--font-display); } .soc a:hover { text-decoration: none; transform: translateY(-2px); } .soc .fb { background: #1877f2; } .soc .yt { background: #ff0000; } .soc .tk { background: #000; } .soc .wa { background: #25d366; }
.wt { font-size: 1.15rem; padding-bottom: 10px; border-bottom: 3px solid var(--accent); margin-bottom: 14px; }
.wsearch label { display: block; font-size: .86rem; color: var(--muted); margin-bottom: 8px; } .wsearch div { display: flex; gap: 8px; } .wsearch input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .92rem; background: var(--surface); color: var(--fg); } .wsearch button { background: var(--search-btn); color: #fff; border: 0; border-radius: 6px; padding: 0 18px; font: inherit; font-weight: 600; cursor: pointer; } .wsearch button:hover { background: var(--navy); }
.dir-home { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-radius: 5px; background: linear-gradient(135deg, var(--navy), var(--navy)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .9rem; margin-bottom: 6px; } .dir-home:hover { text-decoration: none; color: #fff; }
.dir { margin-bottom: 6px; } .dir summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; color: var(--fg-strong); font-family: var(--font-display); font-weight: 600; font-size: .88rem; cursor: pointer; } .dir summary::-webkit-details-marker { display: none; }
.dir summary .ico { flex: none; } .dir summary .lbl { flex: 1; min-width: 0; line-height: 1.25; } .dir summary .n { font-size: .72rem; color: var(--muted); } .dir summary::after { content: "▼"; font-size: .6rem; color: #999; margin-left: 2px; transition: transform .2s; }
.dir[open] summary::after { transform: rotate(180deg); color: var(--navy-ink); } .dir[open] summary, .dir summary:hover { background: var(--surface-blue); border-color: var(--navy); }
.dir ul { list-style: none; margin: 6px 0 0; padding: 4px 0 4px 6px; } .dir li a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; font-size: .8rem; color: var(--fg); border-radius: 4px; line-height: 1.3; } .dir li a::after { content: "›"; color: #bbb; font-size: 1.1rem; line-height: 1; flex: none; } .dir li a:hover { background: var(--surface-blue); color: var(--navy-ink); text-decoration: none; }
.dir li a.hub { background: var(--surface-blue); border-left: 3px solid var(--navy); color: var(--navy-ink); font-weight: 600; } .dir li a.hub::after { content: "★"; color: var(--accent); font-size: .85rem; }
/* títulos de sección con subrayado ámbar */
.stitle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--navy-ink); padding-bottom: 8px; border-bottom: 3px solid var(--accent); margin: 0 0 18px; }
.stitle .t { flex: 1 1 auto; min-width: 0; } .stitle .i { color: var(--accent); } .stitle small { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .82rem; color: var(--muted); }
.sec { margin-bottom: 36px; } .sec:last-child { margin-bottom: 0; } .sec > .lead { margin: -8px 0 16px; font-size: .97rem; }
/* tarjetas grandes (fichas terminadas) */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @container main (max-width: 700px) { .posts { grid-template-columns: repeat(2, 1fr); } } @container main (max-width: 480px) { .posts { grid-template-columns: 1fr; } }
.post { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); overflow: hidden; color: var(--fg); min-width: 0; transition: box-shadow .2s, transform .2s; } .post:hover { text-decoration: none; box-shadow: var(--shadow-2); transform: translateY(-2px); }
.post .cover { height: 128px; background: linear-gradient(135deg, rgba(var(--navy-dark-rgb), .96), rgba(var(--navy-rgb), .82)); display: grid; place-items: center; color: #fff; font-size: 2.8rem; position: relative; }
.post .cover span { position: absolute; left: 12px; bottom: 10px; font-size: .68rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(var(--navy-dark-rgb), .85); border: 1px solid rgba(255, 255, 255, .25); border-radius: 30px; padding: 3px 10px; line-height: 1.4; }
.post .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .post h3 { font-size: 1.1rem; line-height: 1.25; } .post p { font-size: .9rem; color: var(--muted); flex: 1; } .post .mini { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .8rem; color: var(--muted); align-items: center; } .post .btn { align-self: flex-start; margin-top: 4px; font-size: .86rem; padding: 9px 14px; }
/* mosaicos (rutas por objetivo) */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @container main (max-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 12px; text-align: center; color: var(--navy-ink); display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; transition: border-color .2s, box-shadow .2s; } .tile:hover { border-color: var(--navy); box-shadow: var(--shadow-2); text-decoration: none; }
.tile .ico { font-size: 1.7rem; } .tile b { font-family: var(--font-display); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.25; } .tile p { font-size: .78rem; color: var(--muted); line-height: 1.4; }
/* avisos */
.aviso, .tip, .gold { border-radius: var(--r); padding: 14px 18px; font-size: .95rem; line-height: 1.55; } .aviso { background: var(--bad-soft); border-left: 4px solid var(--bad); } .aviso b { color: var(--bad); } .tip { background: var(--surface-blue); border-left: 4px solid var(--navy); } .gold { background: var(--surface-gold); border-left: 4px solid var(--accent); }
.avisos { display: grid; gap: 10px; } .avisos b { display: block; font-family: var(--font-display); font-size: 1rem; margin-bottom: 2px; }
/* listas con ✓ ámbar */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rows li { background: var(--surface-2); border-radius: 6px; padding: 10px 15px 10px 40px; position: relative; font-size: .95rem; line-height: 1.5; } .rows li::before { content: "✓"; position: absolute; left: 14px; top: 9px; color: var(--accent); font-weight: 900; font-size: 1.05rem; } .rows li b { color: var(--fg-strong); }
.garantia { background: var(--surface-2); border-radius: var(--r); padding: 22px 24px; font-size: .93rem; } .garantia h3 { font-size: 1rem; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; } .garantia h3 .i { color: var(--accent); }
/* catálogo */
.crumbs { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy-dark); margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .crumbs a { color: var(--navy-ink); } .crumbs i { font-style: normal; color: var(--accent); } .crumbs span { color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; align-items: center; }
.filters button { border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-strong); padding: 7px 12px; border-radius: 6px; font-family: var(--font-display); font-size: .84rem; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .filters button:hover { border-color: var(--navy); }
.filters button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.filters input[type=search] { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); font: inherit; min-width: 220px; }
.count { color: var(--muted); font-size: .9rem; margin-bottom: 10px; }
.cat-group { margin-bottom: 26px; } .cat-group h3 { display: flex; gap: 8px; align-items: center; font-size: 1rem; padding-bottom: 6px; border-bottom: 2px solid var(--line); margin-bottom: 10px; } .cat-group h3 .tiny { font-weight: 400; }
.tlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @container main (max-width: 700px) { .tlist { grid-template-columns: 1fr; } }
.titem { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; min-width: 0; }
.titem b { font-family: var(--font-display); font-size: .98rem; color: var(--fg-strong); } .titem small { color: var(--muted); font-size: .82rem; grid-column: 1 / -1; } .titem .tags { display: flex; flex-wrap: wrap; gap: 5px; grid-column: 1 / -1; }
.titem a.open { font-family: var(--font-display); font-weight: 700; white-space: nowrap; font-size: .9rem; } .titem .soon { color: var(--muted); font-size: .78rem; white-space: nowrap; }
/* ficha de ruta */
.fhero { background: linear-gradient(135deg, rgba(var(--navy-dark-rgb), .97) 0%, rgba(var(--navy-rgb), .88) 100%); border-radius: 16px; padding: 26px 24px 52px; color: #fff; position: relative; }
.fhero .chip { background: rgba(255, 255, 255, .14); color: #fff; } .fhero h1 { color: #fff; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 10px; } .fhero .lead { color: rgba(255, 255, 255, .85); }
.fhero .upd { display: inline-block; margin-top: 16px; font-family: var(--font-display); font-size: .76rem; font-weight: 600; background: rgba(var(--navy-dark-rgb), .85); border: 1px solid rgba(255, 255, 255, .25); border-radius: 30px; padding: 5px 14px; }
.sem { margin: -28px 14px 0; position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; box-shadow: var(--shadow-2); }
@container main (max-width: 900px) { .sem { grid-template-columns: repeat(3, 1fr); } } @container main (max-width: 560px) { .sem { grid-template-columns: repeat(2, 1fr); margin-inline: 8px; } } @container main (max-width: 400px) { .sem { grid-template-columns: 1fr; } }
.sem .cell { padding: 10px 12px; border-radius: 6px; background: var(--surface-2); display: grid; gap: 4px; min-width: 0; align-content: start; } .sem .k { font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .sem b { font-size: .95rem; line-height: 1.3; color: var(--fg-strong); } .sem small { color: var(--muted); font-size: .78rem; }
.dots i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line); margin-right: 4px; } .dots i.on { background: var(--accent); }
.dominios { margin: 16px 0 8px; font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .dominios code { background: var(--surface-blue); color: var(--navy-ink); padding: 2px 8px; border-radius: 4px; font-family: var(--font-display); font-weight: 700; font-size: .84rem; }
.ficha h2 { font-size: 1.45rem; padding-bottom: 8px; border-bottom: 3px solid var(--accent); margin: 0 0 14px; } .blk { margin-top: 32px; }
.pre { background: var(--surface-blue); border-left: 4px solid var(--navy); border-radius: var(--r); padding: 18px 20px; } .pre h2 { border-bottom: 0; padding-bottom: 0; font-size: 1.2rem; margin-bottom: 6px; } .pre .q { font-weight: 700; color: var(--fg-strong); margin-bottom: 10px; }
.ops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @container main (max-width: 640px) { .ops { grid-template-columns: 1fr; } }
.op { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: var(--surface); font-size: .95rem; } .op:hover { border-color: var(--navy); } .op input { margin-top: 4px; accent-color: var(--navy); } .op em { display: none; }
.pre-res { margin-top: 12px; padding: 12px 14px; border-radius: 6px; background: var(--navy); color: #fff; font-weight: 600; display: none; } .pre-res.show { display: block; }
.cols { display: grid; grid-template-columns: 1.35fr .9fr; gap: 22px; align-items: start; } .cols > * { min-width: 0; } @container main (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
.side { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 74px); } .side h2 { font-size: 1.1rem; } @container main (max-width: 760px) { .side { position: static; } }
.ruta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 16px 12px; margin-bottom: 10px; }
.ruta summary { cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; align-items: center; padding: 10px 0; font-weight: 700; font-family: var(--font-display); font-size: 1.02rem; color: var(--navy-ink); } .ruta summary small { color: var(--muted); font-weight: 600; font-family: var(--font-body); font-size: .82rem; }
.pasos { list-style: none; counter-reset: p; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; } .pasos li { counter-increment: p; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.pasos li::before { content: counter(p); width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .9rem; margin-top: 2px; }
.pasos .st { min-width: 0; } .pasos .st b { display: block; color: var(--fg-strong); } .pasos .st p { color: var(--muted); font-size: .94rem; }
.ojo { margin-top: 12px; font-size: .9rem; } .ojo b { color: var(--accent-ink); }
.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .check label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .94rem; } .check input { margin-top: 5px; accent-color: var(--navy); } .check small { color: var(--muted); }
.tab { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: 8px; } .tab td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; } .tab .num { text-align: right; white-space: nowrap; font-weight: 700; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.nocob { margin-top: 12px; background: var(--ok-soft); border-left: 4px solid var(--ok); border-radius: 6px; padding: 10px 12px; font-size: .9rem; } .nocob b { color: var(--ok); } .nocob ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.vig { margin-top: 12px; font-size: .94rem; }
.atoras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @container main (max-width: 700px) { .atoras { grid-template-columns: 1fr; } }
.atora { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; } .atora summary { cursor: pointer; font-weight: 700; color: var(--fg-strong); } .atora p { margin-top: 8px; color: var(--muted); font-size: .93rem; }
.radar { background: var(--bad-soft); border-left: 4px solid var(--bad); border-radius: var(--r); padding: 18px 20px; } .radar h2 { color: var(--bad); border-bottom-color: color-mix(in srgb, var(--bad) 35%, transparent); } .radar ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; } .radar p { margin-top: 6px; font-size: .95rem; }
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @container main (max-width: 700px) { .dual { grid-template-columns: 1fr; } }
.dual > div { border-radius: var(--r); padding: 18px; display: grid; gap: 8px; align-content: start; } .dual .tu { background: var(--surface-2); border: 1px solid var(--line); } .dual .nos { background: var(--gold-bg); border: 1px solid var(--gold-line); border-left: 4px solid var(--gold-edge); }
.dual .lab { font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); } .dual .tu .lab { color: var(--navy-ink); } .dual small { color: var(--muted); font-size: .8rem; line-height: 1.45; } .dual .btn { justify-self: start; }
.faqs { display: grid; gap: 6px; } .faq { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; } .faq summary { cursor: pointer; font-weight: 700; color: var(--fg-strong); } .faq p { margin-top: 8px; color: var(--muted); font-size: .95rem; }
.rels { display: flex; flex-wrap: wrap; gap: 8px; } .rel { border: 1px solid var(--line); background: var(--surface-2); border-radius: 6px; padding: 7px 12px; font-size: .88rem; font-weight: 600; color: var(--navy-ink); } .rel::after { content: " ›"; color: #aaa; } .rel:hover { border-color: var(--navy); text-decoration: none; }
.fuentes ol { padding-left: 20px; font-size: .9rem; display: grid; gap: 4px; margin: 10px 0 0; } .fuentes a { word-break: break-word; }
.porc { margin-top: 12px; font-size: .9rem; } .porc summary { cursor: pointer; color: var(--warn); font-weight: 700; } .porc ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }
.empty { color: var(--muted); padding: 24px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r); }
/* pie azul oscuro */
.foot { background: var(--foot); color: rgba(255, 255, 255, .72); margin-top: 10px; padding: 36px 0 16px; border-top: 4px solid var(--navy); } .foot a { color: rgba(255, 255, 255, .8); } .foot a:hover { color: var(--accent); text-decoration: none; }
.fgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; } @media (max-width: 860px) { .fgrid { grid-template-columns: 1fr; } }
.foot h4 { color: var(--accent); font-size: .84rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 14px; display: flex; gap: 8px; align-items: center; }
.foot p { font-size: .9rem; line-height: 1.6; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9rem; } .foot li::before { content: "› "; color: var(--accent); }
.fsoc { display: flex; gap: 10px; margin-top: 16px; } .fsoc a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); display: grid; place-items: center; font-size: .7rem; font-weight: 800; font-family: var(--font-display); } .fsoc a:hover { border-color: var(--accent); }
.fcta { display: inline-block; margin-top: 10px; border: 1px solid rgba(245, 158, 11, .5); border-radius: 6px; padding: 10px 22px; font-family: var(--font-display); font-weight: 700; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; } .fcta:hover { background: var(--accent); color: var(--on-accent) !important; }
.fnote { border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r); padding: 12px 14px; font-size: .84rem; line-height: 1.55; margin-top: 14px; color: rgba(255, 255, 255, .7); } .fnote b { color: var(--accent); }
.fbot { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 28px; padding-top: 16px; text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .42); line-height: 1.6; }
.totop { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); background: none; display: grid; place-items: center; margin: 0 auto 14px; cursor: pointer; font-size: 1.1rem; font-weight: 900; } .totop:hover { background: var(--accent); color: var(--on-accent); }


/* ===== Paletas de prueba (solo demo): cada una redefine las variables de marca ===== */
:root { --navy: #334155; --navy-dark: #0f172a; --navy-ink: #1e293b; --navy-rgb: 51, 65, 85; --navy-dark-rgb: 15, 23, 42; --accent: #ea580c; --accent-hover: #c2410c; --accent-2: #fb923c; --accent-ink: #7c2d12; --on-accent: #ffffff; --surface-blue: #f1f5f9; --surface-gold: #fff7ed; --gold-bg: #fff7ed; --gold-line: #fed7aa; --gold-edge: #ea580c; --ring: #ea580c; --foot: #1e293b; --search-btn: #1e293b; --shadow-2: 0 10px 25px rgba(15, 23, 42, .14); }
:root[data-pal="marino"] { --navy: #1e3a8a; --navy-dark: #0f1e4a; --navy-ink: #1e3a8a; --navy-rgb: 30, 58, 138; --navy-dark-rgb: 15, 30, 74; --accent: #f59e0b; --accent-hover: #d97706; --accent-2: #f97316; --accent-ink: #854f0b; --on-accent: #0f1e4a; --surface-blue: #eff6ff; --surface-gold: #fffbeb; --gold-bg: #fef9f0; --gold-line: #f0d28a; --gold-edge: #c8a263; --ring: #3b82f6; --foot: #0a1628; --search-btn: #1f2937; --shadow-2: 0 10px 25px rgba(30, 58, 138, .12); }
.demo { background: var(--navy-dark); color: var(--accent-2); }
:root[data-pal="petroleo"] { --navy: #0e4f5f; --navy-dark: #062f3a; --navy-ink: #0b4552; --navy-rgb: 14, 79, 95; --navy-dark-rgb: 6, 47, 58; --accent: #ff6b35; --accent-hover: #e85a26; --accent-2: #ff8f5e; --accent-ink: #9a3412; --on-accent: #062f3a; --surface-blue: #e6f3f5; --surface-gold: #fff1ea; --gold-bg: #fff4ee; --gold-line: #ffc9b0; --gold-edge: #ff6b35; --ring: #2aa7bf; --foot: #04232b; --search-btn: #0b4552; --shadow-2: 0 10px 25px rgba(14, 79, 95, .14); }
:root[data-pal="indigo"] { --navy: #3730a3; --navy-dark: #1e1b4b; --navy-ink: #312e81; --navy-rgb: 55, 48, 163; --navy-dark-rgb: 30, 27, 75; --accent: #facc15; --accent-hover: #eab308; --accent-2: #fde047; --accent-ink: #854d0e; --on-accent: #1e1b4b; --surface-blue: #eef2ff; --surface-gold: #fefce8; --gold-bg: #fefce8; --gold-line: #fde68a; --gold-edge: #eab308; --ring: #6366f1; --foot: #14123a; --search-btn: #312e81; --shadow-2: 0 10px 25px rgba(55, 48, 163, .14); }
:root[data-pal="carbon"] { --navy: #1f2937; --navy-dark: #0b1220; --navy-ink: #111827; --navy-rgb: 31, 41, 55; --navy-dark-rgb: 11, 18, 32; --accent: #06b6d4; --accent-hover: #0891b2; --accent-2: #22d3ee; --accent-ink: #155e75; --on-accent: #0b1220; --surface-blue: #ecfeff; --surface-gold: #f0fdff; --gold-bg: #ecfeff; --gold-line: #a5f3fc; --gold-edge: #06b6d4; --ring: #06b6d4; --foot: #070b14; --search-btn: #111827; --shadow-2: 0 10px 25px rgba(11, 18, 32, .14); }
:root[data-pal="ciruela"] { --navy: #5b21b6; --navy-dark: #2e1065; --navy-ink: #4c1d95; --navy-rgb: 91, 33, 182; --navy-dark-rgb: 46, 16, 101; --accent: #fb923c; --accent-hover: #f97316; --accent-2: #fdba74; --accent-ink: #9a3412; --on-accent: #2e1065; --surface-blue: #f5f3ff; --surface-gold: #fff7ed; --gold-bg: #fff7ed; --gold-line: #fed7aa; --gold-edge: #fb923c; --ring: #8b5cf6; --foot: #1e0b45; --search-btn: #4c1d95; --shadow-2: 0 10px 25px rgba(91, 33, 182, .14); }
:root[data-pal="terracota"] { --navy: #9a3412; --navy-dark: #5a1d0b; --navy-ink: #7c2d12; --navy-rgb: 154, 52, 18; --navy-dark-rgb: 90, 29, 11; --accent: #14b8a6; --accent-hover: #0d9488; --accent-2: #2dd4bf; --accent-ink: #115e59; --on-accent: #042f2e; --surface-blue: #fff4ed; --surface-gold: #f0fdfa; --gold-bg: #f0fdfa; --gold-line: #99f6e4; --gold-edge: #14b8a6; --ring: #14b8a6; --foot: #3b1207; --search-btn: #7c2d12; --shadow-2: 0 10px 25px rgba(154, 52, 18, .14); }
/* componentes propios de un sitio de gestoría */
.welcome { padding: 4px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.welcome h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 900; margin: 10px 0 12px; line-height: 1.2; }
.welcome > p { font-size: 1rem; line-height: 1.65; color: var(--fg); max-width: 74ch; }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; } @container main (max-width: 700px) { .promises { grid-template-columns: 1fr; } }
.promise { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--muted); line-height: 1.45; padding: 12px 14px; background: var(--surface-2); border-radius: var(--r); border-left: 3px solid var(--accent); } .promise .i { font-size: 1.3rem; line-height: 1; } .promise b { display: block; color: var(--navy-ink); font-family: var(--font-display); font-size: .95rem; margin-bottom: 2px; }
.welcome .ctas { margin-top: 18px; }
.viewtog { font-weight: 600; color: var(--muted); } .viewtog button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--navy-ink); cursor: pointer; text-decoration: underline dotted; } .viewtog button[aria-pressed="true"] { color: var(--accent-ink); text-decoration: none; background: var(--surface-gold); padding: 1px 7px; border-radius: 4px; }
.svc-rows { display: grid; gap: 8px; }
.srow { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 8px 14px; align-items: center; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); min-width: 0; transition: border-color .2s, box-shadow .2s; } .srow:hover { border-color: var(--navy); box-shadow: var(--shadow-2); }
.srow .ico { width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg, var(--navy), var(--navy-dark)); display: grid; place-items: center; font-size: 1.5rem; }
.srow .txt { min-width: 0; } .srow .txt b { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--navy-ink); } .srow .txt span { font-size: .86rem; color: var(--muted); line-height: 1.4; }
.srow .pr { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--fg-strong); text-align: right; white-space: nowrap; } .srow .pr small { display: block; font-size: .7rem; color: var(--muted); font-weight: 600; white-space: normal; max-width: 140px; }
.srow .act { display: flex; flex-direction: column; align-items: center; gap: 4px; } .srow .btn { padding: 8px 14px; font-size: .86rem; } .srow .guia { font-size: .78rem; font-weight: 600; }
.srow.gold-row { background: var(--surface-gold); border-color: var(--gold-line); } .gold-chip { background: var(--accent); color: var(--on-accent); margin-left: 6px; vertical-align: middle; }
@container main (max-width: 640px) { .srow { grid-template-columns: 48px 1fr; } .srow .pr { grid-column: 2; text-align: left; } .srow .pr small { display: inline; max-width: none; } .srow .act { grid-column: 2; flex-direction: row; align-items: center; gap: 12px; } }
.svc-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } @container main (max-width: 760px) { .svc-tiles { grid-template-columns: repeat(3, 1fr); } } @container main (max-width: 480px) { .svc-tiles { grid-template-columns: repeat(2, 1fr); } }
.stile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); color: var(--fg); min-width: 0; transition: box-shadow .2s, transform .2s; } .stile:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); text-decoration: none; }
.stile .ico { font-size: 2rem; line-height: 1; } .stile b { font-family: var(--font-display); font-size: .92rem; color: var(--navy-ink); line-height: 1.2; } .stile .pr { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--fg-strong); } .stile .pr small { font-size: .7rem; color: var(--muted); } .stile .go { font-size: .8rem; font-weight: 700; color: var(--navy-ink); }
.stile.gold-tile { background: var(--surface-gold); border-color: var(--gold-line); border-top-color: var(--accent); }
/* móvil: sin formulario en la banda, sin «consultar folio» ni directorio; cifras en 2 columnas */
@media (max-width: 1000px) { .widget.folio, .widget.dirw { display: none; } }
@media (max-width: 640px) { .stats .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .stat { border-right: 0; padding: 10px 0; margin: 0; width: auto; } .stat b { font-size: 1rem; } .stat span { font-size: .74rem; } }
.topcta { margin-left: auto; display: flex; align-items: center; gap: 10px; } .topcta .btn { padding: 9px 16px; font-size: .88rem; } @media (max-width: 960px) { .topcta { display: none; } }
.band-main .wrap { grid-template-columns: 1.25fr .85fr; } .band-main .wrap > * { min-width: 0; } @media (max-width: 860px) { .band-main .wrap { grid-template-columns: 1fr; } .band-main { padding: 30px 0 26px; } }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .btn.ghostw { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .35); } .btn.ghostw:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.quick { min-width: 0; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-2); padding: 20px; color: var(--fg); border-top: 4px solid var(--accent); }
.quick h3 { font-size: 1.05rem; } .quick .sub { font-size: .84rem; color: var(--muted); margin: 4px 0 12px; }
.quick label { display: block; font-family: var(--font-display); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy-ink); margin: 8px 0 4px; }
.quick input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .95rem; color: var(--fg-strong); background: var(--surface-2); }
.quick .btn { width: 100%; margin-top: 12px; } .quick .badges { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: .74rem; color: var(--muted); } .quick .badges span::before { content: "✓ "; color: var(--ok); font-weight: 900; }
.quick .price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .84rem; color: var(--muted); } .quick .price b { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy-ink); }
@media (max-width: 860px) { .band-art { display: none; } }
.svcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @container main (max-width: 640px) { .svcs { grid-template-columns: 1fr; } }
.svc { display: grid; grid-template-columns: 56px 1fr; gap: 6px 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); padding: 16px; min-width: 0; align-items: start; transition: box-shadow .2s, transform .2s; }
.svc:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.svc .ico { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, var(--navy), var(--navy-dark)); display: grid; place-items: center; font-size: 1.7rem; grid-row: span 3; }
.svc h3 { font-size: 1.1rem; } .svc p { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.svc .svc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; } .svc .precio { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--navy-ink); } .svc .precio small { font-size: .74rem; color: var(--muted); font-weight: 600; }
.svc .links { display: flex; gap: 8px; flex-wrap: wrap; } .svc .btn { padding: 8px 14px; font-size: .86rem; } .svc .guia { font-size: .84rem; font-weight: 600; align-self: center; }
.nuevo { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; margin-top: 14px; } @container main (max-width: 640px) { .nuevo { grid-template-columns: 1fr; } }
.nuevo .lab { font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); } .nuevo h3 { margin: 2px 0 4px; } .nuevo p { font-size: .9rem; } .nuevo .precio { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--navy-ink); text-align: center; } .nuevo .precio small { display: block; font-size: .74rem; color: var(--muted); font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: s; } @container main (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px 16px; position: relative; counter-increment: s; min-width: 0; }
.step::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; margin-bottom: 10px; }
.step b { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--navy-ink); margin-bottom: 4px; } .step p { font-size: .9rem; color: var(--muted); } .step .t { position: absolute; top: 16px; right: 14px; font-family: var(--font-display); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); background: var(--surface-gold); padding: 3px 8px; border-radius: 4px; }
.pricebox { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; } @container main (max-width: 700px) { .pricebox { grid-template-columns: 1fr; } }
.pricecard { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; border-radius: var(--r); padding: 22px 18px; text-align: center; } .pricecard .k { font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); } .pricecard .n { font-family: var(--font-display); font-size: 3rem; font-weight: 900; line-height: 1; margin: 6px 0; color: var(--accent); } .pricecard p { font-size: .84rem; color: rgba(255, 255, 255, .8); } .pricecard .btn { margin-top: 14px; width: 100%; }
.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } @container main (max-width: 760px) { .states { grid-template-columns: repeat(3, 1fr); } } @container main (max-width: 520px) { .states { grid-template-columns: repeat(2, 1fr); } }
.states a, .states span { display: block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; font-size: .84rem; font-weight: 600; color: var(--fg); text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .states a:hover { border-color: var(--navy); color: var(--navy-ink); text-decoration: none; } .states a.hub { background: var(--surface-blue); border-color: var(--navy); color: var(--navy-ink); }
.revs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @container main (max-width: 640px) { .revs { grid-template-columns: 1fr; } }
.rev { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; grid-template-columns: 42px 1fr; gap: 4px 12px; min-width: 0; }
.rev .av { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .9rem; grid-row: span 2; }
.rev b { font-family: var(--font-display); color: var(--fg-strong); } .rev small { color: var(--muted); font-size: .78rem; display: block; } .rev .stars { color: var(--accent); font-size: .9rem; letter-spacing: 1px; } .rev q { grid-column: 1 / -1; font-size: .92rem; color: var(--fg); quotes: "“" "”"; margin-top: 6px; } .rev .ver { grid-column: 1 / -1; font-size: .74rem; color: var(--ok); font-weight: 700; }
.guides { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @container main (max-width: 640px) { .guides { grid-template-columns: 1fr; } }
.guide { display: grid; grid-template-columns: 84px 1fr; gap: 4px 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); padding: 12px; color: var(--fg); min-width: 0; align-items: start; } .guide:hover { box-shadow: var(--shadow-2); text-decoration: none; }
.guide .cv { width: 84px; height: 84px; border-radius: 8px; background: linear-gradient(135deg, var(--navy), var(--navy-dark)); display: grid; place-items: center; grid-row: span 4; } .guide .cv svg { width: 52px; height: 52px; }
.guide .chip { justify-self: start; font-size: .66rem; } .guide h3 { font-size: .98rem; line-height: 1.25; } .guide p { font-size: .84rem; color: var(--muted); } .guide .badge { justify-self: start; background: rgba(245, 158, 11, .08); color: var(--accent-ink); font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.faqs .faq summary { font-family: var(--font-display); }
.folio input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .92rem; background: var(--surface); color: var(--fg); text-transform: uppercase; } .folio .btn { width: 100%; margin-top: 8px; } .folio p { font-size: .8rem; color: var(--muted); margin-top: 8px; }
.wcta { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; } .wcta h3 { color: #fff; font-size: 1.05rem; } .wcta p { font-size: .86rem; color: rgba(255, 255, 255, .8); margin: 6px 0 12px; } .wcta .btn { width: 100%; }
.sem .cell b.big { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy-ink); }
.usos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } @container main (max-width: 600px) { .usos { grid-template-columns: 1fr; } }
.uso { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: .9rem; display: flex; gap: 10px; align-items: flex-start; } .uso span { font-size: 1.2rem; } .uso b { display: block; color: var(--fg-strong); font-family: var(--font-display); }

/* ===== Móvil (iOS / Android): una sola columna, pero con patrones de app ===== */
.mbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(var(--navy-dark-rgb), .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; box-shadow: 0 -6px 24px rgba(0, 0, 0, .3); border-top: 1px solid rgba(255, 255, 255, .08); }
.mbar .btn { flex: 1; min-height: 46px; font-size: 1rem; } .mbar .btn.ghostw { flex: 0 0 auto; padding-inline: 16px; }
.mnav a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; font-size: 1rem; } .mnav a::after { content: "›"; opacity: .5; font-size: 1.2rem; } .mnav a.cta { background: var(--accent); color: var(--on-accent); border-radius: 8px; margin-top: 8px; padding-inline: 14px; font-weight: 700; } .mnav a.cta::after { content: ""; }
@media (max-width: 960px) { .topcta { display: flex; } .topcta .btn { padding: 8px 12px; font-size: .82rem; } }
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; } body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); -webkit-tap-highlight-color: rgba(var(--navy-rgb), .12); }
  a, button, summary { touch-action: manipulation; }
  .demo { font-size: .72rem; padding: 6px 12px; line-height: 1.35; }
  .top .wrap { min-height: 56px; gap: 10px; } .brand { font-size: 1.12rem; } .brand .mark { width: 28px; height: 28px; } .topcta { display: none; } .menu { padding: 8px 10px; }
  .band-main { padding: 22px 0 22px; } .band .kicker { font-size: .78rem; line-height: 1.4; } .band h1 { font-size: 1.7rem; line-height: 1.12; margin-top: 8px; } .band .lead { font-size: .95rem; margin-top: 10px; line-height: 1.5; }
  .ctas { gap: 8px; margin-top: 16px; } .ctas .btn { flex: 1 1 100%; min-height: 46px; font-size: 1rem; white-space: normal; line-height: 1.25; } .dual .btn, .nuevo .btn { white-space: normal; }
  .stats { border-top: 1px solid rgba(255, 255, 255, .1); } .stats .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; }
  .stat { width: auto; margin: 0; padding: 9px 8px; gap: 6px; justify-content: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; white-space: normal; text-align: center; min-width: 0; } .stat > div { min-width: 0; } .stat .i { font-size: 1rem; display: inline; } .stat b { font-size: 0; display: inline; } .stat b::before { content: attr(data-m); font-size: .8rem; line-height: 1.2; white-space: nowrap; } .stat div span { display: none; }
  .layout { padding-block: 14px; gap: 14px; } .main { padding: 18px 14px 8px; border-radius: 10px; } .sec { margin-bottom: 30px; }
  .welcome { padding-bottom: 22px; margin-bottom: 24px; } .welcome h2 { font-size: 1.32rem; } .welcome > p { font-size: .95rem; line-height: 1.55; }
  .promises { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; } .promise { padding: 10px 12px; }
  .welcome .ctas { margin-top: 10px; }
  .stitle { font-size: .95rem; } .stitle small { flex-basis: 100%; margin-left: 0; font-size: .78rem; } .sec > .lead { font-size: .92rem; margin: -6px 0 14px; }
  .viewtog { display: none !important; } [data-vista="lista"] { display: none !important; } [data-vista="mosaico"] { display: block !important; }
  .svc-tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .stile { padding: 14px 8px 12px; gap: 4px; } .stile .ico { font-size: 1.8rem; } .stile b { font-size: .88rem; } .stile .pr { font-size: 1.05rem; } .stile .go { font-size: .76rem; }
  .stile.gold-tile { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; align-items: center; gap: 4px 10px; padding: 12px 14px; } .stile.gold-tile .ico { font-size: 1.6rem; } .stile.gold-tile b { flex: 1; } .stile.gold-tile .pr { font-size: 1.1rem; } .stile.gold-tile .go { flex-basis: 100%; padding-left: 40px; }
  .steps { grid-template-columns: 1fr; gap: 0; } .step { background: none; border: 0; padding: 0 0 20px 50px; min-height: 60px; } .step::before { position: absolute; left: 0; top: 0; margin: 0; } .step::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--line); } .step:last-child { padding-bottom: 4px; } .step:last-child::after { display: none; } .step .t { position: static; display: inline-block; margin-bottom: 6px; } .step b { font-size: 1rem; } .step p { font-size: .9rem; }
  .pricebox { gap: 12px; } .pricecard { padding: 18px 16px; } .pricecard .n { font-size: 2.6rem; } .rows li { font-size: .9rem; padding: 9px 12px 9px 34px; } .rows li::before { left: 11px; top: 8px; }
  .states { grid-template-columns: 1fr 1fr; gap: 6px; } .states a, .states span { padding: 10px 8px; font-size: .84rem; }
  .revs { grid-template-columns: 1fr; gap: 10px; } .rev { padding: 14px; } .rev q { font-size: .9rem; }
  .guides { grid-template-columns: 1fr 1fr; gap: 10px; } .guide { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; gap: 0; padding: 0; overflow: hidden; border-top-width: 0; }
  .guide .cv { width: 100%; height: 86px; border-radius: 0; grid-row: auto; } .guide .cv svg { width: 48px; height: 48px; } .guide .chip { margin: 10px 10px 0; } .guide h3 { padding: 6px 10px 4px; font-size: .9rem; } .guide p { display: none; } .guide .badge { margin: 4px 10px 10px; }
  .faqs { gap: 6px; } .faq { padding: 8px 12px; } .faq summary { min-height: 40px; display: flex; align-items: center; gap: 10px; font-size: .95rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 1.3rem; transform: rotate(90deg); transition: transform .2s; flex: none; } .faq[open] summary::after { transform: rotate(-90deg); } .faq p { font-size: .92rem; }
  .garantia { padding: 16px; font-size: .9rem; }
  .sidebar .widget { padding: 18px 16px; margin-bottom: 14px; } .trust .shield { font-size: 2.2rem; } .trust li { font-size: .86rem; padding: 9px 0; }
  .mbar { display: flex; }
  .foot { padding: 26px 0 14px; } .fgrid { gap: 18px; } .foot h4 { margin-bottom: 10px; } .fbot { font-size: .72rem; }
  /* página de servicio */
  .fhero { padding: 20px 16px 44px; border-radius: 12px; } .fhero h1 { font-size: 1.45rem; } .fhero .lead { font-size: .95rem; }
  .sem { grid-template-columns: 1fr 1fr; margin: -26px 6px 0; gap: 6px; padding: 8px; } .sem .cell:last-child { grid-column: 1 / -1; } .sem .cell { padding: 8px 10px; } .sem .cell b.big { font-size: 1.15rem; }
  .ficha h2 { font-size: 1.2rem; } .blk { margin-top: 24px; } .pre, .tip, .radar { padding: 14px; } .usos { grid-template-columns: 1fr; } .uso { font-size: .88rem; }
  .dual > div { padding: 14px; } .dual .btn { width: 100%; }
}

/* ===== Reglas propias del sitio migrado ===== */
.prose { font-size: 1rem; line-height: 1.7; color: var(--fg); } .prose > * + * { margin-top: 14px; }
.prose h2 { font-size: 1.4rem; padding-bottom: 8px; border-bottom: 3px solid var(--accent); margin: 30px 0 12px; } .prose h3 { font-size: 1.12rem; margin: 22px 0 8px; } .prose h4 { font-size: 1rem; margin: 18px 0 6px; }
.prose ul, .prose ol { padding-left: 22px; } .prose li + li { margin-top: 6px; } .prose a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; } .prose img { max-width: 100%; height: auto; border-radius: var(--r); }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; } .prose th, .prose td { padding: 9px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; } .prose th { background: var(--navy); font-family: var(--font-display); color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-color: var(--navy); } .prose tbody tr:nth-child(even) td { background: var(--surface-2); } .prose td.num, .prose th.num { text-align: right; white-space: nowrap; } .prose td.num { font-family: var(--font-display); font-weight: 700; color: var(--navy-ink); } .prose .tabla-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden auto; margin: 18px 0; } .prose .tabla-wrap table { font-size: .9rem; } .prose .tabla-wrap th:first-child, .prose .tabla-wrap td:first-child { border-left: 0; } .prose .tabla-wrap th:last-child, .prose .tabla-wrap td:last-child { border-right: 0; } .prose .tabla-wrap tr:last-child td { border-bottom: 0; } .prose .tabla-wrap th { border-top: 0; } .prose blockquote { border-left: 4px solid var(--accent); background: var(--surface-gold); padding: 12px 16px; border-radius: var(--r); margin: 0; }
.prose .aviso, .prose .tip, .prose .gold { margin: 18px 0; } .prose .cta-inline { text-align: center; padding: 22px 18px; } .prose .cta-inline h3 { margin: 0 0 6px; } .prose .cta-inline .btn { margin-top: 10px; } .prose .rows { margin: 12px 0; }
.prose .tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ahero { display: grid; gap: 10px; margin-bottom: 20px; } .ahero h1 { font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.15; } .ahero .lead { margin-top: 0; } .ameta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); }
.aimg { width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 0 22px; aspect-ratio: 16 / 7; object-fit: cover; }
.rel-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @container main (max-width: 640px) { .rel-cards { grid-template-columns: 1fr; } }
.rel-card { display: block; background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 12px 14px; color: var(--fg); } .rel-card:hover { border-color: var(--navy); text-decoration: none; } .rel-card .chip { margin-bottom: 4px; } .rel-card b { display: block; font-family: var(--font-display); color: var(--navy-ink); line-height: 1.25; }
/* lugar (estado / municipio) */
.map-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; } @container main (max-width: 760px) { .map-grid { grid-template-columns: 1fr; } }
.osm-map { width: 100%; height: auto; min-height: 320px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); position: relative; overflow: hidden; z-index: 0; } .osm-map .osm-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .9rem; }
.datos { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; } .datos h3 { font-size: 1rem; margin-bottom: 10px; } .datos dl { margin: 0; display: grid; gap: 8px; } .datos dt { font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .datos dd { margin: 0; font-size: .92rem; color: var(--fg-strong); line-height: 1.4; } .datos .btn { width: 100%; margin-top: 12px; }
.munis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @container main (max-width: 760px) { .munis { grid-template-columns: repeat(2, 1fr); } } @container main (max-width: 420px) { .munis { grid-template-columns: 1fr; } }
.muni { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; color: var(--fg); min-width: 0; } .muni:hover { border-color: var(--navy); text-decoration: none; box-shadow: var(--shadow-2); } .muni .ico { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--surface-blue); display: grid; place-items: center; color: var(--navy-ink); font-weight: 900; } .muni b { display: block; font-family: var(--font-display); color: var(--navy-ink); font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .muni small { color: var(--muted); font-size: .76rem; }
.pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .pills span { white-space: normal; line-height: 1.3; } @container main (max-width: 360px) { .pills { grid-template-columns: 1fr; } } .pills span { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 30px; padding: 6px 12px; font-size: .84rem; font-weight: 600; color: var(--fg-strong); } .pills span::before { content: "✓"; color: var(--accent); font-weight: 900; }
.ctabox { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: #fff; border-radius: var(--r); padding: 26px 22px; text-align: center; } .ctabox h2 { color: #fff; border: 0; padding: 0; margin: 0 0 12px; font-size: 1.5rem; } .ctabox p { color: rgba(255, 255, 255, .8); font-size: .9rem; margin-top: 10px; } .ctabox .btn { font-size: 1rem; padding: 13px 24px; }
.faqs .faq summary { font-family: var(--font-display); color: var(--navy-ink); } .faqs .faq p a, .faqs .faq .resp a { text-decoration: underline; }
.pasos-lista { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 12px; } .pasos-lista li { counter-increment: p; position: relative; padding-left: 44px; min-height: 32px; font-size: .95rem; line-height: 1.5; } .pasos-lista li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .9rem; }
.rows li a { text-decoration: underline; }
/* blog índice */
.bcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @container main (max-width: 640px) { .bcards { grid-template-columns: 1fr; } }
.bcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); overflow: hidden; color: var(--fg); min-width: 0; transition: box-shadow .2s, transform .2s; } .bcard:hover { text-decoration: none; box-shadow: var(--shadow-2); transform: translateY(-2px); }
.bcard .cv { height: 130px; background: linear-gradient(135deg, var(--navy), var(--navy-dark)); display: grid; place-items: center; position: relative; overflow: hidden; } .bcard .cv svg { width: 54px; height: 54px; } .bcard .cv img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .bcard .cv .chip { position: absolute; left: 10px; top: 10px; } .bcard .cv .pop { position: absolute; right: 10px; top: 10px; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 4px; }
.bcard .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .bcard h2 { font-size: 1.05rem; line-height: 1.3; border: 0; padding: 0; margin: 0; } .bcard p { font-size: .88rem; color: var(--muted); flex: 1; } .bcard .meta { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--line); } .bcard .meta b { color: var(--navy-ink); font-family: var(--font-display); }
.bcard.oculta { display: none; }
/* opiniones */
.revs.lista { grid-template-columns: repeat(2, 1fr); } @container main (max-width: 640px) { .revs.lista { grid-template-columns: 1fr; } }
.rev .fecha { grid-column: 1 / -1; font-size: .76rem; color: var(--muted); }
/* formulario */
.form label { display: block; font-family: var(--font-display); font-size: .82rem; font-weight: 700; color: var(--navy-ink); margin: 14px 0 5px; } .form input[type=text], .form input[type=email], .form select, .form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 16px; background: var(--surface); color: var(--fg-strong); } .form textarea { min-height: 120px; resize: vertical; } .form .ayuda { font-size: .78rem; color: var(--muted); margin-top: 4px; } .form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @container main (max-width: 560px) { .form .dos { grid-template-columns: 1fr; } }
#star-rating { display: flex; justify-content: center; gap: 6px; font-size: 2.6rem; line-height: 1; cursor: pointer; } #star-rating .star { color: var(--line); transition: color .15s; } #star-rating .star.active { color: var(--accent); }
.form textarea + div { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.form .btn { width: 100%; margin-top: 18px; font-size: 1rem; min-height: 48px; } .form button + p { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 10px; }
.hidden { display: none !important; }
.exito { text-align: center; padding: 28px 20px; margin-top: 20px; } .exito h2 { font-size: 1.4rem; margin: 0 0 8px; } .exito p { max-width: 46ch; margin: 0 auto 16px; } .exito .btn { width: auto; }
@media (max-width: 700px) { .osm-map { height: 240px; min-height: 0; } .ctabox { padding: 20px 16px; } .ctabox h2 { font-size: 1.25rem; } .ahero h1 { font-size: 1.45rem; } }
/* menú desplegable de actas (escritorio) */
.nav .dd { position: relative; } .nav .dd > a::after { content: " ▾"; font-size: .75em; } .nav .dd .menu-dd { display: none; position: absolute; top: 100%; left: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); min-width: 240px; padding: 6px; z-index: 50; }
.nav .dd:hover .menu-dd, .nav .dd:focus-within .menu-dd { display: grid; } .menu-dd a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--fg-strong); font-weight: 600; font-size: .9rem; white-space: nowrap; } .menu-dd a:hover { background: var(--surface-blue); color: var(--navy-ink); text-decoration: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: 6px; z-index: 100; } .skip:focus { left: 8px; }
.err404 { text-align: center; padding: 40px 10px; } .err404 .n { font-family: var(--font-display); font-size: 5rem; font-weight: 900; color: var(--navy-ink); line-height: 1; }

/* ===== ajustes pedidos: hero compacto, estados en naranja al pasar, bloque de ayuda ===== */
@media (min-width: 701px) {
.band-main { padding: 26px 0 22px; } .band-main .wrap { grid-template-columns: 1.3fr .72fr; gap: 26px; }
.band h1 { font-size: clamp(1.55rem, 2.5vw, 2.1rem); line-height: 1.12; margin-top: 6px; } .band .kicker { font-size: .84rem; } .band .lead { font-size: .95rem; margin-top: 8px; max-width: 62ch; } .band .ctas { margin-top: 14px; } .band .ctas .btn { padding: 10px 16px; font-size: .92rem; }
}
.quick { padding: 14px 16px 12px; border-top-width: 3px; } .quick h3 { font-size: .98rem; } .quick .sub { font-size: .78rem; margin: 2px 0 6px; } .quick label { margin: 6px 0 3px; font-size: .68rem; } .quick input { padding: 8px 10px; font-size: .9rem; } .quick .btn { margin-top: 10px; padding: 9px 14px; font-size: .9rem; }
.quick .price { margin-top: 8px; padding-top: 8px; font-size: .78rem; } .quick .price b { font-size: 1.25rem; } .quick .badges { margin-top: 8px; font-size: .7rem; gap: 4px 10px; }
@media (min-width: 701px) { .stats .wrap { padding-block: 2px; } .stat { padding: 10px 20px 10px 0; margin-right: 20px; } .stat .i { font-size: 1.25rem; } .stat b { font-size: 1.05rem; } .stat span { font-size: .76rem; } }
@media (max-width: 700px) { .band-main { padding: 20px 0 18px; } .band h1 { font-size: 1.5rem; } }
.states a, .states span { transition: background .15s, color .15s, border-color .15s; } .states a:hover, .states a:active, .states a:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }
.states a.hub { background: var(--surface-2); border-color: var(--line); color: var(--fg); } .states a.hub:hover, .states a.hub:active { background: var(--accent); border-color: var(--accent); color: #fff; }
.muni { transition: background .15s, color .15s, border-color .15s; } .muni:hover, .muni:active, .muni:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; } .muni:hover b, .muni:active b, .muni:hover small, .muni:active small { color: #fff; } .muni:hover .ico, .muni:active .ico { background: rgba(255, 255, 255, .22); color: #fff; }
.ayuda { margin-top: 40px; background: linear-gradient(135deg, var(--accent), #9a3412); color: #fff; border-radius: var(--r); padding: 24px 22px; display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: center; } @container main (max-width: 700px) { .ayuda { grid-template-columns: 1fr; } .ayuda .acc { flex-direction: row; } }
.ayuda .acc { flex-direction: column; align-items: stretch; min-width: 240px; } .ayuda .acc .btn { justify-content: center; }
.ayuda h2 { color: #fff; border: 0; padding: 0; margin: 0 0 4px; font-size: 1.35rem; } .ayuda p { color: rgba(255, 255, 255, .9); font-size: .95rem; margin: 0; } .ayuda .acc { display: flex; flex-wrap: wrap; gap: 10px; }
.ayuda .btn.wa-btn { background: #fff; color: #166534; } .ayuda .btn.wa-btn:hover { background: #ecfdf5; color: #166534; } .ayuda .btn.wa-btn svg { width: 20px; height: 20px; fill: #25d366; } .ayuda .btn.dark { background: var(--navy-dark); color: #fff; } .ayuda .btn.dark:hover { background: #000; }
.ayuda .hor { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .82rem; background: rgba(255, 255, 255, .16); border-radius: 20px; padding: 3px 10px; }
.aimg { aspect-ratio: 800 / 420; }

/* ===== correcciones: tarjeta de precio a toda la altura, lista de servicios sin precio ===== */
.pricebox { align-items: stretch; } .pricecard { display: flex; flex-direction: column; justify-content: center; } .pricecard .btn { margin-top: 16px; }
@media (min-width: 701px) { .pricecard .n { font-size: 3.4rem; } } .pricecard .inc { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); text-align: left; display: grid; gap: 7px; font-size: .8rem; line-height: 1.35; color: rgba(255, 255, 255, .88); }
.pricecard .inc li { position: relative; padding-left: 20px; } .pricecard .inc li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent-2); font-weight: 900; }
.srow { grid-template-columns: 48px 1fr auto; } @container main (max-width: 640px) { .srow { grid-template-columns: 48px 1fr; } }
.svc-tiles.cuatro { grid-template-columns: repeat(4, 1fr); } .states.cuatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .svc-tiles.cuatro, .states.cuatro { grid-template-columns: 1fr 1fr; } }
/* ===== detalles: «Actas» alineado con el resto del menú; municipios sin la inicial; títulos centrados en móvil ===== */
.states a, .states span { text-align: left; padding-left: 12px; }
.stitle small a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--gold-line); background: var(--surface-gold); color: var(--accent-ink); border-radius: 30px; font-family: var(--font-display); font-weight: 700; font-size: .76rem; line-height: 1.2; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.stitle small a:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }
.fuentes-oficiales { margin-top: 26px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 16px; } .fuentes-oficiales summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; color: var(--navy-ink); padding: 10px 0; list-style: none; display: flex; align-items: center; gap: 8px; } .fuentes-oficiales summary::-webkit-details-marker { display: none; } .fuentes-oficiales summary::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 1.3rem; transform: rotate(90deg); transition: transform .2s; } .fuentes-oficiales[open] summary::after { transform: rotate(-90deg); } .fuentes-oficiales ol { margin: 0 0 12px; padding-left: 22px; font-size: .86rem; color: var(--muted); } .fuentes-oficiales li + li { margin-top: 4px; } .fuentes-oficiales a { color: var(--navy-ink); text-decoration: underline; text-decoration-color: var(--line); }
.prose .fuentes-oficiales + .tiny { margin-top: 10px; }
.nav .dd { display: inline-flex; align-items: center; position: relative; } .nav .dd > a { display: inline-flex; align-items: center; } .nav .dd > a::after { content: "▾"; margin-left: 4px; font-size: .75em; }
.muni { padding: 11px 14px; } .muni > span:last-child { min-width: 0; }
@media (max-width: 700px) {
  .crumbs { justify-content: center; }
  .fhero { text-align: center; } .fhero .ctas { justify-content: center; }
  .ahero { text-align: center; justify-items: center; } .ahero .chip { justify-self: center !important; } .ahero .ameta { justify-content: center; }
  .welcome { text-align: center; } .welcome > p, .welcome .promises { text-align: left; } .welcome .ctas { justify-content: center; }
}
/* ===== asistente flotante de WhatsApp: mensajes rotativos, se puede mover y arrastrar a la X para cerrar (como en el sitio anterior) ===== */
#wa-fab { position: fixed; right: 16px; bottom: 18px; z-index: 58; -webkit-transform: translateZ(0); transform: translateZ(0); touch-action: none; }
@media (max-width: 700px) { #wa-fab { right: 12px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } }
#wa-fab-link { display: flex; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(37, 211, 102, .45); align-items: center; justify-content: center; position: relative; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .2s, box-shadow .2s; }
#wa-fab-link svg { width: 32px; height: 32px; pointer-events: none; } #wa-fab-link:hover { -webkit-transform: scale(1.08); transform: scale(1.08); text-decoration: none; }
#wa-fab-link .dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; background: #4ade80; border: 2px solid #fff; border-radius: 50%; -webkit-animation: waFabPulse 2s infinite; animation: waFabPulse 2s infinite; pointer-events: none; }
#wa-fab-link.dragging { cursor: grabbing; -webkit-transform: scale(1.15); transform: scale(1.15); box-shadow: 0 14px 40px rgba(37, 211, 102, .6); transition: none; }
#wa-fab-bubble { display: none; position: absolute; bottom: 70px; right: 0; width: 272px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 12px 16px 10px; font-size: .84rem; color: var(--fg); -webkit-animation: waBubbleIn .35s ease-out; animation: waBubbleIn .35s ease-out; }
#wa-fab-bubble.on { display: block; }
#wa-fab-bubble::after { content: ""; position: absolute; right: 22px; bottom: -8px; width: 14px; height: 14px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#wa-fab.izq #wa-fab-bubble { left: 0; right: auto; } #wa-fab.izq #wa-fab-bubble::after { left: 22px; right: auto; }
#wa-fab-close { position: absolute; top: 4px; right: 6px; background: transparent; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 4px 8px; }
#wa-fab-title { font-family: var(--font-display); font-weight: 700; color: var(--navy-ink); margin-bottom: 2px; padding-right: 22px; font-size: .96rem; line-height: 1.25; }
#wa-fab-desc { color: var(--muted); font-size: .8rem; line-height: 1.4; }
#wa-fab .ftip { font-size: .66rem; color: #94a3b8; margin-top: 7px; }
@media (max-width: 700px) { #wa-fab-bubble { width: 236px; font-size: .8rem; } #wa-fab-title { font-size: .9rem; } #wa-fab-desc { font-size: .76rem; } }
#wa-fab.fading-out { -webkit-animation: waFadeOut .4s ease-in forwards; animation: waFadeOut .4s ease-in forwards; pointer-events: none; }
#wa-close-zone { position: fixed; bottom: 40px; left: 0; right: 0; z-index: 57; opacity: 0; pointer-events: none; transition: opacity .25s ease; text-align: center; }
@media (max-width: 700px) { #wa-close-zone { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
#wa-close-zone.visible { opacity: 1; }
#wa-close-inner { display: inline-flex; width: 72px; height: 72px; border-radius: 50%; background: rgba(239, 68, 68, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(239, 68, 68, .4); transition: background .2s, transform .2s; color: #fff; font-size: 30px; font-weight: 300; line-height: 1; }
#wa-close-zone.hover #wa-close-inner { background: #ef4444; -webkit-transform: scale(1.2); transform: scale(1.2); box-shadow: 0 12px 40px rgba(239, 68, 68, .7); }
#wa-close-zone .txt { display: table; margin: 8px auto 0; background: rgba(15, 23, 42, .78); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 4px 11px; border-radius: 20px; }
@-webkit-keyframes waBubbleIn { from { opacity: 0; -webkit-transform: translateY(8px) scale(.96); } to { opacity: 1; -webkit-transform: translateY(0) scale(1); } }
@keyframes waBubbleIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@-webkit-keyframes waFabPulse { 0%, 100% { -webkit-transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(1.35); opacity: .5; } }
@keyframes waFabPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .5; } }
@-webkit-keyframes waFadeOut { 0% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(.3); opacity: 0; } }
@keyframes waFadeOut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #wa-fab-link .dot, #wa-fab-bubble { -webkit-animation: none; animation: none; } }
/* ===== «Conectando al sistema»: aviso breve antes de abrir el sistema (como en el sitio anterior) ===== */
#loadingOverlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(241, 245, 249, .96); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 9999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease-out; text-align: center; padding: 20px; }
#loadingOverlay.show { display: flex; opacity: 1; }
#loadingOverlay .circ { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 0 0 0 rgba(234, 88, 12, .6); -webkit-animation: loadingPulse 1.1s ease-out infinite; animation: loadingPulse 1.1s ease-out infinite; }
#loadingOverlay .circ svg { width: 32px; height: 32px; }
#loadingOverlay h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--navy-ink); margin: 0 0 4px; } #loadingOverlay p { font-size: .88rem; color: var(--muted); margin: 0; }
@-webkit-keyframes loadingPulse { 0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, .6); } 70% { box-shadow: 0 0 0 22px rgba(234, 88, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); } }
@keyframes loadingPulse { 0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, .6); } 70% { box-shadow: 0 0 0 22px rgba(234, 88, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); } }

/* ===== complementos de migración ===== */
.actualizacion { margin: 16px 0 !important; } .actualizacion b { color: var(--navy-ink); }
.fuentes-oficiales ol { font-size: .88rem; } .fuentes-oficiales a { word-break: break-word; }
.okbox { background: var(--ok-soft); border-left: 4px solid var(--ok); border-radius: var(--r); padding: 14px 18px; }
.lcols { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: stretch; }
.lcols > .tarjeta-req { order: -1; display: flex; flex-direction: column; justify-content: center; margin: 0; }
.lcols > div:not(.tarjeta-req) > h2:first-child { margin-top: 0; }
@container main (max-width: 700px) { .lcols { grid-template-columns: 1fr; } .lcols > .tarjeta-req { order: 0; } }
.tarjeta-req h3 { margin: 0 0 6px; } .grande { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: var(--navy-ink); line-height: 1; margin: 6px 0; }
.combo-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; } .combo-band h3 { margin: 0 0 4px; } .combo-band p { margin: 0; } .combo-band > a { font-weight: 700; white-space: nowrap; }
.estados-band h3 { margin: 0 0 4px; } .estados-band .rels { margin-top: 10px; } .rels a { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 7px 12px; font-size: .88rem; font-weight: 600; color: var(--navy-ink); } .rels a.mas { border-color: var(--navy); }
.prose .rel-cards a::before { content: "Guía gratuita"; display: block; font-family: var(--font-display); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); } .prose .rel-cards a small { display: none; }
.prose .faq { margin-top: 8px; } .prose details.faq + details.faq { margin-top: 6px; }
.prose .pasos-lista, .prose .rows { margin-top: 10px; }
.prose section + section { margin-top: 26px; }
.prose .ctas .btn, .prose a.btn { text-decoration: none; }

/* ===== menú móvil (16/10/2026): panel desplazable bajo la barra, sin tapar toda la pantalla ===== */
.mnav-fondo { display: none; }
@media (max-width: 960px) {
  .top { position: sticky; }
  .mnav { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 56px - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 56px - env(safe-area-inset-top, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-shadow: 0 18px 36px rgba(0, 0, 0, .4); border-top: 1px solid rgba(255, 255, 255, .1); }
  .mnav .wrap { gap: 0; padding: 4px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .mnav a { min-height: 42px; padding: 6px 8px; font-size: .96rem; }
  .mnav .grupo { display: block; padding: 10px 8px 0; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
  .mnav a.cta { margin-top: 10px; min-height: 46px; justify-content: center; }
  .mnav-fondo { display: none; position: fixed; inset: 0; background: rgba(2, 6, 23, .55); z-index: 39; }
  html.menu-abierto .mnav-fondo { display: block; }
  html.menu-abierto, html.menu-abierto body { overflow: hidden; }
  html.menu-abierto #wa-fab, html.menu-abierto .mbar { display: none !important; }
  .menu[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); }
}

/* ===== octubre 2026: firma de confianza, ilustraciones, herramientas ===== */
.autor { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--r); padding: 16px 18px; margin: 24px 0 8px; box-shadow: var(--shadow); }
.autor img { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--gold-line); background: var(--navy-dark); }
.autor .an { font-size: .8rem; color: var(--muted); } .autor .an b { color: var(--navy-ink); font-family: var(--font-display); font-size: 1.08rem; } .autor .ac { font-size: .82rem; font-weight: 700; color: var(--accent-ink); margin: 2px 0 6px; font-family: var(--font-display); }
.autor p { margin: 0 0 8px; font-size: .92rem; line-height: 1.55; color: var(--fg); } .autor .al { font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; } .autor .al a { font-weight: 700; color: var(--navy-ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.ameta a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--accent); }
@media (max-width: 560px) { .autor { flex-direction: column; gap: 10px; } .autor img { width: 56px; height: 56px; } }
figure.ilus { margin: 0 0 22px; } figure.ilus img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; background: #fff; } figure.ilus figcaption { font-size: .78rem; color: var(--muted); margin-top: 6px; text-align: center; }
.prose figure.ilus { margin: 18px 0 22px; }
/* tarjetas del índice del blog: la miniatura completa (antes se recortaba a 130 px) */
.bcard .cv { height: auto; aspect-ratio: 800 / 420; }
/* quién está detrás (portada) */
.equipo-strip { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--r); padding: 18px 20px; margin-top: 14px; box-shadow: var(--shadow); }
.equipo-strip img { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--gold-line); } .equipo-strip h3 { font-size: 1.12rem; margin: 0 0 4px; } .equipo-strip h3 small { display: block; font-size: .78rem; color: var(--accent-ink); font-weight: 700; margin-top: 2px; } .equipo-strip p { margin: 0; font-size: .92rem; color: var(--fg); line-height: 1.5; } .equipo-strip .btn { white-space: nowrap; }
@container main (max-width: 720px) { .equipo-strip { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
/* quiénes somos: emblema */
.prose img.emblema-q { float: right; width: 120px; height: 120px; margin: 0 0 12px 18px; border-radius: 50%; border: 2px solid var(--gold-line); } @media (max-width: 560px) { .prose img.emblema-q { float: none; display: block; margin: 0 auto 12px; } }
/* herramientas */
.tool { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); padding: 20px 22px; margin: 18px 0; box-shadow: var(--shadow); }
.tool h2 { font-size: 1.25rem; margin: 0 0 12px; border: 0; padding: 0; }
.tool label { display: flex; flex-direction: column; gap: 5px; font-size: .88rem; font-weight: 700; color: var(--navy-ink); font-family: var(--font-display); } .tool label small { font-weight: 500; color: var(--muted); font-family: var(--font-body); }
.tool input { font: inherit; font-size: 1.15rem; letter-spacing: .08em; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); width: 100%; box-sizing: border-box; color: var(--fg-strong); font-family: ui-monospace, Menlo, Consolas, monospace; }
.tool input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.tool .acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; align-items: center; } .tool .acciones .tiny { margin: 0; }
.tool-res { margin-top: 16px; border-radius: var(--r); padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--line); display: none; } .tool-res.show { display: block; }
.tool-res .big { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--navy-ink); line-height: 1.2; margin: 0 0 8px; } .tool-res p { margin: 0 0 8px; } .tool-res ul { margin: 6px 0 0; padding-left: 20px; } .tool-res li + li { margin-top: 4px; }
.tool-res.ok { background: var(--ok-soft); border-color: #86efac; } .tool-res.bad { background: var(--bad-soft); border-color: #fca5a5; } .tool-res.warn { background: var(--warn-soft); border-color: var(--gold-line); }
.partes { display: grid; grid-template-columns: 1.3fr 1.7fr .7fr .8fr 1.1fr .9fr 1fr; gap: 6px; margin: 12px 0 8px; } .parte { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px; text-align: center; min-width: 0; }
.parte b { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: .06em; color: var(--navy-ink); } .parte small { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; margin-top: 2px; font-family: var(--font-display); } .parte.mal b { color: var(--bad); } .parte.dv { border-color: var(--accent); background: var(--surface-gold); }
.tool .nota { font-size: .82rem; color: var(--muted); margin-top: 10px; }
.herr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .herr-cards.una { grid-template-columns: 1fr; } .herr { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); } .herr .ico { width: 42px; height: 42px; border-radius: 10px; background: var(--surface-gold); border: 1px solid var(--gold-line); display: grid; place-items: center; font-size: 1.2rem; }
.herr h3 { font-size: 1.08rem; margin: 4px 0 0; } .herr p { margin: 0; color: var(--muted); font-size: .92rem; flex: 1; } .herr a.btn { align-self: flex-start; margin-top: 8px; }
.widget.herrw ul { list-style: none; margin: 0; padding: 0; } .widget.herrw li { padding: 6px 0; } .widget.herrw a { font-weight: 700; color: var(--navy-ink); } .widget.herrw small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
@media (max-width: 720px) { .partes { grid-template-columns: repeat(3, 1fr); gap: 5px; } .parte { padding: 7px 3px; } .parte b { font-size: .95rem; letter-spacing: .02em; } .parte small { font-size: .5rem; letter-spacing: 0; overflow-wrap: anywhere; } .herr-cards { grid-template-columns: 1fr; } }

/* ===== directorio: icono en cada enlace (oct 2026) ===== */
.dir li a .ico { flex: none; width: 1.55em; text-align: center; font-size: .95rem; line-height: 1; }
.dir li a .lbl { flex: 1; min-width: 0; }
.dir li a .sig { flex: none; min-width: 2.6em; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: .62rem; letter-spacing: .04em; color: var(--navy-ink); background: var(--surface-blue); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; line-height: 1.2; }
.dir li a:hover .sig { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ===== tabla de vigencia (guía «acta actualizada»): en celular, cada fila es una tarjeta (oct 2026) ===== */
@media (max-width: 640px) {
  .tabla-vig table, .tabla-vig tbody, .tabla-vig tr, .tabla-vig td { display: block; width: auto; }
  .tabla-vig thead { display: none; }
  .tabla-vig tr { padding: 10px 14px; border-bottom: 1px solid var(--line); } .tabla-vig tr:last-child { border-bottom: 0; }
  .tabla-vig td { border: 0 !important; padding: 2px 0 !important; background: transparent !important; }
  .tabla-vig td:first-child { font-size: 1rem; margin-bottom: 4px; }
  .tabla-vig td[data-l]::before { content: attr(data-l) ": "; font-weight: 700; color: var(--muted); }
}

/* ===== herramientas «¿qué acta me piden?» y «¿cuánto cuesta?» (oct 2026) ===== */
.tool select { font: inherit; font-size: 1.05rem; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); width: 100%; box-sizing: border-box; color: var(--fg-strong); }
.tool select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.grupo-t { font-family: var(--font-display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.opc { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font: inherit; text-align: left; color: var(--fg-strong); font-weight: 600; font-size: .9rem; line-height: 1.25; }
.opc .i { font-size: 1.25rem; line-height: 1; flex: none; } .opc:hover { border-color: var(--navy); } .opc.sel { border-color: var(--accent); background: var(--surface-gold); box-shadow: inset 0 0 0 1px var(--accent); }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } @media (max-width: 720px) { .res-grid { grid-template-columns: 1fr; } }
.res-b { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; } .res-b h3 { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; font-family: var(--font-display); }
.res-b.ancho { grid-column: 1 / -1; } .res-b.ancho ul { columns: 2; column-gap: 24px; } @media (max-width: 720px) { .res-b.ancho ul { columns: 1; } }
.tool-res .enl a.guia { background: var(--surface-gold); border-color: var(--gold-line); color: var(--accent-ink); }
.res-b ul { margin: 0; padding-left: 20px; } .res-b li { margin: 0 0 4px; } .res-b p { margin: 0; } .res-b li.ok { list-style: "✅ "; } .res-b li.no { list-style: "❌ "; }
.tool-res .enl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .tool-res .enl a { display: inline-block; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .86rem; font-weight: 600; color: var(--navy-ink); } .tool-res .enl a:hover { border-color: var(--navy); text-decoration: none; }
.tool-res .fuentes-r { margin-top: 10px; font-size: .84rem; color: var(--muted); } .tool-res .fuentes-r a { color: var(--accent-ink); }
.rutas3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; } @media (max-width: 860px) { .rutas3 { grid-template-columns: 1fr; } }
.ruta { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; } .ruta h3 { font-size: .95rem; margin: 0 0 6px; } .ruta .n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--navy-ink); line-height: 1.1; } .ruta p { margin: 4px 0 0; font-size: .9rem; } .ruta.nos { border-top: 3px solid var(--accent); }
.herr-cards.tres { grid-template-columns: repeat(3, 1fr); } @media (max-width: 860px) { .herr-cards.tres { grid-template-columns: 1fr; } }
.tabla-wrap.compacta table { font-size: .86rem; } .tabla-wrap.compacta td, .tabla-wrap.compacta th { padding: 7px 9px; }

/* ===== verificador de CURP · paso 2: consulta en RENAPO y tarjeta de resultado (oct 2026) ===== */
.paso2{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
.paso2 h3{font-family:var(--font-display);font-size:1.1rem;color:var(--navy-ink);margin:8px 0 6px;line-height:1.3}
.paso2>p{margin:0}
.tool .p2-check{display:flex;flex-direction:row;gap:10px;align-items:flex-start;margin:12px 0 0;font-size:.92rem;font-family:inherit;font-weight:400;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.tool .p2-check span{font-weight:600;color:var(--fg-strong)}
.p2-check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.p2-cargando{display:flex;gap:12px;align-items:center;margin-top:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-weight:600;color:var(--navy-ink)}
.spin{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:gaspin .8s linear infinite;flex:none}
@keyframes gaspin{to{transform:rotate(360deg)}}
.rcard{position:relative;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);overflow:hidden}
.rc-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:14px 18px;background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff}
.rc-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#fff}
.rc-brand .mark{width:26px;height:26px;border-radius:6px}
.rc-brand .mark svg{width:17px;height:17px}
.rc-brand em{color:var(--accent-2);font-style:normal}
.rc-tit{flex:1 1 220px;min-width:0}
.rc-tit b{display:block;font-family:var(--font-display);font-size:1rem;line-height:1.25}
.rc-tit span{font-size:.78rem;opacity:.85}
.rc-badge{font-family:var(--font-display);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:4px 8px;white-space:nowrap}
.rc-body{padding:16px 18px}
.rc-estatus{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.rc-estatus small{font-family:var(--font-display);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rc-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:1.02rem;padding:7px 13px;border-radius:8px;border:1px solid}
.rc-status.ok{background:var(--ok-soft);color:var(--ok);border-color:#86efac}
.rc-status.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--gold-line)}
.rc-status.bad{background:var(--bad-soft);color:var(--bad);border-color:#fca5a5}
.rc-exp{margin:10px 0 0;font-size:.92rem;color:var(--fg)}
.rc-curp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.3rem;font-weight:700;letter-spacing:.14em;color:var(--navy-ink);margin:14px 0 0;overflow-wrap:anywhere}
.rc-curp small{display:block;font-family:var(--font-display);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.rc-datos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 0}
@media(max-width:860px){.rc-datos{grid-template-columns:repeat(2,1fr)}}
.rc-datos div{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px;min-width:0}
.rc-datos .ancho{grid-column:1/-1}
.rc-datos dt{font-family:var(--font-display);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.rc-datos dd{margin:3px 0 0;font-weight:700;color:var(--fg-strong);overflow-wrap:anywhere;line-height:1.3}
.rc-acta{margin-top:16px;background:var(--surface-gold);border:1px solid var(--gold-line);border-radius:10px;padding:14px 16px}
.rc-acta h3{font-family:var(--font-display);font-size:1rem;color:var(--accent-ink);margin:0}
.rc-acta .rc-datos{margin-top:10px}
.rc-acta .rc-datos div{background:#fff}
.rc-cta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:12px}
.rc-cta .tiny{margin:0;flex:1 1 220px}
.rc-cta .btn{white-space:normal;text-align:center;line-height:1.3}
.rc-foot{padding:12px 18px 16px;border-top:1px solid var(--line);background:var(--surface-2);font-size:.84rem;color:var(--muted)}
.rc-foot p{margin:0 0 10px}
.rc-acciones{display:flex;flex-wrap:wrap;gap:8px}
.rc-acciones .btn{padding:8px 12px;font-size:.86rem}
.p2-err{margin-top:14px;padding:14px 16px;border-radius:var(--r);border:1px solid}
.p2-err.bad{background:var(--bad-soft);border-color:#fca5a5}
.p2-err.warn{background:var(--warn-soft);border-color:var(--gold-line)}
.p2-err b.t{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--navy-ink);margin-bottom:4px}
.p2-err p{margin:0 0 6px}
@media(max-width:720px){
  .tool{padding:16px 12px}.tool-res{padding:12px 10px}
  .rcard{margin:14px -9px 0;border-radius:8px}.rc-head{padding:12px 12px}.rc-body{padding:12px}.rc-foot{padding:12px 12px 14px}
  .rc-curp{font-size:1.05rem;letter-spacing:.06em}.rc-datos{gap:8px}.rc-datos div{padding:8px 9px}.rc-datos dd{font-size:.95rem}
  .rc-cta .btn{width:100%}.rc-badge{white-space:normal}.rc-acciones .btn{flex:1 1 45%}
}
@media print{
  header.top,.band,.foot,.mbar,#wa-fab,.crumbs,.sidebar,.prose,.blk,.ahero,.autor,.ctabox,.related,.tool>h2,.tool>label,.tool>.acciones,.tool>noscript,#v-res>*:not(#paso2),#paso2>*:not(#p2-res),.rc-acciones,.skip{display:none!important}
  .layout{display:block;padding:0}.main{box-shadow:none;padding:0}.tool{border:0;padding:0;margin:0}.tool-res{background:#fff;border:0;padding:0}.paso2{border:0;padding:0;margin:0}
  .rcard{box-shadow:none;border:1px solid #cbd5e1}.rc-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* entrega 6 (28 oct 2026): nombres largos en dos líneas en la cuadrícula de municipios; listas con icono sin viñeta */
.states a,.states span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
@media (max-width:640px){.states a,.states span{font-size:.8rem;padding:9px 8px}}
.prose .lista-iconos{list-style:none;padding-left:2px}
.prose .lista-iconos li{padding-left:0}

/* entrega 6b (28 oct 2026): títulos sin hueco a la derecha. Hasta hoy «text-wrap: balance» repartía las palabras para que
   las líneas midieran parecido (primera línea corta). Ahora la primera línea se llena: «pretty» (Chrome/Edge 117+, Safari 26+)
   solo evita una palabra sola al final; donde no existe (Firefox, Safari 17.4 a 18) vale la línea anterior, «wrap» = corte
   normal, que también llena la primera línea. La entradilla de los encabezados ocupa todo el ancho (antes, 70 caracteres). */
h1, h2, .prose h3 { text-wrap: wrap; text-wrap: pretty; }
.ahero .lead, .fhero .lead, .band .lead { max-width: none; }