/* === Reseteo Básico y Fuentes Estilo Apple === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* Desplazamiento suave al hacer clic en enlaces internos */
}

/* === Estilos para el Body === */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* --- ESTILO POR DEFECTO (Para páginas SIN cinta anuncios) --- */
    /* Padding solo para la altura del header fijo (~68px). */
    padding-top: 100px; /* Valor por defecto, ajustado abajo para page-index */
}
/* Ajuste específico para la página de inicio que SÍ tiene la cinta */
body.page-index {
    /* Altura Cinta (~35px) + Altura Header (~68px) = ~103px */
    padding-top: 103px; /* Ajusta si las alturas cambian */
}


/* === Contenedor Principal === */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* === Utilidades === */
.text-center {
    text-align: center;
}

.section-padding {
    padding: 60px 0;
}
/* Padding original para secciones principales en index y categorías */
#hero + .payment-methods-ribbon + .section-padding, /* Primer section después de cinta pagos en index */
#servicios, /* Sección categorías en index */
#como-trabajamos-seccion, /* Nueva sección */
#nosotros,
#contacto,
#servicios-topografia, /* Sección servicios en topografia.html */
#servicios-ingenieria { /* Sección servicios en ingenieria.html */
    padding: 80px 0;
}


.bg-light { /* Usado en index para cinta clientes (si existiera) */
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

/* === Estilos para Cinta de Anuncios Desplazable (SOLO EN INDEX) === */
.announcement-banner {
    background-color: #1d1d1f;
    color: #ffffff;
    padding: 8px 0; /* Controla altura (~35px total aprox) */
    width: 100%;
    overflow: hidden;
    position: fixed; /* Fijo en la parte superior */
    top: 0;
    left: 0;
    z-index: 1001; /* Encima del header */
}

.scrolling-text-container {
    width: 100%;
}

.scrolling-text-content {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 35s linear infinite; /* Ajusta duración para velocidad */
    will-change: transform;
}

@keyframes scroll-left {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); } /* Asumiendo contenido duplicado */
}

.scrolling-text-content span {
    display: inline-block;
    padding: 0 25px;
    font-size: 0.85rem;
    font-weight: 500;
    vertical-align: middle;
}

/* === Encabezado (Estilos Comunes) === */
.site-header {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 15px 0; /* Afecta altura total del header (~68px con logo de 30px) */
    position: fixed;
    width: 100%;
    /* --- IMPORTANTE: Ajuste para Header Fijo + Cinta Anuncios --- */
    /* Empuja el header debajo de la cinta. ¡¡AJUSTA ESTE VALOR!! (altura aprox. cinta) */
    top: 35px; /* Solo aplica en page-index, corregido abajo */
    left: 0;
    z-index: 1000; /* Debajo de la cinta de anuncios */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* Corrección: El header solo está debajo de la cinta en page-index */
body:not(.page-index) .site-header {
    top: 0;
}


/* === Ajuste para Anclajes con Header Fijo === */

/* Aplica a las secciones principales que son destinos de anclaje */
#servicios,
#como-trabajamos-seccion, /* Nueva sección */
#nosotros,
#contacto,
#servicios-topografia,
#servicios-ingenieria {
    /* Offset base = Altura Aprox. Header (~68px). ¡¡AJUSTA SI LA ALTURA DEL HEADER CAMBIA!! */
    scroll-margin-top: 68px;
}

/* Sobrescribe el valor SOLO para la página de inicio (index.html) */
body.page-index #servicios,
body.page-index #como-trabajamos-seccion, /* Nueva sección */
body.page-index #nosotros,
body.page-index #contacto {
    /* Nuevo Offset = Altura Aprox. Cinta (~35px) + Altura Aprox. Header (~68px) = ~103px */
    /* Ajusta si las alturas cambian */
    scroll-margin-top: 103px;
}


