/* Relevo — capa de diseño de la landing: timeline con coche, mocks animados, destacado lava, tarjetas numeradas y FAQ por categorías. Depende de relevo.css (tokens, tipografía, botones). */ :root{ --ink-80:#1f1f1f; --ink-60:#4a4a4a; --ink-50:#6b6b6b; --ink-40:#8a8a8a; --ink-10:#e5e5e5; --ink-05:#f6f5f3; --verde:#0E6E2E; } /* ===== Reveal on scroll ===== */ /* sin JS (clase .js en ) el contenido nunca se oculta */ .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)} .js .reveal.vis{opacity:1;transform:none} .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1;transform:none;transition:none} *{animation:none!important} } /* ===== Hero ===== */ .hero .cue,.brasa>.cue-scroll{margin-top:32px;display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:#FFD9C2; min-height:44px;padding:2px 0} .hero .cue::before,.brasa>.cue-scroll::before{content:"";width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v8.5M2.5 6.5 6 10l3.5-3.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/11px 11px; animation:cueBob 1.8s ease-in-out infinite} @keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} /* ===== Cabecera de sección centrada ===== */ .enc{max-width:44rem;margin:0 auto 10px;text-align:center} .enc .titulo{text-wrap:balance} .enc p.lead{margin-left:auto;margin-right:auto} /* ===== Timeline ===== */ section.timeline{padding:78px 0 40px;position:relative;overflow:hidden} .timeline-wrap{max-width:1080px;margin:0 auto;padding:0 26px;position:relative} .timeline-line{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);z-index:1; background-image:linear-gradient(var(--linea) 50%,transparent 50%);background-size:2px 10px;background-repeat:repeat-y} .timeline-line-fill{position:absolute;left:50%;top:0;width:2px;height:0;background:var(--negro); transform:translateX(-50%);z-index:2;transition:height .3s cubic-bezier(.2,.6,.2,1)} .timeline-car{position:absolute;left:50%;top:0;width:62px;height:62px;z-index:4; transform:translate3d(-50%,-50%,0);transition:top .3s cubic-bezier(.2,.6,.2,1);will-change:top} .timeline-car svg{filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))} .step{position:relative;padding:80px 0;display:grid;grid-template-columns:1fr 1fr;gap:74px;align-items:center;z-index:2} .step.is-right .step-text{grid-column:2;grid-row:1} .step.is-right .step-mock{grid-column:1;grid-row:1} .step-dot{position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;background:var(--linea); transform:translate(-50%,-50%);z-index:5;box-shadow:0 0 0 6px #fff;transition:background .25s,transform .25s} .step.on .step-dot{background:var(--lava);transform:translate(-50%,-50%) scale(1.15)} .step-eye{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-50);margin:0 0 14px} .step.on .step-eye{color:var(--lava)} .step-h2{font-size:clamp(24px,2.8vw,32px);font-weight:700;line-height:1.14;letter-spacing:-.01em;margin:0;text-wrap:balance} .step-body{font-weight:300;font-size:16px;line-height:1.62;color:var(--ink-60);margin:16px 0 0;max-width:44ch} .step-time{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:9px 15px;border-radius:999px; background:var(--negro);color:#fff;font-size:12px;font-weight:600} .step-time::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lava)} .step-bullets{list-style:none;padding:0;margin:20px 0 0} .step-bullets li{position:relative;padding-left:26px;margin-bottom:9px;font-size:14.5px;font-weight:400;color:var(--ink-60)} .step-bullets li::before{content:"";position:absolute;left:1px;top:6px;width:13px;height:7px; border-left:1.6px solid var(--lava);border-bottom:1.6px solid var(--lava);transform:rotate(-45deg)} /* ===== Mocks ===== */ .mock{background:#fff;border:1px solid var(--ink-10);border-radius:20px;overflow:hidden; box-shadow:0 18px 40px -28px rgba(0,0,0,.28),0 3px 10px -6px rgba(0,0,0,.06)} .mock-head{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 18px;border-bottom:1px solid var(--ink-10);font-size:12.5px;font-weight:600;color:var(--ink-50)} .mock-head .dot-live{display:inline-flex;align-items:center;gap:7px;color:var(--lava)} .mock-head .dot-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lava);animation:pulse 1.6s ease-out infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,0,.5)}70%{box-shadow:0 0 0 9px rgba(255,77,0,0)}100%{box-shadow:0 0 0 0 rgba(255,77,0,0)}} .mock-body{padding:20px 18px 22px} .mock .fila{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 0;border-bottom:1px solid var(--ink-10);font-size:13.5px;color:var(--ink-60)} .mock .fila:last-child{border-bottom:none} .mock .fila b{font-weight:700;color:var(--negro)} .mock .cifra-xl{font-size:clamp(30px,4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1} .mock .etq{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40)} /* mock 1 — tasación: horquilla de mercado */ .rango-track{position:relative;height:10px;border-radius:999px;margin:22px 0 8px; background:linear-gradient(90deg,var(--ink-10),#FFD3BE,var(--lava))} .rango-track .marca{position:absolute;top:-6px;width:22px;height:22px;border-radius:50%;background:#fff; border:3px solid var(--lava);box-shadow:0 2px 8px rgba(0,0,0,.16);left:0;animation:marcaGo 5s cubic-bezier(.4,0,.2,1) infinite} @keyframes marcaGo{0%{left:8%}40%{left:66%}70%{left:66%}100%{left:8%}} .rango-pies{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-40)} .caret::after{content:"";display:inline-block;width:2px;height:.95em;background:var(--lava); margin-left:4px;vertical-align:-.08em;animation:caret 1s steps(1) infinite} @keyframes caret{50%{opacity:0}} /* mock 2 — mandato */ .doc-line{height:8px;border-radius:999px;background:var(--ink-05);margin-bottom:10px} .doc-line.w70{width:70%}.doc-line.w45{width:45%}.doc-line.w88{width:88%} .sello{margin-top:16px;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:10px; background:rgba(14,110,46,.08);color:var(--verde);font-size:12.5px;font-weight:600} .sello::before{content:"";width:14px;height:8px;border-left:2px solid var(--verde);border-bottom:2px solid var(--verde); transform:rotate(-45deg);margin-bottom:3px} /* mock 3 — producción de fotos */ .fotos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .foto{position:relative;aspect-ratio:4/3;border-radius:8px;background:linear-gradient(135deg,#232323,#3a3a3a);overflow:hidden} .foto::after{content:"";position:absolute;inset:0;background:#fff;opacity:.9;transform:translateY(0); animation:uplGo 6s ease-in-out infinite} .foto:nth-child(1)::after{animation-delay:.1s} .foto:nth-child(2)::after{animation-delay:.5s} .foto:nth-child(3)::after{animation-delay:.9s} .foto:nth-child(4)::after{animation-delay:1.3s} .foto:nth-child(5)::after{animation-delay:1.7s} .foto:nth-child(6)::after{animation-delay:2.1s} .foto:nth-child(7)::after{animation-delay:2.5s} .foto:nth-child(8)::after{animation-delay:2.9s} @keyframes uplGo{0%{opacity:.9}22%{opacity:0}92%{opacity:0}100%{opacity:.9}} .foto .tick{position:absolute;right:5px;bottom:5px;width:15px;height:15px;border-radius:50%;background:var(--lava); opacity:0;animation:tickGo 6s ease-in-out infinite} .foto .tick::before{content:"";position:absolute;left:4px;top:4px;width:7px;height:4px; border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)} .foto:nth-child(1) .tick{animation-delay:.1s}.foto:nth-child(2) .tick{animation-delay:.5s} .foto:nth-child(3) .tick{animation-delay:.9s}.foto:nth-child(4) .tick{animation-delay:1.3s} .foto:nth-child(5) .tick{animation-delay:1.7s}.foto:nth-child(6) .tick{animation-delay:2.1s} .foto:nth-child(7) .tick{animation-delay:2.5s}.foto:nth-child(8) .tick{animation-delay:2.9s} @keyframes tickGo{0%,20%{opacity:0;transform:scale(.6)}26%{opacity:1;transform:scale(1)}92%{opacity:1}100%{opacity:0}} .barra-prog{height:6px;border-radius:999px;background:var(--ink-05);margin-top:16px;overflow:hidden} .barra-prog i{display:block;height:100%;background:var(--lava);width:0;animation:progGo 6s ease-in-out infinite} @keyframes progGo{0%{width:4%}90%{width:100%}100%{width:100%}} /* mock 4 — filtro de contactos */ .mock.oscura{background:var(--carbon);border-color:#2a2a2a} .mock.oscura .mock-head{border-color:#2a2a2a;color:#9a9a9a} .mock.oscura .fila{border-color:#2a2a2a;color:#c9c9c9} .mock.oscura .fila b{color:#fff} .chip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px; background:#1e1e1e;margin-bottom:9px;font-size:13.5px;color:#DDD;opacity:0;animation:chipGo 7s ease-in-out infinite} .chip:nth-child(1){animation-delay:0s} .chip:nth-child(2){animation-delay:1.6s} .chip:nth-child(3){animation-delay:3.2s} .chip:nth-child(4){animation-delay:4.8s} @keyframes chipGo{ 0%{opacity:0;transform:translateY(10px)} 4%{opacity:1;transform:translateY(0)} 20%{opacity:1} 24%{opacity:.45} 94%{opacity:.45} 100%{opacity:0;transform:translateY(-6px)} } .chip .est{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap} .chip .est.ok{background:rgba(255,77,0,.16);color:#FF7A3D} .chip .est.no{background:#2a2a2a;color:#8a8a8a} /* mock 5 — vendido */ .vendido{display:flex;align-items:baseline;gap:12px} .vendido .sel{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--verde); background:rgba(14,110,46,.1);padding:5px 11px;border-radius:999px} .barra-rep{display:flex;height:34px;border-radius:9px;overflow:hidden;margin:18px 0 14px} .barra-rep .b1{background:var(--negro);flex:14205} .barra-rep .b2{background:var(--lava);flex:795} .confeti{position:absolute;inset:0;overflow:hidden;pointer-events:none} .confeti i{position:absolute;top:-14px;width:7px;height:11px;border-radius:2px;opacity:0;animation:fall 4.5s linear infinite} .confeti i:nth-child(1){background:var(--lava)} .confeti i:nth-child(2){background:#3DA5FF} .confeti i:nth-child(3){background:#FFC400} .confeti i:nth-child(4){background:var(--negro)} .confeti i:nth-child(5){background:#2FD07A} .confeti i:nth-child(6){background:#FF4F9A} .confeti i:nth-child(1){left:8%;animation-delay:.2s} .confeti i:nth-child(2){left:22%;animation-delay:1.1s} .confeti i:nth-child(3){left:38%;animation-delay:.6s} .confeti i:nth-child(4){left:54%;animation-delay:1.7s} .confeti i:nth-child(5){left:69%;animation-delay:.9s} .confeti i:nth-child(6){left:84%;animation-delay:2.2s} @keyframes fall{0%{opacity:0;transform:translateY(-14px) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(320px) rotate(720deg)}} /* ===== Bloque destacado (highlighter lava) ===== */ section.destacado{padding:86px 0} .destacado-h{font-weight:700;font-size:clamp(28px,4.2vw,46px);line-height:1.14;letter-spacing:-.015em;margin:0;max-width:16em;text-wrap:balance} .destacado-h em{font-style:normal;padding:0 6px;-webkit-box-decoration-break:clone;box-decoration-break:clone; background:linear-gradient(180deg,transparent 50%,rgba(255,77,0,.28) 50%,rgba(255,77,0,.28) 93%,transparent 93%)} .destacado p.lead{margin-top:20px;font-size:18px} .pill-cta{margin-top:30px;display:inline-flex;align-items:center;gap:10px;background:var(--negro);color:#fff; border-radius:999px;padding:16px 28px;font-size:15px;font-weight:600;transition:gap .15s,background .15s} .pill-cta:hover{background:#000;gap:16px} .pill-cta::after{content:"→"} /* ===== Meta (cierre del recorrido) ===== */ section.meta{position:relative;overflow:hidden;padding:0 0 clamp(70px,9vw,120px);background:#fff} .meta-bandera{height:96px; background:conic-gradient(var(--negro) 25%,#fff 0 50%,var(--negro) 0 75%,#fff 0) 0 0/32px 32px} .meta-confeti{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none} .meta-confeti i{position:absolute;top:-28px;display:block;will-change:transform; animation:metaCae linear infinite;animation-play-state:paused} section.meta.viva .meta-confeti i{animation-play-state:running} /* el vaivén lateral (--dx alternando signo) es lo que hace que parezca papel y no lluvia */ @keyframes metaCae{ 0%{opacity:0;transform:translate3d(0,0,0) rotate(0)} 7%{opacity:var(--op,1)} 33%{transform:translate3d(var(--dx,0px),calc(var(--caida,760px)*.33),0) rotate(calc(var(--giro,540deg)*.33))} 66%{opacity:var(--op,1);transform:translate3d(calc(var(--dx,0px)*-1),calc(var(--caida,760px)*.66),0) rotate(calc(var(--giro,540deg)*.66))} 100%{opacity:0;transform:translate3d(0,var(--caida,760px),0) rotate(var(--giro,540deg))} } .meta-wrap{position:relative;z-index:1;padding-top:clamp(64px,8vw,104px)} .meta-h{margin:0;font-weight:700;font-size:clamp(38px,6.4vw,76px);line-height:1.05;letter-spacing:-.025em} .meta-h em{font-style:normal;padding:0 .12em; background:linear-gradient(180deg,transparent 20%,var(--lava) 20%,var(--lava) 92%,transparent 92%)} .meta-lead{margin:22px auto 0;max-width:32em;font-size:clamp(16px,1.5vw,19px);font-weight:300;color:var(--ink-60);line-height:1.6} .meta .pill-cta{margin-top:34px} @media (max-width:640px){ .meta-bandera{height:60px;background-size:20px 20px} } @media (prefers-reduced-motion:reduce){ .meta-confeti{display:none} } /* ===== Tarjetas numeradas ===== */ .why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px} .why-card{background:#fff;border:1px solid var(--ink-10);border-radius:16px;padding:28px 26px 30px; display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s} .why-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(0,0,0,.35)} .why-num{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--lava)} .why-card h3{margin:0;font-size:20px;font-weight:700;line-height:1.2} .why-card p{margin:0;font-size:14.5px;font-weight:400;color:var(--ink-60);line-height:1.6} /* ===== FAQ por categorías ===== */ .faq-card{background:var(--ink-05);border:1px solid var(--ink-10);border-radius:28px; padding:clamp(36px,5vw,68px) clamp(26px,4vw,64px)} .faq-grid{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:clamp(30px,5vw,68px);align-items:start} .faq-rail{display:flex;flex-direction:column;gap:4px;position:sticky;top:96px} .faq-cat{text-align:left;background:none;border:none;font-family:inherit;cursor:pointer; padding:11px 14px;border-radius:10px;font-size:15px;font-weight:400;color:var(--ink-50);transition:background .15s,color .15s} .faq-cat:hover{background:rgba(0,0,0,.04);color:var(--negro)} .faq-cat.on{background:#fff;color:var(--negro);font-weight:600;box-shadow:var(--shadow)} .faq-group{display:none} .faq-group.on{display:block;animation:faqIn .35s cubic-bezier(.2,.6,.2,1)} @keyframes faqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .faq-qa{border-bottom:1px solid var(--ink-10);padding:20px 0} .faq-qa:first-child{padding-top:0} .faq-qa h3{margin:0 0 8px;font-size:17px;font-weight:600} .faq-qa p{margin:0;font-size:15px;font-weight:300;color:var(--ink-60);line-height:1.62} .faq-qa p.clip{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .faq-qa[data-abierto="true"] p.clip{-webkit-line-clamp:unset;overflow:visible} .faq-mas{margin-top:8px;background:none;border:none;padding:0;font-family:inherit;font-size:13.5px;font-weight:600; color:var(--lava);cursor:pointer} .faq-mas:hover{text-decoration:underline} .faq-pie{margin-top:26px;font-size:14px;color:var(--ink-50)} .faq-pie a{color:var(--lava);font-weight:600;display:inline-flex;gap:6px;transition:gap .15s} .faq-pie a:hover{gap:11px} /* ===== Barra de acción fija (móvil) ===== */ .barra-fija{display:none} /* ===== Responsive ===== */ @media (max-width:900px){ .why{grid-template-columns:1fr} .faq-grid{grid-template-columns:1fr} .faq-rail{position:static;flex-direction:row;flex-wrap:wrap;gap:8px} .faq-cat{padding:9px 14px;border-radius:999px;background:#fff;border:1px solid var(--ink-10)} /* el raíl se pega al borde para dejarle al texto casi todo el ancho */ section.timeline{padding:52px 0 16px} .timeline-wrap{padding:0 20px} .timeline-line,.timeline-line-fill{left:23px;transform:none} .timeline-car{left:23px;width:40px;height:40px;transform:translate3d(-50%,-50%,0)} .step{grid-template-columns:1fr;gap:22px;padding:38px 0 38px 30px} .step.is-right .step-text,.step.is-right .step-mock{grid-column:1} .step.is-right .step-text{grid-row:1} .step.is-right .step-mock{grid-row:2} /* el punto va centrado en el raíl: 23px del wrap menos sus 20px de padding */ .step-dot{left:4px;top:48px;transform:translate(-50%,-50%);box-shadow:0 0 0 5px #fff} .step.on .step-dot{transform:translate(-50%,-50%) scale(1.15)} .barra-fija{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;align-items:center; justify-content:space-between;padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--linea)} .barra-fija span{font-size:13px;font-weight:600;line-height:1.25} .barra-fija .btn{padding:11px 20px;font-size:14px;white-space:nowrap} body{padding-bottom:76px} } @media (max-width:640px){ .fotos-grid{grid-template-columns:repeat(4,1fr);gap:6px} .destacado-h{max-width:none} section.destacado{padding:56px 0} .destacado-h{font-size:clamp(25px,7vw,32px);line-height:1.18} .destacado p.lead{font-size:16px;margin-top:16px} .pill-cta{margin-top:24px;padding:15px 24px;font-size:14.5px} .mock .etq,.rango-pies{font-size:12.5px} .enc{margin-bottom:26px} .step{padding:34px 0 34px 30px} .step-eye{font-size:12.5px;letter-spacing:.14em;margin-bottom:10px} .step-h2{font-size:clamp(22px,6.2vw,27px);line-height:1.18} .step-body{font-size:15.5px;line-height:1.6;margin-top:13px} .step-bullets li{font-size:14.5px;padding-left:24px} .step-time{margin-top:18px;font-size:12.5px;padding:9px 14px} .why{gap:14px;margin-top:26px} .why-card{padding:22px 20px 24px;gap:11px} .why-card h3{font-size:18px} .faq-card{border-radius:20px;padding:26px 20px 28px} .faq-rail{gap:8px;margin-bottom:6px} .faq-cat{padding:11px 16px;font-size:14.5px;min-height:44px;display:inline-flex;align-items:center} .faq-qa{padding:18px 0} .faq-qa h3{font-size:16.5px} .faq-qa p{font-size:14.8px} .faq-mas{min-height:40px;display:inline-flex;align-items:center;font-size:14px} .meta-wrap{padding-top:clamp(44px,10vw,64px)} .meta-h{font-size:clamp(32px,9vw,44px)} .meta-lead{margin-top:16px;font-size:16px} .meta .pill-cta{margin-top:26px} .barra-fija{padding:10px 14px calc(10px + env(safe-area-inset-bottom))} .barra-fija span{font-size:12.5px} .barra-fija .btn{padding:12px 18px;font-size:13.5px} body{padding-bottom:72px} } @media (max-width:380px){ .timeline-wrap{padding:0 16px} .step{padding-left:30px} .step-dot{left:8px} .faq-card{padding:22px 16px 24px} } /* ===== Home: capa creativa (hero, tabla, calculadora) ===== */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* -- Formas flotantes del hero -- */ .brasa-formas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} .brasa-formas i{position:absolute;display:block;border-radius:50%; transform:translate3d(0,var(--py,0px),0);will-change:transform} .brasa-formas .f1{left:-6%;top:-18%;width:46vw;height:46vw;max-width:560px;max-height:560px; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.20),rgba(255,255,255,0) 62%)} .brasa-formas .f2{right:-10%;bottom:-26%;width:52vw;height:52vw;max-width:640px;max-height:640px; background:radial-gradient(circle at 60% 40%,rgba(110,10,0,.34),rgba(110,10,0,0) 64%)} .brasa-formas .f3{left:1%;bottom:-16%;width:190px;height:190px;border-radius:50%; border:1.5px solid rgba(255,255,255,.24);background:none} .brasa-formas .f4{right:26%;top:8%;width:96px;height:96px;border-radius:26px; border:1.5px solid rgba(255,255,255,.20);background:rgba(255,255,255,.05);transform:rotate(18deg)} .brasa-formas .f5{left:38%;top:-4%;width:280px;height:14px;border-radius:999px; background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,0));transform:rotate(-14deg)} .brasa-formas .f6{right:6%;top:44%;width:11px;height:11px;background:var(--lava); box-shadow:0 0 0 7px rgba(255,255,255,.14)} .brasa-formas .f4,.brasa-formas .f5{ transform:translate3d(0,var(--py,0px),0) rotate(var(--giro,0deg))} .brasa-formas .f4{--giro:18deg} .brasa-formas .f5{--giro:-14deg} /* -- Tabla comparativa destacada -- */ .comp{margin-top:34px;overflow-x:auto;padding:14px 0 6px;-webkit-overflow-scrolling:touch} .tabla-comp.v2{margin-top:0;min-width:720px;border-collapse:separate;border-spacing:0;font-size:14.5px} .tabla-comp.v2 th,.tabla-comp.v2 td{border-bottom:1px solid var(--linea);padding:16px 18px;text-align:left;vertical-align:middle} .tabla-comp.v2 thead th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40); font-weight:600;border-bottom:1px solid var(--linea);padding-bottom:14px} .tabla-comp.v2 tbody th{font-weight:600;font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--negro);width:23%} .tabla-comp.v2 tbody tr:last-child th,.tabla-comp.v2 tbody tr:last-child td{border-bottom:0} .tabla-comp.v2 tbody td{color:var(--ink-60);font-weight:400} .tabla-comp.v2 tbody tr{transition:background .18s} .tabla-comp.v2 tbody tr:hover th{color:var(--lava)} .tabla-comp.v2 .col-yo{background:var(--negro);color:#fff} .tabla-comp.v2 thead .col-yo{position:relative;color:#fff;border-radius:14px 14px 0 0;padding-top:18px; box-shadow:0 -14px 34px rgba(26,26,26,.16)} .tabla-comp.v2 tbody tr:last-child .col-yo{border-radius:0 0 14px 14px;padding-bottom:22px; box-shadow:0 18px 34px rgba(26,26,26,.16)} .tabla-comp.v2 tbody .col-yo{color:#fff;font-weight:600;border-bottom-color:rgba(255,255,255,.12)} .etq-yo{position:absolute;top:-13px;left:18px;background:var(--lava);color:#fff;font-size:10.5px; letter-spacing:.12em;padding:5px 11px;border-radius:999px} .tabla-comp.v2 tbody td::before{content:'';display:inline-block;width:18px;height:18px;border-radius:50%; margin-right:10px;vertical-align:-4px;background:var(--ink-10) no-repeat center/10px 10px;flex:none} .tabla-comp.v2 td.ok::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.7 2.7L10 3.3' fill='none' stroke='%234a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .tabla-comp.v2 td.mal::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.2 3.2l5.6 5.6M8.8 3.2l-5.6 5.6' fill='none' stroke='%23a09c96' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")} .tabla-comp.v2 td.neutro::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' fill='none' stroke='%23a09c96' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")} .tabla-comp.v2 td.bien::before{background-color:var(--lava); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.7 2.7L10 3.3' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} /* -- Calculadora de reparto -- */ .calc{margin-top:34px;background:#fff;border:1px solid var(--linea);border-radius:18px; box-shadow:0 18px 46px rgba(26,26,26,.09);padding:clamp(22px,3vw,34px)} .calc-top{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between} .calc-lab{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);font-weight:600} .calc-precio{font-weight:700;font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-.02em;margin-top:4px} .calc-check{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;color:var(--ink-60); background:var(--ink-05);border:1px solid var(--linea);border-radius:999px;padding:9px 17px;cursor:pointer} .calc-check input{accent-color:var(--lava);width:18px;height:18px;margin:0;flex:none} /* pista y pulgar por separado: la caja del input mide 44px para que se pueda agarrar con el dedo */ .calc-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:14px 0 0; background:none;cursor:pointer} .calc-range::-webkit-slider-runnable-track{height:8px;border-radius:999px; background:linear-gradient(90deg,var(--lava) var(--pos,35%),var(--ink-10) var(--pos,35%))} .calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;margin-top:-10px; background:#fff;border:3px solid var(--lava);box-shadow:0 3px 10px rgba(26,26,26,.18);cursor:grab} .calc-range::-moz-range-track{height:8px;border-radius:999px; background:linear-gradient(90deg,var(--lava) var(--pos,35%),var(--ink-10) var(--pos,35%))} .calc-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--lava); box-shadow:0 3px 10px rgba(26,26,26,.18);cursor:grab} .calc-range:focus-visible{outline:2px solid var(--negro);outline-offset:6px} .calc-escala{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-40)} .calc .barra{display:flex;height:46px;border-radius:12px;overflow:hidden;margin:24px 0 20px} .calc .barra span{flex:none;transition:width .35s cubic-bezier(.2,.7,.2,1)} .calc .barra .b1{background:var(--negro)} .calc .barra .b2{background:var(--lava)} .calc .leyenda{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;font-size:13.5px;color:var(--ink-60)} .calc .leyenda b{display:block;font-size:24px;font-weight:700;color:var(--negro);margin:2px 0 5px; font-variant-numeric:tabular-nums} .calc-total{margin:22px 0 6px;font-size:15px;color:var(--negro);font-weight:400; border-top:1px solid var(--linea);padding-top:18px} .calc-total b{font-weight:700} .tarifa{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s;border:1.5px solid transparent} .tarifa.viva{border-color:var(--lava);transform:translateY(-6px);box-shadow:0 16px 34px rgba(255,77,0,.16)} .tarifa .cifra{transition:color .2s} .tarifa.viva .cifra{color:var(--lava)} @media (max-width:900px){ .brasa-formas .f3,.brasa-formas .f5{display:none} .calc .leyenda{grid-template-columns:1fr;gap:16px} } @media (max-width:760px){ .comp{overflow:visible;padding:0} .tabla-comp.v2{min-width:0;display:block} .tabla-comp.v2 thead{display:none} .tabla-comp.v2 tbody,.tabla-comp.v2 tbody tr{display:block} .tabla-comp.v2 tbody tr{background:#fff;border:1px solid var(--linea);border-radius:14px; padding:16px 18px;margin-bottom:14px} .tabla-comp.v2 tbody th,.tabla-comp.v2 tbody td{display:block;border:0;padding:0;width:auto} .tabla-comp.v2 tbody th{font-size:16px;margin-bottom:12px} .tabla-comp.v2 tbody td{font-size:14px;padding:7px 0 7px 0} .tabla-comp.v2 tbody td::after{content:attr(data-c);display:block;font-size:11px;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-40);margin:2px 0 0 28px} .tabla-comp.v2 tbody .col-yo{background:var(--negro);color:#fff;border-radius:10px;padding:12px 14px;margin-top:8px} .tabla-comp.v2 tbody tr:last-child .col-yo{border-radius:10px;padding-bottom:12px;box-shadow:none} .tabla-comp.v2 tbody .col-yo::after{color:rgba(255,255,255,.55);margin-left:28px} } @media (max-width:640px){ .comp{margin-top:26px} .tabla-comp.v2 tbody tr{padding:16px 18px;margin-bottom:12px} .tabla-comp.v2 tbody td::after{font-size:12px} .calc{margin-top:26px;padding:20px} .calc-lab{font-size:12.5px;letter-spacing:.08em} .calc-precio{font-size:30px} .calc-escala{font-size:12.5px} .calc .barra{height:40px;margin:18px 0 18px} .calc .leyenda{font-size:14px} .calc .leyenda b{font-size:22px} .calc-total{font-size:14.5px;margin-top:18px;padding-top:16px} } @media (max-width:380px){ .calc{padding:18px} } @media (prefers-reduced-motion:reduce){ .brasa-formas i{transform:none!important} } /* ============ Home: cabecera con escena ============ */ .hero.escena{grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;padding-bottom:96px} .hero-txt .lockup{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px; font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#FFD9C2} .hero-txt .lockup::before{content:"";width:9px;height:9px;border-radius:50%;background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.18)} .hero.escena h1{font-size:clamp(32px,4.4vw,54px);margin-bottom:16px;text-wrap:pretty} .hero.escena h1 span{display:block} .hero.escena h1 .l1{color:rgba(255,255,255,.72)} .hero.escena h1 .l2{color:#fff} .hero.escena p.sub{margin-bottom:22px;max-width:26em} .hero.escena p.sub b{font-weight:600;color:#fff} .hero-bullets{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:9px} .hero-bullets li{position:relative;padding-left:28px;font-size:15px;color:#FFEDE2;line-height:1.4} .hero-bullets li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%; background:rgba(255,255,255,.16) no-repeat center/9px 9px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.2 4.4 9.6 11 3' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .hero.escena .ctas{align-items:center;gap:18px} .hero.escena .ctas .btn{background:#fff;color:var(--negro)} .hero.escena .ctas .btn:hover{background:var(--negro);color:#fff} .hero.escena .mini{margin-top:22px} .hero-escena{position:relative;z-index:2;display:grid;place-items:center} /* la foto vive detrás de todo el hero, difuminada y fundida con la brasa */ .brasa>.escena-foto{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;pointer-events:none} .escena-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 42%; filter:blur(10px) saturate(.92);opacity:.5;transform:scale(1.08); -webkit-mask-image:linear-gradient(102deg,transparent 4%,rgba(0,0,0,.32) 36%,#000 74%); mask-image:linear-gradient(102deg,transparent 4%,rgba(0,0,0,.32) 36%,#000 74%)} .chat{position:relative;width:min(360px,100%);background:rgba(255,255,255,.94); backdrop-filter:blur(10px);border-radius:18px;padding:14px 14px 16px; box-shadow:0 22px 54px rgba(26,26,26,.26);color:var(--negro)} .chat-top{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--ink-10)} .chat-av{width:30px;height:30px;border-radius:50%;background:var(--lava);color:#fff;font-weight:700;font-size:14px; display:grid;place-items:center;flex:none} .chat-quien{display:flex;flex-direction:column;line-height:1.15;font-size:13.5px;font-weight:600} .chat-quien b{font-weight:400;font-size:11px;color:var(--ink-50)} .chat-etq{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-50);background:var(--ink-05);border-radius:999px;padding:4px 8px} .chat-hilo{display:grid;gap:8px;margin-top:12px} .chat .msg{position:relative;margin:0;background:var(--ink-05);border-radius:14px 14px 14px 5px; padding:10px 12px 8px;font-size:13.4px;line-height:1.4} .chat .msg .hora{display:flex;align-items:center;justify-content:flex-end;gap:5px; font-size:10.5px;color:var(--ink-50);margin-top:3px} .chat .msg .vv{width:13px;height:9px;background:no-repeat center/13px 9px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M1 6.4 4.4 10 11 2.6M8 6.4 11.4 10 18 2.6' fill='none' stroke='%2334B7F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .chat .msg.fuerte{background:var(--negro);color:#fff;font-size:15px} .chat .msg.fuerte b{color:#fff;font-weight:700} .chat .msg.fuerte .hora{color:rgba(255,255,255,.6)} .chat .msg.escribiendo{display:flex;gap:5px;width:52px;padding:12px} .chat .msg.escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--ink-40); animation:teclea 1.1s ease-in-out infinite} .chat .msg.escribiendo i:nth-child(2){animation-delay:.16s} .chat .msg.escribiendo i:nth-child(3){animation-delay:.32s} @keyframes teclea{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .chat.anima .msg{opacity:0;transform:translateY(10px) scale(.97); transition:opacity .32s ease,transform .38s cubic-bezier(.2,.8,.25,1)} .chat.anima .msg.on{opacity:1;transform:none} .chat.anima .msg.escribiendo.off{display:none} /* ============ Paso 03: fotos reales ============ */ .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .foto:has(img){background:var(--ink-10)} /* ============ Paso 04: centro de notificaciones ============ */ .notis{position:relative;border-radius:22px;padding:20px 16px 18px;overflow:hidden; background:linear-gradient(168deg,#FFFFFF 0%,#F7F6F4 46%,#EFEEEB 100%); border:1px solid var(--ink-10); box-shadow:0 24px 60px rgba(26,26,26,.12)} /* closest-side sobre una caja cuadrada: el degradado muere justo en el borde y no deja costura al recortar */ .notis::before{content:"";position:absolute;left:-18%;top:-22%;width:88%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle closest-side,rgba(255,77,0,.16),rgba(255,77,0,0));pointer-events:none} .notis-cab{position:relative;text-align:center;color:var(--negro);margin-bottom:18px} .notis-hora{display:block;font-size:44px;font-weight:300;letter-spacing:-.02em;line-height:1} .notis-dia{display:block;font-size:12.5px;color:var(--ink-50);margin-top:4px} .notis-etq{position:absolute;right:0;top:0;font-size:9.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-50);background:rgba(26,26,26,.06); border-radius:999px;padding:4px 9px} .notis-pila{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:8px} .noti{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:15px; background:rgba(255,255,255,.86);border:1px solid var(--ink-10);backdrop-filter:blur(8px); box-shadow:0 2px 8px rgba(26,26,26,.05); animation:entraNoti 9s cubic-bezier(.2,.8,.25,1) infinite} .noti:nth-child(1){animation-delay:0s} .noti:nth-child(2){animation-delay:.8s} .noti:nth-child(3){animation-delay:1.6s} .noti:nth-child(4){animation-delay:2.4s} .noti:nth-child(5){animation-delay:3.2s} @keyframes entraNoti{ 0%{opacity:0;transform:translateY(14px) scale(.96)} 6%,92%{opacity:1;transform:none} 100%{opacity:1;transform:none}} .noti .app{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center; font-size:15px;font-weight:700;color:#fff;line-height:1;overflow:hidden; background-repeat:no-repeat;background-position:center;background-size:100% 100%} .noti .app.wp{background-image:url("/img/apps/wallapop.png")} .noti .app.ma{background-image:url("/img/apps/milanuncios.png")} .noti .app.cn{background-image:url("/img/apps/coches-net.png")} .noti .app.tt{background-image:url("/img/apps/tiktok.png")} .noti .app.rl{background:var(--lava);position:relative} .noti .app.rl::before{content:"";position:absolute;inset:0;background:no-repeat center/14px 14px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.2 4.4 9.6 11 3' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .noti-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .noti-txt b{font-size:12.5px;font-weight:700;color:var(--negro)} .noti-txt span{font-size:12.5px;color:var(--ink-60);line-height:1.3} .noti-t{font-size:11px;color:var(--ink-40);margin-left:auto;flex:none;font-style:normal} .noti.mas{background:rgba(255,77,0,.09);border-color:rgba(255,77,0,.3)} .noti.mas .noti-txt b{color:var(--lava-osc)} .notis-pie{position:relative;margin:16px 2px 0;font-size:13px;line-height:1.45;color:var(--ink-60)} .notis-pie b{color:var(--negro);font-weight:700} @media (max-width:900px){ .hero.escena{grid-template-columns:1fr;gap:24px;padding-bottom:88px} .notis-hora{font-size:36px} } @media (prefers-reduced-motion:reduce){ .noti{animation:none} .chat .msg.escribiendo{display:none} .chat .msg.escribiendo i{animation:none} } /* ajustes de composición de la escena */ .hero.escena h1{font-size:clamp(30px,4.1vw,50px)} .hero.escena .ctas .cue{margin-top:0} @media (max-width:900px){ .chat{width:min(400px,100%)} .hero.escena{padding-left:20px;padding-right:20px} /* .hero anula el gutter de .wrap */ .escena-foto img{object-position:62% 40%;filter:blur(12px) saturate(.92);opacity:.42; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0%,#000 62%); mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0%,#000 62%)} } @media (max-width:640px){ .hero.escena{gap:28px;padding:52px 20px 72px} .hero.escena h1{font-size:clamp(27px,7.4vw,36px);margin-bottom:14px} .hero-txt .lockup{font-size:12.5px;letter-spacing:.1em;margin-bottom:14px} .hero.escena p.sub{font-size:16.5px;margin-bottom:18px} .hero-bullets{margin-bottom:24px;gap:8px} .hero-bullets li{font-size:14.5px;padding-left:26px} .hero.escena .ctas{gap:12px} .hero.escena .mini{margin-top:18px} .chat{width:100%} } @media (max-width:380px){ .hero.escena{padding-left:16px;padding-right:16px} } /* ============ Home: los tres pasos ============ */ section.tres{padding:92px 0 84px;position:relative} .tres-enc{text-align:center;max-width:780px;margin:0 auto 52px} .tres-enc .kicker{justify-content:center} .tres-h{font-weight:700;font-size:clamp(36px,6.6vw,76px);line-height:1;letter-spacing:-.035em;margin:0;text-wrap:balance} .tres-h em{font-style:normal;color:var(--lava)} .tres-sub{font-weight:300;font-size:clamp(16.5px,1.9vw,20px);line-height:1.5;color:var(--ink-60);margin:18px 0 0} /* subgrid: los tres títulos y las tres tarjetas quedan a la misma altura sin fijar alturas a mano */ .tres-pasos{--g:34px;list-style:none;margin:0;padding:0;position:relative; display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto auto;gap:0 var(--g)} /* el guionado arranca en el centro de la primera bola: media columna, descontados los dos huecos */ .tres-pasos::before{content:"";position:absolute;top:23px;height:8px;z-index:0; left:calc((100% - var(--g)*2)/6);right:calc((100% - var(--g)*2)/6); background-image:radial-gradient(circle,#C2C2BE 2px,transparent 2.4px);background-size:12px 8px;background-repeat:repeat-x} .tres-paso{display:grid;grid-row:span 4;grid-template-rows:subgrid;justify-items:center;text-align:center} .tres-num{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;display:grid;place-items:center; background:var(--lava);color:#fff;font-size:20px;font-weight:700;line-height:1;box-shadow:0 0 0 9px #fff} .tres-card{align-self:stretch;justify-self:stretch;margin-top:30px;padding:26px 22px; background:var(--ink-05);border:1px solid var(--linea);border-radius:26px; display:flex;align-items:center;justify-content:center} .tres-card > *{width:100%} .tres-h3{font-size:clamp(21px,2.4vw,28px);font-weight:700;line-height:1.14;letter-spacing:-.018em;margin:28px 0 0;text-wrap:balance} .tres-p{font-weight:300;font-size:15.5px;line-height:1.6;color:var(--ink-60);margin:12px 0 0;max-width:36ch} .tres-pie{text-align:center;margin-top:52px} .tres-mas{margin:18px 0 0;font-size:14.5px} .tres-mas a{color:var(--ink-50);text-decoration:underline;text-underline-offset:3px} .tres-mas a:hover{color:var(--lava)} /* las maquetas van a un tercio de ancho: bajan de escala */ .tres-card .mock .cifra-xl{font-size:clamp(26px,2.6vw,34px)} .tres-card .mock-head{font-size:11.5px;padding:12px 14px} .tres-card .mock-body{padding:17px 15px 18px} .tres-card .mock .fila{font-size:12.5px;padding:9px 0} .tres-card .notis{padding:18px 14px 16px;box-shadow:0 14px 34px rgba(26,26,26,.1)} .tres-card .notis-hora{font-size:37px} .tres-card .noti{padding:10px;gap:9px} .tres-card .noti .app{width:28px;height:28px;border-radius:8px;font-size:13px} .tres-card .noti-txt b,.tres-card .noti-txt span{font-size:11.5px} .tres-card .noti-t{font-size:10px} .tres-card .notis-pie{font-size:12px;margin-top:14px} .tres-card .barra-rep{height:28px} @media (max-width:900px){ section.tres{padding:70px 0 66px} .tres-pasos{--g:22px} .tres-pasos::before{top:20px} .tres-num{width:48px;height:48px;font-size:18px;box-shadow:0 0 0 7px #fff} .tres-card{margin-top:24px;padding:20px 16px;border-radius:22px} .tres-h3{margin-top:22px} .tres-p{font-size:14.5px} } @media (max-width:760px){ .tres-enc{margin-bottom:40px} .tres-pasos{grid-template-columns:1fr;grid-template-rows:none;gap:54px 0} .tres-pasos::before{display:none} .tres-paso{grid-row:auto;grid-template-rows:auto auto auto auto} .tres-card{max-width:420px;justify-self:center;padding:22px 18px} .tres-p{font-size:15.5px;max-width:40ch} .tres-pie{margin-top:44px} } @media (max-width:640px){ section.tres{padding:56px 0 56px} .tres-sub{font-size:16.5px;margin-top:14px} .tres-pasos{gap:46px} } @media (max-width:380px){ .tres-card{padding:18px 13px;border-radius:20px} .tres-card .notis{padding:16px 11px 14px} .tres-card .mock-body{padding:15px 13px 16px} .tres-h3{font-size:20px} } /* ============================================================ HOME · Cabecera negra con foto sangrada a la derecha Header transparente sobre el hero, foto estática dentro de la caja del hero y bocadillos del móvil superpuestos sobre ella. ============================================================ */ /* -- Header transparente mientras el hero está en pantalla -- */ body[data-pagina="home"] #header{display:contents} body[data-pagina="home"] header.site{position:fixed;top:0;left:0;right:0;width:100%} body[data-pagina="home"] header.site{background:transparent;backdrop-filter:none;border-bottom-color:transparent; transition:background .25s ease,border-color .25s ease} body[data-pagina="home"] header.site .logo-word svg{fill:#fff;transition:fill .25s ease} body[data-pagina="home"] header.site nav.main a{color:#fff} body[data-pagina="home"] header.site nav.main a:not(.btn):hover{color:var(--lava)} body[data-pagina="home"] header.site nav.main a.btn{background:transparent;border:1.5px solid rgba(255,255,255,.45)} body[data-pagina="home"] header.site nav.main a.btn:hover{background:#fff;color:var(--negro)!important;border-color:#fff} body[data-pagina="home"] header.site .menu-btn{color:#fff} /* al salir del hero recupera la barra clara para leerse sobre fondo blanco */ body[data-pagina="home"] header.site.solido{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom-color:var(--linea)} body[data-pagina="home"] header.site.solido .logo-word svg{fill:var(--negro)} body[data-pagina="home"] header.site.solido nav.main a{color:var(--negro)} body[data-pagina="home"] header.site.solido nav.main a.btn{background:var(--lava);border-color:var(--lava);color:#fff!important} body[data-pagina="home"] header.site.solido nav.main a.btn:hover{background:var(--lava-osc);border-color:var(--lava-osc)} body[data-pagina="home"] header.site.solido .menu-btn{color:var(--negro)} /* -- Fondo del hero: negro corporativo plano -- */ body[data-pagina="home"] .brasa{background:var(--negro);overflow:hidden} body[data-pagina="home"] .brasa-formas{display:none} /* -- Foto: bloque estático pegado al borde derecho e inferior -- */ body[data-pagina="home"] .brasa{overflow:hidden} body[data-pagina="home"] .brasa>.escena-foto{inset:0 0 0 auto;width:clamp(560px,66%,1080px);z-index:0} body[data-pagina="home"] .escena-foto img{object-position:44% 44%;filter:none;opacity:1;transform:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 9%,#000 27%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 9%,#000 27%)} /* velo inferior para que el borde de la foto no corte en seco contra el negro */ body[data-pagina="home"] .brasa>.escena-foto::after{content:"";position:absolute;inset:auto 0 0 0;height:22%; background:linear-gradient(180deg,transparent,rgba(26,26,26,.8));pointer-events:none} /* -- Composición del texto sobre negro -- */ body[data-pagina="home"] .hero.escena{position:static;grid-template-columns:1fr;gap:0;align-content:center; min-height:clamp(540px,76vh,672px);padding-top:88px;padding-bottom:96px} body[data-pagina="home"] .hero-txt{max-width:min(600px,52%)} body[data-pagina="home"] .hero-txt{position:relative;z-index:3} body[data-pagina="home"] .hero-txt .lockup{color:var(--lava)} body[data-pagina="home"] .hero-txt .lockup::before{background:var(--lava);box-shadow:0 0 0 5px rgba(255,77,0,.22)} body[data-pagina="home"] .hero.escena h1 .l1{color:rgba(255,255,255,.62)} body[data-pagina="home"] .hero.escena h1{font-weight:600;letter-spacing:-.01em} body[data-pagina="home"] .hero.escena p.sub{font-weight:300} body[data-pagina="home"] .hero.escena p.sub b{font-weight:600} /* -- Indicador de scroll centrado al pie del hero -- */ body[data-pagina="home"] .brasa>.cue-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%); z-index:4;margin-top:0;color:rgba(255,255,255,.72);white-space:nowrap} body[data-pagina="home"] .brasa>.cue-scroll:hover{color:#fff} body[data-pagina="home"] .hero.escena p.sub{color:rgba(255,255,255,.74);max-width:24em} body[data-pagina="home"] .hero-bullets li{color:rgba(255,255,255,.8)} body[data-pagina="home"] .hero .mini{color:rgba(255,255,255,.5)} /* -- Bocadillos superpuestos sobre la foto -- */ body[data-pagina="home"] .hero-txt{display:flex;flex-direction:column;justify-content:center} body[data-pagina="home"] .hero-escena{position:absolute;z-index:3;display:block; right:clamp(14px,3.2vw,54px);top:50%;transform:translateY(-50%);width:min(318px,30vw)} /* -- El hilo se ve como lo que es, un WhatsApp -- */ body[data-pagina="home"] .chat.wa{width:100%;padding:0;overflow:hidden;border-radius:15px; background:#0B141A;border:1px solid rgba(255,255,255,.09);backdrop-filter:none;color:#E9EDEF; box-shadow:0 34px 84px rgba(0,0,0,.62),0 2px 10px rgba(0,0,0,.4)} body[data-pagina="home"] .chat.wa .chat-top{background:#202C33;border-bottom:0;padding:9px 12px;gap:10px} body[data-pagina="home"] .chat.wa .chat-av{position:relative;width:36px;height:36px;overflow:hidden; background:var(--lava);font-size:15px} body[data-pagina="home"] .chat.wa .chat-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} body[data-pagina="home"] .chat.wa .chat-quien{color:#E9EDEF;font-size:14.5px;font-weight:500} body[data-pagina="home"] .chat.wa .chat-quien b{color:#8696A0;font-size:11.5px} body[data-pagina="home"] .chat.wa .chat-hilo{margin:0;gap:7px;padding:12px 11px 15px;justify-items:start; background:#0B141A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 130 130'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h18M12 28h11'/%3E%3Ccircle cx='100' cy='24' r='8'/%3E%3Cpath d='M28 72l7 7 15-17'/%3E%3Cpath d='M104 84c0 6-5 11-12 11h-9l-6 5v-5c-4-2-7-6-7-11 0-6 6-11 13-11h9c7 0 12 5 12 11z'/%3E%3Cpath d='M14 108h22M96 116h14'/%3E%3C/g%3E%3C/svg%3E") repeat} body[data-pagina="home"] .chat.wa .wa-dia{justify-self:center;margin-bottom:3px;background:#182229;color:#8696A0; font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:8px} body[data-pagina="home"] .chat.wa .msg{max-width:87%;background:#202C33;color:#E9EDEF; border-radius:0 8px 8px 8px;padding:7px 9px 5px;font-size:13.4px;line-height:1.42; box-shadow:0 1px 1px rgba(0,0,0,.3)} body[data-pagina="home"] .chat.wa .msg::before{content:"";position:absolute;left:-8px;top:0;width:9px;height:13px; background:#202C33;clip-path:polygon(100% 0,0 0,100% 100%)} body[data-pagina="home"] .chat.wa .msg.mia{justify-self:end;background:#005C4B;border-radius:8px 0 8px 8px} body[data-pagina="home"] .chat.wa .msg.mia::before{left:auto;right:-8px;background:#005C4B; clip-path:polygon(0 0,100% 0,0 100%)} body[data-pagina="home"] .chat.wa .msg .hora{color:#8696A0;font-size:10.5px;margin-top:1px} body[data-pagina="home"] .chat.wa .msg.mia .hora{color:rgba(233,237,239,.62)} body[data-pagina="home"] .chat.wa .msg.fuerte{background:#202C33;color:#E9EDEF;font-size:14.4px} body[data-pagina="home"] .chat.wa .msg.fuerte b{color:#fff;font-weight:600} body[data-pagina="home"] .chat.wa .msg.fuerte .hora{color:#8696A0} body[data-pagina="home"] .chat.wa .msg.escribiendo{width:56px;padding:12px 10px;gap:5px} body[data-pagina="home"] .chat.wa .msg.escribiendo i{background:#8696A0} @media (max-width:1180px){ body[data-pagina="home"] .hero-txt{max-width:min(480px,50%)} body[data-pagina="home"] .hero-escena{width:min(292px,32vw)} } @media (max-width:900px){ /* en móvil la foto vuelve a ser fondo de todo el hero, atenuada */ body[data-pagina="home"] .brasa>.escena-foto{inset:0;width:auto} body[data-pagina="home"] .escena-foto img{object-position:52% 42%;opacity:.34; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0%,#000 58%); mask-image:linear-gradient(180deg,rgba(0,0,0,.3) 0%,#000 58%)} body[data-pagina="home"] .brasa>.escena-foto::after{display:none} body[data-pagina="home"] .brasa{min-height:0;display:block} body[data-pagina="home"] .hero.escena{grid-template-columns:1fr;padding-top:104px} body[data-pagina="home"] .hero-txt{max-width:none} body[data-pagina="home"] .hero-escena{position:static;transform:none;width:100%;justify-items:center; display:grid;margin-top:34px} body[data-pagina="home"] .chat.wa{width:min(360px,100%);margin:0 auto} }