/* ============================================================
   TAO SPA — ESTILOS DE PÁGINAS INTERNAS
   Lo que comparten masajes, terapias, láser, cosmetología,
   membresías y cumpleaños: la barra de arriba, el hero con foto,
   el cierre de "reserva" y el pie de página.
   El home (index.html) NO usa este archivo, tiene lo suyo.
   ============================================================ */


/* ------------------------------------------------------------
   BARRA SUPERIOR (fija, con fondo sólido)
   ------------------------------------------------------------ */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(26,16,11,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.nav-logo{height:60px}
.nav-back{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crema-dim)}
.nav-back:hover{color:var(--gold-2)}


/* ------------------------------------------------------------
   HERO INTERNO (foto de fondo + título)
   Cada página pone SU foto en .mhead::before dentro de su propio bloque.
   ------------------------------------------------------------ */
.mhead{position:relative;padding:150px 24px 78px;text-align:center;overflow:hidden}
.mhead::before{content:'';position:absolute;inset:0;z-index:0}   /* la foto la define cada página */
.mhead::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(26,16,11,.7),rgba(36,22,16,.55) 40%,var(--espresso));
}
.mhead>div{position:relative;z-index:2;margin:0 auto}
.mhead h1{
  font-family:'Playfair Display',serif;font-style:italic;font-weight:400;
  font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:1.06;margin-top:22px;color:var(--crema);
}
.mhead h1 em{color:var(--nude-2)}
.mhead p{max-width:560px;margin:20px auto 0;color:var(--crema-dim);font-weight:300}
.mhead .note{margin-top:18px;color:var(--gold-2)}


/* ------------------------------------------------------------
   SECCIÓN DE CONTENIDO
   ------------------------------------------------------------ */
.msec{padding:70px 0 0}


/* ------------------------------------------------------------
   CIERRE — el bloque de "reserva por WhatsApp" al final
   ------------------------------------------------------------ */
.mcta{text-align:center;padding:80px 24px 96px}
.mcta h2{
  font-family:'Playfair Display',serif;font-style:italic;font-weight:500;
  font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:8px;
}
.mcta p{color:var(--crema-dim);margin-bottom:26px}


/* ------------------------------------------------------------
   PIE DE PÁGINA
   ------------------------------------------------------------ */
footer.foot{background:#180e09;padding:44px 0 34px;text-align:center;border-top:1px solid var(--line)}
footer.foot img{height:140px;margin:0 auto 14px;opacity:.95}
footer.foot .fcopy{color:var(--crema-faint);font-size:.72rem;margin-top:12px}


/* ------------------------------------------------------------
   ACCIONES DE LA BARRA SUPERIOR
   El "volver" y el botón de 20% conviven a la derecha.
   ------------------------------------------------------------ */
.nav-actions{display:flex;align-items:center;gap:18px}

@media(max-width:560px){
  .nav-actions{gap:12px}
  .nav-back .nb-txt{display:none}   /* en celular queda solo la flecha */
  .nav-logo{height:48px}
}