/* === Ajustes Responsivos para Anclajes (si la altura del header cambia significativamente en móvil) === */
@media (max-width: 768px) {
    #servicios,
    #como-trabajamos-seccion, /* Nueva sección */
    #nosotros,
    #contacto,
    #servicios-topografia,
    #servicios-ingenieria {
        /* Offset Móvil = Altura Aprox. Header Móvil (~55px). ¡¡AJUSTA!! */
        scroll-margin-top: 55px;
    }

    body.page-index #servicios,
    body.page-index #como-trabajamos-seccion, /* Nueva sección */
    body.page-index #nosotros,
    body.page-index #contacto {
         /* Offset Móvil Index = Altura Cinta Móvil (~35px) + Header Móvil (~55px) = ~90px */
         /* ¡¡AJUSTA!! */
        scroll-margin-top: 90px;
    }
}


.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilos Logo Header */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #1d1d1f;
}
.logo-img {
    height: 30px; /* Ajusta si quieres el logo más grande/pequeño, recalcula alturas header/body */
    width: auto;
    margin-right: 10px;
    vertical-align: middle;
}
.site-title-text {
    font-size: 1.5em;
    font-weight: 600;
}

/* === Estilos Navegación Header (Adaptado para Móvil) === */

.main-nav ul {
    list-style: none;
    display: flex;
}
.main-nav li {
    margin-left: 25px; /* Espacio entre items de nav */
}
.main-nav a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: color 0.3s ease;
}
.main-nav a:hover,
.main-nav a:focus {
    color: #007aff;
}

/* === Sección Hero (Base y Específicos) === */
.hero-section {
    position: relative;
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
    padding: 80px 20px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Hero Index */
#hero.hero-section {
     min-height: 85vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url('https://www.cygingspa.cl/images/TOPOGRAFÍA_GPS_CYG_ING.jpeg');
}
/* Hero Categorías */
.hero-topografia {
    background-image: linear-gradient(rgba(0, 86, 39, 0.4), rgba(0, 0, 0, 0.3)), url('https://www.cygingspa.cl/images/TOPOGRAFÍA_GPS_CYG_ING.jpeg');
}
.hero-ingenieria {
     background-image: linear-gradient(rgba(0, 66, 122, 0.4), rgba(0, 0, 0, 0.3)), url('https://www.cygingspa.cl/images/TOPOGRAFÍA_GPS_CYG_ING.jpeg');
}
/* Hero Servicios Específicos */
.hero-asesoramiento {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url('https://www.cygingspa.cl/images/ASESORAMIENTO_EN_COMPRA_DE_PARCELAS_CYG_ING-Topografía.jpg');
}
.hero-arriendo {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url('https://www.cygingspa.cl/images/GPS_RTK-Arriendo.jpg');
}
.hero-construccion {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url('https://www.cygingspa.cl/images/CONSTRUCCION_CYG_ING_V_REGION-Ingenieria.jpg');
}
.hero-modelamiento {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url('https://www.cygingspa.cl/images/MODELADO_3D_ESTRUCTURA-Ingenieria.jpg');
}
.hero-levantamientos {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url('https://www.cygingspa.cl/images/LEVANTAMIENTOS_TOPOGRAFICOS_CYG_ING-Topografia.jpg');
}
.hero-loteos {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url('https://www.cygingspa.cl/images/LOTEOS_Y_SUBDIVISIONES_V_REGIÓN-Topografía.jpg');
}
.hero-desarrollo-ing {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url('https://www.cygingspa.cl/images/DESARROLLO_INGENIERIA_CYG_ING-Ingenieria.jpg');
}

