body {
  background-color: rgb(0, 0, 0);
  background-image: url("img/fondo.png");
  background-size:100%;
  background-repeat:repeat-y;
}

body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url("img/fondo.png");
  background-repeat: repeat-y;
  background-repeat: repeat-x;
  transform: scaleY(-1);
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}

/* FUENTES */

h1 {
  color: white;
  background-color: rgb(202, 32, 32);
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  margin-top: 2px;
  margin-bottom: 3px;
  text-shadow: 0 0 5px #FFFFFF;
}

.headerfont {
  font-family: Impact, Charcoal, sans-serif;
  font-size: 45px;
  letter-spacing: 0.6px;
  word-spacing: 3px;
  color: #ffffff;
  font-weight: normal;
  text-transform: uppercase;
  text-shadow: 0 0 5px #ffffff;
  animation: brillar 1s infinite alternate;
  margin-top: 90px;
  margin-bottom: 10px;
}

@keyframes brillar {
  from { text-shadow: 0 0 10px #ffffff; }
  to { text-shadow: 0 0 40px #9b9b9b; }
}

.titulos{
  font-family: Impact, Charcoal, sans-serif;
  font-size: 25px;
  color: #000000;
  font-weight: 400;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
  margin-left: 20px;
  margin-bottom: 10px;
}

.titulos2{
  font-family: Impact, Charcoal, sans-serif;
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
}

.titulos3{
  font-family: Impact, Charcoal, sans-serif;
  font-size: 20px;
  color: #ffffff;
  font-weight: 400;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
}

.texto{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1.5;
  margin-left: 20px;
  margin-right: 40px;
  margin-top: 10px;
  margin-top: 10px;
}

.textochiqui{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
  font-weight: 400;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1.5;
  margin-left: 20px;
  margin-right: 40px;
  margin-top: 10px;
  margin-top: 10px;
}

/* DE ESTRUCTURA */

nav a {
  text-decoration: none;
  color: #FFFFFF;
  background-color: rgb(202, 32, 32);
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  font-family: Impact, sans-serif;
  display: inline-block;
  letter-spacing: 1px;
  text-shadow: 0 0 2px #ffffff;
  animation: brillar 1s infinite alternate;
}

nav a:hover {
  color: rgb(202, 32, 32);
  background-color: rgb(255, 255, 255);
}

div {
  width: 1300px;
  max-width: 95%;
  margin: 0 auto;
}

nav {
  border-bottom: 2px solid rgb(202, 32, 32);
}

article {
  background-color: white;
  padding: 5px;
  margin: 5px;
}

footer {
  background-color: rgb(202, 32, 32);
  padding: 1px;
  margin: 1px;
  margin-bottom: 10px;
  text-align: center;
  font-family: Impact, Charcoal, sans-serif;
  letter-spacing: 1px;
  word-spacing: 1px;
  color: white;
  font-weight: normal;
}

.contenedordoc {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
}

/* DOCUMENTAL IMAGEN */

.img-glow-zoom {
  transition: all 0.5s ease;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 180px;
  border-radius: 10px;
}

.img-glow-zoom:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 15px #911111);
}

.adaptable {
  width: 100%;
  height: auto;
}

/* ALBUMES TIPOGRAFÍAS */

.upallnight {
  color: rgb(43, 192, 68);
  font-family: "Courier Prime", monospace;
  font-weight: 600;
  font-style: normal;
  margin-left: 10px;
  margin-right: 40px;
}

.takemehome {
  color: red;
  font-family: "Courier Prime", monospace;
  font-weight: 600;
  font-style: normal;
  margin-left: 10px;
  margin-right: 40px;
}

.midnightmemories {
  color: brown;
  font-family: "Courier Prime", monospace;
  font-weight: 400;
  font-style: normal;
  margin-left: 10px;
  margin-right: 40px;
}

.four {
  color: grey;
  font-family: "Red Hat Display", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  margin-left: 10px;
  margin-right: 40px;
}

.madeintheam {
  color: rgb(143, 76, 28);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100px;
  font-style: normal;
  margin-left: 10px;
  margin-right: 40px;
}

.textoalbumes{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1.5;
  margin-left: 30px;
  margin-right: 40px;
}

/* CINEPOLIS */

.cinepolis {
  width: 100%;
  height: 100%;
}

/* MIEMBROS CARTAS */

.members-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.miembro-card {
  width: 85%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.miembro-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.miembro-card img {
  width: 100%;
  display: block;
  border-radius: 12px;
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

#harry img:hover { content: url("img/1harry-dibujos.png"); }
#niall img:hover { content: url("img/1niall-dibujo.png"); }
#liam img:hover { content: url("img/1liam-dibujo.png"); }
#louis img:hover { content: url("img/1louis-dibujo.png"); }
#zayn img:hover { content: url("img/1zayn-dibujo.png"); }

.miembro-card .card-body {
  padding: 10px 15px;
}

.miembro-card .card-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #000000;
  font-weight: 400;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1.5;
  margin-left: 10px;
  margin-right: 10px;
}

.miembro-card .card-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1.5;
  margin-left: 10px;
  margin-right: 10px;
}

.textocartas{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1.5;
  margin-left: 30px;
  margin-right: 40px;
}

/* DISCOS TABLA */

#discos {
  margin: 2rem auto;
  max-width: 600px;
  padding: 0 0;
  border-radius: 20px;
}

