/* colores */
:root{
  --sol:   #ffff00;     /* amarillo */
  --nube:  #4da2ed8b;     /* azul bebé */
  --tallo: #0b6b2a;     /* verde oscuro */
  --morado:#b063d0;
  --rojo:  #7b1b10;
}

body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(to bottom, #ff6d00, #d00000);

}
.titulo{
  position:relative;            
  text-align:center;   
  font-size:20px;
  font-family: 'Times New Roman', Times, serif;
  color:#100143;        
  letter-spacing:1px;
  z-index:12;
}

.fondo{
  width:520px;
  height:650px;
  position:relative;
  overflow:hidden;
  background: linear-gradient(to bottom, #f3722c, #ffe066);
}

.nube{
  position:absolute;
  width:130px;
  height:60px;
  background: var(--nube);
  z-index:2;
}

.nube::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--nube);
  border-radius:9999px;
  box-shadow:
    -30px 10px 0 0 var(--nube),
     30px 10px 0 0 var(--nube),
    -10px -14px 0 0 var(--nube),
     12px -18px 0 0 var(--nube),
     38px -8px 0 0 var(--nube);
}

.nube1{ left:20px;  top:95px; }
.nube2{ left:250px; top:70px; }

.sol{
  position:absolute;
  width:160px;
  height:160px;
  background: var(--sol);
  box-shadow: 0 0 40px rgba(255, 255, 0, 0.6);
  border-radius:50%;
  top:100px;        /* más arriba */
  right:30px;
    z-index: 10;
}


.pasto{
  position:absolute;
  bottom:0;
  width:100%;
  height:150px;
background: radial-gradient(#78cd86, #5f9a3c 60%,#608351 100%);

}

.camino{
position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:160px;   
  height:150px;  
  background: linear-gradient(to top, #5a3a1a 0%, #7a5436 35%, #a67c52 65%, #bfbfbf 100%    
  );
  /* arriba angosto, abajo ancho */
  clip-path: polygon(46% 0%, 54% 0%, 70% 100%, 30% 100%);
}

.floresderecha,
.floresizquierda{
  position:absolute;
  bottom:150px;           /*  encima del pasto */
  display:flex;
  gap:24px;
}

.floresderecha{ left:70px; }   /* bloque izquierdo (moradas) */
.floresizquierda{ right:70px; }/* bloque derecho (rojas) */

/* flor morada */
.flormorada{
  width:6px;
  height:95px;           /* tallo */
  background: var(--tallo);
  position:relative;
}

/* hoja */
.flormorada::before{
  content:"";
  position:absolute;
  top:50px;
  left:2px;
  width:22px;
  height:10px;
  background: var(--tallo);
  border-radius:10px;
  transform:rotate(-35deg);
}

/* tulipán */
.flormorada::after{
  content:"";
  position:absolute;
  top:-30px;
  left:-14px;
  width:32px;
  height:32px;
  background: var(--morado);
  clip-path: polygon(
    50% 0%,
    65% 20%,
    85% 15%,
    95% 35%,
    70% 100%,
    50% 80%,
    30% 100%,
    5% 35%,
    15% 15%,
    35% 20%
  );
}

/* FLOR ROJA*/
.floroja{
  width:6px;
  height:95px;
  background: var(--tallo);
  position:relative;
}

.floroja::before{
  content:"";
  position:absolute;
  top:50px;
  left:2px;
  width:22px;
  height:10px;
  background: var(--tallo);
  border-radius:10px;
  transform:rotate(-35deg);
}

.floroja::after{
  content:"";
  position:absolute;
  top:-30px;
  left:-14px;
  width:32px;
  height:32px;
  background: var(--rojo);
  clip-path: polygon(
    50% 0%,
    65% 20%,
    85% 15%,
    95% 35%,
    70% 100%,
    50% 80%,
    30% 100%,
    5% 35%,
    15% 15%,
    35% 20%
  );
}