/* ========================================================================= HARIEL REAL ESTATE & INVESTMENT · estilos Paleta oficial (Sistema Visual): --marfil: #F6F3EE fondo general --piedra: #DCD6CC bordes / superficies claras --arena: #B9AC9A detalle cálido --greige: #8F8A82 texto secundario --grafito: #1A1A1A texto fuerte / fondos oscuros de contraste --dorado: #C8A97A acentos (dorado champagne) Tipografía: Cinzel (títulos) + Montserrat (texto). Cada torre además puede tener su propio --acc/--acc2 si se quiere un matiz distinto por desarrollo; hoy usan tonos dorado/grafito. ========================================================================= */ :root{ /* ---- paleta Hariel (Sistema Visual) ---- */ --marfil:#F5F0E7; --piedra:#ECE4D7; --arena:#B9AC9A; --greige:#8F8A82; --grafito:#191919; --dorado:#C9A76B; --dorado2:#E0C89D; --linea:rgba(201,167,107,.28); --blanco-calido:#FFFAF2; /* alias usados en todo el CSS (mismos nombres de siempre, nuevos valores) */ --navy:#0D0D0D; --navy-2:#151515; --indigo1:#B9AC9A; --indigo2:#C9A76B; --teal:#A5834C; --cream:#F5F0E7; --ink:#191919; --muted:#8F8A82; --ok:#3f7d53; --hold:#b9903a; --sold:#9a948a; --radius:18px; --shadow: 0 16px 50px rgba(0,0,0,.22); --acc:#C9A76B; --acc2:#A5834C; /* alias exactos usados por los componentes de estilo "landing" (nav, hero, tarjetas) */ --bg:var(--navy); --bg2:var(--navy-2); --paper:var(--marfil); --paper2:var(--piedra); --gold:var(--dorado); --gold2:var(--dorado2); --line:var(--linea); --white:var(--blanco-calido); } *{box-sizing:border-box;} html,body{margin:0;padding:0;} html{scroll-behavior:smooth;scroll-padding-top:104px;} body{ font-family:"Montserrat", ui-sans-serif, system-ui, -apple-system, Roboto, Arial, sans-serif; background:var(--cream); color:var(--ink); min-height:100vh; } h1,h2,h3,.brand-mark,.torre-header h1,.view-title h2,.slide h3, .plan-info h3,.gallery-header h3,.modal-box h3{ font-family:"Cinzel","Montserrat",serif; letter-spacing:.3px; font-weight:600; } img{max-width:100%;display:block;} button{font-family:inherit;cursor:pointer;} a{color:inherit;text-decoration:none;} .hidden{display:none !important;} /* ---------- scrollbar sutil ---------- */ ::-webkit-scrollbar{height:10px;width:10px;} ::-webkit-scrollbar-thumb{background:#c9c2b3;border-radius:8px;} /* ========================================================================= INDEX — grid de torres ========================================================================= */ .index-body{ background:var(--bg); min-height:100vh; } /* ========================================================================= NAV — fija, con blur, compartida visualmente por index y torre.html ========================================================================= */ .container{width:min(1180px,calc(100% - 40px));margin:auto;} .icon-btn{ width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:var(--marfil);display:flex;align-items:center;justify-content:center; font-size:1.1rem;flex:none; } .icon-btn:hover{background:var(--dorado);color:#1a1a1a;border-color:var(--dorado);} .pill-btn{ padding:10px 18px;border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:var(--marfil);font-weight:600;font-size:.92rem; display:inline-flex;align-items:center;gap:8px; } .pill-btn:hover{background:var(--dorado);color:#1a1a1a;border-color:var(--dorado);} /* dentro de tarjetas/modales claros, el pill-btn necesita colores oscuros para verse */ .modal-box .pill-btn, .view-card .pill-btn{ background:#f1ece0;color:var(--ink);border:1px solid var(--piedra); } .modal-box .pill-btn:hover, .view-card .pill-btn:hover{background:var(--dorado);color:#17120b;border-color:var(--dorado);} .nav{ position:fixed;top:0;left:0;right:0;z-index:50; background:linear-gradient(180deg,rgba(8,8,8,.95),rgba(8,8,8,.72),transparent); backdrop-filter:blur(8px); } .nav-inner{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;} .brand{display:flex;align-items:center;gap:14px;} .nav-links{display:flex;gap:28px;font-size:14px;color:#e8e0d5;} .nav-links a{position:relative;padding-bottom:4px;transition:color .2s ease;} .nav-links a:hover{color:var(--gold2);} .nav-links a.active{color:var(--gold2);} .nav-links a.active:after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px; background:var(--gold2);border-radius:2px; } .nav-cta,.btn-primary,.btn-dark{ border-radius:999px;padding:14px 22px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;gap:8px; transition:.25s ease;font-size:.92rem;border:none;cursor:pointer; } .nav-cta,.btn-primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#17120b;} .nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(201,167,107,.3);} .btn-dark{border:1px solid rgba(255,255,255,.36);color:#fff;background:rgba(255,255,255,.03);} .btn-dark:hover{border-color:var(--gold);color:var(--gold2);} .mobile-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:9px;padding:9px 11px;font-size:1rem;} .nav-spacer{height:88px;} /* ========================================================================= HERO — index y torre.html comparten este tratamiento (degradado sobre foto real: fachada de Main Street La Americana al atardecer — antes era una foto de stock de Chicago, que no correspondía a Guadalajara) ========================================================================= */ .hero{ min-height:640px;display:flex;align-items:flex-end;position:relative;overflow:hidden; background: linear-gradient(100deg, rgba(8,8,8,.92) 10%, rgba(8,8,8,.62) 42%, rgba(8,8,8,.28) 70%, rgba(8,8,8,.55) 100%), url('../images/torres/main-street-americana/fachada-2.jpg') center 35%/cover no-repeat; } .hero:after{content:"";position:absolute;inset:auto 0 0;height:170px;background:linear-gradient(transparent,var(--bg));pointer-events:none;} .hero-content{position:relative;z-index:2;padding:170px 0 90px;max-width:720px;} .eyebrow{color:var(--gold2);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px;font-weight:700;} .hero h1{font-size:clamp(40px,5.4vw,76px);line-height:1.02;margin:0 0 22px;color:var(--white);} .hero p{font-size:19px;color:#e8e1d8;max-width:620px;margin:0 0 30px;font-family:"Montserrat";} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;} .hero-meta{display:flex;gap:34px;flex-wrap:wrap;margin-top:42px;padding-top:25px;border-top:1px solid rgba(255,255,255,.17);} .metric strong{display:block;font-family:"Cinzel",serif;color:var(--gold2);font-size:26px;font-weight:600;} .metric span{font-size:12.5px;color:#cfc7bb;font-family:"Montserrat";} /* ========================================================================= TRUST STRIP ========================================================================= */ .trust-strip{position:relative;z-index:4;margin-top:-46px;padding-bottom:42px;} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} .trust-card{background:rgba(24,24,24,.95);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:25px;min-height:170px;box-shadow:var(--shadow);} .icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold2);margin-bottom:18px;font-size:20px;} .trust-card h3{font-size:19px;margin:0 0 8px;color:var(--white);} .trust-card p{font-size:13.5px;color:#bbb3a8;margin:0;font-family:"Montserrat";} /* ========================================================================= SECCIONES CLARAS (fondo Marfil) ========================================================================= */ .light{background:var(--paper);color:var(--ink);} .section{padding:80px 0;} .section-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:34px;flex-wrap:wrap;} .section-head h2{font-size:clamp(32px,3.6vw,48px);line-height:1.05;margin:0;max-width:760px;} .section-head .link{font-size:13px;color:#7d6540;font-weight:700;} /* destello breve al llegar a una sección desde un link del nav */ @keyframes sectionPulse{ 0%{text-shadow:0 0 0 rgba(201,167,107,0);} 35%{text-shadow:0 0 22px rgba(201,167,107,.55);} 100%{text-shadow:0 0 0 rgba(201,167,107,0);} } .section-pulse{animation:sectionPulse .9s ease;} /* ========================================================================= NUESTROS DESARROLLOS — grid dinámico (8 torres reales) ========================================================================= */ .projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} @media (max-width:980px){ .projects-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:600px){ .projects-grid{grid-template-columns:1fr;} } .project{ background:#fff;border-radius:16px;overflow:hidden; box-shadow:0 10px 30px rgba(53,42,28,.08);border:1px solid rgba(45,35,20,.08); transition:.25s ease;display:block; } .project:hover{transform:translateY(-5px);box-shadow:0 15px 36px rgba(53,42,28,.14);} .project-img{position:relative;aspect-ratio:1.18/1;overflow:hidden;background:#ddd;} .project-img img{width:100%;height:100%;object-fit:cover;transition:opacity .6s ease, transform .6s ease;} .project-img .img-noche{position:absolute;inset:0;opacity:0;} .project-img:has(.img-noche):hover .img-dia{opacity:0;} .project-img:has(.img-noche):hover .img-noche{opacity:1;} .project:hover .project-img img{transform:scale(1.035);} .project:hover .project-img img{transform:scale(1.035);} .project-info{padding:18px;} .project-info h3{font-size:21px;margin:0 0 4px;color:var(--ink);} .project-info p{margin:0;color:#796f63;font-size:13px;font-family:"Montserrat";} .tag{display:inline-block;margin-top:12px;padding:6px 10px;background:#eee6d9;border-radius:999px;font-size:11px;font-weight:700;color:#6f5938;font-family:"Montserrat";} /* ========================================================================= INVERSIÓN ========================================================================= */ .investment{background:radial-gradient(circle at 70% 10%,rgba(201,167,107,.10),transparent 32%),var(--bg);padding:80px 0;} .split{display:grid;grid-template-columns:.85fr 1.4fr;gap:56px;align-items:center;} .investment h2{font-size:clamp(30px,3.6vw,46px);line-height:1.05;margin:0 0 18px;color:var(--white);} .investment p{color:#c6bfb5;font-family:"Montserrat";} .investment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;} @media (max-width:900px){ .investment-grid{grid-template-columns:repeat(2,1fr);} .split{grid-template-columns:1fr;} } .inv-card{background:var(--paper);color:#171717;border-radius:14px;padding:22px;text-align:center;min-height:180px;display:flex;flex-direction:column;justify-content:center;} .inv-card .big{font-family:"Cinzel",serif;font-size:38px;color:#5d492a;line-height:1;margin:8px 0;} .inv-card strong{font-size:13.5px;} .inv-card span{font-size:11.5px;color:#6b6258;font-family:"Montserrat";} /* ========================================================================= PANEL "avance de obra" (genérico, honesto — sin cifras inventadas) ========================================================================= */ .advance-grid{display:grid;grid-template-columns:.85fr 1.4fr;gap:50px;align-items:center;} @media (max-width:900px){ .advance-grid{grid-template-columns:1fr;} } .advance-copy h2{font-size:clamp(30px,3.6vw,46px);line-height:1.06;margin:0 0 18px;} .advance-copy p{color:#665d52;font-family:"Montserrat";} .panel{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:18px;box-shadow:0 15px 40px rgba(42,29,14,.08);padding:22px;} .panel-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;flex-wrap:wrap;} .panel-title{display:flex;gap:14px;align-items:center;} .thumb{width:52px;height:66px;border-radius:8px;overflow:hidden;background:linear-gradient(150deg,var(--gold),var(--acc2));flex:none;} .panel p{color:#726a5f;font-size:.92rem;font-family:"Montserrat";margin:6px 0 16px;} .milestones{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;} @media (max-width:600px){ .milestones{grid-template-columns:repeat(2,1fr);} } .milestone{background:var(--paper);border-radius:10px;padding:12px 8px;text-align:center;font-size:11.5px;color:#625b52;font-family:"Montserrat";font-weight:600;} /* ========================================================================= PROCESO ========================================================================= */ .process{background:var(--bg2);padding:78px 0;} .process-grid{display:grid;grid-template-columns:.9fr 2fr;gap:50px;align-items:start;} @media (max-width:900px){ .process-grid{grid-template-columns:1fr;} } .process h2{font-size:clamp(28px,3.4vw,44px);line-height:1.05;margin:0;color:var(--white);} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} @media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .steps{grid-template-columns:1fr;} } .step{padding:16px;border-left:1px solid var(--line);} .step-num{color:var(--gold2);font-size:12px;font-weight:700;letter-spacing:.12em;margin-bottom:13px;} .step h3{font-size:18px;margin:0 0 8px;color:var(--white);} .step p{font-size:12.5px;color:#aaa298;margin:0;font-family:"Montserrat";} /* ========================================================================= CTA / CONTACTO ========================================================================= */ .cta{ position:relative;padding:86px 0; background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.75) 100%), url('../images/render_index.jpg') center/cover no-repeat; } .cta-grid{display:grid;grid-template-columns:1fr 430px;gap:56px;align-items:center;} @media (max-width:900px){ .cta-grid{grid-template-columns:1fr;} } .cta h2{font-size:clamp(30px,3.8vw,50px);line-height:1.05;margin:0 0 16px;color:var(--white);} .cta p{color:#d1c8bc;max-width:600px;font-family:"Montserrat";} .contact-card{background:rgba(18,18,18,.92);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:26px;} .contact-card input,.contact-card select{ width:100%;padding:13px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.15); background:#151515;color:#fff;margin-bottom:10px;outline:none;font-family:"Montserrat";font-size:.92rem; } .contact-card button{width:100%;} .contact-card small{display:block;color:#9d9589;margin-top:10px;text-align:center;font-family:"Montserrat";} /* ========================================================================= FOOTER ========================================================================= */ footer{background:#090909;border-top:1px solid rgba(255,255,255,.08);padding:32px 0;} .footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;} .footer-note{font-size:12px;color:#8f877d;font-family:"Montserrat";} @media (max-width:980px){ .nav-links{display:none;} .mobile-toggle{display:block;} .nav-cta{display:none;} } @media (max-width:640px){ .nav-inner{height:72px;} .nav-spacer{height:72px;} .hero{min-height:600px;} .hero-content{padding-top:120px;} } /* ========================================================================= PÁGINA DE TORRE — mismo lenguaje visual que el index (nav fija + hero) ========================================================================= */ .torre-body{ min-height:100vh; background:var(--bg); } .torre-hero{ position:relative;overflow:hidden; background:linear-gradient(165deg, var(--bg) 0%, var(--bg2) 55%, #0b0b0b 100%); padding:calc(88px + 50px) 20px 60px; min-height:58vh; display:flex;flex-direction:column;justify-content:center; text-align:center; } .torre-hero:before{ content:"";position:absolute;inset:0;z-index:1; background: radial-gradient(900px 500px at 10% 0%, color-mix(in srgb, var(--acc) 30%, transparent), transparent 60%), linear-gradient(180deg, rgba(8,8,8,.5) 0%, rgba(8,8,8,.55) 55%, rgba(8,8,8,.72) 100%); } .torre-hero-bg{position:absolute;inset:0;z-index:0;} .thb-layer{ position:absolute;inset:0;background-size:cover;background-position:center; opacity:0;transition:opacity 1.4s ease; } .thb-layer.active{opacity:1;} .torre-header, .torre-hero-content{position:relative;z-index:2;} .torre-menu-section{ position:relative; background:linear-gradient(165deg, var(--bg) 0%, var(--bg2) 55%, #0b0b0b 100%); padding:36px 20px 54px; } .torre-header .crest{ min-width:0;max-width:240px;height:auto;max-height:64px; margin:0 auto 14px;padding:0;background:none;box-shadow:none; display:flex;align-items:center;justify-content:center; color:#fff;font-weight:700;font-size:1.2rem;font-family:"Cinzel"; } .torre-header .crest img{max-width:100%;max-height:64px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));} .torre-header .eyebrow{color:var(--gold2);} .torre-header h1{color:var(--white);font-size:clamp(30px,4vw,46px);margin:8px 0 6px;} .torre-header .claim{color:#cfc7bb;font-size:1rem;margin:0 0 22px;font-family:"Montserrat";} /* menu grid de botones (imagen 2) */ .menu-grid{ display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)); gap:14px;max-width:1000px;margin:0 auto;padding:0 24px 50px; } @media (max-width:900px){ .menu-grid{grid-template-columns:repeat(2,1fr);} } .menu-btn{ background:rgba(255,255,255,.06); border:1px solid rgba(201,167,107,.4);border-radius:12px; padding:18px 14px 16px;display:flex;flex-direction:column;align-items:center;gap:10px; font-weight:600;color:var(--marfil);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase; transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } .menu-btn .ic{width:24px;height:24px;color:var(--dorado2,var(--gold2));transition:color .18s ease, transform .2s ease;} .menu-btn .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} .menu-btn:hover{ transform:translateY(-3px); background:var(--dorado,var(--gold)); border-color:var(--dorado,var(--gold)); color:#1a1a1a; } .menu-btn:hover .ic{color:#1a1a1a;transform:scale(1.08);} /* contenedor de contenido (todas las vistas dentro de la misma pestaña) */ .view-shell{ max-width:1200px;margin:0 auto;padding:0 24px 60px; } .back-row{ max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:10px; } .view-card{ background:#fff; border:1px solid var(--piedra); border-radius:18px; box-shadow:var(--shadow); padding:26px 26px 34px; min-height:420px; } .view-title{ display:flex;align-items:center;justify-content:space-between; margin-bottom:18px;flex-wrap:wrap;gap:10px; } .view-title h2{margin:0;font-size:1.5rem;color:var(--navy);} .view-title .tag{ background:var(--acc);color:#fff;padding:6px 14px;border-radius:999px; font-size:.8rem;font-weight:700; } /* ========================================================================= PRESENTACIÓN / BROCHURE — carrusel de slides ========================================================================= */ .slides-wrap{position:relative;} .slides-wrap:fullscreen{ background:#0d0d0d;display:flex;flex-direction:column;justify-content:center; padding:40px 60px; } .slides-wrap:fullscreen .slides-track{border:none;background:#0d0d0d;} .slides-wrap:fullscreen .slide{min-height:0;} .slides-wrap:fullscreen .slide-fullimg img, .slides-wrap:fullscreen .plan-img img{max-height:82vh;} .slides-wrap:fullscreen .slide-nav{max-width:900px;margin:16px auto 0;} .slides-wrap:-webkit-full-screen{background:#0d0d0d;} /* textos más claros en modo Presentar (pantalla completa) para que resalten sobre el fondo oscuro */ .slides-wrap:fullscreen .slide{color:#ece4d4;} .slides-wrap:fullscreen .slide h3{color:#fff;} .slides-wrap:fullscreen .slide h4{color:var(--dorado2);} .slides-wrap:fullscreen .slide p{color:#cfc6b3;} .slides-wrap:fullscreen .slide .eyebrow{color:var(--dorado2);} .slides-wrap:fullscreen .stat-grid .stat span{color:#bdb3a0;} .slides-wrap:fullscreen .bullet-list li{color:#ece4d4;} .slides-wrap:fullscreen .logo-chip{background:#232323;color:#ece4d4;border-color:#3a3a3a;} .slides-wrap:fullscreen .blank-note{border-color:#444;color:#a89e8c;} .slides-wrap:fullscreen .point h4{color:var(--dorado2);} .slides-wrap:fullscreen .point p{color:#cfc6b3;} .slides-wrap:fullscreen .amen-item{background:#1a1a1a;} .slides-wrap:fullscreen table.price-table{background:#181818;} .slides-wrap:fullscreen table.price-table tbody td{background:#181818;color:#ece4d4;border-color:#333;} .slides-wrap:fullscreen table.price-table tbody tr:hover{background:#222;} .slides-wrap:fullscreen .slide-counter{color:#cfc6b3;} .slides-wrap:fullscreen .dot-btn{background:#4a4438;} .slides-wrap:fullscreen .dot-btn.active{background:var(--dorado);} .slides-track{ overflow:hidden;border-radius:14px;border:1px solid #e7e0d0; background:#fff; } .slide{ display:none;min-height:620px;padding:34px; } .slide.active{display:block;animation:fadeSlide .35s ease;} @keyframes fadeSlide{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:none;}} .slide h3{margin:0 0 14px;font-size:1.4rem;} .slide-nav{ display:flex;align-items:center;justify-content:space-between; margin-top:14px; } .slide-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;} .dot-btn{ width:9px;height:9px;border-radius:50%;background:#d8d0ba;border:none; } .dot-btn.active{background:var(--acc);width:22px;border-radius:6px;} .nav-arrow{ width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff; border:none;font-size:1.2rem;display:flex;align-items:center;justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.25); } .nav-arrow:hover{background:var(--acc);} .slide-counter{font-size:.85rem;color:var(--muted);text-align:center;} /* bloques reutilizables dentro de slides */ .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px;} .stat-grid .stat b{display:block;font-size:2rem;color:var(--teal);} .stat-grid .stat span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;} .bullet-list{list-style:none;padding:0;margin:14px 0;} .bullet-list li{ display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.98rem; } .bullet-list li::before{ content:"";width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none; background:linear-gradient(135deg,var(--indigo2),var(--teal)); } .two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;} @media (max-width:760px){ .two-col{grid-template-columns:1fr;} } .logo-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:10px 0 22px;} .logo-chip{ padding:10px 16px;border:1px solid #e2dbc8;border-radius:10px; font-weight:700;color:var(--muted);font-size:.85rem;background:#fbf9f4; } .blank-note{ border:1px dashed #cfc7b0;border-radius:10px;padding:14px 16px;color:var(--muted); font-size:.85rem;font-style:italic; } .points-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 34px;margin-top:14px;} @media (max-width:760px){ .points-grid{grid-template-columns:1fr;} } .point h4{margin:0 0 4px;color:var(--acc2);} .point p{margin:0;font-size:.92rem;color:#4b4b4b;} /* ========================================================================= LISTA DE PRECIOS — tabla estilizada (imagen 17) ========================================================================= */ .price-table-wrap{overflow-x:auto;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.08);} table.price-table{width:100%;border-collapse:collapse;background:#fff;min-width:760px;} table.price-table thead th{ background:linear-gradient(120deg,var(--acc2),var(--acc)); color:#fff;text-align:left;padding:12px 14px;font-size:.78rem; letter-spacing:.3px;position:sticky;top:0; } table.price-table tbody td{ padding:11px 14px;font-size:.9rem;border-bottom:1px solid #f0ece1; } table.price-table tbody tr:hover{background:#faf7ef;} .apartado-input{ width:110px;padding:7px 9px;border-radius:7px; border:1.5px solid var(--piedra);font-size:.88rem;font-weight:600; color:var(--ink);background:#fff; transition:border-color .18s ease; } .apartado-input:hover, .apartado-input:focus{border-color:var(--dorado);outline:none;} .status-chip{ padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:700;color:#fff; display:inline-block; } .status-Disponible{background:var(--ok);} .status-Apartado{background:var(--hold);} .status-Vendido{background:var(--sold);} /* ========================================================================= MODELOS / PLANTAS (imagen 19 style) ========================================================================= */ .model-picker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;} .model-chip{ padding:9px 16px;border-radius:999px;border:1.5px solid #d9d2bf; background:#fff;font-weight:700;font-size:.85rem;color:var(--navy);opacity:.85; } .model-chip.active{background:var(--acc);border-color:var(--acc);color:#fff;opacity:1;} .model-chip:hover{opacity:1;border-color:var(--acc);color:var(--acc);} .model-chip.active:hover{color:#fff;} .model-panel{ display:grid;grid-template-columns:1.35fr 1fr;gap:0; background:linear-gradient(160deg,#242424,#141414); border-radius:14px;overflow:hidden;color:#fff; } @media (max-width:760px){ .model-panel{grid-template-columns:1fr;} } .model-panel .plan-img{ min-height:460px;display:flex;align-items:center;justify-content:center; background:#1f1f1f;padding:14px; } .model-panel .plan-img img{max-height:620px;width:100%;height:100%;object-fit:contain;border-radius:6px;background:#0f0f0f;} .model-panel .plan-info{padding:30px 30px;} .plan-info .eyebrow{color:var(--acc);font-weight:700;font-size:.85rem;} .plan-info h3{font-size:2rem;margin:2px 0 14px;} .plan-info .measure{font-size:2.4rem;font-weight:800;margin-bottom:16px;} .plan-info .measure small{font-size:1rem;font-weight:600;color:#c9c6e6;} .plan-feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;} .plan-feat li{display:flex;gap:10px;font-size:.98rem;} /* ========================================================================= AMENIDADES (grid oscuro tipo imagen 14) ========================================================================= */ .amen-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px; } @media (max-width:760px){ .amen-grid{grid-template-columns:repeat(2,1fr);} } .amen-item{ background:#1f1f1f;border:1.5px solid var(--acc);border-radius:12px; color:#fff;text-align:center;padding:22px 12px;font-weight:700;font-size:.88rem; } .amen-item .ic{font-size:1.6rem;display:block;margin-bottom:10px;} /* ========================================================================= RENDERS / AVANCE DE OBRA — carrusel de 3, centro resaltado ========================================================================= */ .gallery-header{ background:linear-gradient(100deg,var(--acc2),var(--acc)); border-radius:14px;color:#fff;text-align:center;padding:26px 20px;margin-bottom:22px; } .gallery-header h3{margin:6px 0 2px;font-size:1.6rem;} .gallery-header p{margin:0;opacity:.92;} .carousel3{ display:flex;align-items:center;justify-content:center;gap:14px; position:relative;padding:10px 60px; } .carousel3 .cs-arrow{ position:absolute;top:50%;transform:translateY(-50%); width:46px;height:46px;border-radius:50%;background:#fff;border:none; box-shadow:0 8px 20px rgba(0,0,0,.25);font-size:1.3rem;color:var(--navy); display:flex;align-items:center;justify-content:center;z-index:3; } .cs-arrow.left{left:0;} .cs-arrow.right{right:0;} .cs-arrow:hover{background:var(--acc);color:#fff;} .cs-slot{ border-radius:14px;overflow:hidden;background:#000;flex:none; box-shadow:0 10px 24px rgba(0,0,0,.3); transition:all .3s ease; } .cs-slot img{width:100%;height:100%;object-fit:cover;} .cs-side{width:24%;aspect-ratio:3/4;opacity:.55;transform:scale(.92);} .cs-center{width:36%;aspect-ratio:3/4;opacity:1;transform:scale(1.04);z-index:2;border:3px solid var(--acc);} @media (max-width:760px){ .carousel3{padding:10px 46px;} .cs-side{display:none;} .cs-center{width:80%;} } .cs-caption{text-align:center;margin-top:14px;color:var(--muted);font-size:.88rem;} /* ========================================================================= SIMULADOR ========================================================================= */ .sim-layout{display:grid;grid-template-columns:1fr 1fr;gap:26px;} @media (max-width:860px){ .sim-layout{grid-template-columns:1fr;} } .sim-photo{ background:var(--foto-bg,#1a1a1a);border-radius:14px;min-height:420px; display:flex;align-items:center;justify-content:center;overflow:hidden; transition:background .3s ease; } .sim-photo img{width:100%;height:100%;object-fit:contain;min-height:420px;} .sim-panel{display:flex;flex-direction:column;gap:14px;} .sim-select-row{ background:linear-gradient(120deg,var(--grafito),#2a2a2a); border:1px solid var(--dorado); border-radius:12px;padding:14px 18px; display:flex;align-items:center;gap:14px;flex-wrap:wrap; } .sim-select-row label{color:var(--dorado2);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;} .sim-select-row select{ flex:1;min-width:160px;padding:11px 38px 11px 14px;border-radius:8px; border:1px solid rgba(255,255,255,.18); background:#1c1c1c url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23C9A76B'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right 12px center; background-size:16px;appearance:none;-webkit-appearance:none; font-weight:600;font-size:.98rem;color:#f2ead9;cursor:pointer; transition:border-color .2s ease; } .sim-select-row select:hover, .sim-select-row select:focus{border-color:var(--dorado);outline:none;} .sim-select-row select option{background:#1c1c1c;color:#f2ead9;} .otros-input-row{ background:linear-gradient(120deg,var(--grafito),#2a2a2a); border:1px solid var(--dorado);border-radius:12px; padding:14px 18px;margin-bottom:14px; display:flex;align-items:center;gap:14px;flex-wrap:wrap; } .otros-input-row label{color:var(--dorado2);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;} .otros-input-row input{ flex:1;min-width:200px;padding:11px 14px;border-radius:8px; border:1px solid rgba(255,255,255,.18);background:#1c1c1c; font-weight:600;font-size:.98rem;color:#f2ead9; transition:border-color .2s ease; } .otros-input-row input:hover, .otros-input-row input:focus{border-color:var(--dorado);outline:none;} .otros-input-row input::placeholder{color:#8f8a82;} .sim-fields{ background:#fff;border-radius:12px;padding:18px 20px; display:grid;grid-template-columns:1fr 1fr;gap:12px 18px; } .sim-fields .f{display:flex;flex-direction:column;gap:2px;} .sim-fields .f label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;} .sim-fields .f b{font-size:1.05rem;color:var(--navy);} .sim-price{ background:linear-gradient(120deg,var(--acc2),var(--acc)); border-radius:12px;padding:18px 20px;color:#fff; display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; } .sim-price b{font-size:1.9rem;} .sim-price span{font-size:.8rem;opacity:.9;text-transform:uppercase;} .dee-link-btn{ margin-top:4px; background:linear-gradient(135deg,var(--gold2),var(--gold));color:#17120b;border:none;border-radius:999px; padding:14px 18px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px; box-shadow:0 8px 18px rgba(0,0,0,.2); } .dee-link-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(201,167,107,.3);} /* ========================================================================= DEE — tabla técnica completa ========================================================================= */ .dee-table-wrap{overflow:auto;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.08);max-height:560px;} table.dee-table{width:100%;border-collapse:collapse;background:#fff;min-width:1100px;} table.dee-table thead th{ background:var(--navy);color:#fff;text-align:left;padding:10px 12px;font-size:.72rem; letter-spacing:.3px;position:sticky;top:0;z-index:1; } table.dee-table tbody td{padding:9px 12px;font-size:.83rem;border-bottom:1px solid #f0ece1;white-space:nowrap;} table.dee-table tbody tr.dee-selected{background:#eaf6ee;} table.dee-table tbody tr:hover{background:#faf7ef;cursor:pointer;} /* ========================================================================= Ubicación (fallback embebido, aunque el botón abre maps en pestaña nueva) ========================================================================= */ .map-embed{border-radius:12px;overflow:hidden;border:1px solid #e7e0d0;min-height:420px;} .map-embed iframe{width:100%;height:420px;border:0;} /* botón CTA genérico */ .cta-btn{ background:linear-gradient(135deg,var(--gold2),var(--gold));color:#17120b;border:none;border-radius:999px; padding:12px 20px;font-weight:700;display:inline-flex;align-items:center;gap:8px; } .cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(201,167,107,.3);} .cta-btn-dark{background:linear-gradient(135deg,#2a2a2a,var(--grafito));color:#fff;} .cta-btn-dark:hover{box-shadow:0 10px 24px rgba(0,0,0,.35);} .proto-note{ background:#fdf6e3;border:1px solid #e3d29a;border-radius:10px; padding:10px 14px;font-size:.8rem;color:#6b5a1f;margin:-6px 0 18px; } .foot-note{ text-align:center;color:var(--greige);font-size:.78rem;padding:20px; } /* ========================================================================= ZOOMABLE — cursor + hover sutil en cualquier imagen ampliable ========================================================================= */ .zoomable{cursor:zoom-in;transition:transform .2s ease, filter .2s ease;} .zoomable:hover{transform:scale(1.015);filter:brightness(1.03);} /* ========================================================================= LIGHTBOX — visor de imagen ampliada, con descarga pequeña y discreta ========================================================================= */ .lightbox-overlay{ position:fixed;inset:0;z-index:300; display:flex;align-items:center;justify-content:center; background:rgba(5,5,5,0); opacity:0;visibility:hidden; transition:opacity .3s ease, background-color .3s ease, visibility 0s linear .3s; } .lightbox-overlay.show{ opacity:1;visibility:visible;background:rgba(5,5,5,.92); transition:opacity .3s ease, background-color .3s ease, visibility 0s; } .lightbox-img{ max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px; transform:scale(.94);transition:transform .3s cubic-bezier(.22,.8,.36,1); box-shadow:0 24px 70px rgba(0,0,0,.55); } .lightbox-overlay.show .lightbox-img{transform:scale(1);} .lb-close{ position:absolute;top:18px;right:20px; width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28); color:#fff;font-size:1.05rem;cursor:pointer; } .lb-close:hover{background:var(--dorado);color:#17120b;border-color:var(--dorado);} .lb-download{ position:absolute;bottom:22px;right:22px; width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2); color:#fff;font-size:.8rem;display:flex;align-items:center;justify-content:center; opacity:.65;text-decoration:none;transition:opacity .2s ease, background .2s ease; } .lb-download:hover{opacity:1;background:var(--dorado);color:#17120b;} .lb-arrow{ position:absolute;top:50%;transform:translateY(-50%); width:52px;height:52px;border-radius:50%; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22); color:#fff;font-size:1.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .2s ease, transform .2s ease; } .lb-arrow:hover{background:var(--dorado);color:#17120b;} .lb-prev{left:18px;} .lb-next{right:18px;} @media (max-width:640px){ .lb-arrow{width:40px;height:40px;font-size:1.3rem;} .lb-prev{left:6px;} .lb-next{right:6px;} } .lb-counter{ position:absolute;bottom:24px;left:50%;transform:translateX(-50%); color:#e9e2d6;font-size:.78rem;letter-spacing:.04em; background:rgba(255,255,255,.08);padding:5px 12px;border-radius:999px; } .lightbox-img{opacity:1;transition:opacity .18s ease, transform .3s cubic-bezier(.22,.8,.36,1);} /* ========================================================================= PORTADA de diapositiva (Presentación) — más balanceada verticalmente ========================================================================= */ .slide-cover{ display:flex !important;flex-direction:column;align-items:center;justify-content:center; min-height:552px;text-align:center; } /* ========================================================================= LOGO HARIEL — componente reutilizable (texto + SVG, no PNG) Cambia de color solo con una clase (hl-gold / hl-dark / hl-white), así siempre respeta la paleta oficial sin importar el fondo. ========================================================================= */ .hariel-logo{ display:inline-flex;align-items:center;gap:.5em; color:var(--dorado); line-height:1; } .hariel-logo.hl-dark{color:var(--grafito);} .hariel-logo.hl-white{color:#fff;} .hariel-logo .hl-mark{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:1.3em; } .hariel-logo .hl-h{ font-family:"Cinzel",serif;font-weight:700;font-size:2.5em;line-height:.8; position:relative;z-index:1; } .hariel-logo .hl-arc{ position:absolute;left:50%;top:56%;transform:translate(-50%,-50%); width:1.55em;height:.75em;pointer-events:none; } .hariel-logo .hl-arc path{fill:none;stroke:currentColor;stroke-width:2.3;opacity:.88;} .hariel-logo .hl-word{display:flex;flex-direction:column;line-height:1.05;} .hariel-logo .hl-name{font-family:"Cinzel",serif;font-weight:600;letter-spacing:3px;font-size:1.15em;} .hariel-logo .hl-tag{ font-family:"Montserrat",sans-serif;font-weight:400;letter-spacing:1.6px; font-size:.32em;opacity:.85;text-transform:uppercase;margin-top:3px;white-space:nowrap; } .hariel-logo.hl-lg{font-size:30px;} .hariel-logo.hl-md{font-size:20px;} .hariel-logo.hl-sm{font-size:14px;} .hariel-logo.hl-mark-only .hl-word{display:none;} @media (max-width:520px){ .hariel-logo.hl-lg{font-size:22px;} } /* ========================================================================= MODO EDICIÓN — barra de herramientas, modal, formulario, importador ========================================================================= */ .dee-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;} .tb-btn{background:#fff;color:var(--navy);border:1.5px solid #e2dbc8;font-weight:700;font-size:.85rem;padding:9px 14px;} .tb-btn:hover{border-color:var(--acc);color:var(--acc);} .tb-lock{background:var(--navy);color:#fff;border-color:var(--navy);} .tb-lock:hover{background:var(--acc);border-color:var(--acc);color:#fff;} .tb-ok{background:var(--ok);color:#fff;border-color:var(--ok);} .tb-ok:hover{opacity:.9;color:#fff;} .tb-danger{background:#f8d7da;color:#7a1f26;border:none;} .row-edit-btn{ background:none;border:1px solid #d9d2bf;border-radius:6px; width:28px;height:28px;font-size:.85rem;color:var(--navy); } .row-edit-btn:hover{background:var(--acc);color:#fff;border-color:var(--acc);} .modal-overlay{ position:fixed;inset:0;background:rgba(10,10,20,.55); display:none;align-items:center;justify-content:center;z-index:80;padding:20px; } .modal-overlay.show{display:flex;} .modal-box{ background:#fff;border-radius:14px;padding:26px;max-width:600px;width:100%; max-height:86vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.45); } .modal-box h3{margin:0 0 6px;color:var(--navy);} .modal-input{ width:100%;padding:11px 12px;border-radius:8px;border:1.5px solid #d9d2bf; margin:10px 0 4px;font-size:1rem; } .modal-error{color:#b0322f;font-size:.83rem;min-height:18px;margin-bottom:4px;} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;} .modal-check{ display:flex;gap:8px;align-items:flex-start;font-size:.85rem;color:var(--muted); margin:14px 0;line-height:1.4; } .form-grid{ display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:8px; } .form-grid label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.2px;} .form-grid input, .form-grid select{ padding:9px 10px;border-radius:8px;border:1.5px solid #d9d2bf;font-size:.92rem; font-weight:400;color:var(--ink);text-transform:none;letter-spacing:0; } .map-grid{display:flex;flex-direction:column;gap:8px;margin:14px 0;max-height:44vh;overflow:auto;padding-right:4px;} .map-row{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;align-items:center;} .map-row label{font-size:.85rem;color:var(--ink);} .map-row select{padding:8px 10px;border-radius:8px;border:1.5px solid #d9d2bf;font-size:.85rem;} /* ========================================================================= ANIMACIÓN DE TRANSICIÓN ENTRE VISTAS ========================================================================= */ @keyframes viewFadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} } .view-anim{animation:viewFadeUp .32s cubic-bezier(.22,.8,.36,1);} /* ========================================================================= BOTONES — sutiles por defecto, resaltan al pasar el mouse (global) ========================================================================= */ button, .pill-btn, .icon-btn, .menu-btn, .tb-btn, .model-chip, .nivel-chip, .nav-arrow, .cs-arrow, .dot-btn, .row-edit-btn, .planta-spot{ transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; } .menu-btn{opacity:.92;box-shadow:0 4px 10px rgba(0,0,0,.12);} .menu-btn:hover{opacity:1;} .tb-btn{opacity:.88;} .tb-btn:hover{opacity:1;} /* ========================================================================= CENTRADO — asegurar que cada bloque de la torre quede alineado al centro ========================================================================= */ body{overflow-x:hidden;} .back-row{justify-content:center;} .torre-header, .index-hero{margin-left:auto;margin-right:auto;} /* ========================================================================= PRESENTACIÓN — diapositiva de imagen completa (brand book real) ========================================================================= */ .slide-fullimg{display:flex;align-items:center;justify-content:center;height:100%;min-height:540px;} .slide-fullimg img{ max-width:100%;width:auto;height:auto;max-height:min(70vh,640px); object-fit:contain;border-radius:8px; } /* ========================================================================= BROCHURE — documento PDF incrustado ========================================================================= */ .brochure-doc{margin-top:24px;border-top:1px solid #e7e0d0;padding-top:22px;} .brochure-doc-info{ display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; margin-bottom:14px; } .brochure-doc-info b{color:var(--navy);} .brochure-doc-info p{margin:2px 0 0;color:var(--muted);font-size:.88rem;} .brochure-doc-frame{border-radius:12px;overflow:hidden;border:1px solid #e2dbc8;height:70vh;background:#efeae0;} .brochure-doc-frame iframe{width:100%;height:100%;border:0;} /* ========================================================================= PLANTAS — selector de nivel + plano con hotspots sutiles ========================================================================= */ .nivel-picker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;} .nivel-chip{ padding:8px 16px;border-radius:999px;border:1.5px solid #d9d2bf;background:#fff; font-weight:700;font-size:.82rem;color:var(--navy);opacity:.85; } .nivel-chip.active{background:var(--acc);border-color:var(--acc);color:#fff;opacity:1;} .nivel-chip:hover{opacity:1;border-color:var(--acc);color:var(--acc);} .nivel-chip.active:hover{color:#fff;} .planta-frame{position:relative;border-radius:14px;overflow:hidden;background:#161616;} .planta-bg{width:100%;display:block;object-fit:cover;max-height:560px;} .planta-bg-real{object-fit:contain;background:#fff;max-height:680px;cursor:zoom-in;} .planta-hotspots{ position:absolute;left:0;right:0;bottom:0; display:flex;flex-wrap:wrap;gap:8px;justify-content:center; padding:14px;background:linear-gradient(0deg, rgba(0,0,0,.55), transparent); } .planta-spot{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(2px); border-radius:9px;padding:7px 12px; color:#fff;text-align:left;line-height:1.15; opacity:.8; } .planta-spot .ps-clave{display:block;font-weight:800;font-size:.82rem;} .planta-spot .ps-sub{display:block;font-size:.68rem;color:#e8e6f5;opacity:.85;} .planta-spot:hover{ opacity:1;background:var(--acc);border-color:var(--acc); transform:translateY(-3px) scale(1.04); box-shadow:0 8px 18px rgba(0,0,0,.35); } .status-spot-Vendido{filter:grayscale(.4);} .status-spot-Apartado{border-color:rgba(255,255,255,.6);} .plano-hint{color:var(--muted);font-size:.82rem;text-align:center;margin-top:12px;} /* ========================================================================= AJUSTES (revisión de defectos) ========================================================================= */ /* franja de confianza: antes siempre eran 4 columnas y en celular la página se podía deslizar hacia los lados (~280px de desborde) */ @media (max-width:980px){ .trust-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:520px){ .trust-grid{grid-template-columns:1fr;} .trust-card{min-height:0;padding:20px;} .investment-grid{grid-template-columns:1fr 1fr;gap:10px;} .hero-meta{gap:18px 26px;} } html,body{overflow-x:clip;} /* red de seguridad contra desbordes horizontales */ /* menú móvil controlado por clase (antes eran estilos en línea que se quedaban pegados al girar el celular o al ensanchar la ventana) */ @media (max-width:980px){ .nav-links.open{ display:flex;flex-direction:column;gap:4px; position:absolute;top:calc(100% - 6px);left:12px;right:12px;z-index:60; padding:12px;background:#111;border:1px solid rgba(255,255,255,.1);border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.45); } .nav-links.open a{padding:12px 10px;font-size:15px;border-radius:8px;} .nav-links.open a:hover{background:rgba(255,255,255,.05);} .nav-links.open a.active:after{display:none;} .nav-inner{position:relative;} } #backRow, #viewShell{scroll-margin-top:96px;} /* accesibilidad: foco visible con teclado */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{ outline:2px solid var(--gold2, #C8A97A);outline-offset:2px; } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;} } /* texto del hero alineado con el logo (antes quedaba "flotando" al centro, desalineado del resto de las secciones) */ .hero .container.hero-content{margin-left:max(20px, calc((100% - 1180px) / 2));margin-right:auto;} /* ========================================================================= PORTADA DE TORRE A PANTALLA COMPLETA La foto de fachada ocupa toda la pantalla (hero + botones del menú) y se difumina hacia abajo hasta fundirse con el fondo. ========================================================================= */ .torre-top{ position:relative;overflow:hidden;isolation:isolate; min-height:100vh;min-height:100svh; display:flex;flex-direction:column;justify-content:space-between; background:var(--bg); } .torre-top .torre-hero-bg{position:absolute;inset:0;z-index:0;} .torre-top .thb-layer{background-size:cover;background-position:center 42%;} .torre-top:after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,.30) 16%, rgba(8,8,8,.18) 38%, rgba(13,13,13,.55) 62%, rgba(13,13,13,.90) 84%, var(--bg) 100%), radial-gradient(900px 520px at 12% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 60%); } .torre-top .torre-hero{ background:none;position:relative;z-index:2;flex:1;min-height:0; padding:calc(88px + 40px) 20px 30px; } .torre-top .torre-hero:before{display:none;} .torre-top .torre-menu-section{background:none;position:relative;z-index:2;padding:10px 20px 48px;} .torre-top .menu-btn{background:rgba(14,14,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .torre-top .menu-btn:hover{background:rgba(14,14,14,.75);} /* logo de la torre en lugar del título de texto */ .torre-header .crest{max-width:min(420px,80vw);max-height:none;margin:0 auto 18px;} .torre-header .crest img{max-height:150px;width:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.65));} .torre-header h1.sr-title{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } .torre-header .claim{font-size:1.08rem;text-shadow:0 2px 12px rgba(0,0,0,.6);} .torre-header .eyebrow{text-shadow:0 2px 12px rgba(0,0,0,.6);} @media (max-width:640px){ .torre-header .crest img{max-height:110px;} .torre-top .torre-hero{padding:calc(72px + 28px) 16px 20px;} } /* al abrir una sección, la portada se compacta para dejar el contenido a la vista */ .torre-body.in-view .torre-top{min-height:0;} .torre-body.in-view .torre-hero{padding:calc(88px + 14px) 20px 22px;} .torre-body.in-view .torre-header .crest{margin-bottom:6px;} .torre-body.in-view .torre-header .crest img{max-height:70px;} .torre-body.in-view .torre-header .claim{display:none;} .torre-body.in-view .torre-header .eyebrow{margin-bottom:0;} @media (max-width:640px){ .torre-body.in-view .torre-hero{padding:calc(72px + 10px) 16px 16px;} .torre-body.in-view .torre-header .crest img{max-height:56px;} } /* "Escríbenos sobre esta torre" también a pantalla completa, con foto que aparece difuminada desde arriba */ .torre-contacto{ min-height:100vh;min-height:100svh;display:flex;align-items:center; background:var(--bg);overflow:hidden;isolation:isolate; } .torre-contact-bg{ position:absolute;inset:0;z-index:0; background-size:cover;background-position:center 45%; background-image:var(--contact-img, url('../images/render_index.jpg')); } .torre-contacto:before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg, var(--bg) 0%, rgba(13,13,13,.75) 18%, rgba(13,13,13,.25) 45%, rgba(13,13,13,.45) 75%, rgba(9,9,9,.95) 100%), linear-gradient(90deg, rgba(10,10,10,.80) 0%, rgba(10,10,10,.25) 55%, rgba(10,10,10,.35) 100%); } .torre-contacto > .container{position:relative;z-index:2;} /* estatus "en revisión" (solicitud de apartado sin aprobar) */ .status-EnRevision{background:#C8A97A;color:#1a1a1a;} /* galerías administrables */ .gal-admin{margin-top:18px;padding:16px;border:1px dashed var(--piedra,#DCD6CC);border-radius:14px;background:#faf8f4;} .gal-admin h4{margin:0 0 6px;} .gal-admin p{margin:0 0 12px;color:var(--muted);font-size:.85rem;} .gal-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px;} .gal-admin-item{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#eee;} .gal-admin-item img{width:100%;height:100%;object-fit:cover;display:block;} .gal-admin-item.oculta img{opacity:.3;filter:grayscale(1);} .gal-admin-item button{ position:absolute;top:6px;right:6px;border:none;border-radius:999px;cursor:pointer; padding:4px 9px;font-size:.75rem;font-weight:700;background:rgba(20,20,20,.85);color:#fff; } .gal-admin-item button.restore{background:#2e7d4f;} .gal-admin-item .badge{position:absolute;left:6px;bottom:6px;font-size:.65rem;background:rgba(0,0,0,.6);color:#fff;padding:2px 6px;border-radius:6px;} .gal-empty{padding:40px 16px;text-align:center;color:var(--muted);border:1px dashed #d9d2c5;border-radius:14px;} .gal-top-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:8px;flex-wrap:wrap;} /* diapositivas de brochure */ .slide-brochure{display:flex;justify-content:center;align-items:center;} .slide-brochure img{max-width:100%;max-height:72vh;width:auto;height:auto;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.18);cursor:zoom-in;} .slides-wrap:fullscreen .slide-brochure img{max-height:84vh;} /* index: las fachadas de cada tarjeta se alternan solas (día / atardecer) */ .project-img.alt .img-dia{opacity:0;} .project-img.alt .img-noche{opacity:1;} /* estatus "No disponible" (bloqueado en la lista de precios) */ .status-Nodisponible{background:#8F8A82;color:#fff;} .status-spot-Nodisponible{opacity:.55;} /* ========================================================================= AJUSTES QA — celulares chicos (320–390 px) y áreas táctiles ========================================================================= */ /* el simulador se salía de la tarjeta: el