/* ═══════════════════════════════════════════
   SERVICIOS PAGE — estilos específicos
   Hereda de style-nuvica.css
═══════════════════════════════════════════ */

/* ── PAGE HERO ── */
.page-hero {
  position: relative;
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.page-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
.page-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(245,240,230,.96) 0%, rgba(245,240,230,.82) 45%, rgba(245,240,230,.45) 75%, rgba(245,240,230,.25) 100%),
    linear-gradient(to top, rgba(245,240,230,.9) 0%, transparent 35%);
}
.page-hero-content {
  position: relative; z-index: 1;
  padding: 56px 0 36px;
  max-width: 620px;
}
/* Cabecera de página interior: no compite con el hero de la home.
   Sin esto hereda clamp(2.8rem, 5.5vw, 5rem) y sale a 70 px. */
.page-hero-content .h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  margin-bottom: 14px;
}
.page-hero-content .h1-sub { margin-top: 10px; font-size: clamp(14px, 1.3vw, 16px); }
.page-hero-content .lead { margin-bottom: 0; }

/* ── SIDEBAR FIJA — position fixed ── */
.svc-sidebar {
  display: none;
}

.svc-sidebar-inner {
  position: fixed;
  top: 140px;   /* empieza debajo del header y del hero */
  left: 20px;
  transform: none;
  z-index: 40;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(44,24,16,.10);
  border-radius: 20px;
  padding: 18px 14px 14px;
  box-shadow: 0 20px 60px rgba(44,24,16,.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 220px;
}
.svc-sidebar-title {
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(44,24,16,.4);
  font-weight: 600;
  margin: 0 0 8px 4px;
}
.svc-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: .86rem;
  font-weight: 500;
  /* El estado activo pasa a 600 y la etiqueta más larga ("Medicina Estética")
     dejaba de caber: la fila se partía en dos al pulsarla. Con nowrap y el
     ancho de abajo, ninguna etiqueta parte, esté activa o no. */
  white-space: nowrap;
  color: rgba(44,24,16,.68);
  transition: background .2s, color .2s, transform .2s;
  border: 1px solid transparent;
}
.svc-sidebar-link:hover {
  background: rgba(184,149,106,.09);
  color: var(--green-ink);
  transform: translateX(3px);
}
.svc-sidebar-link.active {
  background: rgba(184,149,106,.13);
  color: var(--green-ink);
  border-color: rgba(184,149,106,.22);
  font-weight: 600;
}
.svc-sidebar-emoji {
  font-size: .95rem;
  width: 22px;
  text-align: center;
  flex: 0 0 auto;
}
.svc-sidebar-cta {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
  font-size: .84rem;
  padding: 10px 14px;
}
@media (min-width: 1024px) {
  .svc-sidebar { display: block; }
  .services-main { margin-left: 260px; }

  .svc-sidebar-inner{
    position: fixed;
    top: 140px;
    left: 20px;
    width: 220px; /* cabe la etiqueta más larga en negrita */
    z-index: 40;
  }
}

/* Cuando el footer/CTA entra en pantalla, escondemos el menú */
body.footer-active .svc-sidebar-inner{
  opacity: 0;
  transform: translate3d(-18px, 12px, 0) scale(.985);
  filter: blur(6px);
  pointer-events: none;
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.2,.9,.2,1),
    filter .35s ease;
}

/* ── SERVICE DETAIL SECTIONS ── */
.svc-detail {
  padding: 80px 0;
  border-bottom: 1px solid rgba(44,24,16,.07);
}
.svc-detail.alt {
  background: rgba(255,255,255,.38);
}
.svc-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.svc-detail-grid.reverse .svc-detail-img { order: -1; }

/* Label row: number + tag */
.svc-detail-label {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.svc-num {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(44,24,16,.18);
  font-family: var(--font-display);
  letter-spacing: -.02em;
  min-width: 28px;
}

/* Service list */
.svc-list {
  display: grid; gap: 12px;
  margin: 20px 0 28px;
  list-style: none; padding: 0;
}
.svc-list.two-col {
  grid-template-columns: 1fr 1fr;
}
.svc-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: .95rem;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(44,24,16,.08);
  line-height: 1.45;
}
.svc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); flex: 0 0 auto; margin-top: 6px;
}

/* Price tag */
.svc-price-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(184,149,106,.10);
  border: 1px solid rgba(184,149,106,.18);
  font-size: .86rem; font-weight: 600;
  color: var(--green-ink); margin-bottom: 20px;
}
/* El emoji se sustituyó por un SVG del juego propio (ver inc/icons.php):
   se dibujaba distinto en cada sistema y era el único que quedaba. */
.svc-price-tag .mova-icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* Image with floating badge */
.svc-detail-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.svc-detail-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.svc-detail-img:hover img { transform: scale(1.03); }

