/* ========================================================= KIKUE · Arquitectura & Constructora — Custom CSS ========================================================= */ /* Google Fonts se cargan desde el de cada HTML — no duplicar aquí */ :root { --primary: #F5A800; --primary-dark: #C88500; --accent: #C0392B; --accent-dark: #962D22; --light: #FFF8E8; --dark: #2C2B28; --text: #3D3830; } /* ─── BASE ─────────────────────────────────────────────── */ body { font-family: 'Nunito', sans-serif; color: var(--text); } h1,h2,h3,h4,h5 { font-family: 'Playfair Display', serif; } /* ─── OVERRIDES BOOTSTRAP ──────────────────────────────── */ .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } .btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; } .btn-primary:hover { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } .btn-outline-primary{ color: var(--primary) !important; border-color: var(--primary) !important; } .btn-outline-primary:hover { background-color: var(--primary) !important; color:#fff !important; } .border-primary { border-color: var(--primary) !important; } .fw-medium { font-weight: 500 !important; } .fw-bold { font-weight: 700 !important; } .fw-black { font-weight: 900 !important; } /* ─── SPINNER ──────────────────────────────────────────── */ #spinner { opacity:0; visibility:hidden; transition: opacity .4s ease, visibility 0s linear .4s; z-index:99999; } #spinner.show { opacity:1; visibility:visible; transition: opacity .4s ease, visibility 0s linear 0s; } /* ─── BACK TO TOP ──────────────────────────────────────── */ .back-to-top { position:fixed; display:none; right:45px; bottom:45px; z-index:99; background-color: var(--primary) !important; border-color: var(--primary) !important; } /* ─── TOPBAR ───────────────────────────────────────────── */ .topbar-bg { background: var(--dark) !important; border-bottom: 2px solid var(--primary); } .topbar-bg small, .topbar-bg a { color: #c8d8c8 !important; } .topbar-bg .btn-sm-square { background: var(--primary) !important; color:#fff !important; border-radius:0; } .topbar-bg .btn-sm-square:hover { background: var(--accent) !important; } /* ─── NAVBAR ────────────────────────────────────────────── */ /* SIEMPRE visible — top:0 fijo */ .navbar-light.sticky-top { top: 0 !important; transition: box-shadow .3s ease; } .navbar { border-bottom: 3px solid var(--primary); } .navbar-light .navbar-brand, .navbar-light a.btn { height: 75px; } .navbar-light .navbar-nav .nav-link { margin-right: 30px; padding: 25px 0; color: var(--dark); font-size: 15px; font-weight: 500; text-transform: uppercase; outline: none; transition:.3s; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active-page { color: var(--primary); font-weight:700; } @media (max-width: 991.98px) { .navbar-light .navbar-nav .nav-link { margin-right:0; padding:10px 0; } .navbar-light .navbar-nav { border-top:1px solid #eee; } } @media (min-width:992px) { .navbar .nav-item .dropdown-menu { display:block; border:none; margin-top:0; top:150%; opacity:0; visibility:hidden; transition:.5s; } .navbar .nav-item:hover .dropdown-menu { top:100%; visibility:visible; opacity:1; } } .navbar .dropdown-toggle::after { border:none; content:"\f107"; font-family:"Font Awesome 6 Free"; font-weight:900; vertical-align:middle; margin-left:8px; } /* ─── BUTTONS ───────────────────────────────────────────── */ .btn { font-weight:500; transition:.4s; } .btn.btn-primary, .btn.btn-secondary { color:#fff; } .btn-square { width:38px; height:38px; } .btn-sm-square { width:32px; height:32px; } .btn-lg-square { width:48px; height:48px; } .btn-square, .btn-sm-square, .btn-lg-square { padding:0; display:flex; align-items:center; justify-content:center; font-weight:normal; } .footer .btn.btn-social { margin-right:5px; width:35px; height:35px; display:flex; align-items:center; justify-content:center; color:var(--light); border:1px solid #fff; transition:.3s; } .footer .btn.btn-social:hover { color:var(--primary); } .footer .btn.btn-link { display:block; margin-bottom:5px; padding:0; text-align:left; color:#fff; font-size:15px; font-weight:normal; text-transform:capitalize; transition:.3s; } .footer .btn.btn-link::before { position:relative; content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900; margin-right:10px; } .footer .btn.btn-link:hover { color:var(--primary); letter-spacing:1px; box-shadow:none; } /* ─── PAGE HEADER (páginas interiores) ─────────────────── */ .page-header { background: linear-gradient(135deg,rgba(44,43,40,.88) 0%,rgba(245,168,0,.55) 100%), url('../img/carousel-1.jpg') center center/cover no-repeat; padding: 80px 0 50px; } .page-header h1 { font-family:'Playfair Display',serif; font-weight:900; color:#fff; } .breadcrumb-item, .breadcrumb-item a { color:rgba(255,255,255,.75); font-size:.9rem; } .breadcrumb-item.active { color:#fff; } .breadcrumb-item + .breadcrumb-item::before { color:rgba(255,255,255,.5); } /* ─── SECTION TITLE ─────────────────────────────────────── */ .section-title h1 { position:relative; display:inline-block; padding:0 60px; } .section-title.text-start h1 { padding-left:0; } .section-title h1::before, .section-title h1::after { position:absolute; content:""; width:45px; height:5px; bottom:0; background: var(--primary); } .section-title h1::before { left:0; } .section-title h1::after { right:0; } .section-title.text-start h1::before { display:none; } /* ─── HERO CAROUSEL ─────────────────────────────────────── */ /* Desktop: altura fija para que las imagenes no sean enormes */ .header-carousel .owl-carousel-item { position: relative; height: 580px; } .header-carousel .owl-carousel-item img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Tablet */ @media (max-width: 991px) { .header-carousel .owl-carousel-item { height: 480px; } } /* Mobile */ @media (max-width: 768px) { .header-carousel .owl-carousel-item { height: 420px; } .header-carousel .owl-carousel-item h5, .header-carousel .owl-carousel-item p { font-size:14px !important; font-weight:400 !important; } .header-carousel .owl-carousel-item h1 { font-size:30px; font-weight:600; } } .header-carousel .owl-nav { position:absolute; width:200px; height:45px; bottom:30px; left:50%; transform:translateX(-50%); display:flex; justify-content:space-between; } .header-carousel .owl-nav .owl-prev, .header-carousel .owl-nav .owl-next { width:45px; height:45px; display:flex; align-items:center; justify-content:center; color:#fff; background:transparent; border:1px solid #fff; font-size:22px; transition:.5s; } .header-carousel .owl-nav .owl-prev:hover, .header-carousel .owl-nav .owl-next:hover { background:var(--primary); border-color:var(--primary); } .header-carousel .owl-dots { position:absolute; height:45px; bottom:30px; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; } .header-carousel .owl-dot { position:relative; display:inline-block; margin:0 5px; width:15px; height:15px; background:transparent; border:1px solid #fff; transition:.5s; } .header-carousel .owl-dot::after { position:absolute; content:""; width:5px; height:5px; top:4px; left:4px; background:transparent; border:1px solid #fff; } .header-carousel .owl-dot.active { background:var(--primary); border-color:var(--primary); } /* ─── HIGHLIGHT STRIP ───────────────────────────────────── */ /* ─── HIGHLIGHT STRIP — compacto, dinámico, profesional ── */ .highlight-strip { background: linear-gradient(100deg, #2C2B28 0%, #1a1816 50%, #2C2B28 100%); border-top: 3px solid var(--accent); border-bottom: 3px solid var(--accent); padding: 0; position: relative; overflow: hidden; } /* línea dorada sutil de fondo */ .highlight-strip::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent 0px, transparent 120px, rgba(245,168,0,0.04) 120px, rgba(245,168,0,0.04) 121px ); pointer-events: none; } .highlight-strip .hs-inner { display: flex; align-items: stretch; justify-content: space-around; } .highlight-strip .hs-stat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px 12px; gap: 3px; position: relative; transition: background .3s ease; } .highlight-strip .hs-stat:hover { background: rgba(245,168,0,0.06); } .highlight-strip .hs-icon { font-size: .8rem; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; opacity: .9; } .highlight-strip .hs-num-wrap { display: flex; align-items: baseline; gap: 2px; line-height: 1; } .highlight-strip .hs-num { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 900; color: var(--primary); /* DORADO */ line-height: 1; } .highlight-strip .hs-suffix { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: var(--primary); opacity: .85; } .highlight-strip .hs-label { font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 2px; } .highlight-strip .hs-sep { width: 1px; background: linear-gradient(to bottom, transparent, rgba(245,168,0,.25), transparent); align-self: stretch; margin: 10px 0; flex-shrink: 0; } @media (max-width: 575px) { .highlight-strip .hs-inner { flex-wrap: wrap; } .highlight-strip .hs-stat { flex: 0 0 50%; padding: 18px 8px; } .highlight-strip .hs-sep { display: none; } .highlight-strip .hs-num { font-size: 2rem; } } /* ─── ABOUT LAYOUT ──────────────────────────────────────── */ @media (min-width:992px) { .container.about { max-width:100% !important; } .about-text { padding-right:calc(((100% - 960px)/2) + .75rem); } } @media (min-width:1200px) { .about-text { padding-right:calc(((100% - 1140px)/2) + .75rem); } } @media (min-width:1400px) { .about-text { padding-right:calc(((100% - 1320px)/2) + .75rem); } } /* ─── FEATURE LAYOUT ────────────────────────────────────── */ @media (min-width:992px) { .container.feature { max-width:100% !important; } .feature-text { padding-left:calc(((100% - 960px)/2) + .75rem); } } @media (min-width:1200px) { .feature-text { padding-left:calc(((100% - 1140px)/2) + .75rem); } } @media (min-width:1400px) { .feature-text { padding-left:calc(((100% - 1320px)/2) + .75rem); } } /* ─── QUOTE LAYOUT ──────────────────────────────────────── */ @media (min-width:992px) { .container.quote { max-width:100% !important; } .quote-text { padding-right:calc(((100% - 960px)/2) + .75rem); } } @media (min-width:1200px) { .quote-text { padding-right:calc(((100% - 1140px)/2) + .75rem); } } @media (min-width:1400px) { .quote-text { padding-right:calc(((100% - 1320px)/2) + .75rem); } } /* ─── CONTACT LAYOUT ────────────────────────────────────── */ @media (min-width:992px) { .container.contact { max-width:100% !important; } .contact-text { padding-left:calc(((100% - 960px)/2) + .75rem); } } @media (min-width:1200px) { .contact-text { padding-left:calc(((100% - 1140px)/2) + .75rem); } } @media (min-width:1400px) { .contact-text { padding-left:calc(((100% - 1320px)/2) + .75rem); } } /* ─── SERVICE CARDS ─────────────────────────────────────── */ .service-item { transition: transform .3s ease, box-shadow .3s ease; } .service-item:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(245,168,0,.2); } .service-item img { transition:.5s; } .service-item:hover img { transform:scale(1.1); } /* ─── PORTFOLIO ─────────────────────────────────────────── */ #portfolio-flters li { display:inline-block; font-weight:500; color:var(--dark); cursor:pointer; transition:.5s; border-bottom:2px solid transparent; } #portfolio-flters li:hover, #portfolio-flters li.active { color:var(--primary); border-color:var(--primary); } .portfolio-item img { transition:.5s; } .portfolio-item:hover img { transform:scale(1.1); } .portfolio-item .portfolio-overlay { position:absolute; display:flex; align-items:center; justify-content:center; width:100%; height:100%; bottom:0; left:0; background: linear-gradient(to top, rgba(44,43,40,.72) 0%, transparent 55%); opacity:0; transition: opacity .4s ease; } .portfolio-item:hover .portfolio-overlay { opacity:1; } .portfolio-item .portfolio-overlay .btn { opacity:0; transform: translateY(8px); transition: all .35s ease; } .portfolio-item:hover .portfolio-overlay .btn { opacity:1; transform: translateY(0); } /* ─── TEAM ───────────────────────────────────────────────── */ .team-item img { transition:.5s; } .team-item:hover img { transform:scale(1.1); } .team-item .team-social { position:absolute; width:38px; top:50%; left:-38px; transform:translateY(-50%); display:flex; flex-direction:column; background:#fff; transition:.5s; } .team-item .team-social .btn { color:var(--primary); background:#fff; } .team-item .team-social .btn:hover { color:#fff; background:var(--primary); } .team-item:hover .team-social { left:0; } /* ─── TESTIMONIAL ───────────────────────────────────────── */ .testimonial-carousel::before { position:absolute; content:""; top:0; left:0; height:100%; width:0; background:linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); z-index:1; } .testimonial-carousel::after { position:absolute; content:""; top:0; right:0; height:100%; width:0; background:linear-gradient(to left,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); z-index:1; } @media (min-width:768px) { .testimonial-carousel::before, .testimonial-carousel::after { width:200px; } } @media (min-width:992px) { .testimonial-carousel::before, .testimonial-carousel::after { width:300px; } } .testimonial-carousel .owl-item .testimonial-text { border:5px solid var(--light); transform:scale(.8); transition:.5s; } .testimonial-carousel .owl-item.center .testimonial-text { transform:scale(1); } .testimonial-carousel .owl-nav { position:absolute; width:350px; top:10px; left:50%; transform:translateX(-50%); display:flex; justify-content:space-between; opacity:0; transition:.5s; z-index:1; } .testimonial-carousel:hover .owl-nav { width:300px; opacity:1; } .testimonial-carousel .owl-nav .owl-prev, .testimonial-carousel .owl-nav .owl-next { position:relative; color:var(--primary); font-size:45px; transition:.5s; } .testimonial-carousel .owl-nav .owl-prev:hover, .testimonial-carousel .owl-nav .owl-next:hover { color:var(--dark); } /* ─── WHATSAPP FLOAT ────────────────────────────────────── */ .whatsapp-float { position:fixed; width:60px; height:60px; bottom:110px; right:45px; background-color:#25d366; color:#fff; border-radius:50%; text-align:center; font-size:30px; box-shadow:0 4px 16px rgba(37,211,102,.5); z-index:100; display:flex; align-items:center; justify-content:center; transition:transform .3s; text-decoration:none; } .whatsapp-float:hover { transform:scale(1.1); color:#fff; } /* ─── FOOTER ────────────────────────────────────────────── */ .footer .copyright { padding:25px 0; font-size:15px; border-top:1px solid rgba(256,256,256,.1); } .footer .copyright a { color:var(--light); } .footer .copyright a:hover { color:var(--primary); } /* ─── PRODUCTS / CARDS ──────────────────────────────────── */ .product-card { border:2px solid var(--light); border-top:4px solid var(--primary); padding:28px 20px; transition:border-top-color .3s, box-shadow .3s; } .product-card:hover { border-top-color:var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.1); } /* BUG FIX: .wow { visibility:visible !important } rompía WOW.js Solo lo forzamos para usuarios sin JS — WOW.js maneja su propia visibilidad */ .no-js .wow { visibility: visible !important; } /* ─── OVERFLOW-X FIX (BUG 6) ────────────────────────────── */ html, body { overflow-x: hidden; } /* ─── SCROLL BEHAVIOR ───────────────────────────────────── */ html { scroll-behavior: smooth; } /* ─── SCROLL-MARGIN-TOP (BUG 8) ─────────────────────────── */ /* Evita que el navbar sticky tape los destinos de anchor links */ [id] { scroll-margin-top: 90px; } /* ─── FLOATING BUTTONS — responsive right (BUG 7) ──────── */ /* Mobile ≤360px: evita que queden cortados en pantallas chicas */ @media (max-width: 360px) { .back-to-top { right: 14px !important; bottom: 14px !important; } .whatsapp-float { right: 14px !important; bottom: 80px !important; } } /* Tablet 361-767px */ @media (min-width: 361px) and (max-width: 767px) { .back-to-top { right: 20px !important; bottom: 20px !important; } .whatsapp-float { right: 20px !important; bottom: 90px !important; } } /* Desktop: mantiene los 45px definidos arriba */ /* ═══════════════════════════════════════════════════════════ LOGO KIKUE — Animado / Moderno ═══════════════════════════════════════════════════════════ */ /* Contenedor general del brand */ .navbar-brand.kikue-brand { position: relative; display: flex; align-items: center; text-decoration: none; transition: transform .35s cubic-bezier(.34,1.56,.64,1); } .navbar-brand.kikue-brand:hover { transform: scale(1.04); } /* Monograma KK */ .kikue-monogram { position: relative; display: flex; align-items: center; gap: 0; line-height: 1; } /* Letra K izquierda */ .kikue-k-left, .kikue-k-right { font-family: 'Playfair Display', serif; font-size: 2.1rem; font-weight: 900; color: #F5A800; letter-spacing: -1px; display: inline-block; transition: color .4s ease, text-shadow .4s ease; position: relative; } /* Hover: letras brillan */ .navbar-brand.kikue-brand:hover .kikue-k-left, .navbar-brand.kikue-brand:hover .kikue-k-right { color: #C88500; text-shadow: 0 0 20px rgba(245,168,0,.5); } /* Separador animado • */ .kikue-dot-wrap { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; position: relative; margin: 0 1px; } /* Dot principal */ .kikue-dot-wrap::before { content: ''; position: absolute; width: 7px; height: 7px; background: #C0392B; border-radius: 50%; animation: kikueDotPulse 2.8s ease-in-out infinite; z-index: 2; } /* Ripple exterior */ .kikue-dot-wrap::after { content: ''; position: absolute; width: 7px; height: 7px; background: transparent; border: 2px solid rgba(139,94,60,.5); border-radius: 50%; animation: kikueDotRipple 2.8s ease-in-out infinite; z-index: 1; } @keyframes kikueDotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .85; } } @keyframes kikueDotRipple { 0% { transform: scale(1); opacity: .6; } 60% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } } /* Línea animada debajo del monograma */ .kikue-monogram-underline { display: block; position: absolute; bottom: -3px; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, #F5A800, #C0392B, #F5A800); border-radius: 2px; transition: width .45s cubic-bezier(.4,0,.2,1); } .navbar-brand.kikue-brand:hover .kikue-monogram-underline { width: 100%; } /* Texto lateral (Arquitectura & Constructora / KIKUE · Misiones) */ .kikue-taglines { margin-left: 10px; padding-left: 10px; border-left: 2px solid #e0e0e0; line-height: 1.2; display: flex; flex-direction: column; gap: 2px; transition: border-color .3s; } .navbar-brand.kikue-brand:hover .kikue-taglines { border-color: #a5d6a7; } .kikue-tagline-top { font-family: 'Nunito', sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 2px; color: #F5A800; text-transform: uppercase; transition: letter-spacing .35s ease; white-space: nowrap; } .kikue-tagline-bot { font-family: 'Nunito', sans-serif; font-size: 0.58rem; font-weight: 500; color: #999; letter-spacing: 1px; white-space: nowrap; } .navbar-brand.kikue-brand:hover .kikue-tagline-top { letter-spacing: 2.8px; color: #C88500; } /* Hoja SVG animada — flota suavemente */ .kikue-leaf-icon { display: inline-block; margin-left: 4px; opacity: 0; transform: translateY(4px) rotate(-10deg); transition: opacity .35s ease, transform .35s ease; } .navbar-brand.kikue-brand:hover .kikue-leaf-icon { opacity: 1; transform: translateY(0) rotate(0deg); } .kikue-leaf-icon svg { } /* Footer logo — versión clara */ .kikue-brand-footer { display: inline-flex; align-items: center; gap: 2px; line-height: 1; margin-bottom: 6px; } .kikue-brand-footer .k-char { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 900; color: #F5A800; } .kikue-brand-footer .k-dot { color: #c4a47c; } /* ─── FORM VALIDATION STYLES ───────────────────────────── */ #presupuesto-form.was-validated .form-control:invalid, #presupuesto-form.was-validated .form-select:invalid { border-color: #dc3545 !important; box-shadow: 0 0 0 .2rem rgba(220,53,69,.2); } #presupuesto-form.was-validated .form-control:valid, #presupuesto-form.was-validated .form-select:valid { border-color: var(--primary) !important; box-shadow: 0 0 0 .2rem rgba(245,168,0,.2); } /* ─── PERFORMANCE: reduce motion for users who prefer it ── */ @media (prefers-reduced-motion: reduce) { .wow { animation: none !important; visibility: visible !important; } .header-carousel .owl-carousel-item img, .service-item img, .portfolio-item img, .team-item img { transition: none !important; } .kikue-dot-wrap::before, .kikue-dot-wrap::after, .kikue-leaf-icon svg { animation: none !important; } } /* ─── FOCUS ACCESSIBILITY ───────────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* ─── WHATSAPP FLOAT — higher z-index than back-to-top ─── */ .whatsapp-float { z-index: 101; } /* ─── LOGO PANEL HOME (movido desde inline index.html) ─ */ #kikue-logo-panel-home { background: linear-gradient(135deg, #2C2B28 0%, #3D3830 45%, #1a1918 100%); overflow: hidden; } #kikue-logo-panel-home::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 65% at 50% 48%, rgba(245,168,0,0.2) 0%, transparent 70%); animation: klpGlow 4s ease-in-out infinite; pointer-events: none; } @keyframes klpGlow { 0%,100%{opacity:.4;} 50%{opacity:1;} } .klp-particle { position:absolute; border-radius:50%; background:rgba(196,164,124,0.45); animation:klpFloat var(--d,8s) linear var(--del,0s) infinite; bottom:-6px; } @keyframes klpFloat { 0%{transform:translateY(0) translateX(0);opacity:0;} 8%{opacity:.7;} 92%{opacity:.2;} 100%{transform:translateY(-540px) translateX(var(--dx,15px));opacity:0;} } .klp-corner { position:absolute; width:0; height:0; border-color:rgba(196,164,124,0.55); border-style:solid; border-width:0; transition: width .8s ease .3s, height .8s ease .3s, opacity .4s ease .3s; opacity:0; } #kikue-logo-panel-home.kk-ready .klp-corner { width:36px; height:36px; opacity:1; } .klp-c-tl{top:22px;left:22px;border-top-width:2px;border-left-width:2px;} .klp-c-tr{top:22px;right:22px;border-top-width:2px;border-right-width:2px;} .klp-c-bl{bottom:78px;left:22px;border-bottom-width:2px;border-left-width:2px;} .klp-c-br{bottom:78px;right:22px;border-bottom-width:2px;border-right-width:2px;} .klp-scan { position:absolute; left:0; right:0; height:1.5px; background:linear-gradient(90deg,transparent,rgba(196,164,124,0.7),transparent); animation:klpScan 4.5s ease-in-out 1.5s infinite; z-index:3; pointer-events:none; } @keyframes klpScan { 0%{top:18%;opacity:0;} 8%{opacity:1;} 92%{opacity:.25;} 100%{top:82%;opacity:0;} } /* SVG animation classes */ .kk-left-group { opacity:0; animation: kkSlideLeft 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s forwards; } .kk-right-group { opacity:0; animation: kkSlideRight 0.9s cubic-bezier(0.22,1,0.36,1) 0.45s forwards; } @keyframes kkSlideLeft { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } } @keyframes kkSlideRight { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:translateX(0); } } .kk-dot { transform-box: fill-box; transform-origin: center; opacity:0; animation: kkDotPop 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.75s forwards, kkDotPulse 3s ease-in-out 1.5s infinite; } @keyframes kkDotPop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:scale(1); } } @keyframes kkDotPulse { 0%,100% { filter:drop-shadow(0 0 5px rgba(183,28,28,0.5)); } 50% { filter:drop-shadow(0 0 18px rgba(220,40,40,0.85)); } } .kk-ring { transform-box: fill-box; transform-origin: center; opacity:0; animation: kkRingIn 1s ease 1s forwards, kkRingPulse 3s ease-in-out 2s infinite; } @keyframes kkRingIn { from{opacity:0;transform:scale(0.7);} to{opacity:1;transform:scale(1);} } @keyframes kkRingPulse { 0%,100%{opacity:.25;transform:scale(1);} 50%{opacity:.55;transform:scale(1.07);} } .kk-tagline-wrap { opacity:0; animation: kkFadeUp 0.8s ease 1.1s forwards; } .kk-badge-wrap { opacity:0; animation: kkFadeUp 0.8s ease 1.4s forwards; } @keyframes kkFadeUp { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} } /* ─── PERF FIX: GPU compositing para evitar flickering ────── */ .klp-particle, .klp-scan, .kikueDotPulse, .kikueDotRipple, .header-carousel .owl-carousel-item img { will-change: transform; backface-visibility: hidden; } /* Spinner: forzar oculto si JS ya lo quitó */ #spinner:not(.show) { display: none !important; } /* ═══════════════════════════════════════════════════════════ ROJO MÁS PRESENTE — hero, títulos, texto, navbar ═══════════════════════════════════════════════════════════ */ /* Topbar: borde inferior en rojo */ .topbar-bg { border-bottom: 3px solid var(--accent) !important; } .topbar-bg .btn-sm-square { background: var(--accent) !important; } .topbar-bg .btn-sm-square:hover { background: var(--accent-dark) !important; } .topbar-bg small, .topbar-bg a { color: #f0d0c8 !important; } /* Navbar: línea inferior en rojo + activo en rojo */ .navbar { border-bottom: 3px solid var(--accent) !important; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active-page { color: var(--accent) !important; } /* Section title: barras laterales en rojo */ .section-title h1::before, .section-title h1::after { background: var(--accent) !important; height: 4px; } /* Section title: palabra clave en rojo */ .section-title .text-primary { color: var(--accent) !important; } /* Page header (páginas interiores): degradado con rojo */ .page-header { background: linear-gradient(135deg, rgba(44,43,40,.92) 0%, rgba(192,57,43,.65) 100%), url('../img/carousel-1.jpg') center center/cover no-repeat !important; } /* Franja de accent en borde superior del page-header */ .page-header { border-top: 5px solid var(--accent); } /* Hero — overlay con toque rojo en el texto destacado */ .header-carousel .owl-carousel-item h5 { color: #FF8070 !important; text-shadow: 0 1px 4px rgba(0,0,0,.6); } /* Botones outline en hero → rojo */ .header-carousel .owl-nav .owl-prev:hover, .header-carousel .owl-nav .owl-next:hover { background: var(--accent) !important; border-color: var(--accent) !important; } /* Highlight strip: fondo rojo → mucho más presente */ /* Product cards: borde superior en rojo */ .product-card { border-top-color: var(--accent) !important; } .product-card:hover { border-top-color: var(--primary) !important; } /* Portfolio overlay: rediseñado sin bloqueo rojo */ /* Team social: hover en rojo */ .team-item .team-social .btn:hover { background: var(--accent) !important; } /* Testimonial: flechas en rojo */ .testimonial-carousel .owl-nav .owl-prev, .testimonial-carousel .owl-nav .owl-next { color: var(--accent) !important; } /* Back to top: rojo */ .back-to-top { background-color: var(--accent) !important; border-color: var(--accent) !important; } /* Footer links hover: rojo */ .footer .btn.btn-link:hover { color: var(--accent) !important; } .footer .copyright a:hover { color: var(--accent) !important; } .footer .btn.btn-social:hover { color: var(--accent) !important; } /* Note: text-primary handled by kikue.css .text-primary override above */ /* Bordes de sección activa */ #portfolio-flters li:hover, #portfolio-flters li.active { color: var(--accent) !important; border-color: var(--accent) !important; } /* Spinner: color dorado */ .spinner-grow { color: var(--primary) !important; } /* Desarrollos nav link — siempre rojo, nunca se sobreescribe */ .navbar-light .navbar-nav .nav-link /* ─── IMAGE PANEL (responsive min-height) ─────────────────── */ .kk-img-panel { min-height: 480px; } @media (max-width: 991.98px) { .kk-img-panel { min-height: 320px; } } @media (max-width: 575.98px) { .kk-img-panel { min-height: 240px; } } /* ─── MOBILE FLOAT POSITIONS ──────────────────────────────── */ @media (max-width: 575.98px) { .whatsapp-float { right: 16px !important; bottom: 80px !important; width: 52px !important; height: 52px !important; font-size: 26px !important; } .back-to-top { right: 16px !important; bottom: 16px !important; width: 38px !important; height: 38px !important; } } @media (max-width: 991.98px) { .whatsapp-float { right: 20px; bottom: 90px; } .back-to-top { right: 20px; bottom: 20px; } } /* ─── HERO DISPLAY HEADINGS — mobile sizes ─────────────────── */ @media (max-width: 575.98px) { .header-carousel h1.display-3 { font-size: 1.9rem !important; } .header-carousel h1.display-4 { font-size: 1.7rem !important; } .header-carousel h5 { font-size: .75rem !important; letter-spacing: 2px !important; } .header-carousel .btn { padding: .6rem 1.4rem !important; font-size: .85rem !important; } .page-header h1 { font-size: 1.8rem !important; } .page-header { padding: 50px 0 30px !important; } } @media (min-width: 576px) and (max-width: 767.98px) { .header-carousel h1.display-3 { font-size: 2.2rem !important; } .page-header h1 { font-size: 2rem !important; } } /* ─── NAVBAR MOBILE — 9 links fit ─────────────────────────── */ @media (max-width: 991.98px) { .navbar-collapse { max-height: 80vh; overflow-y: auto; padding-bottom: 12px; } .navbar-light .navbar-nav .nav-link { padding: 8px 4px !important; font-size: 14px !important; margin-right: 0 !important; } /* Desarrollos link smaller on mobile */ .nav-link} @media (max-width: 400px) { .navbar-light .navbar-nav .nav-link { font-size: 13px !important; } .navbar-brand img, .navbar-brand .kikue-monogram { transform: scale(0.9); transform-origin: left center; } } /* ─── LAS MERCEDES — mobile responsive ────────────────────── */ @media (max-width: 767.98px) { /* Stack feature pills 1 per row on small mobile */ #las-mercedes .row.g-3 > .col-6 { flex: 0 0 100%; max-width: 100%; } /* Gallery images shorter on mobile */ #las-mercedes .kk-lm-item [style*="height:340px"], #las-mercedes [style*="height:340px"] { height: 220px !important; } #las-mercedes [style*="height:240px"] { height: 180px !important; } #las-mercedes [style*="height:163px"] { height: 140px !important; } #las-mercedes [style*="height:360px"] { height: 220px !important; } } @media (max-width: 575.98px) { #las-mercedes .col-lg-8, #las-mercedes .col-md-7 { margin-bottom: 12px; } } /* ─── PORTFOLIO GALLERY — mobile heights ──────────────────── */ @media (max-width: 575.98px) { .portfolio-item > div[style*="height:280px"], .portfolio-item > div[style*="height: 280px"] { height: 200px !important; } /* Portfolio filter pills wrap on small screens */ #portfolio-flters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } #portfolio-flters li { margin: 0 !important; font-size: .8rem; padding: 4px 10px; border: 1px solid rgba(245,168,0,.3); border-radius: 100px; } } /* ─── SECTION TITLE — mobile padding ──────────────────────── */ @media (max-width: 575.98px) { .section-title h1 { padding: 0 30px !important; font-size: 1.5rem !important; } .section-title h1::before, .section-title h1::after { width: 28px !important; } } /* ─── CONTACT FORM — mobile ───────────────────────────────── */ @media (max-width: 575.98px) { /* Form inputs slightly smaller on very small screens */ #presupuesto-form .form-control, #presupuesto-form .form-select { height: 48px !important; font-size: .9rem; } /* Submit button full width already (w-100) */ } /* ─── FOOTER — mobile ─────────────────────────────────────── */ @media (max-width: 575.98px) { .footer .copyright { text-align: center; font-size: .8rem; padding: 16px 0; } .footer .copyright a { display: block; margin: 4px 0; } /* Social buttons centered */ .footer .btn.btn-social { margin: 3px; } } /* ─── VIDEO SECTIONS — mobile ─────────────────────────────── */ @media (max-width: 767.98px) { /* Video max-height smaller on mobile */ video { max-height: 260px !important; } /* Play button overlay centered */ [id^="btn-"] > div:first-child { width: 56px !important; height: 56px !important; } } /* ═══════════════════════════════════════════════════════════ TIENDA ONLINE — Estilos de cards y filtros ═══════════════════════════════════════════════════════════ */ /* Filter buttons */ #tienda-filters { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } #tienda-filters .kk-filter-btn { cursor:pointer; padding:8px 22px; border-radius:100px; border:1.5px solid rgba(245,168,0,.3); font-weight:600; font-size:.85rem; color:var(--dark); transition:all .3s var(--spring,ease); user-select:none; } #tienda-filters .kk-filter-btn:hover { border-color:var(--primary); color:var(--primary); } #tienda-filters .kk-filter-btn.active { background:var(--primary); border-color:var(--primary); color:#2C2B28; } /* Product card */ .kk-shop-card { border-radius:12px; overflow:hidden; transition:transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease; } .kk-shop-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(44,43,40,.14); } .kk-shop-card:hover img { transform:scale(1.06); } /* Badge on product image */ .kk-shop-badge { position:absolute; top:12px; left:12px; background:var(--primary); color:#2C2B28; font-size:.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 12px; border-radius:100px; } /* Product item transition for filter */ .kk-product-item { transition:opacity .3s ease, transform .3s ease; } /* Mobile */ @media (max-width:575.98px) { #tienda-filters { gap:6px; } #tienda-filters .kk-filter-btn { padding:6px 14px; font-size:.78rem; } .kk-shop-card .p-4 { padding:1rem !important; } } /* Tienda nav link — siempre dorado, immune al JS */ .navbar-light .navbar-nav .nav-link.kk-nav-tienda, .navbar-light .navbar-nav .nav-link.kk-nav-tienda:hover, .navbar-light .navbar-nav .nav-link.kk-nav-tienda.active-page { color: var(--primary) !important; font-weight: 700 !important; } /* ═══ HERO CAROUSEL — prevent adjacent slide bleed ════════ */ .header-carousel, .header-carousel .owl-stage-outer { overflow: hidden !important; border-radius: 0; } /* Hide non-active slides completely */ .header-carousel .owl-item:not(.active) { opacity: 0 !important; pointer-events: none; } .header-carousel .owl-item.active { opacity: 1 !important; } /* Ensure the stage doesn't overflow */ .header-carousel .owl-stage { display: flex; } .header-carousel .owl-carousel-item { position: relative; width: 100%; flex-shrink: 0; overflow: hidden; } /* ═══════════════════════════════════════════════════════════ SECCIÓN DE RESEÑAS REALES — GOOGLE MAPS ═══════════════════════════════════════════════════════════ */ .kk-review-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px; transition: transform .3s ease, background .3s ease, border-color .3s ease; } .kk-review-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.09); border-color: rgba(245,168,0,.35); } /* Avatar circular con inicial */ .kk-review-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kk-review-name { font-weight: 700; color: #fff; font-size: .95rem; line-height: 1.2; } .kk-review-meta { color: rgba(255,255,255,.45); font-size: .72rem; margin-top: 2px; } .kk-review-stars { color: #FBBC05; font-size: 1rem; letter-spacing: 1px; white-space: nowrap; } .kk-review-text { color: rgba(255,255,255,.82); font-size: .9rem; line-height: 1.7; font-style: italic; margin-bottom: 12px; } .kk-review-badge { display: inline-flex; align-items: center; background: rgba(66,133,244,.15); color: rgba(66,133,244,.9); border: 1px solid rgba(66,133,244,.25); border-radius: 100px; padding: 2px 10px; font-size: .68rem; font-weight: 600; margin-bottom: 8px; } .kk-review-source { display: flex; align-items: center; color: rgba(255,255,255,.35); font-size: .72rem; font-weight: 500; margin-top: 8px; } /* Mobile */ @media (max-width: 575.98px) { .kk-review-card { padding: 16px; } .kk-review-name { font-size: .88rem; } .kk-reviews-section { padding: 40px 0 !important; } }