.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================ */
/* GOOGLE FONTS — SALIS MED SPA                 */
/* ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&family=Cormorant+Garamond:ital,wght@1,300;1,400&display=swap');

/* ============================================ */
/* ROOT MAESTRO — EKO 2.0                       */
/* ============================================ */
:root {

  /* ─── ESPACIADO BASE ─────────────────────────────── */
  --space-xs:    8px;
  --space-sm:    16px;
  --space-md:    24px;
  --space-lg:    40px;
  --space-xl:    64px;
  --space-2xl:   96px;

  --section-gap:                100px;
  --section-gap-tablet:          72px;
  --section-gap-mobile:          56px;

  --section-inner-spacing:       80px;
  --section-inner-spacing-md:    56px;
  --section-inner-spacing-sm:    40px;

  /* ─── ANCHOS MÁXIMOS ─────────────────────────────── */
  --container-xl:   1400px;
  --container-lg:   1200px;
  --container-md:    900px;
  --container-sm:    640px;

  /* ─── TIPOGRAFÍA — TAMAÑOS FLUIDOS ──────────────── */
  --text-xs:    clamp(11px, 1.2vw, 12px);
  --text-sm:    clamp(13px, 1.4vw, 14px);
  --text-base:  clamp(15px, 1.6vw, 17px);
  --text-md:    clamp(16px, 1.8vw, 18px);
  --text-lg:    clamp(18px, 2vw,   20px);
  --text-xl:    clamp(20px, 2.4vw, 24px);
  --text-2xl:   clamp(24px, 3vw,   32px);
  --text-3xl:   clamp(28px, 4vw,   42px);
  --text-4xl:   clamp(34px, 5vw,   56px);
  --text-hero:  clamp(42px, 6.5vw, 80px);

  /* ─── TIPOGRAFÍA — ESCALA SEMÁNTICA ─────────────── */
  --fs-h1:      clamp(42px, 5vw, 64px);
  --fs-h2:      clamp(28px, 3.5vw, 44px);
  --fs-h3:      clamp(18px, 2vw, 22px);
  --fs-body-lg: 17px;
  --fs-body:    16px;
  --fs-body-sm: 15px;
  --fs-label:   12px;

  /* ─── TIPOGRAFÍA — PESOS ─────────────────────────── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ─── TIPOGRAFÍA — LINE HEIGHT ───────────────────── */
  --lh-h1:      1.0;
  --lh-h2:      1.1;
  --lh-h3:      1.2;
  --lh-body-lg: 1.75;
  --lh-body:    1.65;

  /* ─── TIPOGRAFÍA — LEADING Y TRACKING ───────────── */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.6;
  --leading-loose:    1.85;

  /* FIX: unificado con --ls-tight del proyecto */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* ─── RADIO DE BORDES ────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ─── TRANSICIONES ───────────────────────────────── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   0.18s;
  --duration-base:   0.3s;
  --duration-slow:   0.5s;
  --duration-xslow:  0.7s;

  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);

  /* ─── Z-INDEX ────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
  --z-header:   400;

  /* ─── BORDES Y SOMBRAS (neutrales) ──────────────── */
  --border-subtle:   rgba(0, 0, 0, 0.07);
  --border-light:    rgba(0, 0, 0, 0.12);
  --border-medium:   rgba(0, 0, 0, 0.2);

  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 12px 48px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 24px 80px rgba(0, 0, 0, 0.12);

}

/* ─── APLICAR ESTILOS A ELEMENTOR ───────────────────── */

.elementor h1,
.elementor .elementor-widget h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-regular);
}
/* FIX: el span hereda letter-spacing del h1 */
.elementor h1 span,
.elementor .elementor-widget h1 span {
  letter-spacing: inherit;
}

.elementor h2,
.elementor .elementor-widget h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-light);
}
/* FIX: fuerza que el span dentro del h2 no rompa el letter-spacing */
.elementor h2 span,
.elementor .elementor-widget h2 span {
  letter-spacing: inherit;
}

.elementor h3,
.elementor .elementor-widget h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
}
.elementor h3 span,
.elementor .elementor-widget h3 span {
  letter-spacing: inherit;
}

.elementor p,
.elementor .elementor-widget p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--gray-dk);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--gray-dk);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1024px) {
  :root {
    --section-gap:           var(--section-gap-tablet);
    --section-inner-spacing: var(--section-inner-spacing-md);
  }
}

