:root {
      --accent: #e86f84;
      --text: #222;
      --muted: #666;
      --maxw: 1200px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      overflow-X: hidden;
      font-family: "Open Sans", sans-serif;
      color:var(--text);
      background:#fff;
      -webkit-font-smoothing:antialiased;
    }
 
    
    #personajes{
           background:#ffca45;
           height:100vh;
   
    }
    
   
    
 

    .wrap{
      max-width:var(--maxw);
      margin:30px auto;
      padding:20px;
    }

    .title{
      text-align:center;
      color:var(--accent);
      font-weight:700;
      letter-spacing:1px;
      font-size:28px;
      margin-bottom:18px;
    }

    .slider {
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:18px;
      padding:10px 20px 40px;
    }

    .stage {
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:40px;
      position:relative;
    }

    /* ARROWS */
    .arrow {
      position:absolute;
      top:20%;
      transform:translateY(-50%);
      font-size:64px;
      line-height:1;
      color:tomato;
      width:50px;
      height:50px;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      z-index:50;
    }
    .arrow.left { left:6px; }
    .arrow.right { right:6px; }

    .arrow:hover { transform:translateY(-50%) scale(1.06); }

    /* CONTENT COLUMNS */
    .content {
      display:flex;
      align-items:flex-start;
      justify-content:center;
      gap:60px;
      width:100%;
      max-width:1100px;
      padding:10px 20px;
    }

    /* IMAGEN PRINCIPAL */
    .image-wrap {
      width:390px;
      height:390px;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:visible; /* para que 'salga' del cuadro si queremos */
    }

    .slide {
      position:absolute;
      width:100%;
      height:100%;
      object-fit:contain;
      top:0;
      left:0;
      opacity:0;
      transform-origin:center bottom;
      filter:drop-shadow(0 18px 30px rgba(0,0,0,0.18));
      will-change:transform,opacity;
    }

    /* INFO (texto) */
    .info {
      width:calc(100% - 440px);
      max-width:520px;
      min-width:280px;
    }

    .info .section-heading {
      color:var(--accent);
      text-align:center;
      font-weight:700;
      letter-spacing:1px;
      margin-bottom:8px;
      display:none; /* si quieres que aparezca encima, se puede habilitar */
    }

    .char-title {
        font-family: "Open Sans", sans-serif;
      font-size:36px;
      color:white!important;
      font-weight:900;
      margin:0 0 12px;
    }

    .char-desc {
        font-family: "Open Sans", sans-serif;
      color:#fff;
      line-height:1.45;
      font-size:16px;
      margin:0;
    }

    /* THUMBNAILS */
    .thumbs {
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:center;
      width:100%;
      overflow:visible;
      padding-top:10px;
      padding-bottom:10px;
    }

    .thumb {
      width:72px;
      height:72px;
      border:3px solid rgba(0,0,0,0.06);
      border-radius:8px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:visible;
      cursor:pointer;
      transition:transform .28s cubic-bezier(.2,.9,.3,1), border-color .2s;
      flex:0 0 auto;
      box-shadow: 0 2px 6px rgba(0,0,0,.06);
      position:relative;
    }

    .thumb img {
      width:100%;
      height:100%;
      object-fit:contain;
      border-radius:5px;
      display:block;
      pointer-events:none;
      transform-origin:center bottom;
      transition:transform .28s cubic-bezier(.2,.9,.3,1);
    }

    .thumb.active {
      border-color:var(--accent);
      transform:translateY(-16px) scale(1.05);
      box-shadow: 0 18px 35px rgba(0,0,0,0.18);
      z-index:40;
      background:#993fc8;
    }

    .thumb.active img {
      transform: translateY(-10px) scale(1.12);
    }

    /* Responsive */
    @media (max-width:900px){
        

        
    a .logollolleo{
            max-width:500px;
        }
        
        #nosotros{
            overflow:hidden;
            background-color:#74E1DF;
        }
        
      .content { gap:20px; flex-direction:column; align-items:center; }
      .image-wrap{ width:180px; height:260px; }
      .info{ width:93vw; max-width:93vw; text-align:left; padding:0 10px; }
      .arrow.left{ left:2px; } .arrow.right{ right:2px; }
        /* THUMBNAILS */
        .thumbs {display:none;gap:12px;align-items:center;justify-content:center;width:100%;overflow:visible; padding-top:10px;padding-bottom:10px;}
     #personajes{
           background:#ffca45;
           height:100vh;
   
    }
    
     #personajes h2{
           text-align:center;
           font-size:1rem;
                   font-family: "Open Sans", sans-serif;

   
    }
    }
    
      #nosotros{
            overflow:hidden;
            background-color:#74E1DF;
        }
    
    strong{
           text-align:center;
           font-size:1rem;
                   font-family: "Open Sans", sans-serif;
                   text-transform: uppercase;

   
    }
    
    .botonLlolleo{ 
        margin:0 auto;
        height:auto;
        width:100%;
        padding:10px;
        color:#dcfafe;
        background-color:#e08b40;
      text-transform: lowercase;
border-radius:20px;
      font-size: clamp(1.2rem, 3vw, 1.6rem);

           text-align:center;
           
           font-weight:900;
                   font-family: "Open Sans", sans-serif;

   
    }
    
