/* ==========================================================================
   Clínica Sosiego — theme (fictional brand, demo). Slug: clinica-sosiego
   Calm, modern and photographic: full-bleed bands (white, mint, navy), a photo hero with a
   soft white scrim, image-on-top service cards, a navy band of line icons, a hairline accordion.
   Aqua is a shape colour; text uses darker variants (see below).
   Fonts: Figtree 600 (display) + IBM Plex Sans 400/500 (body).
   Uses the premium layer (soft, unhurried variant) and the image pipeline.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
/* Metric-matched fallbacks (Arial / Liberation Sans). size-adjust from frequency-weighted glyph
   advances of each font over this page's copy; vertical overrides from each font's hhea metrics
   divided by size-adjust. */
@font-face {
  font-family: "Figtree Fallback";
  font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Helvetica Bold");
  size-adjust: 94%;
  ascent-override: 101.1%;
  descent-override: 26.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Fallback Sosiego";
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto"), local("Helvetica");
  size-adjust: 100.1%;
  ascent-override: 102.5%;
  descent-override: 27.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plex Fallback Sosiego";
  font-weight: 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto"), local("Helvetica");
  size-adjust: 102.1%;
  ascent-override: 100.5%;
  descent-override: 26.9%;
  line-gap-override: 0%;
}


:root {
  /* Brand palette (as briefed) */
  --sosiego-white: #ffffff;
  --sosiego-aqua: #2bb3c0;
  --sosiego-navy: #14365d;
  --sosiego-mint: #e3f6f5;

  /* AA-adjusted shades. Aqua fails as text on white (2.53:1) and mint (2.26:1) and as a
     button background with white text (2.53:1), so aqua is kept for fills and shapes. */
  --sosiego-aqua-ink: #0b6e79;      /* aqua text on light: 5.96:1 on white, 5.33:1 on mint */
  --sosiego-muted: #445a78;         /* body-muted text: 7.05:1 on white, 6.30:1 on mint */
  --sosiego-navy-soft: #1b4577;     /* button hover fill: white 9.93:1 */
  --sosiego-sky: #b8cbe0;           /* muted text on navy: 7.38:1 */
  --sosiego-aqua-tint: #bfeaee;     /* icon tiles, navy glyph 9.4:1 */
  --sosiego-mint-line: #c6e8e6;     /* decorative hairlines */
  --sosiego-field: #5e7a8a;         /* form control borders: 4.54:1 on white (UI >= 3:1) */

  --color-bg: var(--sosiego-white);
  --color-surface: var(--sosiego-mint);
  --color-text: var(--sosiego-navy);              /* 12.24:1 on white, 10.94:1 on mint */
  --color-text-muted: var(--sosiego-muted);
  --color-border: var(--sosiego-mint-line);
  --color-border-strong: var(--sosiego-field);
  --color-accent: var(--sosiego-navy);            /* buttons: white on navy 12.24:1 */
  --color-accent-ink: var(--sosiego-aqua-ink);
  --color-on-accent: var(--sosiego-white);

  --color-dark-bg: var(--sosiego-navy);
  --color-dark-surface: #1b4577;
  --color-dark-text: var(--sosiego-white);        /* 12.24:1 on navy */
  --color-dark-muted: var(--sosiego-sky);
  --color-dark-border: #2d5686;

  --color-error: #9b2c23;                        /* 7.56:1 on white */
  --color-success: #1f6b42;                      /* 6.2:1 on white */

  --font-display: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Plex Fallback Sosiego", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-base: 1.0625rem;
  --leading-normal: 1.6;

  --sosiego-radius: 1.25rem;          /* cards, images, form card: one radius everywhere */
  --sosiego-radius-btn: 1rem;
  --sosiego-hair: rgb(20 54 93 / 0.12);
  --sosiego-shadow-card: 0 1px 2px rgb(20 54 93 / 0.05), 0 10px 24px -14px rgb(20 54 93 / 0.2), 0 28px 48px -32px rgb(20 54 93 / 0.22);
  --sosiego-shadow-btn: 0 1px 2px rgb(20 54 93 / 0.18), 0 10px 22px -12px rgb(20 54 93 / 0.5);

  --section-space: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --hero-space: 0px;
  --hero-bg: var(--sosiego-white);
  --header-bg: var(--sosiego-white);
  --header-border: var(--sosiego-hair);
  --button-font: var(--font-display);
  --button-size: 1rem;
  --button-weight: 600;
  --button-tracking: 0;
  --button-transform: none;
  --button-radius: var(--sosiego-radius-btn);
  --button-padding: 0.75rem 1.5rem;
  --card-radius: var(--sosiego-radius);
  --footer-bg: var(--sosiego-navy);
  --footer-text: var(--sosiego-sky);
  --footer-border: transparent;
  --field-radius: 0.875rem;
}

