/* ================================================================
   EVEREST GLOBAL 360 - Hoja de Estilos Principal
   ================================================================
   Empresa: Everest Global 360 C.A.
   Descripción: Agenciamiento aduanal y logística integral
   Paleta: Blanco #ffffff | Negro #000000 | Rosa #d6a499
   Tipografía: Montserrat (Google Fonts)
   ================================================================ */


/* ================================================================
   TABLA DE CONTENIDOS
   ================================================================
   1.  Variables CSS (Custom Properties)
   2.  Reset & Base
   3.  Tipografía Global
   4.  Layout - Contenedores
   5.  Header & Navegación
   6.  Menú Hamburguesa (Móvil)
   7.  Hero / Carrusel
   8.  Secciones Generales
   9.  Botones
   10. Bienvenida (Home)
   11. Alianza Estratégica (Home)
   12. Tarjetas de Valores (Home)
   13. Página Servicios
   14. Página Ubicación
   15. Página Contacto
   16. Footer
   17. Animaciones & Keyframes
   18. Utilidades
   19. Media Queries - Tablet (max-width: 1024px)
   20. Media Queries - Tablet Small (max-width: 768px)
   21. Media Queries - Móvil (max-width: 480px)
   ================================================================ */


/* ================================================================
   1. VARIABLES CSS (CUSTOM PROPERTIES)
   ================================================================
   Sistema de diseño centralizado. Modificar aquí para cambiar
   toda la apariencia del sitio de forma consistente.
   ================================================================ */
:root {
    /* --- Colores Principales --- */
    --blanco: #ffffff;
    --negro: #000000;
    --rosa: #d6a499;

    /* --- Variaciones de Rosa --- */
    --rosa-light: #e8c4bb;
    --rosa-dark: #b8867a;
    --rosa-hover: #c4907e;
    --rosa-subtle: #faf0ee;        /* Fondo alianza estratégica */
    --rosa-glow: rgba(214, 164, 153, 0.4);

    /* --- Grises (escala neutra) --- */
    --gris-50: #fafafa;
    --gris-100: #f5f5f5;
    --gris-200: #e5e5e5;
    --gris-300: #d4d4d4;
    --gris-400: #a3a3a3;
    --gris-500: #737373;
    --gris-600: #525252;
    --gris-700: #404040;
    --gris-800: #262626;
    --gris-900: #171717;

    /* --- Sombras --- */
    --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --sombra-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --sombra-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --sombra-xl: 0 16px 48px rgba(0, 0, 0, 0.20);
    --sombra-rosa: 0 8px 30px rgba(214, 164, 153, 0.35);

    /* --- Transiciones --- */
    --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-rapida: all 0.15s ease;
    --transicion-lenta: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Border Radius --- */
    --radio-sm: 6px;
    --radio-md: 12px;
    --radio-lg: 20px;
    --radio-xl: 30px;
    --radio-full: 50px;
    --radio-circle: 50%;

    /* --- Tamaños de fuente --- */
    --texto-xs: 0.75rem;
    --texto-sm: 0.875rem;
    --texto-base: 1rem;
    --texto-md: 1.125rem;
    --texto-lg: 1.25rem;
    --texto-xl: 1.5rem;
    --texto-2xl: 2rem;
    --texto-3xl: 2.5rem;
    --texto-4xl: 3.2rem;

    /* --- Espaciado --- */
    --espacio-xs: 4px;
    --espacio-sm: 8px;
    --espacio-md: 16px;
    --espacio-lg: 24px;
    --espacio-xl: 32px;
    --espacio-2xl: 48px;
    --espacio-3xl: 64px;
    --espacio-4xl: 96px;
    --espacio-5xl: 128px;

    /* --- Header --- */
    --header-height: 80px;
    --header-height-mobile: 65px;
    --logo-height: 150px;

    /* --- Z-index --- */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-overlay: 900;
    --z-nav: 950;
    --z-header: 1000;
    --z-hamburger: 1001;
}


/* ================================================================
   2. RESET & BASE
   ================================================================
   Normalización de estilos por defecto del navegador.
   Box-sizing border-box en todos los elementos.
   ================================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--texto-base);
    font-weight: 400;
    color: var(--negro);
    background-color: var(--blanco);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Reset de enlaces --- */
a {
    text-decoration: none;
    color: inherit;
    transition: var(--transicion);
}

