@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@900,700,500,300,400&display=swap');

/* Estilos principales para IMB Construcciones Metalicas */
body {
    font-family: 'Satoshi', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
}

h1, h2, h3, h4, h5, h6, 
.hero-title, .section-main-title, .section-number, .service-title-v2, .project-main-title, .phase-number, .phase-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =============================================
   SITE HEADER — Barra fija oscura tipo corporativa
   ============================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0;
    background: rgba(8, 14, 32, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
    background: rgba(6, 10, 24, 0.96);
    box-shadow: 0 2px 24px rgba(0,0,0,0.45);
}

.header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0;
    height: 68px;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
}
.site-logo img {
    max-height: 40px;
    width: auto;
    display: block;
}
.site-header a {
    text-decoration: none;
}

/* Nav — centrado en la columna del medio */
.site-navigation {
    display: flex;
    justify-content: center;
}

.site-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 32px;
    align-items: center;
}

.site-navigation a {
    color: rgba(255, 255, 255, 0.80);
    font-family: 'Satoshi', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: color 0.25s ease;
    position: relative;
    padding: 4px 0;
}
.site-navigation a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: #2857a7;
    transition: width 0.28s ease;
}
.site-navigation a:hover {
    color: #ffffff;
}
.site-navigation a:hover::after {
    width: 100%;
}

/* Acciones derecha: CTA + hamburger */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Botón CTA */
.nav-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: #2857a7;
    color: #ffffff !important;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.25s ease;
}
.nav-cta-btn:hover {
    background: #14214b;
}

/* Hamburger mobile */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.nav-hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 960px) {
    .header-inner { grid-template-columns: 1fr auto; }
    .site-navigation { display: none; }
    .nav-cta-btn { display: none; }
    .nav-hamburger { display: flex; }
}


/* =============================================
   HERO SECTION — Video fullscreen
   ============================================= */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Contenedor del video */
.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay oscuro semi-transparente */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 30, 0.55);
}

/* Contenido centrado sobre el video */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
    max-width: 900px;
}

.hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 1.08;
    margin: 0 0 18px 0;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.hero-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 1.5px;
    margin: 0 0 36px 0;
    font-weight: 400;
}

/* Botón CTA con bordes blancos */
.hero-cta {
    display: inline-block;
    padding: 14px 38px;
    border: 1.5px solid rgba(255,255,255,0.85);
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hero-cta:hover {
    background: #ffffff;
    color: #0e1326;
    border-color: #ffffff;
}

/* Scroll indicator animado (mouse) */
.hero-scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: fadeInUp 1s ease 1.2s both;
}

.hero-scroll-indicator span {
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Satoshi', sans-serif;
}

.scroll-mouse {
    width: 22px;
    height: 36px;
    border: 1.5px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.scroll-wheel {
    width: 3px;
    height: 7px;
    background: rgba(255,255,255,0.7);
    border-radius: 3px;
    animation: scrollWheel 1.8s ease-in-out infinite;
}

@keyframes scrollWheel {
    0%   { transform: translateY(0); opacity: 1; }
    80%  { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Animación de entrada del contenido hero */
.hero-content {
    animation: heroFadeIn 1s ease 0.3s both;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Compensar el header fixed en las secciones internas */
.site-main .numbered-section:first-child {
    padding-top: 100px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .nav-hamburger { display: flex; }
    .site-navigation { display: none; }
    .site-navigation.open { 
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(14, 19, 38, 0.97);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }
    .site-navigation.open ul {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .site-navigation.open a {
        font-size: 1.5rem;
    }
    .hero-title { font-size: 2.4rem; }
}


/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: #14214b;
    color: #f1f1f1;
    padding: 30px 0;
}

.footer-inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-inner p {
    margin: 0;
    font-size: 0.85rem;
    color: #e0e0e0;
    text-align: center;
}

.footer-icon-box {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid #666;
    background: transparent;
    text-decoration: none;
    transition: background 0.3s ease;
}

.footer-icon-box:hover {
    background: #4a4a4a;
}

/* Nosotros Section Front Page */
.about-section {
    padding: 80px 0;
    background: #ffffff;

}

.about-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

@media (max-width: 768px) {
    .about-grid-layout {
        grid-template-columns: 1fr;
    }
}

.about-image-side img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about-content-side {
    max-width: 100%;
}

.about-content-side h2 {
    color: #14214b;
    font-size: 2.5rem;
    margin-bottom: 25px;
    margin-top: 0;
}

.about-content-side p {
    color: #21366e;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-btn {
    display: inline-block;
    margin-top: 20px;
    background: transparent;
    color: #2857a7;
    padding: 12px 28px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #2857a7;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.about-btn:hover {
    background: #2857a7;
    color: #ffffff;
}

/* Numbered Section Layout */
.numbered-section {
    padding: 80px 0;
    background: #f4f7f9;
}
.numbered-section:nth-child(even) {
    background: #ffffff;
}

.section-with-sidebar {
    display: flex;
    gap: 40px;
    align-items: stretch;
}
.section-sidebar {
    flex: 0 0 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 10px;
}
.section-number {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2857a7; /* Primary Blue */
    margin-bottom: 20px;
}
.section-line {
    width: 2px;
    flex-grow: 1;
    background-color: #2857a7;
    opacity: 0.3;
}
.section-content {
    flex-grow: 1;
    padding-bottom: 20px;
    width: 100%;
    /* Prevents flex items from overflowing */
    min-width: 0; 
}
.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    padding-bottom: 20px;
}
.section-subtitle {
    display: block;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: #14214b;
    letter-spacing: 2px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-family: 'Satoshi', sans-serif;
}
.section-main-title {
    text-align: left;
    font-size: 3.8rem;
    font-weight: 400;
    color: #14214b;
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
}
.section-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2857a7;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
    margin-bottom: 5px;
}
.section-link:hover {
    color: #194793;
}

/* Services V2 Layout (legacy) */
.services-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card-v2 {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.05));
}

.service-card-v2:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.service-card-img {
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.4s ease;
}
.service-card-v2:hover .service-card-img img {
    filter: grayscale(0%);
    transform: scale(1.05);
}
.service-card-info {
    padding: 25px 20px;
    background: #ffffff;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 80px;
}
.service-title-v2 {
    margin: 0;
    color: #14214b;
    font-size: 2rem;
    font-weight: 400;
}

/* =============================================
   SERVICES SECTION NEW — Editorial Dark Design
   ============================================= */
.services-section-new {
    background: #ffffff;
    padding: 80px 0 90px;
    overflow: hidden;
}

/* Header de 2 columnas */
.srv-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 48px;
}

.srv-header-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.srv-eyebrow {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2857a7;
}

.srv-main-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 400;
    color: #14214b;
    line-height: 1.05;
    margin: 0;
    letter-spacing: 1px;
}

.srv-title-line {
    width: 48px;
    height: 3px;
    background: #2857a7;
    margin-top: 4px;
    border-radius: 2px;
}

.srv-header-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: flex-end;
    padding-bottom: 8px;
}

.srv-description {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4a5568;
    margin: 0;
}

.srv-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #2857a7;
    text-decoration: none;
    transition: color 0.25s ease, gap 0.25s ease;
    width: fit-content;
}
.srv-link:hover {
    color: #4a7fd4;
    gap: 12px;
}

/* Grid de 4 tarjetas */
.srv-cards-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-radius: 4px;
    overflow: hidden;
}

/* Tarjeta individual */
.srv-card {
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.srv-card:last-child {
    border-right: none;
}

/* Imagen de fondo */
.srv-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
    opacity: 0.55;
    z-index: 0;
}
.srv-card:hover .srv-card-bg {
    transform: scale(1.07);
    opacity: 0.4;
}

/* Overlay degradado */
.srv-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(8, 15, 40, 0.97) 0%,
        rgba(8, 15, 40, 0.65) 50%,
        rgba(8, 15, 40, 0.3) 100%
    );
    transition: background 0.4s ease;
}
.srv-card:hover .srv-card-overlay {
    background: linear-gradient(
        to top,
        rgba(10, 22, 65, 0.98) 0%,
        rgba(10, 22, 65, 0.78) 50%,
        rgba(10, 22, 65, 0.45) 100%
    );
}

