/* ==========================================================================
   MUTADOR STUDIO - FEATURES CSS (Componentes, Secciones y Fondos)
   ==========================================================================
   
   TABLA DE CONTENIDO:
   01. Tipografía de Contenido (Títulos y Hero)
   02. Componentes (Filtros, Grid de Proyectos)
   03. Fondo Animado (Mesh Gradient)
   04. sections
   05 
06 marquee
07 preloader
 09 botton skills10 sp builder
10 footer list
11 images portfolio
   ========================================================================== */


:root{

        --bs-orange: #212529;
       --font-family-base: 'helvetica now', sans-serif;
        --font-family-secondary: 'nuckle', sans-serif;
        --font-size-hero: clamp(3rem, 12vw, 7rem);
    
}

.text-stroke-white {
	color: transparent;
	-webkit-text-stroke: 1px;
	-webkit-text-stroke-color: #fff;
}

.text-stroke-black {
	color: transparent;
	-webkit-text-stroke: 1px;
	-webkit-text-stroke-color: #000;
}

p {
    margin-bottom: 10px !important;}
/* ==========================================================================
   01. TIPOGRAFÍA DE CONTENIDO (TÍTULOS Y HERO)
   ========================================================================== */
.hero-title {
    font-size: clamp(2rem, 4.5vw, 4rem); 
    letter-spacing: -0.02em; 
    line-height: 1.1;
    font-weight: 200 !important; 
}

.hero-subtitle {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    font-weight: 300;
}

.titulo-seccion {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    letter-spacing: -0.01em;
    font-weight: 200 !important; 
}

/* ==========================================================================
   02. COMPONENTES (FILTROS, GRID DE PROYECTOS)
   ========================================================================== */

.bg-orange {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-orange),var(--bs-bg-opacity))!important
}

/* ==========================================================================
   03. FONDO ANIMADO (MESH GRADIENT)
   ========================================================================== */
.fondo-gradiente {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1; 
    background-color: #FAFAFA;
    background-image: 
        radial-gradient(at 0% 0%, rgba(220, 220, 225, 0.7) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(235, 230, 220, 0.7) 0px, transparent 50%);
    filter: blur(80px);
    animation: moverGradiente 15s ease-in-out infinite alternate;
}

@keyframes moverGradiente {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.1) translate(2%, 2%); }
    100% { transform: scale(1) translate(-2%, -2%); }
}
/* ==========================================================================
   04. sections
   ========================================================================== */
/* 1. Preparamos las jerarquías de capas (z-index) */
#inicio {
    position: relative;
    z-index: 1;
}

#proyectos {
    position: relative;
    z-index: 2; /* Por encima del footer (0) */

}
.prefooter {

    /* Sombra extra para enfatizar que la página está "por encima" del footer */
    box-shadow: 0 30px 60px rgba(0,0,0,0.4); 
}

/* ==========================================================================
   06. marquee
   ========================================================================== */
.running-line-wrapper {
  margin: auto;
  width: 100%;
  overflow: hidden;
}

.running-line {
  font-size: 100px;
  font-family: sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #444;
  white-space: nowrap;
}

.running-line {
  animation: run 8s linear infinite;
}

.running-line .text-stroke-black {
	color: transparent;
	-webkit-text-stroke: 1px;
	-webkit-text-stroke-color: #000;
}

@keyframes run {
  from {
    transform: translateX(0%);
  }
  /* Magic is here. This is the width of the elem with text after rendering the page */
  to {
    transform: translateX(-5683.35px);
  }
}


/* ==========================================================================
   07 PRELOADER — Pantalla de carga hasta que el grid de Isotope esté listo
   ==========================================================================
   El preloader cubre la página entera mientras el JS calcula el layout.
   Una vez Isotope termina, se añade la clase .preloader-hidden al body
   y la transición CSS lo desvanece y lo saca del flujo con pointer-events:none.
   ========================================================================== */

#preloader {
    position: fixed;
    inset: 0;                        /* top:0 right:0 bottom:0 left:0 */
    z-index: 9999999999999999;                   /* Por encima de todo */
    background-color: #f5f5f5;       /* Mismo fondo que el body, sin flash */
    display: flex;
    align-items: center;
    justify-content: center;

    /* La transición de salida: primero opacidad, luego desaparece */
    transition: opacity 0.5s ease 0.1s, visibility 0s linear 0.6s;
    opacity: 1;
    visibility: visible;
}

/* Cuando el body recibe .preloader-oculto, el preloader se desvanece */
body.preloader-oculto #preloader {
    opacity: 0;
    visibility: hidden;   /* visibility:hidden lo saca del flow de eventos */
    pointer-events: none; /* Por si acaso, ningún clic pasa por él */
}

/* El spinner: un anillo con borde animado */
.preloader-spinner {
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-top-color: #111111;       /* Solo el borde superior es visible */
    border-radius: 50%;
    animation: preloader-girar 0.8s linear infinite;
}

