/* =========================
   MuseXClub — CSS exclusivo de la página de modelo
   Encapsulado bajo .page-model (no afecta otras páginas)
   ========================= */

.page-model{
  --color-dark: #0B0C10;
  --color-gray: #1A1B20;
  --color-gray-2: #101215;
  --color-panel: #0f1114;
  --color-panel-2: #0e1013;
  --color-gold: #C9A227;
  --color-gold-2:#b8921d;
  --color-light: #FFFFFF;
  --color-muted: #cfcfcf;
  --border-soft: rgba(255,255,255,.08);
  --border-strong: rgba(201,162,39,.45);
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  background: var(--color-dark);
  color: var(--color-light);
  font-family: Helvetica, Arial, sans-serif;
}

/* ===== CONTENEDOR GENERAL ===== */
.page-model .container{
  max-width: 1150px;
  margin: 0 auto;
  padding: 26px 18px 80px;
}

/* ===== HERO (genérico + perfil) ===== */
.page-model .hero{
  position: relative;
  min-height: 520px;
  height: clamp(420px, 62vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.page-model .hero--profile{ background-position: center 30%; }

.page-model .hero-content{
  position: relative;
  max-width: 1100px;
  padding: 0 20px;
}
.page-model .hero-content h1{
  font-family: Georgia, Times, serif;
  color: var(--color-gold);
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin: 0 0 1rem;
  line-height: 1.1;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.page-model .hero-content p{
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  margin: 0 0 2rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.6;
}
.page-model .cta-button{
  display: inline-block;
  padding: 15px 30px;
  background: var(--color-gold);
  color: var(--color-dark);
  text-decoration: none;
  font-weight: 700;
  border-radius: 10px;
  transition: transform .2s, background-color .3s;
  border: 0;
  box-shadow: 0 6px 18px rgba(201,162,39,.35);
}
.page-model .cta-button:hover{ background:#E0B94C; transform: translateY(-1px); }

/* ===== CABECERA COMPACTA (perfil) ===== */
.page-model .profile-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}
@media (max-width: 780px){
  .page-model .profile-head{ grid-template-columns: auto 1fr; }
}
.page-model .avatar-xl{
  width: 120px; height: 120px; border-radius: 999px;
  object-fit: cover; object-position: center;
  border: 2px solid var(--color-gold);
  display: inline-block;
}
.page-model .profile-meta h2{
  margin: 0 0 6px;
  font-size: 30px;
  letter-spacing:.2px;
  color:#fff;
}
.page-model .profile-meta .bio{
  margin:0; color: var(--color-muted); max-width: 780px; line-height:1.35
}
.page-model .profile-actions{ display:flex; gap:10px; flex-wrap:wrap }
.page-model .profile-actions .cta-button{ padding:8px 12px; font-size:15px; }
.page-model .profile-actions .btn{ padding:8px 14px; font-size:14px; }

/* ===== CHIPS / TABS ===== */
.page-model .tabs{ display:flex; gap:8px; margin:14px 0 6px; flex-wrap:wrap }
.page-model .chip{
  font-size:12px; color:#d9d9d9; background: var(--color-panel);
  border:1px solid var(--border-soft); border-radius:999px; padding:6px 10px
}
.page-model .chip:hover{
  border-color: var(--color-gold-2);
  color: var(--color-gold);
}
.page-model .chip-nav{ font-size:14px; padding:10px 18px; font-weight:600; }

/* ===== TÍTULOS DE SECCIÓN ===== */
.page-model .section-title{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin: 26px 0 16px;
  color: var(--color-gold);
  letter-spacing:.4px;
}

/* ===== GRIDS ===== */
.page-model .grid{ display:grid; gap:22px }
.page-model .grid-2{ grid-template-columns: repeat(2,1fr) }
@media (max-width: 920px){ .page-model .grid-2{ grid-template-columns:1fr } }

/* ===== CARD BASE (posts/colecciones) ===== */
.page-model .card{
  background: linear-gradient(180deg, var(--color-panel), #0b0c0f);
  border:1px solid var(--border-soft);
  border-radius: 14px; overflow:hidden; box-shadow: var(--shadow);
}
.page-model .card--gold{ border-color: var(--border-strong) }

/* Miniatura con proporción fija (imagen completa) */
.page-model .card .thumb{
  position: relative;
  display:block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  overflow: hidden;
  background: linear-gradient(#0B0C10, #1A1B20);
}
.page-model .card .thumb img{
  width:100%;
  height:100%;
  object-fit: contain;   /* imagen completa dentro del cuadro */
  object-position:center;
  display:block;
  pointer-events:none;
  background: var(--color-dark);
}

/* Cuerpo de card */
.page-model .card .body{
  padding: 12px 14px;
  border-top:1px solid var(--border-strong);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.page-model .card .title{ font-weight:700 }
.page-model .btn-wide{
  margin-top:10px; width:100%; display:block; text-align:center; padding:12px;
  border-radius:10px; border:1px solid var(--border-strong);
  background: var(--color-gold);
  color: #0d0d0d;
  font-weight:800;
}
.page-model .btn-wide:hover{ background:#ddb84c }

/* ===== ESTADO BLOQUEADO ===== */
/* PC: blur 14 */
.page-model .card.locked .thumb::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(201,162,39,.08), transparent 60%),
    rgba(0,0,0,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.page-model .card.locked .badge-lock{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  color:#f2e3b3; background:rgba(201,162,39,.18); border:1px solid var(--color-gold-2);
  padding:6px 12px; border-radius:999px; font-weight:700; font-size:13px; letter-spacing:.2px
}

/* ===== COLECCIONES ===== */
.page-model .card.collection .thumb{
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  overflow: hidden !important;
}
.page-model .card.collection .thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
  display: block !important;
  background: var(--color-dark);
}

/* ===== LISTAS / FORM ===== */
.page-model .table{ width: 100%; border-collapse: collapse; }
.page-model .table th, .page-model .table td{
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 8px 10px; text-align: left;
}
.page-model .badge{
  display: inline-block; padding: .2rem .5rem;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: .75rem;
}
.page-model .input,.page-model .select,.page-model .textarea{
  width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #333;
  background: #0B0C10; color: #fff; margin: 6px 0 12px;
}
.page-model .btn{ padding:.6rem 1rem; border-radius:8px; border:1px solid rgba(255,255,255,.18); background:#111; color:#fff; cursor:pointer }
.page-model .btn.gold{ background: linear-gradient(180deg, #d4af37, #b88a1a); color:#111; border:0 }

/* ===== CONTENIDO RICH ===== */
.page-model .post-body{ max-width: 900px; margin: 0 auto; }
.page-model .post-body img, 
.page-model .post-body video{
  max-width: 100%; height:auto; display:block; border-radius: 10px;
}

/* ===== MODELS CAROUSEL (grilla responsive) ===== */
.page-model .models-carousel{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:22px;
  max-width:1100px;
  margin:0 auto;
}
.page-model .models-carousel::-webkit-scrollbar{ height:8px }
.page-model .models-carousel::-webkit-scrollbar-thumb{ background:#222; border-radius:8px }

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .page-model .hero{ height:auto; min-height: 520px; padding:32px 0 96px }
  .page-model .hero-content p{ margin-bottom:18px }
  .page-model .hero--profile{ height:auto }

  /* Móvil: blur 10 */
  .page-model .card.locked .thumb::before{
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  /* Acciones debajo de la foto, en una línea desplazable */
  .page-model .profile-head{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "ava meta"
      "act act";
    align-items: center;
    gap: 16px;
  }
  .page-model .avatar-xl{ grid-area: ava; }
  .page-model .profile-meta{ grid-area: meta; }
  .page-model .profile-actions{
    grid-area: act;
    justify-content: flex-start;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
  }
  .page-model .profile-actions .cta-button{
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex: 0 0 auto;
  }
  .page-model .profile-actions .btn{
    padding: 7px 10px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex: 0 0 auto;
    text-decoration: none !important;
  }

  /* Pestañas compactas */
  .page-model .tabs{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
  }
  .page-model .tabs .chip,
  .page-model .tabs .chip-nav{
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    flex: 0 0 auto;
  }
}

/* Desktop: acciones debajo (sin tocar móvil) */
@media (min-width: 769px){
  .page-model .profile-head{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "ava meta"
      "act act";
    column-gap: 18px;
    row-gap: 10px;
  }
  .page-model .avatar-xl{ grid-area: ava; }
  .page-model .profile-meta{ grid-area: meta; }
  .page-model .profile-actions{
    grid-area: act;
    justify-content: flex-start;
  }
}

/* ===== BIO EXPANDIBLE (nuevo, sin clamp) ===== */
.page-model .bio-wrap { max-width: 780px; }
.page-model .bio {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.35;
  overflow: hidden;
  transition: max-height .25s ease;
}
/* 2 líneas ≈ 2*1.35em */
.page-model .bio.is-collapsed{ max-height: 2.7em; }
.page-model .bio.is-expanded { max-height: 2000px; }
.page-model .bio-toggle{
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-gold);
  font-weight: 700;
  cursor: pointer;
}
.page-model .bio-toggle:focus{ outline: none; }
.page-model .bio-toggle:hover{ text-decoration: underline; }

/* ===== CARDS LEGADAS (compatibilidad mínima) ===== */
.page-model .model-card{
  scroll-snap-align:start; width:100%; background: var(--color-dark);
  border-radius:10px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,.3);
  transition: transform .3s; border:1px solid var(--color-gold);
}
.page-model .model-card:hover{ transform: translateY(-5px); }
.page-model .model-card .thumb{ aspect-ratio: 4 / 3; height:auto; overflow:hidden; background: linear-gradient(#0B0C10,#1A1B20) }
.page-model .model-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.page-model .model-card.is-locked .thumb img{ filter: blur(10px) brightness(0.65); transform: scale(1.05) }
.page-model .model-card.is-locked .thumb::after{
  content:"Bloqueado"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:8px 14px; background:rgba(0,0,0,.65); color:#fff; border:1px solid var(--color-gold);
  border-radius:999px; font-weight:700; letter-spacing:.3px;
}

/* ===== FOOTER LOCAL ===== */
.page-model .footer{ padding:24px; text-align:center; color:#aaa }
/* Frase gancho bajo el nombre */
.page-model .profile-hook{
  color: var(--color-gold);
  font-weight: 800;
  letter-spacing: .2px;
  margin: .2rem 0 .35rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.30);
}
@media (min-width:769px){ .page-model .profile-hook{ font-size:1.25rem; } }
@media (max-width:768px){ .page-model .profile-hook{ font-size:1rem; } }

/* (Opcional) Estilos de la bio con <details> */
.page-model details.bio-box{ max-width:780px; padding:0; border:0; }
.page-model details.bio-box > summary{
  list-style:none; display:flex; flex-direction:column; gap:6px; cursor:pointer;
}
.page-model details.bio-box > summary::-webkit-details-marker{ display:none; }
.page-model .bio-text{ margin:0; color:var(--color-muted); line-height:1.35; }
.page-model .bio-short{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-height:calc(1.35em * 2);
}
.page-model details.bio-box[open] .bio-short{ display:none; }
.page-model details.bio-box:not([open]) .bio-full{ display:none; }
.page-model .bio-toggle{ color:var(--color-gold); font-weight:700; user-select:none; }
.page-model .bio-toggle:hover{ text-decoration:underline; }
.page-model .btn-more{ display:inline; }
.page-model .btn-less{ display:none; }
.page-model details.bio-box[open] .btn-more{ display:none; }
.page-model details.bio-box[open] .btn-less{ display:inline; }