/* Contenido de la tarjeta */
.srv-card-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 24px;
    gap: 10px;
}

/* Ícono SVG */
.srv-card-icon {
    width: 44px;
    height: 44px;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.3s ease, transform 0.3s ease;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.srv-card-icon svg {
    width: 100%;
    height: 100%;
}
.srv-card:hover .srv-card-icon {
    color: #ffffff;
    transform: scale(1.1);
}

/* Título */
.srv-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
}

/* Descripción */
.srv-card-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 240px;
}

/* Flecha de navegación */
.srv-card-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    margin-top: 8px;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, transform 0.3s ease;
    width: fit-content;
    padding: 0;
    width: 36px;
    flex-shrink: 0;
}
.srv-card:hover .srv-card-arrow {
    border-color: #2857a7;
    color: #ffffff;
    background: #2857a7;
    transform: translateX(4px);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .srv-cards-wrap { grid-template-columns: repeat(2, 1fr); }
    .srv-card { border-bottom: 1px solid rgba(255,255,255,0.06); }
    .srv-card:nth-child(even) { border-right: none; }
}
@media (max-width: 700px) {
    .srv-header { grid-template-columns: 1fr; gap: 20px; }
    .srv-cards-wrap { grid-template-columns: 1fr; }
    .srv-card { min-height: 300px; border-right: none; }
}

/* Mantener compatibilidad con clases V3 (legacy) */
.services-grid-v3 { display: none; }

/* =============================================
   CAPACIDADES OPERATIVAS SECTION
   ============================================= */
.capacidades-section {
    background: #0b0f1e;
    padding: 72px 0 64px;
}

/* Header 2 columnas */
.cap-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 52px;
}

.cap-header-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cap-eyebrow {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2857a7;
}

.cap-main-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.05;
    margin: 0;
    letter-spacing: 1px;
}

.cap-title-line {
    width: 48px;
    height: 3px;
    background: #2857a7;
    margin-top: 4px;
    border-radius: 2px;
}

.cap-header-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-end;
    padding-bottom: 6px;
}

.cap-description {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.93rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.cap-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    width: fit-content;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.cap-cta-btn:hover {
    background: #2857a7;
    border-color: #2857a7;
    color: #ffffff;
}

/* Fila de 8 ítems */
.cap-items-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 36px;
}

.cap-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
.cap-item:last-child {
    border-right: none;
}

.cap-icon {
    width: 46px;
    height: 46px;
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.3s ease, transform 0.3s ease;
}
.cap-icon svg {
    width: 100%;
    height: 100%;
}
.cap-item:hover .cap-icon {
    color: #ffffff;
    transform: scale(1.1);
}

.cap-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
}
.cap-item:hover .cap-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive capacidades */
@media (max-width: 1100px) {
    .cap-items-row { grid-template-columns: repeat(4, 1fr); gap: 0; }
    .cap-item { padding: 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .cap-item:nth-child(4n) { border-right: none; }
}
@media (max-width: 700px) {
    .cap-header { grid-template-columns: 1fr; gap: 20px; }
    .cap-items-row { grid-template-columns: repeat(2, 1fr); }
    .cap-item:nth-child(even) { border-right: none; }
    .cap-item:nth-child(4n) { border-right: 1px solid rgba(255,255,255,0.08); }
    .cap-item:nth-child(odd):last-child { border-right: none; }
}



/* Responsive sidebar */
@media (max-width: 900px) {
    .services-grid-v2 { grid-template-columns: repeat(2, 1fr); }
    .section-with-sidebar { flex-direction: column; gap: 20px; }
    .section-sidebar { flex-direction: row; flex: 0 0 auto; gap: 15px; align-items: center; padding-top: 0; }
    .section-line { width: 100%; height: 2px; flex-grow: 1; }
    .section-number { margin-bottom: 0; }
    .section-header-flex { flex-direction: column; align-items: flex-start; gap: 15px; }
}

@media (max-width: 600px) {
    .services-grid-v2 { grid-template-columns: 1fr; }
}

/* =============================================
   PROYECTOS DESTACADOS — Nueva sección editorial
   ============================================= */
.proyectos-new-section {
    background: #ffffff;
    padding: 72px 0 80px;
}

/* Header 2 columnas */
.proy-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 40px;
}

.proy-header-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.proy-eyebrow {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2857a7;
}

.proy-main-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: 400;
    color: #14214b;
    line-height: 1.05;
    margin: 0;
    letter-spacing: 1px;
}

.proy-header-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 6px;
}

.proy-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #2857a7;
    text-decoration: none;
    transition: color 0.25s ease, gap 0.25s ease;
    white-space: nowrap;
}
.proy-link:hover {
    color: #14214b;
    gap: 12px;
}

/* Grid de 4 tarjetas */
.proy-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #e5e9ef;
    border: 1px solid #e5e9ef;
}

/* Tarjeta */
.proy-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease;
}
.proy-card:hover {
    box-shadow: 0 8px 32px rgba(20, 33, 75, 0.12);
    z-index: 1;
    position: relative;
}

/* Imagen */
.proy-card-img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #d0d8e4;
}
.proy-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
    filter: grayscale(20%);
}
.proy-card:hover .proy-card-img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

/* Body de la tarjeta */
.proy-card-body {
    padding: 20px 20px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.proy-card-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #14214b;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.15;
}

.proy-card-line {
    width: 32px;
    height: 2.5px;
    background: #2857a7;
    border-radius: 2px;
    flex-shrink: 0;
}

.proy-card-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.proy-card-stats li {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.78rem;
    color: #4a5568;
    line-height: 1.5;
}

/* Botón + azul */
.proy-card-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #2857a7;
    color: #ffffff;
    text-decoration: none;
    align-self: flex-end;
    flex-shrink: 0;
    transition: background 0.25s ease, transform 0.25s ease;
}
.proy-card-plus:hover {
    background: #14214b;
    transform: scale(1.08);
}

/* Responsive proyectos */
@media (max-width: 1024px) {
    .proy-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .proy-header { grid-template-columns: 1fr; gap: 16px; }
    .proy-header-right { justify-content: flex-start; }
    .proy-cards-grid { grid-template-columns: 1fr; }
}



/* =============================================
   CLIENTES BAR — Video + Logos sobre fondo oscuro
   ============================================= */
.clientes-bar-section {
    background: #0c1120;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.clientes-bar-inner {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 90px;
}

/* Lado izquierdo: play + texto */
.clientes-bar-video {
    display: flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    padding: 24px 36px 24px 0;
    flex-shrink: 0;
    transition: opacity 0.25s ease;
}
.clientes-bar-video:hover {
    opacity: 0.82;
}

.clientes-bar-play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.clientes-bar-video:hover .clientes-bar-play {
    border-color: #2857a7;
    background: #2857a7;
}

.clientes-bar-video-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.clientes-bar-video-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 1.2;
    color: #ffffff;
}

.clientes-bar-video-sub {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.5px;
}

/* Divisor vertical */
.clientes-bar-divider {
    width: 1px;
    height: 50px;
    background: rgba(255,255,255,0.15);
    flex-shrink: 0;
    margin-right: 36px;
}

/* Logos */
.clientes-bar-logos {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
}

.clientes-bar-logo-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    border-left: 1px solid rgba(255,255,255,0.07);
}
.clientes-bar-logo-item:last-child {
    border-right: 1px solid rgba(255,255,255,0.07);
}

.clientes-bar-logo-item img {
    max-height: 34px;
    max-width: 110px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.65;
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.clientes-bar-logo-item:hover img {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,0.3));
}

@media (max-width: 900px) {
    .clientes-bar-inner { flex-direction: column; align-items: flex-start; gap: 0; }
    .clientes-bar-video { padding: 20px 0 16px; }
    .clientes-bar-divider { display: none; }
    .clientes-bar-logos { flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.07); padding: 16px 0; width: 100%; }
    .clientes-bar-logo-item { flex: 0 0 33.33%; }
}

