/* 🎬 MySeries - Estilo oscuro con dorado */

:root{
  --color-gold:#e0b44b;
}

/* ===== BASE ===== */

html,body{
  height:100%;
  margin:0;
}

body{
  background:#0d0d0d;
  color:#fff;
  font-family:"Tajawal",sans-serif;
  padding-top:70px;

  display:flex;
  flex-direction:column;
  min-height:100vh;
}

main{
  flex:1;
}

/* ===== HEADER ===== */

header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#000;
  border-bottom:1px solid #222;
  z-index:1000;
  padding:12px 20px;
}

header a{
  color:var(--color-gold);
  text-decoration:none;
  font-size:18px;
  font-weight:bold;
}

/* ===== BANNER ===== */

.banner{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-top:2px solid #b9912c;
  border-bottom:2px solid #b9912c;
  min-height:260px;
  margin-bottom:30px;
  background:linear-gradient(120deg,#000,#111,#000);
}

.banner::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:conic-gradient(from 0deg, rgba(255,215,0,0.05), transparent 40%, rgba(255,215,0,0.05));
  animation:spin 18s linear infinite;
  z-index:0;
}

@keyframes spin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

.banner-content{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  width:90%;
  max-width:1100px;
  gap:20px;
}

.banner-img{
  flex:0 0 220px;
  height:240px;
  border:2px solid #b9912c;
  border-radius:8px;
  box-shadow:0 0 15px rgba(185,145,44,0.5);
}

.banner-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.banner-text{
  flex:1;
}

.banner-text h1{
  color:#f2c94c;
  font-size:22px;
}

.banner-text p{
  color:#ccc;
  font-size:15px;
  line-height:1.6;
}

/* ===== VIDEO ===== */

.video-wrap{
  text-align:center;
  margin-top:20px;
}

iframe{
  width:90%;
  max-width:950px;
  height:420px;
  border-radius:12px;
  border:2px solid #b9912c;
  background:#111;
}

/* ===== SELECTORES ===== */

.selectors{
  text-align:center;
  margin-top:20px;
}

.selectors button{
  background:#111;
  color:#fff;
  border:2px solid #b9912c;
  border-radius:6px;
  padding:6px 12px;
  cursor:pointer;
}

.selectors button.active{
  background:#b9912c;
  color:#000;
}

/* ===== SERVERS ===== */

#servers{
  margin:15px auto;
  text-align:center;
}

.server-btn{
  margin:6px;
  padding:7px 16px;
  background:#f2c94c;
  border:2px solid #b9912c;
  border-radius:6px;
  cursor:pointer;
  font-weight:bold;
  color:#000;
}

.server-btn:hover{
  background:#b9912c;
  transform:scale(1.05);
}

/* ===== EPISODIOS ===== */

.episodes-row{
  width:90%;
  max-width:1200px;
  margin:40px auto;

  display:flex;
  flex-wrap:wrap;
  gap:18px;

  direction:ltr;
}

.episode-card{
  border-radius:10px;
  width:180px;
  overflow:hidden;
  cursor:pointer;
  background:#111;
  border:2px solid #b9912c;
  transition:0.3s;
  text-align:center;
}

.episode-card:hover{
  transform:scale(1.05);
  box-shadow:0 0 12px rgba(185,145,44,0.7);
}

.ep-number{
  background:#b9912c;
  color:#000;
  font-weight:bold;
  padding:4px 0;
  font-size:13px;
}

.episode-card img{
  width:100%;
  height:180px;
  object-fit:cover;
}

.ep-title{
  padding:6px;
  font-size:13px;
  color:#f2c94c;
}

/* ===== FOOTER ===== */

.site-footer{
  background:#111;
  color:#fff;
  padding:22px 20px;
  border-top:1px solid #222;
  margin-top:auto;
}

.footer-content{
  max-width:1100px;
  margin:auto;
}

/* links */

.footer-links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px;
  font-size:13px;
}

.footer-links a{
  color:#aaa;
  text-decoration:none;
  position:relative;
  transition:.3s;
}

/* línea animada debajo */

