/* =========================
   RESET GENERAL
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  cursor:none !important;
}

/* =========================
   FUENTES
========================= */

@font-face{
  font-family:'TanNimbus';
  src:url('Fuentes/TAN-NIMBUS-Regular.otf') format('opentype');
}

@font-face{
  font-family:'Marykate';
  src:url('Fuentes/Marykate-Regular.ttf') format('truetype');
}

/* =========================
   VARIABLES
========================= */

:root{

  --bg:#94b4e8;
  --bg-dark:#4b7c91;

  --text:#ffffff;

  --cream:#ece3d5;
  --yellow:#ffea74;

  --green:#a0d144;

  --orange:#f2a788;

  --brown:#744738;
}

/* =========================
   BODY
========================= */

body{

  min-height:100vh;

  font-family:'Montserrat',sans-serif;

  color:var(--text);

  overflow-x:hidden;

  position:relative;

  background-image:url("Imagenes/Fondos/fondo1.png");

  background-size:cover;

  background-position:center;

  background-attachment:fixed;
}

body::before{

  content:"";

  position:fixed;

  inset:0;

  pointer-events:none;

  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,234,116,0.15) 0px, transparent 120px),
    radial-gradient(circle at 80% 30%, rgba(160,209,68,0.15) 0px, transparent 120px),
    radial-gradient(circle at 50% 80%, rgba(242,167,136,0.15) 0px, transparent 120px);

  z-index:-1;
}

/* =========================
   BANNER
========================= */

.top-banner{

  width:100%;

  height:100vh;

  position:relative;

  overflow:hidden;

  background:var(--bg);
}

.top-banner img{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  animation:bannerFloat 6s ease-in-out infinite;
}

.top-banner::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.05),
      rgba(0,0,0,0.12)
    );

  z-index:2;
}

/* =========================
   NAVBAR
========================= */

nav{

  width:100%;

  display:flex;

  justify-content:center;

  padding:25px;

  position:sticky;

  top:0;

  z-index:100;

  backdrop-filter:blur(10px);

  background:rgba(116,71,56,0.30);

  border-bottom:1px solid rgba(255,234,116,0.2);
}

nav ul{

  display:flex;

  gap:25px;

  list-style:none;

  flex-wrap:wrap;

  justify-content:center;
}

nav a{

  text-decoration:none;

  color:var(--cream);

  font-weight:500;

  transition:0.3s;

  letter-spacing:1px;

  font-size:1.6rem;

  font-family:'Marykate',cursive;
}

nav a:hover{

  color:var(--yellow);

  text-shadow:0 0 10px rgba(255,234,116,0.6);
}

/* =========================
   DROPDOWN
========================= */

.dropdown{
  position:relative;
}

.dropdown-menu{

  position:absolute;

  top:100%;
  left:0;

  min-width:220px;

  padding:12px;

  display:flex;
  flex-direction:column;
  gap:10px;

  opacity:0;
  visibility:hidden;

  transform:translateY(10px);

  transition:0.3s ease;

  z-index:999;

  border-radius:22px;

  background:rgba(75,124,145,0.92);

  backdrop-filter:blur(14px);
}

.dropdown:hover .dropdown-menu{

  opacity:1;

  visibility:visible;

  transform:translateY(0px);
}

.dropdown-menu li{
  list-style:none;
}

.dropdown-menu a{

  display:block;

  padding:12px 18px;

  border-radius:16px;

  transition:0.25s ease;

  font-size:1.2rem;
}

.dropdown-menu a:hover{

  background:rgba(255,255,255,0.08);

  transform:translateX(4px);
}

/* =========================
   SECCIONES
========================= */

section{
  padding:100px 8%;
}

.section-title{

  font-size:5rem;

  font-family:'TanNimbus',serif;

  margin-bottom:40px;

  text-align:center;

  color:var(--cream);

  text-shadow:0 5px 20px rgba(116,71,56,0.35);
}

/* =========================
   HERO
========================= */

.hero{

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:60px 8%;

  gap:60px;

  flex-wrap:wrap;
}

.hero-text{

  max-width:500px;
}

.hero-text h1{

  font-size:5rem;

  font-family:'TanNimbus',serif;

  color:var(--cream);
}

.hero-text p{

  margin-top:20px;

  font-size:1.1rem;

  line-height:1.7;

  color:var(--cream);
}
/* =========================================
   APPS HERO
========================================= */