/* Clientes Section */
.clients-section {

    padding: 80px 0;
    background: #f4f6f8;
    text-align: center;
}

.clients-section h2 {
    color: #14214b;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.clients-description {
    color: #21366e;
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.client-logo-wrapper {
    width: 160px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-logo-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.client-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%) opacity(70%);
    transition: filter 0.3s ease;
}

.client-logo-wrapper:hover .client-logo {
    filter: grayscale(0%) opacity(100%);
}

/* Contact Section */
.contact-section {
    padding: 60px 0 80px 0;
    background: #ffffff;
}

.contact-container h2 {
    color: #14214b;
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.contact-description {
    color: #21366e;
    font-size: 1rem;
    margin-bottom: 30px;
}

.contact-form {
    max-width: 100%;
}

.form-group {
    margin-bottom: -1px; /* To collapse borders between inputs */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #e2e8f0;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    color: #333;
    background: #ffffff;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #a0aec0;
    position: relative;
    z-index: 1;
}

.phone-group {
    position: relative;
    display: flex;
    align-items: center;
}

.phone-group .flag-icon {
    position: absolute;
    left: 20px;
    font-size: 1.1rem;
    pointer-events: none;
    z-index: 2;
}

.phone-group input[type="tel"] {
    padding-left: 50px;
}

.form-group.recaptcha-placeholder {
    margin-top: 20px;
    margin-bottom: 20px;
    border: none;
}

.fake-recaptcha {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    padding: 15px;
    border: 1px solid #d3d3d3;
    background: #f9f9f9;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-radius: 3px;
}

.fake-recaptcha label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    cursor: pointer;
    color: #333;
}

.submit-btn {
    display: inline-block;
    background: #f1f1f1;
    color: #333;
    padding: 12px 30px;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.submit-btn:hover {
    background: #e2e8f0;
}

/* Page Servicios Template */
.page-services-section {
    padding: 60px 0 100px 0;
    background: #ffffff;
}

.page-services-section .page-title {
    color: #14214b;
    font-size: 2.2rem;
    margin-bottom: 40px;
    font-weight: 500;
    text-align: left;
}

.services-intro {
    text-align: center;
    color: #21366e;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 50px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.services-list {
    list-style-type: disc;
    padding-left: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.services-list li {
    font-size: 0.95rem;
    margin-bottom: 15px;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.3px;
}

/* Page Proyectos Template */
.page-projects-section {
    padding: 60px 0 100px 0;
    background: #ffffff;
}

.page-projects-section .page-title {
    color: #14214b;
    font-size: 2.2rem;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
}

.projects-intro {
    text-align: center;
    color: #21366e;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.project-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.project-image-placeholder {
    width: 100%;
    height: 220px;
    background: #e2e8f0;
}

.project-info {
    padding: 20px;
    text-align: center;
}

.project-info h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: #14214b;
}

.project-info p {
    margin: 0;
    font-size: 0.95rem;
    color: #718096;
}

/* Project Presentation Layout */
.projects-horizontal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

@media (max-width: 900px) {
    .projects-horizontal-grid {
        grid-template-columns: 1fr;
    }
}

.project-card-v2 {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.project-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}

.project-card-v2:hover .project-card-bg {
    transform: scale(1.05);
}

.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
    transition: background 0.4s ease;
}

.project-card-v2:hover .project-card-overlay {
    background: rgba(0, 0, 0, 0.75);
}

.project-card-content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project-card-title {
    color: #63b3ed;
    font-size: 3rem;
    margin: 0;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.project-card-subtitle {
    color: #90cdf4;
    font-size: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}

.project-card-date {
    color: #ffffff;
    font-size: 1.1rem;
    font-family: 'Satoshi', sans-serif;
    margin-bottom: 20px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.project-card-btn {
    display: inline-block;
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.project-card-btn:hover {
    background: #ffffff;
    color: #14214b;
}

@media (max-width: 768px) {
    .project-card-v2 {
        height: 300px;
    }
    .project-card-title {
        font-size: 2.2rem;
    }
    .project-card-subtitle {
        font-size: 1.5rem;
    }
}

/* Page Nosotros Template */
.page-about-section {
    padding: 60px 0 100px 0;
    background: #ffffff;
}

.page-about-section .page-title {
    color: #14214b;
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-weight: 600;
    text-align: center;
}

.about-intro {
    text-align: center;
    color: #21366e;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.about-image-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 0 50px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about-main-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.about-content-block {
    max-width: 100%;
    margin: 0 0 50px 0;
}

.about-content-block p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #21366e;
    margin-bottom: 20px;
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 100%;
    margin: 0 0 50px 0;
}

.mv-card {
    background: #f8fafc;
    padding: 30px;
    border-radius: 8px;
    border-left: 4px solid #2857a7;
}

.mv-card h3 {
    color: #14214b;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.mv-card p {
    color: #21366e;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .mission-vision-grid {
        grid-template-columns: 1fr;
    }
}

.about-features {
    max-width: 100%;
    margin: 0;
    background: #2857a7;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.about-features h3 {
    color: #ffffff;
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding-bottom: 15px;
}

.about-features ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.about-features li {
    position: relative;
    padding-left: 25px;
    color: #ffffff;
    font-weight: 500;
}

.about-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #90cdf4;
    font-weight: bold;
}

@media (max-width: 600px) {
    .about-features ul {
        grid-template-columns: 1fr;
    }
}

/* Contact Section */
.contact-section {
    padding: 80px 0;
    background: #f8fafc;
}

.contact-section h2 {
    text-align: center;
    color: #14214b;
    margin-bottom: 20px;
    font-size: 2.5rem;
}

.contact-description {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px auto;
    color: #21366e;
    line-height: 1.6;
    font-size: 1.1rem;
}

.contact-form-v2 {
    max-width: 800px;
    margin: 0 auto;
    background: transparent;
}

.form-row-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.form-group-v2 {
    display: flex;
    flex-direction: column;
}

.form-group-v2 label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #14214b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group-v2 input,
.form-group-v2 textarea {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #cbd5e0;
    background: transparent;
    font-family: 'Satoshi', sans-serif;
    font-size: 1.1rem;
    color: #14214b;
    transition: all 0.3s ease;
}

.form-group-v2 input::placeholder,
.form-group-v2 textarea::placeholder {
    color: #a0aec0;
    font-weight: 400;
}

.form-group-v2 input:focus,
.form-group-v2 textarea:focus {
    outline: none;
    border-bottom-color: #2857a7;
    background: rgba(244, 247, 249, 0.3);
}

.form-footer-v2 {
    margin-top: 40px;
    text-align: center;
}

.submit-btn-v2 {
    background-color: #14214b;
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    padding: 15px 60px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    letter-spacing: 2px;
}

.submit-btn-v2:hover {
    background-color: #2857a7;
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .form-row-v2 {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }
    .submit-btn-v2 {
        width: 100%;
    }
}

/* =============================================
   PROJECTS STACK — Diseño editorial horizontal
   ============================================= */
.projects-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;          /* separación mínima entre filas */
}

/* Tarjeta principal: imagen + panel info */
.pstack-card {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    height: 320px;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    transition: box-shadow 0.4s ease;
}

.pstack-card:hover {
    box-shadow: 0 16px 48px rgba(20, 33, 75, 0.22);
}

/* Variante invertida: info a la izq, imagen a la der */
.pstack-card--reverse {
    grid-template-columns: 0.9fr 1.1fr;
}

.pstack-card--reverse .pstack-image-wrap {
    order: 2;
}

.pstack-card--reverse .pstack-info {
    order: 1;
}

/* --- Bloque imagen --- */
.pstack-image-wrap {
    position: relative;
    overflow: hidden;
}

.pstack-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.5s ease;
    filter: grayscale(20%);
}

.pstack-card:hover .pstack-img {
    transform: scale(1.07);
    filter: grayscale(0%);
}

.pstack-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(14, 19, 38, 0.15) 0%,
        rgba(14, 19, 38, 0.55) 100%
    );
    transition: background 0.4s ease;
}

.pstack-card--reverse .pstack-img-overlay {
    background: linear-gradient(
        to left,
        rgba(14, 19, 38, 0.15) 0%,
        rgba(14, 19, 38, 0.55) 100%
    );
}

