/* ================== VARIABLES ================== */
:root {
  --fondo: #e2beb7;         /* color principal, fondo general */
  --fondo-boton: #d8aaa1;   /* un poco más oscuro para botones */
  --hover1: #c4978c;        /* hover general */
  --hover2: #b28377;        /* hover alternativo */
  --hover3: #9e7063;        /* hover más oscuro, también para footer */
  --blanco: #ffffff;        /* texto blanco */
}

/* ================== ESTILO GENERAL ================== */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: var(--fondo);
}

h1 {
  margin: 20px 0;
  font-size: 3rem;
  text-align: center;
  color: var(--hover3);
  font-family: 'Eagle lake', sans-serif;
}

a {
  text-decoration: none;
}

h1:hover {
  cursor: default;
}

/* ================== CAJAS PRINCIPALES ================== */
.contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 90%;
  max-width: 1200px;
}

.caja {
  background: var(--fondo-boton);
  border-radius: 7px;
  padding: 40px;
  text-align: center;
  flex: 1 1 250px;
  max-width: 300px;

  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  color: var(--blanco);
  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem;
  font-weight: 500;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  transition: background-color 0.3s, transform 0.2s;
  position: relative; /* contenedor relativo para centrar el icono */
}

/* Texto */
.caja .texto {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Ícono centrado siempre, pero invisible al inicio */
.caja .icono {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Hover */
.caja:hover {
  transform: scale(1.05);
  background-color: var(--hover1);
}

/* Texto desaparece en hover */
.caja:hover .texto {
  opacity: 0;
  transform: translateY(20px);
}

/* Ícono aparece en el centro */
.caja:hover .icono {
  opacity: 1;
}


/* Colores distintos para cada botón al pasar el mouse */
.contenedor .caja:nth-child(1):hover { background: var(--hover2); }
.contenedor .caja:nth-child(2):hover { background: var(--hover3); }
.contenedor .caja:nth-child(3):hover { background: var(--hover1); }
.contenedor .caja:nth-child(4):hover { background: var(--hover2); }
.contenedor .caja:nth-child(5):hover { background: var(--hover3); }
.contenedor .caja:nth-child(6):hover { background: var(--hover1); }

/* ================== CATÁLOGO ================== */
.catalogo {
  display: none;
  margin: 40px auto 30px auto;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.catalogo h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--blanco);
}

.catalogo-contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.catalogo .item {
  background-color: transparent;
  border-radius: 5px;
  text-decoration: none;
  color: var(--blanco);
  flex: 1 1 200px;
  max-width: 250px;
  transition: background 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.catalogo .item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px;
}

.catalogo .item p {
  margin: 0;
  text-align: center;
  font-weight: bold;
}

.catalogo .item:hover {
  transform: scale(1.05);
}

/* ================== MARCO (PNG DEBAJO DE LA IMAGEN) ================== */
/* Marco tipo plato con la foto adentro */
.item.marco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 50px; /* más espacio para que el PNG se vea grande */
  background: url("Imagenes/MarcoRosa.png") no-repeat center;
  background-size: contain; /* el PNG se adapta pero queda visible */
}

.item.marco img {
  width: 60%;   /* foto más chica para que se vea el marco */
  height: auto;
  border-radius: 10px;
}




/* ================== FOOTER ================== */
footer {
  margin-top: auto;
  background: var(--hover3);
  color: var(--blanco);
  padding-left: 20px;
  text-align: left;
  width: 100%;
}