@media (max-width: 768px) {
  :root {
    --section-gap:           var(--section-gap-mobile);
    --section-inner-spacing: var(--section-inner-spacing-sm);
  }
}

/* ============================================ */
/* ROOT PROYECTO — SALIS MED SPA                */
/* ============================================ */

:root {

  /* ─── SISTEMA DE ARENAS ─────────────────────────── */
  --sand-0:    #FDFCFB;
  --sand-1:    #F7F5F2;
  --sand-2:    #F0EDE8;
  --sand-3:    #E8E3DC;
  --sand-line: #D6D1CA;

  /* ─── GRISES OFICIALES ──────────────────────────── */
  --gray:      #8E8E89;
  --gray-dk:   #5A5A56;
  --gray-soft: #B8B8B3;
  --gray-pale: #D0CFCB;

  /* ─── COLORES FUNCIONALES ───────────────────────── */
  --footer-bg:            #3A3A37;
  --hero-dark:            #3D3A36;

  --color-whatsapp:       #dcf8c6;
  --color-whatsapp-hover: #b8e8a2;
  --color-whatsapp-text:  #1a5c2a;

  /* ─── TIPOGRAFÍA ────────────────────────────────── */
  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-body:    "Montserrat", system-ui, sans-serif;
  --font-sans:    "Montserrat", system-ui, sans-serif;

  /* ─── ESCALA TIPOGRÁFICA ────────────────────────── */
  --fs-hero: clamp(52px, 7.8vw, 110px);
  --fs-h2:   clamp(28px, 3.6vw, 48px);
  --fs-h3:   clamp(16px, 1.8vw, 20px);

  --text-xs:   clamp(10px, 1.1vw, 11px);
  --text-sm:   clamp(12px, 1.3vw, 13px);
  --text-base: clamp(14px, 1.5vw, 16px);
  --text-lg:   clamp(16px, 1.8vw, 18px);

  /* ─── LINE HEIGHTS ──────────────────────────────── */
  --lh-display: 0.94;
  --lh-heading: 1.1;
  --lh-body:    1.72;

  /* ─── LETTER SPACING ────────────────────────────── */
  --ls-tight:  -0.025em;
  --ls-wide:    0.08em;
  --ls-wider:   0.16em;

  /* ─── LAYOUT ────────────────────────────────────── */
  --maxw:  1280px;
  --pad-x: clamp(24px, 5vw, 80px);
  --gap:   112px;

  /* ─── RADIOS ────────────────────────────────────── */
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* ─── TRANSICIONES ──────────────────────────────── */
  --ease:        cubic-bezier(0.32, 0.72, 0.16, 1);
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    460ms;

  /* ─── SOMBRAS ───────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.07);

  /* ─── Z-INDEX ───────────────────────────────────── */
  --z-hdr: 400;

}

/* ─── ESTILOS BASE ──────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  color: var(--gray-dk);
  background: var(--sand-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ─── NEUTRALIZAR ELEMENTOR ─────────────────────────── */

.elementor-widget-html,
.elementor-widget-html .elementor-widget-container {
  background: transparent !important;
}

/* FIX global: letter-spacing en widgets HTML personalizados */
.elementor-widget-html h1,
.elementor-widget-html h2,
.elementor-widget-html h3 {
  letter-spacing: var(--ls-tight) !important;
}
.elementor-widget-html h1 span,
.elementor-widget-html h2 span,
.elementor-widget-html h3 span {
  letter-spacing: inherit !important;
}

/* ─── CLASES DE TIPOGRAFÍA ──────────────────────────── */

.h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--gray-dk);
}
.h2 span { letter-spacing: inherit; }

.ta {
  font-weight: var(--fw-light);
  letter-spacing: 0.05em;
  color: var(--gray);
}

.tl {
  display: inline;
  background-image: linear-gradient(to right, var(--sand-line), var(--sand-line));
  background-size: 70% 18px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--lh-body);
  color: var(--gray-dk);
  font-weight: var(--fw-regular);
}

.body-sm {
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--gray-dk);
  font-weight: var(--fw-regular);
}

.mono {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gray-soft);
}

/* ─── SISTEMA DE ENLACES INLINE ─────────────────────── */

.link {
  color: var(--gray-dk);
  text-decoration: none;
  background-image: linear-gradient(to right, var(--sand-line), var(--sand-line));
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition:
    color var(--dur-base) var(--ease),
    background-size var(--dur-base) var(--ease);
}
.link:hover {
  color: var(--gray);
  background-size: 100% 2.5px;
}

