/*
 * WalaDigital Style Guide 2025
 *
 * This CSS is designed to align with a modern, professional, and dynamic
 * aesthetic, reflecting WalaDigital's brand identity.
 *
 * Adjust CSS Variables below to match your specific brand guidelines
 * (colors, fonts, spacing values) as defined in "Nuevo Branding 2025.jpg".
 */

/* ==========================================================================
   1. CSS Custom Properties (Variables)
   ========================================================================== */
:root {
    /* Brand Colors (Updated to WalaDigital's logo colors) */
    --color-primary: #00BCD4;        /* Turquesa/Cian de "WALA DIGITAL" - para CTAs, highlights */
    --color-secondary: #FFC107;      /* Amarillo/Naranja de la bombilla - para acentos secundarios, hover */
    --color-accent-1: #25D366;       /* Verde de WhatsApp (si aplica) */
    --color-accent-2: #F0F0F0;       /* Gris claro para texto en fondos oscuros */
    --color-dark-blue: #1A2C42;      /* Azul oscuro del fondo del logo - para fondos principales */
    --color-light-gray: #F8F9FA;     /* Light background for sections */
    --color-medium-gray: #E9ECEF;    /* Slightly darker gray for borders, separators */
    --color-white: #FFFFFF;
    --color-text-dark: #343A40;      /* Primary text color (dark) */
    --color-text-light: #6C757D;     /* Secondary text color (medium gray) */
    --color-accent-light-yellow: #FFD700; /* Un amarillo brillante/dorado para el contraste, similar al logo */

    /* Gradients (Adjust stops and colors based on your branding guide) */
    --gradient-primary: linear-gradient(to right, var(--color-primary), #00A3B5); /* Turquesa gradient */
    --gradient-text: linear-gradient(to right, var(--color-primary), var(--color-secondary)); /* For highlight text */
    --gradient-text2: linear-gradient(to right, var(--color-white), var(--color-accent-light-yellow));
    --gradient-section-bg: linear-gradient(to bottom, var(--color-light-gray) 0%, var(--color-white) 100%); /* Gradiente sutil para el fondo de la sección */

    /* Typography */
    --font-primary: 'Montserrat', sans-serif; /* For headings, bold text */
    --font-secondary: 'Poppins', sans-serif;  /* For body text, paragraphs */

    --font-size-base: 1rem; /* 16px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.25rem; /* 20px */
    --font-size-xl: 1.5rem; /* 24px */
    --font-size-2xl: 2rem;  /* 32px */
    --font-size-3xl: 2.5rem; /* 40px */
    --font-size-hero-title: 2.8rem; /* 56px */

    /* Spacing System (using a modular scale based on 8px) */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-2xl: 4rem;     /* 64px */
    --spacing-3xl: 6rem;     /* 96px */
    --spacing-4xl: 8rem;     /* 128px */

    /* Border Radius */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem;  /* 8px */
    --border-radius-lg: 0.75rem; /* 12px */

    /* Box Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition-speed: 0.3s ease-in-out;
}

/* ==========================================================================
   2. Base Styles & Utilities
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Container */
.container {
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    padding: 0 var(--spacing-sm); /* Padding for smaller screens */
}

/* Section Paddings */
section {
    padding: var(--spacing-4xl) 0; /* Generous top/bottom padding for sections */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    line-height: 1.2;
    color: var(--color-dark-blue); /* Default heading color */
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-hero-title);
    font-weight: 700;
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
}

p {
    margin-bottom: var(--spacing-sm);
}

/* Text Utilities */
.text-center {
    text-align: center;
}

.text-gradient {
    /* Apply a gradient to text */
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback for browsers not supporting -webkit-text-fill-color */
}

/* Section Titles & Descriptions */
.section-title {
    text-align: center;
    margin-bottom: var(--spacing-md);
    max-width: 1000px; /* Control width for readability */
    margin-left: auto;
    margin-right: auto;
}

.section-description {
    text-align: center;
    font-size: var(--font-size-md);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-2xl); /* More space after description */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-description-left {
    text-align: left;
    font-size: var(--font-size-md);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xl);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 50px; /* Adjusted for a pill shape to match modern design */
    font-family: var(--font-primary);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-speed);
    text-align: center;
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm); /* Added box-shadow for all buttons */
}

.btn-primary {
    background-color: var(--color-primary); /* Turquesa/Cian */
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-dark-blue); /* Dark blue on hover */
    border-color: var(--color-dark-blue);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: transparent; /* Transparente para secundario */
    color: var(--color-secondary); /* Texto amarillo/naranja */
    border-color: var(--color-secondary); /* Borde amarillo/naranja */
}

