/* ══════════════════════════════════════════════════════
   TRATAMIENTOS Y PRECIOS — Dra. Julieta Rivero
   Misma paleta de marca que el resto de páginas de tratamiento.
   ══════════════════════════════════════════════════════ */

:root {
  --bg:         #16140f;
  --bg-dark:    #0f0e0a;
  --bg-mid:     #221f17;
  --bg-deep:    #0c0b08;
  --gold:       #c4a352;
  --gold-dim:   rgba(196,163,82,0.35);
  --accent:     #e8dcc0;
  --text:       #f5f1e8;
  --text-sec:   #d8d2c4;
  --text-dim:   rgba(245,241,232,0.45);
  --border:     rgba(196,163,82,0.18);
  --border-l:   rgba(245,241,232,0.1);
  --hero-glow:  rgba(196,163,82,0.10);
  --cta-stripe: rgba(12,11,8,0.06);
  --cta-border: rgba(12,11,8,0.35);
}

/* ── Hero ─────────────────────────────────────────── */
.tr-hero{ background:var(--bg-dark); padding:140px 80px 90px; text-align:center;
  border-bottom:0.5px solid var(--border); }
.tr-eyebrow{ display:block; font-family:var(--font-body); font-size:var(--text-micro);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--gold);
  margin-bottom:26px; }
.tr-hero h1{ font-family:var(--font-display); font-weight:300; font-size:var(--text-hero-s);
  line-height:var(--lh-heading); color:var(--text); letter-spacing:var(--ls-tight);
  max-width:880px; margin:0 auto; }
.tr-hero h1 em{ font-style:italic; color:var(--gold); }

/* ── Bloques de texto ─────────────────────────────── */
.tr-bloque{ background:var(--bg); padding:80px; }
.tr-bloque-alt{ background:var(--bg-dark); }
.tr-bloque > *{ max-width:760px; margin-left:auto; margin-right:auto; }
.tr-bloque h2{ font-family:var(--font-display); font-weight:300; font-size:var(--text-2xl);
  color:var(--gold); line-height:var(--lh-heading); margin-bottom:28px;
  letter-spacing:var(--ls-tight); }
.tr-bloque p{ font-family:var(--font-body); font-weight:300; font-size:var(--text-body);
  line-height:var(--lh-relaxed); color:var(--text-sec); letter-spacing:var(--ls-body);
  margin-bottom:22px; }
.tr-bloque p:last-child{ margin-bottom:0; }
.tr-destacado{ border-left:2px solid var(--gold); padding-left:28px;
  color:var(--text) !important; font-size:var(--text-md) !important; }

/* ── Formación ────────────────────────────────────── */
.tr-formacion{ list-style:none; padding:0; max-width:760px; margin:0 auto; }
.tr-formacion li{ padding:24px 0; border-bottom:0.5px solid var(--border-l); }
.tr-formacion li:last-child{ border-bottom:none; }
.tr-form-tema{ display:block; font-family:var(--font-body); font-size:var(--text-micro);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gold);
  margin-bottom:9px; }
.tr-form-desc{ display:block; font-family:var(--font-body); font-weight:300;
  font-size:var(--text-sm); line-height:var(--lh-body); color:var(--text-sec); }
.tr-form-desc a{ color:var(--gold); text-decoration:none;
  border-bottom:0.5px solid var(--gold-dim); white-space:nowrap; }
.tr-form-desc a:hover{ border-bottom-color:var(--gold); }

/* ── CTA ──────────────────────────────────────────── */
.tr-cta{ background:var(--gold); color:var(--bg-deep); padding:90px 80px; text-align:center; }
.tr-cta h2{ font-family:var(--font-display); font-weight:300; font-size:var(--text-2xl);
  margin-bottom:14px; letter-spacing:var(--ls-tight); }
.tr-cta p{ font-family:var(--font-body); font-weight:300; font-size:var(--text-sm);
  margin-bottom:34px; letter-spacing:var(--ls-body); }