/* ─── SISTEMA DE FONDOS ─────────────────────────────── */

.s0 { background: var(--sand-0); }
.s1 { background: var(--sand-1); }
.s2 { background: var(--sand-2); }
.s3 { background: var(--sand-3); }

/* ─── IMÁGENES ──────────────────────────────────────── */

.img-w {
  position: relative;
  overflow: hidden;
  background: var(--sand-3);
}
.img-w img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.01);
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.img-w:hover img { transform: scale(1.025); }

.img-w--horizon {
  background: linear-gradient(160deg, #b8c8d4 0%, #7a9aaa 45%, #4a6878 100%);
}

/* ============================================ */
/* SISTEMA DE BOTONES — SALIS MED SPA           */
/* ============================================ */

.btn-circle,
.btn-pill {
  transition:
    background    var(--dur-base) var(--ease),
    color         var(--dur-base) var(--ease),
    border-color  var(--dur-base) var(--ease),
    box-shadow    var(--dur-base) var(--ease),
    transform     var(--dur-base) var(--ease-spring);
}

.btn-circle {
  width: clamp(118px, 10vw, 140px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: 1.55;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
}
.btn-circle:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(90,90,86,0.2);
}

.btn-circle--whatsapp {
  background: var(--color-whatsapp);
  border: 3px solid var(--color-whatsapp);
  color: var(--color-whatsapp-text);
}
.btn-circle--whatsapp:hover {
  background: var(--color-whatsapp-hover);
  border-color: var(--color-whatsapp-hover);
  color: var(--color-whatsapp-text);
  box-shadow: 0 8px 28px rgba(26,92,42,0.22);
}

.btn-circle--primary {
  background: var(--color-whatsapp);
  border: 3px solid var(--color-whatsapp);
  color: var(--color-whatsapp-text);
}
.btn-circle--primary:hover {
  background: var(--color-whatsapp-hover);
  border-color: var(--color-whatsapp-hover);
  color: var(--color-whatsapp-text);
  box-shadow: 0 8px 28px rgba(26,92,42,0.18);
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-inline: 26px;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn-pill:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(90,90,86,0.16);
}

.btn-pill--ghost {
  border: 1px solid var(--gray-soft);
  color: var(--gray-dk);
  background: transparent;
}
.btn-pill--ghost:hover {
  background: var(--sand-line);
  border-color: var(--sand-line);
  color: var(--gray-dk);
}

.btn-pill--ghost-light {
  border: 1px solid rgba(255,255,255,0.65);
  color: #fff;
  background: transparent;
}
.btn-pill--ghost-light:hover {
  background: var(--sand-line);
  border-color: var(--sand-line);
  color: var(--gray-dk);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.btn-pill--primary {
  background: var(--sand-line);
  border: 1.5px solid var(--gray);
  color: var(--gray-dk);
}
.btn-pill--primary:hover {
  background: var(--gray);
  border-color: var(--gray);
  color: var(--sand-0);
}

.btn-pill--call {
  border: 1px solid var(--gray-soft);
  color: var(--gray-dk);
  background: transparent;
}
.btn-pill--call:hover {
  background: var(--gray);
  border-color: var(--gray);
  color: var(--sand-0);
}

.btn-pill--sm {
  height: 38px;
  padding-inline: 18px;
  font-size: 9.5px;
}

/*Títulos combinados con dos colores*/
.sal-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--gray-dk);
  margin: 0;
}
.sal-title span {
  color: var(--gray);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
}
/*HERO MAESTRO*/
/* ══════════════════════════════════════════════════
   SALIS — HERO MAESTRO v2  (variante oscura)
   Uso: mismas páginas internas que v1.
   Diferencia clave: fondo fotográfico + overlay --hero-dark
   → header transparente con texto blanco queda legible
     desde el primer pixel de la página.
   Sin scroll-reveal ni bloqueo de scroll (exclusivos del
   hero de homepage). Parallax sutil vía JS.
   Sin re-declarar tokens ni fuentes del root global.
   ══════════════════════════════════════════════════ */

/* Wrapper: overflow clip para que el parallax no genere scrollbar */
#salis-hm2-wrap {
  position: relative;
  overflow: clip;
}

#salis-hm2 {
  position: relative;
  min-height: min(560px, 68vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
}

/* ── FONDO FOTOGRÁFICO ─────────────────────── */

.shm2-bg {
  position: absolute;
  inset: 0;
}

