/* ═══════════════════════════════════════════════════════════════════ LANDINGS DE CAMPAÑA · respald.ar ═══════════════════════════════════════════════════════════════════ Pelá, 21/08/2026: "necesito que mejoremos la venta, creo que hay demasiado texto, quiero que creemos campañas para vender con landing". Medido antes de tocar nada (respald.ar en producción, 375px): · 15,6 pantallas de scroll · UN solo link de WhatsApp, en la pantalla 15,4 de 15,6 · el precio, en la pantalla 11 · 1.460 palabras — que NO son muchas para una página de venta Por eso la landing es otra cosa que la home, y no una home cortada: LA HOME es para el que YA te conoce (referido, tarjeta, la mesa). Puede recorrer, elegir su rubro, leer el día entero. Ahí el largo se paga solo. LA LANDING es para el DESCONOCIDO que tocó un anuncio. Trae UNA promesa (la del anuncio), UN rubro, UN precio y UN botón. Todo lo demás es fuga. Reglas que las cinco cumplen: 1. Sin menú de navegación. La única salida es el WhatsApp. 2. El WhatsApp se ve SIEMPRE (barra fija abajo en celular). 3. El precio entra antes de la pantalla 3. 4. La prueba real (captura + link que abre) antes de la pantalla 2. 5. Máximo 6 pantallas de celular. Se mide, no se opina: powershell -File respald\medir-largo.ps1 turnos.html COLOR: los tokens salen de index.html sin inventar ninguno, para que el guardián de la paleta (chequear.ps1) los acepte. tinta = la base, cálido = LA ACCIÓN (todo botón), lima = LA ENERGÍA (datos, acentos). ═══════════════════════════════════════════════════════════════════ */ :root{ --tinta:#0f2a4a; --tinta-2:#16385f; --calido:#ff8a3d; --calido-osc:#c2540b; --calido-suave:#ffe8d6; --lima:#c8ee3d; --lima-osc:#6f8c0e; --lima-txt:#1e2b06; --lima-suave:#e7f5cf; --papel:#ffffff; --papel-2:#eef2f7; --gris:#586b7e; --gris-claro:#aabfd3; --linea:#dde5ed; --rojo:#c2453a; --e1:8px; --e2:16px; --e3:24px; --e4:40px; --e5:64px; --caja:24px; --caja-b:23px; --radio:16px; --intro:70ch; --ancho:1080px; /* alto de la barra fija de celular: el le deja ese aire abajo para que no tape el último botón de la página */ --barra-fija:74px; } /* En el celular el aire entre franjas se paga en scroll: cinco secciones a 64px arriba y abajo son 640px, tres cuartos de pantalla que el visitante recorre sin leer nada. En compu no molesta, así que solo se aprieta abajo de 640. */ @media(max-width:640px){ :root{--e5:44px;--e4:32px} } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--papel);color:var(--tinta); font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.6;-webkit-font-smoothing:antialiased; } .wrap{max-width:var(--ancho);margin:0 auto;padding-inline:var(--e3)} /* ── tipografía ─────────────────────────────────────────────────── */ h1,h2,h3{margin:0 0 var(--e2);line-height:1.14;letter-spacing:-.02em;text-wrap:balance; font-family:'Poppins',Manrope,system-ui,sans-serif} h1{font-size:clamp(31px,4.8vw,52px);font-weight:800} h2{font-size:clamp(24px,3.2vw,36px);font-weight:800} h3{font-size:18px;font-weight:700;margin-bottom:var(--e1)} p{margin:0 0 var(--e2);text-wrap:pretty} p:last-child{margin-bottom:0} .eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--tinta-2);margin-bottom:var(--e2)} .lead{font-size:clamp(17px,1.9vw,21px);color:var(--gris)} .intro{max-width:var(--intro);margin:0 auto var(--e4);text-align:center} /* ── barra: logo y el WhatsApp. NADA de navegación ──────────────── */ /* La landing no tiene menú a propósito: cada link del encabezado es una puerta para irse antes de leer la oferta. */ header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linea)} .barra{display:flex;align-items:center;justify-content:space-between;gap:var(--e2);height:62px} .barra img{display:block;height:32px;width:auto} @media(max-width:520px){.barra img{height:26px}} /* ── botones ────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; background:#fff;color:var(--tinta);text-decoration:none; padding:14px var(--e3);border-radius:999px;font-weight:800;font-size:15.5px; border:2px solid #fff;transition:transform .12s ease;text-align:center; font-family:Manrope,system-ui,sans-serif;cursor:pointer} .btn:hover{transform:translateY(-2px)} .btn-wa{background:var(--calido);border-color:var(--calido);color:#fff} .btn-borde{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} .btn-borde-t{background:transparent;color:var(--tinta);border-color:var(--tinta)} .btn-chico{padding:9px var(--e2);font-size:14px} .btn-grande{padding:17px var(--e4);font-size:17px} .acciones{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e3);align-items:center} /* ── franjas ────────────────────────────────────────────────────── */ section{padding-block:var(--e5)} .clara{background:var(--papel-2)} .oscura{background:linear-gradient(180deg,var(--tinta) 0%,var(--tinta-2) 100%);color:#fff} /* 🔴 EL MISMO ERROR DE SIEMPRE, DADO VUELTA. La regla de la casa dice que toda caja de fondo claro declara su color de texto, porque si no hereda el blanco de las franjas oscuras. Acá pasó al revés: el .eyebrow nace en tinta-2 (azul oscuro) y el hero tiene fondo tinta, así que la primera línea que lee el que viene del anuncio era azul sobre azul. En la home no se veía porque ese eyebrow lleva un style="color:var(--lima)" pegado a mano. Un fondo oscuro se declara en el CSS, no se parchea en el HTML. */ .oscura .eyebrow,.hero .eyebrow{color:var(--lima)} .oscura .lead{color:var(--gris-claro)} /* ── HERO: la promesa del anuncio, el precio y la prueba, juntos ── */ .hero{background:linear-gradient(180deg,var(--tinta) 0%,var(--tinta-2) 78%,#1c4471 100%); color:#fff;padding-block:var(--e5)} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--e4);align-items:center} .hero em{font-style:normal;color:var(--lima)} .hero .lead{color:var(--gris-claro)} @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:var(--e3)} .hero-txt{text-align:center} .hero-txt .acciones{justify-content:center} } /* la píldora del precio: es el dato que más se busca y en la home vivía en la pantalla 11. Acá entra en la primera, al lado del botón. */ .pildora{display:inline-flex;align-items:center;gap:9px;background:rgba(200,238,61,.14); border:1px solid var(--lima-osc);color:var(--lima);border-radius:999px; padding:9px 18px;font-size:14.5px;font-weight:800;margin-top:var(--e3)} .pildora b{color:#fff} .hero-nota{font-size:14px;color:var(--gris-claro);margin-top:var(--e2)} /* ── el celular con la captura real ─────────────────────────────── */ .celu{margin:0;max-width:280px;justify-self:center} .celu-marco{border:9px solid #0a1c30;border-radius:34px;overflow:hidden;background:#0a1c30; box-shadow:0 20px 50px rgba(10,28,48,.42)} .celu-marco img{display:block;width:100%;height:auto} .celu figcaption{font-size:13px;color:var(--gris-claro);text-align:center;margin-top:12px} .oscura .celu figcaption,.hero .celu figcaption{color:var(--gris-claro)} /* ── la prueba: tarjeta de cliente real con sus links ───────────── */ .pruebas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e2)} @media(max-width:760px){.pruebas{grid-template-columns:1fr}} .prueba{background:#fff;border:1px solid var(--linea);border-radius:var(--radio); padding:var(--caja-b);color:var(--tinta);display:flex;flex-direction:column;gap:10px} .oscura .prueba{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff} .prueba b{font-size:17px;line-height:1.3} .prueba p{font-size:15px;color:var(--gris);margin:0} .oscura .prueba p{color:var(--gris-claro)} .prueba-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px} .prueba-links a{display:inline-block;background:var(--papel-2);border:1px solid var(--linea); color:var(--tinta);text-decoration:none;border-radius:999px;padding:7px 15px; font-size:13.5px;font-weight:700} .prueba-links a:hover{border-color:var(--calido);color:var(--calido-osc)} .oscura .prueba-links a{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff} .oscura .prueba-links a:hover{border-color:var(--lima);color:var(--lima)} /* ── la pantalla del dueño, dibujada ────────────────────────────── */ /* Para los rubros que NO tienen demo pública que se pueda tocar (una flota, un depósito): el panel de una empresa es privado y la captura real saldría de datos de un cliente. Se dibuja, y se rotula como lo que es. Nunca al lado de algo real sin aclararlo: teniendo pruebas de verdad, una de mentira solo le regala la duda al que mira. */ .panel{background:#fff;border:1px solid var(--linea);border-radius:var(--radio); overflow:hidden;color:var(--tinta);margin:0} .panel-top{background:var(--papel-2);border-bottom:1px solid var(--linea); display:flex;align-items:center;gap:7px;padding:10px var(--e2)} .panel-top i{width:9px;height:9px;border-radius:50%;background:var(--gris-claro);flex:0 0 auto} .panel-top span{margin-left:auto;font-size:12px;color:var(--gris);font-weight:700} /* 11 a los costados, no 16: con el marco de 1px y los 12 de las cajitas de adentro, el texto del panel cae en 48 a 375px, que es el mismo eje donde arrancan las tarjetas de prueba. Con 16 caía en 53 y quedaban dos ejes a 5px. */ .panel-body{padding:var(--e2) 11px} .panel-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px} .pk{background:var(--papel-2);border-radius:10px;padding:10px 12px;text-align:left} .pk small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--gris)} .pk b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:2px;color:var(--tinta)} .pk.verde b{color:var(--lima-osc)} .pk.roja b{color:var(--rojo)} .panel-lineas{display:grid;gap:6px} .pl{background:var(--papel-2);border-radius:9px;padding:9px 12px;font-size:13.5px; text-align:left;color:var(--tinta)} .pl.ok{background:var(--lima-suave)} .pl.warn{background:var(--calido-suave)} .panel figcaption,figure.panel-fig figcaption{font-size:13px;color:var(--gris);text-align:center;margin-top:10px} .oscura figure.panel-fig figcaption{color:var(--gris-claro)} /* ── el día, recortado a cuatro momentos ────────────────────────── */ /* La home cuenta el día entero y ahí corresponde. En la landing van los cuatro momentos donde el sistema trabaja SOLO: es lo que compra el que todavía no te conoce. El color del punto hace el argumento sin texto. */ /* 640, el MISMO ancho que la caja de la oferta. Con 680 las dos cajas quedaban a 20px una de otra en compu y sus columnas de texto caían a 6px: la distancia que se ve mal sin que se entienda por qué. Con el mismo ancho comparten el eje de afuera (que se lee como decidido) y los sangrados de adentro quedan bien separados. */ .dia{max-width:640px;margin:0 auto;display:grid;gap:var(--e3)} .mom{display:grid;grid-template-columns:60px 1fr;gap:var(--e3);align-items:start;position:relative} .mom::before{content:"";position:absolute;left:63px;top:4px;width:12px;height:12px;border-radius:50%; border:3px solid var(--papel-2);box-sizing:content-box;z-index:1} .clara .mom::before{border-color:var(--papel-2)} .mom.vos::before{background:var(--tinta)} .mom.solo::before{background:var(--calido)} .mom.cliente::before{background:var(--lima-osc)} .mom .hora{font-size:13px;font-weight:800;color:var(--tinta);text-align:right; white-space:nowrap;padding-top:1px} .mom b{display:block;font-size:17px;color:var(--tinta);margin-bottom:4px;line-height:1.3} .mom p{font-size:15px;color:var(--gris);margin:0} .mom p b{display:inline;font-size:inherit;color:var(--tinta)} @media(max-width:640px){ .mom{grid-template-columns:38px 1fr;gap:20px} .mom::before{left:41px;width:10px;height:10px;border-width:2px} .mom .hora{font-size:12px} } .dia-ref{display:flex;gap:var(--e3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--e4)} .dia-ref .ref{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--gris)} .dia-ref .ref::before{content:"";width:13px;height:13px;border-radius:50%;flex:0 0 auto} .dia-ref .vos::before{background:var(--tinta)} .dia-ref .solo::before{background:var(--calido)} .dia-ref .cliente::before{background:var(--lima-osc)} /* ── LA OFERTA: la caja del precio, que es a lo que vino ─────────── */ .oferta{max-width:640px;margin:0 auto;background:#fff;border:2px solid var(--calido); border-radius:var(--radio);padding:calc(var(--caja-b) - 1px);color:var(--tinta);text-align:left} .oscura .oferta{background:#fff} .oferta-rot{display:inline-block;background:var(--calido);color:#fff;border-radius:999px; padding:5px 15px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} .oferta-num{display:block;font-family:'Poppins',Manrope,system-ui,sans-serif; font-size:clamp(38px,6vw,54px);font-weight:800;letter-spacing:-.03em;margin:12px 0 2px;color:var(--tinta)} .oferta-num small{font-size:19px;font-weight:600;color:var(--gris);letter-spacing:0} .oferta-clavo{display:block;font-size:16px;font-weight:800;color:var(--lima-osc);margin-bottom:var(--e3)} .oferta ul{list-style:none;padding:0;margin:0 0 var(--e3);display:grid;gap:9px} /* El sangrado del ✓ NO es un número lindo elegido a ojo: a 375px pone el texto de la lista en el eje 82, que es exactamente donde arranca la columna de texto de los momentos del día (24 del wrap + 38 de la columna de la hora + 20 del pasillo). Con 26px caía en 74 y quedaban dos ejes a 8px, que es la distancia que se ve desprolija sin que se entienda por qué. La cuenta: 24 (wrap) + 2 (borde) + 22 (caja) + 34. */ .oferta li{font-size:15.5px;padding-left:34px;position:relative;color:var(--tinta)} .oferta li::before{content:"✓";position:absolute;left:6px;color:var(--lima-osc);font-weight:800;font-size:17px} .oferta-pie{border-top:1px dashed var(--linea);padding-top:14px;margin-top:var(--e3); font-size:13.5px;color:var(--gris)} .oferta .acciones{margin-top:0} /* comparación de una línea: contra qué se mide ese precio */ .contra{max-width:640px;margin:var(--e3) auto 0;text-align:center;font-size:15px;color:var(--gris)} .oscura .contra{color:var(--gris-claro)} .contra b{color:var(--tinta)} .oscura .contra b{color:#fff} /* ── garantías: tres líneas, no seis tarjetas ───────────────────── */ .seguros{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2);margin-top:var(--e4)} @media(max-width:760px){.seguros{grid-template-columns:1fr;gap:10px}} .seguro{background:#fff;border:1px solid var(--linea);border-radius:var(--radio); padding:var(--e2);text-align:center;color:var(--tinta)} .seguro i{font-style:normal;font-size:24px;display:block;margin-bottom:6px} .seguro b{display:block;font-size:15px;line-height:1.3} .seguro small{color:var(--gris);font-size:13.5px} /* ── números medidos ────────────────────────────────────────────── */ .numeros{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e2);margin-top:var(--e3)} @media(max-width:760px){.numeros{grid-template-columns:repeat(2,1fr)}} .num{background:#fff;border:1px solid var(--linea);border-radius:var(--radio); padding:var(--e2);text-align:center;color:var(--tinta)} .oscura .num{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff} .num b{display:block;font-family:'Poppins',Manrope,system-ui,sans-serif; font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1} .oscura .num b{color:var(--lima)} .num small{display:block;font-size:13px;color:var(--gris);margin-top:6px;line-height:1.35} .oscura .num small{color:var(--gris-claro)} /* ── la firma del que atiende ───────────────────────────────────── */ /* 640 otra vez: el mismo ancho que la oferta y que el día. Toda caja interior de la landing vive en la misma columna, así el ojo baja por un solo borde en vez de por tres parecidos. */ .firma{display:flex;gap:var(--e3);align-items:center;max-width:640px;margin:0 auto;text-align:left} @media(max-width:640px){.firma{flex-direction:column;text-align:center}} .firma-foto{flex:0 0 104px;width:104px;height:104px;border-radius:50%;background:var(--lima); color:var(--lima-txt);display:grid;place-items:center;font-size:34px;font-weight:800; overflow:hidden;position:relative} .firma-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .firma-foto em{font-style:normal} .firma p{font-size:16px} .oscura .firma p{color:var(--gris-claro)} .oscura .firma p b{color:#fff} /* ── CIERRE ─────────────────────────────────────────────────────── */ .cierre-caja{text-align:center} .cierre-caja .acciones{justify-content:center} /* ── LA BARRA FIJA: el WhatsApp siempre a la vista ──────────────── */ /* El hallazgo más caro de la auditoría: en la home el único WhatsApp estaba en la pantalla 15,4 de 15,6. Acá no se puede perder. Aparece recién cuando el visitante pasó el hero, para no tapar la promesa. */ /* padding lateral --e3, el MISMO que .wrap: si la barra usa 16 y la página 24, el texto de la barra queda 8px corrido del de arriba y se nota justo en lo último que el visitante mira antes de escribir. */ .fija{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff; border-top:1px solid var(--linea);padding:12px var(--e3); box-shadow:0 -6px 20px rgba(10,28,48,.1); display:flex;align-items:center;justify-content:space-between;gap:var(--e2); transform:translateY(120%);transition:transform .2s ease} .fija.ver{transform:translateY(0)} .fija-txt{font-size:13px;font-weight:800;color:var(--tinta);line-height:1.25} .fija-txt small{display:block;font-weight:600;color:var(--gris);font-size:12px} .fija .btn{flex:0 0 auto} @media(min-width:901px){.fija{display:none}} @media(max-width:900px){body{padding-bottom:var(--barra-fija)}} /* ── pie mínimo ─────────────────────────────────────────────────── */ footer{background:var(--tinta);color:var(--gris-claro);padding-block:var(--e3);font-size:13.5px} footer .wrap{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);justify-content:space-between} footer a{color:var(--lima);text-decoration:none} footer p{margin:0}