.btn-secondary:hover {
    background-color: var(--color-secondary); /* Amarillo/Naranja de fondo */
    color: var(--color-dark-blue); /* Texto azul oscuro para contraste */
    border-color: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
    padding: calc(var(--spacing-sm) - 2px) calc(var(--spacing-md) - 2px); /* Adjust padding for border */
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Utility for spacing between elements */
.mt-4 {
    margin-top: var(--spacing-lg); /* Adjusted for consistency */
}

/* ==========================================================================
   3. Header & Navigation
   ========================================================================== */
.main-header {
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;

}

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

.main-header .logo img {
    height: 40px; /* Adjust logo height as needed */
    width: auto;
    /* Optional: If the logo itself is dark, and you put it on a dark background,
       you might want to invert its color if it's a simple SVG or a filter: */
    /* filter: brightness(200%) invert(100%); */
}

.main-header .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-white); /* Color del texto "WALA DIGITAL" en el logo */
    font-family: var(--font-primary);
    font-size: var(--font-size-xl); /* Adjust as needed for logo text */
    font-weight: 700;
}


.main-nav .nav-list {
    list-style: none;
    display: flex;
    gap: var(--spacing-md); /* Spacing between nav items */
    align-items: center;
}

.main-nav .nav-list li a {
    text-decoration: none;
    color: var(--color-text-light);
    font-weight: 500;
    font-size: var(--font-size-md);
    padding: var(--spacing-xs) 0;
    position: relative;
    transition: color var(--transition-speed);
}

.main-nav .nav-list li a:hover,
.main-nav .nav-list li a:focus {
    color: var(--color-primary); /* Turquesa/Cian al pasar el ratón */
}

/* Cambiar color de los enlaces cuando hay scroll */
.main-header.scrolled .nav-list li a {
  color: #ddd;
}

.main-header.scrolled .nav-list li a:hover {
  color: #ffcc00;
}

/* Underline effect for nav links */
.main-nav .nav-list li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary); /* Subrayado en turquesa/cian */
    transition: width var(--transition-speed);
}

.main-nav .nav-list li a:hover::after {
    width: 100%;
}

/* Hamburger menu for mobile */
.nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    z-index: 1010;
}

.hamburger-icon {
    width: 25px;
    height: 3px;
    background-color: var(--color-white); /* Barras blancas para contraste en navbar oscuro */
    position: relative;
    transition: all var(--transition-speed);
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--color-white); /* Barras blancas */
    transition: all var(--transition-speed);
}

.hamburger-icon::before {
    top: -8px;
}

.hamburger-icon::after {
    top: 8px;
}

/* Animation for active hamburger */
.nav-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .hamburger-icon::before {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   4. Hero Section
   ========================================================================== */
.hero-section {
    background-color: var(--color-dark-blue); /* Deep background for impact */
    color: var(--color-white);
    padding: var(--spacing-2xl) 0;
    overflow: hidden; /* For AOS animations */
}

.hero-section .hero-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2xl); /* Space between text and illustration */
}

.hero-content {
    flex: 1;
    max-width: 100%; /* Control width for text readability */
}

.hero-title {
    color: var(--color-primary); /* Turquesa/Cian para el título del Hero */
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-hero-title);
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-accent-2); /* Amarillo/Naranja para el subtítulo, o un gris claro si prefieres */
    margin-bottom: var(--spacing-2xl);
    max-width: 100%;
}

.btn-hero {
    font-size: var(--font-size-lg);
    padding: var(--spacing-xs) var(--spacing-md);
    font-weight: 500;
}

/* Imagen del Héroe */
.hero-image {
    flex: 1; /* La imagen también toma espacio */
    min-width: 300px; /* Ancho mínimo para la imagen en pantallas pequeñas */
    text-align: center; /* Centrar la imagen si es más pequeña que su contenedor */
}

.hero-image img {
    max-width: 100%; /* La imagen no excederá el ancho de su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina espacio extra debajo de la imagen */
    margin: 0 auto; /* Centrar la imagen dentro de su contenedor si `text-align: center` no es suficiente */
    border-radius: 8px; /* Opcional: bordes ligeramente redondeados para la imagen */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Opcional: una sombra sutil */
}

/* Media Queries para Responsividad */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.8rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-section {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .hero-grid {
        flex-direction: column; /* Apilar elementos verticalmente en pantallas pequeñas */
        text-align: center; /* Centrar el texto cuando los elementos se apilan */
    }

    .hero-content {
        max-width: 100%; /* Ocupar todo el ancho disponible */
        text-align: center; /* Centrar el texto */
    }

    .hero-image {
        margin-top: 40px; /* Espacio entre el contenido y la imagen apilados */
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }
}

.main-nav .nav-list li .btn-hero{
    padding: 2px 10px;
    color:#fff;
    
}

/* ==========================================================================
   5. Value Proposition Section
   ========================================================================== */
.value-proposition-section {
    background-color: var(--color-light-gray); /* Light background */
    padding: var(--spacing-3xl) 0;
}