.pstack-card:hover .pstack-img-overlay {
    background: linear-gradient(
        to right,
        rgba(20, 50, 120, 0.10) 0%,
        rgba(20, 50, 120, 0.40) 100%
    );
}

.pstack-card--reverse:hover .pstack-img-overlay {
    background: linear-gradient(
        to left,
        rgba(20, 50, 120, 0.10) 0%,
        rgba(20, 50, 120, 0.40) 100%
    );
}

/* --- Panel de info --- */
.pstack-info {
    background: #1c3464;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 36px 44px;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease;
}

.pstack-card:hover .pstack-info {
    background: #214080;
}

/* Línea decorativa izquierda */
.pstack-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: #2857a7;
    transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pstack-card:hover .pstack-info::before {
    height: 100%;
}

/* Número grande de acento */
.pstack-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5.5rem;
    line-height: 1;
    color: rgba(40, 87, 167, 0.18);
    position: absolute;
    top: 20px;
    right: 36px;
    transition: color 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    letter-spacing: 2px;
}

.pstack-card:hover .pstack-number {
    color: rgba(40, 87, 167, 0.38);
    transform: scale(1.06);
}

/* Bloque de texto */
.pstack-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Tag / categoría */
.pstack-tag {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #2857a7;
}

/* Título */
.pstack-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1;
    color: #ffffff;
    transition: color 0.3s ease;
}

/* Subtítulo */
.pstack-sub {
    font-family: 'Satoshi', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(161, 180, 220, 0.85);
    margin: 0;
    transition: color 0.3s ease;
}

.pstack-card:hover .pstack-sub {
    color: #90b8e8;
}

/* Fecha */
.pstack-date {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.38);
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Botón con flecha */
.pstack-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.55);
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    width: fit-content;
    transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}

.pstack-btn svg {
    transition: transform 0.3s ease;
}

.pstack-card:hover .pstack-btn {
    color: #ffffff;
    border-color: rgba(255,255,255,0.6);
    gap: 14px;
}

.pstack-card:hover .pstack-btn svg {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 900px) {
    .pstack-card,
    .pstack-card--reverse {
        grid-template-columns: 1fr;
        height: auto;
    }

    .pstack-image-wrap {
        height: 240px;
        order: 1 !important;
    }

    .pstack-info {
        order: 2 !important;
        padding: 28px 28px 32px;
    }

    .pstack-number {
        font-size: 4rem;
        top: 14px;
        right: 20px;
    }

    .pstack-title { font-size: 2rem; }
}

.projects-horizontal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .projects-horizontal-grid {
        grid-template-columns: 1fr;
    }
}

.project-card-v2 {
    position: relative;
    height: 420px;
    overflow: hidden;
    cursor: pointer;
}

/* Imagen de fondo */
.project-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
    transition: transform 0.6s ease;
}

.project-card-v2:hover .project-card-bg {
    transform: scale(1.05);
}

/* Overlay oscuro (estado normal) */
.project-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(10, 18, 40, 0.62);
    transition: background 0.45s ease;
}

/* Hover: tinte azul IMB */
.project-card-v2:hover .project-card-overlay {
    background: rgba(20, 55, 130, 0.72);
}

/* Contenido centrado */
.project-card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 40px 44px;
    gap: 6px;
}

/* Título principal */
.project-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 1;
    margin: 0;
    color: #90c8f8;              /* azul claro normal */
    transition: color 0.4s ease;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.project-card-v2:hover .project-card-title {
    color: #63b8ff;              /* azul más vivo en hover */
}

/* Subtítulo */
.project-card-subtitle {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0 0 4px 0;
    color: #5ba3e8;              /* azul medio */
    transition: color 0.4s ease;
    text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.project-card-v2:hover .project-card-subtitle {
    color: #7ec8ff;
}

/* Fecha */
.project-card-date {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.70);
    margin-bottom: 18px;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}

.project-card-v2:hover .project-card-date {
    color: rgba(255, 255, 255, 0.85);
}

/* Botón Ver Proyecto */
.project-card-btn {
    display: inline-block;
    padding: 10px 26px;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.project-card-btn:hover {
    background: #ffffff;
    color: #14214b;
    border-color: #ffffff;
}

/* Divisor vertical entre tarjetas */
.project-card-v2:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 10%;
    right: 0;
    width: 1px;
    height: 80%;
    background: rgba(255,255,255,0.12);
    z-index: 3;
}

@media (max-width: 768px) {
    .project-card-v2 { height: 340px; }
    .project-card-content { padding: 28px 24px; }
    .project-card-title { font-size: 1.9rem; }
    .project-card-subtitle { font-size: 1.25rem; }
}

/* =============================================
   NOSOTROS — Diseño editorial split
   ============================================= */
.about-section-new {
    padding: 80px 0 100px;
    background: #f4f7f9;
}

/* Split imagen + panel */
.about-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 3px;
    min-height: 400px;
}

.about-split-img {
    position: relative;
    overflow: hidden;
}

.about-split-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(15%);
    transition: transform 0.6s ease, filter 0.5s ease;
}

.about-split:hover .about-split-img img {
    transform: scale(1.04);
    filter: grayscale(0%);
}

.about-split-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 55%, rgba(14,19,38,0.6) 100%);
    pointer-events: none;
}

/* Badge flotante "20+ años" */
.about-img-badge {
    position: absolute;
    bottom: 32px;
    left: 32px;
    background: rgba(14, 19, 38, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 3px solid #2857a7;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 4px;
}

.badge-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 2px;
}

.badge-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(161, 180, 220, 0.9);
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Panel oscuro */
.about-split-panel {
    background: #1c3464;
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    position: relative;
}

.about-split-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #2857a7;
}

.about-lead {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.12rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.65;
    margin: 0;
}

.about-lead strong { color: #90b8e8; }

.about-body {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.95rem;
    color: rgba(161, 180, 220, 0.8);
    line-height: 1.75;
    margin: 0;
}

/* Stats */
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
}

.about-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 20px;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.about-stat:last-child { border-right: none; padding-right: 0; padding-left: 20px; }
.about-stat:nth-child(2) { padding-left: 20px; }

.stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.9rem;
    letter-spacing: 2px;
    color: #ffffff;
    line-height: 1;
}

.stat-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    color: rgba(161, 180, 220, 0.65);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Botón CTA override para fondo oscuro */
.about-cta-btn {
    margin-top: 8px;
    color: rgba(255,255,255,0.55) !important;
    border-bottom-color: rgba(255,255,255,0.18) !important;
}
.about-cta-btn:hover {
    color: #ffffff !important;
    border-bottom-color: rgba(255,255,255,0.6) !important;
}

/* Grid Misión / Visión / Valores */
.mv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin-top: 3px;
}

.mv-item {
    background: #1c3464;
    padding: 36px 36px 40px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: background 0.35s ease;
}

.mv-item:hover { background: #214080; }

.mv-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    transition: background 0.35s ease;
}

.mv-item:hover::before { background: #2857a7; }

.mv-icon {
    color: #2857a7;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(40, 87, 167, 0.12);
    border-radius: 6px;
    transition: background 0.35s ease;
}

.mv-item:hover .mv-icon { background: rgba(40, 87, 167, 0.25); }

.mv-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 1.5px;
    color: #ffffff;
    margin: 0;
    line-height: 1;
}

.mv-text {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    color: rgba(161, 180, 220, 0.75);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 1024px) {
    .about-split { grid-template-columns: 1fr; }
    .about-split-img { height: 300px; }
    .mv-grid { grid-template-columns: 1fr; }
    .about-split-panel { padding: 36px 32px; }
}

@media (max-width: 600px) {
    .about-stats { grid-template-columns: 1fr; gap: 16px; }
    .about-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0 0 16px 0 !important; }
    .about-stat:last-child { border-bottom: none; }
}

/* =============================================
   FOOTER NUEVO — 4 columnas + barra inferior
   ============================================= */
