:root { --dorado: #d7ad3c; --dorado-claro: #f0d77a; --plata: #d5d7db; --plata-oscura: #9ea3ab; --negro: #050505; --gris: #121212; --superficie: #161616; --texto: #f3f3f3; --muted: #b8b8b8; --borde: rgba(255, 255, 255, 0.08); --sombra: 0 24px 64px rgba(0, 0, 0, 0.5); --galeria-tamano: 420px; } * { box-sizing: border-box; } html { /* Color base de la raíz: sin esto, iOS Safari pinta de blanco el área detrás de la barra de direcciones, la barra inferior y el "rebote" del scroll (solo tenía fondo, y quedaba transparente). */ background-color: var(--negro); scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--dorado) var(--negro); } ::selection { background: var(--dorado); color: #111; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--negro); } ::-webkit-scrollbar-thumb { background: var(--dorado); border-radius: 999px; border: 2px solid var(--negro); } ::-webkit-scrollbar-thumb:hover { background: var(--dorado-claro); } body { margin: 0; font-family: 'Inter', sans-serif; color: var(--texto); background: radial-gradient(circle at top left, rgba(215, 173, 60, 0.14), transparent 24%), radial-gradient(circle at right center, rgba(213, 215, 219, 0.08), transparent 18%), linear-gradient(180deg, #040404 0%, #090909 40%, #141414 100%); } body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.04)); pointer-events: none; z-index: -1; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; border-radius: 4px; } .btn-delta:focus-visible, .btn-outline-delta:focus-visible { outline: 3px solid var(--dorado-claro); outline-offset: 3px; } .navbar { background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } /* Barra de progreso de scroll: vacía arriba de todo, se va llenando de izquierda a derecha a medida que se baja en la página (ver footer.php). */ .scroll-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; pointer-events: none; } .scroll-progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, var(--dorado), var(--dorado-claro)); } /* Tratamiento tipográfico de la marca: lo comparten el logo del header (.navbar-brand > .brand-text) y la marca del hero (.eyebrow .brand-text), para que el texto "DELTA 3 CONSTRUCCIONES" se vea idéntico en ambos lados. */ .navbar-brand, .eyebrow .brand-text { color: var(--dorado); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; } .navbar-brand { color: var(--dorado) !important; display: flex; align-items: center; gap: 20px; } .brand-logo { width: 112px; height: 112px; object-fit: contain; display: block; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45)); } .brand-text { display: flex; flex-direction: column; gap: 2px; } .brand-text small { color: var(--muted); letter-spacing: 0.18em; font-size: 0.56rem; font-weight: 700; } .navbar-brand:hover .brand-logo { transform: scale(1.03); transition: transform 0.2s ease; } @media (max-width: 575.98px) { .brand-logo { width: 82px; height: 82px; } .navbar-brand { gap: 14px; } } .nav-link { color: rgba(255, 255, 255, 0.82) !important; margin-left: 15px; font-weight: 600; position: relative; } .nav-link:hover, .nav-link:focus { color: #fff !important; } .nav-link::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 0; height: 2px; background: var(--dorado); transform: translateX(-50%); transition: width 0.25s ease; } .nav-link:hover::after, .nav-link:focus::after { width: 100%; } /* Resalta en el menú la sección que se está viendo mientras se scrollea (ver footer.php para el IntersectionObserver que agrega esta clase). */ .nav-link.is-activo { color: var(--dorado) !important; } .nav-link.is-activo::after { width: 100%; } .navbar-toggler { border: 1px solid rgba(215, 173, 60, 0.35); border-radius: 10px; padding: 7px 10px; } .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(215, 173, 60, 0.28); } /* -------------------------------------------------------------------- Selector de idioma (banderas) en el navbar -------------------------------------------------------------------- */ .nav-item-idioma { display: flex; align-items: center; margin-left: 15px; } .selector-idioma { position: relative; } .selector-idioma-boton { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .selector-idioma-boton:hover { border-color: rgba(215, 173, 60, 0.4); background: rgba(215, 173, 60, 0.08); } .selector-idioma-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 8px; background: #111; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } .selector-idioma-menu[hidden] { display: none; } .selector-idioma-opcion { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; background: transparent; border: none; border-radius: 8px; color: #fff; font-weight: 600; font-size: 0.9rem; text-align: left; cursor: pointer; } .selector-idioma-opcion:hover { background: rgba(215, 173, 60, 0.12); } @media (max-width: 991.98px) { .navbar-collapse { margin-top: 16px; padding-top: 16px; padding-bottom: 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .navbar-nav { gap: 4px; } .nav-link { margin-left: 0; padding: 12px 10px !important; border-radius: 10px; } .nav-link:hover, .nav-link:focus { background: rgba(215, 173, 60, 0.08); } .nav-link.is-activo { background: rgba(215, 173, 60, 0.08); } .nav-link::after { display: none; } .nav-item-idioma { margin-left: 0; margin-top: 8px; } .selector-idioma-menu { left: 0; right: auto; } } .hero { min-height: 100vh; padding: 140px 0 90px; position: relative; overflow: hidden; } .hero::before, .hero::after { content: ''; position: absolute; border-radius: 999px; filter: blur(10px); opacity: 0.65; pointer-events: none; } .hero::before { width: 320px; height: 320px; right: -80px; top: 110px; background: radial-gradient(circle, rgba(215, 173, 60, 0.26), transparent 68%); } .hero::after { width: 240px; height: 240px; left: -70px; bottom: 40px; background: radial-gradient(circle, rgba(213, 215, 219, 0.16), transparent 68%); } .hero-panel { background: linear-gradient(145deg, rgba(20, 20, 20, 0.96), rgba(7, 7, 7, 0.9)); border: 1px solid var(--borde); border-radius: 28px; box-shadow: var(--sombra); padding: 42px; position: relative; z-index: 1; overflow: hidden; } .hero-panel::after { content: ''; position: absolute; inset: auto -120px -120px auto; width: 280px; height: 280px; background: radial-gradient(circle, rgba(215, 173, 60, 0.12), transparent 70%); pointer-events: none; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 28px; align-items: center; text-align: left; } .hero-copy { max-width: 680px; } /* Fila del hero: etiqueta "Ingeniería y Construcción" + línea dorada + marca, todo en un renglón y centrado verticalmente entre sí en desktop. */ .hero-eyebrow-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; } .hero-eyebrow-row .hero-badge, .hero-eyebrow-row .eyebrow { margin-bottom: 0; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--dorado); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; font-weight: 800; margin-bottom: 18px; } .eyebrow::before { content: ''; width: 34px; height: 2px; background: var(--dorado); } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(215, 173, 60, 0.28); background: rgba(215, 173, 60, 0.08); color: #f2e4b3; font-size: 0.92rem; margin-bottom: 22px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; } .meta-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: #e8e8e8; font-size: 0.84rem; font-weight: 600; } .meta-chip i { color: var(--dorado); } .hero h1 { font-size: clamp(2.7rem, 7vw, 5.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; margin-bottom: 18px; overflow-wrap: break-word; } /* Dorado solo para la frase destacada del título: antes esto era ".hero span" (cualquier span dentro del hero), pero al sumar spans nuevos para la traducción (botones, chips, etc.) ese selector tan amplio les pintaba el texto de dorado a todos, incluido el botón dorado "Solicitar presupuesto" (texto dorado sobre fondo dorado = invisible). */ .hero h1 span.hero-titulo-dorado { color: var(--dorado); } .hero p { font-size: 1.1rem; color: var(--muted); max-width: 58ch; margin-bottom: 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .btn-delta, .btn-outline-delta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 14px; font-weight: 700; text-decoration: none; border: 1px solid transparent; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .btn-delta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--dorado), var(--dorado-claro)); color: #111; box-shadow: 0 16px 30px rgba(215, 173, 60, 0.22); } .btn-delta:hover { transform: translateY(-2px); box-shadow: 0 20px 34px rgba(215, 173, 60, 0.28); color: #111; } /* Brillo que recorre el botón al pasar el mouse. */ .btn-delta::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); pointer-events: none; } @media (hover: hover) and (pointer: fine) { .btn-delta:hover::before { animation: btn-brillo 0.85s ease; } } @keyframes btn-brillo { 100% { left: 125%; } } @media (prefers-reduced-motion: reduce) { .btn-delta:hover::before { animation: none; } } .btn-outline-delta { background: transparent; color: #fff; border-color: rgba(213, 215, 219, 0.2); } .btn-outline-delta:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.04); color: #fff; } .btn-delta:disabled, .btn-delta[disabled] { opacity: 0.85; cursor: progress; transform: none; } .btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(17, 17, 17, 0.3); border-top-color: #111; border-radius: 50%; vertical-align: -2px; animation: btn-spin 0.7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; } .stat-card { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--borde); border-radius: 20px; padding: 18px; text-align: left; } .stat-card strong { display: block; font-size: 1.5rem; color: #fff; margin-bottom: 4px; } .stat-card span { color: var(--muted); font-size: 0.95rem; } .hero-card { background: linear-gradient(160deg, rgba(215, 173, 60, 0.12), rgba(8, 8, 8, 0.94)); border: 1px solid rgba(215, 173, 60, 0.18); border-radius: 28px; padding: 30px; box-shadow: var(--sombra); position: relative; overflow: hidden; } .hero-card::before { content: ''; position: absolute; inset: auto -30px -40px auto; width: 180px; height: 180px; background: radial-gradient(circle, rgba(215, 173, 60, 0.28), transparent 70%); } .hero-card-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 0.85rem; margin-bottom: 18px; } .hero-card-mark { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; margin-bottom: 18px; background: linear-gradient(180deg, rgba(215, 173, 60, 0.16), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(215, 173, 60, 0.22); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22); } .hero-card-mark i { font-size: 2rem; color: var(--dorado); } .hero-card-clientes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .cliente-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(215, 173, 60, 0.35); color: #fff; font-weight: 700; font-size: 0.88rem; } .cliente-badge i { color: var(--dorado); font-size: 1rem; } .hero-card-list { list-style: none; padding: 0; margin: 22px 0 0; } .hero-card-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: #dbe6f8; } .hero-card-list li:last-child { border-bottom: none; padding-bottom: 0; } .hero-card-list i { color: var(--dorado); font-size: 1.1rem; margin-top: 2px; } section { padding: 100px 0; } .titulo { text-align: center; margin-bottom: 56px; } .titulo .section-kicker { justify-content: center; } .titulo h2 { color: #fff; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; margin-bottom: 12px; } .titulo p { color: var(--muted); max-width: 700px; margin: 0 auto; } .servicio { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)); border: 1px solid var(--borde); padding: 28px; border-radius: 22px; text-align: left; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; height: 100%; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16); position: relative; overflow: hidden; } .servicio:hover { transform: translateY(-8px); border-color: rgba(215, 173, 60, 0.25); box-shadow: 0 24px 52px rgba(0, 0, 0, 0.24); } .servicio::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--dorado), var(--plata)); opacity: 0.75; } .servicio .icono { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(215, 173, 60, 0.12); color: var(--dorado); margin-bottom: 18px; font-size: 1.3rem; } .servicio h4 { color: #fff; font-weight: 700; margin-bottom: 10px; } .servicio p { color: var(--muted); margin-bottom: 0; } .seccion-suave { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)); border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .nosotros-box { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)); border: 1px solid var(--borde); border-radius: 26px; padding: 32px; box-shadow: var(--sombra); } .nosotros-lista { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; } .nosotros-lista li { display: flex; align-items: flex-start; gap: 12px; color: #dbe6f8; } .nosotros-lista i { color: var(--dorado); font-size: 1.1rem; margin-top: 3px; } .metricas { display: grid; grid-template-rows: repeat(2, 1fr); gap: 18px; height: 100%; } .metrica { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--borde); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; justify-content: center; } .metrica strong { display: block; color: var(--dorado); font-size: 2rem; line-height: 1; margin-bottom: 6px; } .metrica span { color: var(--muted); } /* Contiene la sección de galería a un ancho de lectura cómodo: sin esto, en pantallas grandes el .container de Bootstrap se expande mucho más que las fotos (que tienen su propio tope vía --galeria-tamano), dejando huecos enormes entre columnas. */ #galeria .container { max-width: 1100px; } /* Grilla flexible: la cantidad de fotos por fila surge sola según el ancho configurado (--galeria-tamano), en vez de forzar una cantidad fija de columnas Bootstrap. Así, si el tamaño configurado no entra más en una grilla de 3 columnas, la propia grilla pasa a 2 o a 1 en vez de recortar la foto contra un ancho de columna que ya no le alcanza. */ .galeria-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } /* Único lugar donde se resuelve el tamaño: ancho exacto según --galeria-tamano, capado al 100% del contenedor (nunca desborda en mobile). Las fotos de adentro simplemente ocupan el 100% de esto, sin volver a calcular nada. */ .galeria-grid-item { width: min(100%, calc(var(--galeria-tamano) * 4 / 3)); } .galeria-ver-completa { text-align: center; margin-top: 32px; } .pagina-galeria-completa { padding: 140px 0 90px; } .pagina-galeria-completa .container { max-width: 1400px; } .enlace-dorado { display: inline-flex; align-items: center; gap: 8px; color: var(--dorado); font-weight: 600; text-decoration: none; transition: color 0.15s ease, gap 0.15s ease; } .enlace-dorado:hover { color: var(--dorado-claro); gap: 12px; } .volver-inicio { margin-bottom: 24px; } .galeria-item { position: relative; } /* Badge que abre el lightbox con las fotos adicionales del proyecto (solo se imprime en el HTML si el proyecto tiene alguna cargada). Es un