.shm2-imgw {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--hero-dark, #3D3A36);
}

.shm2-imgw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Mismo tratamiento inicial que el hero de homepage */
  filter: saturate(0.45) brightness(0.58) contrast(1.02);
  transform: scale(1.04);
  will-change: transform;
}

/* Overlay gradiente — mismo sistema que .salis-hero-veil */
.shm2-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(61, 58, 54, 0.52) 0%,
    rgba(61, 58, 54, 0.20) 45%,
    rgba(61, 58, 54, 0.72) 100%
  );
  pointer-events: none;
}

/* ── CONTENIDO ─────────────────────────────── */

.shm2-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Contenido anclado al fondo — mismo criterio que el hero de homepage */
  justify-content: flex-end;
  width: 100%;
  max-width: var(--maxw, 1280px);
  margin-inline: auto;
  padding-inline: var(--pad-x, clamp(24px, 5vw, 80px));
  /* Top: suficiente para no solparse con el header fijo */
  padding-top: clamp(110px, 16vh, 150px);
  padding-bottom: clamp(60px, 8vh, 88px);
  box-sizing: border-box;
}

/* ── KICKER ────────────────────────────────── */

.shm2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--text-xs, clamp(10px, 1.1vw, 11px));
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.60);
  margin-bottom: 20px;
}

.shm2-kicker::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.40);
  flex-shrink: 0;
}

/* ── H1 ────────────────────────────────────── */

.shm2-h1 {
  color: #fff;
  margin: 0 0 20px;
  max-width: 18ch;
}

/* Subrayado adaptado a fondo oscuro.
   No usa .tl global (--sand-line no contrasta sobre oscuro).
   Combinar siempre con .shm2-em: <span class='shm2-em shm2-tl'>. */
.shm2-tl {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.38),
    rgba(255, 255, 255, 0.38)
  );
  background-size: 100% 2.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 3px;
}

/* ── LEDE ──────────────────────────────────── */

.shm2-lede {
  font-size: var(--text-lg, clamp(15px, 1.7vw, 17px));
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.76);
  max-width: 46ch;
  margin: 0 0 36px;
  color: var(--sand-line) !important;
}

/* ── ACCIONES ──────────────────────────────── */

.shm-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Círculo WhatsApp — scoped.
   Mismo sistema que hero y secciones de impacto. */
.shm-btn-wa {
  width: clamp(118px, 10vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-sans, "Montserrat", sans-serif);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.55;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--color-whatsapp, #dcf8c6);
  border: 3px solid var(--color-whatsapp, #dcf8c6);
  color: var(--color-whatsapp-text, #1a5c2a);
  transition:
    background   280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform    280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow   280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.shm-btn-wa:hover {
  background: var(--color-whatsapp-hover, #b8e8a2);
  border-color: var(--color-whatsapp-hover, #b8e8a2);
  transform: scale(1.04);
  box-shadow: 0 8px 28px rgba(26, 92, 42, 0.22);
}

/* ── RESPONSIVE ────────────────────────────── */

@media (max-width: 768px) {
  #salis-hm2 {
    min-height: min(420px, 55vh);
  }
  .shm2-body {
    padding-top: clamp(100px, 14vh, 120px);
    padding-bottom: clamp(48px, 6vh, 64px);
  }
  .shm2-h1 {
    max-width: 100%;
    font-size: clamp(34px, 8.5vw, 48px);
  }
  .shm2-lede { max-width: 100%; }
  .shm2-acts { gap: 12px; }
}

@media (max-width: 480px) {
  .shm2-h1 { font-size: clamp(30px, 8vw, 40px); }
  .shm2-lede { margin-bottom: 28px; }
}

/*CSS PARA PROTOCOLOS*/
/* ============================================================
   SALIS MED SPA — PÁGINA DE PROTOCOLO
   Bloques: Taxonomía, Descripción, Ideal para.
   Carga después de root-maestro.css y root-proyecto.css.
   ============================================================ */
.sv-h2 span {
  color: var(--gray);
  font-weight: var(--fw-light);
  letter-spacing: 0.05em;
}

.sv-intro {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body, 1.72);
  color: var(--gray)!important;
  font-weight: var(--fw-regular);
  margin: 0;
  max-width: 52ch;
}

/* ══════════════════════════════════════════════════════════
   02 · TAXONOMÍA
   ══════════════════════════════════════════════════════════ */

#salis-taxo {
  background: var(--sand-3);
  padding-block: 20px;
  padding-inline: var(--pad-x);
  border-bottom: 1px solid var(--sand-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

#salis-taxo .taxo-cat {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gray-soft);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
#salis-taxo .taxo-cat:hover {
  color: var(--gray-dk);
}

#salis-taxo .taxo-sep {
  width: 1px;
  height: 14px;
  background: var(--gray-pale);
  margin-inline: 16px;
  flex-shrink: 0;
}

#salis-taxo .taxo-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-dk);
}


/* ══════════════════════════════════════════════════════════
   03 · DESCRIPCIÓN
   Grid de dos columnas: imagen (42%) + texto (58%).
   La imagen cubre toda la altura de la sección sin padding.
   El número 01 es una marca de agua en la columna de texto.
   ══════════════════════════════════════════════════════════ */

#salis-desc {
  background: var(--sand-1);
  display: grid;
  grid-template-columns: 42% 1fr;
  min-height: 560px;
}