.value-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: var(--spacing-lg); /* Space between pillars */
    margin-top: var(--spacing-2xl);
}

.pillar-card {
    background-color: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to top */
}

.pillar-card:hover {
    transform: translateY(-8px); /* Lift effect on hover */
    box-shadow: var(--shadow-lg);
}

.pillar-icon {
    width: 80px; /* Size of the icon */
    height: 80px; /* Nota: Para iconos de Font Awesome, esto puede no controlar el tamaño real, usa font-size */
    margin-bottom: var(--spacing-md);
    
    /* === AÑADE ESTO === */
    color: var(--color-accent-light-yellow); /* Usa tu color primario (azul/turquesa) para los iconos */
    font-size: 3rem; /* Ajusta el tamaño del ícono usando font-size */
    /* Para el tamaño, 80px es aproximadamente 5rem (80/16). 
       Sin embargo, los iconos de Font Awesome se escalan mejor con font-size.
       Puedes probar 3.5rem, 4rem, o 5rem para ver cuál se adapta mejor a tu diseño. */
}

.pillar-card h3 {
    color: var(--color-primary); /* Turquesa/Cian para títulos de pillar */
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-xl);
}

.pillar-card p {
    color: var(--color-text-dark);
    font-size: var(--font-size-base);
}

/* ==========================================================================
   6. Featured Services Section
   ========================================================================== */
.featured-services-section {
    background-color: var(--color-white);
    padding: var(--spacing-3xl) 0;
}

.service-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.service-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to left */
    text-align: left;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.service-card .card-image {
    width: 100%; /* Make the image take full width of its parent (.service-card) */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
    object-fit: contain; /* Ensures the whole image is visible, scales down if needed */
    margin-bottom: var(--spacing-xs); /* Space below the image */
    /* If the image is square or you want a fixed size container for it: */
    /* height: 120px; */ /* Set a fixed height */
    /* object-fit: cover; */ /* If you set a fixed height, 'cover' will fill the space, cropping if aspect ratios don't match */
    /* If you want to center the image within its limited width: */
    margin-left: 0; /* Align left */
    margin-right: auto; /* Align left */
    border-radius: 10px;
}

.service-card h3 {
    color: var(--color-dark-blue);
    font-size: var(--font-size-lg);
    padding: var(--spacing-md);
    padding-bottom: 0;
}

.service-card p {
    color: var(--color-text-light);
    flex-grow: 1; /* Allows text to take available space */
    padding: var(--spacing-md);
    padding-top: 0;
}

.service-card .learn-more {
    color: var(--color-primary); /* Turquesa/Cian para "Leer más" */
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: color var(--transition-speed);
}

.service-card .learn-more::after {
    content: '→'; /* Arrow icon */
    font-size: var(--font-size-md);
    transition: transform var(--transition-speed);
}

.service-card .learn-more:hover {
    color: var(--color-dark-blue);
}

.service-card .learn-more:hover::after {
    transform: translateX(5px);
}

/* --- Media Queries for Responsiveness (ensure images adapt) --- */
@media (max-width: 768px) {
    .service-cards-grid {
        grid-template-columns: 1fr; /* Stack cards vertically on mobile */
        gap: var(--spacing-md);
    }
    .service-card {
        padding: var(--spacing-lg); /* Adjust padding for smaller screens */
    }
    .service-card .card-image,
    .service-card .card-icon { /* Ensure images/icons scale down */
        width: 100px; /* Adjust size as needed for mobile */
        height: 100px;
        margin-left: 0; /* Ensure it stays aligned left */
        margin-right: auto;
    }
}

/* ==========================================================================
   7. Tech Stack Section
   ========================================================================== */
.tech-stack-section {
    background-color: var(--color-dark-blue); /* Dark background for tech logos */
    padding: var(--spacing-3xl) 0;
}

.tech-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-lg);
    justify-items: center;
    align-items: center;
}

.tech-logos-grid img {
    max-width: 100px; /* Max width for individual logos */
    height: auto;
    opacity: 0.7;
    transition: all var(--transition-speed);
}

.tech-logos-grid img:hover {
    filter: grayscale(0%) brightness(100%); /* Full color on hover */
    opacity: 1;
}

/* ==========================================================================
   8. Case Studies Section
   ========================================================================== */
.case-studies-section {
    background-color: var(--color-light-gray);
    padding: var(--spacing-3xl) 0;
}

.case-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-2xl); /* More space between case study cards */
    margin-top: var(--spacing-2xl);
}

.case-study-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column; /* Stack image and content */
}

.case-study-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.case-study-card img {
    width: 100%;
    height: 220px; /* Fixed height for image consistency */
    object-fit: contain;
    display: block;
}

.info-contacto-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

