/* Quintana Propiedades — sistema compartido */ :root{ --navy:#0F1829; --navy-8:#141F38; --navy-7:#1B2A47; --navy-6:#24365C; /* c. el mismo azul con la luminosidad muy arriba: 1.66 -> 7.0 de contraste */ --line:#8FA3CC; --line-soft:rgba(143,163,204,.30); --amber:#D9A441; --amber-l:#E9B657; --amber-d:#A9761F; /* c. los grises suben: 8.33 -> 12.02 y 4.06 -> 7.38 sobre tarjeta */ --ink:#F2F0EC; --ink-2:#CBD5E8; --ink-3:#AEBBD2; --serif:"Lora",Georgia,serif; --sans:"Nunito Sans",system-ui,-apple-system,sans-serif; --pad:clamp(18px,4vw,60px); --r:16px; --rl:26px; --ez:cubic-bezier(.22,.68,.28,1); --glass:rgba(20,31,56,.82); } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:110px} body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--sans);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:1300px;margin:0 auto;padding:0 var(--pad)} :focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px} .skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--navy-8);padding:12px 18px; z-index:300;font-weight:700;border-radius:0 0 10px 0} .skip:focus{left:0} /* ---------- Lienzo de fondo animado ---------- */ #bg{position:fixed;inset:0;z-index:0;pointer-events:none;display:block} body > :where(:not(#bg)){position:relative;z-index:1} /* ========================================================= BARRA — tres bloques flotantes que convergen al bajar ========================================================= */ .nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:150; width:min(1300px,calc(100% - 2*var(--pad))); display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap; gap:14px; /* b. el ancho SI es animable; justify-content no lo es. Al encoger hasta el ancho exacto del contenido, space-between junta los bloques de forma continua en vez de teletransportarlos. */ transition:gap .55s var(--ez),top .55s var(--ez),width .55s var(--ez)} .nblock{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--line);border-radius:999px; transition:border-radius .45s var(--ez),background .45s var(--ez),padding .45s var(--ez)} .nlogo{display:flex;align-items:center;padding:9px 22px;flex:none} .nlogo img{height:36px;width:auto;transition:height .45s var(--ez);filter:brightness(0) invert(1)} .nmid{padding:5px 8px;flex:0 1 auto;min-width:0} .nlinks{position:relative;display:flex;gap:2px} .nlinks a{font-size:14.5px;font-weight:600;padding:10px 15px 12px;color:var(--ink-2); transition:color .25s var(--ez);white-space:nowrap;border-radius:10px} .nlinks a:hover,.nlinks a[aria-current="page"]{color:#fff} /* el indicador ámbar que se desliza — reemplaza la píldora rellena de siempre */ .nlinks .ind{position:absolute;bottom:3px;left:0;height:2px;width:0;background:var(--amber); border-radius:2px;opacity:0;pointer-events:none; transition:transform .42s var(--ez),width .42s var(--ez),opacity .3s} .nlinks .ind.on{opacity:1} .nend{display:flex;align-items:center;gap:8px;padding:7px 9px;flex:none} .btn-in{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700; padding:9px 18px;border-radius:999px;border:1.5px solid var(--amber);color:var(--amber); transition:background .25s var(--ez),color .25s var(--ez)} .btn-in svg{width:15px;height:15px;flex:none} .btn-in:hover{background:var(--amber);color:var(--navy-8)} /* al bajar, los tres bloques se juntan en una sola pieza */ .nav.small{gap:0;top:10px} /* el ancho lo fija app.js: ver medirNav() */ .nav.small .nblock{flex:none} .nav.small .nlogo{border-radius:999px 0 0 999px;padding:5px 18px} .nav.small .nlogo img{height:29px} .nav.small .nmid{border-radius:0;border-left:0;border-right:0;padding:2px 6px} .nav.small .nend{border-radius:0 999px 999px 0;padding:4px 6px} .nav.small .nblock{background:rgba(15,24,41,.95)} .burger{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent; cursor:pointer;padding:0;place-items:center;color:var(--ink)} .burger span{display:block;width:17px;height:2px;background:currentColor;position:relative;transition:.3s var(--ez)} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:2px; background:currentColor;transition:.3s var(--ez)} .burger span::before{top:-6px}.burger span::after{top:6px} .nav.open .burger span{background:transparent} .nav.open .burger span::before{top:0;transform:rotate(45deg)} .nav.open .burger span::after{top:0;transform:rotate(-45deg)} .mmenu{display:none} /* ---------- BOTONES ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px; padding:13px 24px;border-radius:999px;border:2px solid transparent;cursor:pointer;font-family:inherit; background:transparent; transition:transform .25s var(--ez),background .25s,border-color .25s,color .25s,box-shadow .25s} .btn:hover{transform:translateY(-2px)} .btn-p{background:var(--amber);color:var(--navy-8)} .btn-p:hover{background:var(--amber-l)} .btn-s{border-color:var(--line);color:var(--ink)} .btn-s:hover{border-color:var(--amber);color:var(--amber)} .btn-lg{font-size:17px;padding:16px 34px} .breathe{animation:breathe 3.6s ease-in-out infinite} @keyframes breathe{ 0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,.42),0 6px 18px rgba(0,0,0,.28)} 50%{box-shadow:0 0 0 13px rgba(217,164,65,0),0 6px 18px rgba(0,0,0,.28)} } /* ---------- SECCIONES ---------- */ section{position:relative} .sec{padding:clamp(44px,5.2vw,76px) 0} .card-sec{background:rgba(20,31,56,.72);backdrop-filter:blur(6px);border-radius:var(--rl); padding:clamp(32px,5vw,68px) clamp(22px,4vw,56px);border:1px solid var(--line)} .sh{text-align:center;margin-bottom:38px} h1{font-family:var(--serif);font-weight:600;font-size:clamp(31px,4.5vw,56px);line-height:1.12; letter-spacing:-.015em;margin:0 0 20px} h1 em{font-style:italic;color:var(--amber)} h2{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.1vw,40px);margin:0 0 11px} .sh p{color:var(--ink-2);margin:0;font-size:17px} .eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);font-weight:700;margin-bottom:12px} .lead{font-size:clamp(16px,1.35vw,18.5px);color:var(--ink-2);max-width:52ch;margin:0 0 26px} /* ---------- HERO ---------- */ .hero{position:relative;padding:clamp(118px,15vh,168px) 0 clamp(44px,6vw,80px)} .hgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,58px);align-items:center} .tabs{display:inline-flex;background:rgba(27,42,71,.85);border:1px solid var(--line);border-radius:999px; padding:5px;margin-bottom:24px} .tab{font-family:inherit;font-size:14.5px;font-weight:700;padding:10px 20px;border-radius:999px;cursor:pointer; color:var(--ink-2);transition:.28s var(--ez);background:transparent;border:0} .tab[aria-selected="true"]{background:var(--amber);color:var(--navy-8)} /* a. los dos paneles comparten celda de rejilla: la columna mide siempre lo mismo, asi la barra de pestanas no se mueve al cambiar de pestana */ .panes{display:grid} .panes>.pane{grid-area:1/1} .panes>.pane[hidden]{display:block;visibility:hidden;opacity:0;pointer-events:none} .pane{animation:fade .5s var(--ez)} @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* collage del hero: fotos que rotan */ .art{position:relative} .shot{border-radius:var(--rl);overflow:hidden;aspect-ratio:4/4.2;box-shadow:0 30px 70px rgba(0,0,0,.45); border:1px solid var(--line);position:relative;background:var(--navy-7)} .shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0; transition:opacity 1.1s var(--ez),transform 7s linear} .shot img.on{opacity:1;transform:scale(1.06)} .shot .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 24px 20px; background:linear-gradient(to top,rgba(15,24,41,.92),rgba(15,24,41,0)); font-size:14.5px;color:#E6EAF2} .shot .cap b{display:block;font-family:var(--serif);font-size:18px;color:#fff;margin-bottom:3px} /* ---------- ESTADÍSTICAS (marquesina) ---------- */ .statmarq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:26px 0;background:rgba(20,31,56,.55)} .statmarq .track{display:flex;gap:clamp(34px,5vw,72px);width:max-content;animation:slide 42s linear infinite} .statmarq .it{display:flex;align-items:baseline;gap:12px;white-space:nowrap} .statmarq .n{font-family:var(--serif);font-size:clamp(28px,3.4vw,44px);color:var(--amber);line-height:1} .statmarq .l{font-size:14.5px;color:var(--ink-2)} .statmarq .sep{color:var(--line);font-size:26px;align-self:center} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- MAPA DE COBERTURA ---------- */ .mapgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,52px);align-items:center} .peru{width:100%;height:auto;overflow:visible;max-height:70vh} .peru .land{fill:#17263F;stroke:rgba(217,164,65,.4);stroke-width:1.2;stroke-linejoin:round; transition:fill .5s var(--ez)} .peru .zone{fill:rgba(217,164,65,.18);stroke:var(--amber);stroke-width:1.6;cursor:pointer; transition:fill .35s var(--ez);transform-origin:center} .peru .zone:hover,.peru .zone.on{fill:rgba(217,164,65,.5)} .peru .pulse{fill:none;stroke:var(--amber);stroke-width:1.4;opacity:0;transform-origin:center; animation:mpulse 3.6s cubic-bezier(.2,.7,.3,1) infinite} @keyframes mpulse{0%{r:5;opacity:.7}70%{r:34;opacity:0}100%{opacity:0}} .peru .dot{fill:var(--amber)} .peru .lbl{fill:#E6EAF2;font-family:var(--sans);font-size:12.5px;font-weight:700;pointer-events:none; paint-order:stroke;stroke:rgba(15,24,41,.85);stroke-width:3.5px;stroke-linejoin:round} .zlist{list-style:none;padding:0;margin:22px 0 0} .zitem{border-bottom:1px solid var(--line)} .zhead{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px; background:transparent;border:0;color:inherit;font-family:inherit;font-size:16.5px;font-weight:700; padding:15px 2px;cursor:pointer;text-align:left;transition:.25s} .zhead:hover{color:var(--amber)} .zhead .cnt{font-size:12.5px;font-weight:600;color:var(--ink-3);margin-left:auto;margin-right:10px} .zhead .chev{transition:transform .35s var(--ez);color:var(--amber);flex:none} .zitem.open .zhead .chev{transform:rotate(180deg)} .zbody{max-height:0;overflow:hidden;transition:max-height .45s var(--ez)} .zbody ul{list-style:none;margin:0;padding:0 0 15px;display:flex;flex-wrap:wrap;gap:7px} .zbody li{font-size:13.5px;color:var(--ink-2);background:rgba(36,54,92,.55);border-radius:999px;padding:5px 12px} .note{margin-top:20px;font-size:14.5px;color:var(--ink-2)} .note b{color:var(--amber)} /* ---------- VIDEO ---------- */ .vidbox{position:relative;border-radius:var(--rl);overflow:hidden;border:1px solid var(--line); background:var(--navy-7);box-shadow:0 30px 70px rgba(0,0,0,.45);max-width:960px;margin:0 auto} .vidbox video{width:100%;height:auto;display:block} .vidfall{padding:clamp(30px,5vw,56px);text-align:center;color:var(--ink-2)} /* ---------- EQUIPO ---------- */ .team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)} .mem{background:rgba(27,42,71,.8);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; transition:.45s var(--ez);display:flex;flex-direction:column} .mem:hover{transform:translateY(-7px);border-color:var(--amber);box-shadow:0 24px 50px rgba(0,0,0,.45)} .mem figure{margin:0;aspect-ratio:4/3.2;overflow:hidden;position:relative} .mem img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ez)} .mem:hover img{transform:scale(1.07)} /* entrada al hacer scroll: se ve también en el teléfono, donde no hay cursor */ .mem.in img{animation:memzoom 1.9s var(--ez) both} @keyframes memzoom{from{transform:scale(1.1)}to{transform:scale(1)}} .mem figure::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(217,164,65,.28) 50%,transparent 62%); transform:translateX(-120%)} .mem.in figure::after{animation:memsweep 1.5s var(--ez) .25s both} @keyframes memsweep{to{transform:translateX(120%)}} .mem .b{padding:19px 21px 22px} .mem h3{font-family:var(--serif);font-size:20px;margin:0 0 2px} .mem .rol{font-size:12px;color:var(--amber);font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:11px} .mem p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55} /* ---------- TESTIMONIOS ---------- */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px)} .t{background:rgba(27,42,71,.8);border:1px solid var(--line);border-radius:var(--r);padding:26px 25px} .t .q{font-family:var(--serif);font-size:40px;color:var(--amber);line-height:.5;display:block;margin-bottom:16px} .t p{margin:0 0 19px;font-size:15px;color:#D8DEEA;line-height:1.65} .who{display:flex;align-items:center;gap:11px} .who img{width:40px;height:40px;border-radius:50%;object-fit:cover} .who b{display:block;font-size:14.5px}.who span{font-size:12.5px;color:var(--ink-2)} /* ---------- CIERRE + PIE ---------- */ .final{text-align:center;background:linear-gradient(180deg,rgba(20,31,56,.9),rgba(15,24,41,.9)); border-radius:var(--rl);padding:clamp(44px,6vw,84px) var(--pad);border:1px solid var(--line);position:relative} .final p{color:var(--ink-2);font-size:18px;max-width:54ch;margin:0 auto 28px} .marq{overflow:hidden;padding:34px 0 10px;border-top:1px solid var(--line);margin-top:56px} .marq div{display:flex;gap:60px;width:max-content;animation:slide 34s linear infinite} .marq span{font-family:var(--serif);font-size:clamp(42px,7vw,88px);color:rgba(242,240,236,.07); white-space:nowrap;font-weight:600} footer{padding:0 0 30px;font-size:15px;color:var(--ink-2)} .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding:44px 0 28px;border-bottom:1px solid var(--line)} footer h2{color:var(--amber);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;margin:0 0 13px; font-family:var(--sans);font-weight:800} footer a{display:block;padding:5px 0}footer a:hover{color:#fff} .fl img{height:54px;filter:brightness(0) invert(1);opacity:.9} .ftag{font-family:var(--serif);font-style:italic;color:var(--amber);margin-top:13px;font-size:17px;max-width:30ch} .fb{padding-top:20px;font-size:13px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} /* ---------- WhatsApp flotante ---------- */ .wafloat{position:fixed;right:18px;bottom:18px;z-index:140;width:56px;height:56px;border-radius:50%; background:#25D366;color:#062d10;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.45); transition:transform .25s var(--ez)} .wafloat:hover{transform:scale(1.07)} .wafloat svg{width:29px;height:29px} /* ---------- REVELADOS ---------- */ .rv{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ez),transform .85s var(--ez)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s} /* ---------- RESPONSIVE ---------- */ @media(max-width:1040px){ .nlinks a{padding:10px 11px;font-size:14px} .nlogo{padding:9px 16px} } @media(max-width:960px){ .hgrid,.mapgrid,.fg{grid-template-columns:1fr} .team,.tgrid{grid-template-columns:1fr} .nmid{display:none} .burger{display:grid} .nav{justify-content:space-between} .mmenu{display:none;width:100%;order:3;padding:10px; background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--line);border-radius:22px} .nav.open .mmenu{display:block;animation:fade .3s var(--ez)} .mmenu a{display:block;padding:13px 14px;font-weight:600;border-radius:12px;color:var(--ink-2)} .mmenu a:hover,.mmenu a[aria-current="page"]{background:var(--navy-6);color:#fff} .nav.small{gap:14px} .nav.small .nlogo,.nav.small .nend{border-radius:999px} } /* ---- Punto 1: el hero cabe en el teléfono ---- */ @media(max-width:760px){ .hero{padding:92px 0 34px} .hgrid{gap:20px} .tabs{margin-bottom:18px} .lead{margin-bottom:20px;font-size:15.5px} h1{font-size:clamp(27px,7.4vw,34px);margin-bottom:14px} .shot{aspect-ratio:4/3;max-height:44vh} .shot .cap{padding:18px 17px 14px;font-size:13.5px} .shot .cap b{font-size:16px} .btn-lg{font-size:16px;padding:14px 26px} .nav{top:10px;gap:10px} .nlogo{padding:8px 15px} .nlogo img{height:31px} .btn-in{padding:8px 14px;font-size:13.5px} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} html{scroll-behavior:auto} .rv{opacity:1;transform:none} #bg{display:none} .mem figure::after{display:none} } /* ===================================================================== AÑADIDO EN EL PASO A PHP Componentes que el prototipo no tenía porque no existían las páginas: la rejilla de fichas, la ficha individual, el blog y los errores. Se respetan las reglas del sistema: · borde --line = "esto se toca" (se dora al pasar el cursor) · borde --line-static = solo estructura, nunca se dora · radios --r / --rl, easing --ez ===================================================================== */ /* los distritos del acordeón ahora son enlaces reales (para indexar) */ .zbody li a{color:inherit;text-decoration:none;display:block} .zbody li{transition:background .25s var(--ez),color .25s var(--ez)} .zbody li:hover{background:rgba(217,164,65,.16);color:var(--ink)} /* ---------- rejilla de fichas ---------- */ .pgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))} .pgrid-3{grid-template-columns:repeat(3,1fr)} @media(max-width:980px){.pgrid-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.pgrid,.pgrid-3{grid-template-columns:1fr}} .pcard{background:rgba(27,42,71,.8);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;transition:transform .45s var(--ez),border-color .3s var(--ez),box-shadow .45s var(--ez)} .pcard:hover{transform:translateY(-6px);border-color:var(--amber);box-shadow:0 24px 50px rgba(0,0,0,.45)} .pcard-link{display:block;color:inherit;text-decoration:none} .pcard-img{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--navy-7)} .pcard-img img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .7s var(--ez)} .pcard:hover .pcard-img img{transform:scale(1.05)} .pcard-op,.pcard-badge{position:absolute;top:12px;font-size:11.5px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px} .pcard-op{left:12px;background:var(--glass);border:1px solid var(--line);color:var(--ink); backdrop-filter:blur(10px)} .pcard-badge{right:12px;background:var(--amber);color:var(--navy-8)} .pcard-body{padding:16px 18px 18px} .pcard-price{margin:0 0 4px;font-family:var(--serif);font-size:21px;color:var(--amber)} .pcard-title{margin:0 0 3px;font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.32} .pcard-place{margin:0 0 12px;font-size:13.5px;color:var(--ink-3)} .pcard-specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .pcard-specs li{font-size:12.5px;color:var(--ink-2);background:rgba(36,54,92,.55); border-radius:999px;padding:4px 10px} /* ---------- utilidades ---------- */ .center{text-align:center} .disclaimer{text-align:center;margin-top:22px;font-size:13px;color:var(--ink-3)} .errbox{max-width:620px;margin:60px auto;text-align:center} .errbox h1{font-size:clamp(30px,5vw,46px);margin:6px 0 14px} .errbox .btn{margin:0 5px} /* ---------- .btn sobre