/* Nota: variables.css se enlaza ANTES que este archivo en el del HTML (no se usa @import para no bloquear el render). */ /* ============================================================ RESET BÁSICO ============================================================ */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1,h2,h3,p,ul{ margin:0; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } button{ font-family: inherit; cursor:pointer; } ul{ list-style:none; padding:0; } /* Respeta preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ HEADER / NAV ============================================================ */ .site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); display:flex; align-items:center; justify-content:space-between; padding: var(--space-sm) var(--gutter); background: linear-gradient(180deg, rgba(3,4,94,0.55) 0%, rgba(3,4,94,0) 100%); transition: background var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease); } .site-header.is-scrolled{ background: var(--navy-900); box-shadow: 0 2px 24px rgba(3,4,94,0.25); padding-top: 10px; padding-bottom: 10px; } .brand{ display:flex; align-items:center; gap: 12px; } .brand img{ height: 44px; width:auto; } .brand-name{ font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); } .main-nav{ display:flex; align-items:center; gap: var(--space-md); } .main-nav > ul{ display:flex; gap: 30px; } .main-nav a{ position:relative; font-size: 0.92rem; font-weight:500; letter-spacing:0.02em; color: var(--blue-100); padding: 6px 0; } .main-nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0%; height:1px; background: var(--blue-400); transition: width var(--dur-fast) var(--ease); } .main-nav a:hover{ color: var(--white); } .main-nav a:hover::after{ width:100%; } .main-nav a:focus-visible{ outline: 2px solid var(--blue-400); outline-offset: 4px; } /* Dropdown "Módulos" */ .nav-dropdown{ position:relative; } .nav-dropdown-btn{ display:flex; align-items:center; gap:4px; background:none; border:none; font-family:inherit; font-size: 0.92rem; font-weight:500; letter-spacing:0.02em; color: var(--blue-100); padding: 6px 0; } .nav-dropdown-btn::after{ content:"▾"; font-size:0.6em; } .nav-dropdown-btn:hover, .nav-dropdown.is-open .nav-dropdown-btn{ color: var(--white); } .main-nav .nav-dropdown-menu{ list-style:none; margin:0; padding:0; display:none; flex-direction:column; } .nav-dropdown.is-open .nav-dropdown-menu{ display:flex; } .nav-dropdown-menu a{ display:block; font-size: 0.85rem; color: var(--blue-100); padding: 8px 0; white-space:nowrap; } .nav-dropdown-menu a:hover{ color: var(--white); } @media (min-width: 761px){ .nav-dropdown-menu{ position:absolute; top: calc(100% + 14px); left:50%; transform: translateX(-50%); min-width:180px; background: var(--navy-900); border: 1px solid rgba(202,240,248,0.25); padding: 8px 0; gap:0; box-shadow: 0 12px 24px rgba(3,4,94,0.3); } .nav-dropdown-menu a{ padding: 10px 20px; } } .btn-whatsapp{ display:flex; align-items:center; gap:8px; border: 1px solid var(--blue-400); color: var(--white); padding: 10px 20px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .btn-whatsapp:hover{ background: var(--blue-500); border-color: var(--blue-500); } .btn-whatsapp img{ height:18px; width:18px; } /* Botón hamburguesa (solo mobile) */ .nav-toggle{ display:none; background:none; border:none; width: 32px; height: 24px; position:relative; z-index: var(--z-nav); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; left:0; width:100%; height:2px; background: var(--white); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .nav-toggle span{ top:11px; } .nav-toggle span::before{ top:-9px; } .nav-toggle span::after{ top:9px; } .nav-toggle.is-active span{ background: transparent; } .nav-toggle.is-active span::before{ transform: translateY(9px) rotate(45deg); } .nav-toggle.is-active span::after{ transform: translateY(-9px) rotate(-45deg); } /* ============================================================ HERO — PRIMERA VISTA ============================================================ */ .hero{ position: relative; min-height: 100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; background: var(--navy-900); } .hero-bg{ position:absolute; inset:0; overflow:hidden; } .hero-bg::after{ content:""; position:absolute; inset:0; z-index:1; background-image: linear-gradient(180deg, rgba(3,4,94,0.24) 0%, rgba(2,62,138,0.12) 45%, rgba(3,4,94,0.4) 100%); } /* Slideshow de fondo — 4 imágenes con crossfade */ .hero-bg-slide{ position:absolute; inset:0; background-size: cover; background-position: center; opacity:0; transition: opacity 1.8s ease; will-change: opacity; } .hero-bg-slide.is-active{ opacity:1; } .hero-bg-slide:nth-child(1){ background-image: url('../img/1-fondo.webp'); } .hero-bg-slide:nth-child(2){ background-image: url('../img/2-fondo.webp'); } .hero-bg-slide:nth-child(3){ background-image: url('../img/3-fondo.webp'); } .hero-bg-slide:nth-child(4){ background-image: url('../img/4-fondo.webp'); } /* Escuadras técnicas — guiño a los planos de obra */ .blueprint-corner{ position:absolute; width: 42px; height: 42px; border-color: var(--blue-300); opacity: 0.55; z-index: 2; } .blueprint-corner--tl{ top: 100px; left: var(--gutter); border-top:1px solid; border-left:1px solid; } .blueprint-corner--br{ bottom: 56px; right: var(--gutter); border-bottom:1px solid; border-right:1px solid; } .hero-content{ position: relative; z-index: 3; padding: 0 var(--gutter); max-width: 900px; } .eyebrow{ font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--blue-300); text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: var(--space-sm); opacity:0; transform: translateY(14px); animation: reveal-up var(--dur-med) var(--ease) 0.15s forwards; } .eyebrow::before{ content:"— "; color: var(--blue-500); } .hero-content h1{ font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: 1.02; color: var(--white); letter-spacing: -0.01em; opacity:0; transform: translateY(18px); animation: reveal-up var(--dur-med) var(--ease) 0.32s forwards; } /* Línea "engrafada": firma visual de la marca. Representa el sistema de unión engrafado de los paneles: se "cierra" con una animación al cargar la página. */ .seam-line{ width: 100%; max-width: 420px; margin: var(--space-md) 0; opacity:0; animation: reveal-up var(--dur-med) var(--ease) 0.5s forwards; } .seam-line svg{ width:100%; height:auto; overflow:visible; } .seam-line path{ stroke: var(--blue-400); stroke-width: 2; fill:none; stroke-dasharray: 520; stroke-dashoffset: 520; animation: draw-seam 1.4s var(--ease) 0.9s forwards; } .hero-lead{ font-size: var(--fs-lead); color: var(--blue-100); max-width: 560px; margin-bottom: var(--space-md); opacity:0; transform: translateY(18px); animation: reveal-up var(--dur-med) var(--ease) 0.62s forwards; text-shadow: 0 1px 12px rgba(3,4,94,0.85), 0 1px 3px rgba(3,4,94,0.9); } .hero-actions{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); opacity:0; transform: translateY(18px); animation: reveal-up var(--dur-med) var(--ease) 0.78s forwards; } .btn{ display: inline-block; max-width: 100%; box-sizing: border-box; white-space: normal; padding: 16px 32px; border-radius: var(--radius-sm); border: none; background: transparent; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .btn-primary{ background: var(--blue-500); color: var(--navy-900); border: 2px solid var(--blue-200); } .btn-primary:hover{ background: var(--blue-400); box-shadow: 0 8px 28px rgba(0,180,216,0.35); transform: translateY(-2px); } .btn-secondary{ border: 1px solid var(--blue-200); color: var(--white); } .btn-secondary:hover{ background: rgba(255,255,255,0.08); transform: translateY(-2px); } .btn-tertiary{ color: var(--blue-100); text-decoration: underline; text-underline-offset: 4px; padding: 16px 8px; } .btn-tertiary:hover{ color: var(--white); transform: translateY(-2px); } .btn:focus-visible{ outline: 2px solid var(--blue-300); outline-offset: 3px; } /* --- Barra de especificaciones (ficha técnica del servicio) --- */ .spec-bar{ position: relative; z-index: 3; display:flex; flex-wrap: wrap; border-top: 1px solid rgba(202,240,248,0.22); opacity:0; animation: reveal-up var(--dur-med) var(--ease) 0.95s forwards; } .spec-item{ display:flex; align-items:center; gap: 10px; flex: 1 1 0; min-width: 0; padding: 18px clamp(12px, 2vw, 28px); border-right: 1px solid rgba(202,240,248,0.22); } .spec-item:last-child{ border-right:none; } .spec-item img{ height: 22px; width: 22px; flex-shrink:0; filter: invert(1); } .spec-text{ display:flex; flex-direction:column; } .spec-label{ font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-300); } .spec-value{ font-size: 0.92rem; font-weight: 600; color: var(--white); } /* --- Indicador de scroll --- */ .scroll-cue{ position:absolute; bottom: 130px; right: var(--gutter); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation: reveal-up var(--dur-med) var(--ease) 1.1s forwards; } .scroll-cue span{ font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.18em; color: var(--blue-300); writing-mode: vertical-rl; text-transform: uppercase; } .scroll-cue .line{ width:1px; height: 40px; background: var(--blue-300); position:relative; overflow:hidden; } .scroll-cue .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--white); animation: scroll-drip 1.8s ease-in-out infinite; } /* ============================================================ ANIMACIONES ============================================================ */ @keyframes reveal-up{ to{ opacity:1; transform: translateY(0); } } @keyframes draw-seam{ to{ stroke-dashoffset: 0; } } @keyframes scroll-drip{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } } /* Clase genérica para animar elementos al entrar en viewport (scroll), controlada por assets/js/main.js con IntersectionObserver. Se usará en las próximas secciones. */ .reveal{ opacity:0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.is-visible{ opacity:1; transform: translateY(0); } /* ============================================================ BOTÓN FLOTANTE DE WHATSAPP ============================================================ */ .whatsapp-float{ position: fixed; right: 24px; bottom: 24px; z-index: var(--z-nav); width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; background: #25D366; border: 1px solid #25D366; border-radius: 50%; box-shadow: 0 8px 24px rgba(3,4,94,0.35); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .whatsapp-float:hover{ background: #1ebe5a; transform: translateY(-3px); } .whatsapp-float img{ width: 30px; height: 30px; filter: brightness(0) invert(1); } .whatsapp-float:focus-visible{ outline: 2px solid var(--blue-300); outline-offset: 3px; } @media (max-width: 760px){ .whatsapp-float{ right: 16px; bottom: 16px; width: 64px; height: 64px; } .whatsapp-float img{ width: 36px; height: 36px; } } /* ============================================================ MODAL — Cotizar mi proyecto ============================================================ */ body.modal-open{ overflow:hidden; } .modal-overlay{ position: fixed; inset: 0; z-index: 200; display:flex; align-items:center; justify-content:center; padding: var(--space-sm); background: rgba(3,4,94,0.7); backdrop-filter: blur(2px); } .modal-overlay[hidden]{ display:none; } .modal-box{ position:relative; width:100%; max-width: 640px; max-height: 90vh; overflow-y: auto; background: var(--navy-900); border: 1px solid rgba(202,240,248,0.25); } .modal-box .contacto-form{ border:0; background: transparent; padding: var(--space-md); } .modal-close{ position: sticky; top: 0; float: right; width: 36px; height: 36px; margin: 10px 10px 0 0; display:flex; align-items:center; justify-content:center; color: var(--white); background: rgba(255,255,255,0.06); border: 1px solid rgba(202,240,248,0.3); font-size: 1.4rem; line-height:1; z-index: 1; } .modal-close:hover{ background: rgba(255,255,255,0.14); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px){ .main-nav > ul{ gap: 20px; } } @media (max-width: 760px){ .main-nav > ul{ position: fixed; inset: 0; z-index: var(--z-nav); background: linear-gradient(rgba(0,119,182,0.55), rgba(0,119,182,0.55)), url('../img/fondo-logo.webp'); background-size: cover; background-position: center; backdrop-filter: blur(6px); flex-direction: column; justify-content:center; align-items:center; gap: var(--space-md); transform: translateX(100%); transition: transform var(--dur-med) var(--ease); } .main-nav > ul.is-open{ transform: translateX(0); } .main-nav a{ font-size: 1.2rem; } .nav-dropdown{ display:flex; flex-direction:column; align-items:center; } .nav-dropdown-btn{ font-size: 1.2rem; } .nav-dropdown-menu{ align-items:center; gap: var(--space-sm); margin-top: var(--space-sm); } .nav-dropdown-menu a{ font-size: 1rem; } .nav-toggle{ display:block; } .btn-whatsapp{ display:none; } /* oculto en mobile, queda el flotante */ .hero-content{ padding-top: 90px; } .blueprint-corner{ display:none; } .scroll-cue{ display:none; } .spec-bar{ flex-direction: column; } .spec-item{ align-items: flex-start; padding: 10px 24px; border-right:none; border-bottom: 1px solid rgba(202,240,248,0.22); } .spec-item:last-child{ border-bottom:none; } .spec-item img{ margin-top: 2px; } .spec-value{ line-height: 1.3; } } @media (max-width: 480px){ .spec-item{ padding: 8px 20px; gap: 12px; } .spec-item img{ height: 22px; width: 22px; } .spec-value{ font-size: 0.86rem; } } @media (max-width: 420px){ .hero-actions{ flex-direction: column; } .btn{ text-align:center; } }