/*
Theme Name: Sublime – Elementor Base
Theme URI: https://sublimeplasticsurgerygroup.com
Author: Sublime Plastic Surgery Group
Description: Tema base para Sublime Plastic Surgery. El diseño se construye 100% en Elementor Free. El tema provee header, footer, estilos globales y tracking de botones.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Privado
Text Domain: sublime
*/

/* ══════════════════════════════════════════
   VARIABLES GLOBALES — editables en Customizer
══════════════════════════════════════════ */
:root {
  --sb-primary:       #633737;
  --sb-primary-dark:  #4d2929;
  --sb-primary-light: #8c5050;
  --sb-primary-pale:  #f5eded;
  --sb-black:         #0a0808;
  --sb-dark:          #120d0d;
  --sb-dark2:         #1e1414;
  --sb-cream:         #faf6f3;
  --sb-text-soft:     #8a7070;
  --sb-white:         #ffffff;
  --sb-wa:            #25D366;
  --sb-wa-dark:       #1ebe5d;
  --sb-font-display:  'Cormorant Garamond', Georgia, serif;
  --sb-font-body:     'Jost', system-ui, sans-serif;
  --sb-header-h:      74px;
  --sb-radius-pill:   100px;
  --sb-radius-md:     10px;
  --sb-radius-lg:     16px;
}

/* ══════════════════════════════════════════
   RESET BASE
══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--sb-black);
  color: var(--sb-cream);
  font-family: var(--sb-font-body);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color .2s; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* ══════════════════════════════════════════
   TIPOGRAFÍA BASE
══════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sb-font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}
p { margin: 0; }

/* ══════════════════════════════════════════
   ELEMENTOR — AJUSTES GENERALES
══════════════════════════════════════════ */

/* Quitar el padding-top que agrega Elementor al body */
body.elementor-page {
  padding-top: 0 !important;
}

/* Empujar el contenido debajo del header fijo */
.elementor-page .elementor-section-wrap,
.elementor-page #main,
.elementor-page .site-content {
  margin-top: 0;
}

/* Elementor: secciones con scroll-margin para anclas */
.elementor-section[data-id],
.e-con[data-id] {
  scroll-margin-top: var(--sb-header-h);
}

/* Tipografía en widgets de Elementor */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--sb-font-display) !important;
}
.elementor-widget-text-editor {
  font-family: var(--sb-font-body);
  font-weight: 300;
}

/* Botones de Elementor — heredan nuestro estilo si usan las clases */
.elementor-button {
  font-family: var(--sb-font-body);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--sb-radius-pill) !important;
  transition: background .22s, transform .2s, box-shadow .22s !important;
}
.elementor-button:hover { transform: translateY(-2px) !important; }

/* ══════════════════════════════════════════
   HEADER FIJO
══════════════════════════════════════════ */
.sb-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--sb-header-h);
  z-index: 9999;
  background: rgba(10,8,8,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(99,55,55,.15);
  transition: background .3s, box-shadow .3s;
}
.sb-header.scrolled {
  background: rgba(10,8,8,.98);
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.sb-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 52px;
  max-width: 1380px;
  margin: 0 auto;
  gap: 32px;
}
.sb-logo img {
  height: 44px;
  width: auto;
  object-fit: contain;
  display: block;
}
.sb-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
}
.sb-nav a {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,246,243,.5);
  transition: color .2s;
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
}
.sb-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--sb-primary);
  transition: width .25s;
}
.sb-nav a:hover,
.sb-nav a.sb-active { color: var(--sb-primary-light); }
.sb-nav a:hover::after,
.sb-nav a.sb-active::after { width: 100%; }

/* Botón WA en nav */
.sb-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sb-primary);
  color: var(--sb-white) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 10px 20px;
  border-radius: var(--sb-radius-pill);
  white-space: nowrap;
  transition: background .2s, transform .2s !important;
  flex-shrink: 0;
}
.sb-nav-cta::after { display: none !important; }
.sb-nav-cta:hover { background: var(--sb-primary-dark) !important; transform: translateY(-1px); color: var(--sb-white) !important; }
.sb-nav-cta svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }

/* TOGGLE MOBILE */
.sb-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.sb-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--sb-cream);
  transition: transform .3s, opacity .3s;
}
.sb-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.sb-toggle.open span:nth-child(2) { opacity: 0; }
.sb-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* MOBILE MENU */
.sb-mobile-nav {
  display: none;
  flex-direction: column;
  position: fixed;
  top: var(--sb-header-h);
  left: 0; right: 0;
  background: rgba(10,8,8,.98);
  backdrop-filter: blur(16px);
  z-index: 9998;
  padding: 16px 24px 28px;
  border-bottom: 1px solid rgba(99,55,55,.15);
  gap: 0;
}
.sb-mobile-nav.open { display: flex; }
.sb-mobile-nav a {
  display: block;
  padding: 13px 0;
  font-size: 14px;
  color: rgba(250,246,243,.55);
  border-bottom: 1px solid rgba(99,55,55,.1);
  transition: color .2s, padding-left .2s;
}
.sb-mobile-nav a:last-child { border-bottom: none; }
.sb-mobile-nav a:hover { color: var(--sb-primary-light); padding-left: 8px; }
.sb-mobile-nav .sb-nav-cta { margin-top: 16px; justify-content: center; padding: 13px 20px; font-size: 11px !important; }

/* ══════════════════════════════════════════
   STICKY WHATSAPP
══════════════════════════════════════════ */
.sb-sticky-wa {
  position: fixed;
  bottom: 26px; right: 26px;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sb-wa);
  color: #fff;
  font-family: var(--sb-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 13px 20px;
  border-radius: var(--sb-radius-pill);
  box-shadow: 0 6px 24px rgba(37,211,102,.38);
  transition: transform .25s, box-shadow .25s, opacity .3s;
  text-decoration: none;
}
.sb-sticky-wa svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
.sb-sticky-wa:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(37,211,102,.5); color: #fff; }
.sb-sticky-wa.hidden { opacity: 0; pointer-events: none; }

