:root{ --navy:#0A2A43; --navy-deep:#06192a; --navy-soft:#0E3555; --navy-line:#14405f; --blue:#0069AB; --blue-deep:#04527f; --orange:#FF4F00; --orange-cta:#D64200; --orange-link:#BD3A00; --amber:#FFA500; --paper:#EFF3F6; --paper-2:#E3EAEF; --white:#FFFFFF; --ink:#0A2A43; --ink-soft:#4A6478; --ink-faint:#7B93A5; --hair:rgba(255,255,255,.15); --hair-dark:rgba(10,42,67,.13); --ok:#2FBF71; --ease:cubic-bezier(.16,1,.3,1); --measure:56ch; } *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--navy);color:#fff; font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:300;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4{font-family:"Anton",Impact,"Haettenschweiler",sans-serif;font-weight:400; text-transform:uppercase;letter-spacing:.012em;margin:0;text-wrap:balance} p{margin:0} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font-family:inherit} :focus-visible{outline:3px solid var(--amber);outline-offset:3px} [hidden]{display:none!important} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} section[id]{scroll-margin-top:86px} #form{scroll-margin-top:96px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} .shell{max-width:1240px;margin:0 auto;padding-inline:20px} @media(min-width:520px){.shell{padding-inline:32px}} @media(min-width:900px){.shell{padding-inline:48px}} @media(min-width:1340px){.shell{padding-inline:56px}} .eyebrow{display:flex;align-items:center;gap:14px;font-size:11.5px;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--amber)} .eyebrow::before{content:"";width:30px;height:2px;background:var(--orange);flex:none} .eyebrow.on-light{color:var(--blue)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:"Anton",sans-serif;font-size:15px;letter-spacing:.055em;text-transform:uppercase; padding:16px 26px;border-radius:12px;border:0;cursor:pointer; transition:transform .4s var(--ease),filter .4s var(--ease),background .4s var(--ease)} .btn.primary{background:var(--orange-cta);color:#fff} .btn.primary:hover{filter:brightness(1.1)} .btn.ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:none} .btn.ghost:hover{background:rgba(255,255,255,.12)} .btn.wa{background:var(--ok);color:#04321c} .btn:active{transform:scale(.98)} .lnk{font-family:"Anton",sans-serif;font-size:14px;letter-spacing:.055em;text-transform:uppercase; color:var(--orange-link);border-bottom:2px solid currentColor;padding-bottom:2px;display:inline-block} /* ================= NAV ================= */ .nav{position:fixed;inset:0 0 auto 0;z-index:60; background:linear-gradient(to bottom,rgba(6,25,42,.85),rgba(6,25,42,0));transition:background .6s var(--ease)} .nav.stuck{background:var(--navy-deep);border-bottom:1px solid var(--hair)} .nav .shell{display:flex;align-items:center;gap:28px;height:74px} .nav img{height:32px;width:auto} .nav ul{display:none;list-style:none;margin:0 auto 0 auto;padding:0;gap:30px; font-size:13px;letter-spacing:.11em;text-transform:uppercase;font-weight:500} .nav ul a{opacity:.72;transition:opacity .35s var(--ease)} .nav ul a:hover{opacity:1} @media(min-width:1020px){.nav ul{display:flex}} .nav .cta{margin-left:auto;font-family:"Anton",sans-serif;font-size:13.5px;letter-spacing:.06em; text-transform:uppercase;background:var(--orange-cta);color:#fff;padding:11px 18px;border-radius:10px} @media(min-width:1020px){.nav .cta{margin-left:0}} /* ================= HERO ================= */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column; justify-content:flex-end;isolation:isolate;background:var(--navy-deep)} .hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background: linear-gradient(to right,rgba(6,25,42,.94) 0%,rgba(6,25,42,.80) 38%,rgba(6,25,42,.30) 72%,rgba(6,25,42,.42) 100%), linear-gradient(to top,rgba(6,25,42,.96) 0%,rgba(6,25,42,.25) 42%,rgba(6,25,42,.55) 100%)} .hero-in{padding-block:150px 0} .hero h1{font-size:clamp(42px,8.4vw,92px);line-height:.92;margin-top:22px;max-width:16ch} .hero h1 em{font-style:normal;color:var(--amber)} .hero .claim{margin-top:22px;font-family:"Anton",sans-serif;font-weight:400; font-size:clamp(19px,2.7vw,27px);text-transform:uppercase;letter-spacing:.015em; color:var(--amber);line-height:1.1;max-width:22ch} .hero .sub{margin-top:14px;max-width:var(--measure);font-size:clamp(15.5px,2vw,18px);color:rgba(255,255,255,.8)} .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .micro{margin-top:16px;font-size:13.5px;letter-spacing:.05em;color:rgba(255,255,255,.6)} .spec{margin-top:64px;border-top:1px solid var(--hair)} .spec ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr} @media(min-width:860px){.spec ul{grid-template-columns:repeat(4,1fr)}} .spec ul{gap:26px 34px} .spec li{padding:24px 0 28px} .spec .k{font-family:"Anton",sans-serif;font-size:clamp(24px,3.4vw,34px);line-height:1;color:#fff} .spec .k span{color:var(--amber);font-size:.62em;margin-left:2px} .spec .d{margin-top:9px;font-size:12px;letter-spacing:.13em;text-transform:uppercase; color:rgba(255,255,255,.58);line-height:1.45;max-width:22ch} .cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;font-size:10.5px; letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5); display:flex;flex-direction:column;align-items:center;gap:8px} .cue i{display:block;width:1px;height:26px;background:linear-gradient(to bottom,var(--amber),transparent); animation:drop 2.4s var(--ease) infinite} @keyframes drop{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1);transform-origin:bottom;opacity:0}} @media(max-width:900px){.cue{display:none}} /* ================= bloques claros / oscuros ================= */ .lite{background:var(--paper);color:var(--ink);padding-block:clamp(58px,7.6vw,96px)} .dark{background:var(--navy);color:#fff;padding-block:clamp(58px,7.6vw,96px)} .deep{background:var(--navy-deep);color:#fff;padding-block:clamp(58px,7.6vw,96px)} .lite h2,.dark h2,.deep h2{font-size:clamp(32px,5.6vw,60px);line-height:.96;margin-top:20px;max-width:19ch} .lite .lede{margin-top:20px;max-width:var(--measure);color:var(--ink-soft);font-size:17px} .dark .lede,.deep .lede{margin-top:20px;max-width:var(--measure);color:rgba(255,255,255,.75);font-size:17px} /* ---- proceso ---- */ .steps{display:grid;gap:16px;margin-top:52px;grid-template-columns:1fr} @media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:20px}} .step{position:relative;border-radius:20px;overflow:hidden;background:var(--navy); min-height:430px;display:flex;align-items:flex-end;isolation:isolate} .step img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform 1.1s var(--ease)} .step:hover img{transform:scale(1.04)} .step::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(6,25,42,.97) 6%,rgba(6,25,42,.78) 38%,rgba(6,25,42,.12) 78%)} .step-in{padding:24px 24px 26px;width:100%} .step .n{font-family:"Anton",sans-serif;font-size:15px;color:var(--amber);letter-spacing:.1em;display:block;margin-bottom:10px} .step h3{font-size:clamp(20px,2.4vw,25px);line-height:1.04;color:#fff} .step p{margin-top:11px;font-size:14.8px;color:rgba(255,255,255,.8);max-width:34ch} .after{margin-top:44px;padding-top:28px;border-top:1px solid var(--hair-dark); display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 26px} .after b{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(19px,2.6vw,26px); text-transform:uppercase;color:var(--ink);max-width:30ch;line-height:1.1} /* ---- servicios ---- */ .svcs{display:grid;gap:18px;margin-top:52px;grid-template-columns:1fr} @media(min-width:820px){.svcs{grid-template-columns:repeat(3,1fr)}} .svc{position:relative;border-radius:20px;overflow:hidden;background:var(--navy); min-height:500px;display:flex;align-items:flex-end;isolation:isolate} .svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform 1.2s var(--ease)} .svc:hover img{transform:scale(1.05)} .svc::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(6,25,42,.98) 4%,rgba(6,25,42,.90) 30%,rgba(6,25,42,.45) 62%,rgba(6,25,42,.18) 100%)} .svc-in{padding:26px;width:100%} .svc .n{font-family:"Anton",sans-serif;font-size:14px;color:var(--amber);letter-spacing:.12em;display:block;margin-bottom:9px} .svc h3{font-size:clamp(21px,2.5vw,26px);line-height:1.03;color:#fff} .svc p{margin-top:11px;font-size:15px;color:rgba(255,255,255,.85);max-width:32ch} .svc a.go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:"Anton",sans-serif; font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--orange-cta);color:#fff; padding:12px 18px;border-radius:11px;transition:filter .4s var(--ease)} .svc a.go:hover{filter:brightness(1.12)} /* ---- diferencial ---- */ .dif-grid{display:grid;gap:40px;margin-top:8px;grid-template-columns:1fr;align-items:center} @media(min-width:940px){.dif-grid{grid-template-columns:1.05fr .95fr;gap:64px}} .dif h2{font-size:clamp(31px,5.2vw,56px);max-width:15ch} .dif h2 em{font-style:normal;color:var(--amber)} .dif .body{margin-top:24px;max-width:var(--measure);color:rgba(255,255,255,.78);font-size:16.5px} .dif .close{margin-top:32px;padding-top:26px;border-top:1px solid var(--hair); font-family:"Anton",sans-serif;font-size:clamp(18px,2.5vw,24px);text-transform:uppercase; line-height:1.14;max-width:26ch} .dif .close em{font-style:normal;color:var(--amber)} .dif figure{margin:0;border-radius:20px;overflow:hidden;position:relative} .dif figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:11/13} .dif figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 18px;font-size:13px; letter-spacing:.06em;color:rgba(255,255,255,.9); background:linear-gradient(to top,rgba(6,25,42,.95),transparent)} /* ---- estructura ---- */ .estr{display:grid;gap:32px;grid-template-columns:1fr;align-items:start} @media(min-width:940px){.estr{grid-template-columns:1.4fr .6fr;gap:48px}} .estr-foto{margin:0;position:relative;border-radius:18px;overflow:hidden} .estr-foto img{width:100%;aspect-ratio:4/5;object-fit:cover} .estr-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px; font-size:12px;color:#fff;background:linear-gradient(to top,rgba(6,25,42,.92),transparent)} .pillars{display:grid;gap:16px;margin-top:32px;grid-template-columns:1fr} @media(min-width:700px){.pillars{grid-template-columns:repeat(3,1fr)}} .pillar{background:var(--white);border-radius:14px;padding:26px 24px 28px} .pillar h3{font-size:17px;color:var(--blue);letter-spacing:.14em;line-height:1.3} .pillar p{margin-top:14px;font-size:15px;color:#3A566B;line-height:1.6} .tira{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 16px;margin-top:34px; padding-top:26px;border-top:1px solid var(--hair-dark)} @media(min-width:760px){.tira{grid-template-columns:repeat(4,1fr)}} .tira b{font-family:"Anton",sans-serif;font-weight:400;font-size:30px;color:var(--blue); line-height:1;display:block} .tira span{display:block;margin-top:8px;font-size:12.5px;letter-spacing:.1em; text-transform:uppercase;color:#3A566B;font-weight:500;line-height:1.45} /* ---- marcas ---- */ .marcas{background:var(--white);color:var(--ink);padding-block:clamp(44px,5.4vw,66px);text-align:center} .marcas h2{font-size:clamp(24px,3.4vw,38px);max-width:24ch;margin-inline:auto;line-height:1.04} .marcas .row{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 24px;margin-top:40px} @media(min-width:820px){.marcas .row{grid-template-columns:repeat(4,1fr)}} .marcas .row span{display:grid;place-items:center;height:66px} /* los cuatro archivos vienen con la misma altura de lienzo y la MISMA altura de letra, asi que una altura unica mantiene las tipografias iguales entre marcas */ .marcas .row img{height:60px;width:auto;max-width:100%;object-fit:contain;opacity:.92; transition:opacity .5s var(--ease)} .marcas .row img:hover{opacity:1} .marcas .mnote{margin-top:38px;font-size:14.5px;color:#5F7382} /* ---- proyectos ---- */ .projs{display:flex;gap:16px;margin-top:44px;overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:18px;scrollbar-width:thin;scrollbar-color:var(--blue) rgba(255,255,255,.1)} .projs::-webkit-scrollbar{height:6px} .projs::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:99px} .projs::-webkit-scrollbar-thumb{background:var(--blue);border-radius:99px} .proj{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;isolation:isolate; background:var(--navy-soft);flex:0 0 82%;scroll-snap-align:start} @media(min-width:620px){.proj{flex-basis:52%}} @media(min-width:1000px){.proj{flex-basis:33%}} .proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform 1.2s var(--ease)} .proj:hover img{transform:scale(1.05)} .proj::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top,rgba(6,25,42,.92) 2%,rgba(6,25,42,.5) 34%,transparent 66%)} .proj .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 18px 18px} .proj .cap h3{display:block;margin:0;font-family:"Anton",sans-serif;font-weight:400;font-size:11px; letter-spacing:.16em;color:var(--amber);line-height:1.25} .proj .cap strong{display:block;margin-top:8px;font-family:"Anton",sans-serif;font-weight:400; font-size:19px;text-transform:uppercase;color:#fff;line-height:1.08} .proj .cap span{display:block;margin-top:9px;font-size:14.5px;color:rgba(255,255,255,.86);line-height:1.4} .cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .navc{display:flex;gap:8px} .navc button{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08); border:1px solid var(--hair);color:#fff;cursor:pointer;display:grid;place-items:center; transition:background .4s var(--ease),transform .4s var(--ease),opacity .4s var(--ease)} .navc button:hover{background:var(--orange);border-color:var(--orange)} .navc button:active{transform:scale(.94)} .navc button[disabled]{opacity:.3;cursor:default} .navc button[disabled]:hover{background:rgba(255,255,255,.08);border-color:var(--hair)} .navc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} /* ---- obra: cómo nace una piscina ---- */ .obra .cab{max-width:56ch} .obra h2 em{font-style:normal;color:var(--amber)} .escena{display:grid;gap:24px;margin-top:36px;grid-template-columns:1fr; justify-items:center;align-items:center} @media(min-width:900px){.escena{grid-template-columns:auto minmax(0,1fr);gap:56px;justify-items:start}} /* las siete fotos son verticales: marco 2:3, sin recortes raros ni bandas */ .visor{position:relative;border-radius:20px;overflow:hidden;background:var(--navy-soft); aspect-ratio:2/3;width:min(86%,340px)} @media(min-width:560px){.visor{width:min(70%,400px)}} @media(min-width:900px){.visor{width:auto;height:min(74vh,700px)}} .cap .num{font-family:"Anton",sans-serif;font-size:12px;letter-spacing:.2em;color:var(--amber);display:block} .cap h3{font-size:clamp(26px,4vw,46px);line-height:1;margin-top:12px;max-width:16ch} .cap p{margin-top:18px;font-size:17px;line-height:1.62;color:rgba(255,255,255,.84);max-width:50ch} .visor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; opacity:0;transition:opacity .6s var(--ease)} .visor{touch-action:pan-y} .flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center; background:rgba(6,25,42,.42);border:1px solid rgba(255,255,255,.28);color:#fff; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:background .35s var(--ease),transform .35s var(--ease),opacity .35s var(--ease)} .flecha:hover{background:rgba(6,25,42,.72);border-color:rgba(255,255,255,.5)} .flecha:active{transform:translateY(-50%) scale(.94)} .flecha svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .flecha.prev{left:16px;opacity:.5} .flecha.prev:hover{opacity:1} .flecha.next{right:16px} @media(min-width:760px){.flecha{width:54px;height:54px}.flecha.prev{left:24px}.flecha.next{right:24px}} .visor img.on{opacity:1} .pista{display:flex;gap:8px;margin-top:16px} .pista button{flex:1;background:none;border:0;cursor:pointer;padding:16px 0 0;text-align:left; position:relative;transition:opacity .4s var(--ease)} .pista button .riel{display:block;height:3px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden} .pista button .riel i{display:block;height:100%;width:0;background:var(--orange);border-radius:99px} .pista button[aria-current="true"] .riel i{width:100%;transition:width 6s linear} .pista button .rot{display:block;margin-top:12px;font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:rgba(255,255,255,.5);line-height:1.35;transition:color .4s var(--ease)} .pista button[aria-current="true"] .rot{color:#fff} .pista button:active{transform:scale(.98)} @media(max-width:700px){.pista button .rot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.pista button{padding:16px 0 10px;position:relative}} .obra .pie{margin-top:32px;padding-top:24px;border-top:1px solid var(--hair); display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px} .obra .pie b{font-family:"Anton",sans-serif;font-weight:400;font-size:clamp(17px,2.4vw,22px); text-transform:uppercase;max-width:34ch;line-height:1.14} .obra .pie b em{font-style:normal;color:var(--amber)} /* ---- verificador ---- */ .verif .head{display:grid;gap:28px;grid-template-columns:1fr;align-items:end} @media(min-width:940px){.verif .head{grid-template-columns:1.1fr .9fr;gap:56px}} .vtabs{display:flex;gap:26px;margin:40px 0 24px;border-bottom:1px solid var(--hair)} .vtab{background:none;border:0;cursor:pointer;font-family:"Anton",sans-serif;font-size:15px; letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55); padding:14px 2px;position:relative;transition:color .4s var(--ease)} .vtab[aria-selected="true"]{color:#fff} .vtab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--orange); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .vtab[aria-selected="true"]::after{transform:scaleX(1)} .vgrid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:940px){.vgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:start}} .vpanel{background:var(--navy-soft);border:1px solid var(--hair);border-radius:20px;padding:24px} .vpanel h3{font-size:18px;margin-bottom:20px} .vf{margin-bottom:20px} .vf:last-child{margin-bottom:0} .vf label{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px; letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600;margin-bottom:10px} .vf label b{font-family:"Anton",sans-serif;font-weight:400;font-size:17px;color:#fff;letter-spacing:.02em} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px; background:rgba(255,255,255,.16);border-radius:99px;outline:none} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%; background:var(--orange);cursor:grab;border:3px solid var(--navy-soft);box-shadow:0 0 0 1px var(--orange); transition:transform .35s var(--ease)} input[type=range]::-webkit-slider-thumb:active{transform:scale(.92)} input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--orange); border:3px solid var(--navy-soft)} input[type=range]:disabled{opacity:.35} select,.tin{width:100%;appearance:none;background:var(--navy);color:#fff;border:1px solid var(--hair); border-radius:12px;padding:13px 14px;font-family:inherit;font-size:15px;font-weight:300} select{cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFA500' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:18px} .shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} @media(min-width:430px){.shapes{grid-template-columns:repeat(6,1fr)}} .shape{cursor:pointer;background:var(--navy);border:1px solid var(--hair);border-radius:12px; padding:9px 4px 7px;display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .45s var(--ease)} .shape svg{width:34px;height:24px} .shape span{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.6); font-weight:600;line-height:1.1;text-align:center} .shape[aria-pressed="true"]{background:var(--blue);border-color:var(--amber)} .shape[aria-pressed="true"] span{color:#fff} .shape .sil{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.6);stroke-width:1.5} .shape[aria-pressed="true"] .sil{fill:rgba(255,255,255,.3);stroke:#fff} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{cursor:pointer;font-size:14px;background:var(--navy);color:rgba(255,255,255,.65); border:1px solid var(--hair);border-radius:99px;padding:9px 15px;transition:all .4s var(--ease)} .chip[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)} .verdict{border-radius:20px;padding:24px;margin-bottom:16px;border:1px solid; transition:background .6s var(--ease),border-color .6s var(--ease)} .verdict.bad{background:rgba(255,79,0,.13);border-color:rgba(255,79,0,.55)} .verdict.warn{background:rgba(255,165,0,.13);border-color:rgba(255,165,0,.5)} .verdict.good{background:rgba(47,191,113,.12);border-color:rgba(47,191,113,.5)} .verdict .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:12px} .bad .tag{color:var(--orange)} .warn .tag{color:var(--amber)} .good .tag{color:var(--ok)} .verdict .big{font-family:"Anton",sans-serif;font-size:clamp(22px,4.4vw,30px);line-height:1.06;text-transform:uppercase} .verdict .big u{text-decoration:none;color:var(--amber)} .bad .big u{color:var(--orange)} .verdict .sub{margin-top:12px;font-size:15px;color:rgba(255,255,255,.8)} .bars{margin:20px 0 4px} .bar-row{margin-bottom:14px} .bar-row .cap2{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:7px} .bar-row .cap2 b{color:#fff;font-family:"Anton",sans-serif;font-weight:400;font-size:15px} .track{height:9px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden} .fillb{height:100%;border-radius:99px;transition:width .7s var(--ease),background .5s var(--ease)} ul.cons{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--hair)} ul.cons li{position:relative;padding-left:22px;font-size:14.5px;color:rgba(255,255,255,.82);margin-bottom:9px} ul.cons li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--orange);border-radius:2px} .vstats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair); border:1px solid var(--hair);border-radius:16px;overflow:hidden;margin-top:16px} @media(min-width:560px){.vstats{grid-template-columns:repeat(4,1fr)}} .vstats.three{grid-template-columns:repeat(3,1fr)} .vstat{background:var(--navy-soft);padding:16px 14px} .vstat .k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6); margin-bottom:6px;line-height:1.3} .vstat .v{font-family:"Anton",sans-serif;font-size:23px;color:var(--amber);line-height:1;font-variant-numeric:tabular-nums} .vstat .v small{font-size:11px;color:rgba(255,255,255,.55);margin-left:3px;font-family:"Jost",sans-serif} .plan{background:var(--navy-soft);border:1px solid var(--hair);border-radius:16px;padding:18px} .plan svg{width:100%;height:auto;display:block} .vcta{margin-top:16px;background:var(--navy-soft);border:1px solid var(--hair);border-radius:20px;padding:22px} .vcta h4{font-size:19px;line-height:1.1;margin-bottom:8px} .vcta p{font-size:14.5px;color:rgba(255,255,255,.62);margin-bottom:16px} .rowf{display:flex;flex-direction:column;gap:10px} @media(min-width:540px){.rowf{flex-direction:row}} .rowf .tin{flex:1} .tin::placeholder{color:rgba(255,255,255,.58)} .tin.err{border-color:#FF8A75;box-shadow:0 0 0 2px rgba(255,138,117,.25)} .errenv{margin-top:12px;font-size:14.5px;line-height:1.5;color:#FFC9BF} .errenv .lnk{display:inline-block;margin-top:6px;color:#FFC9BF} .legal{margin-top:14px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.62)} .legal a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:2px} .legal a:hover,.legal a:focus-visible{color:#fff} .sent{color:var(--ok);font-size:14.5px;margin-top:12px;display:none} .disc{margin-top:26px;padding:14px 16px;border-left:3px solid var(--amber);background:rgba(255,165,0,.07); font-size:12.5px;color:rgba(255,255,255,.6);border-radius:0 12px 12px 0;max-width:80ch} /* ---- cobertura ---- */ .cov{display:grid;gap:36px;margin-top:44px;grid-template-columns:1fr} @media(min-width:900px){.cov{grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}} .branch{padding:22px 0;border-top:1px solid var(--hair-dark);display:flex;gap:18px} .branch .n{font-family:"Anton",sans-serif;font-size:26px;color:var(--blue);line-height:1} .branch h3{font-size:15px;letter-spacing:.06em;color:var(--ink)} .branch p{margin-top:7px;font-size:15.5px;color:var(--ink-soft);max-width:38ch} .branch a{display:inline-block;margin-top:9px;font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:var(--orange-link);font-weight:600} /* celular: una debajo de otra · tablet: dos al lado · escritorio: apiladas en la columna angosta */ .covimgs{display:grid;gap:12px;grid-template-columns:1fr} @media(min-width:620px) and (max-width:899px){.covimgs{grid-template-columns:1fr 1fr}} .covimgs img{aspect-ratio:16/10} @media(min-width:620px){.covimgs img{aspect-ratio:4/3}} .covimgs figure{margin:0;position:relative;border-radius:18px;overflow:hidden} .covimgs img{width:100%;aspect-ratio:4/3;object-fit:cover} .covimgs figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 11px;font-size:11.5px; letter-spacing:.05em;color:#fff;background:linear-gradient(to top,rgba(6,25,42,.92),transparent)} /* ---- faq ---- */ .faqs{margin-top:44px;border-top:1px solid var(--hair-dark)} .faq{border-bottom:1px solid var(--hair-dark)} .faq button{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center; justify-content:space-between;gap:20px;text-align:left;padding:22px 0} .faq h3{font-size:clamp(16px,2.2vw,20px);color:var(--ink);line-height:1.2;margin:0} .faq .ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--orange-cta);color:#fff; display:grid;place-items:center;font-size:17px;line-height:1;transition:transform .5s var(--ease)} .faq[open] .ic{transform:rotate(45deg)} .faq .ans{overflow:hidden;max-height:0;transition:max-height .6s var(--ease)} .faq[open] .ans{max-height:1400px} .faq .ans p{padding-bottom:24px;font-size:16px;color:var(--ink-soft);max-width:72ch} .faq .ans p+p{padding-top:12px;padding-bottom:24px} .faq .ans .lnk{margin-bottom:26px} /* ---- contacto ---- */ .contacto{background:var(--blue-deep);color:#fff;padding-block:clamp(58px,7.6vw,96px)} .contacto h2{font-size:clamp(30px,5.4vw,56px);max-width:17ch;line-height:.98;margin-top:20px} .cgrid{display:grid;gap:32px;margin-top:44px;grid-template-columns:1fr} @media(min-width:940px){.cgrid{grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}} .form{background:rgba(4,25,42,.42);border:1px solid rgba(255,255,255,.2);border-radius:22px;padding:26px} .prog{height:4px;background:rgba(255,255,255,.16);border-radius:99px;overflow:hidden;margin-bottom:22px} .prog i{display:block;height:100%;background:var(--amber);width:33%;transition:width .6s var(--ease)} .form h3{font-size:17px;margin-bottom:16px} .opts{display:grid;gap:9px} .opt{width:100%;text-align:left;background:rgba(255,255,255,.94);color:var(--ink);border:0;border-radius:12px; padding:15px 16px;font-size:15.5px;cursor:pointer;transition:transform .4s var(--ease),background .4s var(--ease)} .opt:hover{background:#fff} .opt:active{transform:scale(.99)} .fstep{display:none} .fstep.on{display:block} .fields{display:grid;gap:10px} .form .tin{background:rgba(4,25,42,.5)} .back{background:none;border:0;color:rgba(255,255,255,.6);font-size:13.5px;cursor:pointer; margin-top:14px;letter-spacing:.06em;text-transform:uppercase} .done{text-align:center;padding:18px 0} .done .big{font-family:"Anton",sans-serif;font-size:26px;text-transform:uppercase;color:var(--amber)} .aside .item{padding:18px 0;border-top:1px solid rgba(255,255,255,.2)} .aside .item b{display:block;font-family:"Anton",sans-serif;font-weight:400;font-size:15px;letter-spacing:.06em} .aside .item p{margin-top:6px;font-size:15px;color:rgba(255,255,255,.78)} .aside .soc{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .aside .soc a{display:inline-flex;align-items:center;gap:9px;border-radius:99px; padding:9px 16px 9px 12px;font-size:14px;font-weight:400;color:#fff; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22); transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)} .aside .soc a svg{width:19px;height:19px;fill:currentColor;flex:none} .aside .soc a:hover{transform:translateY(-1px);border-color:transparent} .aside .soc a.ig:hover{background:#E1306C} .aside .soc a.fb:hover{background:#1877F2} .aside .soc a.tt:hover{background:#0B0B0B} .aside .soc a:active{transform:scale(.98)} /* ---- footer ---- */ .foot{background:var(--navy-deep);padding-block:56px 40px;color:rgba(255,255,255,.66);font-size:14.5px} .fgrid{display:grid;gap:32px;grid-template-columns:1fr} @media(min-width:800px){.fgrid{grid-template-columns:1.3fr 1fr 1fr 1fr}} .foot img.lg{height:38px;width:auto;margin-bottom:18px} .foot h4{font-size:12.5px;letter-spacing:.15em;color:#fff;margin-bottom:14px} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .foot a:hover{color:#fff} .foot .bottom{margin-top:42px;padding-top:22px;border-top:1px solid var(--hair); display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.62)} .foot .bottom a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:2px} .foot .bottom a:hover,.foot .bottom a:focus-visible{color:#fff} .flt{position:fixed;right:18px;bottom:18px;z-index:70;background:var(--ok);color:#04321c; width:56px;height:56px;border-radius:50%;display:grid;place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .4s var(--ease)} .flt:hover{transform:scale(1.06)} .flt svg{width:28px;height:28px} /* iconos de redes en el pie */ .foot .rs a{display:inline-flex;align-items:center;gap:9px} .foot .rs svg{width:16px;height:16px;flex:0 0 16px;fill:currentColor;opacity:.85;transition:opacity .3s} .foot .rs a:hover svg{opacity:1} /* ══════ ajustes de celular · 7 sep ══════ */ /* las fotos grandes entran en pantalla junto con su texto */ /* mientras la foto va sola a lo ancho (una sola columna), no puede ser tan alta */ @media(max-width:939px){ .dif figure img,.estr-foto img{aspect-ratio:16/10;height:auto} } @media(max-width:759px){ .dif figure img,.estr-foto img{aspect-ratio:4/3;height:auto} .visor{aspect-ratio:3/4;width:min(92%,360px)} } /* los logos de marcas se achican con la pantalla, no al reves */ .marcas .row span{height:auto;min-height:clamp(44px,13vw,66px)} .marcas .row img{height:clamp(40px,13.5vw,60px)} /* sin costura entre "por que skla" y "como nace una piscina" */ #verificador{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 24%)} /* el boton de whatsapp tapaba texto en pantallas chicas */ @media(max-width:759px){ .flt{width:50px;height:50px;right:14px;bottom:14px} .flt svg{width:25px;height:25px} } /* nada se sale de la pantalla, ni en un telefono de 320 px */ @media(max-width:359px){ .shell{padding-inline:16px} .tira b{font-size:26px} } /* titulos calibrados para celular: en la compu no cambia nada */ h1,h2,h3,h4{overflow-wrap:break-word} @media(max-width:430px){ .hero h1{font-size:clamp(34px,9.6vw,44px)} .hero .claim{font-size:clamp(17px,5vw,21px)} .lite h2,.dark h2,.deep h2{font-size:clamp(25px,7.4vw,34px);max-width:100%} .dif h2{font-size:clamp(24px,7.2vw,33px);max-width:100%} .contacto h2{font-size:clamp(24px,7vw,32px);max-width:100%} .cap h3{font-size:clamp(22px,6.6vw,30px)} .marcas h2{font-size:clamp(21px,6.2vw,29px)} .after b{font-size:clamp(17px,5vw,22px)} .verdict .big{font-size:clamp(19px,5.6vw,25px)} } /* ══════ hoja de WhatsApp · elegir el motivo antes de escribir ══════ */ .washeet{position:fixed;inset:0;z-index:90;display:grid;align-items:end;justify-items:center} @media(min-width:640px){.washeet{align-items:center}} .washeet-bg{position:absolute;inset:0;background:rgba(4,14,24,.72); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:waFade .3s var(--ease)} .washeet-card{position:relative;width:min(100%,470px);background:var(--navy-deep); border:1px solid var(--hair);border-radius:22px 22px 0 0;padding:28px 22px 24px; box-shadow:0 -18px 60px rgba(0,0,0,.5);animation:waUp .42s var(--ease)} @media(min-width:640px){.washeet-card{border-radius:22px;padding:32px 30px 26px; box-shadow:0 24px 70px rgba(0,0,0,.55);animation:waFade .32s var(--ease)}} @keyframes waUp{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}} @keyframes waFade{from{opacity:0}to{opacity:1}} .washeet-x{position:absolute;top:12px;right:14px;width:38px;height:38px;border:0;border-radius:50%; background:rgba(255,255,255,.08);color:#fff;font-size:23px;line-height:1;cursor:pointer; transition:background .3s var(--ease)} .washeet-x:hover{background:rgba(255,255,255,.18)} .washeet-card h3{font-size:clamp(23px,5.6vw,30px);line-height:1.02;margin-top:12px;color:#fff} .washeet-sub{margin-top:11px;font-size:14.8px;line-height:1.55;color:rgba(255,255,255,.72)} .waopts{display:grid;gap:9px;margin-top:22px} .waopts button{width:100%;text-align:left;font-family:inherit;font-size:15.5px;font-weight:400; color:#fff;background:rgba(255,255,255,.06);border:1px solid var(--hair);border-radius:13px; padding:15px 46px 15px 17px;cursor:pointer;position:relative;line-height:1.35; transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)} .waopts button::after{content:"→";position:absolute;right:17px;top:50%;transform:translateY(-50%); color:var(--ok);font-size:16px;transition:transform .3s var(--ease)} .waopts button:hover{background:rgba(47,191,113,.14);border-color:rgba(47,191,113,.5)} .waopts button:hover::after{transform:translateY(-50%) translateX(3px)} .waopts button:active{transform:scale(.985)} .washeet-pie{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair); font-size:13.5px;color:rgba(255,255,255,.55)} .washeet-pie a{color:var(--amber);border-bottom:1px solid currentColor} /* área de toque de las pestañas de etapas: 19 px era imposible de acertar en celular */ @media(max-width:759px){ .pista button{padding:18px 0 23px} } /* ---- páginas legales ---- */ .legalpg{padding:120px 0 80px;background:var(--navy)} .legalpg h1{font-family:"Anton",sans-serif;font-size:clamp(34px,6vw,54px);line-height:1.04; letter-spacing:.01em;color:#fff;margin:6px 0 10px} .legalpg .lead{color:rgba(255,255,255,.6);font-size:14.5px;margin-bottom:34px} .legalpg h2{font-family:"Anton",sans-serif;font-size:20px;letter-spacing:.03em;color:#fff; margin:34px 0 10px} .legalpg p,.legalpg li{color:rgba(255,255,255,.82);font-size:16px;line-height:1.65;max-width:74ch} .legalpg ul{margin:10px 0 0 20px;display:grid;gap:6px} .legalpg a{color:#fff;text-decoration:underline;text-underline-offset:3px} .legalpg b{color:#fff;font-weight:600} .legalpg .volver{margin-top:44px} .legalpg .volver a{text-decoration:none} .legalpg ul + p{margin-top:14px} /* ══════════════════════════════════════════════════════════════════════ Correcciones de la auditoría de 10 clientes · 12 de septiembre de 2026 Cada bloque dice qué problema medido resuelve. ══════════════════════════════════════════════════════════════════════ */ /* A · A 1366×768 el botón del hero terminaba en 771 px y el pliegue está en 768: el visitante veía el titular y ningún botón. En pantallas anchas pero bajas se comprime el aire de arriba para que las acciones entren siempre. */ @media (min-width:1000px) and (max-height:960px){ .hero-in{padding-block:104px 0} .hero h1{font-size:clamp(38px,4.6vw,64px);margin-top:16px} .hero .claim{margin-top:14px} .hero .actions{margin-top:22px} .spec{margin-top:24px} .spec li{padding:13px 0 15px} } @media (min-width:1000px) and (max-height:720px){ .hero-in{padding-block:84px 0} .hero h1{font-size:clamp(34px,4vw,52px)} } /* B · La tarjeta del link promete «5 años de garantía» y la tira con esa garantía quedaba fuera del pliegue en TODOS los celulares (160 px abajo en un iPhone 13, 418 px en 320). Se acerca para que la promesa del anuncio se confirme en la primera pantalla. */ @media (max-width:820px){ .hero-in{padding-block:100px 0} .spec{margin-top:18px} .spec li{padding:12px 0 14px} .spec ul{gap:10px 20px} .spec .d{margin-top:5px} } /* C · Áreas de toque. Los enlaces del pie medían 19–20 px de alto y las pestañas del visor 34×44 en 320 px y 23×44 con el zoom al 150 %. */ .foot ul a, .foot .bottom a{display:inline-block;padding:11px 0;line-height:1.25} .foot ul{gap:0} .foot .rs a{padding:11px 0} /* 7 pestañas x 46 px no entran en una pantalla de 320: abajo de 400 px se dejan como estaban, que ya tenian 44 px de alto. */ @media (min-width:400px){ .pista button{min-width:46px} } .lnk{display:inline-block;padding:9px 0} .nav ul a{padding:10px 0} /* D · Texto de 11 px en celular: cuesta leerlo, y el que más lo sufre es el cliente de más edad. Mínimo 12,5 px. */ .spec .d, .micro, .foot .bottom, .proj .cap .meta, .cov .branch small{font-size:12.5px} /* E · El carrusel de 11 proyectos no tenía control con mouse: en escritorio el visitante veía 4 obras de 11 y no había forma de saber que había más. */ .projs-wrap{position:relative} .projs-nav{display:none} @media (hover:hover) and (min-width:900px){ .projs-nav{display:flex;position:absolute;top:50%;transform:translateY(-50%); width:48px;height:48px;align-items:center;justify-content:center;z-index:3; background:rgba(6,25,42,.82);border:1px solid rgba(255,255,255,.22);border-radius:50%; color:#fff;cursor:pointer;transition:background .25s} .projs-nav:hover{background:var(--orange-cta)} .projs-nav:focus-visible{outline:2px solid var(--amber);outline-offset:3px} .projs-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .projs-nav.prev{left:-6px} .projs-nav.next{right:-6px} .projs-nav[disabled]{opacity:.28;cursor:default} } /* F · Aviso cuando el navegador no ejecuta JavaScript: antes el visitante tocaba el formulario, no pasaba nada, y se iba sin saber por qué. */ .sinjs{background:var(--orange-cta);color:#fff;padding:14px 20px;font-size:15px; line-height:1.5;text-align:center} .sinjs a{color:#fff;text-decoration:underline;text-underline-offset:2px} /* G · El teléfono del pie, ahora que se puede llamar. */ .foot .rs a.tel svg{width:16px;height:16px} /* H · La etiqueta de cada pestaña del visor estaba en 11 px y hay que leerla para elegir la etapa. Los rótulos en mayúsculas espaciadas (.eyebrow) se dejan como están: son recurso de composición, no texto de lectura. */ .pista .rot{font-size:12px} /* ══════ Correcciones de la segunda ronda de auditoría · 12 sep ══════ */ /* I · Enlace para saltar al contenido: sirve al que navega con teclado o con lector de pantalla, y es invisible para todos los demás. */ .saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange-cta); color:#fff;padding:12px 20px;font-weight:600;text-decoration:none} .saltar:focus{left:0} /* J · La barra sigue funcionando igual, ahora dentro de