.case-study-card .card-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.case-study-card h3 {
    font-size: var(--font-size-lg);
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-xs);
}

.case-study-card p {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.case-study-details {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}

.case-study-details li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
}

.case-study-details li strong {
    color: var(--color-primary); /* Highlight keywords with Turquesa/Cian */
}

.case-study-card .btn-outline {
    margin-top: auto; /* Pushes button to the bottom */
    align-self: flex-start; /* Align button to the left */
    margin: 0 auto;
}


/* ==========================================================================
   9. About Us Section
   ========================================================================== */
.about-us-section {
    background-color: var(--color-primary); /* Turquesa/Cian para el fondo */
    color: var(--color-white);
    padding: var(--spacing-4xl) 0;
}

.about-us-section .about-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-3xl);
}

.about-content {
    flex: 1.3;
}

.about-us-section .section-title {
    text-align: center;
    color: var(--color-white);
    font-size: 2.8rem; /* Ajusta este tamaño si es necesario */
    margin-bottom: var(--spacing-md);
}

.about-us-section .section-description-left {
    color: var(--color-light-gray);
    margin-bottom: var(--spacing-xl);
    max-width: 90%; /* Control text width */
}

.about-us-section .btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary); /* Texto turquesa/cian */
    border-color: var(--color-white);
}

.about-us-section .btn-secondary:hover {
    background-color: var(--color-light-gray);
    color: var(--color-dark-blue); /* Texto azul oscuro al hacer hover */
    border-color: var(--color-light-gray);
}

.about-image {
    flex: 1;
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
    /* Opcional: Define un tamaño máximo para la columna de la imagen si es necesario */
    max-width: 500px; 
}

.about-image img {
    max-width: 60%;
    height: auto; /* Mantiene la relación de aspecto */
    display: block; /* Elimina espacio extra */

    /* --- CAMBIOS CLAVE PARA LA IMAGEN DEL CEO --- */
    /* 1. ELIMINAR border-radius: 50%; si la imagen no es un círculo */
    border-radius: 50%; /* Puedes aplicar un ligero redondeo rectangular si lo deseas */
    /* Si la imagen ya es un recorte con fondo transparente y quieres que se vea así, no necesitas border-radius aquí. */

    /* 2. Mantener y ajustar el drop-shadow */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3)); /* Sombra más pronunciada y suave */
    /* Puedes ajustar los valores: (offset-x offset-y blur-radius spread-radius color) */

    /* 3. Opcional: Si quieres que la imagen siempre ocupe un área específica y se recorte */
    /* object-fit: contain;  /* Asegura que la imagen completa sea visible, escalando si es necesario */
    /* Si la imagen tiene un fondo transparente y es un recorte de una persona, 'contain' es mejor */
    /* Si la imagen tiene un fondo y quieres que llene un área fija, usar 'cover' */
    /* Si 'ceo.png' es la imagen con el fondo azul y la persona recortada (como en la captura), 'contain' es lo que esperas. */

    /* 4. Considera una altura máxima si la imagen es muy alta */
    max-height: 600px; /* Ajusta según el tamaño deseado */
    width: auto; /* Deja que el ancho se ajuste con el max-height si la imagen es alta */
    object-fit: contain;
}

.about-description {
    text-align: center;
    font-size: var(--font-size-md);
    color: var(--color-white);
    margin-bottom: var(--spacing-2xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.text-gradient2 {
    background: var(--gradient-text2); /* Ahora usa la variable que definimos arriba */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback para navegadores antiguos, aunque con text-fill-color es redundante */
}


/* Media Queries para Responsividad */
@media (max-width: 992px) {
    .about-us-section .about-grid {
        flex-direction: column; /* Apila las columnas en pantallas pequeñas */
        gap: var(--spacing-lg); /* Reduce el espacio entre elementos apilados */
    }
    .about-content,
    .about-image {
        flex: none; /* Deshabilita flex-grow para que ocupen su propio espacio */
        width: 100%; /* Asegura que ocupen el ancho completo */
        text-align: center; /* Centra el texto */
    }
    .about-us-section .section-title,
    .about-us-section .section-description {
        text-align: center; /* Asegura que el texto esté centrado */
        max-width: 100%; /* Permite que el texto ocupe todo el ancho disponible */
        margin-left: auto; /* Centra el párrafo */
        margin-right: auto; /* Centra el párrafo */
    }
    .about-us-section .btn-secondary {
        margin: 0 auto; /* Centra el botón */
    }
    .about-image img {
        max-width: 80%; /* Reduce el tamaño de la imagen en móvil para que no sea tan grande */
        height: auto;
        /* Si tenías un max-height, ajústalo aquí */
        max-height: 400px;
    }
}

@media (max-width: 576px) {
    .about-us-section {
        padding: var(--spacing-2xl) 0; /* Reduce el padding en pantallas muy pequeñas */
    }
    .about-us-section .section-title {
        font-size: 2rem; /* Título más pequeño en móvil */
    }
    .about-us-section .section-description {
        font-size: var(--font-base); /* Asegúrate de que font-base esté definido */
    }
}

/* ==========================================================================
   10. Blog Section
   ========================================================================== */
.blog-section {
    background-color: var(--color-white);
    padding: var(--spacing-4xl) 0;
}

.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
}

.blog-post-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
}