.svc-img-badge {
  position: absolute; bottom: 16px; left: 16px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 14px; padding: 10px 14px;
  box-shadow: 0 8px 28px rgba(44,24,16,.14);
}
.svc-img-badge.right { left: auto; right: 16px; }
.svc-img-badge-icon { font-size: 1.3rem; }
.svc-img-badge-title { font-weight: 700; font-size: .9rem; color: var(--text); line-height: 1.2; }
.svc-img-badge-sub { font-size: .75rem; color: var(--muted); }

/* ── MEDICINA ESTÉTICA GRID ── */
.medicina-section { background: rgba(255,255,255,.38); }
.medicina-header { max-width: 700px; margin-bottom: 40px; }

.medicina-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}
.precio-card {
  display: flex; align-items: flex-start; gap: 16px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(44,24,16,.09);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.precio-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.precio-card.highlight {
  background: linear-gradient(135deg, rgba(184,149,106,.08), rgba(184,149,106,.03));
  border-color: rgba(184,149,106,.22);
  grid-column: span 1;
}
.precio-icon {
  font-size: 1.6rem;
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(184,149,106,.10);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.precio-body { flex: 1; }
.precio-body h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; }
.precio-body p { margin: 0; font-size: .88rem; color: var(--muted); }
.precio-tag {
  flex: 0 0 auto;
  font-weight: 700; font-size: .95rem;
  color: var(--green-ink);
  background: rgba(184,149,106,.10);
  border: 1px solid rgba(184,149,106,.18);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  align-self: flex-start;
}

/* ── CTA BAND ── */
.cta-band {
  padding: 80px 50px;
  background: linear-gradient(135deg, var(--green), #A78358);
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-text .h2 { color: #fff; margin-bottom: 10px; }
.cta-text .lead { color: rgba(255,255,255,.8); margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn.primary {
  background: #fff;
  color: var(--green-ink);
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
}
.cta-band .btn.primary:hover { box-shadow: 0 10px 32px rgba(0,0,0,.22); }
.cta-band .btn {
  background: rgba(255,255,255,.15);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.cta-band .btn:hover { background: rgba(255,255,255,.25); }

/* ── RESPONSIVE ── */
@media (min-width: 900px) {
  .svc-detail-grid { grid-template-columns: 1fr 1fr; }
  .svc-detail-grid.reverse .svc-detail-img { order: 0; }
  .page-hero-content { padding: 76px 0 40px; }
}

@media (max-width: 600px) {
  .svc-list.two-col { grid-template-columns: 1fr; }
  .precio-card { flex-wrap: wrap; }
  .precio-tag { align-self: auto; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}


/* Estado oculto (antes de pasar el hero) */
body:not(.sidebar-ready) .svc-sidebar-inner{
  opacity: 0;
  transform: translate3d(-18px,10px,0) scale(.98);
  filter: blur(6px);
  pointer-events: none;
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.2,.9,.2,1),
    filter .35s ease;
}

/* Estado visible */
body.sidebar-ready .svc-sidebar-inner{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  transition:
    opacity .45s cubic-bezier(.2,.9,.2,1),
    transform .55s cubic-bezier(.2,.9,.2,1),
    filter .55s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform, filter;
}

/* Estado base (links ocultos) */
.svc-sidebar-inner .svc-sidebar-link{
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .35s cubic-bezier(.2,.9,.2,1),
    transform .45s cubic-bezier(.2,.9,.2,1);
}

/* Cuando aparece el sidebar */
body.sidebar-ready .svc-sidebar-inner .svc-sidebar-link{
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--d,0ms);
}

/* Cuando desaparece */
body:not(.sidebar-ready) .svc-sidebar-inner .svc-sidebar-link{
  opacity: 0;
  transform: translateY(12px);
  transition-delay: calc(var(--d,0ms) / 3);
}

/* Footer compacto */
.footer{
  padding: 32px 0 18px;
}

.footer-grid{
  gap: 18px;
}

.footer p{
  margin: 6px 0;
}

/* FIX: si el reveal no se ejecuta en esta página, no ocultes el contenido */
.reveal{ opacity:1 !important; transform:none !important; }
/* ── NUMERACIÓN AUTOMÁTICA DE TRATAMIENTOS ──────────────────────────
   La numeraba una cifra escrita a mano en cada sección. Al comentar
   Medicina Estética (que era la 08) la serie saltaba de 07 a 09.
   Ahora la cuenta el navegador sobre las secciones que realmente se
   pintan, así que comentar o reactivar un bloque no la rompe. */
main { counter-reset: tratamiento; }
.svc-detail { counter-increment: tratamiento; }
.svc-num::before { content: counter(tratamiento, decimal-leading-zero); }

/* Enlace a la landing del tratamiento */
.svc-mas { margin: 14px 0 0; font-size: .9375rem; }
.svc-mas a { color: var(--green-ink); font-weight: 600; }
.svc-mas a:hover { text-decoration: underline; }

/* Botón a la landing del tratamiento */
.btn.svc-mas { margin-left: 10px; }
@media (max-width: 560px) {
  .btn.svc-mas { margin-left: 0; margin-top: 10px; }
}