/* styles.css - Slytherin HTML & CSS */
:root{ /*Se asigna variables globales a las cuales se puede acceder en todo el documento*/
  --bg: #0b0c10;
  --card: #1f2833;
  --text: #e6e6e6;
  --accent: #c4a000;
  --accent-2:#66fcf1;
  --accent-3:#37fa0b;
  --accent-4:#2a6451;
  --accent-5:#042117;
}
* { box-sizing: border-box; } /* Ajustamos el cálculo de tamaños segun la caja o box */
html, body { /* Eliminamos  márgenes y aplicamos fondo y tipo de letra */
  margin: 0; padding: 0; /*Eliminamos los márgenes y padding por defecto que los navegadores ponen al body*/
  background: radial-gradient(circle at 20% 10%, #1a1a1a, var(--bg)); /*Aplicamos un degradado radial como fondo del sitio.*/
  color: var(--text);/* Establecemos color de texto a toda la pagina con la variable --text que asignamos anteriormente en root*/
  font-family: 'Georgia', serif; /*Definimos fuente usada para todo el documento*/
  min-height: 100%; /*Con esto hacemos que el cuerpo del documento ocupe al menos el 100% de la altura de la pantalla.*/
}
.container { max-width: 980px; margin: 0 auto; padding: 1.5rem; } /* Se asignan valores al contenedor principal creado 
por el container con maximo 980 pixeles con margin 0 se centra el contenedor horizontalmente y con el pading 
se evita que el contenido quede pegado a los bordes.*/
.header { /* Header son las opciones que estan en las cabeceras de las paginas */
  background: rgba(0,0,0,0.4); /*Fondo negro semitransparente*/
  backdrop-filter: blur(6px); /*Esto aplica un desenfoque al fondo que está detrás del header*/
  position: sticky; top: 0; z-index: 10; /* Hace que el header se quede pegado arriba cuando haces cuando mueves la pag
  el z-index asegura que el header quede por encima de otros elementos. */
  border-bottom: 1px solid rgba(255,255,255,.08); /*Añade una línea muy suave en la parte inferior. Da contraste y separa visualmente el header del contenido.*/
}
.pie { /*Creamos esta class para poder asignar un color y estilo de fuente al pie de pagina creado*/
  color: #fdfdfd;
  font-style: italic;
}
.pie:hover { /*En este agregamos la opcion flotante cada vez que el cursor esta encima y cambien de color*/
  color: #2a6451;
  font-style: italic;
}
nav { display: flex; gap: 1rem; align-items: center; padding: 0.75rem 1rem; }
nav a {
  color: var(--text); text-decoration: none; padding: .5rem .75rem; border-radius: 999px;
  transition: transform .15s ease, background .2s ease;
}
nav a:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }
nav a.active { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #111; font-weight: bold; }
.hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: center;
  padding: 2rem 1rem;
}
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.0));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: 1.2rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

h1, h2, h3 { margin: 0 0 .75rem 0; }
.badge { display: inline-block; padding: .35rem .65rem; border-radius: 999px;
  background: rgba(196,160,0,.15); color: #ffdd55; border:1px solid rgba(196,160,0,.35); font-size: .85rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.btn {
  display:inline-block; padding:.6rem 1rem; border-radius:12px; text-decoration:none; color:#111;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); font-weight:700;
  box-shadow: 0 8px 18px rgba(0,0,0,.35); transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }
