/* ==========================================================================
   1. VARIABLES, FUENTES Y CONFIGURACIÓN GENERAL
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..990;1,100..990&display=swap');


   :root {
       --bg-light: #f4f1ea;
       --bg-dark: #0d0d0d;
       --blue-dark: #2F3782;
       --blue-intense: #28348A;
       --red-brand: #e9464e;
       --yellow-brand: #ffcc00;
       --grid-color: rgba(0, 0, 0, 0.06);
       --grid-color-dark: rgba(255, 255, 255, 0.05);
   }

   html, body{
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
   }
   
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Montserrat', sans-serif;
       -webkit-tap-highlight-color: transparent;
   }
   
   body {
       background-color: var(--bg-light);
       color: var(--blue-dark);
       overflow-x: hidden;
   }


   header, #hero-section, #sevices-section, #portfolio-seccion {
       background-image: 
           linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
           linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
       background-size: 80px 80px;
   }
   
   a{
    text-decoration: none;
   }
   
   /* ==========================================================================
      2. HEADER / NAVEGACIÓN
      ========================================================================== */
      header {
        border-bottom: 2px solid rgb(112, 112, 112);
        padding: 10px 40px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: transparent; 
        transition: transform 0.4s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
    }
    
    .mobile-menu-icon{
        display: none;
    }

    .header-hidden {
        transform: translateY(-100%);
    }

    .header-scrolled {
        background-color: rgba(244, 241, 234, 0.85); 
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);
    }

    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .logo-header img {
        height: 50px;
        display: block;
    }
    
    nav ul {
        display: flex;
        list-style: none;
        gap: 30px;
    }
    
    nav ul li a {
        text-decoration: none;
        color: #28348A; 
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 1px;
        transition: color 0.3s;
    }
    
    nav ul li a:hover {
        color: var(--red-brand);
    }
   
   /* ==========================================================================
      3. HERO SECTION
      ========================================================================== */
   #hero-section {
       min-height: 90vh;
       display: flex;
       align-items: center;
       padding: 60px;
       position: relative;
       border-bottom: 2px solid rgb(112, 112, 112);
   }
   
   /* Gradiente difuminado del lado izquierdo */
   #hero-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 30%;
       height: 100%;
       background: linear-gradient(135deg, rgba(233,70,78,0.5) 0%, rgba(255,204,0,0.5) 50%, transparent 100%);
       filter: blur(60px);
       z-index: 1;
   }
   
   .main-text {
       display: flex;
       width: 100%;
       max-width: 1400px;
       margin: 0 auto;
       justify-content: space-between;
       align-items: center;
       z-index: 2;
   }
   
   #main-text {
       font-size: 4.7em;
       line-height: 1.5;
       font-weight: 900;
       letter-spacing: 0px;
   }
   
   #main-text .red { color: var(--red-brand); }
   #main-text .blue-light { color: var(--blue-intense); font-weight: 500; }
   #main-text .blue-bold { color: var(--blue-intense); }
   
   .main-text img {
       max-width: 50%;
       height: auto;
       object-fit: contain;
   }
   
/* ==========================================================================
   4. SECCIÓN SERVICIOS (Ajustado a image_40a9e7.png - 4 esquinas y 1 centro)
   ========================================================================== */
#sevices-section {
    padding: 80px 40px;
    position: relative;
    min-height: 700px; 
}

/* Contenedor wrapper para posicionar los servicios de forma absoluta */
.services-grid-wrapper {
    position: relative;
    max-width: 1100px;
    height: 450px;
    margin: 0 auto;
}