a:focus-visible {
    outline: 2px solid var(--rosa);
    outline-offset: 2px;
    border-radius: var(--radio-sm);
}

/* --- Reset de listas --- */
ul,
ol {
    list-style: none;
}

/* --- Reset de imágenes --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
}

/* --- Reset de botones --- */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
}

button:focus-visible {
    outline: 2px solid var(--rosa);
    outline-offset: 2px;
}

/* --- Selección de texto --- */
::selection {
    background-color: var(--rosa);
    color: var(--blanco);
}

::-moz-selection {
    background-color: var(--rosa);
    color: var(--blanco);
}


/* ================================================================
   3. TIPOGRAFÍA GLOBAL
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--negro);
}

h1 { font-size: var(--texto-4xl); }
h2 { font-size: var(--texto-3xl); }
h3 { font-size: var(--texto-xl); }
h4 { font-size: var(--texto-lg); }

p {
    line-height: 1.7;
    color: var(--gris-600);
}


/* ================================================================
   4. LAYOUT - CONTENEDORES
   ================================================================ */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Contenedor más estrecho para textos largos */
.container-narrow {
    max-width: 800px;
}

/* Contenedor más ancho para grids */
.container-wide {
    max-width: 1400px;
}


/* ================================================================
   5. HEADER & NAVEGACIÓN
   ================================================================
   Header fijo (sticky) con fondo blanco semitransparente y
   efecto de desenfoque (glassmorphism). Cambia de sombra al
   hacer scroll.
   ================================================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    z-index: var(--z-header);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--sombra-xs);
    transition: var(--transicion);
}

/* Estado scrolled - sombra más pronunciada */
.header.scrolled {
    box-shadow: var(--sombra-md);
    background: rgba(255, 255, 255, 0.99);
}

/* Contenedor interno del header */
.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* --- Logo --- */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    z-index: var(--z-hamburger);
}

.logo img {
    height: var(--logo-height);
    width: auto;
    object-fit: contain;
    transition: var(--transicion);
}

.logo:hover img {
    transform: scale(1.03);
}

/* --- Menú de navegación --- */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-menu a {
    position: relative;
    padding: 10px 22px;
    font-size: var(--texto-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--negro);
    border-radius: var(--radio-sm);
    transition: var(--transicion);
    white-space: nowrap;
}

/* Línea animada debajo del enlace */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--rosa);
    border-radius: 2px;
    transition: var(--transicion);
}

/* Hover y estado activo */
.nav-menu a:hover,
.nav-menu a.active {
    color: var(--rosa-dark);
    background: var(--rosa-subtle);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 60%;
}


/* ================================================================
   6. MENÚ HAMBURGUESA (MÓVIL)
   ================================================================
   Botón de 3 líneas que se transforma en X al activarse.
   El menú se desliza desde la derecha.
   ================================================================ */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    cursor: pointer;
    background: none;
    border: none;
    gap: 6px;
    z-index: var(--z-hamburger);
    border-radius: var(--radio-sm);
    transition: var(--transicion);
    padding: 0;
}

.hamburger:hover {
    background: var(--rosa-subtle);
}

/* Las 3 líneas de la hamburguesa */
.hamburger span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--negro);
    border-radius: 4px;
    transition: var(--transicion);
    transform-origin: center;
}

/* Animación hamburguesa → X */
.hamburger.active span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* Overlay oscuro detrás del menú móvil */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-overlay.active {
    display: block;
    opacity: 1;
}


/* ================================================================
   7. HERO / CARRUSEL
   ================================================================
   Carrusel de imágenes a pantalla completa con overlay degradado
   oscuro, textos centrados y controles de navegación.
   Transición crossfade con opacity.
   ================================================================ */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    margin-top: var(--header-height);
}

/* Cada diapositiva ocupa todo el contenedor */
.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    will-change: opacity;
}

.carousel-slide.active {
    opacity: 1;
    z-index: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Overlay degradado oscuro sobre las imágenes */
.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.65) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

/* Contenido de texto sobre el carrusel */
.carousel-content {
    max-width: 800px;
    animation: fadeInUp 0.8s ease-out;
}

