/* ═══════════════════════════════════════════════════════ PALETTES — switched via [data-theme] on ═══════════════════════════════════════════════════════ */ :root { --white:#FFFFFF; --off:#F7F5F2; --black:#0A0A0A; --gray1:#1A1A1A; --gray2:#2E2E2E; --gray3:#4A4A4A; --gray4:#888888; --gray5:#BDBDBD; --gray6:#E8E6E3; --border:#E0DDD9; } /* Theme A — Navy (current / default) */ html[data-theme="navy"] { --accent:#1A3A6B; --accent-hover:#142D56; --accent-soft:rgba(26,58,107,0.12); --bg:#FFFFFF; --bg-alt:#F7F5F2; --bg-dark:#0A0A0A; --text:#0A0A0A; --text-mute:#4A4A4A; --text-fade:#888888; --on-dark:#FFFFFF; --on-dark-mute:rgba(255,255,255,0.55); --border-col:#E0DDD9; } /* Theme B — Classic Red (institutional automotive) */ html[data-theme="red"] { --accent:#B4121B; --accent-hover:#8F0E15; --accent-soft:rgba(180,18,27,0.12); --bg:#FFFFFF; --bg-alt:#F6F3F0; --bg-dark:#0A0A0A; --text:#0A0A0A; --text-mute:#4A4A4A; --text-fade:#888888; --on-dark:#FFFFFF; --on-dark-mute:rgba(255,255,255,0.55); --border-col:#E0DDD9; } /* Theme C — Gold on Black (luxury) */ html[data-theme="gold"] { --accent:#B8935A; --accent-hover:#9E7C47; --accent-soft:rgba(184,147,90,0.14); --bg:#0A0A0A; --bg-alt:#131313; --bg-dark:#000000; --text:#F2EEE8; --text-mute:#A8A29A; --text-fade:#6B6660; --on-dark:#F2EEE8; --on-dark-mute:rgba(242,238,232,0.55); --border-col:#1F1E1C; } /* Theme D — Pure Black (Audi-like minimalism) */ html[data-theme="mono"] { --accent:#0A0A0A; --accent-hover:#2E2E2E; --accent-soft:rgba(10,10,10,0.08); --bg:#FFFFFF; --bg-alt:#F4F4F2; --bg-dark:#0A0A0A; --text:#0A0A0A; --text-mute:#4A4A4A; --text-fade:#888888; --on-dark:#FFFFFF; --on-dark-mute:rgba(255,255,255,0.55); --border-col:#E4E2DE; } /* ═══════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:'Barlow',sans-serif; font-weight:300; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background 0.3s ease, color 0.3s ease; } img{display:block;max-width:100%} button{font-family:inherit} /* ═══════════════════════════════════════════════════════ NAV ═══════════════════════════════════════════════════════ */ nav{ position:fixed;top:0;left:0;right:0;z-index:100; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border-col); height:68px;display:flex;align-items:center;justify-content:space-between; padding:0 4vw; transition:background 0.3s, border-color 0.3s; } .nav-logo{display:flex;align-items:baseline;gap:6px;text-decoration:none;color:var(--text)} .nav-logo .logo-mark{ font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:22px; letter-spacing:0.08em;text-transform:uppercase;line-height:1; color:var(--text); width: 60%; } .nav-logo .logo-sub{ font-family:'Barlow Condensed',sans-serif;font-weight:400;font-size:11px; letter-spacing:0.32em;text-transform:uppercase;line-height:1; color:var(--accent); position:relative;top:-2px; } .nav-logo .logo-bar{ display:inline-block;width:1px;height:14px;background:var(--border-col); margin:0 4px;position:relative;top:2px; } .nav-links{display:flex;align-items:center;gap:2.2rem;list-style:none} .nav-links a{ font-size:12px;font-weight:500;color:var(--text-mute); text-decoration:none;letter-spacing:0.14em; text-transform:uppercase; transition:color 0.2s; position:relative; } .nav-links a::after{ content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px; background:var(--accent);transform:scaleX(0);transform-origin:left; transition:transform 0.25s ease; } .nav-links a:hover{color:var(--text)} .nav-links a:hover::after{transform:scaleX(1)} .nav-cta{ background:var(--accent)!important;color:var(--on-dark)!important; padding:10px 22px;border-radius:1px;font-weight:600!important; letter-spacing:0.1em!important; transition:background 0.2s!important; } .nav-cta::after{display:none!important} .nav-cta:hover{background:var(--accent-hover)!important;color:var(--on-dark)!important} .nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none} .nav-toggle span{display:block;width:22px;height:2px;background:var(--text);transition:all 0.3s} .nav-logo img { height: auto; /* Ajusta según el alto que quieras */ width: 25%; /* Mantiene la proporción */ max-height: 100%; /* No sobrepasa el contenedor */ object-fit: contain; /* Se asegura de que no se deforme */ } @media(max-width:860px){ .nav-links{display:none;position:fixed;top:68px;left:0;right:0;background:var(--bg);flex-direction:column;padding:2rem;border-bottom:1px solid var(--border-col);gap:1.5rem;align-items:flex-start} .nav-links.open{display:flex} .nav-toggle{display:flex} .nav-logo img { width: 50%; /* más pequeño en móviles */ } } /* ═══════════════════════════════════════════════════════ HERO CAROUSEL ═══════════════════════════════════════════════════════ */ .hero-carousel{ position:relative;width:100%;height:86vh;min-height:560px; overflow:hidden;margin-top:68px; background:#0A0A0A; } .carousel-track{display:flex;height:100%;transition:transform 0.8s cubic-bezier(0.65,0,0.35,1);will-change:transform} .carousel-slide{flex:0 0 100%;width:100%;height:100%;position:relative;overflow:hidden} .carousel-slide-bg{ position:absolute;inset:0; background-size:cover;background-position:center; transform:scale(1.06); transition:transform 8s ease-out; } .carousel-slide.active .carousel-slide-bg{transform:scale(1.0)} .carousel-slide-overlay{ position:absolute;inset:0; background: linear-gradient(to right,rgba(8,8,8,0.78) 0%,rgba(8,8,8,0.35) 50%,rgba(8,8,8,0.05) 100%), linear-gradient(to top,rgba(8,8,8,0.5) 0%,rgba(8,8,8,0.1) 40%,transparent 80%); } .carousel-slide-content{ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:center; padding:0 clamp(2rem, 9vw, 9rem) 10rem;z-index:1; } .carousel-counter{ font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:500; letter-spacing:0.4em;text-transform:uppercase; color:rgba(255,255,255,0.4);margin-bottom:1.25rem; display:flex;align-items:center;gap:10px; } .carousel-counter em{color:#fff;font-style:normal;font-weight:700} .carousel-counter .cc-line{width:40px;height:1px;background:rgba(255,255,255,0.25)} .carousel-brand-tag{ font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600; letter-spacing:0.3em;text-transform:uppercase;color:var(--accent); margin-bottom:1.5rem; } .carousel-title{ font-family:'Barlow Condensed',sans-serif; font-size:clamp(52px,9.5vw,140px);font-weight:900; letter-spacing:-0.01em;text-transform:uppercase; color:#fff;line-height:0.88;margin-bottom:1.75rem; text-wrap:balance; } .carousel-title .ln2{display:block;color:rgba(255,255,255,0.7);font-weight:400;font-style:italic} html[data-theme="gold"] .carousel-title .ln2{color:var(--accent)} .carousel-desc{ font-size:15px;font-weight:300;color:rgba(255,255,255,0.7); max-width:440px;line-height:1.7;margin-bottom:2.5rem; } .carousel-cta-row{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} .carousel-link{ display:inline-flex;align-items:center;gap:14px;white-space:nowrap; font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; color:#fff;text-decoration:none; padding:14px 24px;background:var(--accent); transition:background 0.25s, gap 0.25s; border:1px solid var(--accent); } .carousel-link:hover{background:var(--accent-hover);gap:18px} .carousel-link-ghost{ display:inline-flex;align-items:center;gap:10px; font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600; letter-spacing:0.18em;text-transform:uppercase; color:#fff;text-decoration:none; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.35); transition:border-color 0.25s, gap 0.25s; } .carousel-link-ghost:hover{border-color:#fff;gap:14px} /* Carousel controls — bottom bar */ .carousel-chrome{ position:absolute;bottom:0;left:0;right:0; display:flex;align-items:center;justify-content:space-between; padding:1.5rem clamp(2rem, 9vw, 9rem);z-index:10; border-top:1px solid rgba(255,255,255,0.08); background:linear-gradient(to top, rgba(0,0,0,0.4), transparent); } .carousel-dots{display:flex;gap:16px;align-items:center} .carousel-dot{ background:none;border:none;padding:0;cursor:pointer; font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600; letter-spacing:0.2em;text-transform:uppercase; color:rgba(255,255,255,0.35); transition:color 0.25s; display:flex;flex-direction:column;align-items:flex-start;gap:8px; } .carousel-dot::after{ content:'';width:28px;height:2px;background:rgba(255,255,255,0.2); transition:background 0.3s, width 0.3s; } .carousel-dot.active{color:#fff} .carousel-dot.active::after{background:var(--accent);width:56px} .carousel-arrows{display:flex;gap:2px} .carousel-arrow{ width:44px;height:44px;background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); cursor:pointer;display:flex;align-items:center;justify-content:center; transition:all 0.2s;color:#fff; } .carousel-arrow:hover{background:var(--accent);border-color:var(--accent)} .carousel-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5} @media(max-width:768px){ .hero-carousel{height:auto;min-height:0;aspect-ratio:9/14} .carousel-slide-overlay{background:linear-gradient(to top,rgba(8,8,8,0.9) 0%,rgba(8,8,8,0.45) 60%,rgba(8,8,8,0.2) 100%)} .carousel-slide-content{justify-content:flex-end;padding:0 2rem 5.5rem} .carousel-desc{display:none} .carousel-title{font-size:clamp(44px,13vw,72px);margin-bottom:1.25rem} .carousel-brand-tag{margin-bottom:0.75rem} .carousel-counter{margin-bottom:1rem} .carousel-chrome{padding:0.75rem 1.5rem} .carousel-dots{gap:10px} .carousel-dot::after{width:20px} .carousel-dot.active::after{width:36px} .carousel-dot span{display:none} .marcas,.modelos{padding:3.5rem 6vw 3rem} .marcas-head,.modelos-head{margin-bottom:2rem;gap:1.25rem} .section-sub{margin-bottom:2rem} section{scroll-margin-top:60px} } /* ═══════════════════════════════════════════════════════ SECTION LABEL / TITLES ═══════════════════════════════════════════════════════ */ .section-eyebrow{ display:flex;align-items:center;gap:14px; font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600; letter-spacing:0.3em;text-transform:uppercase;color:var(--accent); margin-bottom:1.25rem; } .section-eyebrow::before{ content:'';width:32px;height:1px;background:var(--accent); } .section-title{ font-family:'Barlow Condensed',sans-serif; font-size:clamp(36px,5vw,64px);font-weight:900; text-transform:uppercase;letter-spacing:-0.015em; color:var(--text);margin-bottom:1rem;line-height:0.95; text-wrap:balance; } .section-title em{color:var(--accent);font-style:normal} .section-sub{ font-size:16px;color:var(--text-mute);max-width:560px;line-height:1.65; margin-bottom:3.5rem; } /* ═══════════════════════════════════════════════════════ MARCAS ═══════════════════════════════════════════════════════ */ .marcas{padding:7rem 8vw 6rem;background:var(--bg);position:relative} .marcas-head{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;margin-bottom:3.5rem;flex-wrap:wrap} .marcas-head .section-sub{margin-bottom:0} .marcas-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--border-col); border:1px solid var(--border-col); } .marca-card{ position:relative;overflow:hidden;cursor:pointer; background:var(--bg-alt); aspect-ratio:3/4; transition:background 0.3s; } .marca-front{ position:absolute;inset:0; background-size:cover;background-position:center; transition:opacity 0.6s ease, transform 0.8s cubic-bezier(0.2,0.8,0.2,1); /* Ajuste automático al centro */ background-size: cover; /* La imagen cubre todo el contenedor */ background-position: center; /* Centrada */ background-repeat: no-repeat; /* Evita repeticiones */ } .marca-front::after{ content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.2) 50%,transparent 100%); transition:opacity 0.4s; } .marca-front-meta{ position:absolute;top:1.75rem;left:1.75rem; font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600; letter-spacing:0.35em;text-transform:uppercase; color:rgba(255,255,255,0.6);z-index:2; } .marca-front-meta::before{ content:'';display:inline-block;width:20px;height:1px;background:rgba(255,255,255,0.5); vertical-align:middle;margin-right:10px; } .marca-front-label{ position:absolute;bottom:1.75rem;left:1.75rem;right:1.75rem; font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900; letter-spacing:0.08em;color:#fff;z-index:2;line-height:1; transition:opacity 0.3s, transform 0.4s; display:flex;align-items:baseline;justify-content:space-between;gap:1rem; } .marca-front-label .plus{ font-family:'Barlow',sans-serif;font-size:18px;font-weight:300; width:36px;height:36px;border:1px solid rgba(255,255,255,0.4); display:flex;align-items:center;justify-content:center; border-radius:50%; transition:all 0.3s; } .marca-card:hover .marca-front-label .plus{ background:var(--accent);border-color:var(--accent);transform:rotate(45deg);opacity:20%; } .marca-back{ position:absolute;inset:0; background:var(--bg-dark); display:flex;align-items:flex-end;padding:1.75rem; opacity:0%; transform:translateY(20px); transition:opacity 0.5s ease, transform 0.5s ease; pointer-events:none; } .marca-back-inner{display:flex;flex-direction:column;gap:0.9rem;width:100%} .marca-back-brand{ font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700; letter-spacing:0.3em;text-transform:uppercase;color:var(--accent); } .marca-back-name{ font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:900; letter-spacing:0.08em;color:var(--on-dark);line-height:1;margin-bottom:0.25rem; } .marca-back p{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.6} html[data-theme="gold"] .marca-back p{color:var(--text-mute)} .marca-cta{ font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700; letter-spacing:0.22em;text-transform:uppercase; color:#fff;text-decoration:none; padding-top:0.9rem;margin-top:0.4rem; border-top:1px solid rgba(255,255,255,0.12); display:flex;align-items:center;justify-content:space-between; transition:color 0.2s; } .marca-cta:hover{color:var(--accent)} .marca-cta svg{width:18px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform 0.2s} .marca-cta:hover svg{transform:translateX(4px)} .marca-back { backface-visibility: hidden; pointer-events: auto; } .marca-cta { position: relative; z-index: 10; /* asegura que esté por encima */ } @media(hover:hover){ .marca-card:hover .marca-front{opacity:0;transform:scale(1.08)} .marca-card:hover .marca-back{opacity:1;transform:translateY(0);pointer-events:auto} .marca-card:hover .marca-front-label{opacity:0;transform:translateY(8px)} .marca-card:hover .marca-front-label .plus{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)} } .marca-card.is-open .marca-front{opacity:0;transform:scale(1.08)} .marca-card.is-open .marca-back{opacity:1;transform:translateY(0);pointer-events:auto} .marca-card.is-open .marca-front-label{opacity:0;transform:translateY(8px)} .marca-card.is-open .marca-front-label .plus{background:var(--accent);border-color:var(--accent);transform:rotate(45deg)} @media(max-width:900px){ .marcas-grid{grid-template-columns:repeat(2,1fr)} .marca-card{aspect-ratio:3/4} } @media(max-width:540px){ .marcas-grid{grid-template-columns:1fr} .marca-card{aspect-ratio:4/3} } /* ═══════════════════════════════════════════════════════ MODELOS DESTACADOS ═══════════════════════════════════════════════════════ */ .modelos{padding:7rem 8vw 6rem;background:var(--bg-alt)} .modelos-head{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;margin-bottom:3.5rem;flex-wrap:wrap} .modelos-head .section-sub{margin-bottom:0} .modelos-tabs{display:flex;gap:2px;flex-wrap:wrap} .modelos-tab{ font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600; letter-spacing:0.2em;text-transform:uppercase; padding:10px 18px;background:transparent; border:1px solid var(--border-col);color:var(--text-mute); cursor:pointer;transition:all 0.2s; } .modelos-tab:hover{color:var(--text);border-color:var(--text)} .modelos-tab.active{background:var(--text);color:var(--bg);border-color:var(--text)} .modelos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem} .modelo-card{ background:var(--bg); border:1px solid var(--border-col); overflow:hidden;transition:transform 0.3s, box-shadow 0.3s; display:flex;flex-direction:column; } .modelo-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,0.1)} html[data-theme="gold"] .modelo-card:hover{box-shadow:0 20px 50px rgba(0,0,0,0.5)} .modelo-img{ width:100%;aspect-ratio:4/3; background:var(--bg-alt); position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center; /* Ajuste automático al centro */ background-size: cover; /* La imagen cubre todo el contenedor */ background-position: center; /* Centrada */ background-repeat: no-repeat; /* Evita repeticiones */ } .modelo-img svg{width:85%;height:auto;max-height:80%} .modelo-badge{ position:absolute;top:14px;left:14px; background:var(--accent);color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:10px;font-weight:700;letter-spacing:0.2em; text-transform:uppercase;padding:5px 12px; } .modelo-body{padding:1.5rem 1.75rem 1.75rem;display:flex;flex-direction:column;flex:1} .modelo-marca{ font-family:'Barlow Condensed',sans-serif; font-size:11px;font-weight:600;letter-spacing:0.25em; text-transform:uppercase;color:var(--accent);margin-bottom:6px; } .modelo-nombre{ font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:800; text-transform:uppercase;letter-spacing:0.02em;color:var(--text);margin-bottom:10px; line-height:1.05; } .modelo-desc{font-size:13px;color:var(--text-mute);line-height:1.6;margin-bottom:1.25rem;flex:1} .modelo-specs{display:flex;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap} .modelo-spec{ display:flex;flex-direction:column;gap:2px; font-size:11px;color:var(--text-fade);letter-spacing:0.08em;text-transform:uppercase; } .modelo-spec strong{ font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700; color:var(--text);letter-spacing:0;text-transform:none; } .modelo-footer{ display:flex;align-items:center;justify-content:space-between; padding-top:1rem;border-top:1px solid var(--border-col);gap:1rem; } .modelo-precio-lbl{ font-size:10px;color:var(--text-fade);letter-spacing:0.15em;text-transform:uppercase; display:block;margin-bottom:2px; } .modelo-precio{ font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:600; color:var(--text);letter-spacing:0.02em; } .modelo-cta{ font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700; letter-spacing:0.22em;text-transform:uppercase; color:var(--accent);text-decoration:none; display:flex;align-items:center;gap:8px; transition:gap 0.2s; } .modelo-cta:hover{gap:12px} .modelo-cta svg{width:14px;height:8px;stroke:currentColor;fill:none;stroke-width:1.5} @media(max-width:1100px){.modelos-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.modelos-grid{grid-template-columns:1fr}} /* ═══════════════════════════════════════════════════════ CONTACTO ═══════════════════════════════════════════════════════ */ .contacto{padding:7rem 8vw 5rem;background:var(--bg);position:relative} .contacto-head{margin-bottom:4rem} .contacto-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:start} .contacto-info{display:flex;flex-direction:column;gap:0} .info-block{ padding:1.5rem 0; border-bottom:1px solid var(--border-col); display:grid;grid-template-columns:140px 1fr;gap:1.5rem;align-items:baseline; } .info-block:first-of-type{padding-top:0} .info-block h4{ font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700; letter-spacing:0.28em;text-transform:uppercase;color:var(--accent); } .info-block p{font-size:15px;color:var(--text);line-height:1.65;font-weight:300} .info-block a{color:var(--text);text-decoration:none;font-weight:500;transition:color 0.2s;border-bottom:1px solid transparent} .info-block a:hover{color:var(--accent);border-color:var(--accent)} .map-wrap{margin-top:2rem} .map-wrap iframe{width:100%;height:260px;border:0;filter:grayscale(100%) contrast(0.95)} html[data-theme="gold"] .map-wrap iframe{filter:grayscale(100%) contrast(0.9) invert(0.92) hue-rotate(180deg)} .map-link{ display:inline-flex;align-items:center;gap:8px;margin-top:1rem; font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:600; letter-spacing:0.2em;text-transform:uppercase; color:var(--accent);text-decoration:none;transition:gap 0.2s; } .map-link:hover{gap:12px} /* Form */ .form-wrap{ background:var(--bg-alt); padding:3rem 3rem 3rem; border:1px solid var(--border-col); } .form-title{ font-family:'Barlow Condensed',sans-serif; font-size:clamp(28px,3vw,38px);font-weight:900; text-transform:uppercase;letter-spacing:-0.01em; color:var(--text);margin-bottom:0.5rem;line-height:1; } .form-intro{font-size:14px;color:var(--text-mute);margin-bottom:2rem;line-height:1.6} form{display:flex;flex-direction:column;gap:1.1rem} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .form-group{display:flex;flex-direction:column;gap:8px} .form-group label{ font-family:'Barlow Condensed',sans-serif; font-size:11px;font-weight:600;letter-spacing:0.2em; text-transform:uppercase;color:var(--text-mute); } .form-group input, .form-group select, .form-group textarea{ font-family:'Barlow',sans-serif;font-size:14px;font-weight:400; color:var(--text);background:var(--bg); border:1px solid var(--border-col); padding:13px 16px;transition:border-color 0.2s, box-shadow 0.2s; outline:none;-webkit-appearance:none;appearance:none; border-radius:0; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft); } .form-group textarea{resize:vertical;min-height:110px;font-family:'Barlow',sans-serif} .form-group select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; padding-right:40px;cursor:pointer; } .form-submit{ background:var(--accent);color:#fff;border:none; padding:16px 28px; font-family:'Barlow Condensed',sans-serif; font-size:14px;font-weight:700;letter-spacing:0.22em; text-transform:uppercase;cursor:pointer; transition:background 0.2s, transform 0.15s; margin-top:0.75rem; display:flex;align-items:center;justify-content:center;gap:12px; } .form-submit:hover{background:var(--accent-hover)} .form-submit svg{width:16px;height:10px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform 0.2s} .form-submit:hover svg{transform:translateX(4px)} .form-note{font-size:12px;color:var(--text-fade);margin-top:0.5rem;line-height:1.5} .form-success{ display:none;background:var(--accent-soft); border:1px solid var(--accent);padding:1.1rem 1.4rem; font-size:14px;color:var(--accent);margin-top:1rem; } @media(max-width:900px){ .contacto-grid{grid-template-columns:1fr;gap:3rem} .info-block{grid-template-columns:1fr;gap:0.5rem} .form-row{grid-template-columns:1fr} .form-wrap{padding:2rem 1.5rem} } /* ═══════════════════════════════════════════════════════ UBICACIÓN STRIP ═══════════════════════════════════════════════════════ */ .ubicacion{padding:2.5rem 8vw;background:var(--bg-dark);color:var(--on-dark);border-top:1px solid var(--border-col)} .ubicacion-inner{display:flex;align-items:center;gap:2.5rem;flex-wrap:wrap;justify-content:space-between} .ubi-item{display:flex;align-items:center;gap:1rem} .ubi-icon{ width:42px;height:42px;border:1px solid rgba(255,255,255,0.15); display:flex;align-items:center;justify-content:center;flex-shrink:0; } .ubi-icon svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.5} .ubi-text-lbl{ font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600; letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-bottom:3px; } .ubi-text-val{font-size:14px;color:var(--on-dark);font-weight:400} .ubi-text-val a{color:inherit;text-decoration:none} @media(max-width:700px){.ubicacion-inner{gap:1.5rem}.ubi-item{width:100%}} /* ═══════════════════════════════════════════════════════ WHATSAPP FLOTANTE ═══════════════════════════════════════════════════════ */ .wa-float{ position:fixed;bottom:2rem;right:2rem;z-index:200; width:58px;height:58px;background:#25D366;border-radius:50%; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 24px rgba(37,211,102,0.42); text-decoration:none;transition:transform 0.2s, box-shadow 0.2s; } .wa-float:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(37,211,102,0.55)} .wa-float svg{width:28px;height:28px;fill:#fff} .wa-float::before{ content:'';position:absolute;inset:-4px;border-radius:50%; border:2px solid rgba(37,211,102,0.5); animation:waPulse 2.5s ease-out infinite; } @keyframes waPulse{ 0%{transform:scale(1);opacity:0.8} 100%{transform:scale(1.4);opacity:0} } /* ═══════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════ */ footer{ background:var(--bg-dark);color:rgba(255,255,255,0.5); padding:4rem 8vw 2.5rem; display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:3rem; border-top:1px solid rgba(255,255,255,0.08); } html[data-theme="gold"] footer{border-top-color:rgba(184,147,90,0.15)} .footer-brand-wrap{display:flex;flex-direction:column;gap:1.25rem} .footer-brand{ display:flex;align-items:baseline;gap:8px; } .footer-brand .logo-mark{ font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:22px; letter-spacing:0.08em;text-transform:uppercase;line-height:1;color:#fff; } .footer-brand .logo-sub{ font-family:'Barlow Condensed',sans-serif;font-weight:400;font-size:11px; letter-spacing:0.32em;text-transform:uppercase;line-height:1;color:var(--accent); } .footer-brand .logo-bar{display:inline-block;width:1px;height:14px;background:rgba(255,255,255,0.2);margin:0 4px;position:relative;top:2px} .footer-tag{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.6;max-width:320px} .footer-copy{font-size:11px;color:rgba(255,255,255,0.25);letter-spacing:0.05em;margin-top:1rem} .footer-col h5{ font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600; letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.8); margin-bottom:1.25rem; } .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.65rem} .footer-col a{ color:rgba(255,255,255,0.45);text-decoration:none;font-size:13px; transition:color 0.2s;display:inline-flex;align-items:center;gap:8px; } .footer-col a:hover{color:#fff} .footer-col a svg{width:16px;height:16px;flex-shrink:0;opacity:0.6} .footer-brand img { height: auto; /* Ajusta según el alto que quieras */ width: 50%; /* Mantiene la proporción */ max-height: 100%; /* No sobrepasa el contenedor */ object-fit: contain; /* Se asegura de que no se deforme */ } @media(max-width:800px){ footer{grid-template-columns:1fr;gap:2rem;padding:3rem 8vw 2rem} .footer-brand img { width: 50%; /* más pequeño en móviles */ } } /* ═══════════════════════════════════════════════════════ TWEAKS PANEL ═══════════════════════════════════════════════════════ */ .tweaks-panel{ position:fixed;bottom:2rem;left:2rem;z-index:300; background:#0F0F0F;color:#fff; padding:1.25rem 1.5rem; border:1px solid rgba(255,255,255,0.08); border-radius:2px; display:none;flex-direction:column;gap:1rem; min-width:280px; box-shadow:0 20px 50px rgba(0,0,0,0.5); font-family:'Barlow',sans-serif; } .tweaks-panel.open{display:flex} .tweaks-title{ font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700; letter-spacing:0.3em;text-transform:uppercase; color:rgba(255,255,255,0.5);margin-bottom:0.25rem; display:flex;align-items:center;justify-content:space-between; } .tweaks-title button{ background:none;border:none;color:rgba(255,255,255,0.4); cursor:pointer;font-size:16px;padding:0;line-height:1; } .tweaks-title button:hover{color:#fff} .tweaks-section-label{ font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600; letter-spacing:0.25em;text-transform:uppercase; color:rgba(255,255,255,0.4);margin-bottom:0.5rem; } .tweak-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .tweak-swatch{ background:none;border:1px solid rgba(255,255,255,0.1); padding:10px 8px;cursor:pointer; display:flex;flex-direction:column;gap:8px;align-items:center; transition:all 0.2s; } .tweak-swatch:hover{border-color:rgba(255,255,255,0.3)} .tweak-swatch.active{border-color:#fff} .tweak-swatch-dots{display:flex;gap:3px} .tweak-swatch-dots span{width:10px;height:10px;border-radius:50%} .tweak-swatch-label{ font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:600; letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.7); } .tweak-swatch.active .tweak-swatch-label{color:#fff}