/* ============================================================ Pegamento entre el flujo porteado y el layout de npsolar. Se mantiene APARTE de easy-quote.css para que ese siga siendo un porte literal del prototipo y se pueda regenerar sin perder estos ajustes. 13-ago-2026 ============================================================ */ /* El prototipo era una pagina entera con su propio fondo en . Aqui el fondo se lo pone su propio contenedor, para no pisar el del sitio. La foto es la del hero de la home: cuadrilla propia en un tejado de Mackay, ya optimizada en tres tamanos. Nada de stock ni de IA. */ .eq-shell{ position: relative; background-color: #0B0E17; background-image: url('/images/hero-mobile.webp'); background-size: cover; background-position: 50% 38%; background-repeat: no-repeat; background-attachment: scroll; /* 100dvh y NO solo 100vh. El prototipo lo arreglo en su `body`, pero al aislar el CSS ese selector pasa a `.eq-shell body` y body es ANCESTRO de .eq-shell, o sea que alli el arreglo es inerte. En la web tiene que vivir aqui. */ min-height: 100vh; min-height: 100dvh; /* la nav del sitio es position:fixed, 96px de alto anclada en top:20 */ padding-top: 132px; /* hueco para la barra de acciones, que va fija abajo */ padding-bottom: 120px; } @media (max-width: 900px){ .eq-shell{ padding-top: 128px; } } /* .app ya trae max-width:640px y centrado. Aqui solo se le quita el relleno vertical que ahora pone el contenedor. */ .eq-shell .app{ padding-top: 0; padding-bottom: 0; } /* La barra de acciones tapaba el footer del sitio. En esta pagina el footer va oculto (es un funnel de pasos), asi que la barra se queda fija sin conflicto. */ #bar{ z-index: 60; } /* la nav del sitio va en 50 */ /* El prototipo daba por hecho que nadie mas tocaba los . El global.css del sitio los reestiliza, asi que se restauran los del flujo. */ .eq-shell select, .eq-shell input[type="text"], .eq-shell input[type="tel"], .eq-shell input[type="email"], .eq-shell textarea{ font-family: inherit; } /* ---- El velo oscuro sobre la foto ---------------------------------------- Mas cerrado arriba, para que la barra blanca de la nav tenga contra que apoyarse, y mas cerrado abajo por la barra de acciones. En el centro se ve la foto. */ .eq-shell::before{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(6,9,16,.94) 0, rgba(6,9,16,.72) 220px, rgba(6,9,16,.62) 46%, rgba(6,9,16,.88) 100%); pointer-events:none; z-index:0; } .eq-shell > *{ position:relative; z-index:1; } /* imagenes mas grandes segun el ancho, para no servir 1920px a un movil */ @media (min-width: 640px){ .eq-shell{ background-image:url('/images/hero-tablet.webp'); } } @media (min-width: 1100px){ .eq-shell{ background-image:url('/images/hero-desktop.webp'); background-attachment: fixed; /* en movil da tirones, por eso solo aqui */ } } /* ---- Lo que va FUERA de la tarjeta pasa a claro ------------------------- */ .eq-shell .screen h2, .eq-shell #head h1, .eq-shell #head h2{ color:#fff; } .eq-shell .screen .hint, .eq-shell #head p{ color:rgba(255,255,255,.72); } .eq-shell .savedbar{ color:rgba(255,255,255,.82); } .eq-shell .prog-count{ color:rgba(255,255,255,.66); } .eq-shell .prog-track{ background:rgba(255,255,255,.16); } .eq-shell .backlink{ color:rgba(255,255,255,.7); } .eq-shell .backlink:hover{ color:#fff; } .eq-shell .later{ color:rgba(255,255,255,.6); } .eq-shell .later:hover{ color:#fff; } /* la tarjeta del formulario se queda clara: maximo contraste para leer y escribir */ .eq-shell .f1{ box-shadow:0 24px 60px rgba(0,0,0,.45); } /* la barra de acciones, oscura para no cortar la foto con una franja gris */ .eq-shell #bar{ background:rgba(9,12,20,.92); border-top:1px solid rgba(255,255,255,.10); } /* ---- La cabecera de progreso sobre la foto oscura ----------------------- El prototipo la penso sobre gris claro: el verde #1a7f5a y el gris de texto no se leen sobre la foto. Aqui pasa a chip claro con verde vivo. */ .eq-shell .savedbar{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:7px 14px 7px 11px; color:rgba(255,255,255,.88); backdrop-filter:blur(6px); margin-bottom:14px; } .eq-shell .savedbar .tk{ color:#4ade80; /* verde que si se ve sobre oscuro */ font-weight:900; font-size:13px; } .eq-shell .savedbar b{ color:#fff; } .eq-shell .prog-track{ background:rgba(255,255,255,.16); } .eq-shell .prog-count{ color:rgba(255,255,255,.72); } .eq-shell .prog-count b{ color:var(--brand,#F5A623); } /* ---- La nota de la direccion ------------------------------------------- */ .eq-shell .addr-note{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; font-weight:600; line-height:1.45; margin:10px 0 4px; animation:fadeUp .34s cubic-bezier(.22,1,.36,1) both; } .eq-shell .addr-note .tk{ width:17px; height:17px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; margin-top:1px; } .eq-shell .addr-note.ok { color:#1a7f5a; } .eq-shell .addr-note.ok .tk { background:#1a7f5a; } .eq-shell .addr-note.warn { color:#9a5b06; } .eq-shell .addr-note.warn .tk { background:#c8820c; } /* aire entre el bloque de direccion y la pregunta siguiente: se pisaban */ .eq-shell #addrSlot{ margin-bottom:22px; }