.blog-post-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.blog-post-card img {
    width: 100%;
    height: 200px; /* Fixed height for image consistency */
    object-fit: cover;
    display: block;
}

.blog-post-card .card-content {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-post-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
}

.blog-post-card h3 a {
    color: var(--color-dark-blue);
    text-decoration: none;
    transition: color var(--transition-speed);
}

.blog-post-card h3 a:hover {
    color: var(--color-primary); /* Turquesa/Cian para hover en títulos de blog */
}

.blog-post-card .post-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.blog-post-card p {
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}

.blog-post-card .read-more {
    color: var(--color-primary); /* Turquesa/Cian para "Leer más" */
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: auto; /* Pushes button to the bottom */
    transition: color var(--transition-speed);
}

.blog-post-card .read-more::after {
    content: '→';
    font-size: var(--font-size-md);
    transition: transform var(--transition-speed);
}

.blog-post-card .read-more:hover {
    color: var(--color-dark-blue);
}

.blog-post-card .read-more:hover::after {
    transform: translateX(5px);
}
/* --- Estilos del Formulario de Contacto --- */
.contact-section {
    /* CAMBIO CLAVE: Fondo más claro y con gradiente sutil */
    background: var(--gradient-section-bg); /* Gradiente de gris muy claro a blanco */
    color: var(--color-text-dark); /* Color de texto por defecto oscuro para el contraste */
    padding: var(--spacing-xs) 0; /* Padding vertical generoso */
    position: relative; /* Para posibles elementos decorativos */
    overflow: hidden; /* Para contener elementos que sobresalgan */
}

/* Elementos decorativos (opcional, para añadir "flujo" y romper la planicidad) */
.contact-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background-color: rgba(var(--color-primary), 0.1); /* Círculo o forma sutil */
    border-radius: 50%;
    filter: blur(80px); /* Difumina para que sea suave */
    z-index: 0;
}
.contact-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    background-color: rgba(var(--color-accent-yellow), 0.1);
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
}


.contact-section .section-title,
.contact-section .section-description {
    color: var(--color-text-dark); /* Texto oscuro para títulos sobre fondo claro */
    text-align: center;
    max-width: 900px; /* Limita el ancho del texto */
    margin-left: auto;
    margin-right: auto;
    position: relative; /* Para que esté sobre los pseudo-elementos */
    z-index: 1;
}

.contact-section .section-title {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-3xl); /* Título principal aún más grande y audaz */
    line-height: 1.2;
    font-weight: 700; /* Más peso para el título */
}

.contact-section .section-description {
    margin-bottom: var(--spacing-3xl);
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-text-light); /* Un gris más oscuro para la descripción */
}

.contact-section .section-title .text-gradient {
    /* El gradiente para el texto se define en las variables, usando amarillo y naranja */
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback */
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr; /* Formulario un poco más ancho que la info */
    gap: var(--spacing-3xl); /* Espacio generoso entre las columnas */
    align-items: start;
    position: relative; /* Para que las columnas estén sobre los pseudo-elementos */
    z-index: 1;
}

/* --- Estilos del Formulario de Contacto --- */
.contact-form {
    background-color: var(--color-white); /* Fondo blanco puro para el formulario */
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-xl); /* Esquinas más redondeadas para suavizar */
    box-shadow: var(--shadow-xl); /* Sombra más pronunciada para un efecto de "flotación" premium */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg); /* Espacio entre grupos de formulario */
    border: 1px solid var(--color-light-gray); /* Borde sutil para definirlo */
}

.contact-form label {
    font-size: var(--font-size-md); /* Etiquetas un poco más grandes */
    color: var(--color-text-dark); /* Etiquetas de color oscuro */
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md); /* Más padding horizontal */
    border: 1px solid var(--color-medium-gray); /* Borde gris medio */
    border-radius: var(--border-radius-md); /* Bordes redondeados para los inputs */
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    background-color: var(--color-white); /* Fondo blanco para los inputs, limpio */
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--color-text-light); /* Color del placeholder */
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(var(--color-primary), 0.2); /* Focus ring más prominente pero suave */
}

.contact-form textarea {
    resize: vertical;
    min-height: 150px; /* Altura mínima aún mayor para la descripción */
}