#discos .card {
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
   box-sizing: border-box;
}

#discos, 
#discos * {
  font-family: Arial, Helvetica, sans-serif !important;
}

#discos table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 0.8rem;
  font-family: Arial, Helvetica, sans-serif;
  color: #000000;
  border-radius: 8px;
  overflow: hidden;
}

#discos th {
  background-color: #b13232;
  color: #f9f9f9;
}

#discos th, #discos td {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

/* REDES SOCIALES */

.redes {
  display: flex;
  justify-content: center;
  gap: 10px;                
}

.redes a {
  display: inline-block;    
}

.redes img {
  width: 40px;               
  height: 40px;              
  object-fit: cover;         
  border-radius: 6px;       
  display: block;
}

.redes img:hover {
  transform: scale(1.2);              
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
  cursor: pointer;                     
}

/* CINTA GIFS */

.cinta-gifs {
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  padding: 10px 0;
}

.fila-gifs {
  display: flex; 
  align-items: center;
  animation: mover 10s linear infinite;
}

.gif {
  height: 60px;
  width: auto;
  margin-right: 10px;
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

/* CARTAS */

.cartas-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  margin: 20px 4px;
}

.cartas-card {
  width: 85%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}

.cartas-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

@keyframes mover {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.gif:hover {
  transform: scale(1.2);
  filter: brightness(1.2);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  cursor: pointer;
}

/* MÚSICA */

.spotifyvisual {
    display:"flex"; 
    margin-left: 4%;
}

/* IMAGENES CAMBIAN */

.cambio-automatico {
  width: 100%;
  max-width: 750px;
  aspect-ratio: 14/9;
  position: relative;
  overflow: hidden;
  margin-top: 15px;
}

.cambio-automatico img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: rotar 16s infinite;
}

.cambio-automatico img:nth-child(1) { animation-delay: 0s; }
.cambio-automatico img:nth-child(2) { animation-delay: 3.2s; }
.cambio-automatico img:nth-child(3) { animation-delay: 6.4s; }
.cambio-automatico img:nth-child(4) { animation-delay: 9.6s; }
.cambio-automatico img:nth-child(5) { animation-delay: 12.8s; }

@keyframes rotar {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

/* TABS */

.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem 0;
  justify-content: center;
  gap: -1px;
}

.tabs input[type="radio"] {
  display: none;
  justify-content: center;
}

.tabs label {
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  margin-right: 5px;
  transition: all 0.3s;
  opacity: 0.7;
  transform: scale(1);
  justify-content: center;
}