.carousel-content h1 {
    font-size: var(--texto-4xl);
    font-weight: 800;
    color: var(--blanco);
    margin-bottom: 16px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.carousel-content p {
    font-size: var(--texto-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    font-weight: 300;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Indicadores del carrusel (puntos) --- */
.carousel-indicators {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    z-index: 10;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: var(--radio-circle);
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    transition: var(--transicion);
    padding: 0;
}

.carousel-indicators button.active {
    background: var(--rosa);
    border-color: var(--rosa);
    transform: scale(1.3);
    box-shadow: 0 0 12px var(--rosa-glow);
}

.carousel-indicators button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* --- Flechas prev/next del carrusel --- */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: var(--radio-circle);
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.25);
    color: var(--blanco);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion);
    z-index: 10;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.carousel-arrow:hover {
    background: var(--rosa);
    border-color: var(--rosa);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 20px var(--rosa-glow);
}

.carousel-arrow.prev {
    left: 24px;
}

.carousel-arrow.next {
    right: 24px;
}


/* ================================================================
   8. SECCIONES GENERALES
   ================================================================
   Clases reutilizables para las secciones de contenido.
   Padding consistente y variantes de fondo.
   ================================================================ */
.section {
    padding: var(--espacio-4xl) 0;
    position: relative;
}

/* Fondo gris claro */
.section-alt {
    background: var(--gris-100);
}

/* Fondo rosa suave - usado en Alianza Estratégica */
.section-rosa {
    background: var(--rosa-subtle);
}

/* Fondo negro */
.section-dark {
    background: var(--negro);
    color: var(--blanco);
}

/* --- Título de sección --- */
.section-title {
    text-align: center;
    margin-bottom: var(--espacio-3xl);
}

.section-title h2 {
    font-size: var(--texto-3xl);
    font-weight: 800;
    color: var(--negro);
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
}

/* Línea decorativa debajo del título */
.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--rosa);
    border-radius: 2px;
}

.section-title p {
    font-size: var(--texto-md);
    color: var(--gris-500);
    max-width: 600px;
    margin: var(--espacio-lg) auto 0;
    line-height: 1.8;
}

/* Variante para secciones oscuras */
.section-dark .section-title h2 {
    color: var(--blanco);
}

.section-dark .section-title p {
    color: rgba(255, 255, 255, 0.65);
}


/* ================================================================
   9. BOTONES
   ================================================================
   Sistema de botones con 3 variantes principales:
   - .btn-primary: fondo rosa sólido
   - .btn-outline: solo borde rosa
   - .btn-instagram: gradiente Instagram
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 36px;
    font-family: 'Montserrat', sans-serif;
    font-size: var(--texto-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: var(--radio-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transicion);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Efecto brillo hover en todos los botones */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

/* --- Botón Primario (fondo rosa) --- */
.btn-primary {
    background: var(--rosa);
    color: var(--blanco);
    border-color: var(--rosa);
}

.btn-primary:hover {
    background: var(--rosa-dark);
    border-color: var(--rosa-dark);
    transform: translateY(-3px);
    box-shadow: var(--sombra-rosa);
}

.btn-primary:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px var(--rosa-glow);
}

/* --- Botón Outline (borde rosa) --- */
.btn-outline {
    background: transparent;
    color: var(--rosa);
    border-color: var(--rosa);
}

.btn-outline:hover {
    background: var(--rosa);
    color: var(--blanco);
    transform: translateY(-3px);
    box-shadow: var(--sombra-rosa);
}

.btn-outline:active {
    transform: translateY(-1px);
}

/* --- Botón Outline Blanco (para fondos oscuros) --- */
.btn-outline-white {
    background: transparent;
    color: var(--blanco);
    border-color: var(--blanco);
}

.btn-outline-white:hover {
    background: var(--blanco);
    color: var(--negro);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

/* --- Botón Instagram (gradiente) --- */
.btn-instagram {
    color: var(--blanco);
    border: none;
    padding: 20px 50px;
    font-size: var(--texto-lg);
    letter-spacing: 2px;
    background: linear-gradient(
        45deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    );
    background-size: 200% 200%;
    animation: instagramGradient 4s ease infinite;
}

.btn-instagram::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
}

.btn-instagram:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 40px rgba(225, 48, 108, 0.45);
}

.btn-instagram:active {
    transform: translateY(-2px) scale(1.01);
}

.btn-instagram i {
    font-size: 1.5rem;
}

/* --- Tamaño grande --- */
.btn-lg {
    padding: 18px 48px;
    font-size: var(--texto-base);
}