.titulo{ backdrop-filter: blur(33px);
padding:2rem;
      text-transform: lowercase;

      font-size: clamp(2rem, 4vw, 6rem);

           text-align:center;
           
           font-weight:900;
                   font-family: "Open Sans", sans-serif;

   
    }

/*estilos hero*/

.object-cover {
    object-fit: contain;
   /* overflow: visible;*/
}

/* ===== RV-ARTE-HERO (scoped) ===== */
.rv-arte-hero{
  --rv-title-size: 50px;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.rv-arte-hero__media{
  height: 80vh;
  width: 100%;
  position: relative;
  isolation: isolate;
}

.rv-arte-hero__media img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
  will-change: transform, opacity;
}

.rv-arte-hero__title{
  height: 20vh;
  margin: 0;
  display: grid;
  place-items: center;
font-family: "Open Sans", sans-serif;  font-size: var(--rv-title-size);
  line-height: 1;
  letter-spacing: .3px;
  color: #e43d3d;
  will-change: transform, opacity;
}

/* Ajustes responsivos mínimos */
@media (max-width: 768px){
  .rv-arte-hero{ --rv-title-size: 38px; }
}
@media (max-width: 420px){
  .rv-arte-hero{ --rv-title-size: 32px; }
}


/*estilos contato*/

  /* ===== Cinemático + Responsivo (extras a Tailwind) ===== */
  .cct-hero { background: radial-gradient(1200px 600px at 20% 20%, rgba(255,255,255,0.55), transparent 60%); }
  .cct-hero-frame { overflow: hidden; }
  .cct-sparkles {
    background-image:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.65), transparent 60%),
      radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,.5), transparent 60%),
      radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,.45), transparent 60%);
    animation: cctTwinkle 4s ease-in-out infinite;
  }
  @keyframes cctTwinkle { 0%,100%{opacity:.6; transform:translateY(0)} 50%{opacity:1; transform:translateY(-3px)} }

  .cct-card { transform-origin: 50% 60%; }
  .cct-input { background: rgba(255,255,255,0.9); }

  /* Ajustes táctiles */
  .cct-input { -webkit-tap-highlight-color: transparent; }

  /* Resp: en md+ se reserva “columna visual” completa */
  @media (min-width: 768px) {
    .cct-hero { min-height: 100vh; }
  }
  
  .blurr
     {
    backdrop-filter: blur(33px);
}

 .prop{ display:block; }

.fondoo{
 
background: url(../images/fondo33.png);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 120vh!important;
width: 100vw;
  }
  
  .acheuno{
    padding-top:50px;
    font-size:70px;
    color:white;
    font-family: "Open Sans", sans-serif;      

font-size:30px;
  }
 
#logo-tooltip{
    background:tomato;
    padding:20px;
    color:white;
    border-radius:40px;
    font-family: "Open Sans", sans-serif;      

font-size:30px;
  }
