/* ========================================================================== Variante A del funnel — CSS portado del mockup aprobado (2026-08-17-form-variante-a-cascada-inline, iterado 8+ veces con Dani). Todo scoped bajo #ctc-funnel-a: el theme y su CSS global no se tocan. Fuera del porte: marco de móvil, cabecera replicada y chrome del mockup (la página real pone su propio header). ========================================================================== */ #ctc-funnel-a{ --fa-rojo:#FF4444; --fa-rojo-press:#E03E3E; --fa-tinta:#111827; --fa-gris:#6B7280; --fa-linea:#E5E7EB; --fa-panel:#F8F9FA; --fa-ok:#0E9F6E; --fa-ambar:#B45309; --fa-ambar-bg:#FEF3C7; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:var(--fa-tinta); max-width:480px; margin:0 auto; padding:0 0 30px; font-size:16px; line-height:1.4; text-align:left; /* compensa parte del margin-top:100px del theme en main#content (colapsado): con el hero oculto dejaba un hueco de ~51px entre header y título */ margin-top:-12px; } /* Estado de pruebas: título ÚNICO, el del form. El hero del theme (header-main, con el copy viejo) se oculta SOLO cuando esta hoja carga (= variante activa). El arreglo definitivo del contenido de la página llega la noche del corte. */ article.page .entry-content > .header-main, article.page .header-main{display:none} /* modo foco (móvil): desde que el usuario pulsa "Valorar", el form es el único protagonista — fuera las secciones de la página y el footer, y la espera ocupa la pantalla entera. El body recibe .fa-foco desde el JS (ir()). */ @media (max-width:768px){ body.fa-foco article.page > :not(#section-form-ctc){display:none} body.fa-foco footer.footer{display:none} body.fa-foco #ctc-funnel-a #sc-espera.active{min-height:calc(100vh - 160px);min-height:calc(100dvh - 160px)} /* sin arrastre lateral en iOS: decoraciones del theme (pulse-circles, carrusel) y el badge de reCAPTCHA sobresalen del viewport — Chrome recorta el scroll pero iOS deja arrastrar y descentra el contenido */ html,body{overflow-x:hidden} body.fa-foco{touch-action:pan-y} body.fa-foco .grecaptcha-badge{visibility:hidden} } #ctc-funnel-a *,#ctc-funnel-a *::before,#ctc-funnel-a *::after{box-sizing:border-box} #ctc-funnel-a h2,#ctc-funnel-a p{margin:0;padding:0} /* blindaje: la página inyecta estilos globales de heading (h2::after con barra roja de 3px, text-align centrado) — los headings del form no heredan decoraciones del theme. text-align:inherit respeta las pantallas centradas (sc-fin/sc-gracias) y deja el resto a la izquierda como el mockup. */ #ctc-funnel-a h1,#ctc-funnel-a h2,#ctc-funnel-a h3{text-align:inherit;position:static} #ctc-funnel-a h1::before,#ctc-funnel-a h1::after, #ctc-funnel-a h2::before,#ctc-funnel-a h2::after, #ctc-funnel-a h3::before,#ctc-funnel-a h3::after{content:none !important;display:none !important} #ctc-funnel-a button{font-family:inherit} #ctc-funnel-a :focus-visible{outline:2px solid var(--fa-rojo);outline-offset:2px} /* ---- pantallas ---- */ /* sin padding lateral propio: el contenido se alinea con los 20px de la sección de WP, igual que el resto de la página (medido: el form iba 20px más sangrado) */ #ctc-funnel-a .sc{display:none;padding:10px 0 30px;animation:fa-aparece .25s ease} #ctc-funnel-a .sc.active{display:block} @keyframes fa-aparece{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} #ctc-funnel-a .sc h2{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--fa-tinta)} /* el efecto del hero del theme, replicado: subrayado grueso bajo "hoy" */ #ctc-funnel-a .fa-hoy{text-decoration:underline 3px var(--fa-rojo);text-underline-offset:5px} /* ...y su animación: el destello que barre el título cada 4s (lightShine del hero, calcado). Va en un span envolvente porque el blindaje de headings mata los ::before/::after del h2 a propósito; keyframes propios = autocontenido. El padding compensado da aire al destello y al subrayado sin mover el layout. */ #ctc-funnel-a .fa-brillo{position:relative;display:inline-block;overflow:hidden; padding:2px 6px 9px;margin:-2px -6px -9px} #ctc-funnel-a .fa-brillo::before{content:"";position:absolute;top:-50%;left:-100%; width:100%;height:200%;pointer-events:none;z-index:1;transform:rotate(25deg); background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0) 40%, rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 60%,transparent 70%); animation:fa-shine 4s linear infinite} @keyframes fa-shine{0%,20%{left:-100%}100%{left:200%}} #ctc-funnel-a .sc .sub{font-size:14px;color:var(--fa-gris);margin-top:6px;line-height:1.5} #ctc-funnel-a .campo-label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--fa-gris);margin:22px 0 8px} /* ---- campos ---- */ #ctc-funnel-a input.campo{width:100%;height:54px;border:1.5px solid var(--fa-linea);border-radius:12px; padding:0 14px;font:inherit;font-size:16px;color:var(--fa-tinta);background:#fff} #ctc-funnel-a input.campo::placeholder{color:#C6CBD3} #ctc-funnel-a select.campo{width:100%;height:54px;border:1.5px solid var(--fa-linea);border-radius:12px; padding:0 42px 0 14px;font:inherit;font-size:16px;color:var(--fa-tinta);background-color:#fff; appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236B7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center} #ctc-funnel-a select.campo:disabled{color:#C6CBD3;background-color:var(--fa-panel);cursor:default} #ctc-funnel-a select.campo.cargando{color:transparent; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7' stroke='%23E5E7EB' stroke-width='3' fill='none'/%3E%3Cpath d='M9 2a7 7 0 0 1 7 7' stroke='%23FF4444' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")} #ctc-funnel-a .campo-placa input.campo{text-transform:uppercase;letter-spacing:.08em;font-weight:600} #ctc-funnel-a .campo-placa input.campo::placeholder{letter-spacing:.08em;font-weight:400;text-transform:none} #ctc-funnel-a .campo-placa.error{animation:fa-tiembla .3s} #ctc-funnel-a .campo-placa.error input.campo{border-color:var(--fa-rojo)} @keyframes fa-tiembla{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} #ctc-funnel-a .pista-error{display:none;font-size:12.5px;color:var(--fa-rojo-press);margin-top:6px} #ctc-funnel-a .pista-error.visible{display:block} /* ---- botones ---- */ #ctc-funnel-a .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px; border:0;border-radius:14px;font:inherit;font-size:16.5px;font-weight:700;cursor:pointer} #ctc-funnel-a .btn-rojo{background:var(--fa-rojo);color:#fff;margin-top:26px; box-shadow:0 6px 18px rgba(255,68,68,.35)} #ctc-funnel-a .btn-rojo:hover{background:var(--fa-rojo-press)} #ctc-funnel-a .btn-rojo:disabled{background:#F1B3B3;box-shadow:none;cursor:default} /* ---- ventajas (P1) ---- */ #ctc-funnel-a .ventajas{display:flex;flex-direction:column;gap:9px;margin-top:20px} #ctc-funnel-a .ventaja{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--fa-gris);line-height:1.4} #ctc-funnel-a .ventaja::before{content:"\2713";flex:none;width:18px;height:18px;border-radius:50%; background:#ECFDF5;color:var(--fa-ok);font-size:11px;font-weight:800;display:flex; align-items:center;justify-content:center} /* ---- transición (P2): pulso + frases ---- */ #ctc-funnel-a #sc-espera{display:none;text-align:center} #ctc-funnel-a #sc-espera.active{display:flex;flex-direction:column;align-items:center; justify-content:center;min-height:420px} #ctc-funnel-a .pulso{position:relative;width:84px;height:84px} #ctc-funnel-a .pulso::before{content:"";position:absolute;inset:28px;border-radius:50%; background:var(--fa-rojo);animation:fa-late 2.4s ease-in-out infinite} #ctc-funnel-a .pulso i{position:absolute;inset:0;border-radius:50%;background:var(--fa-rojo); opacity:0;animation:fa-onda 2.4s ease-out infinite} #ctc-funnel-a .pulso i + i{animation-delay:-1.2s} @keyframes fa-late{0%,100%{transform:scale(.9)}50%{transform:scale(1.1)}} @keyframes fa-onda{0%{transform:scale(.34);opacity:.32}100%{transform:scale(1);opacity:0}} #ctc-funnel-a .msg-rotor{margin-top:28px;font-size:14.5px;font-weight:500;color:var(--fa-gris); min-height:22px;transition:opacity .35s ease} #ctc-funnel-a .msg-rotor.fuera{opacity:0} /* ---- resumen (P3): banner + lista en cascada ---- */ #ctc-funnel-a .hallazgo{display:flex;align-items:center;gap:10px;background:#ECFDF5; border:1px solid #A7F3D0;border-radius:12px;padding:12px 14px;margin-top:16px; font-size:13.5px;color:#065F46} #ctc-funnel-a .hallazgo[hidden]{display:none} #ctc-funnel-a .hallazgo.parcial{background:var(--fa-ambar-bg);border-color:#FDE68A;color:var(--fa-ambar)} #ctc-funnel-a .hallazgo .icono{flex:none;width:22px;height:22px;border-radius:50%;background:var(--fa-ok); color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700} #ctc-funnel-a .hallazgo.parcial .icono{background:#F59E0B} #ctc-funnel-a .a-lista{margin-top:16px;border:1.5px solid var(--fa-linea);border-radius:16px;overflow:hidden} #ctc-funnel-a .fila{display:flex;align-items:center;gap:10px;padding:12px 14px; border-bottom:1px solid var(--fa-linea);background:#fff} #ctc-funnel-a .fila:last-child{border-bottom:0} #ctc-funnel-a .fila .datos{flex:1;min-width:0} #ctc-funnel-a .fila .etiq{font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--fa-gris)} #ctc-funnel-a .fila .valor{font-size:15px;font-weight:600;color:var(--fa-tinta);margin-top:2px} #ctc-funnel-a .fila .lapiz{border:0;background:none;color:var(--fa-gris);font-size:13px;cursor:pointer; padding:6px;font-family:inherit;text-decoration:underline;flex:none} #ctc-funnel-a .fila .lapiz:hover{color:var(--fa-tinta)} #ctc-funnel-a .fila.editando{background:var(--fa-panel);display:block} #ctc-funnel-a .fila.editando .etiq{margin-bottom:6px;display:block} #ctc-funnel-a .fila.revisar{background:var(--fa-ambar-bg)} #ctc-funnel-a .fila .aviso{font-size:11px;color:var(--fa-ambar);margin-top:2px} #ctc-funnel-a .fila.pendiente .valor{color:#C6CBD3;font-weight:400;font-style:italic} #ctc-funnel-a .edita-acciones{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center} #ctc-funnel-a .edita-aviso{font-size:12px;color:var(--fa-ambar);flex-basis:100%} /* ---- contacto (P4) ---- */ #ctc-funnel-a .campo-cp-wrap{position:relative} #ctc-funnel-a .campo-cp-wrap input{padding-right:44px} #ctc-funnel-a .cp-spin{position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px; border:3px solid var(--fa-linea);border-top-color:var(--fa-rojo);border-radius:50%; animation:fa-gira .7s linear infinite;display:none} #ctc-funnel-a .cp-spin.visible{display:block} @keyframes fa-gira{to{transform:rotate(360deg)}} #ctc-funnel-a .ubicacion{display:none;margin-top:10px} #ctc-funnel-a .ubicacion.visible{display:block;animation:fa-aparece .25s ease} #ctc-funnel-a .ubi-card{display:flex;align-items:center;gap:10px;background:#ECFDF5; border:1px solid #A7F3D0;border-radius:12px;padding:12px 14px} #ctc-funnel-a .ubi-card .pin{flex:none;width:30px;height:30px;border-radius:50%;background:var(--fa-ok); color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px} #ctc-funnel-a .ubi-card .datos{flex:1;min-width:0} #ctc-funnel-a .ubi-card .loc{font-size:15px;font-weight:700;color:#065F46} #ctc-funnel-a .ubi-card .prov{font-size:12.5px;color:#047857;margin-top:1px} #ctc-funnel-a .ubi-card .cambiar{border:0;background:none;font:inherit;font-size:12.5px;color:#047857; text-decoration:underline;cursor:pointer;flex:none;padding:4px} #ctc-funnel-a .ubi-pregunta{font-size:13.5px;font-weight:700;color:var(--fa-tinta);margin:4px 0 8px} #ctc-funnel-a .ubi-pregunta span{font-weight:400;color:var(--fa-gris)} #ctc-funnel-a .ubi-opciones{display:flex;flex-direction:column;gap:8px} #ctc-funnel-a .ubi-op{display:flex;align-items:center;gap:10px;border:1.5px solid var(--fa-linea); border-radius:12px;background:#fff;padding:12px 14px;font:inherit;font-size:14.5px;font-weight:600; color:var(--fa-tinta);cursor:pointer;text-align:left;width:100%} #ctc-funnel-a .ubi-op:hover{border-color:#C6CBD3} #ctc-funnel-a .ubi-op .punto{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #C6CBD3} #ctc-funnel-a .aviso-cp{display:none;margin-top:8px;font-size:12.5px;color:var(--fa-ambar); background:var(--fa-ambar-bg);border:1px solid #FDE68A;border-radius:10px;padding:9px 12px} #ctc-funnel-a .aviso-cp.visible{display:block} #ctc-funnel-a .tel-uno{display:flex;align-items:stretch;height:54px;border:1.5px solid var(--fa-linea); border-radius:12px;background:#fff;overflow:hidden} #ctc-funnel-a .tel-uno .tel-fijo{display:flex;align-items:center;padding:0 14px;font-size:15.5px; font-weight:700;color:var(--fa-gris);background:var(--fa-panel);border-right:1.5px solid var(--fa-linea)} #ctc-funnel-a .tel-uno input.campo{flex:1;min-width:0;border:0;height:100%;border-radius:0} #ctc-funnel-a .tel-uno input.campo:focus{outline:none} #ctc-funnel-a .tel-uno:focus-within{outline:2px solid var(--fa-rojo);outline-offset:2px} #ctc-funnel-a .tel-extranjero{border:0;background:none;font:inherit;font-size:12.5px;color:var(--fa-gris); text-decoration:underline;cursor:pointer;margin-top:8px;padding:0;display:block} #ctc-funnel-a .tel-extranjero:hover{color:var(--fa-tinta)} #ctc-funnel-a .tel-grupo{display:flex;gap:8px} #ctc-funnel-a .tel-grupo[hidden],#ctc-funnel-a .tel-uno[hidden],#ctc-funnel-a .tel-extranjero[hidden]{display:none} #ctc-funnel-a .tel-grupo select.campo{flex:0 0 112px;padding:0 30px 0 12px; background-position:right 10px center;font-variant-numeric:tabular-nums} #ctc-funnel-a .tel-grupo input{flex:1;min-width:0} #ctc-funnel-a .sugerencia-email{display:none;margin-top:8px;font-size:13px;background:#EFF6FF; border:1px solid #BFDBFE;border-radius:10px;padding:10px 12px;color:#1E40AF;line-height:1.45} #ctc-funnel-a .sugerencia-email.visible{display:block;animation:fa-aparece .25s ease} #ctc-funnel-a .sugerencia-email b{word-break:break-all} #ctc-funnel-a .sugerencia-email .acciones{margin-top:8px;display:flex;gap:16px} #ctc-funnel-a .sugerencia-email button{border:0;background:none;font:inherit;font-size:13px;cursor:pointer;padding:0} #ctc-funnel-a .sugerencia-email .si{color:#1D4ED8;font-weight:700;text-decoration:underline} #ctc-funnel-a .sugerencia-email .no{color:#60A5FA} #ctc-funnel-a .legal{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:12.5px; color:var(--fa-gris);line-height:1.45;cursor:pointer} #ctc-funnel-a .legal input{width:18px;height:18px;margin-top:1px;accent-color:var(--fa-rojo);flex:none} #ctc-funnel-a .legal.error{color:var(--fa-rojo-press)} #ctc-funnel-a .legal a{color:inherit} /* ---- final (P5) y gracias (P7) ---- */ #ctc-funnel-a #sc-fin,#ctc-funnel-a #sc-gracias{text-align:center;padding-top:34px} #ctc-funnel-a .tick{width:64px;height:64px;border-radius:50%;background:var(--fa-ok);color:#fff; font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px} /* variante "sin cifra": lupa en rojo suave — valoración humana, no éxito verde */ #ctc-funnel-a .tick.lupa{background:#FFF1F3;color:var(--fa-rojo)} #ctc-funnel-a .fin-coche-card{margin-top:20px;border:1.5px solid var(--fa-linea);border-radius:14px; padding:13px 14px;text-align:left} #ctc-funnel-a .fin-coche-card .fcc-titulo{font-size:15px;font-weight:700;color:var(--fa-tinta)} #ctc-funnel-a .fin-coche-card .fcc-datos{font-size:12.5px;color:var(--fa-gris);margin-top:4px;line-height:1.5} #ctc-funnel-a .oferta{margin-top:22px;border:1.5px solid var(--fa-linea);border-radius:16px; padding:18px;text-align:center} #ctc-funnel-a .oferta[hidden]{display:none} #ctc-funnel-a .oferta .etiq-of{font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--fa-gris)} #ctc-funnel-a .oferta .cifra{font-size:38px;font-weight:800;letter-spacing:-.02em; color:var(--fa-tinta);margin-top:6px} #ctc-funnel-a .oferta .desglose{font-size:12.5px;color:var(--fa-gris);margin-top:8px;line-height:1.5} #ctc-funnel-a .fin-explica{margin-top:12px;background:var(--fa-panel);border:1px solid var(--fa-linea); border-radius:12px;padding:13px 15px;font-size:14.5px;color:var(--fa-gris);line-height:1.6;text-align:left} #ctc-funnel-a .fin-explica b{color:var(--fa-tinta)} #ctc-funnel-a .fin-explica b.cobro{color:var(--fa-ok)} #ctc-funnel-a .fin-canal{margin-top:20px;text-align:left} #ctc-funnel-a .canales{display:flex;flex-direction:column;gap:10px;margin-top:12px} #ctc-funnel-a .canal-card{border:1.5px solid var(--fa-linea);border-radius:14px;background:#fff; text-align:left;transition:border-color .2s} #ctc-funnel-a .canal-card.elegida{border-color:var(--fa-rojo)} #ctc-funnel-a .canal-cab{display:flex;align-items:center;gap:10px;width:100%;padding:14px 15px;border:0; background:none;font:inherit;font-size:14.5px;font-weight:600;color:var(--fa-tinta);cursor:pointer; text-align:left} #ctc-funnel-a .radio-punto{width:20px;height:20px;border-radius:50%;border:2px solid var(--fa-linea); flex:none;background:#fff;display:flex;align-items:center;justify-content:center;transition:border-color .2s} #ctc-funnel-a .canal-card.elegida .radio-punto{border-color:var(--fa-rojo)} #ctc-funnel-a .canal-card.elegida .radio-punto::after{content:"";width:10px;height:10px; border-radius:50%;background:var(--fa-rojo)} #ctc-funnel-a .canal-cuerpo{padding:2px 15px 14px;animation:fa-aparece .25s ease} #ctc-funnel-a .canal-confirma{font-size:12.5px;color:var(--fa-gris);margin:0 0 8px} #ctc-funnel-a .envio-dato{display:flex;align-items:center;justify-content:space-between;gap:10px; border:1.5px solid var(--fa-linea);border-radius:12px;padding:13px 14px;background:var(--fa-panel)} #ctc-funnel-a .envio-valor{font-size:15.5px;font-weight:700;color:var(--fa-tinta);word-break:break-all} #ctc-funnel-a .envio-editar{border:0;background:none;font:inherit;font-size:13px;color:var(--fa-gris); text-decoration:underline;cursor:pointer;flex:none;padding:4px} #ctc-funnel-a .envio-editar:hover{color:var(--fa-tinta)} #ctc-funnel-a .envio-input-wrap{display:flex;align-items:stretch;height:50px; border:1.5px solid var(--fa-linea);border-radius:12px;overflow:hidden;background:#fff} #ctc-funnel-a .envio-pref{display:flex;align-items:center;padding:0 14px;font-weight:700; color:var(--fa-gris);background:var(--fa-panel);border-right:1.5px solid var(--fa-linea)} #ctc-funnel-a .envio-input-wrap input.campo{flex:1;min-width:0;border:0;height:100%;border-radius:0} #ctc-funnel-a .envio-input-wrap input.campo:focus{outline:none} #ctc-funnel-a .envio-input-wrap:focus-within{outline:2px solid var(--fa-rojo);outline-offset:2px} /* ---- error de servicio (sin equivalente en el mockup: cosas del mundo real) ---- */ #ctc-funnel-a .fallo-servicio{margin-top:16px;font-size:13px;color:var(--fa-ambar); background:var(--fa-ambar-bg);border:1px solid #FDE68A;border-radius:10px;padding:10px 12px;display:none} #ctc-funnel-a .fallo-servicio.visible{display:block} @media (prefers-reduced-motion:reduce){ #ctc-funnel-a *,#ctc-funnel-a *::before,#ctc-funnel-a *::after{animation:none !important;transition:none !important} #ctc-funnel-a .pulso i{display:none} } /* ========================================================================== Desktop (≥900px) — mismas pantallas y flujo, aprovechando el ancho. Pedido por Dani 1-sep: "dos columnas a veces, como en las specs del coche". Solo layout: móvil (<900px) queda EXACTAMENTE igual (mobile-first intacto). ========================================================================== */ @media (min-width: 900px) { /* el contenedor deja paso: cada pantalla fija su propio ancho */ #ctc-funnel-a { max-width: 880px; } #ctc-funnel-a #sc-inicio { max-width: 560px; margin-left: auto; margin-right: auto; } #ctc-funnel-a .sc h2 { font-size: 28px; } #ctc-funnel-a .sc { padding-top: 18px; } /* ---- P1 inicio: matrícula y km lado a lado, ventajas en fila ---- */ #ctc-funnel-a #sc-inicio.active { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; grid-template-areas: "t t" "s s" "lp lk" "cp sk" "ep ek" "b b" "v v"; } #ctc-funnel-a #sc-inicio > h2 { grid-area: t; } #ctc-funnel-a #sc-inicio > .sub { grid-area: s; } #ctc-funnel-a #sc-inicio > label[for="fa-placa"] { grid-area: lp; } #ctc-funnel-a #sc-inicio > .campo-placa { grid-area: cp; } #ctc-funnel-a #sc-inicio > #fa-err-placa { grid-area: ep; } #ctc-funnel-a #sc-inicio > label[for="fa-km"] { grid-area: lk; } #ctc-funnel-a #sc-inicio > #fa-km { grid-area: sk; } #ctc-funnel-a #sc-inicio > #fa-err-km { grid-area: ek; } #ctc-funnel-a #sc-inicio > #fa-valorar { grid-area: b; } #ctc-funnel-a #sc-inicio > .ventajas { grid-area: v; flex-direction: row; justify-content: space-between; gap: 14px; flex-wrap: wrap; } #ctc-funnel-a #sc-inicio .ventaja { flex: 1 1 30%; min-width: 150px; } /* ---- P3 resumen: los specs del coche en dos columnas de cards ---- */ #ctc-funnel-a #sc-resumen { max-width: 860px; margin: 0 auto; } #ctc-funnel-a #sc-resumen .a-lista { border: 0; border-radius: 0; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #ctc-funnel-a #sc-resumen .fila { border: 1.5px solid var(--fa-linea); border-radius: 12px; } #ctc-funnel-a #sc-resumen .fila.editando { grid-column: 1 / -1; } #ctc-funnel-a #sc-resumen #fa-continuar { max-width: 480px; margin-left: auto; margin-right: auto; } /* ---- P4 contacto: dos columnas (nombre|teléfono, email|CP) ---- */ #ctc-funnel-a #sc-contacto { max-width: 860px; margin: 0 auto; } #ctc-funnel-a #sc-contacto.active { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; grid-template-areas: "t t" "s s" "ln lt" "in it" "en xt" "en et" "le lc" "ie ic" "sg ec" "sg ac" "sg uc" "lg lg" "el el" "fs fs" "b b"; } #ctc-funnel-a #sc-contacto > h2 { grid-area: t; } #ctc-funnel-a #sc-contacto > .sub { grid-area: s; } #ctc-funnel-a #sc-contacto > label[for="fa-nombre"] { grid-area: ln; } #ctc-funnel-a #sc-contacto > #fa-nombre { grid-area: in; } #ctc-funnel-a #sc-contacto > #fa-err-nombre { grid-area: en; align-self: start; } #ctc-funnel-a #sc-contacto > label[for="fa-tel"] { grid-area: lt; } #ctc-funnel-a #sc-contacto > .tel-uno, #ctc-funnel-a #sc-contacto > .tel-grupo { grid-area: it; } #ctc-funnel-a #sc-contacto > .tel-extranjero { grid-area: xt; } #ctc-funnel-a #sc-contacto > #fa-err-tel { grid-area: et; align-self: start; } #ctc-funnel-a #sc-contacto > label[for="fa-email"] { grid-area: le; } #ctc-funnel-a #sc-contacto > #fa-email { grid-area: ie; } #ctc-funnel-a #sc-contacto > #fa-err-email { grid-area: sg; align-self: start; } #ctc-funnel-a #sc-contacto > .sugerencia-email { grid-area: sg; align-self: start; } #ctc-funnel-a #sc-contacto > label[for="fa-cp"] { grid-area: lc; } #ctc-funnel-a #sc-contacto > .campo-cp-wrap { grid-area: ic; } #ctc-funnel-a #sc-contacto > #fa-err-cp { grid-area: ec; align-self: start; } #ctc-funnel-a #sc-contacto > .aviso-cp { grid-area: ac; align-self: start; } #ctc-funnel-a #sc-contacto > .ubicacion { grid-area: uc; align-self: start; } #ctc-funnel-a #sc-contacto > .legal { grid-area: lg; } #ctc-funnel-a #sc-contacto > #fa-err-legal { grid-area: el; } #ctc-funnel-a #sc-contacto > .fallo-servicio { grid-area: fs; } #ctc-funnel-a #sc-contacto > #fa-oferta { grid-area: b; max-width: 480px; margin-left: auto; margin-right: auto; width: 100%; } /* ---- P5 fin: coche+oferta a la izquierda, explicación+canal a la derecha ---- */ #ctc-funnel-a #sc-fin { max-width: 860px; margin: 0 auto; } #ctc-funnel-a #sc-fin.active { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; grid-template-areas: "tk tk" "h h" "s s" "cc ex" "of fc"; align-items: start; } #ctc-funnel-a #sc-fin > .tick { grid-area: tk; } #ctc-funnel-a #sc-fin > h2 { grid-area: h; } #ctc-funnel-a #sc-fin > .sub { grid-area: s; } #ctc-funnel-a #sc-fin > .fin-coche-card { grid-area: cc; margin-top: 22px; } #ctc-funnel-a #sc-fin > .oferta { grid-area: of; } #ctc-funnel-a #sc-fin > .fin-explica { grid-area: ex; margin-top: 22px; } #ctc-funnel-a #sc-fin > .fin-canal { grid-area: fc; margin-top: 22px; } #ctc-funnel-a #sc-fin .oferta .cifra { font-size: 44px; } /* ---- espera / gracias / aviso: centrados con algo más de aire ---- */ #ctc-funnel-a #sc-espera.active { min-height: 380px; max-width: 620px; margin-left: auto; margin-right: auto; } #ctc-funnel-a #sc-gracias, #ctc-funnel-a #sc-aviso { max-width: 620px; margin: 0 auto; } }