/* Sección aislada */
.wt3d-section{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 0 rem;
  }
  
  /* GRID: todas las capas comparten la misma celda (1/1) */
  .wt3d-overlay-grid{
    display:grid;
    place-items:center;
    position:relative;
    /* variable solo para ESTA sección */
    --wt3d-bg-tint: 0; /* JS la modificará */
    background-color: #000000;
    
  }
  
  /* Contenedor responsivo con relación 1105x352 */
  .wt3d-banner{
    grid-area: 1 / 1;
    width: 100vw; /*full ancho */
    aspect-ratio: 1105 / 352; /*mantener relación */
    
    overflow:hidden;
    position:relative; /* para el overlay interno */
    z-index: 1; /* fondo base */
   
  }
  
  /* IMAGEN real (respeta corte/alpha) */
  .wt3d-bg{
    width:100%;
    height:100%;
    object-fit:cover; /* llena sin deformar */
    display:block;
    filter: brightness(calc(1 - var(--wt3d-bg-tint, 0))); /* 1 = sin cambio */
    
  }
  

  
  /* MODELO 3D por encima del fondo */
  .wt3d-model{
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    z-index: 3;
    background: transparent !important;
    --poster-color: transparent;
    /* cambiar posicion y tamaño del 3d */
    
    transform: translate(0%, 40%); 
    
  }
  
  /* Loader encima de todo, dentro del grid */
  .wt3d-loader-overlay{
    grid-area: 1 / 1;
    display:flex; align-items:center; justify-content:center;
    z-index: 6;
    width: 100%; height:100%;
    background-color: rgba(255,255,255,.35);
   
  }
  .wt3d-loader{
    border: 6px solid #f3f3f3;
    border-top: 6px solid #E95C27;
    border-radius: 50%;
    width: 50px; height: 50px;
    animation: wt3d-spin 1s linear infinite;
  }
  @keyframes wt3d-spin{ to{ transform: rotate(360deg); } }
  
  /* Controles flotando arriba derecha, sin afectar otras secciones */
  .wt3d-title{
    display: flex;
    flex-direction: column;
    
    justify-content: end;
    translate: 0% 50%;
    padding: 1.5%;
  }
@media (max-width: 576px){
    .wt3d-title{
        
        translate: 0% 30%; 
    }

}
  .wt3d-container{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    top: 1rem;
    right: 1rem;
    align-items: center;
    align-content: center;
  }
  .wt3d-controls{
    position:relative;
    top: 1.5rem; 
    right: .75rem;
    z-index: 7;
    display:flex; 
    flex-direction:row; 
    gap:.5rem; 
    align-items:center;
    align-content: center;
 
    
  }
  .wt3d-label{
    margin: 0 0 .25rem 0;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
  }
  .wt3d-btn{
    appearance:none;
     border:none;
    padding:.5rem .75rem; 
    
    background:#1A1A1A;
     color:#fff; 
     font-weight:600; cursor:pointer;
    transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .wt3d-btn:hover{ transform: translateY(-1px); }
  .wt3d-btn:active{ transform: translateY(0); }
  .wt3d-btn.is-active{
    outline: 2px solid #E95C27;
    box-shadow: 0 0 0 4px #E95C27;
  }
  
  
  
  
  /* Responsivo */
  @media (max-width: 768px){
    .wt3d-banner{
      width: min(100vw, 1105px);
      
    }
  }