.tr-cta-boton{ display:inline-block; font-family:var(--font-body); font-size:var(--text-micro);
  letter-spacing:var(--ls-caps); text-transform:uppercase; text-decoration:none;
  color:var(--gold); background:var(--bg-deep); padding:17px 44px; transition:opacity .2s; }
.tr-cta-boton:hover{ opacity:.86; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width:860px){
  .tr-hero{ padding:110px 32px 64px; }
  .tr-hero h1{ font-size:var(--text-xl); }
  .tr-bloque{ padding:56px 32px; }
  .tr-bloque h2{ font-size:var(--text-lg); }
  .tr-bloque p{ font-size:var(--text-sm); }
  .tr-destacado{ padding-left:20px; }
  .tr-cta{ padding:64px 32px; }
}
@media (max-width:480px){
  .tr-hero{ padding:96px 20px 52px; }
  .tr-bloque{ padding:44px 20px; }
  .tr-cta{ padding:52px 20px; }
  .tr-cta-boton{ display:block; }
}


/* ── Tabla de zonas y precios ─────────────────────── */
.tr-nota-tabla{ font-size:var(--text-xs) !important; color:var(--text-dim) !important;
  margin-bottom:26px !important; }
.tr-tabla-scroll{ overflow-x:auto; max-width:860px; margin:0 auto; }
.tr-tabla{ width:100%; border-collapse:collapse; min-width:560px;
  font-family:var(--font-body); font-weight:300; }
.tr-tabla th{ text-align:left; padding:0 0 13px; font-size:var(--text-micro);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gold);
  border-bottom:0.5px solid var(--border); font-weight:400; }
.tr-tabla td{ padding:18px 0; border-bottom:0.5px solid var(--border-l);
  font-size:var(--text-sm); color:var(--text-sec); vertical-align:top; }
.tr-tabla tr:last-child td{ border-bottom:none; }
.tr-zona{ color:var(--text) !important; padding-right:26px !important; white-space:nowrap; }
.tr-desc{ padding-right:26px !important; }
.tr-dur{ color:var(--text-dim) !important; white-space:nowrap; padding-right:26px !important; }
.tr-precio{ color:var(--gold) !important; text-align:right; white-space:nowrap; }

/* ── FAQ ──────────────────────────────────────────── */
.tr-faq-item{ max-width:760px; margin:0 auto; border-bottom:0.5px solid var(--border-l); }
.tr-faq-item:last-of-type{ border-bottom:none; }
.tr-faq-item summary{ cursor:pointer; list-style:none; padding:22px 34px 22px 0;
  position:relative; font-family:var(--font-body); font-size:var(--text-sm);
  color:var(--text); letter-spacing:var(--ls-body); }
.tr-faq-item summary::-webkit-details-marker{ display:none; }
.tr-faq-item summary::after{ content:'+'; position:absolute; right:4px; top:20px;
  color:var(--gold); font-size:20px; font-weight:300; transition:transform .2s; }
.tr-faq-item[open] summary::after{ content:'–'; }
.tr-faq-item p{ padding:0 0 24px; margin:0 !important; font-size:var(--text-sm) !important; }
.tr-destacado a{ color:var(--gold); text-decoration:none;
  border-bottom:0.5px solid var(--gold-dim); }

@media (max-width:860px){
  .tr-tabla{ min-width:480px; }
  .tr-tabla td{ font-size:var(--text-xs); padding:14px 0; }
}


/* ── Familias ─────────────────────────────────────── */
.tr-fam{ background:var(--bg); padding:72px 80px; }
.tr-fam-alt{ background:var(--bg-dark); }
.tr-fam h2{ font-family:var(--font-display); font-weight:300; font-size:var(--text-2xl);
  color:var(--gold); line-height:var(--lh-heading); letter-spacing:var(--ls-tight);
  max-width:860px; margin:0 auto 12px; }
