|
|
@@ -28,7 +28,7 @@
|
|
|
{
|
|
|
name: 'Fontanería y Plomería',
|
|
|
description: 'Instalación y reparación de tuberías de agua, tanques de presión, griferías, inodoros, duchas y sistemas hidráulicos completos para proyectos residenciales y comerciales.',
|
|
|
- icon: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="#C8A832" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 32c0 2.2 1.8 4 4 4s4-1.8 4-4c0-4-4-8-4-8s-4 4-4 8z"/><path d="M16 28l8-8M20 20l4-10 6 6-10 4z"/><path d="M24 10l2-6M30 16l6-2"/></svg>`,
|
|
|
+ icon: `<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#C8A832" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v6M6 8h12v3a6 6 0 0 1-12 0V8z"/><path d="M6 10H4M20 10h-2"/><path d="M12 17v5"/><path d="M8 22h8"/></svg>`,
|
|
|
image: '/gallery/4.jpg'
|
|
|
},
|
|
|
{
|
|
|
@@ -259,6 +259,39 @@
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
+<!-- VIDEOS -->
|
|
|
+<section class="videos-section py-14 sm:py-24">
|
|
|
+ <div class="section-container">
|
|
|
+ <div class="section-header reveal">
|
|
|
+ <span class="section-eyebrow">Proyectos en acción</span>
|
|
|
+ <h2 class="section-title">Videos de Obra</h2>
|
|
|
+ <p class="section-sub">Vea de primera mano el avance de nuestros proyectos de construcción en Guanacaste.</p>
|
|
|
+ </div>
|
|
|
+ <div class="videos-grid reveal">
|
|
|
+ {#each [
|
|
|
+ { src: '/videos/proyecto-residencial.mp4', poster: '/videos/poster-proyecto-residencial.jpg', label: 'Desarrollo residencial' },
|
|
|
+ { src: '/videos/cimentacion.mp4', poster: '/videos/poster-cimentacion.jpg', label: 'Cimentación y armado' },
|
|
|
+ { src: '/videos/obra-gris.mp4', poster: '/videos/poster-obra-gris.jpg', label: 'Obra gris en progreso' },
|
|
|
+ { src: '/videos/estructura.mp4', poster: '/videos/poster-estructura.jpg', label: 'Estructura y plomería' },
|
|
|
+ ] as vid}
|
|
|
+ <div class="video-item">
|
|
|
+ <video
|
|
|
+ src={vid.src}
|
|
|
+ poster={vid.poster}
|
|
|
+ controls
|
|
|
+ muted
|
|
|
+ preload="none"
|
|
|
+ playsinline
|
|
|
+ >
|
|
|
+ <track kind="captions" />
|
|
|
+ </video>
|
|
|
+ <div class="video-label">{vid.label}</div>
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
<!-- CONTACT -->
|
|
|
<section id="contacto" class="contact-section py-14 sm:py-24">
|
|
|
<div class="section-container">
|
|
|
@@ -280,7 +313,7 @@
|
|
|
</div>
|
|
|
<div class="contact-card">
|
|
|
<div class="contact-card-icon">
|
|
|
- <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="#C8A832" stroke-width="1.5" stroke-linecap="round"><path d="M7.5 3C7 5.5 5 8 5 10s2 4.5 2.5 7l3-2c.5-1.5 0-3-.5-4l2-2c1 .5 2.5 1 4 .5l2-3C16 5 13.5 3 11 3l-3.5 0z"/></svg>
|
|
|
+ <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#C8A832" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h4 class="contact-card-label">Teléfono</h4>
|
|
|
@@ -1074,6 +1107,53 @@
|
|
|
letter-spacing: 0.04em;
|
|
|
}
|
|
|
|
|
|
+ /* VIDEOS */
|
|
|
+ .videos-section {
|
|
|
+ background: #0D0D0D;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .videos-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 0.75rem;
|
|
|
+ }
|
|
|
+ @media (min-width: 640px) {
|
|
|
+ .videos-grid {
|
|
|
+ max-width: 800px;
|
|
|
+ margin: 0 auto;
|
|
|
+ gap: 1.25rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .video-item {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid rgba(200, 168, 50, 0.15);
|
|
|
+ overflow: hidden;
|
|
|
+ background: #111111;
|
|
|
+ }
|
|
|
+ .video-item video {
|
|
|
+ width: 100%;
|
|
|
+ aspect-ratio: 9 / 16;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+ background: #0A0A0A;
|
|
|
+ }
|
|
|
+ .video-label {
|
|
|
+ font-family: 'Montserrat', sans-serif;
|
|
|
+ font-size: 0.72rem;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #C8A832;
|
|
|
+ letter-spacing: 0.04em;
|
|
|
+ padding: 0.5rem 0.75rem;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ @media (min-width: 640px) {
|
|
|
+ .video-label {
|
|
|
+ font-size: 0.82rem;
|
|
|
+ padding: 0.6rem 1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
/* CONTACT */
|
|
|
.contact-section {
|
|
|
background: #0D0D0D;
|
|
|
@@ -1164,20 +1244,40 @@
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
.footer-top {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr;
|
|
|
- gap: 2rem;
|
|
|
- margin-bottom: 2.5rem;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ gap: 1.5rem;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ }
|
|
|
+ @media (min-width: 640px) {
|
|
|
+ .footer-top {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1.5fr 1fr 1fr;
|
|
|
+ text-align: left;
|
|
|
+ align-items: start;
|
|
|
+ gap: 2rem;
|
|
|
+ margin-bottom: 2.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-brand {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
@media (min-width: 640px) {
|
|
|
- .footer-top { grid-template-columns: 1.5fr 1fr 1fr; }
|
|
|
+ .footer-brand { align-items: flex-start; }
|
|
|
}
|
|
|
.footer-logo {
|
|
|
- height: 60px;
|
|
|
+ height: 50px;
|
|
|
width: auto;
|
|
|
- margin-bottom: 1rem;
|
|
|
+ margin-bottom: 0.75rem;
|
|
|
filter: drop-shadow(0 0 8px rgba(200,168,50,0.3));
|
|
|
}
|
|
|
+ @media (min-width: 640px) {
|
|
|
+ .footer-logo { height: 60px; margin-bottom: 1rem; }
|
|
|
+ }
|
|
|
.footer-tagline {
|
|
|
font-family: 'Montserrat', sans-serif;
|
|
|
font-size: 0.82rem;
|
|
|
@@ -1194,12 +1294,18 @@
|
|
|
letter-spacing: 0.2em;
|
|
|
text-transform: uppercase;
|
|
|
color: #C8A832;
|
|
|
- margin: 0 0 1rem;
|
|
|
+ margin: 0 0 0.6rem;
|
|
|
+ }
|
|
|
+ @media (min-width: 640px) {
|
|
|
+ .footer-col-title { margin: 0 0 1rem; }
|
|
|
}
|
|
|
.footer-links-col {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 0.6rem;
|
|
|
+ gap: 0.4rem;
|
|
|
+ }
|
|
|
+ @media (min-width: 640px) {
|
|
|
+ .footer-links-col { gap: 0.6rem; }
|
|
|
}
|
|
|
.footer-link {
|
|
|
font-family: 'Montserrat', sans-serif;
|
AusPrinzip