.site-footer-new {
    background: #07090f;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Cuerpo: 4 columnas */
.footer-body {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 48px;
    padding: 64px 20px 56px;
}

/* Col brand */
.footer-col--brand {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-logo {
    max-height: 38px;
    width: auto;
    display: block;
}
.footer-logo-link { display: inline-block; }

.footer-tagline {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.45);
    margin: 0;
    max-width: 240px;
}

/* Social icons */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.footer-social-link:hover {
    border-color: #2857a7;
    background: #2857a7;
    color: #ffffff;
}

/* Columnas genéricas */
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-col-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: #ffffff;
    margin: 0 0 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-links a {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.48);
    text-decoration: none;
    transition: color 0.22s ease, padding-left 0.22s ease;
    display: inline-block;
}
.footer-links a:hover {
    color: #ffffff;
    padding-left: 4px;
}

/* Contacto */
.footer-col--contact {
    gap: 16px;
}
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.48);
    line-height: 1.55;
}
.footer-contact-list li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #2857a7;
}

/* Botón CTA en footer */
.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    background: #2857a7;
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 4px;
    width: fit-content;
    transition: background 0.25s ease;
}
.footer-cta-btn:hover {
    background: #14214b;
}

/* Barra inferior */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 18px 0;
}
.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-copyright {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.73rem;
    color: rgba(255,255,255,0.28);
}
.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-bottom-links a {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.73rem;
    color: rgba(255,255,255,0.28);
    text-decoration: none;
    transition: color 0.22s ease;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.65); }
.footer-bottom-links span { color: rgba(255,255,255,0.18); font-size: 0.7rem; }

/* Responsive footer */
@media (max-width: 1024px) {
    .footer-body { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 600px) {
    .footer-body { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ==============================================
   PAGE-SERVICIOS — Hero de página interior
   ============================================== */
.page-hero-section {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 420px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
    transform: scale(1.04);
}
.page-hero-section:hover .page-hero-bg {
    transform: scale(1.0);
}
.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(8, 15, 40, 0.88) 0%,
        rgba(8, 15, 40, 0.60) 60%,
        rgba(8, 15, 40, 0.3) 100%
    );
    z-index: 1;
}
.page-hero-content {
    position: relative;
    z-index: 2;
    padding-top: 68px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 700px;
}
.page-hero-eyebrow {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: #2857a7;
}
.page-hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.02;
    margin: 0;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
    animation: heroFadeIn 0.9s ease 0.2s both;
}
.page-hero-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(0.88rem, 1.4vw, 1rem);
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
    max-width: 520px;
    margin: 0;
}
.page-hero-scroll-indicator {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.page-hero-scroll-indicator span {
    color: rgba(255,255,255,0.45);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Satoshi', sans-serif;
}

/* ==============================================
   SECCIÓN INTRO / STATS
   ============================================== */
.srv-intro-section {
    background: #ffffff;
    padding: 64px 0 56px;
    border-bottom: 1px solid #edf2f7;
}
.srv-intro-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.srv-stats-row {
    display: flex;
    gap: 0;
    margin-top: 20px;
    border: 1px solid #e5e9ef;
}
.srv-stat-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 16px;
    border-right: 1px solid #e5e9ef;
    text-align: center;
}
.srv-stat-chip:last-child { border-right: none; }
.srv-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    color: #14214b;
    letter-spacing: 1px;
    line-height: 1;
}
.srv-stat-lbl {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #4a5568;
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .srv-intro-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ==============================================
   SERVICIOS PRINCIPALES — Bloques alternos
   ============================================== */
.srv-main-section {
    background: #f7f9fc;
    padding: 72px 0 0;
}
.srv-main-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 56px;
}

/* Bloque individual de servicio */
.srv-detail-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    background: #ffffff;
    overflow: hidden;
    border-top: 1px solid #edf2f7;
}
.srv-detail-block:last-child {
    border-bottom: 1px solid #edf2f7;
}
.srv-detail-reverse {
    direction: rtl;
}
.srv-detail-reverse > * {
    direction: ltr;
}

/* Imagen */
.srv-detail-img-wrap {
    position: relative;
    overflow: hidden;
}
.srv-detail-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease;
    filter: grayscale(20%);
}
.srv-detail-block:hover .srv-detail-img {
    transform: scale(1.05);
    filter: grayscale(0%);
}
.srv-detail-num {
    position: absolute;
    top: 24px;
    left: 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    color: rgba(255,255,255,0.18);
    letter-spacing: 2px;
    line-height: 1;
    z-index: 1;
    user-select: none;
}
.srv-detail-reverse .srv-detail-num {
    left: auto;
    right: 24px;
}

/* Contenido */
.srv-detail-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 56px 52px;
}
.srv-detail-icon {
    width: 48px;
    height: 48px;
    color: #2857a7;
}
.srv-detail-icon svg {
    width: 100%;
    height: 100%;
}
.srv-detail-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 400;
    color: #14214b;
    letter-spacing: 1.5px;
    margin: 0;
    line-height: 1.05;
}
.srv-detail-subtitulo {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #2857a7;
}
.srv-detail-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.93rem;
    line-height: 1.75;
    color: #4a5568;
    margin: 0;
    max-width: 440px;
}
.srv-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.srv-detail-list li {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.84rem;
    color: #2d3748;
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}
.srv-detail-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 1.5px;
    background: #2857a7;
    border-radius: 2px;
}

@media (max-width: 900px) {
    .srv-detail-block { grid-template-columns: 1fr; min-height: auto; direction: ltr; }
    .srv-detail-reverse { direction: ltr; }
    .srv-detail-img-wrap { height: 280px; position: relative; }
    .srv-detail-img { position: absolute; }
    .srv-detail-content { padding: 36px 28px; }
}

/* ==============================================
   SERVICIOS ADICIONALES — Card grid
   ============================================== */
.srv-adicionales-section {
    background: #ffffff;
    padding: 72px 0 80px;
}
.srv-adicionales-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 48px;
}
.srv-adicionales-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.srv-adicionales-right {
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
}
.srv-adicionales-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid #e5e9ef;
}
.srv-ad-card {
    padding: 36px 32px;
    border-right: 1px solid #e5e9ef;
    border-bottom: 1px solid #e5e9ef;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.srv-ad-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #2857a7;
    transition: width 0.4s ease;
}
.srv-ad-card:hover::before { width: 100%; }
.srv-ad-card:hover {
    background: #f7f9fc;
    box-shadow: 0 8px 30px rgba(20,33,75,0.07);
    z-index: 1;
}
.srv-ad-card:nth-child(3n) { border-right: none; }
.srv-ad-card:nth-child(4),
.srv-ad-card:nth-child(5),
.srv-ad-card:nth-child(6) { border-bottom: none; }

.srv-ad-icon {
    width: 44px;
    height: 44px;
    color: #2857a7;
    transition: transform 0.3s ease, color 0.3s ease;
}
.srv-ad-icon svg { width: 100%; height: 100%; }
.srv-ad-card:hover .srv-ad-icon {
    transform: scale(1.1);
    color: #14214b;
}
.srv-ad-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: #14214b;
    letter-spacing: 1.5px;
    margin: 0;
    line-height: 1.1;
}
.srv-ad-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.84rem;
    line-height: 1.65;
    color: #4a5568;
    margin: 0;
    flex: 1;
}
.srv-ad-line {
    width: 32px;
    height: 2px;
    background: #2857a7;
    border-radius: 2px;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .srv-adicionales-header { grid-template-columns: 1fr; gap: 20px; }
    .srv-adicionales-grid { grid-template-columns: repeat(2, 1fr); }
    .srv-ad-card:nth-child(3n) { border-right: 1px solid #e5e9ef; }
    .srv-ad-card:nth-child(even) { border-right: none; }
    .srv-ad-card:nth-child(n+5) { border-bottom: none; }
    .srv-ad-card:nth-child(4) { border-bottom: 1px solid #e5e9ef; }
}
@media (max-width: 600px) {
    .srv-adicionales-grid { grid-template-columns: 1fr; }
    .srv-ad-card { border-right: none !important; }
    .srv-ad-card:last-child { border-bottom: none; }
}

/* ==============================================
   PROCESO DE TRABAJO — Steps horizontales
   ============================================== */
.srv-proceso-section {
    background: #f7f9fc;
    padding: 72px 0 80px;
}
.srv-proceso-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 56px;
}
.srv-proceso-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.srv-proceso-right {
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
}
.srv-proceso-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    position: relative;
}