.apps-used{

  display:flex;
  gap:18px;

  align-items:center;

  margin-top:25px;
  margin-bottom:30px;

  flex-wrap:wrap;
}

.apps-used img{

  width:70px;
  height:70px;

  object-fit:contain;


  padding:12px;

  border-radius:18px;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.12);

  transition:0.3s ease;
}

.apps-used img:hover{

  transform:
    translateY(-6px)
    scale(1.05);

}

.buttons{

  margin-top:30px;

  display:flex;

  gap:15px;

  flex-wrap:wrap;
}

.btn{

  padding:14px 26px;

  border-radius:999px;

  text-decoration:none;

  color:var(--cream);

  font-weight:600;

  transition:0.3s ease;

  background:rgba(160,209,68,0.25);

  border:1px solid rgba(255,234,116,0.35);

  backdrop-filter:blur(10px);
}

.btn:hover{

  transform:translateY(-4px);

  background:rgba(242,167,136,0.35);
}

.hero-image{

  animation:float 4s ease-in-out infinite;
}

.hero-image img{

  width:420px;

  max-width:90vw;

  filter:drop-shadow(0 15px 25px rgba(116,71,56,0.35));
}

/* =========================
   APPS HERO
========================= */

.apps-used{

  display:flex;

  gap:18px;

  align-items:center;

  margin-top:25px;
  margin-bottom:30px;

  flex-wrap:wrap;
}

.apps-used img{

  width:70px;
  height:70px;

  object-fit:contain;

  padding:12px;

  border-radius:18px;

  transition:0.3s ease;
}

.apps-used img:hover{

  transform:
    translateY(-6px)
    scale(1.05);
}

/* =========================
   BANNER PROYECTOS
========================= */

.projects-banner{

  position:relative;

  width:100%;

  min-height:90vh;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;
}

.projects-banner img{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:1;

  filter:
    brightness(1.05)
    saturate(1.08);
}

.projects-title{

  position:relative;

  z-index:3;

  color:var(--cream);

  font-size:8rem;

  text-shadow:
    0 8px 30px rgba(0,0,0,0.45);

  animation:float 5s ease-in-out infinite;
}

/* =========================
   PROYECTOS
========================= */

.project-section{

  padding-top:120px;

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:40px;
}

.project-title{

  font-size:4rem;

  font-family:'TanNimbus',serif;

  color:var(--cream);
}

.project-image{

  position:relative;

  width:100%;

  max-width:1300px;

  overflow:hidden;

  border-radius:35px;

  background:rgba(255,255,255,0.05);

  backdrop-filter:blur(10px);

  box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.project-image img{

  width:100%;

  display:block;

  object-fit:cover;
}

.project-btn{

  position:absolute;

  bottom:25px;
  right:25px;

  padding:14px 24px;

  border:none;

  border-radius:999px;

  background:rgba(75,124,145,0.85);

  color:var(--cream);

  font-family:'Marykate',cursive;

  font-size:1.3rem;

  backdrop-filter:blur(10px);

  transition:0.3s ease;
}

.project-btn:hover{

  transform:scale(1.06);

  background:rgba(242,167,136,0.9);
}

/* =========================
   GALERIA
========================= */

.gallery{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:35px;

  margin-top:50px;
}

/* =========================
   CARDS GALERIA
========================= */

.art-card{

  position:relative;

  overflow:hidden;

  border-radius:30px;

  background:rgba(236,227,213,0.10);

  border:1px solid rgba(255,255,255,0.10);

  backdrop-filter:blur(12px);

  transition:0.35s ease;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.18);
}

.art-card:hover{

  transform:
    translateY(-10px)
    scale(1.02);

  border:1px solid rgba(255,234,116,0.30);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.25);
}

.art-card img{

  width:100%;

  height:340px;

  object-fit:cover;

  display:block;

  transition:0.45s ease;
}

.art-card:hover img{

  transform:scale(1.05);
}

.gallery-preview{

  cursor:pointer !important;
}

.art-card .info{

  padding:24px;

  background:
    linear-gradient(
      to top,
      rgba(75,124,145,0.45),
      rgba(75,124,145,0.10)
    );
}

.art-card .info h3{

  font-size:2rem;

  color:var(--yellow);

  margin-bottom:10px;

  font-family:'Marykate',cursive;

  letter-spacing:1px;
}