.tr-fam-intro{ font-family:var(--font-body); font-weight:300; font-size:var(--text-xs);
  line-height:var(--lh-body); color:var(--text-dim); letter-spacing:var(--ls-body);
  max-width:860px; margin:0 auto 30px; }
.tr-tabla-scroll{ overflow-x:auto; max-width:860px; margin:0 auto; }
.tr-tabla{ width:100%; border-collapse:collapse; min-width:520px;
  font-family:var(--font-body); font-weight:300; }
.tr-tabla th{ text-align:left; padding:0 0 13px; font-size:var(--text-micro);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gold);
  border-bottom:0.5px solid var(--border); font-weight:400; }
.tr-tabla th:last-child{ text-align:right; }
.tr-tabla td{ padding:17px 0; border-bottom:0.5px solid var(--border-l);
  font-size:var(--text-sm); color:var(--text-sec); vertical-align:top; }
.tr-tabla tr:last-child td{ border-bottom:none; }
.tr-nombre{ color:var(--text) !important; padding-right:26px !important; }
.tr-nota{ display:block; font-size:var(--text-xs); color:var(--text-dim); margin-top:4px; }
.tr-dur{ color:var(--text-dim) !important; white-space:nowrap; padding-right:26px !important; }
.tr-precio{ color:var(--gold) !important; text-align:right; white-space:nowrap; }

/* ── Aviso ────────────────────────────────────────── */
.tr-aviso{ background:var(--bg-deep); padding:40px 80px; }
.tr-aviso p{ max-width:860px; margin:0 auto; font-family:var(--font-body); font-weight:300;
  font-size:var(--text-xs); line-height:var(--lh-body); color:var(--text-dim);
  letter-spacing:var(--ls-body); }

@media (max-width:860px){
  .tr-fam{ padding:52px 32px; }
  .tr-fam h2{ font-size:var(--text-lg); }
  .tr-tabla{ min-width:420px; }
  .tr-tabla td{ font-size:var(--text-xs); padding:14px 0; }
  .tr-aviso{ padding:32px; }
}
@media (max-width:480px){
  .tr-fam{ padding:40px 20px; }
  .tr-aviso{ padding:28px 20px; }
}

/* ══════════════════════════════════════════════════════
   MÓVIL — la tabla pasa a fichas
   A 390 px la columna de precio quedaba fuera de pantalla y
   había que desplazar en horizontal para verla. Como el precio
   es justo lo que venimos a enseñar, cada tratamiento pasa a
   ser una ficha con nombre, duración y precio a la vista.
   ══════════════════════════════════════════════════════ */
@media (max-width:620px){
  .tr-tabla-scroll{ overflow-x:visible; }
  .tr-tabla{ min-width:0; width:100%; display:block; }
  .tr-tabla thead{ display:none; }
  .tr-tabla tbody{ display:block; }
  .tr-tabla tr{ display:grid; grid-template-columns:1fr auto;
    grid-template-areas:"nombre precio" "dur precio";
    gap:2px 16px; align-items:start;
    padding:16px 0; border-bottom:0.5px solid var(--border-l); }
  .tr-tabla tr:last-child{ border-bottom:none; }
  .tr-tabla td{ display:block; padding:0 !important; border:none; }
  .tr-nombre{ grid-area:nombre; font-size:var(--text-sm) !important;
    color:var(--text) !important; line-height:1.45; }
  .tr-nota{ margin-top:5px; }
  .tr-dur{ grid-area:dur; font-size:var(--text-micro) !important;
    letter-spacing:var(--ls-label); text-transform:uppercase;
    color:var(--text-dim) !important; margin-top:6px; }
  .tr-precio{ grid-area:precio; align-self:center; text-align:right;
    font-family:var(--font-display); font-size:var(--text-lg) !important;
    font-weight:300; color:var(--gold) !important; }
}