/* COMBO 2 – Oswald (títulos) + Open Sans (cuerpo)
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Oswald:wght@500;600;700&display=swap");
*/
/* COMBO 3 – Raleway (títulos) + Lato (cuerpo)
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700&family=Raleway:wght@600;700;800&display=swap");
*/
/* COMBO 4 – Playfair Display (títulos) + Inter (cuerpo)
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap");
*/
/* COMBO 5 – Poppins (títulos) + Nunito Sans (cuerpo)
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap");
*/
/* COMBO 6 – DM Sans (una sola familia, uniforme)
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap");
*/
/* COMBO 7 – Montserrat (títulos) + Source Sans 3 (cuerpo)
Cargada vía + en el
de index.html / proyectos.html (más rápido que @import, que bloquea en serie). */
:root {
--brand: #f67600;
--brand2: #ffb26b;
--dark: #111111; /* antes: #494441 */
--body: #516171;
--black: #111111;
--border: rgba(0, 0, 0, 0.08);
--shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}
body {
/* font-family: "Open Sans", sans-serif; */ /* COMBO 2 */
/* font-family: "Lato", sans-serif; */ /* COMBO 3 */
/* font-family: "Inter", sans-serif; */ /* COMBO 4 */
/* font-family: "Nunito Sans", sans-serif; */ /* COMBO 5 */
/* font-family: "DM Sans", sans-serif; */ /* COMBO 6 */
font-family: "Source Sans 3", sans-serif;
color: var(--body);
line-height: 1.7;
}
h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
/* font-family: "Oswald", sans-serif; */ /* COMBO 2 */
/* font-family: "Raleway", sans-serif; */ /* COMBO 3 */
/* font-family: "Playfair Display", serif; */ /* COMBO 4 */
/* font-family: "Poppins", sans-serif; */ /* COMBO 5 */
/* font-family: "DM Sans", sans-serif; */ /* COMBO 6 */
font-family: "Montserrat", sans-serif;
font-weight: 700;
color: var(--dark);
}
.bg-cover {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
img {
width: 100%;
}
a {
color: var(--dark);
transition: all 0.4s ease;
font-weight: 500;
}
a:hover {
color: var(--brand);
}
section {
padding-top: 80px;
padding-bottom: 80px;
}
.text-brand {
color: var(--brand) !important;
}
/* navbar */
.top-nav {
background-color: var(--black); /* antes: var(--brand) */
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
}
.top-nav p {
display: inline-block;
margin-bottom: 0;
margin-right: 10px;
}
.top-nav span,
.top-nav i {
vertical-align: middle;
color: rgba(255, 255, 255, 0.7); /* antes: var(--body) */
}
.navbar {
box-shadow: var(--shadow);
}
.social-icons a {
width: 28px;
height: 28px;
display: inline-flex;
color: #fff;
background-color: rgba(255, 255, 255, 0.25);
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 100px;
}
.social-icons a:hover {
background-color: var(--brand);
color: #fff;
}
.navbar .navbar-nav .nav-link {
color: var(--dark);
}
.navbar .navbar-nav .nav-link:hover {
color: var(--brand);
}
.navbar .navbar-nav .nav-link.active {
color: var(--brand);
}
.navbar-brand {
font-size: 28px;
font-weight: 700;
}
.logo {
width: 125px;
}
.btn {
padding: 8px 26px;
}
.btn-brand {
border-color: var(--brand);
background-color: var(--brand);
color: #fff;
}
.btn-brand:hover {
background-color: #f8692d;
border-color: #f8692d;
color: #fff;
}
.intro {
margin-bottom: 36px;
text-align: center;
}
.intro p {
max-width: 500px;
}
.intro h6 {
color: var(--brand);
font-weight: 400;
text-transform: uppercase;
}
.intro h1 {
margin-top: 15px;
margin-bottom: 15px;
}
.info-box {
align-items: center;
display: flex;
}
.info-box img {
width: 54px;
height: 54px;
object-fit: contain;
}
#milestone {
background: linear-gradient(rgba(248, 105, 45, 0.5), rgba(248, 105, 45, 0.5)),
url(../img/banner3.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#milestone h1,
#milestone p {
color: #fff;
}
.service {
padding: 32px;
background-color: #fff;
box-shadow: var(--shadow);
}
.service h5 {
margin-top: 24px;
margin-bottom: 14px;
}
.service img {
width: 90px;
}
.project {
position: relative;
overflow: hidden;
z-index: 2;
}
.project h6 {
font-weight: 400;
}
.project h6::before {
content: "";
height: 2px;
width: 30px;
display: inline-block;
background: var(--brand);
vertical-align: middle;
margin-right: 10px;
}
.project .overlay {
width: 100%;
height: 220px;
position: absolute;
bottom: 0;
left: 0;
background: linear-gradient(
180deg,
rgba(255, 76, 41, 0) 0%,
var(--dark) 100%
);
}
.project .content {
position: absolute;
left: 10%;
bottom: 10%;
}
.project h2,
.project h6 {
color: #fff;
}
.team-member {
text-align: center;
}
.team-member .image {
position: relative;
z-index: 2;
overflow: hidden;
}
.team-member .overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: -10%;
background-color: rgba(248, 105, 45, 0.7);
opacity: 0;
transition: all 0.4s ease;
}
.team-member h5 {
margin-top: 16px;
margin-bottom: 4px;
}
.team-member .social-icons {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 0;
transition: all 0.4s ease;
}
.team-member .social-icons a {
width: 40px;
height: 40px;
}
.team-member:hover .social-icons {
top: 50%;
opacity: 1;
}
.team-member:hover .overlay {
top: 0%;
opacity: 1;
}
#reviews {
background: linear-gradient(
-90deg,
rgba(8, 32, 50, 0.8),
rgba(8, 32, 50, 0.8)
),
url(../img/banner4.jpg), #082032;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.review {
text-align: center;
z-index: 2;
position: relative;
margin: 15px;
max-width: 768px;
margin: auto;
}
.review .bxs-quote-alt-left {
font-size: 120px;
position: absolute;
opacity: 0.1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.review img {
width: 80px !important;
height: 80px;
border-radius: 100px;
margin: auto;
}
.review h5 {
margin-top: 16px;
margin-bottom: 4px;
color: #fff;
}
.review h3 {
margin-top: 26px;
margin-bottom: 26px;
font-size: 22px;
color: #fff;
font-weight: 400;
line-height: 1.7;
}
.review small {
color: var(--brand);
}
.review .stars {
color: var(--brand);
}
.blog-post {
position: relative;
background-color: #fff;
box-shadow: var(--shadow);
}
.blog-post .content {
padding: 32px;
}
.blog-post a {
position: absolute;
top: 20px;
left: 20px;
background-color: var(--brand);
padding: 2px 12px;
border-radius: 100px;
text-decoration: none;
color: #fff;
}
.blog-post h5 {
margin-top: 12px;
margin-bottom: 12px;
}
.blog-post small {
text-transform: uppercase;
color: var(--brand);
text-decoration: underline;
}
footer {
background: linear-gradient(0deg, rgba(8, 32, 50, 0.7), rgba(8, 32, 50, 0.9)),
url(../img/banner2.webp), #082032;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
footer .footer-top {
padding-top: 80px;
padding-bottom: 40px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 20px;
padding-top: 20px;
}
footer .navbar-brand {
color: #fff;
}
footer p {
color: #adb3b9;
}
footer .social-icons a {
width: 50px;
height: 50px;
font-size: 20px;
margin-left: 4px;
margin-right: 4px;
}
.loader {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: red;
z-index: 99999;
position: fixed;
left: 0;
right: 0;
}
input.form-control {
border-color: transparent;
height: 44px;
}
.form-control {
background-color: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.04);
}
.form-control:focus {
box-shadow: none;
border-color: var(--brand);
}
/* Modal */
.exampleModal .close {
margin-right: 0px;
}
/* ============================================
/* ============================================================
MEJORAS PREMIUM V4
============================================================ */
/* ── TOP LINK ── */
.top-link { color:#fff; text-decoration:none; font-size:.82rem; display:inline-flex; align-items:center; gap:5px; transition:opacity .2s; }
.top-link:hover { opacity:.75; color:#fff; }
/* ── NAVBAR ── */
.navbar { border-bottom: 2px solid var(--brand); transition: box-shadow .3s; }
.navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.13); }
@media (max-width:991px) {
.navbar-collapse { border-top:1px solid rgba(0,0,0,.06); padding:10px 0; }
.navbar-nav .nav-link { padding:8px 0; }
.navbar-nav .btn { width:100%; text-align:center; margin-top:10px; }
}
/* ══════════════════════════════════════
HERO VIDEO
══════════════════════════════════════ */
.hero-video-wrap { position:relative; width:100%; height:100vh; min-height:560px; overflow:hidden; background:#0d1b2a; }
.hero-video-item { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
.hero-video-item.active { opacity:1; }
.hero-video-item video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-video-overlay { position:absolute; inset:0; background:linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.1) 100%); }
.hero-slides-content { position:absolute; inset:0; display:flex; align-items:center; }
.hero-slide-content { position:absolute; inset:0; display:flex; align-items:center; opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; pointer-events:none; }
.hero-slide-content.active { opacity:1; transform:none; pointer-events:auto; }
.hero-slide-content .container { position:relative; z-index:2; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:.5rem; background:rgba(246,118,0,.2); border:1px solid rgba(246,118,0,.4); color:var(--brand); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.35rem 1rem; border-radius:100px; margin-bottom:1.25rem; }
.hero-title { font-size:clamp(2rem,5.5vw,4rem); font-weight:800; color:#fff; line-height:1.1; margin-bottom:1rem; }
.hero-sub { font-size:1rem; color:rgba(255,255,255,.72); max-width:480px; line-height:1.65; margin-bottom:1.75rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-nav { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; gap:.5rem; z-index:10; }
.hero-dot { width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,.5); background:transparent; cursor:pointer; transition:all .25s; padding:0; }
.hero-dot.active { background:var(--brand); border-color:var(--brand); width:28px; border-radius:5px; }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px); color:#fff; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; z-index:10; transition:all .2s; }
.hero-arrow:hover { background:var(--brand); border-color:var(--brand); }
.hero-prev { left:1.5rem; } .hero-next { right:1.5rem; }
@media (max-width:767px) { .hero-video-wrap { min-height:80vh; } .hero-title { font-size:1.8rem; } .hero-arrow { display:none; } }
/* ══════════════════════════════════════
SCROLL ANIMATIONS
══════════════════════════════════════ */
.fade-up { opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease; }
.fade-left { opacity:0; transform:translateX(-40px); transition:opacity .7s ease, transform .7s ease; }
.fade-right { opacity:0; transform:translateX(40px); transition:opacity .7s ease, transform .7s ease; }
.scale-in { opacity:0; transform:scale(.92); transition:opacity .6s ease, transform .6s ease; }
.stagger-item { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible, .fade-left.visible, .fade-right.visible, .scale-in.visible, .stagger-item.visible { opacity:1; transform:none; }
/* ══════════════════════════════════════
ABOUT (mejorado)
══════════════════════════════════════ */
#about img { width:100%; border-radius:10px; display:block; box-shadow:0 16px 48px rgba(0,0,0,.12); }
.info-box { display:flex; align-items:flex-start; padding:1.1rem; border-radius:8px; transition:background .25s, transform .25s; }
.info-box:hover { background:rgba(246,118,0,.06); transform:translateX(4px); }
.info-box img { flex-shrink:0; }
/* ══════════════════════════════════════
SERVICES – premium cards con imagen
══════════════════════════════════════ */
.service-v2 {
position:relative; border-radius:12px; overflow:hidden;
background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.07);
transition:transform .35s ease, box-shadow .35s ease;
cursor:default;
}
.service-v2:hover { transform:translateY(-8px); box-shadow:0 20px 48px rgba(0,0,0,.13); }
.service-v2 .svc-img { width:100%; height:190px; object-fit:cover; display:block; }
.service-v2 .svc-body { padding:1.5rem; }
.service-v2 .svc-icon { width:48px; height:48px; background:var(--brand); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; margin-top:-2.5rem; position:relative; box-shadow:0 6px 16px rgba(246,118,0,.35); }
.service-v2 .svc-icon img { width:26px; filter:brightness(0) invert(1); }
.service-v2 h5 { font-size:1rem; font-weight:700; color:var(--dark); margin-bottom:.5rem; }
.service-v2 p { font-size:.87rem; color:var(--body); line-height:1.65; margin:0; }
.svc-bar { height:3px; background:linear-gradient(90deg,var(--brand),transparent); border-radius:0 0 0 12px; transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
.service-v2:hover .svc-bar { transform:scaleX(1); }
/* ══════════════════════════════════════
PORTFOLIO
══════════════════════════════════════ */
#portfolio { background:#f4f5f7; padding-bottom:1rem; }
.portfolio-header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; margin-bottom:2.5rem; }
.portfolio-header-left p { color:var(--body); max-width:420px; margin:0; }
.filter-btns { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.filter-btn { background:transparent; border:1.5px solid rgba(0,0,0,.15); color:var(--dark); font-size:.82rem; font-weight:500; padding:6px 18px; border-radius:100px; cursor:pointer; transition:all .22s; white-space:nowrap; }
.filter-btn:hover { border-color:var(--brand); color:var(--brand); }
.filter-btn.active { background:var(--brand); border-color:var(--brand); color:#fff; }
#portfolio-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
grid-auto-rows:360px;
gap:14px;
}
#portfolio-grid .proj-card.proj-first { grid-row:span 2; }
@media(max-width:991px){ #portfolio-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:260px; } #portfolio-grid .proj-card.proj-first{ grid-row:span 1; } }
@media(max-width:575px){ #portfolio-grid{ grid-template-columns:1fr; grid-auto-rows:220px; } }
.proj-card { position:relative; border-radius:12px; overflow:hidden; cursor:pointer; background:#1a2a3a; }
.proj-img { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s ease; }
.proj-card:hover .proj-img { transform:scale(1.07); }
.proj-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 55%,rgba(0,0,0,.2) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem; transition:background .3s; }
.proj-card:hover .proj-overlay { background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.3) 55%,rgba(0,0,0,.3) 100%); }
.proj-tag { display:inline-block; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:100px; margin-bottom:.5rem; align-self:flex-start; transition:background .25s; }
.proj-card:hover .proj-tag { background:var(--brand); border-color:var(--brand); }
.proj-overlay h3 { color:#fff; font-size:1.05rem; margin-bottom:.3rem; }
.proj-overlay p { color:rgba(255,255,255,.65); font-size:.8rem; margin:0; }
.dot { color:var(--brand); }
.proj-client-logo {
position:absolute; top:12px; right:12px; z-index:5;
background:rgba(255,255,255,0.93); backdrop-filter:blur(6px);
border-radius:8px; padding:5px 10px;
display:flex; align-items:center; justify-content:center;
height:44px; max-width:90px;
box-shadow:0 2px 12px rgba(0,0,0,0.18);
transition:transform .2s;
}
.proj-card:hover .proj-client-logo { transform:scale(1.06); }
.proj-client-logo img {
max-height:30px; max-width:72px;
width:auto; object-fit:contain; display:block;
}
.btn-all-projects { display:inline-flex; align-items:center; gap:.5rem; margin-top:2rem; }
/* ══════════════════════════════════════
PROJECT MODAL – CENTRADO
══════════════════════════════════════ */
#projectModal {
position:fixed; inset:0; z-index:3000;
display:none; align-items:center; justify-content:center;
}
#projectModal.open { display:flex !important; }
.pm-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); }
.pm-box {
position:relative; z-index:1; background:#fff; border-radius:16px; overflow:hidden;
width:96%; max-width:1100px; max-height:93vh; display:flex; flex-direction:column;
box-shadow:0 24px 72px rgba(0,0,0,.3); animation:pmUp .3s ease;
}
@keyframes pmUp { from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;} }
.pm-header { padding:1.25rem 1.5rem .75rem; border-bottom:1px solid rgba(0,0,0,.07); position:relative; }
.pm-header h2 { font-size:1.35rem; margin:0 2.5rem .25rem 0; }
.pm-meta-tag { color:var(--brand); font-size:.8rem; font-weight:600; }
#pm-close { position:absolute; top:1rem; right:1.25rem; background:none; border:none; font-size:1.4rem; color:var(--dark); cursor:pointer; opacity:.6; transition:opacity .2s; line-height:1; }
#pm-close:hover { opacity:1; }
.pm-body { display:flex; overflow-y:auto; flex:1; }
.pm-img-col { flex:0 0 58%; position:relative; min-height:440px; }
#pm-carousel-wrap { position:absolute; inset:0; }
.pm-slides { position:absolute; inset:0; }
.pm-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .4s; }
.pm-slide.active { opacity:1; }
.pm-carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; z-index:5; font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.pm-carousel-btn:hover { background:rgba(0,0,0,.72); }
.pm-prev { left:10px; }
.pm-next { right:10px; }
.pm-dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:5; }
.pm-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; border:none; padding:0; transition:background .2s; }
.pm-dot.active { background:#fff; }
.pm-counter { position:absolute; top:10px; right:10px; background:rgba(0,0,0,.45); color:#fff; font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:20px; z-index:5; }
.pm-info-col { flex:1; padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:1rem; overflow-y:auto; }
.pm-desc { font-size:.9rem; color:var(--body); line-height:1.72; }
.pm-client-section {
display:flex; align-items:center; gap:1rem;
padding:.85rem 1.1rem; background:rgba(0,0,0,.035);
border-radius:10px; border-left:3px solid var(--brand);
}
.pm-client-section img {
max-height:36px; max-width:90px;
width:auto; object-fit:contain; flex-shrink:0;
}
.pm-client-label {
display:block; font-size:.62rem; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--body); margin-bottom:.15rem;
}
.pm-client-name { font-size:.95rem; font-weight:700; color:var(--dark); }
.pm-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1.5rem; }
.pm-field label { display:block; font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--body); margin-bottom:.2rem; }
.pm-field span { font-size:.95rem; font-weight:700; color:var(--dark); }
.pm-btn { display:block; background:var(--brand); color:#fff; text-align:center; border:none; padding:.85rem; border-radius:8px; font-weight:600; font-size:.95rem; cursor:pointer; text-decoration:none; margin-top:auto; transition:background .2s; }
.pm-btn:hover { background:#e06000; color:#fff; }
@media(max-width:640px){ .pm-body{flex-direction:column;} .pm-img-col{flex:0 0 260px;min-height:260px;} }
/* ══════════════════════════════════════
CLIENTS SECTION
══════════════════════════════════════ */
#clients { background:#fff; padding:4rem 0; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
.clients-heading { text-align:center; margin-bottom:2.5rem; }
.clients-heading h2 { font-size:1.5rem; font-weight:800; color:var(--dark); margin-bottom:.4rem; }
.clients-heading .badge-exp { display:inline-block; background:rgba(246,118,0,.12); color:var(--brand); font-weight:700; font-size:.88rem; padding:.3rem 1rem; border-radius:4px; }
.clients-slider .client-logo { display:flex !important; align-items:center; justify-content:center; padding:0 2rem; height:80px; }
.clients-slider .client-logo img { max-height:80px; max-width:200px; width:auto; object-fit:contain; filter:grayscale(1) opacity(.55); transition:filter .3s; }
.clients-slider .client-logo img:hover { filter:grayscale(0) opacity(1); }
/* ══════════════════════════════════════
CONTACT CTA – naranja más suave
══════════════════════════════════════ */
.contact-cta {
position:relative; overflow:hidden;
background:url(../img/banner3.jpg) center/cover no-repeat;
padding:80px 0;
}
.contact-cta::before {
content:''; position:absolute; inset:0;
background:rgba(246,118,0,.55);
backdrop-filter:blur(1px);
}
.contact-cta .container { position:relative; z-index:1; }
.contact-cta h1, .contact-cta h6, .contact-cta p { color:#fff; }
.contact-link { color:#fff; text-decoration:none; font-weight:500; font-size:.95rem; display:inline-flex; align-items:center; background:rgba(255,255,255,.2); padding:8px 18px; border-radius:100px; transition:background .2s; }
.contact-link:hover { background:rgba(255,255,255,.32); color:#fff; }
/* ══════════════════════════════════════
MILESTONE
══════════════════════════════════════ */
@media(max-width:575px){ #milestone .display-4{ font-size:2rem; } }
/* ══════════════════════════════════════
FOOTER
══════════════════════════════════════ */
.footer-links a { color:rgba(255,255,255,.55); text-decoration:none; font-size:.88rem; transition:color .2s; }
.footer-links a:hover { color:var(--brand); }
.footer-bottom p { color:rgba(255,255,255,.4); font-size:.82rem; }
.modal-close { position:absolute; top:12px; right:14px; z-index:10; opacity:.6; }
.modal-close:hover { opacity:1; }
/* ══════════════════════════════════════
WHATSAPP FLOAT
══════════════════════════════════════ */
.whatsapp-float { position:fixed; bottom:28px; right:24px; z-index:2000; width:54px; height:54px; background:#25d366; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; text-decoration:none; box-shadow:0 4px 16px rgba(0,0,0,.2); transition:transform .2s, box-shadow .2s; }
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(0,0,0,.25); color:#fff; }
/* ══════════════════════════════════════
PROJECTS PAGE (proyectos.html)
══════════════════════════════════════ */
.page-hero { background:linear-gradient(rgba(0,0,0,.45) 0%,rgba(0,0,0,.65) 100%), url('../img/banner1.jpg') center/cover no-repeat; padding:4rem 0; }
.page-hero h1 { color:#fff; }
#all-projects-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:340px; gap:14px; margin-top:2rem; }
@media(max-width:991px){ #all-projects-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:260px; } }
@media(max-width:575px){ #all-projects-grid{ grid-template-columns:1fr; grid-auto-rows:220px; } }
/* modal en proyectos.html también */
.form-control:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(246,118,0,.15); }
/* ============================================================
v5 ADDITIONS: Hero slider (v3) + section decorators
============================================================ */
/* ── HERO SLIDER OWL ───────────────────────────────────────── */
.hero-slider .owl-prev,
.hero-slider .owl-next {
background-color: rgba(255,255,255,0.3) !important;
width: 60px !important; height: 60px !important;
display: grid; place-items: center;
color: #fff !important; border-radius: 100px !important;
position: absolute; top: 50%;
font-weight: 600 !important; font-size: 12px !important;
transition: all .4s ease; margin-top: -30px !important;
}
.hero-slider .owl-prev { left: 0; }
.hero-slider .owl-next { right: 0; }
.hero-slider .owl-prev:hover,
.hero-slider .owl-next:hover { background-color: var(--brand) !important; }
.owl-dot.active span { background-color: var(--brand) !important; }
/* ── SLIDES ────────────────────────────────────────────────── */
.slide {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.slide1 {
background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)), url(../img/banner2.webp);
background-size: cover; background-position: center;
}
.slide2 {
background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)), url(../img/hero-pavimentacion.jpg);
background-size: cover; background-position: center;
}
.slide3 {
background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)), url(../img/hero-redes-sanitarias.jpg);
background-size: cover; background-position: center;
}
.slide4 {
background: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)), url(../img/banner1.jpg);
background-size: cover; background-position: center;
}
.slide .display-3 { text-transform: uppercase; color: #fff; }
/* decorative diagonal accent bottom-right of each slide */
.slide::after {
content: '';
position: absolute; bottom: 0; right: 0;
width: 0; height: 0;
border-style: solid;
border-width: 0 0 64px 96px;
border-color: transparent transparent rgba(246,118,0,.85) transparent;
z-index: 3; pointer-events: none;
}
@media (max-width: 767px) {
.slide { min-height: 80vh; }
.slide .display-3 { font-size: 1.75rem !important; }
.slide h6 { font-size: .8rem; }
.slide .btn { font-size: .85rem; padding: 7px 16px; }
.slide::after { border-width: 0 0 44px 64px; }
}
/* ── SECTION EYEBROW (lines before & after) ───────────────── */
.section-eyebrow {
display: inline-flex; align-items: center; gap: .75rem;
font-size: .72rem; font-weight: 700; letter-spacing: .15em;
text-transform: uppercase; color: var(--brand); margin-bottom: .6rem;
}
.section-eyebrow::before,
.section-eyebrow::after {
content: ''; display: block;
width: 36px; height: 2px;
background: var(--brand); border-radius: 2px; flex-shrink: 0;
}
/* ── #ABOUT ─── watermark + photo frame ────────────────────── */
#about { position: relative; overflow: hidden; }
#about::before {
content: 'NOSOTROS';
position: absolute; top: 30px; left: -8px;
font-size: clamp(3.5rem,9vw,7.5rem); font-weight: 800;
color: rgba(246,118,0,.05);
line-height: 1; pointer-events: none; white-space: nowrap;
letter-spacing: .06em; z-index: 0;
}
#about .container { position: relative; z-index: 1; }
/* orange frame behind the photo */
#about .col-lg-6.fade-right { position: relative; }
#about .col-lg-6.fade-right::after {
content: '';
position: absolute; top: -14px; right: -14px;
width: 76%; height: 76%;
border: 3px solid var(--brand); border-radius: 10px;
z-index: 0; transition: top .4s ease, right .4s ease;
}
#about .col-lg-6.fade-right:hover::after { top: -7px; right: -7px; }
#about .col-lg-6.fade-right img { position: relative; z-index: 1; }
.info-box { display: flex; align-items: flex-start; padding: 1rem; border-radius: 8px; transition: background .25s, transform .25s; }
.info-box:hover { background: rgba(246,118,0,.06); transform: translateX(6px); }
@media (max-width: 767px) {
#about::before { font-size: 3.5rem; }
#about .col-lg-6.fade-right::after { display: none; }
}
/* ── #MILESTONE ─── diagonal stripe overlay ────────────────── */
#milestone { position: relative; overflow: hidden; }
#milestone::before {
content: '';
position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(
-45deg,
rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 2px,
transparent 2px, transparent 16px
);
}
#milestone::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
pointer-events: none;
}
/* ── #SERVICES ─── watermark bottom-right ──────────────────── */
#services { position: relative; overflow: hidden; }
#services::before {
content: 'SERVICIOS';
position: absolute; bottom: -10px; right: -10px;
font-size: clamp(3.5rem,9vw,7.5rem); font-weight: 800;
color: rgba(246,118,0,.04);
line-height: 1; pointer-events: none; white-space: nowrap;
letter-spacing: .06em; z-index: 0;
}
#services .container { position: relative; z-index: 1; }
/* ── #PORTFOLIO ─── watermark top-left ─────────────────────── */
#portfolio { position: relative; overflow: hidden; }
#portfolio::before {
content: 'PROYECTOS';
position: absolute; top: 20px; left: -10px;
font-size: clamp(3rem,8vw,7rem); font-weight: 800;
color: rgba(0,0,0,.03);
line-height: 1; pointer-events: none; white-space: nowrap;
letter-spacing: .06em; z-index: 0;
}
#portfolio .container { position: relative; z-index: 1; }
/* ── #TEAM ─── watermark top-right ─────────────────────────── */
#team { position: relative; overflow: hidden; }
#team::before {
content: 'EQUIPO';
position: absolute; top: 20px; right: -10px;
font-size: clamp(3.5rem,9vw,7.5rem); font-weight: 800;
color: rgba(246,118,0,.04);
line-height: 1; pointer-events: none; white-space: nowrap;
letter-spacing: .06em; z-index: 0;
}
#team .container { position: relative; z-index: 1; }
/* ── #CLIENTS ─── centered watermark ───────────────────────── */
#clients { position: relative; overflow: hidden; }
#clients::before {
content: 'CLIENTES';
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
font-size: clamp(3rem,8vw,6.5rem); font-weight: 800;
color: rgba(0,0,0,.035);
line-height: 1; pointer-events: none; white-space: nowrap;
letter-spacing: .06em; z-index: 0;
}
/* ── #REVIEWS ─── giant quote watermark ────────────────────── */
#reviews { position: relative; overflow: hidden; }
#reviews::before {
content: '"';
position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
font-size: 22rem; font-weight: 800; font-family: Georgia, serif;
color: rgba(255,255,255,.04);
line-height: 1; pointer-events: none; z-index: 0;
}
#reviews > .container,
#reviews > .owl-theme { position: relative; z-index: 1; }
.review img { border: 3px solid var(--brand); }
/* ── CONTACT CTA ─── stripe overlay ────────────────────────── */
.contact-cta { position: relative; overflow: hidden; }
.contact-cta::after {
content: '';
position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(
135deg,
rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 2px,
transparent 2px, transparent 18px
);
z-index: 0;
}
.contact-cta .container { position: relative; z-index: 1; }
/* ── FOOTER ─── top accent line ────────────────────────────── */
footer { position: relative; }
footer::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--brand2), var(--brand), var(--brand2));
z-index: 1;
}
/* ── WHATSAPP pulse ─────────────────────────────────────────── */
.whatsapp-float {
animation: waPulse 2.8s infinite;
}
@keyframes waPulse {
0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.2), 0 0 0 0 rgba(37,211,102,.4); }
50% { box-shadow: 0 4px 16px rgba(0,0,0,.2), 0 0 0 10px rgba(37,211,102,0); }
}
/* ── TOP NAV stripe ─────────────────────────────────────────── */
.top-nav { position: relative; overflow: hidden; }
.top-nav::after {
content: '';
position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(
45deg,
rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 2px,
transparent 2px, transparent 10px
);
}
/* ── MODAL PROYECTO centrado ──────────────────────────────── */
#projectModal {
position: fixed !important;
inset: 0 !important;
z-index: 3000 !important;
display: none;
align-items: center !important;
justify-content: center !important;
}
#projectModal[style*="flex"],
#projectModal.open {
display: flex !important;
}
/* ── INFO-BOX ICONS tamaño correcto ───────────────────────── */
#about .info-box img {
width: 54px !important;
height: 54px !important;
object-fit: contain;
flex-shrink: 0;
align-self: center;
background: transparent;
border-radius: 0;
box-shadow: none;
}