@keyframes preloader-girar {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   08 addon image responsive
   ==========================================================================
   El preloader cubre la página entera mientras el JS calcula el layout.
   Una vez Isotope termina, se añade la clase .preloader-hidden al body
   y la transición CSS lo desvanece y lo saca del flujo con pointer-events:none.
   ========================================================================== */
.mut-bg-image{width: 100%; height: 100%; min-height: 50vh; /* Asegura que la imagen no se repita */
    background-repeat: no-repeat;

    /* Centra la imagen dentro del div */
    background-position: center center;

    /* Clave: ajusta la imagen para cubrir todo el div */
    background-size: cover;

    /* Establece la altura del contenedor */
    /* O '100%' si el padre tiene altura definida */
 }


/* TOC:
   1. SECTION WRAPPER
   2. PARALLAX EFFECT CORE
   3. CONTENT STYLING (OVERLAY)
*/

/* 1. Contenedor de la sección */
.parallax-section {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    overflow: hidden; width: 100%
}

/* 2. El núcleo del efecto */
.bg-parallax {
    /* Ruta de la imagen */
  
    
    /* Propiedades de fijación */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Capa de ajuste */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 3. Overlay opcional para legibilidad de texto */
.parallax-overlay {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    inset: 0;
    z-index: 0;
}

.parallax-section .container {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   09 botton skills
   ==========================================================================
  
   ========================================================================== */

    .skills-container {display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
gap: 0.5rem;}

button.btn.btn-outline-secondary.sppb-btn-primary.sppb-btn-rounded.skills {
    cursor: default !important;
    display: inline-flex;
    max-width: 100%;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    gap: 0.75rem;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.675rem!important;
    line-height: 1.4;
    font-weight: 200;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: ease;
    transition-duration: 300ms;
    --tw-bg-opacity: 1;

    --tw-text-opacity: 1;

    --tw-shadow-color: #CCCCCC;
    height: 1.5rem!important;
    padding: 1rem!important;
   
border-radius: 100px;}
/* ==========================================================================
   09 botton skills10 sp builder
   ========================================================================== */
.sp-page-builder .page-content #QueHacemos {
    box-shadow: 0 0 0 0 var(--bs-dark-rgb) !important;
        box-shadow: 0 0 0 0 #000000!important;
        --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
    margin-bottom: -1px;
    padding-bottom: -1px;
}
.sp-page-builder .page-content #section-id-358a7fe5-f0ca-4371-a4a0-9e7ae8cbac8c {
       box-shadow: 0 0 0 0 #000000!important;
}



/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

.sp-page-builder .page-content #section-id-99e8417a-8f0d-460b-83ea-8cc470433526 {
    padding-top: 75px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    height: 60vh!important; width: 100wv;min-width: 100wv

}

}
/* ==========================================================================
   10. footer List styles
   ========================================================================== */

.list.list_center {
	text-align: center;
}

.list.list_right {
	text-align: right;
}

.list.list_row {
	display: flex;
	flex-wrap: wrap;
	margin-top: -10px;
}

.list.list_row.list_center {
	justify-content: center;
}

.list.list_row.list_right {
	justify-content: flex-end;
}


/* 24.1. List item
   ========================================================================== */

.list__item {
	display: block !important;
	position: relative;
	line-height: 1;
}

li.list__item a{  font-size: 0.7rem;}
/* 24.1.1. List item margins
   ========================================================================== */

/* Defaul margins 10px */
.list__item,
.list .list .list__item {
	margin-bottom: 10px;
}

.list__item:last-child,
.list .list .list__item:last-child {
	margin-bottom: 0;
}

.list_row .list__item {
	margin-top:   10px;
	margin-right: 10px;
	margin-bottom: 0;
}

.list_row.list_center .list__item {
	margin-left:  5px;
	margin-right: 5px;
  
}

.list_row.list_right .list__item {
	margin-left: 10px;
	margin-right: 0;
}

/* 1px margins */
.list_margin-1px .list__item,
.list .list.list_margin-1px .list__item {
	margin-bottom: 1px;
}

.list_margin-1px .list__item:last-child,
.list .list.list_margin-1px .list__item:last-child {
	margin-bottom: 0;
}

.list_margin-1px.list_row .list__item {
	margin-right: 1px;
	margin-bottom: 0;
}

.list_margin-1px.list_row.list_center .list__item {
	margin-left:  1px;
	margin-right: 1px;
}

.list_margin-1px.list_row.list_right .list__item {
	margin-left: 1px;
	margin-right: 0;
}
/* ==========================================================================
   11 images portfolio
   ========================================================================== */

.image-container-bg{height: auto}

@media (max-width: 768px) {
    
    
.image-container-bg{height: auto;     background-size: contain!important;}
    
}