.tabs label[for="tab1"] { background-color: #79d127; color: rgb(54, 128, 20)}
.tabs label[for="tab2"] { background-color: #e20000; color: rgb(92, 16, 16)}
.tabs label[for="tab3"] { background-color: #8d2f2f; color: rgb(36, 14, 14)}
.tabs label[for="tab4"] { background-color: #696969; color: rgb(61, 56, 56)}
.tabs label[for="tab5"] { background-color: #8a4c19; color: rgb(58, 42, 22); }

#tab1:checked + label[for="tab1"],
#tab2:checked + label[for="tab2"],
#tab3:checked + label[for="tab3"],
#tab4:checked + label[for="tab4"],
#tab5:checked + label[for="tab5"] {
  color: #ffffff;
  opacity: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transform: scale(1.05);
  border-bottom: 3px solid #8a8a8a;
  justify-content: center;
}

.tabs .content {
  display: none;
  width: 100%;
  padding: 40px;
  border-top: 3px solid #ccc;
  border-radius: 0 0 8px 8px;
  background-color: #f9f9f9;
  box-sizing: border-box;
  margin-top: 0px;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
  display: block;
}

.titulostab{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: uppercase;
  font-weight: 10px;
}

/* NAVBAR */

nav .nav-brand img {
  width: 120px;
  height: auto;
  flex: 0 0 auto;
  display: block;
}

nav .nav-brand a {
  background-color: white;
  padding: 1px;
  border-radius: 1px;
}

nav ul.inline {
  display: flex;
  flex: 1;
flex-wrap: nowwrap;
  justify-content: flex-start;
}

nav ul.inline a {
  flex: 1 1 auto;
  white-space: nowrap;
   font-size: 5px;
   padding: 7px 7px;
  text-align: center;
}

nav ul.inline a {
  background-color: rgb(194, 27, 27);
  color: white;
  border-radius: 6px;
  font-size: 5px;
  text-decoration: none; 
  transition: 0.3s;
   text-align: center;
}

nav ul.inline a:hover {
  background-color: white;
  color: rgb(199, 36, 36);
}

/* TRIVIA DE 1D */

:root{
  --red:#c8102e;
  --dark:#111;
  --muted:#f7f7f7;
  --card-bg:#ffffff;
 }

.qa-list{display:flex; flex-direction:column; gap:1rem;}
.qa-row{ width:90%;}

.q-card, .a-card{
  background:var(--card-bg);
  color:var(--dark);
  border-radius:10px;
  padding:1rem;
  box-shadow: 0 6px 18px rgba(20,20,20,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}

.q-title{ color:var(--red); font-weight:700; margin-bottom:0.5rem; display:block; }

.input-block, textarea, select {
  width:100%;
  box-sizing:border-box;
  padding:0.6rem;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  margin-top:0.35rem;
  font-size:0.95rem;
  background:transparent;
}
  
textarea{min-height:90px; resize:vertical; }

.paper-radio span, .paper-check span{
  display:inline-block;
  padding:0.4rem 0.6rem;
  border-radius:8px;
  transition: all .18s ease;
  margin:0.25rem 0;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.04);
}

.paper-radio input:checked + span,
.paper-check input:checked + span{
  background:var(--red);
  color:white;
  transform:translateY(-2px);
  box-shadow: 0 8px 18px rgba(200,0,0,0.12);
}

.paper-switch-label, .paper-switch-2-label{ margin-left:0.5rem; color:#222; }

.range-row{ display:flex; gap:0.5rem; align-items:center; }
.output { min-width:3.2rem; text-align:right; font-weight:600; }

.a-card{
  min-height:3.6rem;
  display:flex;
  align-items:center;
  padding:1rem;
  position:relative;
  overflow:hidden;
}
.a-card .ans-text{
  color:var(--red);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .22s ease;
  font-weight:600;
}

.a-card .hint{
  position:absolute;
  right:0.7rem;
  bottom:0.55rem;
  font-size:0.78rem;
  color:rgba(0,0,0,0.22);
}

.a-card:hover .ans-text,
.a-card:focus-within .ans-text{
  opacity:1;
  transform: translateY(0);
}

.paper-radio input:focus + span,
.paper-check input:focus + span{
  outline: 3px solid rgba(200,0,0,0.12);
  outline-offset: 3px;
}

@media (max-width:980px){
  .qa-row{ grid-template-columns: 1fr; }
  .a-card{ order:2; }
}

.controls{display:flex; gap:0.5rem; align-items:center;}
.btn-reveal{
  background:var(--red);
  color:white;
  border-radius:8px;
  padding:0.45rem 0.75rem;
  border:none;
  cursor:pointer;
  font-weight:600;
}

.answers-all{
  margin-top:1rem;
  padding:0.8rem;
  border-radius:8px;
  background: #111;
  color:#fff;
  display:none;
}

.answers-all.visible{ display:block; }

/* DISEÑO ADAPTABLE */

@media (max-width: 600px) 
{
  .contenedordoc {
    flex-direction: column;
    gap: 7px;
  }
  nav ul {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  nav li {
    display: inline-block;
    margin: 3px 2px;
  }
  nav a {
    font-size: 10px;
    padding: 4px 6px;
  }
  .cuadro {
    font-size: 11px;
    width: 95%;
  }
  .img-glow-zoom {
    width: 100px;
  }
  .cambio-automatico {
    max-width: 90%;
    aspect-ratio: 14/9;
  }
  .gif {
    height: 35px;
    margin-right: 8px;
  }
  h1 {
    font-size: 25px;
    padding: 6px 0;
  }
  .headerfont {
    font-size: 25px;
    letter-spacing: 0.4px;
    word-spacing: 1.5px;
    }
  .texto, .upallnight, .takemehome, .midnightmemories, .four, .madeintheam {
    font-size: 13px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .redes img {
    width: 30px;
    height: 30px;
  }
  .titulos2 {
    font-size: 7px;
    margin-left: 7px;
    margin-right: 7px;
  }
  .fila-discos {
    flex-direction: column;
  }
  .album {
    width: 100%;
  }
  .miembro-card {
    width: 90%;
  }
  .members-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .tabs label {
    font-size: 0.3rem;
    padding: 3px;
  }
  .tabs .content {
    border-radius: 8px;
  }
  #discos th, #discos td {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
  }
  #discos .card {
    width: 100%; 
    max-width: 100%;  
  }

#discos {
    width: 100%; 
    max-width: 100%;  
  }

  nav {
    flex-direction: column;
    align-items: center;
  }
  nav ul.inline {
    flex-direction: column;
    gap: 5px;
  }
  .qa-row .a-card .hint {
    font-size: 0.4rem;
  }
}