/* Línea conectora horizontal */
.srv-proceso-steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(100%/12);
    right: calc(100%/12);
    height: 1px;
    background: #e5e9ef;
    z-index: 0;
}

.srv-paso {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}
.srv-paso-num {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid #e5e9ef;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: #14214b;
    letter-spacing: 1px;
    flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    box-shadow: 0 4px 16px rgba(20,33,75,0.06);
}
.srv-paso:hover .srv-paso-num {
    background: #2857a7;
    border-color: #2857a7;
    color: #ffffff;
}
.srv-paso-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.srv-paso-titulo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #14214b;
    letter-spacing: 1.5px;
    margin: 0;
    line-height: 1.2;
}
.srv-paso-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #718096;
    margin: 0;
}
/* Connector no needed (using the ::before line) */
.srv-paso-connector { display: none; }

@media (max-width: 1100px) {
    .srv-proceso-steps { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
    .srv-proceso-steps::before { display: none; }
}
@media (max-width: 700px) {
    .srv-proceso-header { grid-template-columns: 1fr; gap: 20px; }
    .srv-proceso-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .srv-paso { text-align: left; flex-direction: row; align-items: flex-start; }
    .srv-paso-num { width: 52px; height: 52px; font-size: 1.2rem; flex-shrink: 0; }
}
@media (max-width: 480px) {
    .srv-proceso-steps { grid-template-columns: 1fr; }
}

/* ==============================================
   CTA CONTACTO — Barra oscura de cierre
   ============================================== */
.srv-cta-section {
    background: #0b0f1e;
    padding: 80px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.srv-cta-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
}
.srv-cta-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.srv-cta-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.05;
    margin: 0;
    letter-spacing: 1.5px;
}
.srv-cta-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.93rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    margin: 0;
    max-width: 480px;
}
.srv-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    flex-shrink: 0;
}
.srv-cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #2857a7;
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease;
}
.srv-cta-btn-primary:hover { background: #14214b; }
.srv-cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border: 1.5px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.75);
    font-family: 'Satoshi', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.srv-cta-btn-secondary:hover {
    border-color: rgba(255,255,255,0.7);
    color: #ffffff;
    background: rgba(255,255,255,0.05);
}

@media (max-width: 900px) {
    .srv-cta-inner { grid-template-columns: 1fr; gap: 32px; }
    .srv-cta-actions { flex-direction: row; flex-wrap: wrap; }
}
}


/* ==============================================
   PAGE-PROYECTOS — Barra de filtro de categorías
   ============================================== */
.proy-filter-bar {
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
    position: sticky;
    top: 68px;
    z-index: 50;
}
.proy-filter-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.proy-filter-inner::-webkit-scrollbar { display: none; }
.proy-filter-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #a0aec0;
    flex-shrink: 0;
}
.proy-filter-btns {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}
.proy-filter-btn {
    background: transparent;
    border: 1px solid #e5e9ef;
    padding: 7px 16px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    white-space: nowrap;
}
.proy-filter-btn:hover,
.proy-filter-btn.active {
    background: #14214b;
    color: #ffffff;
    border-color: #14214b;
}

/* ==============================================
   PAGE-PROYECTOS — Grid de tarjetas
   ============================================== */
.proy-all-section {
    background: #f7f9fc;
    padding: 56px 0 80px;
    min-height: 40vh;
}
.proy-all-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.proy-all-card {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.35s ease, transform 0.35s ease, opacity 0.3s ease;
    overflow: hidden;
}
.proy-all-card:hover {
    box-shadow: 0 12px 40px rgba(20, 33, 75, 0.14);
    transform: translateY(-4px);
    z-index: 1;
}
.proy-all-img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #d0d8e4;
}
.proy-all-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
    filter: grayscale(15%);
}
.proy-all-card:hover .proy-all-img {
    transform: scale(1.06);
    filter: grayscale(0%);
}
.proy-no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9eef5;
    color: #a0aec0;
    width: 100%;
    height: 100%;
}
.proy-no-img svg { width: 56px; height: 56px; }
.proy-all-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,22,65,0.92) 0%, rgba(10,22,65,0.5) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.proy-all-card:hover .proy-all-img-overlay { opacity: 1; }
.proy-all-stats-overlay {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.proy-all-stats-overlay li {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.88);
    line-height: 1.4;
}
.proy-all-stats-overlay li::before { content: '— '; opacity: 0.55; }
.proy-fase-chip {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #2857a7;
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    pointer-events: none;
}
.proy-all-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.proy-all-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.proy-all-cliente {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #2857a7;
}
.proy-all-anio {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: #a0aec0;
    letter-spacing: 1px;
}
.proy-all-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #14214b;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.1;
    transition: color 0.25s ease;
}
.proy-all-card:hover .proy-all-title { color: #2857a7; }
.proy-all-ubicacion {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.75rem;
    color: #718096;
}
.proy-all-ubicacion svg { flex-shrink: 0; }
.proy-all-line {
    width: 28px;
    height: 2px;
    background: #2857a7;
    border-radius: 2px;
    flex-shrink: 0;
    margin: 2px 0;
}
.proy-all-excerpt {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    line-height: 1.65;
    color: #718096;
    margin: 0;
    flex: 1;
}
.proy-card-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9eef5;
    color: #718096;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    text-align: center;
    padding: 12px;
}

/* ==============================================
   ESTADO VACÍO
   ============================================== */
.proy-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 20px;
    gap: 20px;
}
.proy-empty-icon { width: 72px; height: 72px; color: #cbd5e0; }
.proy-empty-icon svg { width: 100%; height: 100%; }
.proy-empty-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    margin: 0;
}
.proy-empty-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #718096;
    max-width: 420px;
    margin: 0;
}
.proy-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: #2857a7;
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s ease;
}
.proy-empty-btn:hover { background: #14214b; }

@media (max-width: 1024px) {
    .proy-all-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .proy-all-grid { grid-template-columns: 1fr; }
    .proy-filter-btn { padding: 6px 12px; }
}


/* ==============================================
   TARJETA — Badge de galería y botón
   ============================================== */
.proy-all-card.has-gallery { cursor: pointer; }

/* Badge contador de fotos (esquina superior izquierda) */
.proy-gallery-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* Hint "Ver X fotos" dentro del overlay hover */
.proy-open-gallery-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
    font-family: 'Satoshi', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Botón "VER GALERÍA" en el body de la tarjeta */
.proy-ver-galeria-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #2857a7;
    color: #2857a7;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease;
    margin-top: auto;
    align-self: flex-start;
}
.proy-ver-galeria-btn:hover,
.proy-all-card.has-gallery:hover .proy-ver-galeria-btn {
    background: #2857a7;
    color: #fff;
}

/* ==============================================
   LIGHTBOX MODAL
   ============================================== */
.imb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.imb-lightbox[hidden] {
    display: none !important;
}
.imb-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

/* Fondo oscuro */
.imb-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 24, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Contenedor principal */
.imb-lb-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px;
    box-sizing: border-box;
    transform: scale(0.97);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.imb-lightbox.is-open .imb-lb-container {
    transform: scale(1);
}

/* Cabecera */
.imb-lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 14px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 16px;
}
.imb-lb-header-info {
    display: flex;
    align-items: center;
    gap: 16px;
}
.imb-lb-project-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 2px;
}
.imb-lb-counter {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    letter-spacing: 1.5px;
}
.imb-lb-close {
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}
.imb-lb-close:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.5);
}

/* Stage (imagen + flechas) */
.imb-lb-stage {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 0;
    position: relative;
}
.imb-lb-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
.imb-lb-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.3s ease;
    border-radius: 2px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

/* Loading spinner */
.imb-lb-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
.imb-lb-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: #2857a7;
    border-radius: 50%;
    animation: imb-spin 0.8s linear infinite;
}
@keyframes imb-spin {
    to { transform: rotate(360deg); }
}