footer { margin-top: 3rem; opacity:.8; font-size:.9rem; }
table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,.03); }
th, td { padding: .75rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
tr:hover { background: rgba(255,255,255,.06); }
.form-group { display:flex; flex-direction:column; gap:.5rem; margin-bottom: 1rem; }
input, textarea, select {
  padding:.6rem .75rem; border-radius:10px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: var(--text);
}
label { font-weight: bold; }
.note { font-size:.9rem; opacity:.9; }
.house-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; }
.house { text-align:center; padding:.5rem; }
.house img { width: 120px; height:auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)); transition: transform .2s ease; }
.foto { border-radius: 25%; border: solid #171616;filter: drop-shadow(0 10px 12px rgba(0,0,0,.45));}
.house img:hover { transform: translateY(-6px) rotate(-2deg) scale(1.03); }
.code.inline { background: rgba(0,0,0,.3); padding:.1rem .35rem; border-radius:6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }


.card_2 { /*Creamos una class para la nueva tarjeta que creamos*/
  background: linear-gradient(180deg, rgba(2, 61, 20, 0.711), rgba(227, 29, 29, 0));
  /* Creamos un fondo con un ligero degradado vertical, creando un efecto suave y translúcido dentro de la tarjeta que creamos*/
  border: 1px solid rgba(255,255,255,.1);
  /* Le damos una linea de borde muy sutil para separar la tarjeta del fondo */
  border-radius: 10px; 
  /* Bordes redondeados para un aspecto más suave, entre mas grande sea el valor mas redondeado será */
  padding: 1.2rem;
  /* Espacio interno alrededor del contenido */
  box-shadow: 0 10px 24px rgba(162, 189, 96, 162);
  /* Sombra grande y difuminada para dar efecto de elevación y brillo verde característico */
}

.casa_perteneciente {
  display:inline-flex;          /* Se muestra como un elemento en línea tipo caja flexible */
  padding:.4rem 2rem;            
  border-radius:20px;              /* Bordes redondeados pero en estilo cápsula en este caso */
  text-decoration:none;            /* Quita subrayado si es un enlace */
  color:#111;                      /* Color del texto */
  background: linear-gradient(90deg,var(--accent-2), var(--accent-4), var(--accent-5));
  /* Fondo con degradado horizontal usando 3 colores definidos en variables */
  background-size: 200% 200%;
  /* Amplía el degradado para poder moverlo en la animación */
  animation: gradientShift 3s ease infinite;
  /* Aplica la animación que mueve el degradado */
  box-shadow: 0 10px 24px rgba(2, 140, 18, 0.833);
  /* Sombra profunda para dar sensación de relieve */
}

@keyframes gradientShift { /*Efecto animacion de los colores*/
  0%   { background-position: 0% 30%; }  /* Inicio del movimiento del degradado */
  50%  { background-position: 100% 50%; }/* Centro del movimiento */
  100% { background-position: 0% 70%; }  /* Regresa a la posición original */
}

.casa_perteneciente:hover { 
  transform: translateY(-5px); /* Efecto de elevación al pasar el cursor */
}

.plato_dia:hover { 
  background: linear-gradient(50deg, var(--accent-4), var(--accent-3)); /* Cambia el degradado al hacer hover y no hay animacion */
  transform: translateY(-1px); /* Se eleva ligeramente cuando esta encima el cursor (la altura del hover)  */
  box-shadow: 0 12px 24px rgba(0,0,0,.45); /* Sombra más fuerte en hover */
}

.plato_dia {
  display:inline-flexbox;          /*Se deja este para que quede dsitribuido en todo el espacio del plato seleccionado*/
  padding:.4rem 2rem;              
  border-radius:20px;              
  text-decoration:none;            
  color:#111;                      /* Color del texto */
  box-shadow: 0 8px 18px rgba(0,0,0,.35);   /* Sombra inicial */
  transition: transform .15s ease;         /* Transición suave al moverlo */
  background: linear-gradient(90deg,var(--accent-2), var(--accent-3), var(--accent-4));
  /* Fondo con degradado de 3 colores asignado en la varibale root y almacenado cada uno */
  background-size: 200% 200%; 
  /* Tamaño ampliado para animación */
  animation: gradientShift 3s ease infinite;
  /* Usa la misma animación de movimiento del degradado */
}

@keyframes gradientShift {
  0%   { background-position: 0% 30%; } 
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 70%; } 
}

.Efecto-pociones {
  color:#040404; /* Color de texto más oscuro solo cuando se despliegan las opciones */ 
}

.Efecto-pociones, select:valid {/*Estos son los efectos que le da cuando hay seleccionada alguna opcion*/
  display:inline-block;               /* Se comporta como elemento en línea con tamaño propio */
  padding:.6rem 1rem;         
  border-radius:12px;             
  text-decoration:none;               /* Quitamos el subrayado */
  color:#111;                         /* Color del texto */
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: transform .15s ease;         
  background: linear-gradient(90deg,var(--accent-2), var(--accent-3), var(--accent-4));
  /* Fondo con degradado de 3 colores asignado en la varibale root y almacenado cada uno */
  background-size: 200% 200%;                
  animation: gradientShift 3s ease infinite; 
  font-weight:700;                           /* Dejamos el texto en negrita */
}