.contact-form .btn-submit {
    display: block;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
    font-weight: 700; /* Botón más audaz */
    /* Gradiente para el botón principal, usando los colores de tu logo */
    background: linear-gradient(to right, var(--color-accent-yellow), var(--color-accent-orange));
    color: var(--color-dark-blue); /* Texto oscuro sobre el gradiente claro */
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-sm); /* Sombra sutil para el botón */
    transition: all var(--transition-speed);
}

.btn-primary.btn-submit:hover {
    background: linear-gradient(to right, var(--color-accent-orange), var(--color-accent-yellow)); /* Invierte el gradiente o un ligero cambio */
    transform: translateY(-3px); /* Efecto de levantamiento más notorio */
    box-shadow: var(--shadow-md); /* Sombra más fuerte en hover */
}

/* --- Estilos de Información de Contacto (Columna Derecha) --- */
.contact-info {
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-xl); /* Esquinas más redondeadas */
    /* CAMBIO CLAVE: El fondo de info de contacto es el azul oscuro para contraste */
    background-color: var(--color-dark-blue);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    box-shadow: var(--shadow-xl); /* Sombra profunda */
    color: var(--color-light-gray); /* Texto general gris claro sobre azul oscuro */
    position: relative;
    overflow: hidden; /* Para el pseudo-elemento interior */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde blanco muy sutil */
}

/* Elemento decorativo interior para la columna de contacto */
.contact-info::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background-color: rgba(var(--color-primary), 0.1);
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
}

.contact-info h3 {
    color: var(--color-white); /* Título blanco para máxima visibilidad */
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-xl);
    text-align: center;
    position: relative; /* Sobre el pseudo-elemento */
    z-index: 1;
}

.contact-info p,
.contact-info address {
    font-size: var(--font-size-sm); /* Texto más grande */
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.contact-info a {
    color: inherit; /* Hereda el color gris claro */
    text-decoration: none;
    transition: color var(--transition-speed);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.contact-info a:hover {
    color: var(--color-primary); /* Turquesa/Cian en hover */
}

.contact-info .fas,
.contact-info .fab {
    font-size: 1.5rem; /* Iconos aún más grandes */
    color: var(--color-primary); /* Color primario para los iconos */
    margin-right: var(--spacing-md); /* Más espacio entre icono y texto */
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
}

.contact-address {
    font-style: normal;
    margin-bottom: var(--spacing-lg);
}

.contact-info .social-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg); /* Más espacio entre iconos sociales */
    margin-top: var(--spacing-xl);
    position: relative;
    z-index: 1;
}

.contact-info .social-links .social-icon {
    font-size: 2.5rem; /* Iconos sociales muy grandes */
    color: var(--color-light-gray); /* Color por defecto de los iconos sociales */
    transition: color var(--transition-speed), transform var(--transition-speed);
}

.contact-info .social-links .social-icon:hover {
    color: var(--color-primary); /* Turquesa/Cian al hacer hover */
    transform: translateY(-5px) scale(1.1); /* Efecto de levantamiento y ligero crecimiento */
}

/* --- Media Queries para Responsividad --- */
@media (max-width: 992px) {
    .contact-section .contact-grid {
        grid-template-columns: 1fr; /* Apila las columnas */
        gap: var(--spacing-2xl);
    }
    .contact-section .section-title {
        font-size: var(--font-size-2xl); /* Ajusta tamaño de título */
    }
    .contact-section .section-description {
        font-size: var(--font-size-base); /* Ajusta tamaño de descripción */
    }
    .contact-form,
    .contact-info {
        padding: var(--spacing-lg); /* Reduce padding */
    }
    .contact-section::before,
    .contact-section::after,
    .contact-info::before {
        display: none; /* Oculta los elementos decorativos sutiles en móviles si molestan */
    }
}

@media (max-width: 576px) {
    .contact-section {
        padding: var(--spacing-3xl) 0;
    }
    .contact-form .btn-submit {
        font-size: var(--font-size-base);
        padding: var(--spacing-sm) var(--spacing-lg);
    }
    .contact-info p,
    .contact-info address {
        font-size: var(--font-size-base);
    }
    .contact-info .fas,
    .contact-info .fab {
        font-size: 1.6rem;
    }
    .social-links .social-icon {
        font-size: 2rem;
    }
}
/* ==========================================================================
   12. Footer
   ========================================================================== */
.main-footer {
    background-color: var(--color-dark-blue);
    color: var(--color-light-gray); /* Default text color for the footer */
    padding-top: var(--spacing-3xl);
    border-top: 5px solid var(--color-primary); /* A touch of brand color */
}