/* --- Grupo de botones --- */
.btn-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ================================================================
   10. BIENVENIDA (HOME)
   ================================================================ */
.bienvenida-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.bienvenida-content h2 {
    font-size: var(--texto-3xl);
    font-weight: 800;
    margin-bottom: var(--espacio-lg);
    color: var(--negro);
}

/* Texto resaltado en rosa */
.bienvenida-content .accent {
    color: var(--rosa);
}

.bienvenida-content p {
    font-size: var(--texto-md);
    color: var(--gris-600);
    line-height: 1.9;
    margin-bottom: var(--espacio-2xl);
}


/* ================================================================
   11. ALIANZA ESTRATÉGICA (HOME)
   ================================================================
   Sección con fondo rosa claro (#faf0ee) que muestra la alianza
   entre Everest Global 360 e Intercargo en 3 pasos.
   ================================================================ */
.section-alianza {
    background: #faf0ee;
}

.alianza-header {
    text-align: center;
    margin-bottom: var(--espacio-3xl);
}

.alianza-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: var(--espacio-lg);
    flex-wrap: wrap;
}

.alianza-logos .logo-name {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--negro);
}

.alianza-logos .plus {
    font-size: 2.2rem;
    color: var(--rosa);
    font-weight: 300;
}

/* Grid de 3 pasos */
.alianza-pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-top: var(--espacio-2xl);
}

/* Tarjeta de cada paso */
.paso-card {
    text-align: center;
    padding: 44px 32px;
    background: var(--blanco);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-sm);
    transition: var(--transicion);
    position: relative;
    border: 1px solid rgba(214, 164, 153, 0.15);
}

.paso-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--sombra-lg);
    border-color: var(--rosa-light);
}

/* Número circular del paso */
.paso-number {
    width: 64px;
    height: 64px;
    border-radius: var(--radio-circle);
    background: var(--rosa);
    color: var(--blanco);
    font-size: 1.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--espacio-lg);
    transition: var(--transicion);
    box-shadow: 0 4px 15px var(--rosa-glow);
}

.paso-card:hover .paso-number {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px var(--rosa-glow);
}

.paso-card h3 {
    font-size: var(--texto-lg);
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--negro);
}

.paso-card p {
    font-size: var(--texto-sm);
    color: var(--gris-500);
    line-height: 1.75;
}


/* ================================================================
   12. TARJETAS DE VALORES (HOME)
   ================================================================
   Grid de 4 tarjetas: Seguridad, Eficiencia, Transparencia, Soporte.
   Cada tarjeta tiene un icono circular con animación al hover.
   ================================================================ */
.valores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.valor-card {
    background: var(--blanco);
    border-radius: var(--radio-md);
    padding: 44px 28px;
    text-align: center;
    box-shadow: var(--sombra-sm);
    transition: var(--transicion);
    border: 1px solid var(--gris-200);
    position: relative;
    overflow: hidden;
}

/* Línea rosa que aparece arriba al hover */
.valor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--rosa), var(--rosa-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transicion-lenta);
}

.valor-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--sombra-xl);
    border-color: var(--rosa-light);
}

.valor-card:hover::before {
    transform: scaleX(1);
}

/* Icono circular del valor */
.valor-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radio-circle);
    background: var(--rosa-subtle);
    color: var(--rosa);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--espacio-lg);
    transition: var(--transicion-bounce);
}

.valor-card:hover .valor-icon {
    background: var(--rosa);
    color: var(--blanco);
    transform: scale(1.12) rotate(8deg);
    box-shadow: 0 6px 20px var(--rosa-glow);
}

.valor-card h3 {
    font-size: var(--texto-md);
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--negro);
}

.valor-card p {
    font-size: var(--texto-sm);
    color: var(--gris-500);
    line-height: 1.75;
}


/* ================================================================
   13. PÁGINA SERVICIOS
   ================================================================
   Hero interno con fondo oscuro y grid de 2 columnas con las
   tarjetas de servicios.
   ================================================================ */

/* --- Hero de páginas internas --- */
.page-hero {
    margin-top: var(--header-height);
    padding: 80px 0;
    background: linear-gradient(135deg, var(--negro) 0%, var(--gris-800) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Decoración circular sutil */
.page-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -15%;
    width: 500px;
    height: 500px;
    border-radius: var(--radio-circle);
    background: rgba(214, 164, 153, 0.07);
    pointer-events: none;
}

.page-hero::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 400px;
    height: 400px;
    border-radius: var(--radio-circle);
    background: rgba(214, 164, 153, 0.04);
    pointer-events: none;
}