.services-container {
    position: absolute;
    cursor: pointer;
    width: 140px;
    height: 140px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Posiciones exactas emulando las 4 esquinas y el centro */
.services-container:nth-child(1) { top: 0; left: 0; }         /* Content Manager (Top-Left) */
.services-container:nth-child(2) { bottom: 0; left: 0; }      /* Desarrollo (Bottom-Left) */
.services-container:nth-child(3) { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Paid Media (Centro) */
.services-container:nth-child(4) { top: 0; right: 0; }        /* Cobertura (Top-Right) */
.services-container:nth-child(5) { bottom: 0; right: 0; }     /* Fotografía (Bottom-Right) */

/* El resto del comportamiento hover heredado se mantiene limpio */
.content-img, .development-img, .paid-media-img, .events-img, .fotografia-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    transition: opacity 0.3s ease;
}

/* Modificación para que la tarjeta descriptiva se abra centrada sobre su contenedor */
.content-description, .development-description, .paid-media-description, .events-description, .fotografia-description {
    position: absolute;
    width: 300px;
    padding: 25px;
    border-radius: 0px 40px 0px 0px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    text-align: center;
    color: black;
}

.content-img img, .development-img img, .paid-media-img img, .events-img img, .fotografia-img img{
    width: 10em;
}

.content-img p, .development-img p, .paid-media-img p, .events-img p, .fotografia-img p{
    width: 20em;
}

/*Content manager*/
.content-description{
    background-color: #28348A;
}
.content-description p .white-text{
    color: #F1E8DC;
    font-weight: bold;
}

.content-description img{
    width: 10em;
}

.content-description p .yellow-text{
    color: #FFCD07;
    font-weight: bold;
}

.content-description p{
    font-size: 1.2em;
}

.content-description:hover{
    cursor:default;
}

/*Development*/
.development-description{
    background-color: #F1E8DC;
}

.development-description img{
    width: 8em;
}

.development-description p{
    margin-top: 20px;
    font-size: 1.2em;
}

.development-description p .blue-text-bold{
    color: #28348A;
    font-weight: bold;
}

.development-description p .blue-text-light{
    color: #28348A;
}

.development-description p .red-text-bold{
    color: #E9464E;
    font-weight: bold;
}

.development-description:hover{
    cursor: default;
}

/*Paid Media*/
.paid-media-description{
    background-color: #FFCD07;
}

.paid-media-description img{
    width: 10em;
}

.paid-media-description p{
    font-size: 1.2em;
}

.paid-media-description .blue-text-bold{
    color: #28348A;
    font-weight: bold;
}

.paid-media-description .red-text-bold{
    color: #E9464E;
    font-weight: bold;
}

.paid-media-description:hover{
    cursor: default;
}

/*Events*/
.events-description{
    background-color: #E9464E;
}

.events-description img{
    width: 10em;
}

.events-description p{
    margin-top: 20px;
    font-size: 1.1em;
}

.events-description .white-bold-text{
    font-weight: bold;
    color: white;
}

.events-description .yellow-bold-text{
    font-weight: bold;
    color: #FFCD07;
}

.events-description:hover{
    cursor:default;
}

/*Fotografia*/
.fotografia-description{
    background-color: #28348A;
}

.fotografia-description img{
    width: 10em;
}

.fotografia-description p{
    font-size: 1.2em;
}

.fotografia-description .white-bold-text{
    font-weight: bold;
    color: white;
}
.fotografia-description .yellow-bold-text{
    font-weight: bold;
    color: #FFCD07;
}

.fotografia-description:hover{
    cursor: default;
}

/* Manteniendo el hover funcional */
.services-container:hover .content-img,
.services-container:hover .development-img,
.services-container:hover .paid-media-img,
.services-container:hover .events-img,
.services-container:hover .fotografia-img { opacity: 0; }

.services-container:hover .content-description,
.services-container:hover .development-description,
.services-container:hover .paid-media-description,
.services-container:hover .events-description,
.services-container:hover .fotografia-description { opacity: 1; visibility: visible; transform: scale(1); }

.services-container.active .content-img,
.services-container.active .development-img,
.services-container.active .paid-media-img,
.services-container.active .events-img,
.services-container.active .fotografia-img { opacity: 0; }

.services-container.active .content-description,
.services-container.active .development-description,
.services-container.active .paid-media-description,
.services-container.active .events-description,
.services-container.active .fotografia-description { opacity: 1; visibility: visible; transform: scale(1); }

/* ==========================================================================
   5. PORTAFOLIO (Ajustado a image_40aa03.png - Central al frente, resto detrás)
   ========================================================================== */
.portfolio-images {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    max-width: 1000px;
    height: 450px;
    margin: 0 auto;
}

.img-up-portfolio{
    margin-left: 1%;
}

.img-up-portfolio img{
    width: 10em;
}

.img-down-portfolio{
    margin-left: 90%;
}

.img-down-portfolio img{
    width: 10em;
}

.portfolio-images img {
    position: absolute;
    width: 220px;
    height: 380px;
    object-fit: cover;
    border: 2px solid var(--blue-dark);
    transition: transform 0.4s ease, z-index 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Posicionamiento en capas (Z-Index) simulando la profundidad */
.portfolio-images img:nth-child(1) { transform: translateX(-240px) scale(0.85); z-index: 1; }
.portfolio-images img:nth-child(2) { transform: translateX(-120px) scale(0.9); z-index: 2; }
.portfolio-images img:nth-child(3) { transform: translateX(120px) scale(0.9); z-index: 2; }
.portfolio-images img:nth-child(4) { transform: translateX(240px) scale(0.85); z-index: 1; }

/* La tarjeta central (Paid Media / Index central) al frente de todo */
.portfolio-images img:nth-child(5) { 
    transform: translateX(0) scale(1.05); 
    z-index: 5; 
}

/* ==========================================================================
   6. NUESTRO PROCESO (Ajustes de Escala, Título de Borde a Borde y Estrella)
   ========================================================================== */
   #time-line-process {
    background-color: var(--blue-dark);
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: top left;
    background-repeat: repeat;
    padding: 60px 0 200px 0;
    position: relative;
    color: #fff;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* Control absoluto de la 'A' de fondo */
.background-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    display: block;
}

.a-background {
    width: auto;
    height: 95%;
    opacity: 0.5;
}

/* CANVAS CENTRAL DEL PROCESO */
.canvas-proceso {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 520px;
    margin: 0 auto;
    z-index: 2;
}

/* LA LÍNEA DE TIEMPO MÁS GRANDE (PATH AGRAVADO) */
.time-line {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%) scale(1.15); /* Agrandamos el path completo un 15% */
    left: 0;
    z-index: 1;
    transform-origin: center;
}

