*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,Helvetica,sans-serif;background:#f7f7f7;color:#222}header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #e8e8e8}.header-container{max-width:1200px;margin:auto;min-height:78px;padding:10px 25px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo-area{display:flex;align-items:center;gap:12px}.mini-logo{width:116px;height:56px;object-fit:contain;object-position:center}.brand{font-size:23px;font-weight:900;letter-spacing:.6px}.brand small{display:block;font-size:10px;letter-spacing:3px;color:#999;margin-top:2px}nav{display:flex;gap:25px;flex-wrap:wrap}nav a{color:#333;text-decoration:none;font-weight:700;font-size:14px}nav a:hover{color:#f15a29}.hero{max-width:1200px;margin:25px auto;padding:0 25px}.hero-box{min-height:360px;border-radius:24px;overflow:hidden;display:flex;align-items:center;padding:45px;background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.18)),url('assets/banner-clean.png') center/cover;color:#fff}.hero-content{max-width:600px}.eyebrow{font-size:13px;letter-spacing:3px;font-weight:bold;color:#ffc16b}.hero h1{font-size:52px;line-height:1.02;margin:12px 0}.hero p{font-size:18px;line-height:1.5;margin-bottom:24px}.btn{display:inline-block;background:#f45b32;color:#fff;padding:13px 22px;border-radius:25px;text-decoration:none;font-weight:bold;border:0;cursor:pointer}.btn.light{background:#fff;color:#df4e25}.ad-space{max-width:970px;height:90px;margin:25px auto;border:1px dashed #bbb;background:#fff;display:flex;align-items:center;justify-content:center;color:#999;font-size:13px}.section{max-width:1200px;margin:45px auto;padding:0 25px}.section-title{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:24px}.section-title h2{font-size:30px}.section-title span{color:#777;font-size:13px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:25px}.filter-btn{border:1px solid #e2d2ca;background:white;color:#63382a;border-radius:20px;padding:9px 15px;font-weight:bold;cursor:pointer}.filter-btn.active,.filter-btn:hover{background:#f45b32;color:white;border-color:#f45b32}.novelas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.novela-card{background:#fff;border-radius:17px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.08);transition:.2s}.novela-card:hover{transform:translateY(-4px)}.cover{height:300px;position:relative;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover;display:block}.badge{position:absolute;top:14px;left:14px;background:#fff;color:#df4e25;border-radius:20px;padding:6px 10px;font-size:11px;font-weight:bold;z-index:1}.card-content{padding:20px}.card-content h3{font-size:18px;line-height:1.3;margin-bottom:10px}.parts{font-size:13px;color:#777;margin-bottom:8px}.views{font-size:13px;color:#c4512e;font-weight:bold;margin-bottom:16px}.view-button{display:block;text-align:center;background:#f45b32;color:#fff;padding:12px;border-radius:9px;text-decoration:none;font-weight:bold;font-size:14px}.view-button.disabled{background:#bbb;pointer-events:none}.featured{background:#fff0e5;border-radius:18px;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:25px}.featured p{color:#666;line-height:1.5;margin-top:8px}.social-section{background:#24110f;color:white;border-radius:20px;padding:32px;margin-top:25px}.social-section p{color:#e5cfc8;margin:10px 0 20px;line-height:1.5}.social-links{display:flex;flex-wrap:wrap;gap:12px}.social-links a{display:inline-block;background:#fff;color:#2b1713;padding:12px 16px;border-radius:24px;text-decoration:none;font-weight:bold}.social-links a:hover{background:#ffb15b}.note{font-size:12px;color:#8b7169;margin-top:14px}footer{margin-top:60px;background:#222;color:#fff;padding:35px 25px}.footer-container{max-width:1200px;margin:auto;display:flex;justify-content:space-between;gap:30px}.footer-brand{font-size:22px;font-weight:bold}.footer-text{color:#aaa;font-size:13px;margin-top:8px}.detail-container{max-width:900px;margin:40px auto;padding:0 20px}.category{color:#f15a29;font-size:13px;font-weight:bold;letter-spacing:1.5px;margin-bottom:10px}.detail-container h1{font-size:40px;line-height:1.15;margin-bottom:12px}.description{color:#777;line-height:1.5;margin-bottom:35px}.part{background:#fff;border-radius:16px;padding:20px;margin-bottom:30px;box-shadow:0 5px 20px rgba(0,0,0,.08)}.part-title{font-size:20px;font-weight:bold;margin-bottom:18px}.video-container{width:100%;max-width:500px;margin:auto;aspect-ratio:9/16;background:#111;border-radius:12px;overflow:hidden}.video-container iframe{width:100%;height:100%;border:0}.missing{padding:30px;background:#fafafa;border:1px dashed #bbb;border-radius:12px;color:#777;text-align:center}@media(max-width:900px){.novelas-grid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:42px}}@media(max-width:600px){.header-container{min-height:70px;padding:8px 15px}.mini-logo{width:90px;height:45px}.brand{font-size:18px}nav{display:none}.hero{padding:0 15px}.hero-box{padding:30px 24px;min-height:360px}.hero h1{font-size:36px}.hero p{font-size:15px}.novelas-grid{grid-template-columns:1fr}.section{padding:0 15px}.section-title h2{font-size:25px}.featured{flex-direction:column;align-items:flex-start}.footer-container{flex-direction:column}.detail-container h1{font-size:30px}}
/* VENTANA DEL REPRODUCTOR */

.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  overflow-y: auto;
  padding: 30px 15px;
}

.video-modal.active {
  display: block;
}

.video-modal-content {
  max-width: 700px;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.close-video {
  display: block;
  margin: 0 0 15px auto;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: #222;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.video-player-container {
  width: 100%;
  max-width: 450px;
  height: 650px;
  margin: 20px auto;
}

.video-player-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 600px) {

  .video-modal-content {
    padding: 12px;
  }

  .video-player-container {
    height: 580px;
  }

}
/* Título de cada parte dentro de la Frutinovela */

.parte-titulo {
  background: white;
  color: #222;
  padding: 12px 18px;
  margin: 24px 0 10px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-left: 5px solid #e63946;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}