/* Contenido del Hero */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}
.hero-title {
    font-size: 3.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.hero-section:not(#hero):not(.hero-topografia):not(.hero-ingenieria) .hero-title {
    font-size: 2.8rem;
}
.hero-subtitle {
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#hero .hero-subtitle {
    margin-bottom: 40px;
}

/* === Cinta Métodos de Pago (SOLO EN INDEX) === */
.payment-methods-ribbon {
    background-color: #f8f9fa;
    padding: 0.75rem 0;
    overflow: hidden;
    border-bottom: 1px solid #e9ecef;
    margin-top: 0;
}
.payment-swiper .swiper-wrapper {
     transition-timing-function: linear !important;
     align-items: center;
}
.payment-swiper .swiper-slide {
    width: auto !important; /* Cambiado a auto */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 0 15px; /* Añadido padding horizontal para separar logos */
}
.payment-swiper .swiper-slide img {
    max-height: 28px; /* Ajusta para tamaño logos */
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: opacity 0.3s ease;
    display: block;
    margin: 0 auto;
}

/* === Botones === */
.btn { display: inline-block; padding: 12px 30px; border-radius: 30px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; cursor: pointer; border: none; }
.btn-primary { background-color: #007aff; color: #ffffff; }
.btn-primary:hover, .btn-primary:focus { background-color: #0056b3; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3); }

/* === Títulos de Sección === */
.section-title { font-size: 2.5rem; font-weight: 600; color: #1d1d1f; margin-bottom: 50px; }

/* === Sección Servicios Categorías (Index) === */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Mantenido 3 columnas */
    gap: 30px;
}
.category-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: #ffffff;
    padding: 45px 40px;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}
.category-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.category-icon {
    font-size: 2.5rem; /* 40px */
    color: #007aff;
    margin-bottom: 20px;
    display: block;
}
.category-title {
    font-size: 1.7rem; /* ~27px */
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
}
.category-description {
    font-size: 1rem; /* 16px */
    color: #555;
    line-height: 1.7;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Estilos para la Sección Cómo Trabajamos ===== */
.como-trabajamos-section {
    background-color: #f8f9fa; /* Fondo gris claro para diferenciar */
    border-top: 1px solid #e9ecef; /* Borde superior para separar */
    /* Hereda padding de .section-padding */
}

.como-trabajamos-subtitle {
    color: #555; /* Cambiado de rojo a gris secundario */
    font-size: 1.2em;
    font-weight: 500;
    margin-top: -15px;
    margin-bottom: 40px;
}

.como-trabajamos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.como-trabajamos-item {
    text-align: center;
    padding: 20px 15px;
}

/* Iconos dentro de los items */
.como-trabajamos-item .item-icon-img { /* Cambiado a la clase de la imagen */
    display: block; /* Para aplicar márgenes correctamente */
    margin-left: auto; /* Centrar la imagen */
    margin-right: auto; /* Centrar la imagen */
    margin-bottom: 20px; /* Espacio debajo */
    width: 70px;  /* Ajusta el ancho deseado */
    height: 70px; /* Ajusta el alto deseado (o usa 'auto' si quieres mantener proporción) */
    /* La propiedad 'color' ya no afecta a las imágenes SVG de esta manera */
    /* Puedes necesitar editar los SVG si quieres cambiar colores internos, o usar filtros CSS (más complejo) */
}


/* Títulos dentro de los items */
.como-trabajamos-item .item-title {
    font-size: 1.7rem; /* Ajustado para coincidir con .category-title (~27px) */
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Descripciones dentro de los items */
.como-trabajamos-item .item-description {
    font-size: 1rem; /* Coincide con .category-description (16px) */
    color: #555; /* Coincide con .category-description */
    line-height: 1.6;
}

/* Texto fuerte (negrita) dentro de las descripciones */
.como-trabajamos-item .item-description strong {
    color: #333;
    font-weight: 600;
}

/* --- FIN ESTILOS BASE CÓMO TRABAJAMOS --- */


/* === Sección Servicios Tarjetas (Páginas Categoría) === */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.service-card { display: block; text-decoration: none; color: inherit; background-color: #ffffff; padding: 35px 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); border: 1px solid #e9ecef; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { transform: translateY(-8px) scale(1.05); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12); }
.service-title { font-size: 1.4rem; font-weight: 600; color: #1d1d1f; margin-bottom: 15px; }
.service-description { font-size: 1rem; color: #555; line-height: 1.7; }

/* === Contenido Páginas Detalle === */
.detalle-container { max-width: 900px; margin: 0 auto; padding: 30px; background-color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 8px; }
.detalle-container img, .detalle-container video, .detalle-container iframe { max-width: 100%; height: auto; margin-bottom: 25px; border-radius: 5px; }
.detalle-container h2 { font-size: 1.8rem; font-weight: 600; margin-top: 40px; margin-bottom: 20px; color: #1d1d1f; }
.detalle-container h3 { font-size: 1.4rem; font-weight: 600; margin-top: 30px; margin-bottom: 15px; color: #2c3e50; }
.detalle-container p { margin-bottom: 15px; }
.detalle-container ul { list-style: disc; margin-left: 25px; margin-bottom: 20px; padding-left: 10px; }
.detalle-container ul li { margin-bottom: 8px; }
.detalle-container hr { margin: 40px 0; border: none; border-top: 1px solid #eee; }

/* === Bloques de Información (.info-card) === */
.info-card { background-color: #ffffff; padding: 35px 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); border: 1px solid #e9ecef; margin-top: 40px; margin-bottom: 40px; }
.info-card h2 { margin-bottom: 20px; color: #1d1d1f; font-size: 1.5rem; margin-top: 0;}
.info-card ul { padding-left: 20px; list-style: disc; color: #555; margin-left: 0; }
.info-card ul li { margin-bottom: 10px; }
.info-card ul li:last-child { margin-bottom: 0; }

/* === Galerías (.equipment-gallery, .galeria-grid) === */
.equipment-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
.equipment-gallery img { margin-bottom: 0; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px;}
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-top: 20px; margin-bottom: 25px; }
.galeria-grid img { width: 100%; height: auto; max-width: 100%; display: block; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); object-fit: cover; aspect-ratio: 1 / 1; }

/* === Sección Nosotros (Index) === */
.about-section { background-image: url('https://www.cygingspa.cl/images/LEVANTAMIENTO_FOTOGRAMETRICO-NOSOTROS.JPG'); background-size: cover; background-position: center center; background-repeat: no-repeat; color: #ffffff; position: relative; z-index: 1; }
.about-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: -1; }
.about-section a.section-title.about-title-link { color: #ffffff; text-decoration: none; display: inline-block; transition: color 0.3s ease, text-decoration 0.3s ease; }
.about-section a.section-title.about-title-link:hover { color: #eee; }
.about-text { max-width: 750px; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; }

/* === Página Nosotros - Equipo === */
.hero-nosotros-equipo { background-image: linear-gradient(rgba(44, 62, 80, 0.5), rgba(0, 0, 0, 0.4)), url('https://www.cygingspa.cl/images/EQUIPO_CYG-Nosotros.JPG'); min-height: 55vh; }
.team-profile { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; margin-bottom: 60px; padding: 30px; background-color: #f8f9fa; border-radius: 15px; border: 1px solid #e9ecef; }
.profile-image-container { flex: 0 0 280px; max-width: 280px; }
.profile-photo { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); object-fit: cover; }
.profile-info { flex: 1; min-width: 300px; }
.profile-name { font-size: 2rem; font-weight: 600; color: #1d1d1f; margin-bottom: 5px; }
.profile-title { font-size: 1.2rem; font-weight: 500; color: #007aff; margin-bottom: 15px; }
.profile-divider { border: none; height: 1px; background-color: #e0e0e0; margin-bottom: 20px; }
.profile-bio p { margin-bottom: 15px; color: #555; line-height: 1.7; }
.profile-responsibilities { margin-top: 25px; border-left: 3px solid #007aff; padding-left: 20px; }
.profile-responsibilities h4 { font-size: 1.1rem; font-weight: 600; color: #333; margin-bottom: 10px; }
.profile-responsibilities ul { list-style: disc; margin-left: 20px; padding-left: 0; color: #555; }
.profile-responsibilities ul li { margin-bottom: 6px; font-size: 0.95rem; }
.profile-contact-link { margin-top: 30px; }
.btn-secondary { background-color: transparent; color: #007aff; border: 1px solid #007aff; padding: 10px 25px; }
.btn-secondary:hover, .btn-secondary:focus { background-color: rgba(0, 122, 255, 0.1); color: #0056b3; border-color: #0056b3; transform: translateY(-1px); box-shadow: none; }
@media (max-width: 768px) {
    .team-profile { flex-direction: column; align-items: center; text-align: center; padding: 25px; }
    .profile-image-container { flex-basis: auto; width: 60%; max-width: 250px; margin-bottom: 25px; }
    .profile-info { min-width: auto; width: 100%; }
    .profile-name { font-size: 1.8rem; }
    .profile-title { font-size: 1.1rem; }
    .profile-responsibilities { text-align: left; border-left-width: 2px; padding-left: 15px; }
    .profile-responsibilities ul { margin-left: 15px; }
    .profile-contact-link { text-align: center; }
}

/* === Sección Contacto === */
#contacto .contact-subtitle { margin-bottom: 40px; color: #555; max-width: 600px; margin-left: auto; margin-right: auto; }
#contacto .contact-form-container { max-width: 650px; margin: 0 auto; background-color: #ffffff; padding: 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); border: 1px solid #e9ecef; }
#contacto-detalle { margin-top: 40px; }
#contacto-detalle .contact-form-container { max-width: 100%; box-shadow: none; padding: 0; border: none; background-color: transparent; }
#contacto-detalle h2 { font-size: 1.8rem; }
.contact-form .form-group { margin-bottom: 25px; }
.contact-form label { display: block; font-weight: 500; margin-bottom: 8px; color: #333; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea { width: 100%; padding: 12px 15px; border: 1px solid #ced4da; border-radius: 8px; font-size: 1rem; font-family: inherit; background-color: #fff; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: #007aff; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); }
.contact-form textarea { resize: vertical; min-height: 120px; }

/* === Pie de Página === */
.site-footer-bottom { background-color: #f8f9fa; color: #6c757d; padding: 30px 0; margin-top: 80px; border-top: 1px solid #e9ecef; font-size: 0.9rem; }
.footer-email-link { color: #6c757d; text-decoration: none; }
.footer-email-link:hover { color: #007aff; text-decoration: underline; }

/* === Botón Flotante WhatsApp === */
.whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 2px 2px 6px rgba(0,0,0,0.3); z-index: 100; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 4px 4px 10px rgba(0,0,0,0.4); }
.whatsapp-float svg { width: 35px; height: 35px; fill: #fff; }

/* === Animaciones Scroll === */
.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* === Responsividad (Ajustes principales para Navegación Móvil) === */
@media (max-width: 768px) {
    /* Ajustes de padding/top para elementos fijos en móvil */
    /* body { padding-top: 90px; } */
    body.page-index .site-header { top: 35px; }
    .site-header { top: 0; padding: 23px 0; /* Altura Aprox Header Móvil: ~55px */ }
    body:not(.page-index) { padding-top: 55px; }
    .announcement-banner { padding: 6px 0; /* Altura Aprox Cinta Móvil: ~35px */ }

    /* --- Estilos Navegación Móvil --- */
    .main-nav { position: fixed; top: 0; right: -100%; width: 75%; max-width: 300px; height: 100vh; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: right 0.35s ease-in-out; z-index: 999; padding-top: 80px; }
    .nav-list { flex-direction: column; align-items: stretch; padding: 0; }
    .main-nav li { margin-left: 0; width: 100%; text-align: left; }
    .main-nav a { display: block; padding: 1rem 1.5rem; font-size: 1.1rem; color: #333; border-bottom: 1px solid #eee; }
    .main-nav li:last-child a { border-bottom: none; }
    .main-nav a:hover, .main-nav a:focus { background-color: rgba(0, 122, 255, 0.05); }
    .main-nav.nav-open { right: 0; }

    /* Otros ajustes responsivos */
    .logo-img { height: 25px; }
    .site-title-text { font-size: 1.3em; }
    .hero-title { font-size: 2.5rem !important; }
    .hero-subtitle { font-size: 1.1rem; }
    .section-title { font-size: 2rem; }
    .hero-section { min-height: 50vh; padding-top: 40px; padding-bottom: 40px; }
    #hero.hero-section { min-height: 60vh; }

    .category-grid { grid-template-columns: 1fr; } /* Cambio a 1 columna en móvil */
    .category-card { padding: 35px 30px; }
    .category-title { font-size: 1.5rem; } /* Ajuste tamaño móvil */

    /* Ajustes para 'Cómo Trabajamos' en Tablet/Móvil */
    .como-trabajamos-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
        gap: 25px;
    }
    .como-trabajamos-subtitle {
        margin-bottom: 30px;
        font-size: 1.15em;
    }
    .como-trabajamos-item .item-icon {
        font-size: 2.2rem; /* Reducido para tablet (~35px) */
        margin-bottom: 18px;
    }
    .como-trabajamos-item .item-title {
        font-size: 1.5rem; /* Ajustado para coincidir con .category-title móvil */
    }
    .como-trabajamos-item .item-description {
        font-size: 0.95em;
    }


    .services-grid { grid-template-columns: 1fr; }
    .about-text { font-size: 1rem; }
    #contacto .contact-form-container, .info-card { padding: 30px 20px; }
    .section-padding, #hero + .payment-methods-ribbon + .section-padding, #servicios, #como-trabajamos-seccion, #nosotros, #contacto, #servicios-topografia, #servicios-ingenieria { padding: 50px 0; }
    .detalle-container { padding: 20px; }
    .detalle-container h2, #contacto-detalle h2 { font-size: 1.6rem; }

    .whatsapp-float { width: 50px; height: 50px; bottom: 20px; right: 20px; }
    .whatsapp-float svg { width: 28px; height: 28px; }
}

@media (max-width: 480px) {
    /* Ajuste padding-top para el body en móvil muy pequeño */
    body { padding-top: 83px; /* Altura Cinta (~28px) + Altura Header (~55px) */ }
    body:not(.page-index) { padding-top: 55px; /* Solo Header */ }
    body.page-index .site-header { top: 28px; /* Debajo de la cinta */ }

    .announcement-banner { padding: 5px 0; /* Altura ~28px */ }
    .scrolling-text-content span { font-size: 0.7rem; padding: 0 15px; }
    .logo-img { height: 22px; }
    .site-title-text { font-size: 1.2em; }
    .hero-title { font-size: 2rem !important; }

    /* Pasar 'Cómo Trabajamos' a 1 columna en móvil pequeño */
    .como-trabajamos-grid {
        grid-template-columns: 1fr; /* 1 columna */
        gap: 20px;
    }
    /* Ajustar tamaños de fuente/icono */
    .como-trabajamos-item .item-icon {
        font-size: 2rem; /* Reducido aún más (~32px) */
        margin-bottom: 15px;
    }
    .como-trabajamos-item .item-title {
        font-size: 1.3rem; /* Reducido aún más */
    }
    .como-trabajamos-subtitle {
        margin-bottom: 25px;
        font-size: 1.1em;
    }

    .galeria-grid, .equipment-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .payment-swiper .swiper-slide img { max-height: 22px; }

    .whatsapp-float { width: 45px; height: 45px; bottom: 15px; right: 15px; }
    .whatsapp-float svg { width: 24px; height: 24px; }

    .section-padding, #hero + .payment-methods-ribbon + .section-padding, #servicios, #como-trabajamos-seccion, #nosotros, #contacto, #servicios-topografia, #servicios-ingenieria { padding: 40px 0; }
}