.footer-grid-container {
    display: grid;
    /* Adjust column ratios as needed. 
       Example: 2fr for about, 1fr for nav/services, 2fr for contact allows more space for longer contact details. */
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: var(--spacing-3xl); /* Space between columns */
    padding-bottom: var(--spacing-3xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle divider */
}

/* Specific styling for the about column */
.footer-about .footer-logo img {
    height: 50px; /* Adjust logo height as needed */
    margin-bottom: var(--spacing-md);
    max-width: 100%; /* Ensure logo scales down */
}

.footer-about p {
    font-size: var(--font-size-sm);
    line-height: 1.8; /* Improved line spacing for readability */
    margin-bottom: var(--spacing-sm); /* Space between paragraphs */
}

/* Headings within the footer columns */
.main-footer h3 {
    color: var(--color-white); /* White color for headings */
    font-size: var(--font-size-lg); /* Slightly larger headings */
    margin-bottom: var(--spacing-md);
    font-weight: 600; /* Make headings bolder */
}

/* List styles for navigation and services */
.main-footer ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0; /* Remove default ul margin */
}

.main-footer ul li {
    margin-bottom: var(--spacing-xs); /* Small space between list items */
}

.main-footer ul li a {
    color: var(--color-light-gray); /* Lighter gray for links */
    text-decoration: none;
    font-size: var(--font-size-base);
    transition: color var(--transition-speed); /* Smooth color transition on hover */
    display: inline-block; /* Allows padding/margin to work better */
}

.main-footer ul li a:hover {
    color: var(--color-primary); /* Turquesa/Cian on hover */
}

/* Contact information styles */
.footer-contact-info p,
.footer-contact-info address {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs); /* Small space between contact lines */
    line-height: 1.5;
    word-break: break-word; /* Prevents long URLs/emails from overflowing */
}

.footer-contact-info p a {
    color: var(--color-light-gray); /* Lighter gray for contact links */
    text-decoration: none;
    transition: color var(--transition-speed);
}

.footer-contact-info p a:hover {
    color: var(--color-primary); /* Turquesa/Cian on hover */
}

/* Social media links */
.footer-contact-info .social-links {
    margin-top: var(--spacing-md); /* Space above social icons */
    display: flex;
    gap: var(--spacing-md); /* Space between social icons */
    align-items: center; /* Vertically align icons if they have different heights */
}

.footer-contact-info .social-links .social-icon {
    width: 30px; /* Size of the social icon */
    height: 30px;
    object-fit: contain; /* Ensures image scales correctly within its bounds */
    transition: transform var(--transition-speed);
}

.footer-contact-info .social-links .social-icon:hover {
    transform: translateY(-3px); /* Lift effect on hover */
}

/* Bottom footer section (copyright and legal links) */
.footer-bottom {
    padding: var(--spacing-lg) 0;
    text-align: center; /* Center align content for better visual balance */
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between; /* Distribute items with space between them */
    align-items: center;
    flex-wrap: wrap; /* Allow items to wrap onto the next line on small screens */
    /* Add horizontal padding if your .container doesn't handle it already */
    padding: 0 var(--spacing-lg); /* Example: Add padding to match hero/other sections */
}

.footer-bottom p {
    font-size: var(--font-size-sm);
    color: var(--color-text-light); /* Lighter text for copyright */
    margin: 0; /* Remove default paragraph margin */
    flex-shrink: 0; /* Prevents text from shrinking excessively */
}

.footer-bottom .legal-links {
    display: flex;
    gap: var(--spacing-md); /* Space between legal links */
    flex-wrap: wrap; /* Allow legal links to wrap */
    justify-content: center; /* Center links if they wrap */
}

.footer-bottom .legal-links a {
    color: var(--color-text-light); /* Lighter text for legal links */
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-speed);
}

.footer-bottom .legal-links a:hover {
    color: var(--color-primary); /* Turquesa/Cian on hover */
}

/* --- Media Queries for Responsiveness --- */

@media (max-width: 1024px) {
    .footer-grid-container {
        grid-template-columns: repeat(2, 1fr); /* Two columns for tablets */
        gap: var(--spacing-2xl);
    }
    .footer-bottom .container {
        flex-direction: column; /* Stack copyright and legal links on tablets */
        gap: var(--spacing-sm);
    }
    .footer-bottom .legal-links {
        margin-top: 0; /* Adjust margin as it's now stacked */
    }
}

@media (max-width: 768px) {
    .footer-grid-container {
        grid-template-columns: 1fr; /* Single column for mobile */
        gap: var(--spacing-xl);
        padding-left: var(--spacing-lg); /* Add left padding for mobile */
        padding-right: var(--spacing-lg); /* Add right padding for mobile */
    }
    .main-footer {
        padding-top: var(--spacing-3xl); /* Reduce top padding on mobile */
    }
    .footer-bottom .container {
        padding: 0 var(--spacing-lg); /* Ensure padding for bottom section as well */
    }
}


/* ==========================================================================
   13. Floating WhatsApp Button
   ========================================================================== */