/* Dark contexts (navy band, footer): aqua is the accent there (4.85:1 on navy). */
.on-dark,
.section--dark {
  --color-accent: var(--sosiego-aqua);
  --color-on-accent: var(--sosiego-navy);
  --color-accent-ink: var(--sosiego-aqua);
}

body {
  font-weight: 400;
}
strong,
b {
  font-weight: 500;
}

/* ---- Typography: Figtree 600, fluid, balanced; emphasis is colour, never a marker ---- */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
h1 {
  font-size: clamp(2.25rem, 1.55rem + 3.4vw, 3.875rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
}
h3 {
  font-size: 1.1875rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}
em {
  font-style: normal;
  color: var(--color-accent-ink);
}
.eyebrow {
  justify-self: start;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.lead {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}
.section__header {
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  max-width: 44rem;
}

/* ---- Buttons: solid navy primary, outlined secondary, soft diffuse shadow, short lift ---- */
.button {
  min-height: 48px;
  border-width: 1.5px;
  box-shadow: var(--sosiego-shadow-btn);
}
.button:hover {
  background: var(--sosiego-navy-soft);
  border-color: var(--sosiego-navy-soft);
  color: var(--sosiego-white);   /* 9.93:1 */
}
.button--ghost {
  background: var(--sosiego-white);
  border-color: var(--sosiego-navy);
  color: var(--sosiego-navy);
  box-shadow: 0 8px 20px -14px rgb(20 54 93 / 0.35);
}
.button--ghost:hover {
  background: var(--sosiego-mint);
  border-color: var(--sosiego-navy);
  color: var(--sosiego-navy);    /* 10.94:1 */
}

/* ---- Header: light, sticky; the premium layer adds blur and the hairline after scrolling ---- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.wordmark svg {
  width: 2rem;
  height: 2rem;
}
.site-nav .button {
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
}

/* ---- "Illustrative image" label: quiet white pill on every image (navy on white 12:1) ---- */
.img-tag {
  position: absolute;
  z-index: 2;
  right: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.94);
  color: var(--sosiego-navy);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}
.img-tag::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--sosiego-aqua);
}

/* ---- Hero: edge-to-edge photo. Stacked on small screens, photo behind a soft white scrim from 72rem ---- */
.hero {
  position: relative;
  isolation: isolate;
  padding: 0;
}
.hero__bg {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  background: var(--sosiego-mint);
}
.hero__bg .ph {
  position: absolute;
  inset: 0;
}
.hero__bg .ph img {
  object-position: 72% 58%;
}
.hero .hero__inner {
  display: block;
  max-width: var(--container);
  margin-inline: auto;
  padding-block: var(--space-7) var(--space-8);
}
.hero .hero__inner > .hero__content {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: 35rem;
}
.hero__actions {
  margin-top: var(--space-2);
}
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.hero__chips li {
  padding: 0.3125rem 0.875rem;
  border: 1px solid var(--sosiego-hair);
  border-radius: 999px;
  background: var(--sosiego-mint);
  color: var(--sosiego-navy);
  font-size: 0.875rem;
  font-weight: 500;
}
.hero__checks {
  display: grid;
  gap: 0.625rem;
  margin-top: var(--space-1);
}
.hero__checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.hero__checks svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
}
@media (min-width: 72rem) {
  .hero {
    display: grid;
    align-items: center;
    min-height: clamp(36rem, 36vw + 8rem, 47rem);
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
    --scrim-solid: max(calc(50% - 1.5rem), 35rem);
  }
  .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgb(255 255 255 / 0.97) 0, rgb(255 255 255 / 0.95) var(--scrim-solid), rgb(255 255 255 / 0) calc(var(--scrim-solid) + 15rem));
    pointer-events: none;
  }
  .hero .hero__inner {
    padding-block: var(--space-8);
  }
}