/* ── Columna imagen ── */
#salis-desc .desc-img-col {
  position: relative;
  overflow: hidden;
  background: var(--sand-3);
}
#salis-desc .desc-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.82) contrast(1.01);
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
#salis-desc:hover .desc-img-col img {
  transform: scale(1.025);
}

/* ── Columna texto ── */
#salis-desc .desc-text-col {
  padding: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}


#salis-desc .desc-content {
  position: relative;
  z-index: 1;
}

#salis-desc .desc-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gray-soft);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#salis-desc .desc-label::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--sand-line);
}

#salis-desc .desc-p {
  max-width: 60ch;
  margin-bottom: 20px;
}
#salis-desc .desc-p:last-child {
  margin-bottom: 0;
}
#salis-desc .desc-p .acc {
  font-weight: var(--fw-light);
  letter-spacing: 0.04em;
  color: var(--gray);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  #salis-desc {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  #salis-desc .desc-img-col {
    height: 300px;
  }
  #salis-desc .desc-text-col {
    padding: 48px var(--pad-x);
  }
  #salis-desc .chapter-watermark {
    font-size: 120px;
    top: -16px;
    right: -8px;
  }
}


/* ══════════════════════════════════════════════════════════
   04 · IDEAL PARA
   Grid 2 columnas de pills semánticas.
   Si la última pill queda sola, se expande a full-width.
   ══════════════════════════════════════════════════════════ */

#salis-ideal {
  background: transparent;
  padding-block: var(--section-inner-spacing);
  padding-inline: var(--pad-x);
  border-top: 1px solid var(--sand-line);
  border-bottom: 1px solid var(--sand-line);
}

#salis-ideal .ideal-hd {
  margin-bottom: 40px;
}

#salis-ideal .ideal-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--gray-dk);
  margin: 0;
}
#salis-ideal .ideal-title .ul {
  display: inline;
  background-image: linear-gradient(to right, var(--sand-line), var(--sand-line));
  background-size: 70% 11px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

#salis-ideal .ideal-meta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  color: var(--gray-soft);
  margin-top: 10px;
  line-height: var(--lh-body);
  max-width: 52ch;
}

#salis-ideal .ideal-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#salis-ideal .ideal-pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  padding:20px 20px;
  border-radius: 10px;
  border: 1px solid var(--sand-line);
  background: var(--sand-0);
  cursor: default;
  flex: 1 1 calc(50% - 5px);
  min-width: 220px;
  max-width: calc(50% - 5px);
  transition:
    border-color var(--dur-base) var(--ease),
    transform    var(--dur-base) var(--ease-spring);
}
#salis-ideal .ideal-pill:hover {
  border-color: var(--gray-soft);
  transform: translateY(-2px);
}

/* Última pill sola → full width */
#salis-ideal .ideal-pill:last-child:nth-child(odd) {
  max-width: 100%;
  flex: 1 1 100%;
}

#salis-ideal .pill-num {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  color: var(--sand-line);
  line-height: 1;
  padding-top: 2px;
  flex-shrink: 0;
  width: 18px;
}

#salis-ideal .pill-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#salis-ideal .pill-name {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  color: var(--gray-dk);
  line-height: 1.3;
}

#salis-ideal .pill-why {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: var(--fw-regular);
  color: var(--gray-soft);
  line-height: 1.55;
}

@media (max-width: 640px) {
  #salis-ideal .ideal-pill {
    flex: 1 1 100%;
    max-width: 100%;
  }
}/* End custom CSS */