/* ============ Breadcrumbs ============ */
.breadcrumbs-bar{padding:130px 32px 0}
.breadcrumbs{
  max-width:var(--container-max);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font:400 13px var(--font-sans);
  color:var(--ebony);
}
.breadcrumbs a{color:var(--ebony);text-decoration:none}
.breadcrumbs a:hover{color:var(--black);text-decoration:underline}
.breadcrumbs__sep{color:var(--border-subtle)}
.breadcrumbs__current{color:var(--black);font-weight:600}

@media (max-width:960px){
  .breadcrumbs-bar{padding:112px 32px 0}
}
@media (max-width:640px){
  .breadcrumbs-bar{padding:100px 20px 0}
}

/* Cuando la barra va debajo de un hero a página completa (no pegada al
   header fijo), no necesita el gran padding-top que despeja la barra fija. */
.breadcrumbs-bar--plain{padding:28px 32px 0}
@media (max-width:640px){
  .breadcrumbs-bar--plain{padding:20px 20px 0}
}

/* ============ Guía (texto + tarjeta de datos clave) ============ */
.guide{display:grid;grid-template-columns:1.3fr 0.9fr;gap:56px;align-items:start}
.guide__content{display:flex;flex-direction:column;gap:16px}
.guide__text{margin:0;font:400 17px/1.7 var(--font-sans);color:var(--ebony)}
.guide__facts{
  background:var(--surface-muted);
  border-radius:var(--radius-md);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.guide__facts-title{margin:0;font:700 16px var(--font-sans);color:var(--black)}
.fact-list{margin:0;display:flex;flex-direction:column;gap:14px}
.fact-list__row{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border-subtle);
}
.fact-list__row:last-child{border-bottom:none;padding-bottom:0}
.fact-list__row dt{margin:0;font:600 12px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ebony)}
.fact-list__row dd{margin:0;font:600 15px var(--font-sans);color:var(--black)}
.guide__facts-link{font:600 14px var(--font-sans);color:var(--beige);text-decoration:none}
.guide__facts-link:hover{color:var(--black)}

@media (max-width:960px){
  .guide{grid-template-columns:1fr;gap:32px}
}

/* ============ FAQ (acordeón nativo <details>/<summary>) ============ */
.faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface-card);border-radius:var(--radius-md);padding:4px 24px;box-shadow:var(--shadow-soft)}
.faq-item__question{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 0;
  font:700 16px/1.4 var(--font-sans);
  color:var(--black);
}
.faq-item__question::-webkit-details-marker{display:none}
.faq-item__question::after{
  content:'+';
  font:400 24px var(--font-sans);
  color:var(--beige);
  flex-shrink:0;
  transition:transform var(--duration-fast) var(--ease-standard);
}
.faq-item[open] .faq-item__question::after{transform:rotate(45deg)}
.faq-item__answer{margin:0;padding:0 0 20px;font:400 15px/1.65 var(--font-sans);color:var(--ebony)}
.faq-item__answer p{margin:0}

@media (max-width:640px){
  .faq-item{padding:4px 18px}
}

/* ============ Detalle de tratamiento (contenido + ficha lateral) ============ */
.treatment-detail{display:grid;grid-template-columns:1.3fr 0.9fr;gap:56px;align-items:start}
.treatment-detail__body{display:flex;flex-direction:column;gap:40px}
.treatment-detail__block{display:flex;flex-direction:column;gap:14px}
.treatment-detail__block h2{margin:0;font:700 22px var(--font-sans);color:var(--black)}
.treatment-detail__text{margin:0;font:400 17px/1.7 var(--font-sans);color:var(--ebony)}

.treatment-sidebar{
  position:sticky;
  top:130px;
  background:var(--surface-muted);
  border-radius:var(--radius-md);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.treatment-sidebar .btn{width:100%}
.treatment-sidebar__note{margin:0;font:400 13px/1.5 var(--font-sans);color:var(--ebony)}
.treatment-sidebar__back{font:600 14px var(--font-sans);color:var(--beige);text-decoration:none}
.treatment-sidebar__back:hover{color:var(--black)}

/* Tira de datos rápidos (duración, anestesia...) dentro de un bloque de texto */
.quick-facts{display:flex;flex-wrap:wrap;gap:28px;margin-top:6px;padding:20px 24px;background:var(--surface-muted);border-radius:var(--radius-md)}
.quick-facts__item{display:flex;flex-direction:column;gap:2px}
.quick-facts__value{font:700 16px var(--font-sans);color:var(--black)}
.quick-facts__label{font:600 11px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ebony)}

/* Lista de beneficios con icono, más fácil de escanear que una lista de guiones */
.benefit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.benefit-list li{display:flex;gap:14px;align-items:flex-start;font:400 16px/1.55 var(--font-sans);color:var(--black)}
.benefit-list__icon{flex-shrink:0;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--nude);color:var(--beige);display:flex;align-items:center;justify-content:center;font:700 13px var(--font-sans)}

/* Recuperación como bloques por etapa en vez de lista de viñetas */
.recovery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.recovery-grid__item{padding:0 20px;border-left:2px solid var(--border-subtle)}
.recovery-grid__item:first-child{padding-left:0;border-left:none}
.recovery-grid__time{margin:0 0 6px;font:700 20px var(--font-sans);color:var(--black)}
.recovery-grid__text{margin:0;font:400 14px/1.55 var(--font-sans);color:var(--ebony)}

@media (max-width:960px){
  .treatment-detail{grid-template-columns:1fr;gap:32px}
  .treatment-sidebar{position:static}
}

@media (max-width:640px){
  .quick-facts{gap:20px;padding:16px 20px}
  .recovery-grid{grid-template-columns:1fr;gap:20px}
  .recovery-grid__item{padding:0 0 0 18px;border-left:2px solid var(--border-subtle)}
  .recovery-grid__item:first-child{padding-left:18px;border-left:2px solid var(--border-subtle)}
}

/* ============ Galería antes/después ============ */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,300px));justify-content:center;gap:20px}
.gallery-grid__item{border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:1/1;background:var(--nude)}
.gallery-grid__item img{width:100%;height:100%;object-fit:cover}
.gallery-note{margin:28px auto 0;max-width:640px;text-align:center;font:400 13px/1.6 var(--font-sans);color:var(--ebony)}