/* ---- First visit: lead photo beside the intro, then a thin four-step line ---- */
.visit__top {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.visit__top .section__header {
  margin-bottom: 0;
}
.visit__photo,
.contact__photo {
  position: relative;
  margin: 0;
}
.visit__photo .ph {
  aspect-ratio: 3 / 2;
  border-radius: var(--sosiego-radius);
  box-shadow: var(--sosiego-shadow-card);
}
@media (min-width: 60rem) {
  .visit__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8);
  }
}
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  max-width: none;
  margin-top: var(--space-8);
}
.steps .process__step {
  position: relative;
  align-content: start;
  gap: var(--space-2);
  padding: 0 0 0 4.25rem;
  border-top: 0;
}
.steps .process__step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1.5px solid var(--sosiego-aqua);
  border-radius: 50%;
  background: var(--sosiego-white);
  color: var(--sosiego-navy);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
}
.steps .process__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3.5rem;
  bottom: calc(0.5rem - var(--space-6));
  width: 1px;
  background: var(--sosiego-aqua);
  opacity: 0.55;
}
@media (min-width: 60rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .steps .process__step {
    padding: 4.25rem 0 0;
  }
  .steps .process__step:not(:last-child)::after {
    left: 3.5rem;
    right: calc(0.5rem - var(--space-5));
    top: 1.5rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}
.visit__note {
  display: grid;
  gap: var(--space-2);
  max-width: none;
  margin-top: var(--space-8);
  padding: var(--space-5);
  border-radius: var(--sosiego-radius);
  background: var(--sosiego-mint);
}
.visit__note b {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
}
@media (min-width: 48rem) {
  .visit__note {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: baseline;
    padding-inline: var(--space-6);
  }
}

/* ---- Services: six identical cards (photo 4:3, title, text, price pill), aligned across each row ---- */
.services .feature-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-5);
  margin-bottom: calc(-1 * var(--space-5));
}
@media (min-width: 36rem) {
  .services .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 60rem) {
  .services .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.feature-grid--cards .feature {
  display: grid;
  align-content: start;
  gap: 0;
  margin-bottom: var(--space-5);
  padding: 0.75rem 0.75rem 0;
  border: 1px solid var(--sosiego-hair);
  border-radius: var(--sosiego-radius);
  background: var(--sosiego-white);
  box-shadow: var(--sosiego-shadow-card);
}
@supports (grid-template-rows: subgrid) {
  .feature-grid--cards .feature {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}
.feature__img {
  position: relative;
  margin: 0 0 var(--space-4);
}
.feature__img .ph {
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
}
.feature-grid--cards .feature h3 {
  align-self: start;
  margin-bottom: var(--space-2);
  padding-inline: 0.5rem;
}
.feature-grid--cards .feature p {
  align-self: start;
  padding-inline: 0.5rem;
}
.feature__price {
  align-self: start;
  justify-self: start;
  margin: var(--space-4) 0.5rem var(--space-5);
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  background: var(--sosiego-aqua-tint);
  color: var(--sosiego-navy);       /* 9.4:1 */
  font-size: 0.875rem;
  font-weight: 500;
}
.services__note {
  margin-top: var(--space-8);
  max-width: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---- How we care: full-bleed navy band, three commitments, line icons, text only ---- */
.promise__intro {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
  margin-bottom: var(--space-8);
}
.promises {
  display: grid;
  gap: var(--space-7);
}
.promises li {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.promise__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgb(43 179 192 / 0.5);
  border-radius: 50%;
  color: var(--sosiego-aqua);
}
.promise__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}
.promises h3 {
  color: var(--sosiego-white);
}
.promises p {
  color: var(--sosiego-sky);        /* 7.38:1 on navy */
}
@media (min-width: 48rem) {
  .promises {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .promises li {
    padding-inline: var(--space-6);
    border-left: 1px solid var(--color-dark-border);
  }
  .promises li:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .promises li:last-child {
    padding-right: 0;
  }
}

/* ---- FAQ: heading on the left, a hairline accordion on the right (stacked on small screens) ---- */
.faq-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
.faq-layout .section__header {
  margin-bottom: 0;
}
@media (min-width: 60rem) {
  .faq-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-8);
  }
  .faq-layout .section__header {
    position: sticky;
    top: 7rem;
  }
}
.faq {
  border-top: 1px solid var(--sosiego-hair);
}
.faq details {
  border-bottom: 1px solid var(--sosiego-hair);
}
.faq summary {
  align-items: center;
  padding: var(--space-5) 0;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
/* Minimal plus that becomes a minus: two thin bars drawn with gradients, no circle, no box. */
.faq summary::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background:
    linear-gradient(var(--sosiego-aqua-ink), var(--sosiego-aqua-ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--sosiego-aqua-ink), var(--sosiego-aqua-ink)) center / 2px 100% no-repeat;
  transition: background-size var(--duration) var(--ease);
}
.faq details[open] summary::after {
  transform: none;
  background-size: 100% 2px, 2px 0;
}
.faq details p {
  max-width: 60ch;
  padding-bottom: var(--space-5);
}
.faq details[open] p {
  animation: sosiego-answer 420ms var(--ease) both;
}
@keyframes sosiego-answer {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---- Social proof placeholder: kept visible, in the same quiet language ---- */
.placeholder-block {
  border: 1.5px dashed var(--sosiego-field);
  border-radius: var(--sosiego-radius);
  background: var(--sosiego-white);
}
.placeholder-block p {
  margin-inline: auto;
}

/* ---- Contact: light band; details, urgent notice and photo beside a clean form card ---- */
.contact {
  gap: var(--space-7);
}
@media (min-width: 60rem) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-8);
  }
}
.contact__intro {
  gap: var(--space-4);
  align-content: start;
}
.contact__details {
  display: grid;
  margin: 0;
}
.contact__details > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--sosiego-hair);
}
.contact__details > div:first-child {
  border-top: 1px solid var(--sosiego-hair);
}
.contact__details dt {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.contact__details dd {
  margin: 0;
  font-weight: 500;
}
.contact__urgent {
  max-width: none;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--sosiego-radius);
  background: var(--sosiego-navy);
  color: var(--sosiego-white);       /* 12.24:1 */
}
.contact__urgent b {
  font-family: var(--font-display);
  font-weight: 600;
}
.contact__photo {
  margin-top: var(--space-2);
}
.contact__photo .ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--sosiego-radius);
  box-shadow: var(--sosiego-shadow-card);
}
.contact-form--light {
  --field-border: var(--sosiego-field);   /* 4.54:1 on white */
  padding: var(--space-5);
  border: 1px solid var(--sosiego-hair);
  border-radius: var(--sosiego-radius);
  background: var(--sosiego-white);
  box-shadow: var(--sosiego-shadow-card);
}
@media (min-width: 48rem) {
  .contact-form--light {
    padding: var(--space-6);
  }
}