.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:var(--color-gold);
  transition:.3s;
}

.footer-links a:hover{
  color:#fff;
}

.footer-links a:hover::after{
  width:100%;
}

/* línea separadora */

.footer-divider{
  height:1px;
  background:#222;
  margin:18px 0;
}

/* parte inferior */

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* texto */

.footer-text{
  font-size:13px;
  opacity:.7;
}

/* icono tiktok */

.footer-social{
  position:absolute;
  right:0;
  display:flex;
  align-items:center;
}

.tiktok-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#1a1a1a;
  transition:.3s;
}

.tiktok-icon{
  width:16px;
  height:16px;
  fill:#bbb;
  transition:.3s;
}

.tiktok-link:hover{
  background:#e50914;
  transform:translateY(-2px);
}

.tiktok-link:hover .tiktok-icon{
  fill:#fff;
}

/* ===== BANNER MOVIL ===== */

@media (max-width:768px){

.banner{
  min-height:auto;
  height:auto;
  overflow:visible;
  padding:20px 15px;
}

.banner-content{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:15px;
}

.banner-img{
  flex:none;
  width:160px;
  height:220px;
}

.banner-text{
  width:100%;
}

.banner-text h1{
  font-size:18px;
}

.banner-text p{
  font-size:14px;
  line-height:1.5;
}

/* BOTONES */

.selectors{
  margin-top:15px;
}

.selectors button{
  font-size:11px;
  padding:5px 10px;
}

}

/* episodios */


@media (max-width:768px){

.episodes-row{
  width:95%;
  justify-content:center;
  gap:10px;
}

.episode-card{
  width:45%;
}

.episode-card img{
  height:120px;
}


/* evitar que la página se desborde */
html, body{
  overflow-x:hidden;
  max-width:100%;
}

/* asegurar que todo calcule bien el ancho */
*{
  box-sizing:border-box;
}

iframe{
  width:100%;
  height:220px;
}
}

/* MODAL */
#actorModal {
  display: none; /* 👈 ESTO FALTABA */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(20px);
  z-index: 9999;
  overflow-y: auto;
}

/* 👇 IMPORTANTE */
body.modal-open {
  overflow: hidden;
}

/* CONTENEDOR */
.actor-container {
  max-width: 1200px;
  margin: auto;
  padding: 40px;
  color: white;
  font-family: 'Cairo', sans-serif;
  min-height: 100vh; /* opcional */
}

/* CERRAR */
#cerrarModal {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 28px;
  cursor: pointer;
}

/* HEADER */
.actor-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}

/* NOMBRE */
#actorNombre {
  font-size: 42px;
  font-weight: bold;
  text-align: center;
}

/* BIO */
#actorMiniBio {
  text-align: center;
  color: #aaa;
  max-width: 600px;
  margin: auto;
}

/* GRID PRINCIPAL */
.actor-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  margin-top: 40px;
  align-items: start; /* 👈 clave */
}

/* INFO */
#actorInfo {
  line-height: 1.8;
}

#actorInfo h3 {
  color:  #f2c94c;
  margin-top: 25px;
}

#actorInfo p {
  color: #ddd;
}

/* SECCIÓN SERIES */
.actor-series-section {
  display: flex;
  flex-direction: column;
}

/* GRID SERIES */
#actorSeries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 220px));
  gap: 25px;
  justify-content: center; /* 🔥 centra cuando hay pocas */
}

/* CARD */
.actor-serie-card {
  background: #111;
  border-radius: 15px;
  overflow: hidden;
  transition: 0.3s;
  cursor: pointer;
}

/* IMAGEN */
.actor-serie-card img {
  width: 100%;
  aspect-ratio: 2 / 3; /* 🔥 proporción real de poster */
  object-fit: cover;
}

/* TITULO */
.actor-serie-card p {
  padding: 12px;
  font-size: 15px;
  text-align: center;
}

/* HOVER */
.actor-serie-card:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(30,144,255,0.5);
}
#actorModal {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 768px) {
  .actor-content {
    grid-template-columns: 1fr;
  }
}