.time-line-mobile{
    display: none;
}

.time-line svg {
    width: 100%;
    height: auto;
    display: block;
}

.time-line svg path {
    stroke-dasharray: 2500;
    stroke-dashoffset: 2500;
    animation: dibujarLinea 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes dibujarLinea {
    from { stroke-dashoffset: 2500; }
    to { stroke-dashoffset: 0; }
}

/* CARDS DE PASOS */
.paso-card {
    position: absolute;
    z-index: 3;
    opacity: 0;
    transform: translateY(20px);
    animation: aparecerCard 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Coordenadas adaptadas al path agrandado */
.paso-card[style*="left: 8%"]  { top: 10% !important; left: 6% !important; }
.paso-card[style*="left: 22%"] { top: 60% !important; left: 20% !important; }
.paso-card[style*="left: 54%"] { top: 30% !important; left: 53% !important; }
.paso-card[style*="left: 78%"] { top: 14% !important; left: 76% !important; }

/* BADGES AMARILLOS */
.badge-numero {
    background-color: #f1bd1c;
    color: var(--blue-dark);
    padding: 6px 16px;
    font-weight: 800;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px 18px 4px 4px;
    margin-bottom: -4px;
    position: relative;
    z-index: 5;
}

.badge-numero span {
    color: var(--red-brand); 
    font-size: 26px;
    font-weight: 900;
    margin-right: 8px;
    line-height: 1;
}

/* CAJAS DE TEXTO TRANSPARENTES */
.box-desc {
    background: rgba(22, 33, 80, 0.45);
    border: 1.5px solid rgba(233, 70, 78, 0.6);
    padding: 18px 20px;
    border-radius: 14px;
    width: 250px;
    backdrop-filter: blur(4px);
    position: relative;
    z-index: 4;
}

.box-desc p {
    font-size: 1em;
    line-height: 1.4;
    color: #ffffff;
}

/* DOODLES / ICONOS GENERALES */
#time-line-process .doodle { 
    position: absolute; 
    z-index: 6; 
}
#time-line-process .doodle-flor { bottom: -45px; left: 45px; width: 55px; height: auto; }
#time-line-process .doodle-foco { top: -55px; left: -10px; width: 50px; height: auto; }
#time-line-process .doodle-corona { top: -45px; left: -5px; width: 48px; height: auto; }

/* FORZADO DE LA ESTRELLA: MÁS BAJA DENTRO DEL BUCLE INFERIOR */
.time-line-title{
    text-align: center;
    width: 100%;
}
#time-line-process .doodle-estrella { 
    position: absolute !important;
    top: auto !important;
    bottom: -75px !important; /* Bajada radical para que cruce el bucle rojo perfectamente */
    left: -45px !important; 
    width: 60px !important; 
    height: auto !important;
    display: block !important;
}