.whatsapp-float {
    text-decoration: none; /* Evita subrayado del enlace */
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    background-color: var(--color-accent-1);
    color: var(--color-white);
    border-radius: 50%;
    text-align: center;
    box-shadow: var(--shadow-md);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform var(--transition-speed);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #1DA851;
}

/* 🔧 Aplica al ícono Font Awesome */
.whatsapp-float .fa-whatsapp {
    font-size: 35px;         /* tamaño visual similar a tu img */
    color: var(--color-white);
    line-height: 1;           /* elimina espacio vertical extra */
    vertical-align: middle;   /* centra el ícono */
    text-decoration: none;    /* quita cualquier subrayado heredado */
}


/* ==========================================================================
   14. Responsive Adjustments (Media Queries)
   ========================================================================== */

/* Medium devices (tablets, 992px and up) */
@media (max-width: 992px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    /* Header & Navigation for Tablets */
    .main-nav .nav-list {
        position: fixed;
        top: 80px; /* Adjust if your header height is different */
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background-color: var(--color-dark-blue); /* Fondo azul oscuro para el menú móvil */
        flex-direction: column;
        justify-content: flex-start; /* Align items to the top */
        align-items: center;
        transform: translateX(-100%);
        transition: transform var(--transition-speed);
        padding-top: var(--spacing-lg);
        z-index: 990; /* Below the header but above other content */
    }

    .main-nav .nav-list.active {
        transform: translateX(0);
    }

    .main-nav .nav-list li {
        margin: var(--spacing-sm) 0; /* Space between links in mobile menu */
    }

    .main-nav .nav-list li a {
        color: var(--color-white); /* Enlaces blancos en menú móvil oscuro */
        font-size: var(--font-size-lg);
        padding: var(--spacing-md) 0;
        width: 100%; /* Full width for clickable area */
        text-align: center;
    }

    .main-nav .nav-list li a:hover {
        color: var(--color-primary); /* Turquesa/Cian en hover */
    }

    .nav-toggle {
        display: block; /* Show hamburger icon */
    }

    /* Hero Section */
    .hero-section .hero-grid {
        flex-direction: column-reverse; /* Illustration on top, text below */
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .hero-title {
        font-size: var(--font-size-3xl); /* Smaller on tablets */
    }

    .hero-subtitle {
        font-size: var(--font-size-lg);
        max-width: 100%;
    }

    /* About Section */
    .about-us-section .about-grid {
        flex-direction: column;
        text-align: center;
    }

    .about-us-section .section-title,
    .about-us-section .section-description-left {
        text-align: center;
        max-width: 100%;
    }

    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr; /* Stack form and info vertically */
    }

    /* Footer */
    .footer-grid-container {
        grid-template-columns: 1fr 1fr; /* Two columns for footer on tablets */
        gap: var(--spacing-2xl);
    }
}

/* Small devices (phones, 768px and up) */
@media (max-width: 768px) {
    /* Base spacing */
    section {
        padding: var(--spacing-3xl) 0;
    }

    h1 {
        font-size: var(--font-size-2xl);
    }
    h2 {
        font-size: var(--font-size-xl);
    }
    h3 {
        font-size: var(--font-size-lg);
    }

    .section-description,
    .section-description-left {
        font-size: var(--font-size-base);
    }

    /* Header specific for smaller phones */
    .main-header .logo img {
        height: 35px; /* Smaller logo */
    }
    .main-header .logo {
        font-size: var(--font-size-lg); /* Smaller logo text */
    }

    /* Hero */
    .hero-section {
        padding: var(--spacing-3xl) 0;
    }
    .hero-content {
        order: 2; /* Text below image */
    }
    .hero-illustration {
        order: 1; /* Image on top */
        margin-bottom: var(--spacing-xl);
    }
    .btn-hero {
        width: 100%;
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-size-base);
    }

    /* Footer */
    .footer-grid-container {
        grid-template-columns: 1fr; /* Single column on phones */
        text-align: center;
    }

    .footer-about,
    .footer-nav,
    .footer-services,
    .footer-contact-info {
        margin-bottom: var(--spacing-lg);
    }

    .footer-nav ul,
    .footer-services ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Footer Bottom specific for smaller phones */
    .footer-bottom .container {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .footer-bottom .legal-links {
        justify-content: center;
    }

    /* WhatsApp Button specific for smaller phones */
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: var(--spacing-md);
        right: var(--spacing-md);
    }
    .whatsapp-float img {
        width: 30px;
        height: 30px;
    }
}

/* Extra small devices (less than 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-xs);
    }

    .hero-title {
        font-size: var(--font-size-xl);
    }
    .hero-subtitle {
        font-size: var(--font-size-base);
    }

    .pillar-card,
    .service-card,
    .case-study-card,
    .blog-post-card {
        padding: var(--spacing-md);
    }

    .tech-logos-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }

    .contact-form {
        padding: var(--spacing-lg);
    }
}