/* ============================================
GEOTERRA — Site styles
============================================ */
:root {
--green: #1f8a44;
--green-dark: #14672f;
--green-light: #2ecc71;
--bg-dark: #0f1a17;
--bg-dark-2: #11241c;
--text-dark: #1a1f1c;
--text-muted: #5b6360;
--text-light: #e8efe9;
--border: #e3e8e4;
--cream: #f3efe3;
--gold: #b8956a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--text-dark);
line-height: 1.55;
background: #fff;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
/* ---------- Header ---------- */
.header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 18px 0;
background: transparent;
box-shadow: none;
transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.header.scrolled {
padding: 10px 0;
background: #ffffff;
box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
/* Logo: always the full-color version (top + scrolled) */
.header .logo img { filter: none; }
.header.scrolled .logo img { filter: none; }
.header-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
}
.logo {
display: inline-flex; align-items: center;
}
.logo img { height: 48px; width: auto; display: block; transition: height .25s; }
.header.scrolled .logo img { height: 40px; }
.footer .logo img { height: 56px; filter: none; }
.nav { display: flex; gap: 30px; }
.nav a {
font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
color: #ffffff; text-transform: uppercase;
padding: 8px 0; position: relative;
transition: color .2s;
}
.nav a::after {
content: ''; position: absolute; left: 50%; bottom: 0;
width: 0; height: 2px; background: var(--green-light);
transition: width .25s ease, left .25s ease;
}
.nav a:hover::after, .nav a.active::after {
width: 100%; left: 0;
}
.nav a:hover, .nav a.active { color: var(--green-light); }
/* Scrolled state: dark text on white header */
.header.scrolled .nav a { color: var(--text-dark); }
.header.scrolled .nav a:hover, .header.scrolled .nav a.active { color: var(--green); }
.header.scrolled .nav a::after { background: var(--green); }
.burger { color: #ffffff; }
.header.scrolled .burger { color: var(--text-dark); }
.exp-badge {
background: var(--green);
color: #fff;
padding: 18px 20px;
text-align: center;
border-radius: 0;
font-weight: 700;
line-height: 1.1;
min-width: 90px;
transition: padding .3s;
}
.header.scrolled .exp-badge { padding: 12px 18px; }
.exp-badge .big { font-size: 26px; display: block; margin-bottom: 4px; }
.exp-badge .lbl { font-size: 9px; letter-spacing: 1.2px; font-weight: 600; }
.burger { display: none; font-size: 26px; color: #1a1f1c; }
/* ---------- Hero ---------- */
.hero {
position: relative;
min-height: 720px;
color: #fff;
display: flex; align-items: center;
padding: 160px 0 160px;
background: #0a1411;
overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: right center;
z-index: 0;
animation: slowZoom 18s ease-in-out infinite alternate;
}
.hero-bg::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(5,11,9,.98) 0%, rgba(5,11,9,.96) 28%, rgba(5,11,9,.55) 50%, rgba(5,11,9,.15) 75%, rgba(5,11,9,0) 100%);
}
@keyframes slowZoom {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
.hero-inner { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
.hero-content { max-width: 580px; }
.hero-side {
position: absolute;
bottom: 110px;
right: 30px;
z-index: 4;
display: flex;
justify-content: flex-end;
max-width: 300px !important;
}
.eyebrow {
display: inline-block;
font-size: 11px; letter-spacing: 3px; font-weight: 600;
color: var(--green-light); text-transform: uppercase;
margin-bottom: 18px;
}
.hero h1 {
font-size: clamp(34px, 5vw, 58px);
font-weight: 800;
line-height: 1.05;
margin-bottom: 22px;
letter-spacing: -0.5px;
}
.hero h1 .accent { color: var(--green-light); }
.hero h1 .hero-accent {
display: inline-block;
position: relative;
padding-bottom: 8px;
}
.hero h1 .hero-accent::after {
content: ''; position: absolute; left: 0; bottom: 0;
width: 80px; height: 4px;
background: var(--green-light);
}
.hero p {
font-size: 16px; line-height: 1.6;
color: rgba(255,255,255,.85);
margin-bottom: 32px; max-width: 480px;
}
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px;
font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
text-transform: uppercase;
border-radius: 4px;
transition: transform .2s, background .2s, border-color .2s;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn-outline { border: 1.5px solid #fff; color: #fff; }
.btn-outline:hover { background: #fff; color: var(--green); }
.btn-outline-dark { border: 1.5px solid #d6dcd7; color: var(--text-dark); }
.btn-outline-dark:hover { border-color: var(--green); color: var(--green); }
.btn-link {
display: inline-flex; align-items: center; gap: 8px;
color: var(--green); font-weight: 600; font-size: 13px;
text-transform: uppercase; letter-spacing: 0.5px;
}
.btn-link:hover { gap: 12px; }
.play-btn {
display: inline-flex; align-items: center; gap: 14px;
color: #fff; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px;
text-align: left;
}
.play-btn .circle {
width: 60px; height: 60px; border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 1.5px solid rgba(255,255,255,0.4);
display: inline-flex; align-items: center; justify-content: center;
transition: background .25s, transform .25s, border-color .25s;
position: relative;
flex-shrink: 0;
}
.play-btn .circle::before {
content: ''; position: absolute; inset: -8px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.2);
animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
0% { transform: scale(.95); opacity: 1; }
100% { transform: scale(1.4); opacity: 0; }
}
.play-btn .circle i { color: #fff; font-size: 18px; margin-left: 3px; }
.play-btn:hover .circle { background: var(--green); border-color: var(--green); }
.play-btn:hover .circle i { color: #fff; }
.play-btn small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: rgba(255,255,255,.7); margin-top: 4px; line-height: 1.4; }
/* Solutions bar INSIDE hero, translucent dark */
.solutions-bar {
position: absolute;
bottom: 0; left: 0; right: 0;
background: rgba(8, 14, 12, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(255,255,255,.08);
padding: 24px 0;
z-index: 3;
}
.solutions-bar .container {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.sol-item {
display: flex; align-items: center; gap: 14px;
color: #ffffff; font-size: 13px; line-height: 1.25;
font-weight: 500;
}
.sol-icon {
width: 46px; height: 46px; border-radius: 50%;
background: transparent;
border: 1.5px solid rgba(46,204,113,.55);
display: inline-flex; align-items: center; justify-content: center;
color: var(--green-light); flex-shrink: 0; font-size: 18px;
transition: background .25s, border-color .25s;
}
.sol-item:hover .sol-icon {
background: rgba(46,204,113,.15);
border-color: var(--green-light);
}
/* ---------- Section base ---------- */
section { padding: 70px 0; }
.section-eyebrow {
font-size: 11px; letter-spacing: 3px; font-weight: 600;
color: var(--green); text-transform: uppercase;
margin-bottom: 12px;
}
.section-title {
font-size: clamp(28px, 3.5vw, 42px); font-weight: 800;
line-height: 1.15; color: var(--text-dark);
margin-bottom: 16px;
}
.section-title .accent { color: var(--green); }
.section-lead { color: var(--text-muted); font-size: 16px; max-width: 640px; }
.section-divider { width: 50px; height: 3px; background: var(--green); margin: 14px 0 22px; }
.section-dark { background: var(--bg-dark); color: #fff; }
.section-dark .section-title { color: #fff; }
.section-dark .section-lead { color: rgba(255,255,255,.7); }
.section-cream { background: var(--cream); }
/* ---------- About section + preview ---------- */
.about-section { padding: 90px 0 80px; position: relative; }
.about-section::before {
content: ''; position: absolute; top: 0; right: 0;
width: 220px; height: 220px;
background: radial-gradient(circle at 80% 20%, rgba(31,138,68,.07), transparent 70%);
pointer-events: none; z-index: 0;
}
.about-preview {
display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px;
align-items: center;
}
.about-preview-wrap { position: relative; }
.about-preview-img {
position: relative; min-height: 480px;
background-size: cover; background-position: center;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,.15);
}
.about-preview-img::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(8,17,14,.35) 100%);
}
.stats-overlay {
position: absolute;
left: 50%; bottom: -36px; transform: translateX(-50%);
background: #fff;
padding: 24px 28px;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
box-shadow: 0 20px 50px rgba(0,0,0,.18);
border-radius: 6px;
width: 92%;
z-index: 2;
}
.stat-block { text-align: left; padding-right: 16px; border-right: 1px solid var(--border); }
.stat-block:last-child { border-right: 0; padding-right: 0; }
.stat-block .num {
display: block; font-size: 32px; font-weight: 800;
color: var(--text-dark); line-height: 1; margin-bottom: 6px;
}
.stat-block .num.accent-num { color: var(--green); }
.stat-block .lbl {
font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
color: var(--text-dark); font-weight: 700;
display: block;
}
.stat-block .desc { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
/* ---------- Services grid (home) ---------- */
.services-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
margin-top: 40px;
align-items: stretch;
}
.service-card {
background: #14201c;
border-radius: 6px;
overflow: hidden;
display: flex; flex-direction: column;
height: 100%;
transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.service-card .img {
height: 175px; background-size: cover; background-position: center;
position: relative; overflow: hidden;
transition: transform .6s ease;
}
.service-card .img::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(20,32,28,.65) 100%);
}
.service-card:hover .img { transform: scale(1.06); }
.service-card .num {
position: absolute; top: 14px; left: 18px; z-index: 2;
color: #fff; font-weight: 800; font-size: 22px;
text-shadow: 0 2px 8px rgba(0,0,0,.5);
letter-spacing: 0.5px;
}
.service-card .body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.service-card h3 {
font-size: 15px; font-weight: 700; margin-bottom: 10px;
color: #fff; line-height: 1.3;
}
.service-card p {
font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* services page — 3 columns (9 cards = 3×3 perfectly aligned) */
.services-grid-large {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
margin-top: 38px;
align-items: stretch;
}
.services-grid-large .service-card { background: #ffffff; border: 1px solid var(--border); }
.services-grid-large .service-card h3 { color: var(--text-dark); min-height: 0; }
.services-grid-large .service-card p { color: var(--text-muted); }
.services-grid-large .service-card .img { height: 200px; }
.services-grid-large .service-card .body { padding: 22px 22px 26px; }
.services-grid-large .service-card .body .icon-circle {
width: 44px; height: 44px; border-radius: 50%;
background: var(--green); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
margin-top: -42px; margin-bottom: 14px; position: relative; z-index: 1;
}
.services-grid-large .service-card .body.gold .icon-circle { background: var(--gold); }
.services-grid-large .service-card .ver-mas {
color: var(--green); font-weight: 600; font-size: 12px;
text-transform: uppercase; letter-spacing: 0.5px;
display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
}
/* ---------- Featured projects (home) ---------- */
.projects-featured {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
margin-top: 50px;
}
.project-card {
background: #ffffff;
border-radius: 8px;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.project-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(0,0,0,.35); }
.project-card .img {
height: 200px; background-size: cover; background-position: center;
position: relative; overflow: hidden;
transition: transform .6s ease;
}
.project-card:hover .img { transform: scale(1.05); }
.project-card .body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.project-card .tag {
font-size: 10px; letter-spacing: 2.5px; color: var(--green);
text-transform: uppercase; font-weight: 700; margin-bottom: 10px;
}
.project-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; color: var(--text-dark); line-height: 1.3; min-height: 46px; }
.project-card p {
font-size: 12.5px; color: var(--text-muted); line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---------- Tech / Diferencial ---------- */
.tech-section {
background: linear-gradient(180deg, #0f1a17, #0a1411);
color: #fff;
padding: 70px 0;
}
.tech-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 55px;
align-items: stretch;
}
.tech-left { padding-top: 4px; }
.tech-section .section-title {
font-size: clamp(32px, 3.8vw, 48px);
line-height: 1.08;
margin-bottom: 6px;
}
.tech-section .tech-left p {
font-size: 16px; line-height: 1.65;
max-width: 520px; margin-bottom: 30px;
}
.tech-image-wrap { align-self: stretch; }
.tech-img {
width: 100%;
height: 100%; min-height: 540px;
border-radius: 8px;
background-size: cover; background-position: center;
box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
/* Columna derecha: título arriba, items abajo */
.tech-right {
display: flex; flex-direction: column;
justify-content: space-between;
gap: 40px;
}
.tech-diferencial {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px 30px;
padding-top: 0;
}
.dif-item { display: flex; gap: 14px; align-items: flex-start; }
.dif-icon {
width: 42px; height: 42px; flex-shrink: 0;
border-radius: 50%;
background: rgba(46,204,113,.12);
color: var(--green-light);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px;
}
.dif-item h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #fff; }
.dif-item p { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.55; }
/* Tech section legacy (kept for old refs) */
.tech-block { display: none; }
/* Featured projects wrap + arrows */
.projects-featured-wrap {
position: relative;
margin-top: 40px;
display: flex; align-items: center;
}
.projects-featured-viewport {
flex: 1;
overflow: hidden;
}
.projects-featured {
display: flex;
gap: 22px;
align-items: stretch;
}
.projects-featured > .project-card {
flex: 0 0 calc((100% - 44px) / 3);
}
.proj-arrow {
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,.12);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,.18);
transition: background .25s, border-color .25s, transform .25s;
cursor: pointer;
}
.proj-arrow:hover { background: var(--green); border-color: var(--green); transform: scale(1.05); }
.proj-arrow-l { margin-right: 18px; }
.proj-arrow-r { margin-left: 18px; }
.dots-pagination {
display: flex; justify-content: center; gap: 8px;
margin-top: 30px;
}
.dots-pagination .dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255,255,255,.3);
transition: background .2s;
}
.dots-pagination .dot.active { background: var(--green-light); }
/* Clients carousel */
.clients-carousel {
display: flex; align-items: center; gap: 14px;
margin-top: 40px;
}
.clients-track {
flex: 1;
display: flex; gap: 14px;
flex-wrap: nowrap;
overflow: hidden;
min-width: 0;
}
.clients-track > .client-logo {
flex: 0 0 calc((100% - 7 * 14px) / 8);
}
@media (max-width: 1024px) {
.clients-track > .client-logo { flex: 0 0 calc((100% - 3 * 14px) / 4); }
}
@media (max-width: 720px) {
.clients-track > .client-logo { flex: 0 0 calc((100% - 2 * 14px) / 3); }
}
/* Clientes — marquee continuo (nunca para) */
.clients-marquee {
margin-top: 40px;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.clients-marquee-track {
display: flex;
width: max-content;
animation: clientsScroll 38s linear infinite;
}
.clients-marquee .client-logo {
flex: 0 0 190px;
height: 100px;
margin-right: 18px;
}
@keyframes clientsScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 720px) {
.clients-marquee .client-logo { flex: 0 0 150px; }
}
/* CTA strip — solid dark background */
.cta-strip {
background: #0c1714;
color: #fff;
padding: 50px 0;
position: relative;
}
.cta-strip::before { display: none; }
.cta-strip .container {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1.2fr 2fr; gap: 50px;
align-items: center;
}
.cta-strip-left h3 { font-size: 22px; font-weight: 700; line-height: 1.35; color: #ffffff; }
.cta-strip-left .section-eyebrow { margin-bottom: 12px; color: var(--green-light); }
.cta-contact-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; font-size: 14px; }
.cta-contact-row .item { display: flex; gap: 14px; align-items: center; }
.cta-contact-row .item-icon {
width: 46px; height: 46px; border-radius: 50%;
background: rgba(46,204,113,.12);
border: 1px solid rgba(46,204,113,.35);
color: var(--green-light);
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
font-size: 16px;
}
.cta-contact-row strong { display: block; font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.cta-contact-row .item > div:last-child { color: #ffffff; font-weight: 500; line-height: 1.45; font-size: 14px; }
/* ---------- Clients carousel ---------- */
.clients-strip {
padding: 60px 0;
background: #fff;
}
.clients-row {
display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px;
align-items: center;
margin-top: 30px;
}
.client-logo {
height: 100px; border: 1px solid var(--border); border-radius: 6px;
display: flex; align-items: center; justify-content: center;
padding: 14px;
background: #fff;
text-align: center; line-height: 1.1;
transition: border-color .2s, transform .2s;
}
.client-logo:hover { border-color: var(--green); transform: translateY(-2px); }
.client-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.client-logo small { display: block; font-size: 9px; font-weight: 500; margin-top: 4px; color: #999; letter-spacing: 0.5px; }
.carousel-arrow {
width: 36px; height: 36px; border-radius: 50%;
background: #fff; border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-dark); font-size: 16px;
}
/* ---------- Equipo (talento) ---------- */
.equipo-block {
display: grid; grid-template-columns: 1fr 2fr; gap: 50px;
align-items: center;
}
.equipo-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.equipo-imgs .img {
height: 240px; background-size: cover; background-position: center;
border-radius: 6px; overflow: hidden; position: relative;
transition: transform .4s ease;
box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.equipo-imgs .img::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.3) 100%);
}
.equipo-imgs .img:hover { transform: translateY(-4px); }
/* ---------- Talento: slider de imágenes grande ---------- */
.equipo-slider {
position: relative;
width: 100%;
height: 500px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.equipo-slider .img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0;
transition: opacity 1.1s ease;
}
.equipo-slider .img.active {
opacity: 1;
animation: equipoZoom 6s ease forwards;
}
@keyframes equipoZoom {
from { transform: scale(1.08); }
to { transform: scale(1); }
}
.equipo-slider .img::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(8,17,14,.45) 100%);
}
.equipo-slider .slider-dots {
position: absolute; bottom: 18px; left: 0; right: 0;
display: flex; justify-content: center; gap: 8px; z-index: 2;
}
.equipo-slider .slider-dots span {
width: 9px; height: 9px; border-radius: 50%;
background: rgba(255,255,255,.55); cursor: pointer;
transition: background .25s, transform .25s;
}
.equipo-slider .slider-dots span:hover { background: rgba(255,255,255,.85); }
.equipo-slider .slider-dots span.active { background: var(--green-light); transform: scale(1.25); }
@media (max-width: 720px) {
.equipo-slider { height: 340px; }
}
/* ---------- Footer ---------- */
.footer {
background: #08110e;
color: rgba(255,255,255,.7);
padding: 60px 0 24px;
font-size: 13px;
}
.footer-grid {
display: grid; grid-template-columns: 1.5fr 1fr 1.4fr 1.4fr; gap: 50px;
margin-bottom: 50px;
}
.footer h4 {
font-size: 12px; letter-spacing: 2px; color: #fff;
text-transform: uppercase; margin-bottom: 18px; font-weight: 700;
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer ul a:hover { color: var(--green-light); }
.footer .brand-block p { line-height: 1.6; margin-top: 14px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.2);
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-size: 13px;
}
.footer-social a:hover { background: var(--green); border-color: var(--green); }
.contact-line { display: flex; gap: 12px; margin-bottom: 14px; align-items: flex-start; }
.contact-line .icon-c { color: var(--green-light); margin-top: 2px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 22px;
display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
font-size: 12px; color: rgba(255,255,255,.5);
}
/* ---------- Sub-hero (inner pages) ---------- */
.subhero {
position: relative;
color: #fff;
padding: 180px 0 80px;
min-height: 420px;
background: #0f1a17;
overflow: hidden;
}
.subhero-bg {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center;
}
.subhero-bg::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(15,26,23,.85), rgba(15,26,23,.3));
}
.subhero .container { position: relative; z-index: 1; }
.breadcrumb {
font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 20px;
}
.breadcrumb a:hover { color: var(--green-light); }
.subhero h1 {
font-size: clamp(36px, 5vw, 60px); font-weight: 800;
line-height: 1.05; margin-bottom: 20px;
}
.subhero h1 .accent { color: var(--green-light); }
.subhero p { max-width: 480px; color: rgba(255,255,255,.85); }
/* ---------- Nosotros: about + stats card ---------- */
.about-block {
display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: center;
}
.about-block h2 { font-size: 36px; font-weight: 800; line-height: 1.1; margin-bottom: 22px; }
.about-block .text p { color: var(--text-muted); margin-bottom: 18px; }
.about-block .imgs { position: relative; }
.about-block .main-img { height: 380px; background-size: cover; background-position: center; border-radius: 4px; }
.about-block .thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.about-block .thumbs .t { height: 100px; background-size: cover; background-position: center; border-radius: 4px; }
.proj-card-overlay {
position: absolute; top: -10px; right: -10px;
background: var(--green); color: #fff;
padding: 22px; border-radius: 4px; min-width: 180px;
box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.proj-card-overlay .num { font-size: 30px; font-weight: 800; line-height: 1; }
.proj-card-overlay .lbl { font-size: 11px; letter-spacing: 1px; margin-top: 6px; }
/* Timeline */
.timeline {
background: var(--bg-dark);
color: #fff;
padding: 80px 0;
background-image: linear-gradient(rgba(15,26,23,.92), rgba(15,26,23,.92)), var(--bg);
background-size: cover;
}
.timeline-grid {
display: block;
}
.timeline-head {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.timeline-grid h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15; }
.timeline-grid h2 .eyebrow-small { display: block; font-size: 12px; color: var(--green-light); letter-spacing: 3px; margin-bottom: 14px; font-weight: 600; }
.timeline-line {
position: relative;
padding-top: 4px;
}
.timeline-line::before {
content: ''; position: absolute; top: 32px; left: 0; right: 0;
height: 2px; background: rgba(255,255,255,.22);
}
.timeline-points {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
}
.tl-point .dot-c {
width: 56px; height: 56px; border-radius: 50%;
background: var(--bg-dark); border: 1px solid rgba(255,255,255,.3);
display: inline-flex; align-items: center; justify-content: center;
color: var(--green-light); margin-bottom: 18px; font-size: 20px;
position: relative; z-index: 1;
transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.tl-point:hover .dot-c { background: var(--green); border-color: var(--green); color: #fff; }
.tl-point .year { font-size: 27px; font-weight: 800; color: var(--green-light); margin-bottom: 10px; transition: color .3s ease; }
.tl-point:hover .year { color: #fff; }
.tl-point p { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.6; }
/* Big stats strip */
.stats-strip {
padding: 70px 0;
background-size: cover; background-position: center;
background-blend-mode: multiply;
background-color: rgba(15,26,23,.85);
color: #fff;
}
.stats-strip .container {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
text-align: center;
}
.stats-strip .num { font-size: 52px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 12px; }
.stats-strip .num .plus { color: var(--green-light); }
.stats-strip .lbl { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.7); }
/* Misión, Visión, Objetivos de Calidad */
.mvp-section {
padding: 80px 0;
background: linear-gradient(rgba(15,26,23,.92), rgba(15,26,23,.92)), url('../img/talud.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.mvp-section .section-eyebrow { color: var(--green-light); }
.mvp-section .section-title { color: #fff; }
.mvp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.mvp-card {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-top: 4px solid var(--green);
border-radius: 10px;
padding: 36px 30px;
text-align: center;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
transition: transform .3s, box-shadow .3s, background .3s;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.mvp-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.3); background: rgba(255,255,255,.08); }
.mvp-icon {
width: 72px; height: 72px; border-radius: 50%;
background: rgba(46,204,113,.15);
color: var(--green-light);
display: inline-flex; align-items: center; justify-content: center;
font-size: 30px; margin-bottom: 22px;
}
.mvp-card h3 {
font-size: 22px; font-weight: 800; margin-bottom: 16px;
color: #fff;
}
.mvp-card p {
font-size: 13.5px; color: rgba(255,255,255,.75); line-height: 1.65;
text-align: justify;
}
@media (max-width: 1024px) {
.mvp-grid { grid-template-columns: 1fr; }
}
/* Valores */
.valores {
padding: 80px 0; background: #fff;
}
.valores-grid {
display: block;
}
.valores-head {
text-align: center;
max-width: 720px;
margin: 0 auto 50px;
}
.valores-head .section-divider { margin-left: auto; margin-right: auto; }
.valores h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15; }
.valores-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; }
.valor-item .v-icon {
width: 66px; height: 66px; border-radius: 50%;
background: rgba(31,138,68,.08); color: var(--green);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 16px; font-size: 26px;
}
.valor-item h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; transition: color .25s ease; }
.valor-item p { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.valor-item { padding: 28px 22px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.valor-item:hover { background: rgba(31,138,68,.06); border-color: var(--green); transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.valor-item:hover .v-icon { background: var(--green); color: #fff; }
.valor-item:hover h4 { color: var(--green); }
/* ---------- Servicios timeline (ciclo de vida) ---------- */
.cycle-track {
display: flex; justify-content: space-between; gap: 0; align-items: center;
max-width: 880px; margin: 50px auto 60px; position: relative;
}
.cycle-track::before {
content: ''; position: absolute;
top: 30px; left: 8%; right: 8%; height: 2px;
border-top: 1.5px dashed #c8d4cc;
z-index: 0;
}
.cycle-step { text-align: center; position: relative; z-index: 1; }
.cycle-step .c {
width: 58px; height: 58px; border-radius: 50%;
background: #fff; border: 1.5px solid #d6dcd7;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-muted); margin-bottom: 12px;
cursor: pointer;
transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.cycle-step.active .c,
.cycle-step:hover .c {
background: var(--green); border-color: var(--green); color: #fff;
transform: translateY(-3px);
}
.cycle-step:hover .lbl { color: var(--green); }
.cycle-step .lbl { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
/* Enfoque sostenible block */
.enfoque {
padding: 80px 0;
background: linear-gradient(rgba(15,26,23,.92), rgba(15,26,23,.92)), url('../img/talud.jpg');
background-size: cover;
background-position: center;
color: #fff;
}
.enfoque .section-eyebrow { color: rgba(255,255,255,.85); }
.enfoque .section-title { color: #fff; }
.enfoque .section-divider { background: #fff; }
.enfoque-img { height: 420px; background-size: cover; background-position: center; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.25); }
.enfoque-pillars {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 26px 30px; margin-top: 30px;
}
.enfoque-pillars .p {
text-align: left;
display: flex; gap: 16px; align-items: flex-start;
}
.enfoque-pillars .p > div:last-child { flex: 1; }
.enfoque-pillars .p-icon {
flex: 0 0 56px;
width: 56px; height: 56px; min-width: 56px;
aspect-ratio: 1 / 1; border-radius: 50%;
background: rgba(255,255,255,.15); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 0; font-size: 22px;
}
.enfoque-pillars h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: #fff; transition: color .3s ease; }
.enfoque-pillars p { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.55; }
.enfoque-pillars .p { cursor: pointer; }
.enfoque-pillars .p-icon { transition: background .3s ease, color .3s ease; }
.enfoque-pillars .p:hover .p-icon { background: var(--green); color: #fff; }
.enfoque-pillars .p:hover h4 { color: var(--green-light); }
/* ---------- Proyectos page ---------- */
.tabs-filter {
display: flex; gap: 28px; flex-wrap: wrap;
border-bottom: 1px solid var(--border);
margin-bottom: 40px;
}
.tabs-filter button {
font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
color: var(--text-muted); text-transform: uppercase;
padding: 14px 0; position: relative;
}
.tabs-filter button.active { color: var(--green); }
.tabs-filter button.active::after {
content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--green);
}
.featured-project {
display: grid; grid-template-columns: 1fr 1.5fr; gap: 0;
background: #fff; border: 1px solid var(--border); border-radius: 4px;
overflow: hidden; margin-bottom: 30px;
}
.featured-project .info { padding: 36px; }
.featured-project .info .tag { font-size: 10px; letter-spacing: 2px; color: var(--green); font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.featured-project .info h3 { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
.featured-project .info .subtitle { font-size: 15px; color: var(--text-dark); margin-bottom: 14px; font-weight: 500; }
.featured-project .info p { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
.featured-project .meta { display: grid; gap: 8px; margin-bottom: 24px; }
.featured-project .meta .m { display: flex; gap: 10px; font-size: 13px; color: var(--text-muted); }
.featured-project .meta .m .ic { color: var(--green); }
.featured-project .img-big { background-size: cover; background-position: center; min-height: 420px; position: relative; }
.carousel-arrows-overlay {
position: absolute; right: 18px; bottom: 18px; display: flex; gap: 8px;
}
.carousel-arrows-overlay button {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,.85); color: var(--text-dark);
display: inline-flex; align-items: center; justify-content: center;
}
.projects-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
margin-bottom: 50px;
}
.projects-grid .p-card {
background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.projects-grid .p-card .img { height: 200px; background-size: cover; background-position: center; }
.projects-grid .p-card .body { padding: 22px; }
.projects-grid .p-card .tag { font-size: 10px; letter-spacing: 2px; color: var(--green); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.projects-grid .p-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 14px; min-height: 46px; }
.projects-grid .p-card p {
font-size: 13px; color: var(--text-muted); margin-bottom: 16px;
display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4;
-webkit-box-orient: vertical; overflow: hidden;
}
.stats-row-light {
padding: 50px 0; background: var(--cream);
display: flex; align-items: center;
}
.stats-row-light .container {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
text-align: center;
}
.stats-row-light .item .ic { color: var(--green-light); margin-bottom: 10px; }
.stats-row-light .num { font-size: 34px; font-weight: 800; color: #fff; line-height: 1; }
.stats-row-light .num .plus { color: var(--green-light); }
.stats-row-light .lbl { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.7); font-weight: 600; margin-top: 6px; }
/* ---------- Clientes page ---------- */
.confianza-block {
padding: 70px 0; background: var(--cream);
}
.confianza-block .section-eyebrow { color: var(--green-light); }
.confianza-block .section-title { color: #fff; }
.confianza-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
.confianza-stats .num { font-size: 38px; font-weight: 800; color: #fff; }
.confianza-stats .lbl { font-size: 11px; letter-spacing: 1.5px; color: rgba(255,255,255,.7); text-transform: uppercase; font-weight: 600; margin-top: 6px; }
.client-tabs-center {
text-align: center; margin: 40px 0 30px;
}
.client-tabs-center button {
display: inline-flex; padding: 10px 26px;
background: #fff; border: 1px solid var(--border);
font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
border-radius: 4px; margin: 0 4px;
color: var(--text-muted);
}
.client-tabs-center button.active { background: var(--green); color: #fff; border-color: var(--green); }
.clients-big-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
margin-bottom: 40px;
}
.clients-big-grid .cell {
background: #fff; border: 1px solid var(--border); border-radius: 4px;
padding: 22px 18px; text-align: center;
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 150px;
transition: border-color .2s, transform .2s;
}
.clients-big-grid .cell:hover { border-color: var(--green); transform: translateY(-2px); }
.clients-big-grid .cell img { max-width: 130px; max-height: 100px; width: auto; height: auto; object-fit: contain; }
.clients-big-grid .cell .logo-text { font-weight: 800; font-size: 18px; color: var(--text-dark); margin-bottom: 8px; }
.clients-big-grid .cell .desc { font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; line-height: 1.4; }
.por-que { background: var(--bg-dark); color: #fff; padding: 80px 0; position: relative; background-size: cover; background-position: left center; }
.por-que::before { content:''; position: absolute; inset:0; background: linear-gradient(90deg, rgba(15,26,23,.4) 0%, rgba(15,26,23,.95) 50%); }
.por-que .container { position: relative; z-index: 1; }
.por-que-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
.por-que h2 { font-size: 32px; font-weight: 800; line-height: 1.15; margin-bottom: 6px; }
.por-que h2 .eyebrow-small { display: block; font-size: 11px; letter-spacing: 3px; color: var(--green-light); margin-bottom: 12px; font-weight: 600; }
.por-que-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.por-que-list .it { display: flex; gap: 14px; padding: 22px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.por-que-list .it:hover { background: rgba(46,204,113,.12); border-color: var(--green-light); transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
.por-que-list .ic { width: 44px; height: 44px; border-radius: 50%; background: rgba(46,204,113,.15); color: var(--green-light); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .25s ease, color .25s ease; }
.por-que-list .it:hover .ic { background: var(--green-light); color: var(--bg-dark); }
.por-que-list h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: #fff; text-align: center; transition: color .25s ease; }
.por-que-list .it:hover h4 { color: var(--green-light); }
.por-que-list .it p { font-size: 12px; color: rgba(255,255,255,.65); text-align: center; transition: color .25s ease; }
.por-que-list .it:hover p { color: rgba(255,255,255,.9); }
.cta-center {
padding: 60px 0; background: #fff;
}
.cta-center-card {
display: flex; align-items: center; gap: 28px;
background: #fff; padding: 26px 30px;
border: 1px solid var(--border); border-radius: 8px;
max-width: 1000px; margin: 0 auto;
}
.cta-center-card .cta-thumb {
width: 180px; height: 110px; flex-shrink: 0;
background-size: cover; background-position: center;
border-radius: 6px;
}
.cta-center-card .ic-big { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cta-center-card .text { text-align: left; flex: 1; }
.cta-center-card h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; color: var(--text-dark); }
.cta-center-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
.cta-center-card .btn { white-space: nowrap; flex-shrink: 0; }
/* ---------- Certificaciones ---------- */
.cert-intro {
padding: 80px 0;
}
.cert-intro-img { height: 460px; background-size: cover; background-position: center; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.15); }
.cert-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.cert-pillars .p {
text-align: center; padding: 22px 18px; border-radius: 12px;
border: 1px solid var(--border);
transition: background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cert-pillars .p:hover {
background: var(--green); border-color: var(--green);
transform: translateY(-5px); box-shadow: 0 16px 34px rgba(31,138,68,.28);
}
.cert-pillars .pi { width: 56px; height: 56px; border-radius: 50%; background: rgba(31,138,68,.08); color: var(--green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 20px; transition: background .25s, color .25s; }
.cert-pillars .p:hover .pi { background: rgba(255,255,255,.2); color: #fff; }
.cert-pillars h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; transition: color .25s; }
.cert-pillars p { font-size: 12px; color: var(--text-muted); transition: color .25s; }
.cert-pillars .p:hover h4, .cert-pillars .p:hover p { color: #fff; }
.cert-grid {
padding: 60px 0;
background: var(--cream);
}
.cert-grid .section-eyebrow { color: var(--green-light); }
.cert-grid .section-title { color: #fff; }
.cert-code {
text-align: center; margin-top: 14px;
font-size: 14px; font-weight: 800; letter-spacing: 1.5px;
color: var(--text-dark);
}
.cert-card-main {
background: #fff; border-radius: 6px;
display: grid; grid-template-columns: 280px 1fr;
gap: 40px; align-items: center; padding: 36px;
margin-bottom: 26px; max-width: 920px; margin-left: auto; margin-right: auto;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.cert-card-main .seal {
width: 220px; height: 220px; border-radius: 50%;
background: #fff; border: 8px solid #f0c14b;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 32px; color: #d97a00;
margin: 0 auto; position: relative;
}
.cert-card-main .seal small { display: block; font-size: 11px; margin-top: 4px; }
.cert-card-main h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.cert-card-main .name { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 14px; }
.cert-card-main p { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.cert-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
.cert-mini {
background: #fff; border-radius: 6px; padding: 24px;
display: grid; grid-template-columns: 100px 1fr; gap: 20px; align-items: center;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.cert-mini .seal-mini {
width: 90px; height: 90px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px;
}
.cert-mini.eco .seal-mini { background: rgba(46,204,113,.15); color: #1f8a44; border: 4px solid #1f8a44; }
.cert-mini.blue .seal-mini { background: rgba(33,150,243,.1); color: #2196f3; border: 4px solid #2196f3; }
.cert-mini.gold .seal-mini { background: rgba(184,149,106,.15); color: var(--gold); border: 4px solid var(--gold); }
.cert-mini h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.cert-mini .nm { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--text-dark); }
.cert-mini p { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.cert-mini .vc { font-size: 11px; color: var(--green); border: 1px solid var(--green); padding: 6px 14px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.somos-parte { padding: 60px 0; background: var(--cream); border-top: 1px solid #e9e4d4; }
.somos-parte .label { font-size: 11px; letter-spacing: 2px; color: var(--green-light); font-weight: 700; text-align: center; margin-bottom: 24px; text-transform: uppercase; }
.somos-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: center; }
.somos-row .l {
height: 110px; display: flex; align-items: center; justify-content: center;
padding: 12px; background: #fff; border-radius: 6px;
}
.somos-row .l img { max-height: 80px; max-width: 100%; width: auto; object-fit: contain; }
/* ---------- Contacto ---------- */
.contact-main {
display: grid; grid-template-columns: 1fr 2fr; gap: 40px;
padding: 40px 0;
}
.contact-info-block .label { font-size: 11px; letter-spacing: 2px; color: var(--green); font-weight: 700; margin-bottom: 26px; text-transform: uppercase; text-align: center; }
.contact-info-block .row { display: flex; gap: 16px; margin-bottom: 26px; }
.contact-info-block .ic-c {
width: 46px; height: 46px; border-radius: 8px;
background: rgba(31,138,68,.08); color: var(--green);
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info-block strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.contact-info-block p { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.form-card { background: #fff; padding: 30px; border: 1px solid var(--border); border-radius: 6px; }
.form-card .section-eyebrow { text-align: center; }
.form-card h2 { font-size: 26px; font-weight: 800; margin-bottom: 22px; text-align: center; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row > :only-child { grid-column: 1 / -1; }
.form-card input, .form-card select, .form-card textarea {
width: 100%; padding: 14px 16px;
border: 1px solid var(--border); border-radius: 4px;
font-family: inherit; font-size: 13px; color: var(--text-dark);
background: #fff; transition: border-color .2s;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: var(--green); }
.form-card textarea { min-height: 110px; resize: vertical; }
.form-disclaimer { font-size: 12px; color: var(--text-muted); margin: 14px 0; display: flex; gap: 8px; }
.form-disclaimer a { color: var(--green); font-weight: 600; }
.form-card .btn { width: 100%; justify-content: center; }
.map-block { background: #fff; min-height: 460px; border-radius: 6px; position: relative; overflow: hidden; padding: 16px; }
.map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--green); font-size: 50px; }
.map-card {
position: absolute; bottom: 20px; left: 20px; right: 20px;
background: #fff; padding: 16px; border-radius: 4px;
box-shadow: 0 8px 20px rgba(0,0,0,.1);
font-size: 13px;
}
.map-card strong { display: block; font-weight: 700; margin-bottom: 4px; }
.map-card p { color: var(--text-muted); font-size: 12px; }
.map-cta { display: inline-flex; gap: 6px; align-items: center; color: var(--green); font-weight: 600; font-size: 12px; margin-top: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
/* PQR section */
.pqr-section { padding: 70px 0; background: var(--cream); }
.pqr-grid { display: grid; grid-template-columns: 1fr 2.5fr; gap: 40px; align-items: center; }
.pqr-grid h2 { font-size: 28px; font-weight: 800; margin-bottom: 10px; line-height: 1.2; }
.pqr-grid .label { font-size: 10px; letter-spacing: 2px; color: var(--green); font-weight: 700; margin-bottom: 12px; text-transform: uppercase; }
.pqr-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pqr-card { background: #fff; padding: 26px 18px; border-radius: 6px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.pqr-card .ic { width: 54px; height: 54px; border-radius: 50%; background: rgba(31,138,68,.08); color: var(--green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 22px; }
.pqr-card.q .ic { background: rgba(255,167,38,.12); color: #ff9800; }
.pqr-card.r .ic { background: rgba(76,175,80,.12); color: #4caf50; }
.pqr-card.s .ic { background: rgba(63,81,181,.12); color: #3f51b5; }
.pqr-card h4 { font-size: 14px; font-weight: 800; letter-spacing: 1px; margin-bottom: 8px; }
.pqr-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; }
.pqr-card .reg { color: var(--green); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.transparente-strip { padding: 50px 0; background: #fff; }
.transparente-grid { display: block; }
.transparente-head { text-align: center; margin-bottom: 36px; }
.transparente-grid .label { font-size: 10px; letter-spacing: 2px; color: var(--green); font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.transparente-grid h3 { font-size: 22px; font-weight: 800; }
.transparente-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.transparente-items .it {
display: flex; gap: 14px; align-items: flex-start;
padding: 22px 20px; border-radius: 12px; border: 1px solid var(--border);
transition: background .25s ease, transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.transparente-items .it:hover {
background: var(--green); border-color: var(--green);
transform: translateY(-4px); box-shadow: 0 14px 30px rgba(31,138,68,.25);
}
.transparente-items .ic { color: var(--green); font-size: 24px; flex-shrink: 0; transition: color .25s; }
.transparente-items h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; transition: color .25s; }
.transparente-items p { font-size: 12px; color: var(--text-muted); transition: color .25s; }
.transparente-items .it:hover .ic,
.transparente-items .it:hover h4,
.transparente-items .it:hover p { color: #fff; }
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.services-grid { grid-template-columns: repeat(2, 1fr); }
.services-grid-large { grid-template-columns: repeat(2, 1fr); }
.clients-row, .clients-track { grid-template-columns: repeat(4, 1fr); }
.clients-big-grid { grid-template-columns: repeat(3, 1fr); }
.stats-strip .container, .stats-row-light .container { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.timeline-grid, .valores-grid, .por-que-grid, .equipo-block, .about-preview, .about-block, .enfoque, .cert-intro, .pqr-grid, .transparente-grid, .tech-grid { grid-template-columns: 1fr; gap: 36px; }
.tech-img { min-height: 320px; height: 320px; }
.stats-overlay { position: static; transform: none; margin-top: 24px; grid-template-columns: repeat(2,1fr); }
.stat-block { border-right: 0; }
.featured-project { grid-template-columns: 1fr; }
.projects-grid, .projects-featured, .cert-cards-row, .pqr-cards, .transparente-items, .enfoque-pillars, .cert-pillars { grid-template-columns: repeat(2, 1fr); }
.contact-main { grid-template-columns: 1fr; }
.cta-strip .container, .cta-contact-row { grid-template-columns: 1fr; gap: 20px; }
.solutions-bar .container { grid-template-columns: repeat(2, 1fr); }
.timeline-points { grid-template-columns: repeat(2, 1fr); }
.valores-list, .somos-row { grid-template-columns: repeat(2, 1fr); }
.por-que-list { grid-template-columns: 1fr; }
.cycle-track { flex-direction: column; gap: 20px; }
.cycle-track::before { display: none; }
.equipo-imgs { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.cert-card-main { grid-template-columns: 1fr; text-align: center; }
.hero-inner { grid-template-columns: 1fr; }
.hero-side { position: absolute; bottom: 80px; right: 30px; }
}
@media (max-width: 720px) {
.nav { display: none; }
.nav.open {
display: flex; flex-direction: column;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; padding: 20px; gap: 14px;
box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.burger { display: inline-flex; }
.exp-badge { display: none; }
section { padding: 60px 0; }
.services-grid, .services-grid-large, .projects-featured, .clients-big-grid, .projects-grid, .cert-cards-row, .pqr-cards, .transparente-items, .enfoque-pillars, .cert-pillars, .valores-list, .somos-row, .footer-grid, .stats-strip .container, .stats-row-light .container, .timeline-points, .solutions-bar .container, .tech-diferencial { grid-template-columns: 1fr; }
.hero { padding: 130px 0 50px; min-height: 540px; }
.clients-row, .clients-track { grid-template-columns: repeat(3, 1fr); }
.cta-center-card { flex-direction: column; text-align: center; }
.cta-center-card .text { text-align: center; }
.stats-overlay { grid-template-columns: repeat(2,1fr); padding: 18px; }
.stats-overlay .stat-block .num { font-size: 24px; }
.hero-side { position: absolute; bottom: 60px; right: 20px; }
}
/* ---------- Detalle de proyecto (proyecto.html) ---------- */
.pd-section { padding: 70px 0; }
.pd-grid {
display: grid; grid-template-columns: 1fr 360px; gap: 50px;
align-items: start;
}
.pd-cover {
width: 100%; height: 380px; border-radius: 8px;
background-size: cover; background-position: center;
margin-bottom: 30px;
box-shadow: 0 16px 40px rgba(0,0,0,.15);
}
.pd-intro {
font-size: 17px; color: var(--text-dark); font-weight: 500;
line-height: 1.6; margin-bottom: 18px;
}
.pd-main #pd-body p {
font-size: 14.5px; color: var(--text-muted); line-height: 1.75;
margin-bottom: 16px;
}
.pd-subhead {
font-size: 18px; font-weight: 800; color: var(--text-dark);
margin: 32px 0 16px;
}
.pd-services {
list-style: none; display: grid; grid-template-columns: 1fr 1fr;
gap: 12px 24px;
}
.pd-services li {
font-size: 13.5px; color: var(--text-dark); line-height: 1.5;
display: flex; gap: 10px; align-items: flex-start;
}
.pd-services li i { color: var(--green); margin-top: 3px; flex-shrink: 0; }
.pd-side { position: sticky; top: 100px; }
.pd-card {
background: #fff; border: 1px solid var(--border);
border-radius: 8px; padding: 28px;
box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.pd-card h4 {
font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--text-dark); font-weight: 800; margin-bottom: 18px;
padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.pd-card ul { list-style: none; display: grid; gap: 16px; margin-bottom: 24px; }
.pd-card ul li { display: flex; gap: 12px; align-items: flex-start; }
.pd-card ul li .ic {
width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
background: rgba(31,138,68,.08); color: var(--green);
display: inline-flex; align-items: center; justify-content: center;
}
.pd-card ul li strong {
display: block; font-size: 11px; letter-spacing: .5px;
text-transform: uppercase; color: var(--text-muted);
font-weight: 700; margin-bottom: 3px;
}
.pd-card ul li span > :not(strong),
.pd-card ul li span { font-size: 13.5px; color: var(--text-dark); line-height: 1.45; }
.p-card .ver-detalle {
margin-top: 14px; color: var(--green); font-weight: 600; font-size: 12px;
text-transform: uppercase; letter-spacing: .5px;
display: inline-flex; align-items: center; gap: 6px;
transition: gap .2s;
}
.p-card:hover .ver-detalle { gap: 11px; }
/* Tarjetas de proyecto clicables */
a.p-card { display: block; color: inherit; transition: transform .3s, box-shadow .3s, border-color .2s; }
a.p-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.12); border-color: var(--green); }
/* Detalle de servicio: tarjeta lateral */
.sd-card-icon {
width: 64px; height: 64px; border-radius: 50%;
background: var(--green); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 26px; margin-bottom: 16px;
}
.pd-card h4#sd-card-cat {
font-size: 18px; font-weight: 800; letter-spacing: 0;
text-transform: none; color: var(--text-dark);
border: 0; padding: 0; margin-bottom: 18px;
}
.sd-apps-label {
font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
color: var(--text-muted); font-weight: 700; margin-bottom: 12px;
}
.sd-apps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.sd-app {
font-size: 12px; color: var(--green); font-weight: 600;
background: rgba(31,138,68,.08); border: 1px solid rgba(31,138,68,.2);
border-radius: 20px; padding: 6px 14px;
}
/* Tarjetas de servicio clicables */
a.service-card { color: inherit; text-decoration: none; }
@media (max-width: 1024px) {
.pd-grid { grid-template-columns: 1fr; gap: 36px; }
.pd-side { position: static; }
}
@media (max-width: 720px) {
.pd-services { grid-template-columns: 1fr; }
.pd-cover { height: 240px; }
}
/* ---------- Texto justificado (global) ---------- */
p,
.section-lead,
.hero p,
.subhero p,
.about-block .text p,
.valor-item p,
.dif-item p,
.service-card p,
.project-card p,
.projects-grid .p-card p,
.featured-project .info p,
.enfoque-pillars p,
.cert-pillars p,
.cert-card-main p,
.cert-mini p,
.por-que-list p,
.pqr-card p,
.transparente-items p,
.tl-point p,
.contact-info-block p,
.cta-center-card p {
text-align: justify;
text-justify: inter-word;
}
/* Texto centrado en las tarjetas de servicios (Experiencia integral) */
.service-card h3,
.service-card p {
text-align: center;
text-justify: auto;
}
/* Texto centrado en las tarjetas de proyectos (Infraestructura que conecta territorios) */
.project-card .body .tag,
.project-card .body h3,
.project-card .body p {
text-align: center;
text-justify: auto;
}
/* Texto centrado en la línea de tiempo (Nosotros) */
.tl-point { text-align: center; }
.tl-point p {
text-align: center;
text-justify: auto;
}
/* Texto centrado en Principios que guían cada decisión (Nosotros) */
.valor-item { text-align: center; }
.valor-item p {
text-align: center;
text-justify: auto;
}
/* Texto centrado en los pilares de Certificaciones (Calidad, Seguridad, Cumplimiento) */
.cert-pillars .p p {
text-align: center;
text-justify: auto;
}
/* Tarjetas centradas en Un proceso transparente (Contacto) */
.transparente-items .it {
flex-direction: column;
align-items: center;
text-align: center;
}
.transparente-items .it p {
text-align: center;
text-justify: auto;
}
/* Utilities */
.text-center { text-align: center; }
.mt-30 { margin-top: 30px; }
.flex-between { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.flex-between .btn-link { white-space: nowrap; }
/* ---------- Scroll reveal animations ---------- */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.service-card.reveal { transition-delay: 0s; }
.service-card.reveal:nth-child(2) { transition-delay: .08s; }
.service-card.reveal:nth-child(3) { transition-delay: .16s; }
.service-card.reveal:nth-child(4) { transition-delay: .24s; }
.service-card.reveal:nth-child(5) { transition-delay: .32s; }
.project-card.reveal:nth-child(2) { transition-delay: .12s; }
.project-card.reveal:nth-child(3) { transition-delay: .24s; }
.dif-item.reveal:nth-child(2) { transition-delay: .08s; }
.dif-item.reveal:nth-child(3) { transition-delay: .16s; }
.dif-item.reveal:nth-child(4) { transition-delay: .24s; }
.dif-item.reveal:nth-child(5) { transition-delay: .32s; }
.dif-item.reveal:nth-child(6) { transition-delay: .4s; }
.sol-item.reveal:nth-child(2) { transition-delay: .08s; }
.sol-item.reveal:nth-child(3) { transition-delay: .16s; }
.sol-item.reveal:nth-child(4) { transition-delay: .24s; }
.sol-item.reveal:nth-child(5) { transition-delay: .32s; }
/* Carousel track transitions */
.projects-featured, .clients-track {
transition: transform .55s cubic-bezier(.2,.7,.3,1);
will-change: transform;
}
.clients-track { overflow: visible; }
.clients-carousel { overflow: hidden; }
/* Hero text fade in */
.hero-content > * { opacity: 0; animation: heroFade .9s ease forwards; }
.hero-content .eyebrow { animation-delay: .15s; }
.hero-content h1 { animation-delay: .3s; }
.hero-content p { animation-delay: .5s; }
.hero-content .btn-row { animation-delay: .7s; }
.hero-side { opacity: 0; animation: heroFade .9s ease .9s forwards; }
@keyframes heroFade {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Hover: card lift utility */
.lift { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.1); }
/* Smooth icon-circle pulse */
.dif-icon, .sol-icon, .item-icon, .v-icon, .p-icon, .pi {
transition: transform .3s, background-color .3s;
}
.dif-item:hover .dif-icon { transform: scale(1.1); }
.sol-item:hover .sol-icon { transform: scale(1.1); }
.valor-item:hover .v-icon { transform: scale(1.1); }
/* Buttons hover (refine) */
.btn { position: relative; overflow: hidden; }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(31,138,68,.35); }
/* Equipo images hover zoom */
.equipo-imgs .img { transition: transform .5s ease; overflow: hidden; }
.equipo-imgs .img:hover { transform: scale(1.04); }
/* ---------- Zoom global de imágenes al pasar el cursor ---------- */
/* Bloques de imagen de fondo (fotos) */
.projects-grid .p-card .img,
.featured-project .img-big,
.about-preview-img,
.about-block .main-img,
.about-block .thumbs .t,
.tech-img,
.enfoque-img,
.cert-intro-img,
.cta-center-card .cta-thumb,
.map-block,
.subhero-bg {
transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.projects-grid .p-card:hover .img,
.featured-project:hover .img-big,
.about-preview-wrap:hover .about-preview-img,
.about-block .imgs:hover .main-img,
.about-block .thumbs .t:hover,
.tech-image-wrap:hover .tech-img,
.enfoque-img:hover,
.cert-intro:hover .cert-intro-img,
.cta-center-card:hover .cta-thumb {
transform: scale(1.06);
}
/* Recorte para que el zoom no se desborde */
.tech-image-wrap { overflow: hidden; border-radius: 8px; }
.about-block .main-img,
.about-block .thumbs .t,
.enfoque-img,
.cert-intro-img,
.cta-center-card .cta-thumb { overflow: hidden; }
/* Imágenes ![]()
: logos de clientes, certificaciones, aliados */
.client-logo,
.clients-big-grid .cell,
.somos-row .l { overflow: hidden; }
.client-logo img,
.clients-big-grid .cell img,
.somos-row .l img,
.cert-mini img,
.cert-card-main img,
.cert-pillars img {
transition: transform .5s ease;
}
.client-logo:hover img,
.clients-big-grid .cell:hover img,
.somos-row .l:hover img,
.cert-mini:hover img,
.cert-card-main:hover img,
.cert-pillars:hover img {
transform: scale(1.1);
}
/* ============================================
COMPATIBILIDAD WORDPRESS + ELEMENTOR (Geoterra)
Añadido para el tema/plugin. No formaba parte del sitio estático.
============================================ */
/* El header del tema es fixed. Las secciones hero/subhero ya reservan su
propio padding-top; no añadimos espaciador global. Para páginas sin hero
(blog/archivo) se usa .geoterra-inner-top como utilidad de separación. */
.geoterra-inner-top { padding-top: 92px; }
/* Elementor "full width": el contenido de la página no debe llevar el padding
por defecto del contenedor de Elementor (nuestras secciones ya lo gestionan). */
.elementor-page .elementor-section-wrap > .elementor-section { padding-left: 0; padding-right: 0; }
/* Admin bar de WordPress no debe tapar el header fijo */
.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px){ .admin-bar .header { top: 46px; } }
/* Reset de márgenes que WordPress/Elementor pueden inyectar en secciones */
.geoterra-widget { position: relative; }
.geoterra-widget .container { max-width: 1240px; }
/* Dentro del editor de Elementor, las secciones full-width del widget
deben ocupar todo el ancho de la columna sin el padding por defecto. */
.elementor-widget-container > .geoterra-widget { margin: 0; }
/* Los widgets Geoterra ya traen su propio ; evitamos doble espaciado
cuando Elementor los envuelve. */
.elementor-element .geoterra-widget > section:first-child { margin-top: 0; }
/* Utilidad para el editor: placeholder visible cuando falta una imagen */
.geoterra-widget .img[style*="url('')"],
.geoterra-widget .img:not([style*="url"]) { background-color: #dfe6e0; }
/* Ajuste menor: enlaces de WordPress dentro del contenido del footer */
.footer ul { list-style: none; }
/* ------------------------------------------------------------------
ICONOS (SVG de Elementor)
Elementor renderiza los iconos como