.page-hero h1 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--blanco);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.5px;
}

.page-hero p {
    font-size: var(--texto-md);
    color: rgba(255, 255, 255, 0.65);
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    line-height: 1.7;
}

/* --- Grid de servicios (2 columnas) --- */
.servicios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

/* Tarjeta de servicio */
.servicio-card {
    background: var(--blanco);
    border-radius: var(--radio-md);
    padding: 48px 36px;
    box-shadow: var(--sombra-sm);
    transition: var(--transicion);
    border: 1px solid var(--gris-200);
    position: relative;
    overflow: hidden;
}

/* Línea rosa inferior al hover */
.servicio-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--rosa), var(--rosa-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transicion-lenta);
}

.servicio-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--sombra-lg);
    border-color: var(--rosa-light);
}

.servicio-card:hover::after {
    transform: scaleX(1);
}

/* Icono del servicio */
.servicio-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radio-lg);
    background: var(--rosa-subtle);
    color: var(--rosa);
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--espacio-lg);
    transition: var(--transicion-bounce);
}

.servicio-card:hover .servicio-icon {
    background: var(--rosa);
    color: var(--blanco);
    transform: scale(1.08);
    border-radius: var(--radio-xl);
    box-shadow: 0 6px 20px var(--rosa-glow);
}

.servicio-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--negro);
}

.servicio-card p {
    font-size: var(--texto-sm);
    color: var(--gris-500);
    line-height: 1.85;
}


/* ================================================================
   14. PÁGINA UBICACIÓN
   ================================================================
   Layout de 2 columnas: información a la izquierda,
   mapa de Google Maps a la derecha.
   ================================================================ */
.ubicacion-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.ubicacion-info {
    padding: 20px 0;
}

/* Cada detalle de ubicación (icono + texto) */
.ubicacion-detail {
    display: flex;
    gap: 20px;
    margin-bottom: var(--espacio-xl);
    align-items: flex-start;
}

.ubicacion-detail-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: var(--radio-md);
    background: var(--rosa-subtle);
    color: var(--rosa);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion);
}

.ubicacion-detail:hover .ubicacion-detail-icon {
    background: var(--rosa);
    color: var(--blanco);
    transform: scale(1.05);
    box-shadow: 0 4px 15px var(--rosa-glow);
}

.ubicacion-detail h3 {
    font-size: var(--texto-base);
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--negro);
}

.ubicacion-detail p {
    font-size: var(--texto-sm);
    color: var(--gris-500);
    line-height: 1.65;
}

.ubicacion-detail a {
    color: var(--rosa);
    font-weight: 600;
    transition: var(--transicion);
}

.ubicacion-detail a:hover {
    color: var(--rosa-dark);
    text-decoration: underline;
}

/* Contenedor del mapa */
.mapa-container {
    border-radius: var(--radio-md);
    overflow: hidden;
    box-shadow: var(--sombra-md);
    border: 3px solid var(--gris-200);
    transition: var(--transicion);
}

.mapa-container:hover {
    box-shadow: var(--sombra-lg);
    border-color: var(--rosa-light);
}

.mapa-container iframe {
    width: 100%;
    height: 460px;
    border: none;
    display: block;
}


/* ================================================================
   15. PÁGINA CONTACTO
   ================================================================
   Centrado con botón grande de Instagram y dirección.
   ================================================================ */
.contacto-wrapper {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.contacto-wrapper > p {
    font-size: var(--texto-md);
    color: var(--gris-600);
    line-height: 1.8;
    margin-bottom: var(--espacio-2xl);
}

/* Información extra debajo del botón */
.contacto-extra {
    margin-top: var(--espacio-3xl);
    padding-top: var(--espacio-2xl);
    border-top: 1px solid var(--gris-200);
}

.contacto-extra p {
    font-size: var(--texto-base);
    color: var(--gris-500);
    margin-bottom: 10px;
}

.contacto-extra .direccion {
    font-weight: 600;
    color: var(--negro);
    font-size: var(--texto-md);
}

.contacto-extra .direccion i {
    color: var(--rosa);
    margin-right: 6px;
}


/* ================================================================
   16. FOOTER
   ================================================================
   Footer de 3 columnas con fondo oscuro (negro).
   Incluye info de empresa, navegación y ubicación.
   ================================================================ */
.footer {
    background: var(--negro);
    color: var(--blanco);
    padding: 70px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: var(--espacio-2xl);
}

/* Título de cada columna del footer */
.footer-section h4 {
    font-size: var(--texto-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: var(--espacio-lg);
    color: var(--rosa);
    position: relative;
    padding-bottom: 12px;
}

.footer-section h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--rosa);
    border-radius: 2px;
}

