/* Componentes compartidos — Brujula de Bienestar */
:root{
  --bb-teal: rgb(90,127,128);
  --bb-teal-dark: rgb(74,113,114);
  --bb-sage: rgb(139,165,166);
  --bb-pale: rgb(239,245,245);
  --bb-terra: rgb(196,146,106);
  --bb-ink: rgb(44,58,58);
  --bb-body: rgb(75,90,90);
}

/* Botones */
.bb-btn{
  display:inline-block; cursor:pointer; font-family:inherit;
  background:#fff; color:var(--bb-teal-dark);
  padding:14px 26px; border-radius:999px;
  font-weight:600; font-size:16px; text-align:center;
  border:2px solid #fff; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.bb-btn:hover{background:var(--bb-pale);}
.bb-btn-solid{background:var(--bb-teal); color:#fff; border-color:var(--bb-teal);}
.bb-btn-solid:hover{background:var(--bb-teal-dark); border-color:var(--bb-teal-dark);}
.bb-btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,0.85);}
.bb-btn-ghost:hover{background:rgba(255,255,255,0.14);}
.bb-btn-outline{background:transparent; color:var(--bb-teal-dark); border-color:var(--bb-teal);}
.bb-btn-outline:hover{background:var(--bb-pale);}
.bb-btn-wa{background:#25d366; color:#fff; border-color:#25d366;}
.bb-btn-wa:hover{background:#1ebe5a; border-color:#1ebe5a;}
.bb-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:28px;}

/* Boton "Pedi turno" dentro del menu */
nav a.bb-nav-cta{
  background:#fff; color:var(--bb-teal-dark); font-weight:600;
  padding:9px 18px; border-radius:999px;
}
nav a.bb-nav-cta:hover{background:var(--bb-pale); color:var(--bb-teal-dark);}

/* WhatsApp flotante */
.bb-wa{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:#25d366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.28); transition:transform .2s ease;
}
.bb-wa:hover{transform:scale(1.07);}
.bb-wa svg{width:32px; height:32px; fill:#fff;}

/* Hero de paginas internas */
.bb-hero{background:var(--header-bg); color:#fff; padding:80px 16px 64px; text-align:center;}
.bb-hero h1{color:#fff; margin-bottom:16px;}
.bb-hero p{max-width:680px; margin:0 auto; font-size:19px;}

/* Secciones */
.bb-section{max-width:1100px; margin:0 auto; padding:72px 16px;}
.bb-section.alt{max-width:none; background:var(--bb-pale);}
.bb-section.alt > .bb-in{max-width:1100px; margin:0 auto;}
.bb-section h2{color:var(--bb-ink); margin-bottom:14px;}
.bb-lead{max-width:720px; font-size:18px; color:var(--bb-body); margin-bottom:40px;}
.bb-center{text-align:center;}
.bb-center .bb-lead{margin-left:auto; margin-right:auto;}

.bb-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px;}
.bb-card{
  background:var(--bb-pale); border-radius:16px; padding:28px;
  display:flex; flex-direction:column;
}
.bb-section.alt .bb-card{background:#fff;}
.bb-card h3{color:var(--bb-ink); margin-bottom:10px; font-size:22px;}
.bb-card p{color:var(--bb-body); font-size:16px;}
.bb-card .bb-btn{margin-top:auto; align-self:flex-start;}
.bb-card p + .bb-btn{margin-top:20px;}
.bb-tag{
  display:inline-block; align-self:flex-start; margin-bottom:12px;
  font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--bb-teal-dark); background:rgba(90,127,128,0.12);
  padding:5px 12px; border-radius:999px;
}

/* Pasos */
.bb-steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px; counter-reset:step;}
.bb-step{background:#fff; border-radius:16px; padding:28px 24px; position:relative;}
.bb-step::before{
  counter-increment:step; content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--bb-teal); color:#fff; font-weight:700; margin-bottom:14px;
}
.bb-step h3{font-size:19px; color:var(--bb-ink); margin-bottom:6px;}
.bb-step p{font-size:15.5px; color:var(--bb-body);}

/* Profesionales */
.bb-pros{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:28px;}
.bb-pro{background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,0.08); display:flex; flex-direction:column;}
.bb-pro img{width:100%; aspect-ratio:16/10; object-fit:cover;}
.bb-pro .bb-body{padding:26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.bb-pro h3{color:var(--bb-ink); font-size:24px;}
.bb-pro .bb-role{font-size:14px; font-weight:600; color:var(--bb-teal-dark);}
.bb-pro p{color:var(--bb-body); font-size:16px;}
.bb-pro .bb-actions{justify-content:flex-start; margin-top:12px;}
.bb-pro .bb-actions .bb-btn{padding:12px 20px; font-size:15px;}

/* Banda de contacto */
.bb-band{background:var(--bb-teal); color:#fff; padding:64px 16px; text-align:center;}
.bb-band h2{color:#fff; font-size:34px; margin-bottom:12px;}
.bb-band p{max-width:620px; margin:0 auto; font-size:18px; opacity:.95;}
@media (max-width:860px){ .bb-band h2{font-size:26px;} }

/* Formulario */
.bb-form{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:16px; text-align:left;}
.bb-form label{display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:600; color:var(--bb-ink);}
.bb-form input, .bb-form select, .bb-form textarea{
  font-family:inherit; font-size:16px; padding:13px 14px;
  border:1px solid #c9d6d6; border-radius:10px; background:#fff; color:var(--ink);
}
.bb-form textarea{min-height:130px; resize:vertical;}
.bb-form input:focus, .bb-form select:focus, .bb-form textarea:focus{outline:2px solid var(--bb-sage); border-color:var(--bb-sage);}
.bb-form .bb-btn{align-self:flex-start;}
.bb-form .bb-hp{position:absolute; left:-9999px;}
.bb-small{font-size:13px; color:#5d6b6b;}

/* Datos de contacto */
.bb-contact-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; margin-top:8px;}
.bb-contact-list .item{background:var(--bb-pale); border-radius:14px; padding:22px;}
.bb-contact-list h3{font-size:18px; color:var(--bb-ink); margin-bottom:8px;}
.bb-contact-list p, .bb-contact-list a{font-size:16px; color:var(--bb-body);}
.bb-contact-list a:hover{text-decoration:underline;}

/* Ajustes para paginas con CSS propio */
nav ul{align-items:center;}
footer .footer-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; font-size:14px;}
footer .footer-links a{opacity:.9;}
footer .footer-links a:hover{opacity:1; text-decoration:underline;}
@media (max-width:1100px){
  nav ul{gap:18px;}
  nav a{font-size:15px;}
}
@media (max-width:860px){
  nav.mobile-open ul{align-items:flex-start; gap:20px;}
}

/* Reproductor */
.bb-embed{max-width:680px; margin:0 auto;}
.bb-embed iframe{width:100%; height:351px; border:0; border-radius:12px;}