/* Flechas de navegación */
.imb-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
    flex-shrink: 0;
}
.imb-lb-nav:hover {
    background: rgba(40, 87, 167, 0.7);
    border-color: rgba(40, 87, 167, 0.8);
    transform: translateY(-50%) scale(1.08);
}
.imb-lb-prev { left: 12px; }
.imb-lb-next { right: 12px; }

/* Caption */
.imb-lb-caption {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
    padding: 10px 0 8px;
    min-height: 28px;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* Thumbnails */
.imb-lb-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 4px 4px;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
    scroll-behavior: smooth;
}
.imb-lb-thumbs::-webkit-scrollbar { height: 4px; }
.imb-lb-thumbs::-webkit-scrollbar-track { background: transparent; }
.imb-lb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

.imb-lb-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 50px;
    overflow: hidden;
    border-radius: 2px;
    cursor: pointer;
    background: #111;
    border: 2px solid transparent;
    padding: 0;
    transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.5;
}
.imb-lb-thumb:hover {
    opacity: 0.8;
    transform: scale(1.05);
}
.imb-lb-thumb.active {
    border-color: #2857a7;
    opacity: 1;
}
.imb-lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Responsive lightbox */
@media (max-width: 768px) {
    .imb-lb-container { padding: 0 8px 8px; }
    .imb-lb-nav { width: 40px; height: 40px; }
    .imb-lb-prev { left: 4px; }
    .imb-lb-next { right: 4px; }
    .imb-lb-thumb { width: 52px; height: 40px; }
    .imb-lb-project-name { font-size: 1rem; }
}
@media (max-width: 480px) {
    .imb-lb-nav { display: none; }
    .imb-lb-stage { justify-content: center; }
}


/* ══════════════════════════════════════════════
   PAGE NOSOTROS
   ══════════════════════════════════════════════ */

/* Eyebrow reutilizable */
.nos-eyebrow {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2857a7;
    display: block;
    margin-bottom: 14px;
}

/* ── INTRO EDITORIAL ── */
.nos-intro-section {
    background: #f7f9fc;
    padding: 80px 0 72px;
}
.nos-intro-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.nos-intro-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 24px;
}
.nos-intro-line {
    width: 40px;
    height: 3px;
    background: #2857a7;
    border-radius: 2px;
    margin-bottom: 32px;
}
.nos-stats-row {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.nos-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nos-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
    color: #14214b;
    line-height: 1;
    letter-spacing: 1px;
}
.nos-stat-plus {
    font-size: 1.6rem;
    color: #2857a7;
}
.nos-stat-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #718096;
    line-height: 1.4;
}
.nos-intro-lead {
    font-family: 'Satoshi', sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #14214b;
    margin: 0 0 20px;
    font-weight: 450;
}
.nos-intro-body {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #718096;
    margin: 0 0 28px;
}
.nos-intro-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nos-badge {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #2857a7;
    border: 1px solid #2857a7;
    padding: 5px 12px;
    border-radius: 2px;
}

/* ── IMAGEN FULL-WIDTH ── */
.nos-fullimg-section {
    overflow: hidden;
    max-height: 520px;
}
.nos-fullimg-wrap {
    position: relative;
}
.nos-fullimg {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
    filter: grayscale(20%);
}
.nos-fullimg-caption {
    position: absolute;
    bottom: 20px;
    right: 24px;
    background: rgba(20, 33, 75, 0.75);
    backdrop-filter: blur(4px);
    color: rgba(255,255,255,0.7);
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 14px;
}

/* ── MISIÓN / VISIÓN / VALORES ── */
.nos-mvv-section {
    background: #ffffff;
    padding: 80px 0 88px;
}
.nos-mvv-header {
    margin-bottom: 48px;
}
.nos-mvv-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1;
}
.nos-mvv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.nos-mvv-card {
    background: #f7f9fc;
    padding: 40px 32px 44px;
    position: relative;
    transition: background 0.3s ease, transform 0.3s ease;
}
.nos-mvv-card:hover {
    background: #eef2fa;
    transform: translateY(-4px);
}
.nos-mvv-card--accent {
    background: #14214b;
    color: #ffffff;
}
.nos-mvv-card--accent:hover {
    background: #1c2d65;
}
.nos-mvv-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 24px;
    color: #2857a7;
}
.nos-mvv-card--accent .nos-mvv-icon {
    color: rgba(255,255,255,0.65);
}
.nos-mvv-icon svg { width: 100%; height: 100%; }
.nos-mvv-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 5rem;
    font-weight: 400;
    color: rgba(20,33,75,0.07);
    letter-spacing: 2px;
    position: absolute;
    top: 20px;
    right: 24px;
    line-height: 1;
    pointer-events: none;
}
.nos-mvv-card--accent .nos-mvv-num {
    color: rgba(255,255,255,0.06);
}
.nos-mvv-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    margin: 0 0 14px;
}
.nos-mvv-card--accent .nos-mvv-card-title { color: #ffffff; }
.nos-mvv-card-line {
    width: 28px;
    height: 2px;
    background: #2857a7;
    border-radius: 2px;
    margin-bottom: 18px;
}
.nos-mvv-card--accent .nos-mvv-card-line { background: rgba(255,255,255,0.4); }
.nos-mvv-card-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.88rem;
    line-height: 1.75;
    color: #4a5568;
    margin: 0;
}
.nos-mvv-card--accent .nos-mvv-card-desc { color: rgba(255,255,255,0.72); }
.nos-mvv-values-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nos-mvv-values-list li {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.87rem;
    color: #4a5568;
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}
.nos-mvv-values-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background: #2857a7;
    border-radius: 50%;
}

/* ── CAPACIDADES OPERATIVAS ── */
.nos-capacidades-section {
    background: #f7f9fc;
    padding: 80px 0;
}
.nos-cap-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.nos-cap-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 24px;
}
.nos-cap-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #718096;
    margin: 0 0 36px;
}
.nos-cap-equip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
.nos-cap-equip-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nos-cap-equip-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #2857a7;
}
.nos-cap-equip-icon svg { width: 100%; height: 100%; }
.nos-cap-equip-item span {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2d3748;
    line-height: 1.3;
}

/* Stack de imágenes */
.nos-cap-img-stack {
    position: relative;
    height: 500px;
}
.nos-cap-img-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 75%;
    overflow: hidden;
}
.nos-cap-img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(15%);
    transition: filter 0.4s;
}
.nos-cap-img-main:hover img { filter: grayscale(0%); }
.nos-cap-img-secondary {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    height: 50%;
    overflow: hidden;
    border: 4px solid #f7f9fc;
}
.nos-cap-img-secondary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(10%);
    transition: filter 0.4s;
}
.nos-cap-img-secondary:hover img { filter: grayscale(0%); }

/* ── SECTORES ── */
.nos-sectores-section {
    background: #ffffff;
    padding: 80px 0 88px;
}
.nos-sectores-inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.nos-sectores-header {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nos-sectores-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1;
}
.nos-sectores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.nos-sector-card {
    background: #f7f9fc;
    padding: 32px 28px 36px;
    transition: background 0.28s ease, transform 0.28s ease;
    border-left: 3px solid transparent;
}
.nos-sector-card:hover {
    background: #eef2fa;
    border-left-color: #2857a7;
    transform: translateX(4px);
}
.nos-sector-icon {
    width: 36px;
    height: 36px;
    color: #2857a7;
    margin-bottom: 18px;
}
.nos-sector-icon svg { width: 100%; height: 100%; }
.nos-sector-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    margin: 0 0 10px;
}
.nos-sector-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #718096;
    margin: 0;
}

