/* ============================================================ TESORA 2.0 — Design system (DAN-187) PIEL HÍBRIDA (decisión Daniel 2026-08-13): base clara papel + identidad Tesora navy/oro + .section-dark para media, citas pilar y CTA final. serif headings / sans cuerpo · mobile-first 390px Regla dura: cero orígenes externos (fonts, CDN, imágenes). ARQUITECTURA: los componentes NO usan colores crudos, usan la capa semántica (--fg, --bg-card, --line-c, --accent...). Por eso .section-dark solo re-vincula esos tokens y todo se adapta solo. ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ /* Base clara (papel) */ --paper:#ffffff; --surface:#faf7f3; --surface-2:#f3ede5; --line:#e4ddd5; --ink-900:#14100d; --ink-700:#3a322b; --ink-500:#6b6058; --ink-300:#a79c93; /* Identidad Tesora */ --navy-950:#060d1a; --navy-900:#0a1628; --navy-800:#101f38; --navy-700:#182a45; --gold:#d4a94e; --gold-light:#e8c476; --gold-dark:#b08a35; --gold-ink:#8a5f16; /* oro legible como TEXTO sobre claro (AA) */ /* Texto sobre fondos oscuros */ --ink-inv:#ece9e0; --muted-inv:#93a4ba; /* Semánticos de estado */ --ok:#1f7a53; --warn:#a9722a; --warn-ink:#8a5a18; /* ámbar legible como TEXTO chico sobre claro (AA) */ --danger:#97302a; --serif:Georgia,'Times New Roman',serif; --sans:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --btn-ink:#1a1408; /* texto sobre oro */ --shell-w:1080px; --radius:14px; --radius-sm:10px; --header-h:56px; --shadow-1:0 1px 2px rgba(20,16,13,.06); --shadow-2:0 4px 16px rgba(20,16,13,.08); /* ---- CAPA SEMÁNTICA (modo claro por defecto) ---- */ --fg:var(--ink-900); /* headings y texto fuerte */ --fg-2:var(--ink-700); /* cuerpo */ --fg-muted:var(--ink-500); /* secundario */ --bg:var(--surface); --bg-card:var(--paper); --bg-sunken:var(--surface-2); --line-c:var(--line); --accent:var(--gold-ink); /* oro como TEXTO */ --accent-deco:var(--gold); /* oro como borde/icono/relleno */ --accent-soft:rgba(212,169,78,.14); --heading:var(--navy-900); } /* Bloques oscuros: solo re-vinculan la capa semántica */ .section-dark{ --fg:var(--ink-inv); --fg-2:var(--ink-inv); --fg-muted:var(--muted-inv); --bg:var(--navy-900); --bg-card:var(--navy-800); --bg-sunken:var(--navy-950); --line-c:rgba(212,169,78,.18); --accent:var(--gold-light); --accent-deco:var(--gold); --accent-soft:rgba(212,169,78,.10); --heading:var(--ink-inv); background:var(--navy-900); color:var(--ink-inv); } /* Variante con brillo dorado (tinta de luz sobre azul) */ .section-dark.is-glow{ background: radial-gradient(ellipse 80% 60% at 70% 15%,rgba(212,169,78,.12),transparent), radial-gradient(ellipse 60% 50% at 15% 95%,rgba(24,42,69,.7),transparent), var(--navy-950); } /* Fondo de marca: imagen con velo navy (assets/brand/*.jpg) */ .section-dark.is-photo{ background-color:var(--navy-950); background-size:cover; background-position:center; } .section-dark.is-photo>*{position:relative;z-index:1} .section-dark.is-photo::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(6,13,26,.52),rgba(6,13,26,.70)); } .section-dark.is-photo{position:relative;isolation:isolate} /* La lectura sobre foto NO se sostiene tapando la foto, se sostiene dandole borde oscuro a la letra: la sombra oscurece 3px alrededor del glifo y deja el resto de la imagen intacto. Se hereda, por eso va en el contenedor. Las tarjetas tienen fondo propio y opaco: ahi la sombra solo ensucia. */ .section-dark.is-photo{text-shadow:0 1px 3px rgba(0,0,0,.92),0 0 18px rgba(0,0,0,.6)} /* Sobre foto, el gris apagado es el que sufre: con el velo viejo iba sobrado y con el nuevo queda al filo. Un paso mas claro SOLO aqui — sigue leyendose como secundario y gana punto y medio de contraste. Medido: el peor caso de las seis fotos pasa de 2.04:1 a 5.12:1 con la sombra puesta. */ .section-dark.is-photo{--fg-muted:#aab6c6} .section-dark.is-photo .card, .section-dark.is-photo .btn-primary{text-shadow:none} /* ---------- 2. RESET LIGERO ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--surface); color:var(--ink-700); font-family:var(--sans); font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0} ul[class],ol[class]{padding:0;list-style:none} img,svg,video{max-width:100%;height:auto;display:block} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} table{border-collapse:collapse} hr{border:0;border-top:1px solid var(--line-c);margin:32px 0} [hidden]{display:none !important} /* ---------- 3. TIPOGRAFÍA ---------- */ h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--heading)} h1{font-size:clamp(1.9rem,4.5vw + 1rem,2.9rem);line-height:1.14} h2{font-size:clamp(1.45rem,2.4vw + .9rem,2.05rem)} h3{font-size:1.18rem} h4{font-size:1.02rem} .t-display{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5.5vw + 1rem,3.25rem);line-height:1.1;letter-spacing:-.015em;color:var(--heading)} .t-h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.65rem,3vw + .9rem,2.25rem);line-height:1.18;color:var(--heading)} .t-h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.35rem,1.6vw + 1rem,1.65rem);line-height:1.25;color:var(--heading)} .t-h3{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.3;color:var(--heading)} .t-lead{font-size:clamp(1.08rem,.6vw + 1rem,1.22rem);line-height:1.6;color:var(--fg-2)} .t-sm{font-size:.9rem;line-height:1.6} .t-xs{font-size:.8rem;line-height:1.55} .t-muted{color:var(--fg-muted)} .gold{color:var(--accent)} /* Kicker / eyebrow */ .eyebrow,.t-eyebrow{ font-family:var(--sans);font-size:.8rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--accent); } .prose-w{max-width:58ch} .cta-note{font-size:.8rem;color:var(--fg-muted);margin-top:10px} a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} a:hover{color:var(--gold-dark)} .section-dark a:hover{color:var(--gold)} nav a,.logo,a.btn,a.btn-link,a.card{text-decoration:none} strong{color:var(--fg)} /* ---------- 4. LAYOUT ---------- */ .shell{width:100%;max-width:var(--shell-w);margin-inline:auto;padding-inline:20px} @media(min-width:768px){.shell{padding-inline:32px}} .sec{padding-block:56px} @media(min-width:1024px){.sec{padding-block:96px}} .sec-alt{background:var(--paper)} .sec-deep{background:var(--surface-2)} /* Banda del dato — BANNER SUPERIOR (Daniel, 14-ago). Antes era la seccion 01b pegada bajo el hero, con el numero a 104px. Al subirla arriba del header cambia su trabajo: ya no es una pausa en el recorrido, es lo primero que se ve y tiene que ceder el paso rapido. Por eso el numero baja a 40px y el texto va a su lado en vez de debajo: la banda entera mide ~64px y no empuja el hero fuera de la primera pantalla, que es lo unico que no puede pasar aqui. flex-wrap deja que en movil el texto caiga bajo el numero sin apretarlo. */ .banda-dato{border-bottom:1px solid rgba(212,169,78,.22)} .banda-dato-row{ display:flex;align-items:baseline;gap:14px; padding-block:12px;flex-wrap:wrap; } .banda-dato-num{ font-family:var(--serif);font-weight:700; font-size:clamp(30px,7vw,40px);line-height:1;letter-spacing:-.02em; color:var(--gold-light);flex:0 0 auto; } .banda-dato-txt{font-size:15px;line-height:1.45;max-width:78ch} .banda-dato-src{display:block;font-size:12px;color:var(--muted-inv);margin-top:2px} @media(min-width:768px){ .banda-dato-row{padding-block:14px;gap:18px;flex-wrap:nowrap} .banda-dato-txt{font-size:16px} } /* Hero claro con destello dorado sutil */ .sec-hero{ background: radial-gradient(ellipse 70% 55% at 78% 10%,rgba(212,169,78,.13),transparent), var(--surface); } .grid-2,.grid-3,.grid-4{display:grid;gap:16px} @media(min-width:768px){ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} } @media(min-width:1024px){ .grid-2,.grid-3,.grid-4{gap:24px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} } .split{display:grid;gap:40px} @media(min-width:1024px){.split{grid-template-columns:7fr 5fr;align-items:center;gap:56px}} .rail{display:grid;gap:16px} @media(max-width:767px){ .rail{grid-auto-flow:column;grid-auto-columns:85%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px} .rail>*{scroll-snap-align:start} } @media(min-width:768px){.rail{grid-template-columns:repeat(3,1fr)}} /* ---------- 5. HEADER / NAV ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .site-header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-h)} /* Touch target ≥44px (decisión 7, DAN-187): el texto medía 33px de alto. inline-flex + min-height agrandan el área tocable sin tocar color ni tipografía. 44px < --header-h (56px), así que la barra no crece. */ .logo{ display:inline-flex;align-items:center;min-height:44px; font-family:var(--serif);font-weight:700;font-size:1.25rem; letter-spacing:.1em;color:var(--navy-900); } a.logo:hover{color:var(--gold-ink)} .nav-desktop{display:none} @media(min-width:1024px){.nav-desktop{display:flex;align-items:center;gap:28px}} .nav-desktop a{font-size:.92rem;font-weight:600;color:var(--ink-700);text-decoration:none} .nav-desktop a:hover{color:var(--gold-ink)} .btn-nav{min-height:44px;padding:9px 18px;font-size:.92rem} .burger{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;color:var(--navy-900)} @media(min-width:1024px){.burger{display:none}} .menu-movil{border-top:1px solid var(--line);background:var(--paper)} @media(min-width:1024px){.menu-movil{display:none !important}} .menu-movil nav{padding-block:16px} .menu-movil a{ display:flex;align-items:center;min-height:56px; font-weight:600;color:var(--ink-900);border-bottom:1px solid var(--line);text-decoration:none; } .menu-movil a:hover{color:var(--gold-ink)} .menu-movil a.menu-sec{font-weight:400;font-size:.9rem;color:var(--ink-500)} .menu-movil a.btn{border-bottom:0;margin-top:16px} /* ---------- 6. BOTONES ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:12px 24px;border-radius:var(--radius-sm); font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.2; text-align:center;cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease; } .btn-primary{ background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); color:var(--btn-ink); box-shadow:0 3px 14px rgba(176,138,53,.28); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(176,138,53,.4);color:var(--btn-ink)} .btn-ghost{border:1px solid var(--navy-700);color:var(--navy-800);background:transparent} .btn-ghost:hover{background:rgba(10,22,40,.05);color:var(--navy-900)} .section-dark .btn-ghost{border-color:rgba(212,169,78,.45);color:var(--gold-light)} .section-dark .btn-ghost:hover{background:rgba(212,169,78,.10);color:var(--gold-light)} .btn-block{width:100%} .btn-link{ display:inline-flex;align-items:center;gap:6px;min-height:44px; font-weight:600;font-size:.95rem;color:var(--accent);cursor:pointer;text-decoration:none; } .btn-link:hover{color:var(--gold-dark)} .section-dark .btn-link:hover{color:var(--gold)} .btn-link svg{flex:0 0 auto} /* ---------- 7. TARJETAS ---------- */ .card{ background:var(--bg-card); border:1px solid var(--line-c); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow-1); } .section-dark .card{box-shadow:none} @media(min-width:768px){.card{padding:28px}} /* Tarjeta-paso clicable (Daniel, 14-ago): solo los pasos 01 y 02 tienen destino. El problema de diseno no es el clic, es que 03 y 04 se ven identicas y no lo tienen: sin una senal visible, el visitante prueba las cuatro y dos no responden. Esa senal es .paso-ir. Va con margin-top:auto y la tarjeta en flex-column para que la flecha quede al ras de abajo en las cuatro columnas, aunque el texto de cada paso mida distinto. */ a.card-paso{ display:flex;flex-direction:column; color:inherit;text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } a.card-paso:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:rgba(212,169,78,.55); } a.card-paso:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .paso-ir{ display:flex;align-items:center;gap:6px; margin-top:auto;padding-top:16px; font-weight:600;font-size:14px;color:var(--gold-ink); } .paso-ir .ico{width:16px;height:16px;transition:transform .18s ease} a.card-paso:hover .paso-ir .ico{transform:translateX(3px)} @media(prefers-reduced-motion:reduce){ a.card-paso,.paso-ir .ico{transition:none} a.card-paso:hover{transform:none} a.card-paso:hover .paso-ir .ico{transform:none} } .card-gold{ border-color:rgba(212,169,78,.5); background:linear-gradient(160deg,rgba(212,169,78,.10),rgba(212,169,78,.02)),var(--bg-card); } .card-muted{ border-color:var(--line-c); background:var(--bg-sunken); box-shadow:none; } /* ---------- 8. CHIPS, TAGS, NOTAS ---------- */ .chip{ display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px; font-size:.75rem;font-weight:600;letter-spacing:.02em; border:1px solid var(--line-c);color:var(--fg-muted); } .chip-ok{color:var(--ok);border-color:rgba(31,122,83,.4)} .chip-demo{color:var(--gold-ink);border-color:rgba(212,169,78,.55);background:rgba(212,169,78,.10)} .section-dark .chip-demo{color:var(--gold-light)} /* Semáforo de estado (/estado-de-funciones) */ .tag{ display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px; font-size:.8rem;font-weight:600;border:1px solid; } .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto} .tag-ok{color:var(--ok);border-color:rgba(31,122,83,.4);background:rgba(31,122,83,.08)} /* Texto de .8rem: necesita 4.5:1. --warn da 3.5-3.7:1 sobre papel; --warn-ink sube a 5:1. */ .tag-warn{color:var(--warn-ink);border-color:rgba(169,114,42,.45);background:rgba(169,114,42,.09)} .tag-soon{color:var(--ink-500);border-color:var(--line);background:var(--surface-2)} .section-dark .tag-ok{color:#54b87f} .section-dark .tag-warn{color:var(--gold-light)} .section-dark .tag-soon{color:var(--muted-inv);border-color:rgba(147,164,186,.35);background:rgba(147,164,186,.07)} /* Notas con icono */ .note{ display:flex;gap:10px;align-items:flex-start; padding:14px 16px;border-radius:var(--radius-sm); font-size:.9rem;line-height:1.55;border:1px solid;max-width:65ch;color:var(--fg-2); } .note-info{border-color:var(--line-c);background:var(--bg-sunken)} .note-ok{border-color:rgba(31,122,83,.3);background:rgba(31,122,83,.07)} .note-pend{border-color:rgba(169,114,42,.35);background:rgba(169,114,42,.08)} .note-info>[aria-hidden]{color:var(--fg-muted)} .note-ok>[aria-hidden]{color:var(--ok)} .note-pend>[aria-hidden]{color:var(--warn)} .section-dark .note{color:var(--ink-inv)} .section-dark .note-pend>[aria-hidden]{color:var(--gold-light)} /* ---------- 9. TABLAS COMPARATIVAS (.tbl = wrapper con scroll-x) ---------- */ .tbl{ overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--line-c);border-radius:var(--radius); background:var(--bg-card); } .tbl table{width:100%;min-width:560px;font-size:.93rem} .tbl caption{text-align:left;padding:16px;font-family:var(--serif);font-size:1.05rem;color:var(--heading)} .tbl th{ font-family:var(--sans);font-size:.78rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--accent); text-align:left;padding:14px 16px;border-bottom:1px solid var(--line-c); background:var(--bg-sunken); } .tbl td{padding:13px 16px;border-bottom:1px solid var(--line-c);vertical-align:top;color:var(--fg-2)} .tbl tbody tr:last-child td{border-bottom:0} .tbl .cell-ok{color:var(--ok);font-weight:600} .tbl .cell-no{color:var(--fg-muted)} .section-dark .tbl .cell-ok{color:#54b87f} /* ---------- 10. ACORDEÓN (.acc) ---------- */ .acc{border-bottom:1px solid var(--line-c)} .acc-btn{ display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px; min-height:56px;padding:16px 2px; border-top:1px solid var(--line-c); color:var(--fg);font-weight:600;font-size:1rem;line-height:1.4;text-align:left; } .acc-btn:hover{color:var(--gold-ink)} .section-dark .acc-btn:hover{color:var(--gold-light)} .acc-btn svg{flex:0 0 auto;color:var(--accent-deco);transition:transform .2s ease} .acc-btn[aria-expanded="true"] svg{transform:rotate(45deg)} .acc-panel{padding:0 2px 18px;color:var(--fg-muted);font-size:.95rem;max-width:65ch} /* ---------- 11. OPCIONES DE DIAGNÓSTICO (.opt) ---------- */ .opt{ display:flex;align-items:center;gap:14px;width:100%;min-height:56px; padding:14px 16px;text-align:left;font-size:1rem;line-height:1.4; background:var(--paper);border:1px solid var(--line); border-radius:12px;color:var(--ink-900); box-shadow:var(--shadow-1); transition:border-color .15s ease,background .15s ease; } .opt:hover{border-color:var(--gold)} .opt[aria-checked="true"]{border-color:var(--gold-dark);background:rgba(212,169,78,.10);box-shadow:0 0 0 1px var(--gold-dark) inset} .opt-box{ flex:0 0 auto;width:22px;height:22px;border-radius:6px; border:1.5px solid var(--ink-300); display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--gold-ink); background:var(--paper); } .opt[aria-checked="true"] .opt-box{border-color:var(--gold-dark);background:var(--gold);color:var(--btn-ink)} .opt-radio{border-radius:50%} /* Icono del tipo de patrimonio dentro de la opción */ .opt-ico{flex:0 0 auto;width:24px;height:24px;color:var(--navy-700)} .opt[aria-checked="true"] .opt-ico{color:var(--gold-dark)} /* ---------- 12. PROGRESO (.dots / .bar) ---------- */ .dots{display:flex;gap:6px} .dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-300);display:inline-block} .dot.on{background:var(--gold-dark);border-color:var(--gold-dark)} .bar{height:3px;background:var(--line)} .bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-dark),var(--gold));transition:width .3s ease} /* ---------- 13. STICKY CTA (móvil; .show la revela via JS) ---------- */ /* z-index 61, uno arriba de .burbuja-arq (60): la burbuja se inyecta al final del body, asi que con el mismo z-index ganaba por orden de DOM y capturaba el toque destinado al boton. Con 61 la barra pinta encima aunque haya un frame de desfase mientras la burbuja sube. (P0-2 de la auditoria 20-ago.) */ .sticky-cta{ position:fixed;left:0;right:0;bottom:0;z-index:61; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.97); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-top:1px solid var(--line); box-shadow:0 -2px 14px rgba(20,16,13,.08); transform:translateY(110%); transition:transform .25s ease; } .sticky-cta.show{transform:translateY(0)} .sticky-cta .btn{width:100%} @media(min-width:1024px){.sticky-cta{display:none}} /* ---------- 14. FOOTER (siempre oscuro: cierra la página con la marca) ---------- */ .site-footer{ background:var(--navy-950); border-top:1px solid rgba(212,169,78,.2); padding:48px 0 120px; /* espacio inferior para la sticky-cta en móvil */ color:var(--muted-inv); } @media(min-width:1024px){.site-footer{padding-bottom:48px}} .site-footer .eyebrow{color:var(--gold)} .foot-grid{display:grid;gap:32px} @media(min-width:768px){.foot-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1024px){.foot-grid{grid-template-columns:repeat(4,1fr)}} .foot-grid .eyebrow{font-size:.72rem} /* gap:0 — cada enlace ya mide 44px de alto y el texto queda centrado dentro: con los 8px de antes la lista se separaba de más. Los 44px sustituyen al gap. */ .foot-grid ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:0} /* Touch target ≥44px (decisión 7, DAN-187): antes 19px. Sin cambio de color ni de tamaño de letra; solo crece el área tocable. */ .foot-grid a{ display:inline-flex;align-items:center;min-height:44px; color:var(--ink-inv);font-size:.9rem;text-decoration:none; } .foot-grid a:hover{color:var(--gold-light)} .foot-brand .logo{color:var(--gold)} .foot-brand p+p{margin-top:12px;max-width:32ch} .foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(147,164,186,.2)} .foot-bottom a{color:var(--muted-inv);text-decoration:underline} .foot-bottom a:hover{color:var(--gold-light)} .foot-bottom p+p{margin-top:12px;max-width:70ch} /* ---------- 15. VIDEO ---------- */ /* r22: altura reservada — el poster llega tarde en 4G y sin aspect-ratio todo salta (CLS) */ .video{aspect-ratio:16/9;width:100%; width:100%;display:block;background:var(--navy-950); border:1px solid var(--line-c);border-radius:var(--radius); } /* ---------- 15-BIS. MAPA MENTAL DEL HERO ---------- */ .mapa{ position:relative;background:var(--paper); border:1px solid var(--line);border-radius:var(--radius); padding:20px;box-shadow:var(--shadow-2); } /* Franja del mapa (18-ago-2026): el hero quedo en una columna y el mapa bajo a su propia banda, centrada. El tope de 660px sale de una cuenta, no del gusto: el arte trae el rotulo a 19px sobre 1254, de modo que a 660 de ancho se lee a 13.3px reales (el piso del sitio son 12) y la figura mide 724px de alto, que todavia se abarca de un vistazo. Mas ancho = rotulo mas grande pero mapa que ya no cabe en pantalla. */ .mapa-ancho,.mapa-banda>.note{max-width:620px;margin-inline:auto} .mapa-leyenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:.8rem;color:var(--ink-500)} .mapa-leyenda span{display:inline-flex;align-items:center;gap:7px} .mapa-leyenda i{width:11px;height:11px;border-radius:50%;flex:0 0 auto} .mapa-leyenda .li-si{border:2px solid var(--navy-900)} .mapa-leyenda .li-no{border:2px dashed var(--ink-300)} /* Nodos SVG. 13.5px y no 12.5: a 375px la figura mide 293 reales (escala 0.916) y el rotulo caia a 11.4px, debajo del piso de 12px que este mismo bloque exige. El rediseno del 18-ago (chip + rotulo debajo, en vez de pildora con el texto adentro) libero el ancho que hacia falta: el rotulo mas largo, "Fondo de emergencia", sigue cabiendo en 320. */ /* El rotulo es lo UNICO que no copia la referencia: el suyo mide 2.6% del ancho y a 293px (la figura en un telefono) eso son 7.6px. En escritorio va a 22px (3.1%, casi el suyo); por debajo de 520px sube a 32, donde ya nadie lo compara contra el original y lo unico que importa es leerlo. El lienzo se diseno con el 32: por eso no se sale. */ .nodo-txt{font-family:var(--sans);font-size:22px;font-weight:600;fill:var(--navy-900)} @media (max-width:520px){.nodo-txt{font-size:32px}} .mapa-tu{font-family:var(--sans);font-size:46px;font-weight:700;fill:#fff;letter-spacing:.04em} .mapa-nodo .nodo-ico{color:var(--navy-900)} .nodo-si rect,.nodo-si .pill{fill:var(--paper);stroke:var(--navy-900);stroke-width:1.6} .nodo-no rect,.nodo-no .pill{fill:var(--paper);stroke:var(--ink-300);stroke-width:1.6;stroke-dasharray:4 3} .nodo-ico{color:var(--navy-700)} .nodo-no .nodo-ico{color:var(--ink-300)} /* Puntos REDONDOS, no una raya de guiones: es la firma visual de la referencia. dasharray 0 con linecap round dibuja circulos; el paso de 11 y el grosor de 4.5 salen de medir la separacion y el diametro de los suyos. */ .mapa-linea{stroke:var(--ink-300);stroke-width:4.5;stroke-dasharray:0 11;stroke-linecap:round} .mapa-centro{fill:var(--navy-900)} .mapa-centro-txt{font-family:var(--sans);font-size:13px;font-weight:700;fill:#fff;letter-spacing:.06em} /* ---------- 15-TER. ICONOS ---------- */ .ico{width:24px;height:24px;flex:0 0 auto;color:var(--navy-700)} .ico-lg{width:32px;height:32px} .ico-gold{color:var(--gold-dark)} .section-dark .ico,.section-dark .ico-gold{color:var(--gold)} /* Icono en círculo (entregables, bloques) */ .ico-badge{ display:grid;place-items:center;width:44px;height:44px;border-radius:50%; background:var(--accent-soft);color:var(--gold-dark);flex:0 0 auto; } .section-dark .ico-badge{color:var(--gold-light)} /* ---------- 16. ACCESIBILIDAD ---------- */ .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--gold);color:var(--btn-ink); padding:12px 18px;border-radius:0 0 8px 0;font-weight:600; } .skip:focus{left:0} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } :focus-visible{outline:2px solid var(--gold-dark);outline-offset:3px} .section-dark :focus-visible{outline-color:var(--gold-light)} .btn:focus-visible,.opt:focus-visible{outline-offset:2px} ::selection{background:var(--gold);color:var(--btn-ink)} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ---------- 17. UTILIDADES (escala 4px) ---------- */ .flex{display:flex} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap} .items-center{align-items:center} .items-start{align-items:flex-start} .items-baseline{align-items:baseline} .justify-between{justify-content:space-between} .justify-center{justify-content:center} .gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px} .text-center{text-align:center} .mx-auto{margin-inline:auto} .ml-auto{margin-left:auto} .w-full{width:100%} .mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px} .mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}.mt-12{margin-top:48px} .mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px} .space-y-2>*+*{margin-top:8px} .space-y-3>*+*{margin-top:12px} .space-y-4>*+*{margin-top:16px} /* ============================================================ + como-funciona (añadido, no toca nada de arriba) ============================================================ */ /* Índice de pasos del hero */ .pasos-mini{display:grid;gap:10px;list-style:none;padding:0;margin:0} @media(min-width:768px){.pasos-mini{grid-template-columns:repeat(4,1fr)}} .pasos-mini a{ display:flex;align-items:center;gap:10px;min-height:52px; padding:10px 14px;border:1px solid var(--line-c);border-radius:var(--radius-sm); background:var(--bg-card);color:var(--fg);text-decoration:none; font-weight:600;font-size:.9rem;line-height:1.3; } .pasos-mini a:hover{border-color:var(--gold);color:var(--gold-ink)} /* Paso a fondo */ .paso-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .paso-num{ font-family:var(--serif);font-weight:600;font-size:1.45rem;line-height:1; color:var(--accent);letter-spacing:.02em;flex:0 0 auto; } .paso-titulo{flex:1 1 12ch;min-width:0} .paso-cols{display:grid;gap:0;margin:22px 0 0} @media(min-width:768px){.paso-cols{grid-template-columns:repeat(3,1fr);gap:24px}} .paso-cols>div{border-top:1px solid var(--line-c);padding-top:14px;margin-top:14px} @media(min-width:768px){.paso-cols>div{margin-top:0}} .paso-cols dt{ font-family:var(--sans);font-size:.74rem;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px; } .paso-cols dd{margin:0;font-size:.93rem;line-height:1.6;color:var(--fg-2)} /* Listas con icono a la izquierda */ .list-ico{display:grid;gap:12px;list-style:none;padding:0;margin:0} .list-ico li{display:flex;gap:12px;align-items:flex-start} .list-ico .ico{margin-top:2px} /* Icono dentro de un parrafo, alineado a la linea de texto */ .ico-inline{display:inline-block;width:20px;height:20px;vertical-align:-4px} /* Chips de tipos de patrimonio (con icono) */ .tipos{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0 0} .tipos li{ display:inline-flex;align-items:center;gap:7px; padding:6px 12px;border:1px solid var(--line-c);border-radius:999px; background:var(--bg-card);font-size:.85rem;line-height:1.3;color:var(--fg-2); } .tipos .ico{width:18px;height:18px} /* Los 8 bloques */ .bloque-head{display:flex;align-items:center;gap:12px} .bloque-n{ font-family:var(--serif);font-weight:600;font-size:1rem; color:var(--accent);flex:0 0 auto;letter-spacing:.04em; } /* Video con pie de foto */ .video-wrap{max-width:900px;margin-inline:auto} .video-cap{margin-top:12px;text-align:center;font-size:.88rem;color:var(--fg-muted)} /* Cita pilar */ .cita-pilar{border-left:3px solid var(--gold);padding-left:20px;max-width:24ch} .cita-pie{max-width:52ch;margin-top:24px} /* Fondos de marca (solo dentro de .section-dark.is-photo). Rutas RELATIVAS al CSS a propósito: resuelven a /assets/brand/ en producción y a /2-0/assets/brand/ cuando el CSS se copia al 2.0 (§7-TER). Con ruta absoluta el 2.0 pediría /assets/brand/ y daría 404. No volver a absolutas. */ .bg-mano{background-image:url(brand/mano-circuito.jpg)} .bg-pluma{background-image:url(brand/pluma-luz.jpg)} .bg-arco{background-image:url(brand/arco-datos.jpg)} /* ============================================================ + diagnostico — flujo de una pregunta por pantalla. Header propio: excepción documentada en _ref/PARTIALS.md §2 (el flujo no lleva navegación, solo avance y botón atrás). ============================================================ */ .flow-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .flow-row{display:flex;align-items:center;gap:12px;height:var(--header-h)} .flow-back{display:grid;place-items:center;width:44px;height:44px;margin-left:-10px;color:var(--navy-900)} .flow-back:hover{color:var(--gold-ink)} .flow-main{max-width:640px;padding-block:32px 72px;min-height:calc(100vh - var(--header-h))} @media(min-width:1024px){.flow-main{padding-block:56px 96px}} .flow-foot{background:var(--navy-950);color:var(--muted-inv);padding:26px 0 32px} .flow-foot .shell{max-width:680px} .flow-foot a{color:var(--muted-inv);text-decoration:underline} .flow-foot a:hover{color:var(--gold-light)} /* Touch targets ≥44px también en el flujo (logo y links del pie) */ .flow-row .logo,.flow-foot a{display:inline-flex;align-items:center;min-height:44px} .flow-foot p+p{margin-top:10px;max-width:70ch} /* Checklist de garantías de la portada. Sin padding/margin propios: el reset ya los quita y así .card conserva el suyo. */ .lista-check{display:grid;gap:12px} .lista-check li{display:flex;align-items:flex-start;gap:12px;font-size:.95rem;line-height:1.5} .lista-check .ico{width:20px;height:20px;margin-top:2px;color:var(--ok)} /* Opciones: una pregunta por pantalla */ .q-opciones{display:grid;gap:12px} /* Pantalla "Armando tu resultado" */ .pantalla-centro{text-align:center;padding-block:64px} .spin{ width:88px;height:88px;border-radius:50%;margin-inline:auto; border:3px solid var(--line);border-top-color:var(--gold-dark); animation:giro 900ms linear infinite; } @keyframes giro{to{transform:rotate(360deg)}} /* ============================================================ + resultado — puntos ciegos, nivel y mapa de bloques ============================================================ */ .res-main{max-width:680px;padding-block:32px 72px} @media(min-width:1024px){.res-main{padding-block:48px 96px}} .card-warn{border-color:rgba(169,114,42,.38);background:rgba(169,114,42,.07)} .card-ok{border-color:rgba(31,122,83,.3);background:rgba(31,122,83,.06)} .gap-head{display:flex;align-items:center;gap:12px} .ico-badge-sm{width:36px;height:36px} .ico-badge-sm .ico{width:20px;height:20px} .ico-badge.is-warn{background:rgba(169,114,42,.14);color:var(--gold-ink)} .ico-badge.is-ok{background:rgba(31,122,83,.12);color:var(--ok)} .section-dark .ico-badge.is-warn{color:var(--gold-light)} .txt-warn{color:var(--gold-ink)} .section-dark .txt-warn{color:var(--gold-light)} .eyebrow-ok{color:var(--ok)} /* Escala 1–10: el mapa que se completa */ .escala-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .dots-escala{flex-wrap:wrap;gap:8px} .dots-escala .dot{width:12px;height:12px} /* Lista "Así lo resuelve Tesora" */ .bloques-lista{display:grid;gap:14px} .bloque-li{display:flex;align-items:center;gap:14px} /* Bloque oscuro embebido en página clara (metáfora del mapa y las llaves) */ .dark-block{border-radius:var(--radius);padding:28px 22px} @media(min-width:768px){.dark-block{padding:36px 32px}} .llaves{display:grid;gap:16px} /* ============================================================ + estado-de-funciones — semáforo de transparencia. Reutiliza .tag-ok/.tag-warn/.tag-soon, .card, .note y .tipos. Prefijo .st- para no chocar con los modificadores de otras páginas. ============================================================ */ /* Encabezado de grupo: título + tag del semáforo en la misma línea */ .st-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px} /* Leyenda del semáforo (hero): qué significa cada color */ .st-legend{display:grid;gap:14px;max-width:64ch} .st-legend li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.92rem;line-height:1.5;color:var(--fg-2)} .st-legend .tag{flex:0 0 auto} /* Lista de funciones: 1 columna en móvil, 2 desde tablet */ .st-list{display:grid;gap:12px} @media(min-width:768px){.st-list{grid-template-columns:repeat(2,1fr);gap:16px}} .st-item{display:flex;gap:14px;align-items:flex-start} .st-item h3{line-height:1.3} .st-item.st-ok{border-left:3px solid var(--ok)} .st-item.st-warn{border-left:3px solid var(--warn)} .st-item.st-soon{border-left:3px solid var(--ink-300)} /* ============================================================ + seguridad — página de confianza. Reutiliza .card, .tipos, .list-ico, .tbl, .tag-*, .note, .cita-pilar. Solo añade lo que no existía: insignia en negativo y la cadena de 3 pasos. ============================================================ */ /* Insignia de icono en negativo: "lo que Tesora NUNCA te pide" */ .ico-badge.is-no{background:rgba(151,48,42,.10);color:var(--danger)} .section-dark .ico-badge.is-no{background:rgba(151,48,42,.26);color:#e29a94} /* Cadena de 3 pasos: Tú escribes → Tesora estructura → Tu Drive guarda */ .cadena{display:grid;gap:12px} @media(min-width:900px){ .cadena{grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:stretch} } .cadena-flecha{display:grid;place-items:center;color:var(--accent-deco)} @media(max-width:899px){.cadena-flecha svg{transform:rotate(90deg)}} /* ============================================================ + index (home) — solo lo que no existia ya en el sistema. Reutiliza: .list-ico, .cadena/.cadena-flecha, .video-wrap/.video-cap, .paso-num, .ico-badge.is-no, .card-*, .note-*, .tbl, .acc. ============================================================ */ /* Ficha de ejemplo: "Asi se ve tu patrimonio en Tesora" */ .ficha{display:grid;margin-top:16px} .ficha>div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line-c)} .ficha dt{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted)} .ficha dd{margin:0;font-size:.95rem;color:var(--fg)} /* Teaser de precios del home */ .precio{font-family:var(--serif);font-size:2.1rem;line-height:1.05;color:var(--heading);margin-top:8px} .precio .moneda{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--fg-muted)} .precio-cond{font-size:.8rem;color:var(--fg-muted);margin-top:4px} /* Mapa mental del hero: SVG fluido + rotulo del nodo central */ .mapa-figura{display:block;width:100%;height:auto} .mapa-centro-txt.mapa-tu{font-size:21px} /* ============================================================ + demo (/demo — simulación de 90 segundos; añadido, no toca nada de arriba) ============================================================ */ /* Barra de contexto: la etiqueta "Ejemplo · datos ficticios" nunca se pierde */ .demo-bar{ position:sticky;top:var(--header-h);z-index:40; background:rgba(250,247,243,.96); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border-bottom:1px solid var(--line); } .demo-bar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:44px;padding-block:6px} /* Ancho de lectura del flujo (el prototipo usaba 680px) */ .demo-wrap{width:100%;max-width:700px;margin-inline:auto;padding:32px 20px 48px} @media(min-width:768px){.demo-wrap{padding:48px 24px 64px}} /* ---- Formulario (label / field / help) ---- */ .label{display:block;font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--fg);margin-bottom:8px} .field{ display:block;width:100%;min-height:48px;padding:12px 14px; background:var(--paper);color:var(--ink-900); border:1px solid var(--line);border-radius:var(--radius-sm); } .field:hover{border-color:var(--ink-300)} .help{ display:flex;gap:8px;align-items:flex-start;max-width:62ch; margin-top:10px;font-size:.83rem;line-height:1.55;color:var(--fg-muted); } .help .ico,.help>[aria-hidden]{flex:0 0 auto;color:var(--fg-muted)} /* ---- BURBUJA DEL ARQUITECTO en el sitio publico (DAN-191, 18-ago-2026) ---- Mismo diseno EXACTO que Daniel ya aprobo dentro de /levantamiento (r28): disco verde, solo el simbolo, con pulso. Se copia tal cual a proposito: dos burbujas distintas en el mismo producto se leen como dos productos. DIFERENCIA de comportamiento, y es la unica: dentro de la app abre el chat embebido con el contexto de la pregunta en pantalla; aqui, en el sitio publico, no hay ese contexto, asi que LLEVA a /arquitecto. Nada de API nueva ni de estado que mantener. El pulso respeta prefers-reduced-motion, igual que en la app. */ .burbuja-arq{ position:fixed;right:18px;bottom:calc(var(--alto-barra,0px) + 14px);z-index:60; width:60px;height:60px;border-radius:50%;background:#25d366;border:none; display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 8px 26px rgba(20,16,13,.32); animation:burbujaPulso 2.8s ease-out infinite; } .burbuja-arq:hover{filter:brightness(1.05)} .burbuja-arq:focus-visible{outline:3px solid var(--navy-900);outline-offset:3px} @keyframes burbujaPulso{ 0%{box-shadow:0 8px 26px rgba(20,16,13,.32),0 0 0 0 rgba(37,211,102,.42)} 70%{box-shadow:0 8px 26px rgba(20,16,13,.32),0 0 0 14px rgba(37,211,102,0)} 100%{box-shadow:0 8px 26px rgba(20,16,13,.32),0 0 0 0 rgba(37,211,102,0)} } @media (prefers-reduced-motion:reduce){.burbuja-arq{animation:none}} @media (max-width:520px){.burbuja-arq{right:12px;width:54px;height:54px}} /* La barra CTA fija del sitio publico vive abajo: cuando aparece, la burbuja sube. El alto se MIDE en tesora2.js (como en la app), no se adivina con un numero fijo: la barra mide distinto en escritorio y a 375px, y el fijo la pisaba. */ /* ---- PESTANAS de /red ---- NO se define aqui ni .tabs ni .tab: el sitio YA traia ese componente (barra de pildoras, lo usa /demo) mas abajo en esta misma hoja. Definir los mios arriba fue un defecto real: el suyo ganaba por orden y mi contenedor heredaba display:flex, con lo que la barra y los cuatro paneles se acomodaban EN FILA y los botones estiraban a 1505px de alto. Se reusa el componente que ya existe; aqui solo vive lo que le falta. El comportamiento (ARIA, enlace profundo por hash, flechas) vive en tesora2.js: la CSP de esta ruta es script-src 'self' y no admite inline. */ .gremio-panel:focus{outline:none} /* ---- PERSONA: retrato + nombre + cargo dentro de una tarjeta ---- Se usa en /notarias (Notaria 107) y en /red (las cuatro pestanas). REGLA DURA (que-cabe-y-que-no.md 2.9): la ficha de una persona real se publica solo con autorizacion por escrito. El retrato sin papel firmado NO sale, por bonito que se vea el hueco. El circulo es a proposito: distingue al retrato del borde cuadrado de la tarjeta que lo contiene. */ .persona{display:flex;gap:16px;align-items:center;margin-top:18px} .persona-foto{ width:84px;height:84px;flex:0 0 auto;border-radius:50%;object-fit:cover; border:1px solid var(--line-c);background:var(--bg-sunken); } .persona-nom{margin:0;font-size:1.02rem;font-weight:700;line-height:1.25;color:var(--fg)} .persona-rol{ margin:3px 0 0;font-size:.72rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--fg-muted); } .persona-nota{margin:5px 0 0;font-size:.85rem;line-height:1.5;color:var(--fg-muted)} @media (max-width:520px){.persona-foto{width:68px;height:68px}} /* ---- Ficha del paso 1: tipo de patrimonio con su icono ---- */ .ficha-head{ display:flex;align-items:center;gap:12px; padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line-c); } /* Aparición del "Pendiente creado" — el momento en que se entiende el producto */ .pend-pop{animation:pendIn .35s ease both} @keyframes pendIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ---- Burbujas del Arquitecto (paso 3) ---- */ .bubble{padding:14px 16px;border:1px solid var(--line-c);border-radius:var(--radius-sm);background:var(--bg-sunken)} .bubble-arq{background:var(--accent-soft);border-color:rgba(212,169,78,.35)} .bubble-quien{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted)} .bubble-arq .bubble-quien{color:var(--accent)} /* ---- Expediente: stats, pestañas y fichas ---- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center} .stat{padding:12px 8px;border:1px solid var(--line-c);border-radius:var(--radius-sm);background:var(--bg-sunken)} .stat-num{font-family:var(--serif);font-weight:600;font-size:1.4rem;line-height:1.1;color:var(--heading)} .stat-lbl{font-size:.75rem;line-height:1.4;color:var(--fg-muted);margin-top:2px} .stat-ok .stat-num{color:var(--ok)} .stat-pend .stat-num{color:var(--warn)} .tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px} .tab{ flex:0 0 auto;min-height:44px;padding:10px 16px;border-radius:999px; border:1px solid var(--line);background:var(--paper); font-size:.92rem;font-weight:600;color:var(--ink-700);white-space:nowrap; } .tab:hover{border-color:var(--gold)} .tab[aria-selected="true"]{background:var(--navy-900);border-color:var(--navy-900);color:var(--ink-inv)} .card-head{display:flex;align-items:center;gap:12px} .kv{display:grid;gap:12px;margin-top:16px} .kv dt{font-size:.82rem;color:var(--fg-muted)} .kv dd{margin:0;font-weight:600;color:var(--fg)} .rowline{display:flex;justify-content:space-between;align-items:baseline;gap:16px} .row-ico{display:flex;align-items:center;gap:10px} .row-ico .ico,.rowline .ico{width:20px;height:20px} .pend-ol{display:grid;gap:14px;margin:18px 0 0;padding:0;list-style:none} .pend-ol li{display:flex;gap:10px;align-items:flex-start} .pend-ol .ico{width:20px;height:20px;margin-top:2px;color:var(--warn)} .pend-n{ flex:0 0 auto;min-width:20px; font-size:.9rem;font-weight:600;color:var(--fg-muted); } .font-semibold{font-weight:600} /* ============================================================ + precios — plan recomendado, comparativa y quién cobra qué. Reutiliza .card, .card-gold, .opt, .tipos, .list-ico, .tbl, .note, .acc. Solo añade lo que faltaba (nada de arriba se modifica). ============================================================ */ /* Ancho de lectura de la página (el prototipo lo hacía con style inline) */ .shell-narrow{max-width:880px} /* Encabezados de FILA en tablas: la regla base de .tbl th es para los de COLUMNA (versalitas doradas); en el cuerpo deben leerse como texto normal. */ .tbl tbody th{ font-family:var(--sans);font-size:.93rem;font-weight:600; letter-spacing:0;text-transform:none;color:var(--fg); background:var(--bg-card); } /* Opción del selector con dos líneas: casilla e icono se alinean arriba */ .opt-top{align-items:flex-start} /* Ficha del plan recomendado */ .plan-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap} .precio-tag{ font-family:var(--serif);font-weight:600;line-height:1.1;color:var(--heading); font-size:clamp(1.9rem,4vw + 1rem,2.6rem); } /* Iconos en línea de texto (flecha de .btn-link, "+" del acordeón) */ .ico-sm{width:18px;height:18px} /* Utilidades de ancho y alineación para los bloques centrados */ .text-left{text-align:left} .max-24{max-width:24ch} .max-46{max-width:46ch} /* .list-ico declara margin:0 y gana por orden a las utilidades mt-*. Se devuelve el control solo cuando la lista pide el margen. */ .list-ico.mt-8{margin-top:32px} /* Anclas internas (#comparativa): que no queden debajo del header sticky */ .sec[id]{scroll-margin-top:calc(var(--header-h) + 12px)} /* ============================================================ + notarias / para-notarias (DAN-187) Reutiliza: .card-*, .ficha, .list-ico, .tbl, .tag-*, .note-*, .ico-badge, .paso-num, .chip. Solo se agrega lo que faltaba. ============================================================ */ /* Semaforo dentro de una lista con iconos: la etiqueta no se encoge */ .list-ico .tag{flex:0 0 auto} /* Ficha de datos dentro de una tarjeta: la primera fila no dobla la linea */ .card .ficha>div:first-child{border-top:0;padding-top:0} /* .list-ico trae margin:0; estas dos reglas devuelven el control a las utilidades mt-* SOLO cuando la lista las declara (no afecta otras paginas) */ .list-ico.mt-4{margin-top:16px} .list-ico.mt-6{margin-top:24px} /* ============================================================ + preguntas / para-asesores (DAN-187) Reutiliza: .acc/.acc-btn/.acc-panel, .list-ico, .tbl, .card-*, .note-*, .ico-badge, .paso-num, .chip, .ico-inline, .bg-pluma. Solo se agrega lo que faltaba; nada de lo anterior se modifica. ============================================================ */ /* misma familia que .list-ico.mt-4/.mt-6/.mt-8, para el escalon de 12px */ .list-ico.mt-3{margin-top:12px} /* + preguntas — la pregunta es un