.tophero{
 
background: url(../images/fondo33.png);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
  }




  .logo{
  	width: 70%;
  }

  #storyCinematic{
  	background: #993fc8;
  }
  
    .cursor-msg {
      position: fixed;
      top: 0;
      left: 0;
font-family: "Open Sans", sans-serif;      pointer-events: hand;
      border-radius: 100%;
      font-size: 2.8rem;
      font-weight: lighter;
      color: #fff;
     padding: 6px 12px;
      border-radius: 12px;
      opacity: 0;
      transform: translate(-50%, -50%);
      white-space: nowrap;
    }

 
    


    /*menu logo headtop top */
    


    /*hero top*/
    .tophero-title {
    text-shadow: 0 2px 20px rgba(255,255,255,0.3);
  }
  @keyframes floatUp {
    0%,100% {transform: translateY(0);}
    50% {transform: translateY(-10px);}
  }
  .tophero-content {
    animation: floatUp 2s ease-in-out infinite;
  }

   /*proms*/
   
   /* LAYOUT GENERAL */
.hero-serie,
.mundo-inventos {
  position: relative;
  min-height: 100vh;
  padding: 6rem 6vw;
  box-sizing: border-box;
  overflow: hidden; /* clave para que los props "corten" el viewport */
}

.hero-serie {
  display: flex;
  align-items: center;
  background: #090B16;
  color: #fff;
}

.hero-content {
  max-width: 520px;
  position: relative;
  z-index: 10;
}

.hero-content h1 {
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1rem;
  line-height: 1.6;
  opacity: .88;
  margin-bottom: 1.8rem;
}

.hero-btn {
  padding: .9rem 1.8rem;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background: #FF4D9A;
  color: #0b0b16;
}

/* PROPS BASE */
.prop {
  position: absolute;
  pointer-events: none;
  max-width: 40vw;
}

/* POSICIONES QUE ATRAVIESAN EL VIEWPORT */
.prop-auto {
  bottom: -8%;
  left: -10%;  /* sale del viewport */
}

.prop-bici {
  bottom: -6%;
  right: -12%;
}

.prop-heli {
  top: -15%;
  right: 4%;
  max-width: 26vw;
}

/* SEGUNDA SECCIÓN */
.mundo-inventos {
  background: radial-gradient(circle at top, #1B2140, #070812);
  color: #fff;
}

.mundo-texto {
  max-width: 560px;
  position: relative;
  z-index: 5;
}

.mundo-texto h2 {
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin-bottom: 1rem;
}

.mundo-texto p {
  font-size: 1rem;
  line-height: 1.7;
  opacity: .9;
}

/* PROPS MUNDO */
.prop-juguetes {
  bottom: -12%;
  left: -8%;
  max-width: 26vw;
}

.prop-bote {
  bottom: -10%;
  right: -5%;
  max-width: 30vw;
}

.prop-impresora {
  top: 10%;
  right: 22%;
  max-width: 18vw;
}

.prop-mochila {
  top: 20%;
  left: 60%;
  max-width: 14vw;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .hero-serie,
  .mundo-inventos {
    padding: 5rem 5vw 4rem;
  }

  .prop {
    opacity: 0.9;
  }

  .prop-auto,
  .prop-bici,
  .prop-juguetes,
  .prop-bote {
    max-width: 40vw;
  }

  .prop-impresora,
  .prop-mochila,
  .prop-heli {
    display: none; /* si quieres simplificar para mobile */
  }
}


:root {
  --violeta: #6e4efb;
  --magenta: #ff7ab8;
  --amarillo: #fbbf24;
  --azul-oscuro: #1c224a;
  --texto-claro: #fff;
  --texto-oscuro: #1b1b1b;
  --font: "Open Sans", sans-serif;
  --maxw: 1200px;
}

  

    .categories {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 40px 20px;
    }
    
   #nosotros .botonLlolleo{
       
    
    display: flex;
    justify-content: center;
    flex-direction: column;
    
   }
    #nosotros{
       
    
        
        width:100vw;
        height:900px;
        
        
    
    }
    
     .group img{
       
        width:500px;
        height:100%;
    
    }
    
      #llolleo img{
        width:100%;
        padding:100px;
    }

    .category {
        background: url(../images/polera.png);
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
     
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.15);
      position: relative;
    }

    .category h2 {
      margin: 0;
      font-size: 24px;
      color: #5A2D82;
    }

    .coming-soon {
      position: absolute;
      top: 10px;
      right: 15px;
      background-color: #9E47F2;
      color: white;
      font-size: 12px;
      padding: 5px 10px;
      border-radius: 12px;
      text-transform: uppercase;
    }

    footer {
      margin-top: 40px;
    }

    .social {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
    }

    .social img {
      width: 35px;
      height: 35px;
    }