/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: lightyellow;
  color: black;
  font-family: "Silkscreen", monospace;
      font-size: 15px;
      font-weight: normal;
      line-height: 14px;
      letter-spacing: 0.5px;
      text-align: center;
      white-space: nowrap;
      color: #2B0B04;
}
h1 {
 color: pink;
 font-size:35px;
 letter-spacing: 1.5px;
 
}
h2{
 color: #BD6122;
 font-family: serif;
 font-size:30px;
 letter-spacing: 1.5px;
 
}

h5{
  COLOR:#BD6122 ;
   font-family:  'Press Start 2P';
   font-size: 30px;
}
h4 {
  color: #A86514;
  font-size: 25px;
  font-family: serif;
}

h6 {
 color: brown;
 font-family: serif;
 font-size: 15px;
 
}
::-webkit-scrollbar {
  width: 12px !important;       /* Fuerza el ancho vertical */
  height: 12px !important;      /* Fuerza el alto horizontal */
  display: block !important;    /* Evita que el navegador la oculte */
}

::-webkit-scrollbar-track {
  background: brown!important;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: lightyellow; !important;
  border-radius: 10px;
  border: 3px solid #f1f1f1 !important; /* Espacio para que no toque los bordes */
}

::-webkit-scrollbar-thumb:hover {
  background: brown;!important; /* Color al pasar el cursor */
}

/* Controla el contenedor */
.contenedor-1 {
  width: 100%;
  box-sizing: border-box;
  text-align: center; /* Centra las secciones en la pantalla */
}


/* Controla cada sección individual */
.seccion {
   display: inline-block !important;
  vertical-align: top;
  width: 30%;
  margin: 0 1.5%;
  background-color: pink;
  padding: 20px;
  
  
  /* HACE QUE TODO EL TEXTO QUEPA DENTRO SIN CORTRARSE */
  box-sizing: border-box !important; /* El relleno se cuenta dentro del 30% de ancho */
  height: auto !important;           /* El cuadro crece hacia abajo según el texto que metas */
  overflow: visible !important;      /* Asegura que nada se esconda */
  
  /* FUERZA EL SALTO DE LÍNEA AUTOMÁTICO */
  white-space: normal !important;    /* Evita que el texto se escriba en una sola línea infinita */
  overflow-wrap: break-word;         /* Si hay un link o palabra muy larga, la rompe abajo */
  word-break: break-word;
  
   border-radius: 8px;
   border-color: pink;
 
}


.contenedor-seis {
  display: grid;
  /* 2 columnas de igual tamaño */
  grid-template-columns: repeat(2, 1fr); 
  /* Espacio de 10 píxeles entre cada división */
  gap: 5px; 
}

.item {
  background-color: lightyellow; /* Color de fondo gris claro */
  padding: 0px;             /* Espacio interno */
  text-align: center;        /* Centra el texto */
  border: 2px solid #ccc;    /* Borde sutil */
}

/* Adaptación para celulares (Pantallas de menos de 768px) */
@media (max-width: 768px) { }


.grid-principal {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* Crea 2 columnas exactas */
  gap: 15px !important;                             /* Separación entre cuadros */
  width: 100% !important;
  box-sizing: border-box;
}

/* Fuerza a que cada Parte divida su contenido a la mitad (Izquierda y Derecha) */
.item {
  display: flex !important;         /* Pone las columnas internas lado a lado */
  flex-direction: row !important;   /* Asegura la dirección horizontal */
  border: 2px solid #26110A /* Borde para ver el cuadro */
  min-height: 100px;  /*tamaño minimo*/
}

/* Distribución 50/50 exacta para las mitades */
.columna {
  flex: 1 1 50% !important;         /* Fuerza el 50% del ancho para cada una */
  padding: 5px !important;

}

/* Colores de prueba para confirmar visualmente */
.izquierdo { background-color: #e0f7fa  }
.derecho   { background-color: #ffe0b2  }

/* Si la pantalla es muy chica (Celulares), se acomodan en 1 sola columna */
@media (max-width: 768px) {
  .grid-principal {
    grid-template-columns: 1fr !important;
  }
}

#pudding {
   width: 100% !important;     /* Obliga a la imagen a adaptarse al ancho de contenedor-uno */
  max-width: 100% !important; /* Bloquea cualquier intento de salirse por el costado */
  height: auto !important;    /* Evita que la imagen se deforme o se estire feo */
  display: block;    
     margin: 0 auto !important;    
   
}
#chicaanime{
width:100px;
height: auto;
}

#galleta {
  width: 40px;
  height: auto;
}
#final{
width:90px;
height: auto;
}