/* ── CERTIFICACIONES CON FONDO ── */
.nos-cert-section {
    position: relative;
    padding: 88px 0;
    overflow: hidden;
}
.nos-cert-bg {
    position: absolute;
    inset: 0;
}
.nos-cert-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nos-cert-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,18,50,0.95) 0%, rgba(20,33,75,0.88) 100%);
}
.nos-cert-content {
    position: relative;
    z-index: 1;
}
.nos-cert-box {
    max-width: 680px;
}
.nos-cert-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 2px;
    line-height: 1.05;
    margin: 0 0 40px;
}
.nos-cert-items {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.nos-cert-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.nos-cert-item-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: #2857a7;
    margin-top: 2px;
}
.nos-cert-item-icon svg { width: 100%; height: 100%; }
.nos-cert-item strong {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.nos-cert-item p {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.83rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* ── RESPONSIVE NOSOTROS ── */
@media (max-width: 1024px) {
    .nos-intro-inner { grid-template-columns: 1fr; gap: 40px; }
    .nos-mvv-grid { grid-template-columns: 1fr; gap: 2px; }
    .nos-cap-inner { grid-template-columns: 1fr; }
    .nos-cap-img-stack { height: 360px; margin-top: 0; }
    .nos-sectores-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .nos-mvv-card { padding: 28px 22px 32px; }
    .nos-sectores-grid { grid-template-columns: 1fr; }
    .nos-cap-equip-grid { grid-template-columns: 1fr; }
    .nos-cap-img-stack { height: 260px; }
    .nos-cap-img-secondary { display: none; }
    .nos-cap-img-main { width: 100%; height: 100%; }
    .nos-stats-row { gap: 24px; }
    .nos-fullimg { height: 280px; }
}


/* ══════════════════════════════════════════════
   PAGE CONTACTO
   ══════════════════════════════════════════════ */

.cnt-eyebrow {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2857a7;
    display: block;
    margin-bottom: 14px;
}

/* ── BLOQUE PRINCIPAL ── */
.cnt-main-section {
    background: #f7f9fc;
    padding: 80px 0 88px;
}
.cnt-main-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 72px;
    align-items: start;
}

/* ── Columna de datos ── */
.cnt-info-col {
    padding-top: 8px;
}
.cnt-info-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0 0 22px;
}
.cnt-info-line {
    width: 40px;
    height: 3px;
    background: #2857a7;
    border-radius: 2px;
    margin-bottom: 24px;
}
.cnt-info-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: #718096;
    margin: 0 0 40px;
}
.cnt-data-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cnt-data-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.cnt-data-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #e5e9ef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2857a7;
    padding: 10px;
    box-sizing: border-box;
}
.cnt-data-icon svg { width: 100%; height: 100%; }
.cnt-data-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
}
.cnt-data-body strong {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #14214b;
}
.cnt-data-body span,
.cnt-data-body a {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.88rem;
    color: #718096;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s;
}
.cnt-data-body a:hover { color: #2857a7; }

/* Redes sociales */
.cnt-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cnt-social-label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #a0aec0;
    text-transform: uppercase;
}
.cnt-social-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cnt-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid #e5e9ef;
    background: #ffffff;
    color: #14214b;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background 0.22s, color 0.22s, border-color 0.22s;
}
.cnt-social-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.cnt-social-btn:hover {
    background: #14214b;
    color: #fff;
    border-color: #14214b;
}
.cnt-social-btn--wa:hover { background: #25D366; border-color: #25D366; }

/* ── Tarjeta de formulario ── */
.cnt-form-col { position: relative; }
.cnt-form-card {
    background: #ffffff;
    padding: 48px 44px 52px;
    box-shadow: 0 4px 40px rgba(20,33,75,0.08);
}
.cnt-form-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #edf2f7;
}
.cnt-form-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.9rem;
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    margin: 0 0 8px;
}
.cnt-form-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
    line-height: 1.65;
    color: #718096;
    margin: 0;
}

/* Fila de 2 campos */
.cnt-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

/* Campo individual */
.cnt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.cnt-form-row .cnt-field { margin-bottom: 0; }
.cnt-field label {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #2d3748;
}
.cnt-req { color: #2857a7; }
.cnt-field input,
.cnt-field select,
.cnt-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    color: #14214b;
    background: #f7f9fc;
    border: 1px solid #e5e9ef;
    border-radius: 0;
    outline: none;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
}
.cnt-field input::placeholder,
.cnt-field textarea::placeholder { color: #b0bec5; }
.cnt-field input:focus,
.cnt-field select:focus,
.cnt-field textarea:focus {
    border-color: #2857a7;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(40,87,167,0.1);
}
.cnt-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232857a7' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
.cnt-field textarea { resize: vertical; min-height: 120px; }

/* Footer del formulario */
.cnt-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.cnt-privacy-note {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    line-height: 1.6;
    color: #a0aec0;
    margin: 0;
    max-width: 280px;
}

/* Botón submit */
.cnt-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: #2857a7;
    color: #ffffff;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.cnt-submit-btn:hover {
    background: #14214b;
    transform: translateX(3px);
}
.cnt-submit-arrow { transition: transform 0.25s ease; flex-shrink: 0; }
.cnt-submit-btn:hover .cnt-submit-arrow { transform: translateX(4px); }

/* Error alert */
.cnt-error-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-left: 3px solid #e53e3e;
    color: #c53030;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.85rem;
    margin-bottom: 24px;
}

/* Estado éxito */
.cnt-success-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    gap: 16px;
}
.cnt-success-icon {
    width: 64px;
    height: 64px;
    background: #ebf4ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2857a7;
}
.cnt-success-icon svg { width: 32px; height: 32px; }
.cnt-success-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    margin: 0;
}
.cnt-success-desc {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #718096;
    max-width: 380px;
    margin: 0;
}
.cnt-success-back {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border: 1px solid #2857a7;
    color: #2857a7;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 8px;
    transition: background 0.22s, color 0.22s;
}
.cnt-success-back:hover { background: #2857a7; color: #fff; }

/* ── MAPA ── */
.cnt-map-section {
    background: #ffffff;
}
.cnt-map-header {
    padding: 64px 0 36px;
}
.cnt-map-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 400;
    color: #14214b;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1;
}
.cnt-map-wrap {
    position: relative;
}
.cnt-map-iframe {
    display: block;
    width: 100%;
    height: 480px;
    border: none;
    filter: grayscale(25%) contrast(1.05);
}
.cnt-map-pin-card {
    position: absolute;
    top: 24px;
    right: 40px;
    background: #ffffff;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(20,33,75,0.14);
    max-width: 280px;
}
.cnt-map-pin-icon {
    width: 36px;
    height: 36px;
    color: #2857a7;
    flex-shrink: 0;
    margin-top: 2px;
}
.cnt-map-pin-icon svg { width: 100%; height: 100%; }
.cnt-map-pin-card strong {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: #14214b;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.cnt-map-pin-card span {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: 12px;
}
.cnt-map-directions {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #2857a7;
    text-decoration: none;
    transition: opacity 0.2s;
}
.cnt-map-directions:hover { opacity: 0.7; }

/* ── BARRA RÁPIDA ── */
.cnt-quick-bar {
    background: #14214b;
    padding: 32px 0;
}
.cnt-quick-inner {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}
.cnt-quick-item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    padding: 10px 24px;
    min-width: 200px;
}
.cnt-quick-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: #2857a7;
}
.cnt-quick-icon svg { width: 100%; height: 100%; }
.cnt-quick-item strong {
    display: block;
    font-family: 'Satoshi', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}
.cnt-quick-item span {
    font-family: 'Satoshi', sans-serif;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
}
.cnt-quick-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

/* Responsive Contacto */
@media (max-width: 1024px) {
    .cnt-main-inner { grid-template-columns: 1fr; gap: 48px; }
    .cnt-map-pin-card { position: static; max-width: 100%; box-shadow: none; border-top: 1px solid #edf2f7; }
}
@media (max-width: 768px) {
    .cnt-form-card { padding: 32px 24px 36px; }
    .cnt-form-row { grid-template-columns: 1fr; gap: 0; }
    .cnt-form-footer { flex-direction: column; align-items: stretch; }
    .cnt-submit-btn { justify-content: center; }
    .cnt-privacy-note { max-width: 100%; }
    .cnt-quick-inner { flex-direction: column; }
    .cnt-quick-divider { width: 100%; height: 1px; }
    .cnt-quick-item { width: 100%; padding: 12px 0; }
    .cnt-map-iframe { height: 300px; }
}