/* DELAYS */
.canvas-proceso .paso-card:nth-child(2) { animation-delay: 0.6s; }
.canvas-proceso .paso-card:nth-child(3) { animation-delay: 1.6s; }
.canvas-proceso .paso-card:nth-child(4) { animation-delay: 2.6s; }
.canvas-proceso .paso-card:nth-child(5) { animation-delay: 3.6s; }

@keyframes aparecerCard {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TÍTULO CORREGIDO: DE BORDE A BORDE REAL DEL MONITOR (SIN SALIRSE) */
#time-line-process .time-line-title h1 {
    font-size: 10.8vw; /* Ajustado milimétricamente para que no rompa el viewport */
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 3px rgba(233, 70, 78, 0.35);
    letter-spacing: -4px; /* Un toque más compacto e industrial */
    line-height: 0.85;
    text-transform: uppercase;
    white-space: nowrap;
    
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100vw;
    margin: 0;
    z-index: 1;
    pointer-events: none;
    
    /* Compresión horizontal nativa para asegurar que clave los dos extremos */
    transform: scaleX(0.96);
    transform-origin: left center;
}
   /* ==========================================================================
      7. TESTIMONIOS Y RESERVA
      ========================================================================== */
    /* ================= TESTIMONIOS ================= */

#testimony-section{
    background:#0D0D0D;
    padding:90px 0;
}

.carousel-container{
    width:100%;
    overflow:hidden;
}

.testimony-slider{
    display:flex;
    gap:30px;
    transition:transform .8s ease;
    padding-inline:40px;
}

.testomony-card{
    flex:0 0 calc((100% - 60px)/3);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.testimony-text{
    border:2px solid #E9464E;
    border-radius:18px 18px 18px 0;
    padding:35px;
    min-height:220px;
    display:flex;
    align-items:center;

}

.testimony-text p{
    color:white;
    line-height:1.7;
    text-transform:uppercase;
    font-size:.95rem;
}

.testimony-image{
    margin-top:25px;
    display:flex;
    justify-content:flex-end;
    gap:15px;
    align-items:center;
}

.name p{
    color:white;
    font-weight:bold;
    letter-spacing:1px;
}

.image img{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
}
   
   /* Formulario de reserva y Calendario */
   #date-section {
       background-color: var(--bg-dark);
       padding: 60px 40px;
       color: #fff;
       display: flex;
       justify-content: center;
       text-align: center;
       align-items: flex-start;
       gap: 60px;
       flex-wrap: wrap;
       border-bottom: 1px solid #222;
   }

   .date-title .appointment-button{
        display: inline-block;
        padding: 15px 30px;
        background-color: #FAC53A;
        text-decoration: none;
        color: #28348A;
        margin-top: 40px;
        border-radius: 10px;
        font-weight: bold;
        transition: 0.3s ease;
   }

   .date-title .appointment-button:hover{
    background-color: #b38c2b;
    color: #121842;
    transition: 0.3s ease;
   }
   
   .date-title h3 {
       width: 100%;
       text-align: center;
       font-size: 24px;
       font-weight: 800;
       margin-bottom: 40px;
       color: var(--red-brand);
   }
   

   /* ==========================================================================
      8. FOOTER
      ========================================================================== */
   footer {
       background-color: var(--bg-dark);
       padding: 40px;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .logo-footer img { height: 40px; }
   .social-media-contact { display: flex; align-items: center; gap: 20px; }
   .email-contact { color: #fff; font-weight: 600; margin-right: 20px; }
   .social-media-contact a img { width: 30px; height: 30px; }

   /* ==========================================================================
   ESTILOS CORREGIDOS PARA LOS TÍTULOS GIGANTES (ESTILO STROKE / SIN RELLENO)
   ========================================================================== */

/* 1. Título de Servicios (image_40a263.png) */
#sevices-section .title h1 {
    font-size: 11vw; /* Ajuste dinámico para que ocupe todo el ancho de la pantalla */
    font-weight: 900;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 3px var(--red-brand); /* Borde rojo grueso */
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 80px;
    text-transform: uppercase;
    margin: 0 0 80px 0;
}

/* 2. Título de Portafolio (image_40a281.png) */
#portfolio-seccion .portfolio-title h1 {
    font-size: 9vw;
    font-weight: 900;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 3px var(--red-brand); /* Borde rojo grueso */
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 60px;
    text-transform: uppercase;
}

