/* ============================================================ adho — Sistema de diseño v3 "escritorio retro" Papel, tinta y pestañas de archivador. Sin sombras, sin vidrio, sin degradados: toda la profundidad se hace con bordes. El manual completo está en docs/diseno/MANUAL.md. ============================================================ */ :root { /* --- Papel y tinta --- */ --canvas: #E7E4DE; /* el escritorio: fondo de todo */ --papel: #F7F5F1; /* la hoja: tarjetas, formularios, cuerpo */ --papel-hundido: #F1EEE8; /* franjas y zonas secundarias */ --papel-hoja: #FFFFFF; /* la hoja de ESCRIBIR: más blanca que el resto */ --tinta: #141414; /* titulares */ --texto: #3C3931; /* párrafos */ --texto-suave: #6E6A63; /* etiquetas y metadatos — 4.94 de contraste */ --texto-tenue: #726D65; /* lo más apagado permitido en TEXTO — 4.71 */ --borde: #C9C4BA; /* todas las líneas */ /* --- Azul de acción --- */ --azul: #2B44E0; --azul-hover: #1B2FA8; --azul-activo: #3752E4; --azul-borde: #7C8BEE; --azul-suave: #DDE0F7; --azul-tenue: #E9ECFD; /* Los dos de adentro del pie azul. Solo se usan ahí, porque solo ahí hay algo escrito ENCIMA del azul. Medidos contra --azul (#2B44E0): --azul-legal da 4.53 y --azul-suave 5.35, los dos pasan AA. */ --azul-linea: #5A6DE8; /* la divisoria dentro del pie */ --azul-legal: #C6CEFA; /* el párrafo legal del pie */ /* --- Estados --- El naranja de la maqueta da 3.35 de contraste y el verde 1.65: los dos FALLAN para texto pequeño. Por eso cada uno tiene su gemelo oscuro. El claro pinta bordes, rellenos y puntos; el oscuro escribe. */ --alerta: #E8552B; --alerta-texto: #C2401B; /* 4.77 */ --alerta-suave: #FBEAE4; --verde: #4ED8A0; /* SOLO como punto de "en curso" */ --verde-texto: #0F7A55; /* 4.90 */ --verde-suave: #E4F6EE; /* --- Alias de compatibilidad --- El JS y el CSS viejo todavía nombran --primario, --navy y --ambar. Se conservan apuntando a la paleta nueva para no romper nada mientras se migra página por página. No los uses en código nuevo. */ --fondo: var(--canvas); --primario: var(--azul); --primario-hover: var(--azul-hover); --primario-suave: var(--azul-tenue); --navy: var(--tinta); --navy-claro: var(--azul); --navy-suave: var(--azul-tenue); --ambar: var(--alerta-texto); --ambar-hover: var(--alerta-texto); --ambar-suave: var(--alerta-suave); --rojo: var(--alerta-texto); --rojo-suave: var(--alerta-suave); /* --- Formas --- Sin sombras. Las variables se quedan en "none" en vez de borrarse para que cualquier regla vieja que las use deje de pintar sombra sola, en vez de romperse. */ --radio: 6px; --radio-pestana: 6px 6px 0 0; --sombra: none; --sombra-alta: none; --vidrio: var(--papel); --desenfoque: none; /* --- Tipografía --- */ --titular: 'Archivo Black', Archivo, Helvetica, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --cuerpo: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--cuerpo); background: var(--canvas); color: var(--texto); line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; } a { color: var(--azul); text-decoration: none; } a:hover { color: var(--azul-hover); text-decoration: underline; } /* Los titulares van en MINÚSCULA y con Archivo Black apretado. Es el sello de la dirección: el contraste con las etiquetas monoespaciadas en mayúscula es lo que hace que se lea como un expediente. */ h1, h2, h3, .titulo-recto, .titulo-seccion, .titulo-bloque, .titulo-paso { font-family: var(--titular); font-weight: 400; color: var(--tinta); letter-spacing: -.04em; line-height: 1.02; text-transform: none; } h1 { font-size: clamp(2.1rem, 5.3vw, 4.75rem); line-height: .95; letter-spacing: -.045em; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); } h3 { font-size: 1.2rem; } /* Todo lo que sea etiqueta, dato o metadato: monoespaciada, mayúscula, muy espaciada. Nunca uses esta clase para un párrafo. */ .eyebrow, .etiqueta, .etiqueta-bloque, .estado, .chip, .badge-verificado, .badge-pendiente, .marca-paso, .md-etiqueta, .tc-meta, .sub-paso { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; } .contenedor { max-width: 1140px; margin: 0 auto; padding: 0 22px; } .contenedor-angosto { max-width: 720px; margin: 0 auto; padding: 0 22px; } /* ---------- Header: pestañas de archivador ---------- Las pestañas se APOYAN sobre la línea gruesa de abajo. El truco son tres cosas juntas: `align-items: flex-end`, `border-bottom: none` en cada pestaña, y `translateY(1.5px)` para que su borde inferior quede tapado justo por la línea del header. Si quitas cualquiera de las tres, las pestañas dejan de verse como carpetas y quedan flotando. */ .header { position: sticky; top: 0; z-index: 50; background: var(--papel); border-bottom: 1.5px solid var(--tinta); } .header-inner { display: flex; align-items: flex-end; gap: 6px; padding: 18px 22px 0; max-width: 1440px; margin: 0 auto; } .logo { display: flex; align-items: center; gap: 9px; padding: 11px 22px 10px; margin-right: 8px; background: var(--papel-hundido); border: 1px solid var(--tinta); border-bottom: none; border-radius: 8px 8px 0 0; transform: translateY(1.5px); font-family: var(--titular); color: var(--tinta); font-size: 1.25rem; letter-spacing: -.04em; } .logo:hover { text-decoration: none; color: var(--tinta); } .logo svg { flex: none; } .logo .pe { color: var(--azul); } .nav { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; } .nav-der { margin-left: auto; } .nav a, .nav span { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; color: var(--texto); padding: 8px 16px 7px; background: var(--papel); border: 1px solid var(--borde); border-bottom: none; border-radius: var(--radio-pestana); transform: translateY(1.5px); } .nav a:hover { background: var(--papel-hundido); border-color: var(--tinta); color: var(--tinta); text-decoration: none; } /* La sección donde estás parado: pestaña hundida en el papel, como la carpeta abierta del archivador. */ .nav a.activa { background: var(--papel-hundido); border-color: var(--tinta); color: var(--tinta); } .nav a.nav-equipo.activa { background: var(--navy); border-color: var(--navy); color: var(--papel); } .nav .nav-cta { background: var(--azul); border-color: var(--azul); color: var(--papel); } .nav .nav-cta:hover { background: var(--azul-hover); border-color: var(--azul-hover); color: var(--papel); } .nav .nav-usuario { background: var(--papel-hundido); border-color: var(--tinta); color: var(--tinta); } .nav .nav-aviso { border-color: var(--alerta); color: var(--alerta-texto); } /* Billetera del abogado: atajo a comprar desde cualquier página */ .nav .nav-saldo { display: inline-flex; align-items: center; gap: 6px; } .nav .nav-saldo svg { width: 14px; height: 14px; flex: none; } .nav .nav-saldo.con-saldo { background: var(--azul-tenue); border-color: var(--azul-borde); color: var(--azul-hover); } /* ---------- Cinta de titulares (solo la portada) ---------- 28 s en línea recta. Se detiene al pasar el mouse y con prefers-reduced-motion: si algo se puede leer, tiene que poder leerse. */ .cinta-titulares { overflow: hidden; white-space: nowrap; background: var(--papel-hundido); border-top: 1px solid var(--borde); padding: 8px 0; } .cinta-tit-pista { display: inline-flex; gap: 26px; align-items: center; font-family: var(--mono); font-size: .69rem; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-suave); animation: cinta-correr 28s linear infinite; } .cinta-tit-pista b { color: var(--azul); font-weight: 400; } .cinta-titulares:hover .cinta-tit-pista { animation-play-state: paused; } @keyframes cinta-correr { from { transform: translateX(0); } to { transform: translateX(-33.333%); } } @media (prefers-reduced-motion: reduce) { .cinta-tit-pista { animation: none; } } /* ---------- Footer: la carpeta azul ---------- En las 5 maquetas el pie es lo ÚNICO que rompe el papel: un bloque azul con las esquinas de arriba redondeadas, metido 56 px por cada lado, como una carpeta que asoma por debajo de la hoja. Por eso lleva `margin: 0 56px` y no ocupa el ancho completo — si lo estiras de borde a borde deja de leerse como carpeta y vuelve a ser una barra. Es el único sitio donde se escribe ENCIMA del azul, así que los colores de texto salen de --azul-suave / --azul-legal, no de la paleta de papel. */ .footer { background: var(--azul); color: var(--papel); margin: 90px 56px 0; padding: 52px 44px 0; border-radius: 18px 18px 0 0; overflow: hidden; font-size: .88rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; } .footer h4 { font-family: var(--mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--papel); margin-bottom: 14px; } /* Los títulos de columna van entre corchetes, como los rótulos de campo del resto del sitio. Se pone acá y no en el JS para que el corchete no se lo lleve el lector de pantalla como si fuera texto. */ .footer h4::before { content: "["; } .footer h4::after { content: "]"; } .footer a { color: var(--azul-suave); display: block; padding: 5px 0; font-size: 1rem; } .footer a:hover { color: var(--papel); } .footer-marca .logo { display: inline-flex; padding: 0; margin: 0; background: none; border: none; transform: none; font-size: 1.5rem; color: var(--papel); } .footer-marca .logo:hover { background: none; color: var(--papel); } /* El logo del header es tinta sobre papel; acá va al revés. */ .footer-marca .marca-adho { color: var(--papel); } .footer-marca p { margin-top: 16px; max-width: 340px; color: var(--azul-suave); font-size: 1rem; line-height: 1.6; } /* Redes sociales: cuadraditos de línea sobre el azul del pie, con el mismo lenguaje de bordes del resto del sitio. Nada de logos a color. */ .redes-footer { display: flex; gap: 8px; margin-top: 18px; } .redes-footer a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--azul-linea); border-radius: 3px; color: var(--azul-suave); } .redes-footer a:hover { border-color: var(--papel); color: var(--papel); } .redes-footer svg { width: 17px; height: 17px; } .footer-legal { border-top: 1px solid var(--azul-linea); margin-top: 44px; padding: 22px 0 0; text-align: center; font-size: .82rem; line-height: 1.6; color: var(--azul-legal); max-width: 900px; margin-left: auto; margin-right: auto; } /* La marca gigante al pie, recortada por la mitad. El truco es la caja de 146 px con overflow hidden: la letra mide mucho más que eso, así que solo se ve la parte de arriba y se lee como un sello grabado en la carpeta, no como texto. Los márgenes negativos la sacan del padding del pie para que toque los dos bordes. */ .footer-sello { margin: 36px -44px 0; height: 146px; overflow: hidden; display: flex; justify-content: center; user-select: none; } .footer-sello span { display: block; font-family: var(--titular); font-size: clamp(9rem, 38vw, 542px); line-height: 1; letter-spacing: -.055em; color: var(--papel); white-space: nowrap; transform: translateY(-.28em); } @media (min-width: 720px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; } } /* ---------- Botones ---------- Rectangulares con una esquina apenas marcada, monoespaciados y en mayúscula. Nada de pill ni de sombra al pasar el mouse. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: var(--mono); font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; border: 1px solid transparent; border-radius: 3px; padding: 14px 26px; transition: background .15s ease, border-color .15s ease, color .15s ease; } .btn-primario { background: var(--azul); border-color: var(--azul); color: var(--papel); } .btn-primario:hover { background: var(--azul-hover); border-color: var(--azul-hover); color: var(--papel); text-decoration: none; } .btn-primario:active { background: var(--azul-activo); } .btn-navy { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } .btn-navy:hover { background: #000; color: var(--papel); text-decoration: none; } .btn-borde { background: var(--papel); color: var(--tinta); border-color: var(--borde); } .btn-borde:hover { background: var(--papel-hundido); border-color: var(--tinta); color: var(--tinta); text-decoration: none; } .btn-bloque { width: 100%; } .btn-chico { padding: 9px 18px; font-size: .7rem; } .btn:disabled { opacity: .45; cursor: not-allowed; } /* El foco de teclado tiene que verse. Sin sombras, se marca con un contorno grueso separado del borde. */ .btn:focus-visible, .nav a:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* ---------- Hero de la portada ---------- Una hoja en blanco. Sin degradados de fondo, sin blobs: el peso visual lo lleva el titular en Archivo Black y las carpetas. */ .hero-inicio { min-height: calc(100svh - 96px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 22px 88px; position: relative; background: var(--papel); border-bottom: 1px solid var(--borde); } .eyebrow { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 20px; } /* La pregunta del inicio se DEJA ENVOLVER. Antes llevaba `white-space: nowrap` para forzar una sola línea, pero el texto a 76 px es más ancho que los 1000 px de la caja: se desbordaba por los dos lados, aparecía scroll horizontal y el titular se veía corrido a la izquierda en vez de centrado. La maqueta tampoco la fuerza. `text-wrap: balance` reparte las líneas parejas cuando toca envolver. */ .hero-inicio .titulo-recto { font-size: clamp(1.5rem, 4.6vw, 4.75rem); max-width: 1100px; text-wrap: balance; margin-inline: auto; } .titulo-medio { font-size: clamp(1.7rem, 4vw, 3.2rem) !important; } @media (max-width: 620px) { .hero-inicio .titulo-recto { font-size: clamp(1.85rem, 8vw, 2.4rem); } } .hero-sub { color: var(--texto); font-size: 1.06rem; margin: 16px auto 0; max-width: 560px; text-wrap: pretty; } /* ---------- Renglón que se escribe solo ---------- La comilla de apertura va acá y no en el JS a propósito: si fuera parte del texto se escribiría letra por letra y el primer golpe de vista sería una comilla suelta. Cierre no lleva: el cursor hace de cierre, y así se lee como una frase a medio escribir. La altura es FIJA. Si creciera con el texto, cada cambio de frase empujaría las carpetas hacia abajo y la página entera daría un salto cada 3 segundos. Es el detalle que arruina este efecto cuando está mal hecho. */ .rotativo { margin: 24px auto 0; max-width: 900px; padding: 0 12px; min-height: 34px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .88rem; color: var(--texto-suave); text-align: center; } .rotativo-texto::before { content: "\201C"; color: var(--borde); } .cursor-escribe { display: inline-block; flex: none; width: 2px; height: 1.1em; margin-left: 3px; background: var(--azul); animation: latir-cursor 1.05s steps(1) infinite; } @keyframes latir-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* Debajo del rotativo el subtítulo se aprieta: son dos renglones seguidos y con el margen normal quedaban demasiado separados. */ .rotativo + .hero-sub { margin-top: 12px; font-size: 1rem; } @media (max-width: 620px) { /* Dos líneas de alto: en celular las frases largas envuelven, y la altura tiene que estar reservada desde el inicio. */ .rotativo { font-size: .78rem; min-height: 54px; margin-top: 16px; } } @media (prefers-reduced-motion: reduce) { .cursor-escribe { animation: none; } } .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: var(--texto-suave); font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; display: flex; flex-direction: column; align-items: center; gap: 4px; } .scroll-cue:hover { text-decoration: none; color: var(--tinta); } /* Medía 30 px de alto. El padding le da zona de dedo sin moverlo de sitio: el `bottom` se compensa con el mismo valor. */ .scroll-cue { padding: 8px 14px; bottom: 18px; } /* La aurora era el efecto de la versión anterior. Se neutraliza en vez de borrarse porque `.aurora` sigue puesta en varias tarjetas del JS: así dejan de brillar sin tener que tocar cada llamada. */ .aurora { position: relative; } .aurora::before { content: none; } /* ---------- Carpetas de categoría ---------- Dos filas: la de arriba se APOYA sobre una línea (pestañas que asoman) y la de abajo CUELGA de ella. Es la silueta de un archivador. El truco es el mismo del header: borde inferior ausente en la fila de arriba y `translateY(1px)` para que la línea del contenedor tape el canto. En la fila de abajo pasa al revés: se le quita el borde de arriba y el radio se invierte. */ .carpetas { width: 100%; max-width: 1120px; margin: 52px auto 0; } .carpetas-fila { display: flex; flex-wrap: wrap; justify-content: center; } .carpetas-arriba { align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--borde); } /* Sin `margin-top`: la fila de abajo tiene que COLGAR de la misma línea sobre la que se apoya la de arriba. Con separación se leían como dos grupos sueltos y se perdía la silueta del archivador. */ .carpetas-abajo { gap: 8px; margin-top: 0; } .carpeta { cursor: pointer; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; padding: 12px 20px 11px; color: var(--texto); background: var(--papel-hundido); border: 1px solid var(--borde); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .carpeta-arriba { border-bottom: none; border-radius: var(--radio-pestana); transform: translateY(1px); } .carpeta-abajo { border-top: none; border-radius: 0 0 6px 6px; background: var(--papel); } .carpeta:hover { background: var(--azul-tenue); border-color: var(--azul-borde); color: var(--azul-hover); } .carpeta-arriba:hover { transform: translateY(-2px); } .carpeta-abajo:hover { transform: translateY(2px); } .carpeta:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* La elegida se pinta de azul sólido, como la pestaña activa de la maqueta. Las demás se apagan para que el paso siguiente se lea como una consecuencia y no como una pantalla nueva. */ .carpeta.activa { background: var(--azul); border-color: var(--azul); color: var(--papel); } .carpeta.apagada { opacity: .2; pointer-events: none; } /* "No estoy seguro" es una salida, no una opción más. Va con borde punteado para que nadie la elija por descarte visual. */ .carpeta-omitir { border-style: dashed; color: var(--texto-suave); background: transparent; } /* Rótulo entre corchetes encima de las carpetas del paso 2 */ .rotulo-carpetas { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; color: var(--texto-suave); } .etiqueta-tenue { color: var(--texto-tenue); } @media (prefers-reduced-motion: reduce) { .carpeta, .carpeta:hover { transition: none; transform: none; } } .volver-suave { display: inline-block; margin-top: 32px; color: var(--texto-suave); font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; background: none; border: none; cursor: pointer; padding: 8px 14px; } .volver-suave:hover { color: var(--azul); text-decoration: underline; } /* ---------- Tarjetas ---------- Una tarjeta es una hoja: fondo papel y un borde de 1px. Nada más. Sin sombra, sin vidrio, sin radio grande. */ .tarjeta { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; } /* `.tarjeta-vidrio` sobrevive porque el JS todavía la usa en el modal y en el paso 3. Ya no es de vidrio: es la misma hoja, con más aire. */ .tarjeta-vidrio { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 32px; text-align: left; } .resumen-eleccion { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .pildora { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; background: var(--azul-tenue); color: var(--azul-hover); border: 1px solid var(--azul-borde); padding: 6px 12px; border-radius: 3px; } .pildora.oro { background: var(--alerta-suave); color: var(--alerta-texto); border-color: var(--alerta); } /* ---------- Formularios ---------- El rótulo de cada campo va en monoespaciada, mayúscula y ENTRE CORCHETES, como los campos de un formulario oficial: [DNI]. Historia, para que no se deshaga solo: se quitaron en agosto 2026 porque parecían texto sin terminar, y Luis pidió devolverlos al comparar con las maquetas aprobadas, donde sí están. Los corchetes los pone el CSS y no el JS para que no se puedan colar en un dato que venga de la base. */ label.campo { display: block; font-family: var(--mono); font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-suave); margin: 20px 0 7px; } label.campo::before { content: "["; } label.campo::after { content: "]"; } /* OJO CON EL font-size: 16px — NO lo bajes a rem. Safari en iPhone y iPad hace zoom automático al enfocar cualquier campo cuya letra mida menos de 16px, y deja la página descuadrada y corrida hacia un lado. `.98rem` son 15.68px: por 0.32px se rompía la experiencia en todos los formularios del sitio. La diferencia visual en escritorio es imperceptible; el daño en celular no. Medido con pruebas/visual.js en setiembre 2026. */ input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], input[type=search], input[type=url], select, textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--borde); border-radius: 3px; font-family: var(--cuerpo); font-size: 16px; color: var(--tinta); background: var(--papel); transition: border-color .15s; } input::placeholder, textarea::placeholder { color: var(--texto-tenue); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); border-width: 1.5px; padding: 12.5px 14.5px; } textarea { min-height: 150px; resize: vertical; line-height: 1.55; } .ayuda { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave); margin-top: 7px; } .fila-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: .9rem; color: var(--texto); } .contador { text-align: right; font-family: var(--mono); font-size: .68rem; color: var(--texto-suave); margin-top: 6px; font-variant-numeric: tabular-nums; } .nota-legal { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave); text-align: center; margin-top: 16px; } /* ---------- Secciones ---------- */ .seccion { padding: 88px 0 0; } .seccion h2.titulo-seccion { text-align: center; font-size: clamp(1.8rem, 3.6vw, 3rem); } .seccion p.sub-seccion { text-align: center; color: var(--texto-suave); margin: 12px auto 44px; max-width: 560px; font-size: 1.04rem; } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--borde); background: var(--papel); } /* Los tres pasos van pegados y separados solo por una línea, como las columnas de un formulario impreso. En celular la línea pasa a horizontal, si no queda un borde suelto arriba de la primera. */ .grid-3 > * + * { border-top: 1px solid var(--borde); } @media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-3 > * + * { border-top: none; border-left: 1px solid var(--borde); } } .tarjeta-paso { background: transparent; border: none; border-radius: 0; padding: 40px 30px; text-align: left; } /* El número no va en un círculo: va como folio de expediente, grande y apagado, arriba del título. */ .tarjeta-paso .num-grande { width: auto; height: auto; border-radius: 0; background: none; margin: 0 0 14px; display: block; font-family: var(--titular); font-size: 2.6rem; line-height: 1; letter-spacing: -.05em; color: var(--borde); } .tarjeta-paso h3 { font-size: 1.25rem; } .tarjeta-paso p { color: var(--texto-suave); font-size: .94rem; margin-top: 10px; } /* ---------- Panel de "¿Eres abogado?" ---------- Era un degradado azul oscuro. Ahora es la misma hoja con la tinta invertida: fondo tinta, texto papel. Sigue siendo el bloque que más pesa de la página, pero con la paleta del sitio. */ /* El bloque "¿Eres abogado?" es AZUL, no negro: en la maqueta es la misma carpeta azul del pie, con 18 px de radio en las cuatro esquinas porque acá flota dentro de la hoja en vez de asomar por abajo. El negro era un resto del diseño anterior. */ .bento-oscuro { background: var(--azul); color: var(--papel); border-radius: 18px; padding: 60px 40px; text-align: center; position: relative; overflow: hidden; } .bento-oscuro::before { content: none; } .bento-oscuro > * { position: relative; z-index: 1; } .bento-oscuro h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: var(--papel); } .bento-oscuro p { color: var(--azul-suave); margin: 14px auto 28px; max-width: 520px; } .bento-oscuro .btn-primario { background: var(--papel); border-color: var(--papel); color: var(--tinta); } .bento-oscuro .btn-primario:hover { background: var(--azul-hover); border-color: var(--papel); color: var(--papel); } /* ---------- Demanda real: lo que convence a un abogado ---------- Un abogado no se registra por una frase, se registra por ver trabajo esperando. Estas son consultas de verdad, sin autor ni distrito. */ .demanda { margin: 6px 0 30px; } .pulso-chip { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1px solid var(--papel); color: var(--papel); font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; padding: 9px 16px; border-radius: 3px; } .pulso-chip i { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); } /* El punto no parpadea: LATE, con una onda que se expande y se apaga. Un parpadeo se lee como error o como aviso; un latido se lee como "esto está pasando en este momento", que es justo lo que dice. */ .pulso-chip i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: latido 2s ease-out infinite; } @keyframes latido { from { transform: scale(1); opacity: .65; } to { transform: scale(3.6); opacity: 0; } } /* La cinta se desvanece en los bordes con una máscara en vez de cortarse en seco: así parece que las tarjetas vienen de más allá del panel y no que aparecen de la nada. */ .cinta { margin-top: 22px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .cinta-pista { display: flex; gap: 12px; width: max-content; animation: correr-cinta 46s linear infinite; } /* Se detiene al pasar el mouse: si algo se puede leer, tiene que poder dejarse quieto. Una cinta que no para es una cinta que no se lee. */ .cinta:hover .cinta-pista { animation-play-state: paused; } @keyframes correr-cinta { to { transform: translateX(-50%); } } /* Las tarjetas van sobre el azul, así que llevan el azul de pulsado por dentro y el borde claro: sobre el fondo azul un borde oscuro desaparece. Los grises de antes eran del bloque negro. */ .cinta-item { flex: none; width: 262px; text-align: left; background: var(--azul-activo); border: 1px solid var(--azul-borde); border-radius: 3px; padding: 14px 16px; } .cinta-item b { display: block; font-family: var(--mono); font-size: .63rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--azul-tenue); margin-bottom: 7px; } .cinta-item span { font-size: .87rem; line-height: 1.45; color: var(--papel); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---------- Pie ---------- El trabajo del pie es que te encuentren, no que te guste. Un subrayado que crece desde la izquierda, y nada más. */ .footer { position: relative; } .footer::before { content: none; } .footer-grid a:not(.logo) { position: relative; } .footer-grid a:not(.logo)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.8,.2,1); } .footer-grid a:not(.logo):hover { text-decoration: none; } .footer-grid a:not(.logo):hover::after { transform: scaleX(1); } @media (max-width: 560px) { .cinta-item { width: 220px; } } @media (prefers-reduced-motion: reduce) { .pulso-chip i::after, .cinta-pista { animation: none; } .pulso-chip i::after { display: none; } .footer-grid a:not(.logo)::after { transition: none; } } /* ---------- Modal ---------- */ .modal-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.34); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-fondo.abierto { display: flex; animation: aparecer .22s ease; } @keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .modal { background: var(--papel); border-radius: var(--radio); box-shadow: none; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 30px; position: relative; } .modal-cerrar { position: absolute; top: 14px; right: 16px; background: var(--papel-hundido); border: none; width: 30px; height: 30px; border-radius: 50%; color: var(--texto-suave); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease; } .modal-cerrar svg { width: 15px; height: 15px; } .modal-cerrar:hover { background: var(--papel-hundido); color: var(--texto); } /* Sello circular para las pantallas de "revisa tu correo" / "confirmada". El anillo exterior es un box-shadow, no un borde: así no ocupa espacio y el círculo no se descuadra. */ .sello-correo { width: 62px; height: 62px; margin: 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--navy-suave); color: var(--navy-claro); box-shadow: none; } .sello-correo svg { width: 26px; height: 26px; } .sello-correo.sello-ok { background: var(--verde-suave); color: var(--verde-texto); box-shadow: none; } .sello-correo.sello-alerta { background: var(--alerta-suave); color: var(--alerta-texto); } /* El reloj de "registro en revisión", antes un estilo inline con ámbar */ .icat.icat-espera { width: 58px; height: 58px; margin: 0 auto; background: var(--alerta-suave); color: var(--alerta-texto); } .modal h2 { font-size: 1.3rem; letter-spacing: -.02em; } .modal .sub-modal { color: var(--texto-suave); font-size: .92rem; margin-top: 6px; } .tabs { display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--borde); margin: 22px 0 6px; } .tab { flex: 1; cursor: pointer; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-suave); background: var(--papel-hundido); padding: 10px 8px 9px; border: 1px solid var(--borde); border-bottom: none; border-radius: var(--radio-pestana); transform: translateY(1px); } .tab.activa { background: var(--azul); border-color: var(--azul); color: var(--papel); } .btn-social { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--papel); border: 1px solid var(--borde); border-radius: 3px; padding: 11px; font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--texto); cursor: pointer; margin-top: 16px; } .btn-social:hover { background: var(--fondo); } .separador { display: flex; align-items: center; gap: 12px; color: var(--texto-suave); font-size: .8rem; margin: 16px 0 2px; } .separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); } /* ---------- Hero de subpáginas ---------- */ .hero { text-align: center; padding: 58px 0 8px; } .hero h1 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); } .hero p.sub { color: var(--texto-suave); font-size: 1.08rem; margin: 12px auto 0; max-width: 560px; } .hero .confianza { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-suave); } /* ---------- Listas de consultas ---------- Cada consulta del archivo es un expediente con orejitas: la cabecera (.hoja-cabecera, la misma del paso 3) se monta sobre el canto de la tarjeta. El margen negativo es de 1 px y no de 1.5 porque el marco de estas tarjetas es más fino que el de la hoja de escribir. Las orejitas van con borde de 1 px aquí. Con el 1.5 de la hoja, una lista de veinte consultas se convertía en un muro de recuadros negros: en la hoja hay UNA y tiene que pesar, en el archivo hay muchas y tienen que dejar leer. */ .exp-consulta { margin-bottom: 14px; } .exp-consulta .hoja-cabecera { margin-bottom: -1px; } .exp-consulta .hoja-cabecera .pildora:first-child { border-width: 1px; } .exp-consulta .tarjeta-consulta { margin-bottom: 0; } .tarjeta-consulta { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px 24px; margin-bottom: 14px; box-shadow: none; transition: border-color .15s ease; } .tarjeta-consulta:hover { border-color: var(--tinta); } .tc-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--texto-suave); margin-bottom: 10px; } .tc-texto { font-size: 1rem; } .tc-texto a { color: inherit; font-weight: 600; } .tc-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .estado { font-family: var(--mono); font-size: .64rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; padding: 5px 10px; border: 1px solid; border-radius: 3px; } /* Los estados van sobre papel con borde de color, no rellenos: con varios en pantalla los fondos parecían resaltador (queja de Luis). */ .estado-abierta { background: var(--papel); color: var(--verde-texto); border-color: var(--verde-texto); } .estado-reclamada { background: var(--papel); color: var(--alerta-texto); border-color: var(--alerta); } .estado-respondida { background: var(--papel); color: var(--azul-hover); border-color: var(--azul-borde); } /* Estados de una ORDEN de compra. Aparte de los de consulta a propósito: ahí "abierta" es verde porque significa disponible, y en una orden sin pagar el verde diría lo contrario de la verdad. */ .estado-pagada { background: var(--papel); color: var(--verde-texto); border-color: var(--verde-texto); } .estado-pendiente { background: var(--papel-hundido); color: var(--texto-suave); border-color: var(--borde); } .estado-fallida { background: var(--papel); color: var(--alerta-texto); border-color: var(--alerta); } .filtros-barra { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0; justify-content: center; } .chip { background: var(--papel); border: 1px solid var(--borde); border-radius: 3px; padding: 9px 16px; cursor: pointer; color: var(--texto); font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; transition: background .15s ease, border-color .15s ease, color .15s ease; } .chip:hover { border-color: var(--texto-suave); } .chip.activa { background: var(--azul); border-color: var(--azul); color: var(--papel); } /* ---------- Detalle de consulta / respuesta ---------- */ .caja-respuesta { border: 1px solid var(--tinta); border-left: 4px solid var(--azul); background: var(--papel); border-radius: var(--radio); padding: 24px; margin-top: 20px; box-shadow: none; } .cabecera-abogado { display: flex; align-items: center; gap: 12px; } .avatar { width: 46px; height: 46px; border-radius: 3px; flex: none; background: var(--papel-hundido); border: 1px solid var(--tinta); color: var(--tinta); font-family: var(--mono); font-size: .84rem; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; } .avatar.oro { background: var(--azul); border-color: var(--azul); color: var(--papel); } /* La foto va ENCIMA de las iniciales, en la misma caja. Si la imagen no carga, el `onerror` del JS la quita y debajo quedan las iniciales: nunca un cuadro vacío. Por eso `position: absolute` y no sustituir el contenido. */ .avatar.con-foto, .avatar-grande.con-foto { position: relative; overflow: hidden; } .avatar.con-foto img, .avatar-grande.con-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* recorta y centra: no deforma la cara */ border-radius: inherit; } /* La fila de la foto en "Editar mi perfil" */ .fila-foto { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; } .fila-foto-texto { flex: 1; min-width: 240px; } .fila-foto-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .fila-foto .ayuda { margin-top: 6px; } .cabecera-abogado .nombre { font-weight: 700; } .cabecera-abogado .detalle { font-size: .82rem; color: var(--texto-suave); } .badge-verificado { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; background: var(--verde-suave); color: var(--verde-texto); border: 1px solid var(--verde-texto); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; padding: 3px 9px; border-radius: 3px; } .estrellas { display: inline-flex; gap: 3px; font-size: 1.3rem; cursor: pointer; user-select: none; } .estrellas span { color: var(--borde); transition: color .1s; } .estrellas span.llena { color: var(--alerta-texto); } /* Aquí vivía `.texto-borroso`, que pintaba el final de la consulta transparente en el hub para que el abogado no lo leyera sin reclamar. Se borró porque NO PROTEGÍA NADA: el texto viajaba entero en el HTML y se leía con F12 o con Ctrl+U. Era peor que no tener nada, porque daba una sensación de protección que no existía. Lo que protege de verdad está en Postgres: `consultas.texto_publico` tapa teléfonos, correos y DNI antes de salir de la base. Ver db/tapar-contactos.sql. No reintroducir esta clase. */ .candado-respuesta { text-align: center; padding: 18px 10px 6px; margin-top: -6px; position: relative; } .candado-respuesta::before { content: ""; position: absolute; left: 0; right: 0; top: -70px; height: 70px; background: linear-gradient(transparent, var(--papel)); pointer-events: none; } /* ---------- Hub del abogado ---------- */ .layout-hub { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 30px; } @media (min-width: 860px) { .layout-hub { grid-template-columns: 270px 1fr; align-items: start; } } .panel-lateral { background: var(--vidrio); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; } @media (min-width: 860px) { .panel-lateral { position: sticky; top: 76px; } } .panel-lateral h3 { font-size: .92rem; margin-bottom: 10px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .cupo { background: var(--verde-suave); color: var(--verde-texto); border: 1px solid var(--verde-texto); border-radius: 3px; padding: 12px 14px; margin: 16px 0; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; } .cupo.agotado { background: var(--alerta-suave); color: var(--alerta-texto); border-color: var(--alerta); } .aviso { border-radius: 3px; border: 1px solid; padding: 14px 16px; font-size: .9rem; margin: 16px 0; } .aviso-info { background: var(--azul-tenue); color: var(--azul-hover); border-color: var(--azul-borde); } .aviso-ok { background: var(--verde-suave); color: var(--verde-texto); border-color: var(--verde-texto); } .aviso-alerta { background: var(--alerta-suave); color: var(--alerta-texto); border-color: var(--alerta); } .aviso-error { background: var(--alerta-suave); color: var(--alerta-texto); border-color: var(--alerta); } /* ---------- Pantallas de error (js/errores.js) ---------- Mismo aire que el 404: tarjeta centrada, mucho espacio y una salida siempre visible. No usa .tarjeta porque estas pantallas aparecen solas en la página, sin nada alrededor que enmarcar. */ .pantalla-error { max-width: 480px; margin: 0 auto; padding: 64px 22px 40px; text-align: center; } .pantalla-error h1 { font-size: clamp(1.35rem, 3.6vw, 1.75rem); letter-spacing: -.025em; margin-top: 18px; } .pantalla-error p { color: var(--texto-suave); margin-top: 12px; line-height: 1.55; } .pe-sello { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 3px; border: 1.5px solid currentColor; } .pe-sello svg { width: 28px; height: 28px; } .pe-ambar { background: var(--alerta-suave); color: var(--alerta-texto); } .pe-rojo { background: var(--alerta-suave); color: var(--alerta-texto); } .pe-gris { background: var(--papel-hundido); color: var(--texto-suave); box-shadow: none; } .pe-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px; } /* El detalle técnico va cerrado. Es para que, si te llaman, puedas pedirle a la persona que lo abra y te lo lea. */ .pe-detalle { margin-top: 30px; font-size: .8rem; color: var(--texto-suave); } .pe-detalle summary { cursor: pointer; opacity: .65; } .pe-detalle summary:hover { opacity: 1; } .pe-detalle code { display: block; margin-top: 10px; padding: 11px 13px; border-radius: var(--radio); background: rgba(0,0,0,.035); text-align: left; word-break: break-word; line-height: 1.45; } /* Franja de error para páginas que YA tienen contenido (las de /legal/ llevan su texto en el HTML porque la ley pide que se lean sin JavaScript: taparlas sería cambiar un problema por una infracción). */ .banner-error { background: var(--ambar-suave); color: var(--ambar); border-bottom: 1px solid rgba(183,121,31,.2); } .be-inner { max-width: 1080px; margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; gap: 12px; font-size: .88rem; line-height: 1.45; } .be-inner svg { width: 20px; height: 20px; flex: none; } .be-inner .btn { margin-left: auto; flex: none; } @media (max-width: 700px) { .be-inner { flex-wrap: wrap; } .be-inner .btn { margin-left: 0; } } /* ---------- Registro abogado ---------- */ .form-seccion { border-top: 1px solid var(--borde); margin-top: 32px; padding-top: 24px; } .form-seccion:first-of-type { border-top: none; margin-top: 12px; padding-top: 0; } .form-seccion h3 { font-size: 1.35rem; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .form-seccion h3 + .ayuda { margin-top: -8px; margin-bottom: 12px; } /* Numeración 01, 02, 03… de la maqueta 4d. Se hace con un contador de CSS y no en el JS a propósito: si mañana se agrega o se quita una sección, la numeración se corrige sola. `aria-hidden` no existe para pseudo-elementos, pero el contenido generado no lo leen los lectores de pantalla en la práctica, y el título sigue siendo el del

. */ .form-numerado { counter-reset: seccion; } .form-numerado .form-seccion { counter-increment: seccion; } .form-numerado .form-seccion h3::before { content: counter(seccion, decimal-leading-zero); font-family: var(--titular); font-size: 1.5rem; letter-spacing: -.04em; color: var(--borde); margin-right: 4px; } /* Los íconos sobran cuando ya hay número: dos marcas para lo mismo. */ .form-numerado .form-seccion h3 > svg { display: none; } .grid-2col { display: grid; grid-template-columns: 1fr; gap: 0 16px; } @media (min-width: 640px) { .grid-2col { grid-template-columns: 1fr 1fr; } } .zona-archivo { border: 1px dashed #8C8880; border-radius: 3px; padding: 20px; text-align: center; color: var(--texto-suave); cursor: pointer; margin-top: 6px; display: block; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; transition: border-color .15s, background .15s; } .zona-archivo:hover { border-color: var(--azul); color: var(--azul-hover); background: var(--azul-tenue); } .zona-archivo.cargado { border-style: solid; border-color: var(--verde-texto); color: var(--verde-texto); background: var(--verde-suave); } .zona-archivo input { display: none; } /* ---------- Perfil abogado ---------- */ .cabecera-perfil { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .avatar-grande { width: 84px; height: 84px; border-radius: 3px; flex: none; background: var(--papel-hundido); border: 1px solid var(--tinta); color: var(--tinta); font-family: var(--mono); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .stats { display: flex; gap: 0; margin-top: 26px; flex-wrap: wrap; border: 1px solid var(--borde); } .stat { padding: 16px 22px; flex: 1; min-width: 120px; } .stat + .stat { border-left: 1px solid var(--borde); } .stat .valor { font-family: var(--titular); font-size: 1.7rem; letter-spacing: -.04em; color: var(--tinta); } .stat .etiqueta { display: block; margin-top: 2px; } /* ---------- Precios ---------- */ .grid-precios { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 780px; margin: 0 auto; padding: 0 22px; } @media (min-width: 700px) { .grid-precios { grid-template-columns: 1fr 1fr; } } /* Cada plan es una CARPETA de expediente: la pestaña con el nombre asoma arriba a la izquierda y la ficha cuelga de ella. Por eso el nombre del plan ya no es un

dentro de la tarjeta — es la pestaña, en mono y mayúscula, igual que las de categoría. `.exp` es la columna entera (pestaña + ficha) y sirve para CUALQUIER bloque que quiera la silueta de carpeta, no solo para los planes. `.plan` se conserva como su alias porque es el nombre que usa la página de precios y se lee mejor ahí. El botón va empujado al fondo con `margin-top:auto`: sin eso, la tarjeta que no tiene la línea de "sale a S/ x por consulta" queda más corta y su botón sube, y se ve un escalón entre la de 1 consulta y las de paquete. */ .grid-precios { align-items: stretch; } .exp, .plan { display: flex; flex-direction: column; height: 100%; } /* En los planes es un

, para que el lector de pantalla y el buscador sigan viendo el nombre como título aunque se pinte como pestaña. En bloques sin jerarquía propia puede ser un . */ .exp-pestana { align-self: flex-start; margin: 0; font-weight: 500; font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; padding: 9px 18px 8px; color: var(--tinta); background: var(--papel-hundido); border: 1.5px solid var(--tinta); border-bottom: none; border-radius: var(--radio-pestana); /* El mismo truco del header: baja 1.5 px para que su canto inferior lo tape el borde de la ficha y las dos piezas se lean como una. */ transform: translateY(1.5px); } /* La pestaña azul marca el bloque que queremos que miren primero. */ .destacado > .exp-pestana { background: var(--azul); border-color: var(--azul); color: var(--papel); } /* Esquinas rectas a propósito: es una ficha archivada, y el único redondeo del conjunto está en la pestaña. */ .tarjeta-precio { background: var(--papel); border: 1.5px solid var(--tinta); border-radius: 0; padding: 28px 28px 30px; text-align: left; display: flex; flex-direction: column; flex: 1; } .tarjeta-precio.destacada { border-color: var(--azul); } /* El monto y su unidad van en la MISMA línea base: "S/ 10" es el dato y "por consulta extra" su rótulo, no un subtítulo aparte. */ .plan-monto { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .tarjeta-precio .precio { font-family: var(--titular); font-size: clamp(2.7rem, 7vw, 4.1rem); letter-spacing: -.05em; line-height: 1; color: var(--tinta); } .tarjeta-precio.destacada .precio { color: var(--azul); } .plan-sufijo { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-suave); } /* Punteadas, no continuas: dentro de una ficha las divisorias son renglones del formulario, no bordes de caja. */ .tarjeta-precio ul { list-style: none; text-align: left; margin: 24px 0 26px; border-top: 1px dashed var(--borde); } .tarjeta-precio li { padding: 12px 0; font-size: .94rem; color: var(--texto); border-bottom: 1px dashed var(--borde); } .tarjeta-precio li:last-child { border-bottom: none; } /* `auto` y no un margen fijo: así el botón cae al fondo de la ficha y los de las dos columnas quedan a la misma altura. El aire de arriba lo pone el `margin-bottom` de la lista, no el botón. */ .tarjeta-precio .btn { margin-top: auto; } /* En las fichas sin lista (los paquetes de la pantalla de comprar) el aire lo tiene que poner el texto: el botón solo trae `auto`, que en la tarjeta más alta del grid vale 0. */ .tarjeta-precio .texto-suave { margin: 8px 0 22px; } /* La nota de "sale a S/ x" va pegada al botón, no flotando. */ .tarjeta-precio .ayuda { margin: -12px 0 22px; } /* ---------- Adjuntos de la consulta ---------- Las fotos que sube el usuario van como piezas de un expediente: apoyadas sobre papel hundido, con borde de 1 px y sin sombra. */ .zona-adjuntos { border: 1px dashed var(--texto-tenue); background: var(--papel-hundido); border-radius: var(--radio); padding: 18px 16px; text-align: center; } .zona-adjuntos .ayuda { margin-top: 10px; } .lista-adjuntos:not(:empty) { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .adjunto-fila { display: flex; align-items: center; gap: 10px; border: 1px solid var(--borde); background: var(--papel); border-radius: 3px; padding: 10px 12px; color: var(--texto); } a.adjunto-fila:hover { border-color: var(--tinta); text-decoration: none; } .adjunto-fila svg { width: 16px; height: 16px; flex: none; color: var(--texto-suave); } .adjunto-nombre { flex: 1; min-width: 0; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adjunto-peso { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); flex: none; } .adjunto-quitar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; cursor: pointer; background: none; border: 1px solid var(--borde); border-radius: 3px; color: var(--texto-suave); } .adjunto-quitar:hover { border-color: var(--alerta); color: var(--alerta-texto); } .adjunto-quitar svg { width: 14px; height: 14px; } /* Lo ya subido, en el detalle y en el hub del abogado */ .adjuntos-vistos { margin-top: 18px; border-top: 1px dashed var(--borde); padding-top: 14px; } .adjuntos-vistos .etiqueta { color: var(--texto-suave); display: block; margin-bottom: 10px; } .adjuntos-vistos .ayuda { margin-top: 10px; display: flex; align-items: center; gap: 6px; } .adjuntos-vistos .ayuda svg { width: 13px; height: 13px; flex: none; } .adjuntos-grid { display: flex; flex-wrap: wrap; gap: 10px; } .adjunto-foto { display: block; flex: none; width: 132px; height: 132px; border: 1px solid var(--borde); border-radius: 3px; overflow: hidden; background: var(--papel-hundido); } .adjunto-foto:hover { border-color: var(--tinta); } .adjunto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .adjuntos-grid .adjunto-fila { flex: 1 1 220px; } @media (max-width: 560px) { .adjunto-foto { width: calc(50% - 5px); height: 128px; } } /* ---------- Utilidades ---------- */ .centro { text-align: center; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .oculto { display: none !important; } .texto-suave { color: var(--texto-suave); } /* Enlace secundario dentro de formularios: "¿Olvidaste tu contraseña?" */ .enlace-suave { color: var(--texto-suave); font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; } .enlace-suave:hover { color: var(--texto); } .banner-exito { background: var(--verde-suave); color: var(--verde-texto); border: 1px solid var(--verde-texto); border-radius: 3px; padding: 16px 20px; margin-bottom: 20px; display: flex; gap: 10px; align-items: flex-start; } /* Los blobs de color, el gradiente animado del título y la aurora se quitaron con el rediseño: la dirección retro no tiene manchas de color ni bordes de luz. `.titulo-gradiente` sigue nombrada en algún sitio del JS, así que se neutraliza en vez de borrarse. */ #wizard-zona { position: relative; z-index: 1; width: 100%; } .titulo-gradiente { background: none; color: var(--tinta); animation: none; } /* ---------- Iconos SVG ---------- */ .icat { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: none; vertical-align: -8px; } .icat svg { width: 14px; height: 14px; } .carpeta .icat { margin-right: 4px; } .pildora svg { width: 13px; height: 13px; vertical-align: -2.5px; margin-right: 3px; } .tc-meta > span > svg, .tc-meta svg { width: 13px; height: 13px; vertical-align: -2px; } .aviso > svg { width: 16px; height: 16px; vertical-align: -3.5px; margin-right: 5px; } /* ============================================================ v5 — marca adho, aurora en tarjetas y paso 3 rediseñado ============================================================ */ /* ---------- Logo adho (recto: las 4 letras en una línea) ---------- Cada letra es un independiente para poder levantarlas en cascada al pasar el mouse. El retardo lo pone :nth-child. */ .logo { gap: 10px; } .marca-adho { display: inline-flex; flex: none; align-items: baseline; font-family: var(--titular); font-size: 21px; font-weight: 400; line-height: 1; letter-spacing: -.05em; color: var(--tinta); text-transform: lowercase; } .marca-adho b { font-weight: 400; transition: transform .38s cubic-bezier(.34,1.4,.5,1); } .logo:hover .marca-adho b { transform: translateY(-2.5px); } .logo:hover .marca-adho b:nth-child(2) { transition-delay: .04s; } .logo:hover .marca-adho b:nth-child(3) { transition-delay: .08s; } .logo:hover .marca-adho b:nth-child(4) { transition-delay: .12s; } /* En el footer, un poco más presente (30 px, como en la maqueta) */ .footer-marca .marca-adho { font-size: 30px; } .footer-marca .logo { font-size: 0; } /* no hay texto al lado */ @media (prefers-reduced-motion: reduce) { .marca-adho b { transition: none; } .logo:hover .marca-adho b { transform: none; } } /* ---------- Jerarquía tipográfica ---------- Archivo Black solo existe en un peso. Pedirle 700 hace que el navegador la engorde a la fuerza y sale una mancha: por eso los titulares van con font-weight 400 y el grosor lo da la familia. */ h1, h2, h3, h4 { font-family: var(--titular); font-weight: 400; letter-spacing: -.04em; } h4 { font-size: 1rem; letter-spacing: -.02em; } strong, b { font-weight: 600; } /* ---------- Paso 3: escribir la consulta ---------- */ .lienzo-consulta { max-width: 680px; margin: 0 auto; text-align: left; } .lienzo-consulta .eyebrow, .lienzo-consulta .titulo-paso { text-align: center; } .titulo-paso { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 8px; } .sub-paso { text-align: center; color: var(--texto); font-size: 1.02rem; margin: 0 auto 32px; max-width: 520px; text-transform: none; font-family: var(--cuerpo); letter-spacing: normal; } /* La hoja de escribir la consulta: marco de tinta, como un formulario oficial. Antes tenía un hilo de aurora al enfocar; ahora el foco se marca engrosando el propio marco, que es más barato y más legible. */ .hoja { /* Blanca y con marco de tinta, como en la maqueta 4b: es la hoja donde se escribe, y tiene que destacar del papel del resto. */ background: var(--papel-hoja); border: 1.5px solid var(--tinta); border-radius: var(--radio); padding: 0; position: relative; transition: border-color .2s ease; } .hoja:focus-within { border-color: var(--azul); } /* La cabecera NO es una franja dentro de la hoja: es la fila de orejitas del expediente, y vive FUERA de ella (ver irPaso(3) en js/app.js). El truco son las tres últimas líneas. El margen negativo sube la fila 1.5 px, justo el grosor del marco, para que las pestañas se monten sobre el canto de la hoja; y el z-index las deja pintarse POR ENCIMA de ese marco, de modo que su propio fondo tapa el trozo de línea que queda debajo. Eso es lo que hace que la pestaña se vea "abierta" y unida a la hoja, como una carpeta de archivador. Sin el z-index, la hoja se pinta después y le cruza la raya por encima. */ .hoja-cabecera { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; padding: 0; background: transparent; position: relative; z-index: 1; margin-bottom: -1.5px; } /* La categoría y el subtema elegidos van como pestañas de archivador apoyadas sobre la línea de la cabecera, igual que las del header: sin borde abajo y hundidas 1px para que la línea les tape el canto. El SUBTEMA es la pestaña secundaria: papel hundido y borde suave. La CATEGORÍA manda, así que va en azul suave con el borde en tinta, como la carpeta que está abierta. (Historia: en agosto 2026 se pasaron a gris porque Luis los marcó como "muy gritones", y se devolvieron al azul de la maqueta ese mismo mes al comparar pantalla contra pantalla. Si se vuelve a proponer apagarlos, que sea explícito y se actualice esta nota.) */ .hoja-cabecera .pildora, .hoja-cabecera .pildora.oro { background: var(--papel-hundido); color: var(--texto); border: 1px solid var(--borde); border-bottom: none; border-radius: var(--radio-pestana); padding: 7px 14px 6px; } /* El `border` de arriba es un atajo, así que hay que repetir el border-bottom: none o la pestaña recupera su canto de abajo. */ .hoja-cabecera .pildora:first-child { background: var(--azul-suave); color: var(--azul-hover); border: 1.5px solid var(--tinta); border-bottom: none; padding: 8px 16px 7px; } .hoja-folio { margin-left: auto; font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: var(--texto-suave); padding-bottom: 10px; } .hoja-cuerpo { padding: 4px 18px 0; } .hoja textarea { border: none; background: transparent; padding: 6px 0 0; min-height: 168px; font-size: 1.12rem; line-height: 1.62; resize: none; } .hoja textarea:focus { outline: none; box-shadow: none; } .hoja textarea::placeholder { color: var(--texto-tenue); } .hoja-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--borde); margin-top: 10px; padding: 12px 18px; } .contador-suave { font-family: var(--mono); font-size: .68rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; } .contador-suave.cerca { color: var(--alerta-texto); } /* La línea separadora y el padding son de la HOJA de escribir la consulta, donde los bloques van apilados uno bajo otro. Fuera de ahí, `.bloque-campo` es solo una celda de formulario: si lleva borde, dentro de un grid de 2 columnas cada celda dibuja su propia rayita suelta y se ve como un error. */ .hoja .bloque-campo { border-top: 1px solid var(--borde); padding: 16px 18px 10px; } .bloque-campo label.campo:first-child { margin-top: 0; } .bloque-campo .ayuda { margin-top: 5px; } /* Selects de ubicación en cascada. La maqueta 4b los dibuja en DOS estados bien distintos: el que toca ahora con el borde en tinta sobre papel, y los que todavía no se pueden tocar con el borde suave, fondo hundido y el texto en gris. Esa diferencia es la que enseña el orden sin tener que leer la nota de abajo. Antes los apagados se hacían con `opacity: .5`, que no es lo mismo: emborrona el texto entero y lo deja muy por debajo del mínimo de contraste. Ahora cada estado lleva sus propios colores y los tres se leen. */ .ubigeo-fila { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 620px) { .ubigeo-fila { grid-template-columns: repeat(3, 1fr); } } .ubigeo-sel { /* 16px por lo mismo que arriba. Antes decía .95rem y, al ser una clase, le ganaba en especificidad a la regla de `select`: estos tres desplegables eran los únicos campos del sitio que seguían haciendo zoom en iPhone. */ border-radius: 3px; font-size: 16px; border-color: var(--tinta); /* La flecha nativa la dibuja el sistema operativo, así que en Windows se veía como un control de Windows y en Mac como uno de Mac. Se apaga y se pone la nuestra: el mismo chevrón de línea que usa el resto del sitio, para que el formulario se vea igual en las dos. */ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 13px 36px 13px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C3931' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 13px; } /* El foco de los inputs recorta el padding para compensar el borde más grueso. Acá hay que repetirlo conservando el hueco de la flecha, o el texto se le mete debajo al elegir con el teclado. */ .ubigeo-sel:focus { padding: 12.5px 35.5px 12.5px 13.5px; } /* OJO: más abajo hay un `select:disabled { background: #... }` en forma corta, y esa forma corta REINICIA repeat, position y size. Como `select:disabled` es más específico que `.ubigeo-sel`, se llevaba por delante el `no-repeat` de arriba y la flecha se dibujaba en mosaico. Por eso acá se repiten las tres: no es copia sobrante. */ .ubigeo-sel:disabled { opacity: 1; cursor: not-allowed; border-color: var(--borde); background-color: var(--papel-hundido); color: var(--texto-suave); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 13px; } /* Interruptor de anónimo */ .fila-anonimo { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--borde); padding: 16px 18px; } .fila-anonimo .texto small { display: block; color: var(--texto-suave); font-size: .8rem; margin-top: 2px; font-weight: 400; } .fila-anonimo .texto { font-size: .95rem; font-weight: 600; color: var(--tinta); } .palanca { position: relative; width: 47px; height: 28px; flex: none; } .palanca input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; } .palanca span { position: absolute; inset: 0; border-radius: 3px; background: var(--papel-hundido); border: 1px solid var(--borde); transition: background .2s, border-color .2s; } .palanca span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 2px; background: var(--tinta); transition: transform .2s ease, background .2s ease; } .palanca input:checked + span { background: var(--azul-tenue); border-color: var(--azul); } .palanca input:checked + span::after { transform: translateX(19px); background: var(--azul); } .palanca input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; } .pie-publicar { padding: 16px 18px 18px; border-top: 1px solid var(--borde); } .pie-publicar .nota-legal { text-align: left; margin-top: 12px; } /* ============================================================ v6 — tamaño de iconos y responsive de verdad ============================================================ */ /* ---------- El candado gigante ---------- Nuestros iconos son SVG en línea SIN atributos width/height. Un SVG así no mide nada por sí mismo: se estira hasta ocupar todo el ancho disponible. Por eso el candado del pie medía 600 px. Esta regla les da un tamaño por defecto ligado al texto que los rodea; las reglas con clase que ya existen (.icat svg, .pildora svg, etc.) siguen mandando sobre ella. */ svg { width: 1em; height: 1em; vertical-align: -.14em; } .nota-legal svg, .ayuda svg { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; opacity: .8; } .btn svg { width: 16px; height: 16px; vertical-align: 0; flex: none; } .btn-social svg { width: 18px; height: 18px; } .num-grande svg { width: auto; height: auto; } /* ---------- Nada de scroll horizontal ---------- Usamos `clip` y no `hidden`: `overflow-x: hidden` en el body crea un contenedor de scroll y rompe el `position: sticky` del header. `clip` recorta sin crear ese contenedor. */ body { max-width: 100%; overflow-x: clip; } .hero-inicio { overflow: hidden; } p, h1, h2, h3, .tc-texto, .nombre, .detalle { overflow-wrap: anywhere; } /* ---------- Celular (hasta 719 px) ---------- Las maquetas son 1440 px fijo y no traen móvil. Estas reglas son la traducción, y cada una responde a un problema concreto de la dirección retro en una pantalla angosta. */ @media (max-width: 719px) { .contenedor, .contenedor-angosto { padding: 0 16px; } /* Header. Las pestañas de archivador no caben once en 375 px, así que la fila se vuelve una tira que se desliza en horizontal. El logo NO entra en la tira: se queda fijo a la izquierda, porque es el botón de volver al inicio y tiene que estar siempre en el mismo sitio. */ .header-inner { padding: 12px 14px 0; gap: 4px; flex-wrap: nowrap; } .logo { padding: 8px 14px 7px; margin-right: 4px; font-size: 1.05rem; flex: none; } .marca-adho { font-size: 17px; } .nav { /* `flex: none` también AQUÍ, no solo en los enlaces. El header tiene dos