html {
    overflow-x: hidden;
}

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #000;
    color: #fff;
}

h1{
    font-family: "Fredoka", sans-serif;
    font-size: 3em;
    letter-spacing: 3px;
    font-weight: 500;
}

.zonas-container{
    background-color: #000;
    max-width: 945px;
    margin: 70px auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 15px 15px;
    justify-content: center;
}

.zona1-container{
    display: grid;
    gap: 15px 15px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 450px;
    height: 450px;
}

.zona2-container{
    display: grid;
    gap: 15px 15px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 450px;
    height: 450px;
}

.zona3-container{
    display: grid;
    gap: 15px 15px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 450px;
    height: 450px;
}

.zona4-container{
    display: grid;
    gap: 15px 15px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 450px;
    height: 450px;
}


.cajas{
    background-color:beige;
    color: #000;
    border-radius: 8px;
    text-align: center;
    align-self: center;
    min-height: 140px;
    max-height: 280px;
}

#caja0{
    grid-column: 1 / 4;
    background-color: #000;
    color: #fff;

}

#caja2{
    grid-row: 2 / 4;
    grid-column: 2 / 3;
}

#caja6{
    grid-row: 1 / 3;
}

#caja9{
    grid-row: 1 / 3;
    grid-column: 3 / 4;
}

#caja22{
    grid-column: 2 / 4;
}

#caja14{
    grid-row: 1 / 3;
    grid-column: 3 / 4;
}

#caja16{
    grid-column: 2 / 4;
}

#caja17{
    background-color: #000000;
    grid-column: 1 / 3;
}

#caja20{
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}

#cajaVacia, #caja21{
    background-color: #000;
}

/* galleta muñeco */

.head {
  fill: #cd803d;
}

.eye {
  fill: white;
}

.mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}

.limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}


/* casa */
.house {
  stroke: black;
  stroke-width: 2px;
  fill: white;
}

.house .roof {
  fill: none;
  stroke: #d1495b;
  stroke-width: 10px;
  stroke-linecap: round;
}

.house .door {
  fill: #d1495b;
}

.house .stair {
  fill: gray;
}

.house .window {
  fill: #fdea96;
}

.house .window-sill {
  fill: #d1495b;
  stroke-linecap: round;
}

/* lampara */

.arm {
  stroke: black;
  stroke-width: 7;
  stroke-linecap: round;
}

/* molino */

#windmill-head {
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* campana */

#bell {
  transform-origin: 0 -45px;
}

svg:hover #bell,
svg:hover #bell-clapper {
  animation-duration: 0.5s;
  animation-delay: -0.25s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-name: ring;
}

@keyframes ring {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(20deg);
  }
}

/* trineo */

.sleigh {
  offset-path: path(
    "M-200 80 L -90 80 Q 60 80 60 -10 A 50 50 0 0 0 -60 -10 Q -60 80 90 80 L 200 80"
  );
  animation: roller-coaster 6000ms infinite linear;
}

@keyframes roller-coaster {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

/* caja regalo */

.box {
  fill: #d1495b;
  stroke: black;
  stroke-width: 2px;
}

.stripe {
  fill: white;
  stroke: black;
  stroke-width: 2px;
}

.ribbon {
  stroke: #b73a3b;
  stroke-width: 4px;
  fill: none;
}

/* oso */

.bear {
  background-color: #f5eed7;
}

.bear .ear {
  fill: #e5c39c;
  stroke: white;
  stroke-width: 5;
}

.bear .face {
  fill: white;
}

.bear .mouth {
  fill: none;
  stroke: black;
  stroke-width: 2;
}

body {
    height: 100%;
}
 */body {
    position: relative;
}
    
/* Copos de nieve */
.snowflake {
    position: absolute;
    top: -10px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none; /* No molesta los clicks */
    animation: fall linear infinite;
}

/* Animación de caída */
@keyframes fall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.2;
    }
}

/* TAPADERAS */
.cajas {
    position: relative;
    overflow: hidden;
}

.tapadera {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #b73a3b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    font-family: "Fredoka", sans-serif;
    transform-origin: left top;
    transform: rotateY(0deg);
    transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10;
}

.tapadera.abierta {
    transform: rotateY(120deg);
}

/* Efecto de sombra cuando la tapadera se abre */
.cajas:hover {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

#tapadera1, #tapadera5, #tapadera6, #tapadera11, #tapadera16, #tapadera18{
    background-color: #b7c7b0;
  color: #252721;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 120 120'><polygon fill='%2393A891' points='120 120 60 120 90 90 120 60 120 0 120 0 60 60 0 0 0 60 30 90 60 120 120 120 '/></svg>");
}

#tapadera3, #tapadera4, #tapadera8, #tapadera13, #tapadera19{
    background-color: #434538;
}

#tapadera2, #tapadera10, #tapadera15, #tapadera20{
    background-color: #f5eed7;
    color: #252721;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='47.5' height='47.5' viewBox='0 0 100 100'><path d='M 25 10 L 25 17 M 25 33 L 25 40 M 10 25 L 17 25 M 33 25 L 40 25' stroke='%23CD803D' stroke-width='6' stroke-linecap='round' /><circle cx='75' cy='75' r='4' fill='%23CD803D'/></svg>");
}

#tapadera9, #tapadera14, #tapadera21, #tapadera24{
    background-color: #b73a3b;
    color: #f5eed7;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 100 100'><circle cx='25' cy='25' r='15' fill='%239B2D2B'/><circle cx='75' cy='75' r='16' fill='%239B2D2B'/></svg>");
}

#tapadera7, #tapadera12, #tapadera23{
    background-color: #b73a3b;
    color: #f5eed7;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 100 100'><path d='M 0 25 L 25 0 M 0 50 L 50 0 M 0 75 L 75 0 M 0 100 L 100 0 M 0 125 L 125 0 M 0 150 L 150 0 M 0 175 L 175 0' stroke='%239B2D2B' stroke-width='6' /></svg>");
}