@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
:root{--bg:#FCF1DF;--fg:#2B3335;--accent:#C97A4A}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
.header{background-image:url('images/banner.jpg');background-size:cover;background-position:center;padding:4rem 1rem;color:var(--bg);position:relative}
.header::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(43,51,53,0.35), rgba(43,51,53,0.15));}
.header .inner{position:relative;z-index:2;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.brand{display:flex;align-items:center;gap:0.75rem}
.brand img{max-width:350px;width:100%;height:auto}
.brand h1{margin:0;font-size:1.25rem;color:var(--bg)}
.controls{display:flex;gap:0.5rem;align-items:center}
.play-btn{background:var(--accent);border:none;color:white;padding:0.6rem 1rem;border-radius:8px;font-weight:600;cursor:pointer}
.main{max-width:1000px;margin:1.25rem auto;padding:1rem}
.card{background:white;padding:1.5rem;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,0.06);margin-bottom:1.25rem}
.footer{text-align:center;padding:1rem;font-size:0.9rem;color:#666}
@media (max-width:768px){ .header{padding:1.5rem 0.5rem} .brand h1{font-size:1rem} .brand img{max-width:350px;width:100%;height:auto} .controls{gap:0.4rem} }

.play-btn{font-size:1rem;padding:0.8rem 1.4rem;}
.play-btn:hover{background-color:#a95f38;transition:background-color 0.2s ease-in-out}

a {
  color: #DA853E;
  text-decoration: none; /* opcional: quita el subrayado */
}

a:hover,
a:focus {
  color: #b56d32; /* un tono un poco más oscuro al pasar el mouse (opcional) */
  text-decoration: underline; /* opcional: muestra subrayado al pasar el mouse */
}

#playerWrap{font-size:0.95rem}
#btnPlay{font-size:1rem;padding:0.7rem 1.2rem}


/* v5: logo fluid + mobile scaling */
.brand img{max-width:clamp(160px,40vw,350px)}
@media (max-width:768px){
  .brand img{max-width:240px}
}
@media (max-width:480px){
  .brand img{max-width:180px}
}

/* Ajustes tipográficos sólo para móviles */
@media (max-width: 768px) {
  body {
    font-size: 0.9rem; /* antes 1rem (~16px) → ahora ~14.4px */
    line-height: 1.5;
  }

  p {
    font-size: 0.95em; /* suaviza ligeramente el tamaño dentro del body */
  }

  h3 {
    font-size: 1.1rem; /* títulos más proporcionados */
  }

  .play-btn {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
  }

  #playerWrap {
    font-size: 0.85rem;
  }

  #btnPlay {
    font-size: 0.9rem;
  }

  /* Opcional: margen menor entre secciones */
  .card {
    padding: 1rem;
  }
}