.art-card .info p{

  color:var(--cream);

  font-size:1rem;

  line-height:1.6;

  opacity:0.95;
}

.art-card::before{

  content:"";

  position:absolute;

  top:-100%;
  left:-100%;

  width:220%;
  height:220%;

  background:
    linear-gradient(
      120deg,
      transparent 40%,
      rgba(255,255,255,0.10) 50%,
      transparent 60%
    );

  transform:rotate(12deg);

  transition:0.8s ease;

  pointer-events:none;
}

.art-card:hover::before{

  top:-40%;
  left:-40%;
}

/* =========================
   MONSTER MAKER
========================= */

#monster-maker{

  min-height:100vh;
}

/* AREA PRINCIPAL */

.monster-area{

  position:relative;

  width:100%;

  max-width:1200px;

  height:900px;

  margin:auto;

  overflow:hidden;

  border-radius:35px;

  background:rgba(255,255,255,0.05);

  backdrop-filter:blur(10px);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.18);
}

/* PIEZAS GENERALES */

.monster-piece{

  position:absolute;

  user-select:none;

  -webkit-user-drag:none;

  transition:0.2s ease;
}

/* BASE DEL MONSTRUO */

.base-piece{

  width:420px;

  left:50%;
  top:50%;

  transform:translate(-50%, -50%);

  pointer-events:none;
}

/* =========================
   OJOS
========================= */

.ojos{

  width:220px;
}

/* =========================
   CUERNOS
========================= */

.cuernos{

  width:240px;
}

/* =========================
   MANOS
========================= */

.manos{

  width:430px;
}

/* =========================
   EFECTO HOVER
========================= */

.draggable:hover{

  transform:scale(1.05);

  filter:
    drop-shadow(0 0 12px rgba(255,234,116,0.45));
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

  .monster-area{

    height:700px;
  }

  .base-piece{

    width:320px;
  }

  .ojos{

    width:70px;
  }

  .cuernos{

    width:110px;
  }

  .manos{

    width:100px;
  }
}

@media(max-width:600px){

  .monster-area{

    height:550px;

    border-radius:25px;
  }

  .base-piece{

    width:240px;
  }

  .ojos{

    width:180px;
  }

  .cuernos{

    width:185px;
  }

  .manos{

    width:175px;
  }
}
#modalYoutube{

  width:85vw;

  height:80vh;

  border:none;

  border-radius:25px;
}

/* =========================
   FOOTER
========================= */

footer{

  text-align:center;

  padding:40px 20px;

  color:var(--cream);
}

/* =========================
   CURSOR
========================= */

.star-cursor{

  position:fixed;

  width:38px;
  height:38px;

  pointer-events:none;

  z-index:10000000;

  transform:translate(-50%, -50%);

  animation:starFloat 2.5s infinite ease-in-out;
}

.star-cursor img{

  width:100%;
  height:100%;
}

.cursor-trail{

  position:fixed;

  width:14px;
  height:14px;

  pointer-events:none;

  z-index:9999999;

  background-image:url("Imagenes/estrella.svg");

  background-size:contain;

  background-repeat:no-repeat;

  animation:trailFade 0.8s linear forwards;
}

/* =========================
   MODALES
========================= */

.image-modal,
.project-modal{

  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  background:rgba(0,0,0,0.88);

  opacity:0;

  pointer-events:none;

  transition:0.3s ease;

  z-index:999999;
}

.image-modal.active,
.project-modal.active{

  opacity:1;

  pointer-events:auto;
}

.project-modal-content{

  width:90%;
  max-width:1200px;

  position:relative;
}

.close-modal,
.close-project-modal{

  position:absolute;

  top:30px;
  right:40px;

  font-size:3rem;

  color:var(--cream);

  z-index:1000;
}

/* =========================
   MODAL GALERIA
========================= */

#modalImage{

  max-width:85vw;

  max-height:85vh;

  object-fit:contain;

  border-radius:25px;
}
#modalVideo{

  max-width:85vw;

  max-height:85vh;

  border-radius:25px;
}

#modalYoutube{

  width:85vw;

  height:80vh;

  border:none;

  border-radius:25px;
}

.gallery-arrow{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:65px;
  height:65px;

  border:none;

  border-radius:50%;

  font-size:2rem;

  color:white;

  background:rgba(75,124,145,0.85);

  backdrop-filter:blur(10px);

  transition:0.3s ease;

  z-index:1000;
}