/* ---- Footer ---- */
.site-footer {
  border-top: 0;
}

/* ==========================================================================
   Premium layer tuning (calm, friendly variant): slow ease-out, a very slight rise,
   gentle card lift. Transform and opacity only; the layer disables all of it under
   prefers-reduced-motion.
   ========================================================================== */
[data-premium] {
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 320ms;
  --reveal-duration: 900ms;
  --reveal-distance: 12px;
  --selection-bg: var(--sosiego-aqua-tint);
  --selection-text: var(--sosiego-navy);
  --shadow-sm: 0 1px 2px rgb(20 54 93 / 0.06), 0 6px 14px -8px rgb(20 54 93 / 0.14);
  --shadow-md: 0 1px 1px rgb(20 54 93 / 0.04), 0 10px 22px -10px rgb(20 54 93 / 0.28), 0 24px 40px -28px rgb(20 54 93 / 0.3);
}
[data-premium] h1 {
  letter-spacing: -0.03em;
}
[data-premium] h2,
[data-premium] h3 {
  letter-spacing: -0.02em;
}
[data-premium] .section--dark {
  background-image: none;    /* a clean flat navy, no grain */
}
[data-premium] .feature {
  transition: opacity var(--reveal-duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
@media (hover: hover) {
  [data-premium] .feature.is-in:hover,
  [data-premium] .feature:not([data-reveal]):hover {
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-premium] .feature:hover {
    transform: none !important;
  }
}

/* Generated by scripts/images.mjs: image placeholders (dominant colour + 24px WebP). */
.ph-sosiego-01-recepcion{background-color:#beb5ab;background-image:url(data:image/webp;base64,UklGRqoAAABXRUJQVlA4IJ4AAAAwBACdASoYAA4APu1iqU2ppaQiMAgBMB2JQBfrERhW/SjYMzayKptrpgAAzaD/wr7psGzFOLZTfCaVKDxvr+XRSG7MYXCpnbVjZUvKHT+eFC8W7AYQDXxEqprOUc8eCZ3/zjDSviVbrF82Ne5zJQWP8IZ1LU3Cb0kER50PAjZCQfbtEfGMFIp9L6SwWUZDrnb0kpd48FICjj0xkHAAAA==)}
.ph-sosiego-02-consulta{background-color:#d3d2cc;background-image:url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAACwAwCdASoYABAAPu1iqU2ppaOiMAgBMB2JYwC06BwG+K/61O3mAAD+FnTu3dKa7FiFwZ3tvlK6J7jki1mxGiYgT/V1I5KBUgssoTWwq49mkqgYhTZP3Qln+V+3Z+PqSPfia5BrOmsTqPmHIUP90c/ZwPNjLqLzdx7lmedVCZvGb39by5nIgAAA)}
.ph-sosiego-03-revision{background-color:#babcaf;background-image:url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAABQBQCdASoYABIAPu1orVCppaQiqAqpMB2JZQDKAywA23YViwnPP0EXt7HaJml5FPKrYgAA/q/foAil1N81blbuDm3ChrMeV9/mKKhF7eSP3u2fNd+bOMXArz67Q5DwnpnMIieY8ppgdnYBIIOQS9qWEaa126FOToRsUJ0oPC2aSFzS7d+oYLGuqfD46CHHE1hR5FfMllCHh8naGU7y3gAA)}
.ph-sosiego-04-ortodoncia{background-color:#bdbbae;background-image:url(data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAABQBQCdASoYABIAPu1ur1IppiQiqAgBMB2JYwDGfBCr4lHEw5cmy30iw/cmV80fS2p6nAAA906uCV7nL9ZysKbPZ9jUZkN7KdskTsl/YxJC1kp8fhp9NkmGyCoxVfOLwh+l2HHRTQoOJAUDN/FHIH+m38EDCTpEmtIbxaNwZAl8Vr+k2t5dW812zYY7rVn3PFQWlhIXyJIAAA==)}
.ph-sosiego-05-estetica{background-color:#bebdaf;background-image:url(data:image/webp;base64,UklGRsAAAABXRUJQVlA4ILQAAACwBACdASoYABIAPu1qrFCppaQiqAqpMB2JZQDDNmwAWqml0BoD7HYiDug8IIAAAP7rFzcxuEZp1QVXXDkDUqj33z27RcH+akDUjaRccRfpxjIoB5AeNIIZk0pP9Bt+Cx/McfCoh/+pdd1sBYzGd3tlCN7UPF9m9RjL22lbUmCnSjh38hYw8DcilZBz15MexQIdaAJgEohIbpoXls5FD++p711j7zZcI6GZ9MOj3CbHISfgAAA=)}
.ph-sosiego-06-ninos{background-color:#bebaaa;background-image:url(data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAACwBACdASoYABIAPu1srFEppaQiqAqpMB2JYwCzgBBX1hPydliRcmTdG4Vk5FwAAP7E04ulwYOsF+PMOje1Q2htCrRHSgnydWuekQ6i9V5F3JhHlY/HHvfa7NdvRLqV72nsgJ344JpLHBL6fRJ70ci3UFfFLj6MlNVUXv5+t/UdefEVoQYQ0TE+vzTHz2cpDVTGOccK2Qh31a76mtpnoeN/LPqCH+gAAAA=)}
.ph-sosiego-07-protesis{background-color:#b3b1a6;background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAADQBACdASoYABIAPu1sqlEppaOiqAqpMB2JZQDKAA/PG1xRDXnaijf++c3L/cLxYAD+53CFV/m2RpQZ+uwybF/sSOh5dV+nmvzoMRK4DXI6GsFYUlq9cSqPejAJEE5HJ/7dbJhfAbWTMcJsZc/KqrpKTGqYfNt28BoAoncRrB3QIGULIMK2Zkg3YOuOzYjc3aHV+yTH/p4v8YOBsV0iBuQaeAA=)}
.ph-sosiego-08-urgencias{background-color:#bbb9b2;background-image:url(data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAABQBQCdASoYABIAPu1sqlGppaOiqAqpMB2JZwDH6AgAZt3/jchflsemv7MyRvbKRpHrnAAA/sgu0tP547Bo78z2FlFudvql3cJuo8/UCoV7TlN839nQ/b77rMwaqJBUayY0QxskVRnsh2eqqk86+sQ0cvzCUcYxeyWijUWzD9EX8L2dhGZyizCKQ53i99llyM34cDDEJ9+FKBdJk52sTJmc/+kbBUaQAAA=)}
.ph-sosiego-09-mostrador{background-color:#bbad92;background-image:url(data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAABwBACdASoYABIAPu1qrFEppaQiqAqpMB2JYgCdAAzjV2wM298UbrrVfwUsAAD+jhpwZOP5SZC5/5fB75kNohgE6k3YXybu9TWJ5XfvIRrxFowOFLnxuKE14k9Bo0PnCHlK34mHBZ2yDRXiIheMiLXI2sB8RqlGtByJg3q7gm87iVOJD3d8x11v4EE+hqJKQs/kpYVlgIeBB3oAAAA=)}