/* 3. Título de Nuestro Proceso (image_40a54d.png / image_40aa22.png) */
#time-line-process .time-line-title h1 {
    font-size: 8.5vw; /* Un poco más pequeño para que entre completo abajo */
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 3px rgba(233, 70, 78, 0.4); /* Borde rojo semitransparente sobre el fondo azul */
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    
    /* Posicionamiento absoluto abajo a la izquierda */
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    z-index: 1; /* Por encima del fondo, alineado con el diseño */
    margin: 0;
}

/*Responsive 1366 deskop*/

@media(max-width: 1366px){
    /*Hero section*/
    #hero-section{
        min-height: 90vh;
        width: 100%;
    }
    #main-text{
        font-size: 3.5em;
        align-items: center;
        justify-content: left;
        line-height: 1.5;
    }

    /*Services section*/
    #sevices-section .title h1{
        font-size: 8vw;
        white-space: nowrap;
        letter-spacing: -5px;
    }
    .services-grid-wrapper{
        max-width: 900px;
    }
    .content-description, .development-description, .paid-media-description, .events-description, .fotografia-description{
        max-width: 250px;
        max-height: 300px;
    }

    .content-description p, .development-description p, .paid-media-description p, .events-description p, .fotografia-description p{
        font-size: 1em;
    }

    .content-description img, .development-description img, .paid-media-description img, .events-description img, .fotografia-description img{
        width: 7em;
    }

    .content-img img, .development-img img, .paid-media-img img, .events-img img, .fotografia-img img{
        width: 9em;
    }

    /*Portfolio section*/
    #portfolio-section .portfolio-title h1{
        font-size: 9vw;
    }

    /*Process section*/
    #time-line-process .time-line-title h1{
        font-size: 8.5vw;
    }
}

@media (max-width: 1280px) {
    .assets-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem 2rem;
        max-width: 760px; /* Ancho acotado para que las 4 queden centradas y proporcionadas */
        margin: 3rem auto;
        padding: 0 1.5rem;
    }
}

.assets-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 3.5rem 2.5rem; /* Mayor separación entre cajas */
    max-width: 1400px;
    margin: 4rem auto;
    padding: 0 2rem;
}

/* Caja individual más alta y espaciosa */
.asset {
    border-radius: 24px; /* Bordes un poco más redondeados */
    padding: 2.5rem 1.8rem; /* Mayor relleno interno arriba y a los lados */
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem 1.2rem; /* Más espacio interno entre las 2 columnas de íconos */
    align-items: center;
    justify-items: center;
    text-align: center;
}

/* Título de la tarjeta más grande */
.asset h3 {
    grid-column: 1 / -1;
    font-size: 1.35rem; /* Un poco más de presencia al título */
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.8rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Contenedor de cada ícono + texto */
.asset-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Íconos más grandes */
.asset-img {
    width: 56px; /* Subimos de 42px a 56px */
    height: 56px;
    object-fit: contain;
    margin-bottom: 0.6rem;
}

/* Texto del ícono proporcional al nuevo tamaño */
.asset-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: 0.05em;
    margin: 0;
    text-transform: uppercase;
}

.asset-white{
    background-color: #fb414a;
}

.asset-blue{
    background-color: #242b94;
}

