:root {
  --verde: #083b3d; 
  --rosa: #f7c4c2;; 
}
/* RESET GLOBAL */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* BODY Y HTML */
html, body {
    height: 100%;      /* altura completa para que Locomotive funcione */
    font-family: "Poppins", sans-serif;
    color:black;
    overflow: hidden;   /* bloquea scroll nativo; Locomotive controlará el scroll */
}

h1, h2 {
  margin: 0;   padding: 0; 
  font-size: 1em; 
  font-weight: normal; 
  color: inherit; 
  display: block; 
}
a {text-decoration: none; color:black}
a:hover {color:var(--verde)}

/* CONTENEDOR PRINCIPAL DE LOCOMOTIVE */
[data-scroll-container] {
    min-height: 100vh; /* al menos una pantalla completa */
}
      
/* SECCIONES PRINCIPALES */
.section {
    height: 100vh;             /* ocupa toda la pantalla */
    display: flex;             /* activa Flexbox */
    flex-direction: column;    /* coloca las capas verticalmente */
    justify-content: center;   /* centra capas verticalmente */
    align-items: center;       /* centra capas horizontalmente */
    position: relative;        /* necesario para posicionamiento de capas */
}      
      
.uno { background: var(--verde); color: white;} 
.dos { 
    background: var(--rosa); color: black;
} 
.tres {background: var(--verde);color: white;}

.tres{
  background: url('../images/tv-dk.gif') center/cover no-repeat; /* Imagen de fondo */
}
.dos{
  background: url('../images/lineas.jpg') center/cover no-repeat; /* Imagen de fondo */
}

.tres::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(8, 59, 61, 0.9); /* color sólido con 90% de opacidad */
}
          
 .logo {
        display: flex;
        justify-content: center; /* centra horizontalmente */
        align-items: center;     /* centra verticalmente */
        text-align: center;
        font-family: 'Unique', sans-serif; /* tu tipografía .otf */   
    } 
      
/* CAPA UNO */ 
      
    .uno {
        position: relative;
        overflow: hidden; /* recorta el video */
        background: black; /* necesario para blend */
    }
        /* VIDEO COMO FONDO */
    .uno .video-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;

    }

    .uno .estudio {
        font-weight: 600;
        padding-top: 5rem;
        padding-bottom: 5rem;
        height:200px;   
        font-size:1.5rem;
        line-height: 1rem;
        color: white; 
        pointer-events: auto;
        z-index: 1;

      } 

    .uno .logo {
        padding-top: 5rem;
        height: 80vh;    
        color: white; 
        pointer-events: auto;
        z-index: 2;

      } 
    .uno .logo {
        font-size: clamp(40rem, 100vh, 80rem);
        line-height: 30rem;
        font-weight: normal;

      } 

    .uno .contact {        
        font-size: 2rem;
        font-weight: 600;     
        width: 95vw;
        padding-bottom: 200px;       
        pointer-events: auto;
        mix-blend-mode: screen;     /*prueba: difference, screen, lighten;*/
        z-index: 5;   
        
      } 
    .uno .btn{ background-color: var(--verde);  border-radius: 10px;}
    .uno .contact a {
        color: white; 
        padding: 5px 10px 5px 10px ;
        opacity: 1;
        
    }
        
    
/* FIN CAPA UNO */
      
    
/* CAPA DOS */   

    .dos .tagline {

      max-width:80vw;  
      z-index: 2;
    }
    .dos .tagline h2 {
      font-size: 5rem;
      line-height: 5rem;
      font-weight: 600;
    }


    .dos .contact {
        font-size: 1.8rem;
        font-weight: 600;
        width:80vw;
        text-align: right;
        padding-right: 1rem;
        z-index: 2;
    }
    .dos .btn{  border-radius: 10px;
        background-color: #cca2a0; 
        opacity: 0.8;
        padding: 5px 10px 5px 10px ;
    }
/* FIN CAPA DOS */
      
      
/* CAPA TRES */  

    .tres .logo { 
        font-size: 8rem;
        line-height: 8rem;
        position: absolute;
        z-index: 3;        
        pointer-events: auto;
    }  

    .tres .lateral {
        height: 90vh;            
        width: 95vw ;
        position: relative; 
        z-index: 2;        
        display: grid;
        align-content: start;
        justify-content: start;
        padding: 1rem;
        margin-bottom: 3rem;

    }
    .tres .contact {
        width: 90vw;
        margin-top: 3rem;
        margin-bottom: 38vh;
        font-size: 2rem;
        font-weight: 600;       
        text-align: right;        
    }

  .tres .servicios  {margin-bottom: 3rem; }
   .tres .servicios span {
       display: block;
      font-size: 3rem;
      font-weight: 600;
      line-height: 3rem;
    }
    .tres a {color: white}

/* FIN CAPA TRES */


@media screen and (max-width: 768px) {    
    .uno .logo {
        padding-top: 5rem;
        height: 60vh; 
        color: white; 
        background-color: none
      } 
    .uno .logo h1{ 
        font-size: 25rem;
        line-height: 40rem;
        font-weight: normal;
      } 
    
    .uno .contact {    
        padding-bottom: 350px;       
     } 
    .dos .tagline {
      max-width:85vw;   
    }
    
    .dos .tagline h2{
      font-size: 3rem;
      line-height: 3rem;
       font-weight: 600;
    }

}

.legal {
    width: 99%;
    padding: 10%;
}
.legal p{
    margin-top: 10px;
  font-size: 12px;
}