:root { --navy:#17344c; --aqua:#1f91ad; --orange:#d47833; --ink:#273444; --muted:#718096; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f4f6f8; color:var(--ink); font-family:"Montserrat",sans-serif; }
.hero { min-height:520px; color:#fff; background:linear-gradient(110deg,rgba(12,39,58,.78),rgba(20,104,130,.60)),url("/Multimedia/Fotos/piscinas_terminadas/WhatsApp%20Image%202026-09-28%20at%208.28.43%20PM%20%281%29.jpeg") center/cover; background-color:var(--navy); background-size:100% 100%,cover; background-repeat:no-repeat; background-position:center; }
.hero-content,.footer-content { position:relative; z-index:1; max-width:1400px; margin:auto; }
.brand { font-size:18px; font-weight:600; letter-spacing:.2px; }.brand span { color:#ff9a4e; font-weight:700; }
.eyebrow { color:#91e3ed; font-size:12px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; }.eyebrow.dark { color:var(--orange); }
.hero-title { max-width:850px; font-size:54px; font-weight:700; line-height:1.08; }.hero-copy { max-width:690px; color:rgba(255,255,255,.82); font-size:17px; line-height:1.7; }
.site-shell { position:relative; z-index:2; max-width:1500px; margin:-62px auto 0; }.main-card,.design-card,.video-card { border:1px solid #e4e9ee!important; border-radius:15px!important; box-shadow:0 7px 24px rgba(31,51,69,.1)!important; overflow:hidden; }.site-tabs { border-bottom:1px solid #e7ebef; }.site-tabs .v-tab { min-height:62px; font-size:12px; font-weight:700; }
.section-title { font-size:26px; font-weight:700; }.design-card { height:100%; cursor:pointer; transition:transform .2s,box-shadow .2s; }.design-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(31,51,69,.17)!important; }.design-name { font-size:17px; font-weight:700; }.meta { color:var(--muted); font-size:12px; line-height:1.6; }.meta.light { color:rgba(255,255,255,.65); }
.phase { height:100%; border:1px solid #e7ebef; border-radius:12px; background:#fff; }
.footer { background:var(--navy); color:#fff; font-size:13px; }
@media (max-width:600px) { .hero { min-height:570px; }.hero-title { font-size:36px; }.hero-copy { font-size:15px; }.site-shell { margin-top:-34px; }.section-title { font-size:22px; } }


.video-preview { position:relative; display:block; width:100%; height:320px; padding:0; overflow:hidden; border:1px solid #e4e9ee; border-radius:15px; background:#102330; cursor:pointer; box-shadow:0 7px 24px rgba(31,51,69,.1); }
.video-preview video { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.video-preview-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:rgba(0,0,0,.65); }
.video-preview-label { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); padding:6px 16px; border-radius:20px; background:rgba(0,0,0,.7); color:#fff; font-weight:600; }
.video-preview:hover .video-preview-play { background:var(--orange); }
.video-preview:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.process-video-card { background:#101820!important; overflow:hidden; }
.process-video-player { display:block; width:100%; height:calc(85vh - 64px); height:calc(85dvh - 64px); object-fit:contain; background:#000; }
@media (max-width:600px) { .video-preview { height:280px; } }

.header-logo { cursor:default; user-select:none; display:block; flex:0 0 auto; width:132px; max-width:100%; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.12); }
.header-logo img { pointer-events:none; user-select:none; -webkit-user-drag:none; display:block; width:100%; height:auto; }
.hero-nav { gap:12px; flex-wrap:wrap; }
@media (max-width:600px) { .header-logo { width:96px; border-radius:12px; } }

.whatsapp-float.v-btn { position:fixed; right:24px; bottom:24px; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); z-index:100; }
@media (max-width:600px) { .whatsapp-float.v-btn { right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); } }