/* ══════════════════════════════════════════
   VIDEO MODAL
══════════════════════════════════════════ */
.sb-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.sb-modal.open { display: flex; }
.sb-modal-box { position: relative; width: 90vw; max-width: 480px; }
.sb-modal-box video { width: 100%; border-radius: var(--sb-radius-md); display: block; }
.sb-modal-close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none;
  color: rgba(255,255,255,.6); font-size: 28px;
  cursor: pointer; line-height: 1;
  transition: color .2s;
}
.sb-modal-close:hover { color: #fff; }

/* ══════════════════════════════════════════
   CLASES UTILITARIAS PARA ELEMENTOR
   (se asignan en el campo CSS Class de cada sección/widget)
══════════════════════════════════════════ */

/* BOTONES */
.sb-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--sb-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  border-radius: var(--sb-radius-pill) !important;
  padding: 15px 32px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background .22s, transform .2s, box-shadow .22s !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.sb-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.sb-btn-primary { background: var(--sb-primary) !important; color: #fff !important; box-shadow: 0 6px 24px rgba(99,55,55,.3) !important; }
.sb-btn-primary:hover { background: var(--sb-primary-dark) !important; transform: translateY(-2px) !important; color: #fff !important; }

.sb-btn-outline { background: transparent !important; color: var(--sb-primary-light) !important; border: 1px solid rgba(99,55,55,.45) !important; }
.sb-btn-outline:hover { border-color: var(--sb-primary) !important; transform: translateY(-1px) !important; color: var(--sb-primary-light) !important; }

.sb-btn-wa { background: var(--sb-wa) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(37,211,102,.35) !important; }
.sb-btn-wa:hover { background: var(--sb-wa-dark) !important; transform: translateY(-2px) !important; color: #fff !important; }

.sb-btn-wa-white { background: #fff !important; color: var(--sb-primary) !important; box-shadow: 0 8px 28px rgba(0,0,0,.2) !important; }
.sb-btn-wa-white:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 36px rgba(0,0,0,.25) !important; color: var(--sb-primary) !important; }

.sb-btn-white-ghost { background: transparent !important; color: rgba(255,255,255,.7) !important; border: 1px solid rgba(255,255,255,.25) !important; }
.sb-btn-white-ghost:hover { border-color: rgba(255,255,255,.6) !important; color: #fff !important; transform: translateY(-1px) !important; }

.sb-btn-lg { padding: 19px 42px !important; font-size: 12px !important; }
.sb-btn-sm { padding: 10px 22px !important; font-size: 10px !important; }

/* SECTION TAG */
.sb-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 10px !important;
  letter-spacing: .32em !important;
  text-transform: uppercase !important;
  color: var(--sb-primary) !important;
  font-family: var(--sb-font-body) !important;
  font-weight: 400 !important;
}
.sb-tag::before { content: ''; display: block; width: 24px; height: 1px; background: var(--sb-primary); flex-shrink: 0; }

/* STATS */
.sb-stat-num {
  font-family: var(--sb-font-display) !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  color: var(--sb-primary-light) !important;
  line-height: 1 !important;
  display: block !important;
}
.sb-stat-label {
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(250,246,243,.35) !important;
  margin-top: 6px !important;
  display: block !important;
  font-family: var(--sb-font-body) !important;
}

/* DIVIDER */
.sb-divider {
  width: 48px !important;
  height: 1px !important;
  background: var(--sb-primary) !important;
  border: none !important;
}

/* DOCTOR CARD */
.sb-doc-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.sb-doc-card img { transition: transform .5s ease, filter .4s; filter: grayscale(15%) brightness(.75); }
.sb-doc-card:hover img { transform: scale(1.04); filter: grayscale(0) brightness(.65); }

/* PROCEDIMIENTO CARD (hover reveal) */
.sb-proc-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.sb-proc-card img { transition: transform .55s ease, filter .4s; filter: brightness(.65) saturate(.8); }
.sb-proc-card:hover img { transform: scale(1.06); filter: brightness(.45) saturate(.65); }
.sb-proc-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,8,.92) 0%, transparent 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
}
.sb-proc-overlay .sb-proc-desc { transition: max-height .4s ease; max-height: 0; overflow: hidden; }
.sb-proc-card:hover .sb-proc-overlay .sb-proc-desc { max-height: 80px; }
.sb-proc-cta { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.sb-proc-card:hover .sb-proc-cta { opacity: 1; transform: translateY(0); }

/* TESTIMONIO / VIDEO CARD */
.sb-video-card {
  cursor: pointer;
  border-radius: var(--sb-radius-lg);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
  border: 1px solid rgba(99,55,55,.12);
}
.sb-video-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.4); border-color: rgba(99,55,55,.4); }
.sb-video-card img { transition: transform .4s, filter .4s; filter: brightness(.8); }
.sb-video-card:hover img { transform: scale(1.04); filter: brightness(.65); }

/* PLAY BUTTON sobre imagen */
.sb-play-btn {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
}
.sb-play-circle {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1.5px solid rgba(99,55,55,.6);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s;
}
.sb-video-card:hover .sb-play-circle { background: var(--sb-primary); border-color: var(--sb-primary); }
.sb-play-circle svg { width: 20px; height: 20px; fill: rgba(250,246,243,.85); margin-left: 3px; }

/* REVEAL */
.sb-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.sb-reveal.in { opacity: 1; transform: none; }
.sb-reveal-d1 { transition-delay: .1s !important; }
.sb-reveal-d2 { transition-delay: .2s !important; }
.sb-reveal-d3 { transition-delay: .3s !important; }
.sb-reveal-d4 { transition-delay: .4s !important; }

/* VALORACIÓN OPCIÓN */
.sb-val-opt {
  background: rgba(99,55,55,.07);
  border: 1px solid rgba(99,55,55,.18);
  border-radius: var(--sb-radius-md);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px;
  text-decoration: none !important;
  transition: background .22s, border-color .22s, transform .2s;
  margin-bottom: 12px;
  gap: 16px;
}
.sb-val-opt:hover { background: rgba(99,55,55,.14) !important; border-color: rgba(99,55,55,.45) !important; transform: translateX(5px) !important; }
.sb-val-opt-title { display: block; font-size: 14px; font-weight: 500; color: var(--sb-cream); margin-bottom: 3px; }
.sb-val-opt-desc { font-size: 12px; color: rgba(250,246,243,.38); }
.sb-val-price { font-family: var(--sb-font-display); font-size: 24px; color: var(--sb-primary-light); white-space: nowrap; text-align: right; }
.sb-val-price small { font-size: 9px; font-family: var(--sb-font-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(250,246,243,.3); display: block; }

/* PASO */
.sb-step-num {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(99,55,55,.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sb-font-display); font-size: 22px;
  color: var(--sb-primary-light);
  background: var(--sb-dark);
  transition: background .25s, border-color .25s, color .25s;
  margin: 0 auto 18px;
}
.sb-step-num:hover,
.elementor-column:hover .sb-step-num { background: var(--sb-primary); border-color: var(--sb-primary); color: #fff; }

/* CHIP */
.sb-chip {
  display: inline-block !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  color: rgba(250,246,243,.5) !important;
  background: rgba(99,55,55,.14) !important;
  border: 1px solid rgba(99,55,55,.22) !important;
  padding: 6px 14px !important;
  border-radius: var(--sb-radius-pill) !important;
  font-family: var(--sb-font-body) !important;
}

/* LOCATION CARD */
.sb-loc-card {
  position: relative;
  overflow: hidden;
  min-height: 400px;
}
.sb-loc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.4) saturate(.7); transition: transform .5s; }
.sb-loc-card:hover img { transform: scale(1.04); }
.sb-loc-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,8,.9) 0%, transparent 55%); pointer-events: none; }
.sb-loc-content { position: relative; z-index: 1; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }

/* TECH LOGOS */
.sb-tech-logos { filter: grayscale(1); opacity: .38; transition: opacity .3s; }
.sb-tech-logos:hover { opacity: .55; }

/* NOTA / QUOTE */
.sb-note {
  padding: 16px 20px !important;
  border-left: 2px solid var(--sb-primary) !important;
  background: rgba(99,55,55,.07) !important;
  border-radius: 0 var(--sb-radius-md) var(--sb-radius-md) 0 !important;
  font-style: italic !important;
  font-size: 13px !important;
  color: rgba(250,246,243,.55) !important;
  line-height: 1.7 !important;
}

/* FONDO DEGRADADO CTA */
.sb-bg-cta {
  background: linear-gradient(135deg, var(--sb-primary-dark) 0%, var(--sb-primary) 100%) !important;
}

/* ══════════════════════════════════════════
   FOOTER BASE
══════════════════════════════════════════ */
.sb-footer {
  background: var(--sb-dark);
  border-top: 1px solid rgba(99,55,55,.12);
}
.sb-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 52px 52px 28px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
}
.sb-footer-col-title {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(99,55,55,.5);
  display: block;
  margin-bottom: 16px;
}
.sb-footer-links a {
  display: block;
  font-size: 13px;
  color: rgba(250,246,243,.28);
  margin-bottom: 10px;
  transition: color .2s, padding-left .2s;
}
.sb-footer-links a:hover { color: var(--sb-primary-light); padding-left: 5px; }
.sb-footer-contact-line {
  font-size: 13px;
  color: rgba(250,246,243,.28);
  margin-bottom: 8px;
  display: block;
  transition: color .2s;
}
.sb-footer-contact-line:hover { color: var(--sb-primary-light); }
.sb-footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 52px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid rgba(99,55,55,.08);
}
.sb-footer-copy { font-size: 11px; color: rgba(250,246,243,.15); }
.sb-footer-legal { display: flex; gap: 18px; }
.sb-footer-legal a { font-size: 11px; color: rgba(250,246,243,.15); transition: color .2s; }
.sb-footer-legal a:hover { color: var(--sb-primary-light); }

/* Social icons */
.sb-social-icons { display: flex; gap: 10px; margin-top: 18px; }
.sb-social-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(99,55,55,.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(250,246,243,.32);
  transition: border-color .2s, color .2s;
}
.sb-social-icon:hover { border-color: var(--sb-primary); color: var(--sb-primary-light); }
.sb-social-icon svg { width: 14px; height: 14px; fill: currentColor; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sb-header-inner { padding: 0 28px; gap: 20px; }
  .sb-nav { gap: 18px; }
  .sb-nav a { font-size: 9px; }
}
@media (max-width: 860px) {
  .sb-nav { display: none; }
  .sb-toggle { display: flex; }
  .sb-nav-cta.sb-hide-mobile { display: none !important; }
  .sb-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 24px 24px; }
  .sb-footer-bottom { padding: 16px 24px 24px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .sb-sticky-wa .sb-wa-label { display: none; }
  .sb-sticky-wa { padding: 13px; border-radius: 50%; }
  .sb-footer-inner { grid-template-columns: 1fr; }
}