/* ========================================================= IMC V4 · Landings canónicas (T4.1, D77) --------------------------------------------------------- Hoja ÚNICA y compartida por las nueve páginas. Modelo: `blog/blog.css` —una hoja, sin JS, un HTML por página—, no un generador declarativo. Reglas que esta hoja hace cumplir: · Prefijo propio `.lp-*`. Ninguna clase `v4-h-*`: las landings NO se acoplan a `styles-home.css`, para que un retoque de copyediting no pueda romper la maquetación de la home. · Los VALORES visuales (colores, tipos, radios, sombras) se copian del lenguaje de la home; las clases no se importan. · Fondo plano propio. NO se aplica `class="v4-home-page"` al ``: pinta dos `radial-gradient` que se repiten verticalmente en páginas largas y producen franjas. · Sin scroll horizontal a 375 px. · Una landing CANÓNICA no ejecuta (D77): para las nueve de `landings/*.html` no hay aquí estilos de uploader, progreso, resultado ni descarga, porque no existe ninguno de esos elementos. D88 abre la excepción de las landings de CAMPAÑA, que sí montan puntos de montaje compartidos; sus reglas viven acotadas bajo `.lp-process-mount`, al final de esta hoja, y no alcanzan a ninguna canónica. ========================================================= */ :root{ --lp-bg:#ffffff; --lp-bg-soft:#f9fafb; --lp-fg:#111827; --lp-gray-800:#1f2937; --lp-gray-500:#6b7280; --lp-gray-400:#9ca3af; --lp-line:#e5e7eb; --lp-indigo:#4f46e5; --lp-indigo-soft:#e0e7ff; --lp-red:#d72626; --lp-green:#15803d; --lp-amber:#c2410c; --lp-r:12px; --lp-shadow:0 12px 30px rgba(0,0,0,.06); --lp-w:760px; } *{ box-sizing:border-box; margin:0; padding:0; } body{ font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--lp-bg); color: var(--lp-fg); font-size:16px; line-height:1.6; -webkit-text-size-adjust:100%; } /* Ningún bloque puede desbordar el ancho del viewport. */ img, svg, table, pre{ max-width:100%; } pre, code{ overflow-wrap:anywhere; } .lp-wrap{ max-width: var(--lp-w); margin:0 auto; padding:0 20px; } /* ── Cabecera y pie ligeros ──────────────────────────────────────────── */ .lp-top{ border-bottom:1px solid var(--lp-line); padding:14px 0; background:var(--lp-bg); } .lp-top .lp-wrap{ display:flex; align-items:center; justify-content:space-between; gap:14px; } .lp-brand{ font-size:15px; font-weight:700; color:var(--lp-fg); text-decoration:none; letter-spacing:-.01em; } .lp-brand span{ color:var(--lp-red); } .lp-nav{ font-size:13px; } .lp-nav a{ color:var(--lp-gray-500); text-decoration:none; } .lp-nav a:hover{ color:var(--lp-fg); } .lp-foot{ margin-top:56px; border-top:1px solid var(--lp-line); padding:22px 0 40px; font-size:12px; color:var(--lp-gray-400); } .lp-foot a{ color:var(--lp-gray-500); } /* ── Ritmo vertical ──────────────────────────────────────────────────── */ .lp-main{ padding:40px 0 0; } .lp-section{ margin-top:38px; } .lp-section > * + *{ margin-top:12px; } h1, h2, h3{ line-height:1.25; letter-spacing:-.02em; } h1{ font-size:34px; font-weight:800; } h2{ font-size:21px; font-weight:700; margin-bottom:2px; } h3{ font-size:15px; font-weight:700; } p{ color:var(--lp-gray-800); } .lp-kicker{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--lp-indigo); } .lp-lead{ font-size:18px; color:var(--lp-gray-500); margin-top:14px; } .lp-list{ list-style:none; } .lp-list li{ position:relative; padding-left:18px; margin-top:8px; color:var(--lp-gray-800); font-size:15px; } .lp-list li::before{ content:''; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--lp-indigo-soft); box-shadow:0 0 0 1px var(--lp-indigo); } /* ── Antes / después (familia de preparación) ────────────────────────── */ .lp-ba{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:14px; } .lp-ba-col{ border:1px solid var(--lp-line); border-radius:var(--lp-r); padding:14px; background:var(--lp-bg-soft); } .lp-ba-col h3{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; } .lp-ba-col--before h3{ color:var(--lp-amber); } .lp-ba-col--after h3{ color:var(--lp-green); } .lp-ba-col p{ margin-top:8px; font-size:14px; color:var(--lp-gray-800); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap:anywhere; } /* ── Evidencia y recorrido (rescates, carriles y mesa) ───────────────── */ .lp-steps{ counter-reset:lp-step; list-style:none; margin-top:14px; } .lp-steps li{ counter-increment:lp-step; position:relative; padding:12px 14px 12px 46px; margin-top:10px; border:1px solid var(--lp-line); border-radius:var(--lp-r); font-size:15px; color:var(--lp-gray-800); } .lp-steps li::before{ content:counter(lp-step); position:absolute; left:14px; top:12px; width:20px; height:20px; border-radius:50%; background:var(--lp-indigo); color:#fff; font-size:11px; font-weight:700; line-height:20px; text-align:center; } /* ── Cajas de aviso: límites, privacidad y estado previsto ───────────── */ .lp-box{ border:1px solid var(--lp-line); border-left:3px solid var(--lp-gray-400); border-radius:var(--lp-r); padding:14px 16px; background:var(--lp-bg-soft); } .lp-box h2, .lp-box h3{ margin-bottom:6px; } .lp-box p, .lp-box li{ font-size:14px; } .lp-box--limits{ border-left-color:var(--lp-amber); } .lp-box--privacy{ border-left-color:var(--lp-green); } .lp-box--planned{ border-left-color:var(--lp-indigo); } .lp-badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--lp-indigo); background:var(--lp-indigo-soft); border-radius:999px; padding:3px 9px; } /* ── CTA · única salida funcional de la landing ──────────────────────── */ .lp-cta{ margin-top:40px; padding:22px; text-align:center; border:1px solid var(--lp-line); border-radius:var(--lp-r); box-shadow:var(--lp-shadow); } .lp-cta p{ font-size:14px; color:var(--lp-gray-500); } .lp-btn{ display:inline-block; margin-top:14px; padding:12px 22px; background:var(--lp-indigo); color:#fff; text-decoration:none; border-radius:10px; font-size:15px; font-weight:700; } .lp-btn:hover{ background:#4338ca; } .lp-cta-note{ margin-top:10px; font-size:12px; color:var(--lp-gray-400); } /* ── Relacionadas ────────────────────────────────────────────────────── */ .lp-related{ margin-top:38px; } .lp-related ul{ list-style:none; margin-top:10px; } .lp-related li{ margin-top:8px; font-size:14px; } .lp-related a{ color:var(--lp-indigo); } /* ── Móvil ───────────────────────────────────────────────────────────── */ @media (max-width:480px){ h1{ font-size:27px; } h2{ font-size:19px; } .lp-lead{ font-size:16px; } .lp-main{ padding-top:28px; } .lp-wrap{ padding:0 16px; } .lp-cta{ padding:18px 16px; } .lp-btn{ display:block; } } /* ── Campaña Repair · error literal de InDesign (T4.1b·A) ───────────── */ .lp-error-title{ margin-top:6px; } .lp-error-figure{ margin:18px 0 24px; padding:14px; border:1px solid var(--lp-line); border-radius:var(--lp-r); background:var(--lp-bg-soft); text-align:center; } .lp-error-shot{ display:block; width:503px; max-width:100%; height:auto; margin:0 auto; border-radius:8px; } .lp-hero-answer{ margin-top:6px; } .lp-hero-answer h2{ font-size:24px; line-height:1.25; } .lp-hero-answer p{ margin-top:10px; } .lp-promise{ color:var(--lp-indigo) !important; font-size:15px; } .lp-cta--primary{ margin-top:28px; border-color:#c7d2fe; background:linear-gradient(180deg, #fff 0%, #fafaff 100%); } .lp-list--files li{ padding-top:2px; padding-bottom:2px; } .lp-small-note{ margin-top:12px; font-size:13px; color:var(--lp-gray-500); } .lp-check-steps{ margin:10px 0 0 20px; color:var(--lp-gray-800); font-size:14px; } .lp-check-steps li + li{ margin-top:6px; } .lp-box--success{ border-left-color:var(--lp-green); background:#f7fcf8; } @media (max-width:480px){ .lp-error-title{ font-size:26px; } .lp-error-figure{ padding:10px; margin-top:14px; } .lp-hero-answer h2{ font-size:21px; } } /* ========================================================= MODELO DE REMODELACIÓN · `body.lp-campaign-repair` --------------------------------------------------------- Esta landing va por delante del resto: estrena la comercialidad de «comprobar gratis antes de pagar» y fija el lenguaje visual al que migrarán después las demás. Por eso TODO lo de aquí abajo está acotado a `.lp-campaign-repair`: una hoja compartida no puede cambiar de aspecto para diez páginas que todavía no se han revisado. Cuando una landing se remodele, se le pone la clase y hereda este ritmo; el bloque no se generaliza antes. Tres decisiones que gobiernan el resto: · Aire por bloques, no relleno uniforme: la jerarquía la marca el espacio entre secciones (52 px), no más cajas ni más líneas. · Una sola voz de énfasis: negrita solo para el dato que decide (precio, entregable). Los comandos de InDesign van en `.lp-ui`, que no compite con la negrita semántica. · Superficies tenues: gris casi blanco y hairlines; el índigo saturado queda reservado al botón y a la promesa. ========================================================= */ .lp-campaign-repair{ --lp-w:740px; --lp-ink:#0f172a; --lp-body:#374151; --lp-rule:#eceef3; --lp-surface:#fbfbfd; line-height:1.65; } .lp-campaign-repair h1, .lp-campaign-repair h2{ text-wrap:balance; color:var(--lp-ink); } .lp-campaign-repair p{ text-wrap:pretty; color:var(--lp-body); } .lp-campaign-repair h2{ font-size:22px; letter-spacing:-.021em; } /* Comando literal de la interfaz de InDesign. Se distingue del texto sin robarle peso a la negrita de los datos que deciden la compra. */ .lp-campaign-repair .lp-ui{ display:inline-block; padding:1px 6px; border:1px solid var(--lp-line); border-radius:6px; background:#f4f5f7; color:var(--lp-gray-800); font-size:.94em; font-weight:600; white-space:nowrap; } .lp-campaign-repair code{ padding:1px 4px; border-radius:5px; background:#f4f5f7; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.88em; color:#4338ca; } /* ── Cabecera ────────────────────────────────────────────────────────── */ .lp-campaign-repair .lp-top{ padding:16px 0; border-bottom-color:var(--lp-rule); } .lp-campaign-repair .lp-brand{ display:inline-flex; align-items:center; gap:9px; } .lp-campaign-repair .lp-brand-mark{ display:inline-flex; align-items:center; justify-content:center; height:22px; padding:0 7px; border-radius:6px; background:var(--lp-red); color:#fff; font-size:11px; font-weight:800; letter-spacing:.06em; } /* `.lp-brand span` teñiría de rojo el rótulo entero: aquí solo «Comments». */ .lp-campaign-repair .lp-brand-text{ color:var(--lp-ink); font-weight:700; white-space:nowrap; } .lp-campaign-repair .lp-brand-text span{ color:var(--lp-red); } .lp-campaign-repair .lp-nav{ display:flex; align-items:center; gap:20px; } .lp-campaign-repair .lp-nav a{ white-space:nowrap; } .lp-campaign-repair .lp-nav-primary{ color:var(--lp-indigo); font-weight:600; } .lp-campaign-repair .lp-nav-primary:hover{ color:#4338ca; } /* ── Entrada: kicker, titular y captura ──────────────────────────────── */ .lp-campaign-repair .lp-main{ padding-top:62px; } .lp-campaign-repair .lp-kicker{ font-size:11.5px; letter-spacing:.12em; } .lp-campaign-repair .lp-error-title{ margin-top:20px; font-size:32px; font-weight:800; line-height:1.18; letter-spacing:-.028em; } .lp-campaign-repair .lp-error-figure{ margin:32px 0 0; padding:20px; border-color:var(--lp-rule); border-radius:16px; background:var(--lp-surface); } .lp-campaign-repair .lp-error-shot{ border-radius:6px; box-shadow:0 6px 18px rgba(15,23,42,.10); } .lp-campaign-repair .lp-error-figure figcaption{ margin-top:14px; font-size:12.5px; color:var(--lp-gray-400); } /* ── Respuesta: el bloque que tiene que ganar la página ──────────────── */ .lp-campaign-repair .lp-hero-answer{ margin-top:50px; } .lp-campaign-repair .lp-hero-answer h2{ font-size:27px; font-weight:800; line-height:1.24; letter-spacing:-.026em; } .lp-campaign-repair .lp-answer-yes{ color:var(--lp-indigo); } .lp-campaign-repair .lp-answer-lead{ margin-top:16px; font-size:17.5px; line-height:1.72; } .lp-campaign-repair .lp-answer-lead strong{ color:var(--lp-ink); font-weight:700; } /* Promesa comercial: una sola línea, en pastilla, sin negrita interior. */ .lp-campaign-repair .lp-promise{ display:inline-block; margin-top:22px; padding:9px 15px; border:1px solid #c7d2fe; border-radius:999px; background:var(--lp-indigo-soft); color:#3730a3 !important; font-size:13.5px; font-weight:600; } /* ── Ritmo entre secciones ───────────────────────────────────────────── */ .lp-campaign-repair .lp-section{ margin-top:52px; } .lp-campaign-repair .lp-section > h2 + *{ margin-top:16px; } .lp-campaign-repair .lp-list li{ margin-top:12px; padding-left:22px; font-size:15.5px; } .lp-campaign-repair .lp-list li::before{ width:7px; height:7px; top:.58em; } .lp-campaign-repair .lp-small-note{ margin-top:16px; font-size:13.5px; } .lp-campaign-repair .lp-small-note strong{ color:var(--lp-gray-800); } /* Secuencia, no cuatro tarjetas: cuatro cajas con marco y relleno propio convertían el paso a paso en la mancha más densa de la página. Se quitan marco y fondo, y la continuidad la da un raíl de 1 px tras las cifras; cada paso ahorra así los 32 px de relleno vertical. */ .lp-campaign-repair .lp-steps{ position:relative; margin-top:18px; } .lp-campaign-repair .lp-steps::before{ content:''; position:absolute; left:11px; top:13px; bottom:13px; width:1px; background:var(--lp-rule); } .lp-campaign-repair .lp-steps li{ margin-top:17px; padding:0 0 0 40px; border:0; border-radius:0; background:transparent; font-size:15.5px; line-height:1.62; } .lp-campaign-repair .lp-steps li:first-child{ margin-top:0; } .lp-campaign-repair .lp-steps li::before{ left:0; top:1px; width:23px; height:23px; line-height:23px; font-size:11.5px; background:var(--lp-indigo-soft); color:#3730a3; box-shadow:0 0 0 4px var(--lp-bg); /* abre hueco en el raíl */ } .lp-campaign-repair .lp-steps strong{ color:var(--lp-ink); } .lp-campaign-repair .lp-tip{ margin-top:22px; font-size:14px; color:var(--lp-gray-500); } .lp-campaign-repair .lp-tip strong{ color:var(--lp-gray-800); } /* ── Garantía ────────────────────────────────────────────────────────── */ .lp-campaign-repair .lp-box{ padding:20px 22px; border-radius:14px; border-color:var(--lp-rule); } .lp-campaign-repair .lp-box--success{ border-left-width:4px; border-left-color:#16a34a; background:#f6fcf8; } .lp-campaign-repair .lp-box h2{ font-size:17px; margin-bottom:8px; } .lp-campaign-repair .lp-box p{ font-size:14.5px; } /* ── CTA ─────────────────────────────────────────────────────────────── */ .lp-campaign-repair .lp-cta{ padding:32px 28px; border-radius:18px; border-color:#e7e9f4; box-shadow:0 14px 34px rgba(79,70,229,.07); } .lp-campaign-repair .lp-cta h2{ font-size:22px; } .lp-campaign-repair .lp-cta h2 + p{ margin-top:12px; } .lp-campaign-repair .lp-cta p{ max-width:54ch; margin-left:auto; margin-right:auto; font-size:14.5px; line-height:1.65; } .lp-campaign-repair .lp-cta--primary{ margin-top:42px; border-color:#dcdcf7; background:linear-gradient(180deg, #fbfbff 0%, #f4f4ff 100%); } /* Cierre: recordatorio, no segundo protagonista. Sin sombra, sobre gris tenue y con el botón un punto menor, para que el peso visual siga estando arriba, en `.lp-cta--primary`. */ .lp-campaign-repair .lp-cta--closing{ margin-top:54px; padding:26px 24px; border-color:var(--lp-rule); background:var(--lp-surface); box-shadow:none; } .lp-campaign-repair .lp-cta--closing h2{ font-size:19px; } .lp-campaign-repair .lp-cta--closing p{ font-size:14px; } .lp-campaign-repair .lp-cta--closing .lp-btn{ margin-top:18px; padding:11px 22px; font-size:14.5px; box-shadow:0 4px 12px rgba(79,70,229,.18); } .lp-campaign-repair .lp-cta--closing .lp-btn:hover{ box-shadow:0 7px 16px rgba(79,70,229,.24); } .lp-campaign-repair .lp-btn{ margin-top:22px; padding:14px 28px; border-radius:12px; font-size:15.5px; box-shadow:0 8px 20px rgba(79,70,229,.26); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .lp-campaign-repair .lp-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(79,70,229,.32); } .lp-campaign-repair .lp-cta-note{ margin-top:16px; font-size:12.5px; color:var(--lp-gray-500); } .lp-campaign-repair .lp-cta-note strong{ color:var(--lp-gray-800); } /* ── Cierre ──────────────────────────────────────────────────────────── */ .lp-campaign-repair .lp-related{ margin-top:58px; padding-top:32px; border-top:1px solid var(--lp-rule); } .lp-campaign-repair .lp-related li{ margin-top:10px; font-size:14.5px; color:var(--lp-gray-500); } .lp-campaign-repair .lp-related a{ font-weight:600; text-decoration:none; border-bottom:1px solid #c7d2fe; } .lp-campaign-repair .lp-related a:hover{ border-bottom-color:var(--lp-indigo); } .lp-campaign-repair .lp-foot{ margin-top:64px; padding:26px 0 56px; border-top-color:var(--lp-rule); } @media (max-width:600px){ .lp-campaign-repair .lp-main{ padding-top:36px; } /* A 375 px la cabecera solo cabe entera si rótulo y enlaces bajan de cuerpo: preferimos eso a esconder «Utilidades». */ .lp-campaign-repair .lp-brand{ font-size:13px; gap:7px; } .lp-campaign-repair .lp-nav{ gap:11px; font-size:12px; } .lp-campaign-repair .lp-error-title{ font-size:25px; } .lp-campaign-repair .lp-error-figure{ margin-top:24px; padding:14px; } .lp-campaign-repair .lp-hero-answer{ margin-top:36px; } .lp-campaign-repair .lp-hero-answer h2{ font-size:22px; } .lp-campaign-repair .lp-answer-lead{ font-size:16px; } /* La pastilla pasa de dos líneas en móvil: como banda queda mejor que como píldora deformada. */ .lp-campaign-repair .lp-promise{ display:block; border-radius:14px; } .lp-campaign-repair .lp-section{ margin-top:40px; } .lp-campaign-repair .lp-steps li{ padding-left:36px; margin-top:15px; font-size:15px; } .lp-campaign-repair .lp-steps li::before{ width:22px; height:22px; line-height:22px; } .lp-campaign-repair .lp-steps::before{ left:10.5px; } .lp-campaign-repair .lp-cta{ padding:24px 18px; } .lp-campaign-repair .lp-cta--closing{ padding:22px 18px; } .lp-campaign-repair .lp-cta--primary{ margin-top:32px; } } /* ========================================================= SUPERFICIE OPERATIVA ENFOCADA · T4.1b·A (D88, D90) --------------------------------------------------------- Excepción declarada de D88: una landing de CAMPAÑA monta la maquinaria común. Todo lo funcional cuelga de `.lp-process-mount`, de modo que ninguna de estas reglas puede alcanzar a las nueve canónicas. La home reparte su zona de archivos en tres columnas; aquí solo hay una, así que lo que se ajusta es el ancho y el ritmo, nunca el comportamiento. Prefijos disjuntos (`lp-*` / `v4-h-*`): no hay especificidad cruzada. ========================================================= */ /* `.v4-h-home` aporta el apilado (`flex column`, `gap:32px`) y los tokens `--h-*` que necesita la maquinaria: eso SE CONSERVA. Lo único que se corrige es su caja, pensada para una home de 1152 px a ancho completo. El orden de carga (home antes que landing) hace que estas reglas ganen sin `!important` y sin subir especificidad. */ .lp-process-mount{ max-width:100%; /* ya lo acota `.lp-wrap` */ margin:36px 0; padding:0; /* `.v4-h-home` mete 32px 24px 0 */ gap:20px; /* 32px descuadra el ritmo de la landing */ scroll-margin-top:16px; } /* Apertura progresiva. El bloque EXISTE en el DOM desde el primer render —el arranque de la home depende de `[data-h-home]`— y lo único que cambia es su visibilidad. `main-home.js` alterna `.is-revealed`. */ .lp-process-mount[data-h-collapsed]:not(.is-revealed){ display:none; } /* El `gap` ya separa; los hijos que traen margen propio lo anulan para no sumar dos espacios. */ .lp-process-mount > * { margin-top:0; } .lp-process-mount > h2{ font-size:22px; letter-spacing:-.021em; } .lp-process-mount > .lp-list{ margin-top:-8px; } .lp-process-mount > .lp-small-note{ margin-top:-12px; } /* El CTA funcional es la acción de la superficie: ocupa su ancho, igual que en la columna de acción de la home. */ .lp-process-mount .v4-h-cta{ width:100%; } /* Nada dentro de la superficie puede desbordar a 375 px: la hoja se comprometió a no tener scroll horizontal y la maquinaria trae tablas, trazas y nombres de archivo largos. */ .lp-process-mount{ min-width:0; } .lp-process-mount *{ min-width:0; } .lp-process-mount pre, .lp-process-mount code, .lp-process-mount .v4-h-run-files a{ overflow-wrap:anywhere; } /* ── Dos reservas de la home que aquí no aplican ───────────────────── Ambas vienen del bloque de remodelación de `styles-home.css` y son correctas ALLÍ, donde la home reparte el proceso en columnas de altura fija. En una sola columna producen los dos defectos que se veían. */ /* (1) El «OVNI». `@media (min-width:1024px)` saca los mensajes de flujo con `position:absolute; top:185px; left:20px`, anclados a `.v4-h-process`, que es `position:relative`. La campaña NO monta ese contenedor, así que el bloque se posicionaba contra la página y aterrizaba fuera de la columna, arriba a la izquierda. Vuelve al flujo. */ .lp-process-mount .v4-h-process-msgs{ position:static; width:auto; max-height:none; overflow:visible; } /* Y sin mensajes no ocupa: un contenedor vacío con `gap` sigue sumando. */ .lp-process-mount .v4-h-process-msgs:empty{ display:none; } /* (2) El hueco blanco. `.v4-h-action-stack{ min-height:113px }` reserva la altura de la tercera columna de la home. Aquí no hay columnas que igualar, y con el CTA retirado (falta de archivos) esa reserva era un agujero vertical sin contenido. */ .lp-process-mount .v4-h-action-stack{ min-height:0; gap:8px; margin-top:4px; } .lp-process-mount .v4-h-action-stack[hidden]{ display:none; } /* «Proceso seguro y confidencial»: microseñal pegada al CTA, no un bloque. */ .lp-process-mount .v4-h-action-stack .v4-h-note{ margin:0; } /* (3) El bloque de precio, ilegible. Es el único trozo del PANEL OSCURO de «Tu proceso editorial» que esta superficie monta, y sus colores están escritos para ese fondo: `rgba(255,255,255,.4-.7)` y `#fff`. Sobre el blanco de la landing el texto desaparecía —«RESUMEN DE PRECIOS», los conceptos, el TOTAL y la nota—, y lo único que sobrevivía era el escudito verde de la nota, que tiene color propio: eso era el «residuo verde», y el hueco que dejaba debajo, el bloque entero sin leer. Se repinta para fondo claro; no es una tarjeta, es una línea más. */ .lp-process-mount .v4-h-process-price{ padding:0; border-top:0; } /* Vacío mientras no hay evidencia: no puede reservar el `gap` de la columna. */ .lp-process-mount .v4-h-process-price:empty{ display:none; } .lp-process-mount .v4-h-process-price .v4-h-sub{ color:var(--lp-gray-400); } .lp-process-mount .v4-h-price-row{ color:var(--lp-gray-800); } .lp-process-mount .v4-h-price-row--total{ color:var(--lp-fg); border-top-color:var(--lp-line); } .lp-process-mount .v4-h-price-note{ color:var(--lp-gray-500); } .lp-process-mount .v4-h-price-note svg{ color:var(--lp-green); } .lp-process-mount .v4-h-price-breakdown summary{ color:var(--lp-gray-400); } @media (max-width:600px){ .lp-process-mount{ margin:24px auto; } .lp-process-mount > h2{ font-size:19px; } } /* ========================================================= MODO OPERATIVO · la landing deja de explicar y pasa a actuar --------------------------------------------------------- `main-home.js` marca el `` cuando una superficie enfocada se abre. Los bloques comerciales secundarios —que explican en teoría lo que el usuario ya está haciendo— se retiran de la vista: repetirlos alarga la página, compite con la operación y ofrece salidas para abandonarla a medias. NO se retiran del HTML: siguen ahí para el modo comercial, que es el estado inicial de la página, y para el indexado. Solo dejan de pintarse después de que el usuario haya pulsado el CTA. ========================================================= */ .v4-surface-operating [data-lp-secondary]{ display:none; } /* Sin los bloques de debajo, el pie quedaría pegado a la superficie. */ .v4-surface-operating .lp-foot{ margin-top:40px; } /* «Tu proceso guardado» (R18) existe DESDE que el proceso se persiste, no después de pagar: el usuario descarga el TEST, se va a InDesign, cierra la página y vuelve por su enlace. Se conserva entero —enlace, plazo, resumen y borrado— y lo único que se ajusta es el peso visual, para que no compita con el bloque de comprobación, que es el protagonista. */ .lp-process-mount .v4-h-run{ border-color:var(--lp-rule, var(--lp-line)); background:var(--lp-surface, var(--lp-bg-soft)); box-shadow:none; } .lp-process-mount .v4-h-run > h3{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--lp-gray-400); } /* ========================================================= ACABADO VISUAL DE LA CAMPAÑA REPAIR (T4.1b·A, fase de pulido) --------------------------------------------------------- Ajustes de composición sobre el rediseño ya existente. No tocan copy, color de marca, CTA ni el estado verde de los uploaders. ========================================================= */ /* Cabecera sin navegación: la marca queda sola, a la izquierda, y ya no necesita repartir el espacio con nada. */ .lp-campaign-repair .lp-top .lp-wrap{ justify-content:flex-start; } /* El error literal sigue mandando, pero ocupaba más de lo necesario y empujaba la respuesta —que es lo que el usuario ha venido a leer— por debajo del pliegue. Baja de cuerpo sin dejar de dominar, y sigue alineado a la izquierda: no se convierte en un hero centrado. */ .lp-campaign-repair .lp-error-title{ font-size:28px; line-height:1.22; } /* La captura ya trae ventana, fondo, borde y sombra: el marco gris era un marco sobre otro marco. Se retira la caja y la imagen se alinea al MISMO eje izquierdo que el kicker y el H1, en vez de centrarse dentro de un contenedor más ancho y romper ese eje. */ .lp-campaign-repair .lp-error-figure{ margin:26px 0 0; padding:0; border:0; background:none; text-align:left; } .lp-campaign-repair .lp-error-shot{ margin:0; } .lp-campaign-repair .lp-error-figure figcaption{ margin-top:10px; font-size:12px; color:var(--lp-gray-400); } @media (max-width:600px){ .lp-campaign-repair .lp-error-title{ font-size:23px; } .lp-campaign-repair .lp-error-figure{ margin-top:20px; } } /* ========================================================= IMC V4 · Páginas informativas de cabecera (T5.2) --------------------------------------------------------- Qué hace esta herramienta · Para quién es IMC · Contacto · Legal. NO son landings canónicas: viven en la raíz y no en `landings/`, no llevan `?from=` y su salida es la navegación normal, no un CTA único. Comparten la familia visual de las landings porque reutilizan esta misma hoja: aquí solo se añade lo que esas cuatro páginas necesitan y las nueve canónicas no tienen —cabecera con varios enlaces, rejilla de tarjetas, preguntas y pie con navegación—. Todo queda acotado bajo `.lp-info` (clase del ``): ninguna regla de este bloque alcanza a `landings/*.html`. ========================================================= */ /* Seis enlaces en la misma columna de 760 px que el texto: a 13 px y 18 px de separación la fila mide 564 px y no cabe junto a la marca (144 px), así que el `flex-wrap` la echaba a un segundo renglón alineado a la izquierda, bajo la marca, con pinta de error. Bajar a 12,5 px y 16 px la deja en 536 px y cabe en una sola fila, con margen. El `flex-wrap` se conserva como red: si un rótulo crece, baja de línea en vez de desbordar. */ .lp-info .lp-top .lp-wrap{ flex-wrap:wrap; gap:10px 18px; } .lp-info .lp-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; justify-content:flex-end; font-size:12.5px; } .lp-info .lp-nav a[aria-current="page"]{ color:var(--lp-fg); font-weight:600; } .lp-info .lp-nav-primary{ color:var(--lp-indigo); font-weight:600; } .lp-info .lp-nav-primary:hover{ color:#4338ca; } /* Rejilla de tarjetas: perfiles, capacidades, motivos de contacto. */ .lp-info .lp-cards{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; margin-top:16px; } .lp-info .lp-card{ border:1px solid var(--lp-line); border-radius:var(--lp-r); padding:16px 18px; background:var(--lp-bg-soft); } .lp-info .lp-card h3{ font-size:15px; margin-bottom:6px; } .lp-info .lp-card p{ font-size:14px; } .lp-info .lp-card p + p{ margin-top:8px; } /* Preguntas cortas. Separador entre pares, sin caja por pregunta. */ .lp-info .lp-faq{ margin-top:16px; } .lp-info .lp-faq > div + div{ margin-top:14px; padding-top:14px; border-top:1px solid var(--lp-line); } .lp-info .lp-faq h3{ font-size:15px; } .lp-info .lp-faq p{ font-size:14px; margin-top:5px; } /* Contacto: email y botón de copia. */ .lp-info .lp-mail-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px; } .lp-info .lp-mail{ font-size:18px; font-weight:700; color:var(--lp-fg); overflow-wrap:anywhere; } .lp-info .lp-btn-ghost{ display:inline-block; padding:9px 14px; border:1px solid var(--lp-line); border-radius:9px; background:#fff; color:var(--lp-gray-800); font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .lp-info .lp-btn-ghost:hover{ border-color:var(--lp-indigo); color:var(--lp-indigo); } .lp-info .lp-copy-status{ margin-top:8px; min-height:20px; font-size:13px; color:var(--lp-green); } /* Dos acciones en el cierre, sin inventar un segundo botón primario. */ .lp-info .lp-cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:6px; } .lp-info .lp-btn--secondary{ background:#fff; color:var(--lp-indigo); border:1px solid var(--lp-indigo-soft); } .lp-info .lp-btn--secondary:hover{ background:var(--lp-indigo-soft); } /* Legal: párrafos numerados y fecha de actualización. */ .lp-info .lp-legal .lp-section h2{ font-size:19px; } .lp-info .lp-updated{ margin-top:34px; font-size:12.5px; color:var(--lp-gray-400); } /* Pie con navegación: mismos destinos que la cabecera, para el móvil. */ .lp-info .lp-foot .lp-wrap p{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; } @media (max-width:640px){ .lp-info .lp-cards{ grid-template-columns:1fr; } .lp-info .lp-nav{ justify-content:flex-start; } } /* ========================================================= T5.4 — Conmutador de idioma de las páginas de contenido (ES/CA/EN como archivos hermanos _ca/_en). Visible también en móvil: el header envuelve en vez de ocultarlo. ========================================================= */ .lp-top .lp-wrap{ flex-wrap:wrap; } .lp-lang{ display:inline-flex; align-items:center; gap:2px; font-size:12px; } .lp-lang a{ color:var(--lp-gray-400); text-decoration:none; padding:2px 5px; border-radius:6px; } .lp-lang a:hover{ color:var(--lp-fg); } .lp-lang a[aria-current]{ color:var(--lp-fg); font-weight:700; } .lp-lang .lp-lang-sep{ color:var(--lp-line); }