.footer-section p,
.footer-section a {
    font-size: var(--texto-sm);
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.8;
}

.footer-section a:hover {
    color: var(--rosa);
}

.footer-section p i {
    color: var(--rosa);
    width: 18px;
    margin-right: 4px;
}

/* Redes sociales en el footer */
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: var(--espacio-md);
}

.footer-social a {
    width: 44px;
    height: 44px;
    border-radius: var(--radio-circle);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.65);
    transition: var(--transicion);
}

.footer-social a:hover {
    background: var(--rosa);
    border-color: var(--rosa);
    color: var(--blanco);
    transform: translateY(-4px);
    box-shadow: 0 4px 15px var(--rosa-glow);
}

/* Navegación del footer */
.footer-nav a {
    display: block;
    margin-bottom: 10px;
    transition: var(--transicion);
}

.footer-nav a:hover {
    color: var(--rosa);
    padding-left: 6px;
}

/* Línea inferior y copyright */
.footer-bottom {
    text-align: center;
    padding-top: var(--espacio-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom p {
    font-size: var(--texto-xs);
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
}


/* ================================================================
   17. ANIMACIONES & KEYFRAMES
   ================================================================ */

/* Fade in hacia arriba */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in simple */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Gradiente animado de Instagram */
@keyframes instagramGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Pulso suave */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Clase para scroll reveal */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delays escalonados para grupos de tarjetas */
.fade-in-up:nth-child(1) { transition-delay: 0s; }
.fade-in-up:nth-child(2) { transition-delay: 0.1s; }
.fade-in-up:nth-child(3) { transition-delay: 0.2s; }
.fade-in-up:nth-child(4) { transition-delay: 0.3s; }


/* ================================================================
   18. UTILIDADES
   ================================================================ */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.text-rosa   { color: var(--rosa) !important; }
.text-blanco { color: var(--blanco) !important; }
.text-negro  { color: var(--negro) !important; }

.bg-rosa     { background-color: var(--rosa-subtle) !important; }
.bg-negro    { background-color: var(--negro) !important; }
.bg-blanco   { background-color: var(--blanco) !important; }

.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: var(--espacio-sm) !important; }
.mt-2  { margin-top: var(--espacio-md) !important; }
.mt-3  { margin-top: var(--espacio-lg) !important; }
.mt-4  { margin-top: var(--espacio-xl) !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: var(--espacio-sm) !important; }
.mb-2  { margin-bottom: var(--espacio-md) !important; }
.mb-3  { margin-bottom: var(--espacio-lg) !important; }
.mb-4  { margin-bottom: var(--espacio-xl) !important; }


/* ================================================================
   19. MEDIA QUERIES - TABLET (max-width: 1024px)
   ================================================================ */
@media (max-width: 1024px) {
    /* Valores: de 4 a 2 columnas */
    .valores-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Alianza: de 3 a 2 columnas, último centrado */
    .alianza-pasos {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .alianza-pasos .paso-card:last-child {
        grid-column: 1 / -1;
        max-width: 420px;
        margin: 0 auto;
    }

    /* Servicios: 1 columna */
    .servicios-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Ubicación: 1 columna */
    .ubicacion-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Footer: 2 columnas */
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}


/* ================================================================
   20. MEDIA QUERIES - TABLET SMALL (max-width: 768px)
   ================================================================
   Se activa el menú hamburguesa y se reorganizan los layouts.
   ================================================================ */
@media (max-width: 768px) {
    /* --- Mostrar hamburguesa --- */
    .hamburger {
        display: flex;
    }

    /* --- Menú lateral deslizable --- */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        background: var(--blanco);
        flex-direction: column;
        padding: 100px 28px 40px;
        box-shadow: -4px 0 30px rgba(0, 0, 0, 0.15);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        gap: 4px;
        align-items: stretch;
        z-index: var(--z-nav);
        overflow-y: auto;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu a {
        padding: 14px 20px;
        font-size: var(--texto-base);
        border-radius: var(--radio-sm);
        text-align: left;
    }

    .nav-menu a::after {
        display: none;
    }

    /* --- Carrusel más pequeño --- */
    .hero-carousel {
        height: 70vh;
        min-height: 480px;
    }

    .carousel-content h1 {
        font-size: var(--texto-2xl);
    }

    .carousel-content p {
        font-size: var(--texto-base);
    }

    .carousel-arrow {
        width: 42px;
        height: 42px;
        font-size: 0.95rem;
    }

    .carousel-arrow.prev { left: 12px; }
    .carousel-arrow.next { right: 12px; }

    /* --- Secciones --- */
    .section {
        padding: 70px 0;
    }

    .section-title h2 {
        font-size: var(--texto-2xl);
    }

    .section-title p {
        font-size: var(--texto-base);
    }

    .bienvenida-content h2 {
        font-size: var(--texto-2xl);
    }

    /* --- Valores: 1 columna --- */
    .valores-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    /* --- Alianza: 1 columna --- */
    .alianza-pasos {
        grid-template-columns: 1fr;
    }

    .alianza-pasos .paso-card:last-child {
        max-width: 100%;
    }

    .alianza-logos .logo-name {
        font-size: 1.4rem;
    }

    /* --- Página hero --- */
    .page-hero h1 {
        font-size: var(--texto-2xl);
    }

    .page-hero p {
        font-size: var(--texto-base);
    }

    /* --- Footer: 1 columna --- */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 36px;
    }

    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-social {
        justify-content: center;
    }

    .footer-nav a:hover {
        padding-left: 0;
    }

    /* --- Botón Instagram más pequeño --- */
    .btn-instagram {
        padding: 18px 36px;
        font-size: var(--texto-base);
    }
}


/* ================================================================
   21. MEDIA QUERIES - MÓVIL (max-width: 480px)
   ================================================================
   Ajustes finos para pantallas pequeñas.
   ================================================================ */
@media (max-width: 480px) {
    /* Header más compacto */
    .header {
        height: var(--header-height-mobile);
    }

    .logo img {
        height: 110px;
    }

    /* Ajustar margin-top del carrusel */
    .hero-carousel {
        margin-top: var(--header-height-mobile);
        height: 60vh;
        min-height: 400px;
    }

    .page-hero {
        margin-top: var(--header-height-mobile);
        padding: 60px 0;
    }

    /* Textos del carrusel */
    .carousel-content h1 {
        font-size: 1.6rem;
        line-height: 1.25;
    }

    .carousel-content p {
        font-size: var(--texto-sm);
    }

    .carousel-arrow {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .carousel-indicators {
        bottom: 20px;
        gap: 10px;
    }

    .carousel-indicators button {
        width: 10px;
        height: 10px;
    }

    /* Secciones más compactas */
    .section {
        padding: 50px 0;
    }

    .section-title {
        margin-bottom: var(--espacio-2xl);
    }

    .section-title h2 {
        font-size: 1.6rem;
    }

    .bienvenida-content h2 {
        font-size: 1.6rem;
    }

    .bienvenida-content p {
        font-size: var(--texto-sm);
    }

    /* Botones más compactos */
    .btn {
        padding: 12px 28px;
        font-size: var(--texto-xs);
        letter-spacing: 1px;
    }

    .btn-lg {
        padding: 14px 32px;
        font-size: var(--texto-sm);
    }

    .btn-group {
        flex-direction: column;
        align-items: center;
    }

    .btn-group .btn {
        width: 100%;
        max-width: 280px;
    }

    /* Botón Instagram */
    .btn-instagram {
        padding: 16px 28px;
        font-size: var(--texto-sm);
        letter-spacing: 1px;
    }

    /* Tarjetas con menos padding */
    .valor-card {
        padding: 32px 20px;
    }

    .servicio-card {
        padding: 36px 24px;
    }

    .paso-card {
        padding: 32px 20px;
    }

    /* Mapa */
    .mapa-container iframe {
        height: 300px;
    }

    /* Page hero */
    .page-hero h1 {
        font-size: 1.6rem;
    }

    .page-hero p {
        font-size: var(--texto-sm);
    }

    /* Footer */
    .footer {
        padding: 50px 0 24px;
    }

    .footer-social a {
        width: 40px;
        height: 40px;
    }
}