/* Ajuste responsivo para celulares */
@media (max-width: 768px) {
    .assets-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 2rem auto !important;
        padding: 0 1.5rem !important;
        box-sizing: border-box !important;
    }
    .asset{
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
}

/*Responsive mobile*/

@media(max-width: 768px){
    /*Navegation bar*/
    .mobile-menu-icon{
        display: flex;
        width: 5%;
        margin-right: 40px;
    }
    .hidden-menu-mobile{
        display: flex;
        background-color: #E9464E;
        position: absolute;
        top: 100%;
        flex-direction: column;
        width: 100%;
        gap: 0;
        left: 0;
        height: 100vh;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-5px);
        transition: opacity .3s ease, transform .3s ease, visibility .3s;
        
    }
    .hidden-menu-mobile li a{
        display: block;
        padding: 20px;
        justify-content: center;
        text-align: center;
        font-size: 2em;
        font-weight: 1;
        line-height: 3.5em;
    }

    .red-background{
        background-color: #E9464E;
        border-bottom: none;
    }

    .hidden-menu-mobile.active{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    /*Hero Section*/
    #hero-section{
        height: 95vh;
    }
    .main-text{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100;
    }

    #main-text{
        text-align: center;
        font-size: 2.2rem !important;
        line-height: 1.2;
    }

    .logo-hero{
        margin-top: 30%;
        width: 100%;
        max-width: 3000px !important;
        height: auto !important;
    }

    /*Services Section*/
    #sevices-section .title h1{
        font-size: 7.5vw;
        white-space: nowrap;
        letter-spacing: -1px;
    }

    .services-container{
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 80% !important;
    }

    .title{
        width: 100%;
    }

    .services-grid-wrapper{
        height: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }
    

    .content-img img, .development-img img, .paid-media-img img, .events-img img, .fotografia-img img{
        width: 7em;
    }

    .content-description img, .development-description img, .paid-media-description img, .events-description img, .fotografia-description img{
        width: 5em;
    }

    /*Portfolio section*/

    .img-up-portfolio img{
        width: 8em;
    }

    .img-down-portfolio{
        margin-left: 70%;
    }

    .portfolio-images img{
        width: 10px;
    }

    /*Process section*/
    #time-line-process{
        padding: 50px 0 60px;
    }
    
    .canvas-proceso{
        position: relative;
        height: auto;
        min-height: 0;
    }
    
    .time-line{
        display: none;
    }
    
    .time-line-mobile{
        display: block;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 92%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }
    
    .time-line-mobile svg{
        width: 100%;
        height: 100%;
        display: block;
    }
    
    .time-line-steps{
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        padding: 10px 6% 10px;
        box-sizing: border-box;
    }
    
    .paso-card,
    .paso-card[style*="left: 8%"],
    .paso-card[style*="left: 22%"],
    .paso-card[style*="left: 54%"],
    .paso-card[style*="left: 78%"],
    .paso-card.one,
    .paso-card.two,
    .paso-card.three,
    .paso-card.four{
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        max-width: 248px;
        width: 85%;
    }

    
    .paso-card.one,
    .paso-card.three{
        align-self: flex-start;
    }
    
    .paso-card.two,
    .paso-card.four{
        align-self: flex-end;
    }
    
    .time-line-title h1{
        position: static !important;
        bottom: auto !important;
        margin: 60px 0 0 0 !important;
        font-size: 9vw;
    }
    /*Testimony section*/
    .testomony-card{
        flex:0 0 calc((100% - 60px)/1);
        display:flex;
        flex-direction:column;
        justify-content:space-between;
    }

    footer{
        flex-direction: column;
        gap: 25px;
        text-align: center;
        padding: 40px 20px;
    }
    .logo-footer img{
        height: 55px;
        margin: 0 auto;
    }
    .social-media-contact{
        flex-direction: column;
        gap: 15px;
        width: 100%;
        justify-content: center;
    }
    .social-media-links{
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .email-contact{
        margin-right: 0;
        font-size: 0.95rem;
        word-break: break-all;
    }
    .social-media-contact a{
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .social-media-contact a img{
        width: 32px;
        height: 32px;
        object-fit: contain;
    }
}