que ENVUELVE al .acc-btn (el JS sigue enganchando por .acc-btn). El h3 le heredaria serif: se normaliza. */ .acc-q{margin:0;font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:0} /* Ritmo interno de las respuestas. :not([class]) para que cualquier utilidad mt-* declarada en el HTML siga mandando (no pisa las otras paginas). */ .acc-panel>p+p:not([class]), .acc-panel>ul+p:not([class]), .acc-panel>div+p:not([class]){margin-top:12px} /* + preguntas — indice de temas (anclas tipo chip) y encabezado de grupo. El salto de ancla ya lo resuelve la regla compartida .sec[id]. */ .faq-index{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none} .faq-index a{ display:inline-flex;align-items:center;gap:8px;min-height:44px; padding:8px 16px;border:1px solid var(--line-c);border-radius:999px; background:var(--bg-card);color:var(--fg-2); font-size:.88rem;font-weight:600;text-decoration:none; } .faq-index a:hover{border-color:var(--gold);color:var(--gold-ink)} .faq-index .ico{width:20px;height:20px;color:var(--accent-deco)} .grupo-head{display:flex;align-items:center;gap:14px;margin-bottom:20px} /* + para-asesores — fila de chips de confianza del hero */ .chips-row{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none} .chips-row .chip{gap:7px;padding:7px 14px;min-height:36px} /* + demo — chips elegibles de "tu gente" (espejo F4 de la libreta de la app): la persona se captura una vez y se elige con un toque en cada pregunta. */ .chip-pick{ display:inline-flex;align-items:center;gap:7px;padding:7px 14px;min-height:36px; border:1px solid var(--line-c);border-radius:999px;background:var(--bg-card); color:var(--fg-2);font-size:.85rem;font-weight:600;cursor:pointer; font-family:inherit; } .chip-pick:hover{border-color:var(--gold)} .chip-pick[aria-pressed="true"]{ border-color:var(--gold-dark);background:rgba(212,169,78,.12);color:var(--gold-ink); box-shadow:0 0 0 1px var(--gold-dark) inset; } /* Fila de semaforo: en movil la etiqueta ocupa su renglon y el texto no se encajona */ .list-ico li:has(.tag){flex-wrap:wrap} .list-ico .tag~span{flex:1 1 14rem} /* + todas las paginas — touch targets >=44px en los enlaces de chrome. Los de navegacion son inline por defecto (19-20px de alto en el pie, 33px el logo del header). Mismo arreglo que ya tenia .flow-row .logo / .flow-foot a (linea ~594), que nunca llego al header ni al pie estandar. Es CSS, no HTML: _ref/PARTIALS.md se queda intacto y corrige las 12 paginas. */ .site-header-row .logo{display:inline-flex;align-items:center;min-height:44px} .foot-grid a{display:inline-flex;align-items:center;min-height:44px} /* + index — mapa del hero: techo de ancho. 🔴 RETIRADO el 18-ago-2026 el techo de 360px. Lo escribió el diseño VIEJO, cuando el mapa vivía en la columna derecha de un .split y crecer lo desbordaba. Con el arte nuevo el hero pasó a una sola columna y el mapa a su propia banda, así que ese techo dejaba el rótulo en 7.3px reales — la mitad del piso de 12px del sitio. El tope vivo ahora es .mapa-ancho (660px), y está calculado, no elegido: ver su bloque más arriba. Si alguien devuelve el mapa a una columna estrecha, este techo vuelve a tener sentido; mientras viva en banda, no. */ /* + diagnostico — opción con línea de ejemplos (D3, Daniel 13-ago). "Colecciones y objetos de valor" no se reconoce como categoría hasta que la persona ve SU cosa en la lista (los discos, las tazas, el abrigo de su mamá). Por eso la opción admite un segundo renglón. .opt no se toca: .opt-txt es la columna de texto (una sola línea se ve idéntica a antes) y .opt-2l solo sube el check y el icono al primer renglón cuando hay ejemplos. El alto crece, nunca baja de los 56px de .opt. */ .opt-txt{display:flex;flex-direction:column;gap:3px;min-width:0} .opt-2l{align-items:flex-start} .opt-2l .opt-box,.opt-2l .opt-ico{margin-top:1px} .opt-hint{font-size:.85rem;line-height:1.35;color:var(--fg-muted)} .opt[aria-checked="true"] .opt-hint{color:var(--fg-2)} /* ---------- Selector de idioma (DAN-188) ---------- */ .lang-sel{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)} .lang-sel a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--ink-500);text-decoration:none;line-height:1} .lang-sel a .flag{width:18px;height:13px;border-radius:2.5px;box-shadow:0 0 0 1px rgba(20,16,13,.1);flex:none} .lang-sel a[aria-current]{background:var(--paper);color:var(--ink-900);box-shadow:0 1px 3px rgba(10,22,40,.12)} .lang-sel a:hover{color:var(--gold-ink)} .lang-sel-mobile{margin-left:auto;margin-right:2px} @media(min-width:1024px){.lang-sel-mobile{display:none}} @media(max-width:479px){.lang-sel .lang-txt{display:none}} .lang-sel-flow .lang-txt{display:none} /* Blanco de toque: en el header movil y en la barra del diagnostico el selector es SOLO bandera, y a 375px quedaba en 32x21 - la mitad de los 44px que el propio sitio usa para el logo y la hamburguesa, con los dos idiomas pegados. Es el control que cambia de idioma: se toca con el pulgar, no con un mouse. */ .lang-sel-mobile a{min-height:40px} @media(max-width:479px){.lang-sel a{min-height:40px;min-width:40px;justify-content:center}} .lang-sel-flow a{min-height:40px;min-width:40px;justify-content:center;padding:4px 8px} /* ============================================================ HERO 1b — "EL MAPA, EN OSCURO" (paquete de diseño, 19-ago-2026) Fuente: design_handoff_tesora_hero/README.md, dirección aprobada 1b. TODO va scopeado a .hero-1b / .banda-dato.is-oro / .sec-media: ninguna otra página cambia. `.sec-hero` lo comparten 11 páginas — no se toca. Del paquete se respetan color, escala y espaciado. Se APARTA en tres puntos, y cada uno tiene razón medida: 1. FUENTES. El README pide Instrument Serif + Libre Franklin + IBM Plex Mono desde Google Fonts. La CSP de este sitio es font-src 'self' y la regla de arquitectura es cero orígenes externos: se usa la serif del sitio (--serif) para el titular y una pila mono del sistema. El propio README lo autoriza ("si el repositorio ya carga otras fuentes, no sumes tres familias nuevas sin revisar"). 2. RADIO 0. Es del paquete y es identidad (documento, no app), pero solo dentro del hero: el resto del sitio conserva --radius. 3. ETIQUETAS DEL MAPA. El SVG las trae a 12.5 unidades; a 560px de ancho renderizado eso son 10.9px reales, bajo el piso de 12px del sitio. --lbl sube por breakpoint para que el TAMAÑO EN PANTALLA nunca baje de 12px. Es la misma regla que tumbó el arte anterior (7.2px). ============================================================ */ :root{ --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono","IBM Plex Mono",Menlo,Consolas,monospace } /* ---- Banda del dato, versión oro (solo portada) ---- */ .banda-dato.is-oro{background:var(--gold);border-bottom:0;color:#171208} .banda-dato.is-oro .banda-dato-row{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding-block:11px;flex-wrap:wrap; } .banda-dato.is-oro .banda-dato-txt{ font-family:var(--mono);font-size:12.5px;line-height:1.5;letter-spacing:.06em; color:#171208;max-width:none; } .banda-dato.is-oro .banda-dato-txt strong{color:#171208;font-weight:700} .banda-dato.is-oro .banda-dato-src{ display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em; color:#171208;opacity:.7;margin-top:0;white-space:nowrap; } .banda-dato.is-oro .banda-dato-src abbr{text-decoration:none;border-bottom:0} /* A ancho completo con 32px, como el paquete: dentro del shell de 1080 el renglon no cabe y parte en dos. Es una banda de color propia — que su texto no se alinee con el shell de abajo no se percibe, que se parta si. */ .banda-dato.is-oro .banda-dato-row{max-width:none;padding-inline:20px} @media(max-width:767px){ .banda-dato.is-oro .banda-dato-txt{font-size:12px;letter-spacing:0} .banda-dato.is-oro .banda-dato-src{font-size:12px;letter-spacing:0} } @media(min-width:768px){.banda-dato.is-oro .banda-dato-row{padding-inline:32px}} @media(min-width:1024px){.banda-dato.is-oro .banda-dato-row{flex-wrap:nowrap}} /* ---- Header sobre el hero oscuro ---- Solo la portada. .is-noche se retira sola al pasar el hero (tesora2.js, el mismo listener que ya movía la barra CTA): abajo el sitio es papel y un header oscuro flotando sobre papel se lee como error, no como decisión. */ .site-header.is-noche{ background:rgba(11,16,23,.86);border-bottom-color:#1d2634; text-shadow:0 1px 3px rgba(0,0,0,.9); } .site-header.is-noche .btn{text-shadow:none} .site-header.is-noche .logo{color:var(--gold)} .site-header.is-noche .nav-desktop a:not(.btn){color:#c3cedb} .site-header.is-noche .nav-desktop a:hover{color:var(--gold)} .site-header.is-noche .burger{color:#dbe3ee} .site-header.is-noche .lang-sel{background:rgba(255,255,255,.06);border-color:#2a3444} .site-header.is-noche .lang-sel a{color:#9fabbb} .site-header.is-noche .lang-sel a[aria-current]{background:#1d2634;color:#eef1f5;box-shadow:none} /* ---- Cuerpo del hero ---- */ .hero-1b{ --noche:#0b1017; --txt-alto:#eef1f5; --txt-medio:#b6c1cf; --txt-tenue:#a3aebd; /* un paso mas claro que el #8b97a7 del paquete: con la foto mas viva el gris quedaba al filo */ --linea:#1d2634; --borde:#2a3444; position:relative;isolation:isolate;overflow:hidden; background:var(--noche);color:var(--txt-medio); text-shadow:0 1px 3px rgba(0,0,0,.92),0 0 18px rgba(0,0,0,.6); } /* Tinta oscura sobre oro: la sombra la emborrona en vez de ayudarla. */ .hero-1b .btn-primary,.mapa-p .mp-tu{text-shadow:none} .hero-1b-fondo{position:absolute;inset:0;z-index:0} .hero-1b-fondo img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.48;display:block} .hero-1b-velo,.hero-1b-reticula{position:absolute;inset:0;display:block} /* El radial sigue siendo mas claro donde vive el mapa (72%) y mas cerrado en la columna del texto, como pide el paquete — solo que ahora deja ver la foto. */ .hero-1b-velo{background:radial-gradient(120% 90% at 72% 50%,rgba(11,16,23,.06),rgba(11,16,23,.78) 70%)} .hero-1b-reticula{ background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:56px 56px; } .hero-1b-cuerpo{position:relative;z-index:1;padding-block:44px 40px;display:grid;gap:32px} /* Columna de texto */ .hero-1b-txt{display:flex;flex-direction:column;gap:22px;max-width:30rem} .hero-1b .eyebrow{ font-family:var(--mono);font-size:11.5px;font-weight:400; letter-spacing:.3em;color:var(--gold);margin:0; } .hero-1b h1{ font-family:var(--serif);font-weight:400; font-size:clamp(40px,7.2vw,68px);line-height:1.04;letter-spacing:-.01em; color:var(--txt-alto);text-wrap:pretty;margin:0; } .hero-1b h1 em{font-style:italic;color:var(--gold)} .hero-1b-bajada{font-size:19px;line-height:1.55;color:var(--txt-medio);max-width:26rem;margin:0} .hero-1b-accion{display:flex;flex-direction:column;align-items:flex-start;gap:12px} .hero-1b .btn-primary{ border-radius:0;background:var(--gold);color:#171208; font-size:16px;font-weight:600;padding:17px 28px;min-height:48px; display:inline-flex;align-items:center;gap:10px; } .hero-1b .btn-primary:hover{background:#c2963c} .hero-1b-flecha{font-family:var(--mono)} .hero-1b-micro{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--txt-tenue);margin:0} .hero-1b-sec{ font-size:15px;color:#dbe3ee;text-decoration:none; border-bottom:1px solid var(--borde);padding-bottom:2px; display:inline-flex;align-items:center;min-height:44px; } .hero-1b-sec:hover{color:var(--gold);border-bottom-color:var(--gold)} /* Columna del mapa */ .hero-1b-mapa{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px} .mapa-p{width:100%;max-width:400px;height:auto;display:block;font-family:var(--mono)} .mapa-p-pie{ font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--txt-tenue);text-align:center;line-height:1.5; max-width:46ch;margin-inline:auto;text-wrap:balance; } .mapa-p-pie em{font-style:normal;color:var(--gold)} .mapa-p-video{ display:inline-flex;align-items:center;gap:10px;min-height:44px; font-size:14px;color:#dbe3ee;text-decoration:none; border:1px solid var(--borde);padding:11px 18px; } .mapa-p-video:hover{border-color:var(--gold);color:var(--gold)} .mapa-p-video b{color:var(--gold);font-weight:400} .hero-1b-nota{ max-width:46ch;margin:0;font-size:13.5px;line-height:1.55;color:var(--muted-inv); border-left:2px solid rgba(212,169,78,.35);padding-left:14px; } .hero-1b-nota strong{color:var(--gold)} /* Etiquetas del SVG: tamaño en UNIDADES de viewBox (640 de ancho). El número está calculado contra el ancho renderizado de cada breakpoint para que en pantalla nunca baje de 12px. No cambiar sin rehacer la cuenta. */ .mapa-p{--lbl:24px;--tag:23.5px} @media(max-width:359px){.mapa-p{--lbl:27px;--tag:25px}} @media(min-width:440px){.mapa-p{--lbl:19.5px;--tag:18.5px}} .mapa-p .mp-lbl{font-size:var(--lbl);letter-spacing:.06em} .mapa-p .mp-tag{font-size:var(--tag);letter-spacing:.14em} /* El TU NO escala con el breakpoint, a diferencia de las etiquetas: vive DENTRO del domo, que es geometria fija de 44 unidades de alto. Escalarlo lo sacaba por arriba (6.2 unidades a 42px). 28 le alcanza para no bajar de 12px reales ni en una pantalla de 320px (28 x .4375 = 12.25px). */ .mapa-p .mp-tu{font-family:var(--serif);font-size:28px;letter-spacing:.12em} .mapa-p .mp-pulso{animation:tesoraPulse 3.8s ease-in-out infinite} @keyframes tesoraPulse{0%,100%{opacity:.35}50%{opacity:1}} @media(prefers-reduced-motion:reduce){.mapa-p .mp-pulso{animation:none;opacity:.6}} /* Barra de seguridad */ .hero-1b-seguridad{position:relative;z-index:1;border-top:1px solid var(--linea)} /* MEDIDO sobre los pixeles del render, no en teoria: el #7e8b9c del paquete da 3.97:1 a 12px sobre esta foto — bajo el 4.5:1 que pide AA para texto chico. Con el gris tenue del sitio sube a 5.41:1. El paquete ya avisaba que su gris quedaba "justo"; aqui queda corto y se corrige. */ .hero-1b-seguridad .shell{ display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-block:16px;font-family:var(--mono);font-size:12px;color:var(--muted-inv); } @media(min-width:760px){ .hero-1b-cuerpo{padding-block:56px 52px} .mapa-p{max-width:480px;--lbl:16.5px;--tag:16px} } @media(min-width:1100px){ .hero-1b-cuerpo{grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding-block:70px 64px} .hero-1b-mapa{order:2} .mapa-p{max-width:560px;--lbl:16px;--tag:15.5px} .hero-1b-fondo img{opacity:.66} } /* P0-1 (auditoria 20-ago): a 1366x625 —la laptop mas comun de Mexico— el CTA primario arranca en y=672 y queda integro bajo el pliegue, con la bajada cortada a media linea. VA DESPUES de la media de min-width:1100px a proposito: misma especificidad, gana la ultima. Puesta antes, su padding-block:70px 64px pisaba este bloque en silencio — el h1 si encogia y el padding no, que fue exactamente lo que midio la primera pasada. Y la causa de fondo no era el h1: el cuerpo media 853px porque lo manda el MAPA, y el texto se centra respecto a el (align-items:center). Por eso aqui se acota el mapa. Se ataca por ALTO de viewport, no por ancho: el problema es que no cabe, y un monitor ancho con alto de sobra no tiene por que perder el diseno grande. */ @media(min-width:1100px) and (max-height:780px){ .hero-1b-cuerpo{padding-block:16px 20px} .hero-1b h1{font-size:clamp(40px,3.9vw,50px)} .hero-1b-txt{gap:13px} .hero-1b-bajada{font-size:17px} .hero-1b .btn-primary{padding:14px 26px;min-height:44px} .mapa-p{max-width:400px;--lbl:14px;--tag:13.5px} } /* Foco visible sobre fondo oscuro (el del navegador se pierde) */ .hero-1b a:focus-visible,.hero-1b-seguridad a:focus-visible,.site-header.is-noche a:focus-visible{ outline:2px solid var(--gold);outline-offset:2px; } /* ============================================================ .sec-media — foto o video de fondo en una sección oscura. Extiende el patrón .is-photo que ya existe (velo navy incluido): aquí el