.gallery-arrow:hover{

  transform:
    translateY(-50%)
    scale(1.1);

  background:rgba(242,167,136,0.9);
}

.gallery-arrow.left{

  left:40px;
}

.gallery-arrow.right{

  right:40px;
}

/* =========================
   CARRUSEL PROYECTOS
========================= */

.carousel-container{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:20px;
}

.carousel-track{

  width:100%;

  overflow:hidden;

  border-radius:30px;
}

.carousel-image{

  width:100%;

  height:auto;

  display:none;

  max-height:85vh;

  object-fit:contain;
}

.carousel-image.active{

  display:block;
}

.carousel-btn{

  width:60px;
  height:60px;

  border-radius:50%;

  border:none;

  font-size:2rem;

  color:white;

  background:rgba(75,124,145,0.8);

  transition:0.3s ease;

  flex-shrink:0;
}

.carousel-btn:hover{

  transform:scale(1.1);

  background:rgba(242,167,136,0.9);
}

/* =========================
   ADORNOS FLOTANTES
========================= */

.floating{

  position:fixed;

  pointer-events:none;

  z-index:1;

  opacity:0.18;

 

  animation:floatDecor 7s ease-in-out infinite;
}

/* =========================
   NUBE 1
========================= */

.cloud1{

  top:40px;
  left:40px;

  width:180px;

  opacity:0.60;
}

/* =========================
   NUBE 2
========================= */

.cloud2{

  top:180px;
  right:60px;

  width:220px;

  opacity:0.60;

  animation-delay:2s;
}

/* =========================
   ARBOL 1
========================= */

.tree1{

  bottom:0;
  left:-20px;

  width:220px;

  opacity:0.60;
}

/* =========================
   ARBOL 2
========================= */

.tree2{

  bottom:0;
  right:-20px;

  width:240px;

  opacity:0.60;

  animation-delay:1.5s;
}

/* =========================
   ANIMACION
========================= */

@keyframes floatDecor{

  0%{
    transform:
      translateY(0px)
      rotate(0deg);
  }

  50%{
    transform:
      translateY(-12px)
      rotate(1deg);
  }

  100%{
    transform:
      translateY(0px)
      rotate(0deg);
  }
}

/* =========================
   ANIMACIONES
========================= */

@keyframes bannerFloat{

  0%{
    transform:scale(1) translateY(0px);
  }

  50%{
    transform:scale(1.02) translateY(-8px);
  }

  100%{
    transform:scale(1) translateY(0px);
  }
}

@keyframes float{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-18px);
  }

  100%{
    transform:translateY(0px);
  }
}

@keyframes starFloat{

  0%{
    transform:translate(-50%, -50%) scale(1);
  }

  50%{
    transform:translate(-50%, -50%) scale(1.12);
  }

  100%{
    transform:translate(-50%, -50%) scale(1);
  }
}

@keyframes trailFade{

  0%{
    opacity:1;
  }

  100%{
    opacity:0;
    transform:scale(0.2) rotate(120deg);
  }
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

  .hero{
    text-align:center;
  }

  .hero-text h1{
    font-size:3.5rem;
  }

  .projects-title{
    font-size:4.5rem;
  }

  .carousel-container{
    gap:10px;
  }

  .gallery{

    grid-template-columns:
      repeat(auto-fit,minmax(260px,1fr));

    gap:28px;
  }

  .art-card img{
    height:300px;
  }

  .art-card .info h3{
    font-size:1.8rem;
  }
}

@media(max-width:600px){

  .hero-text h1{
    font-size:2.8rem;
  }

  .section-title{
    font-size:2.8rem;
  }

  .project-title{
    font-size:2.3rem;
  }

  .projects-title{
    font-size:3rem;
  }

  .carousel-btn,
  .gallery-arrow{

    width:50px;
    height:50px;

    font-size:1.5rem;
  }

  .gallery-arrow.left{
    left:15px;
  }

  .gallery-arrow.right{
    right:15px;
  }

  .art-card{
    border-radius:24px;
  }

  .art-card img{
    height:260px;
  }

  .art-card .info{
    padding:20px;
  }

  .art-card .info h3{
    font-size:1.6rem;
  }

  .art-card .info p{
    font-size:0.95rem;
  }
}