/* =========================================================
   Clínica ProSkin — Prototipo de Página de Inicio
   Hoja de estilos — mobile-first
   ========================================================= */

:root {
  /* Paleta extraída del logo y banner oficiales de ProSkin */
  --sand:        #B7AC9D; /* acento arena (color del banner) */
  --sand-dark:   #92897D; /* hover / bordes */
  --sand-light:  #DED9D2; /* fondos alternos */
  --cream:       #F5F2EE; /* fondo principal */
  --cream-soft:  #FBFAF8; /* tarjetas sobre fondo crema */
  --white:       #FFFFFF;
  --brown-text:  #2A2622; /* texto principal / botones */
  --brown-soft:  #5A5148; /* texto secundario */
  --whatsapp:    #25D366;

  --font-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 10px 30px rgba(42, 38, 34, 0.08);
  --shadow-card: 0 6px 18px rgba(42, 38, 34, 0.10);

  --header-h: 68px;
  --bottombar-h: 64px;
  --notice-h: 0px; /* franja de aviso "prototipo" ya se quitó — se deja la variable en 0 por si se necesita reactivar */
  --container-pad: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--brown-text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bottombar-h); /* espacio para la barra fija móvil */
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.3px;
  margin: 0;
}

p { margin: 0; line-height: 1.6; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--sand-dark);
  font-weight: 600;
  margin-bottom: 10px;
}

.section {
  padding: 64px 0;
}
.section--alt { background: var(--sand-light); }
.section--dark {
  background: var(--brown-text);
  color: var(--cream-soft);
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}
.section-head h2 {
  font-size: clamp(26px, 5vw, 36px);
  margin-bottom: 12px;
}
.section-head p { color: var(--brown-soft); font-size: 15.5px; }
.section--dark .section-head p { color: #D9D2C8; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--brown-text);
  color: var(--white);
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { background: #1c1916; }

.btn--outline {
  background: transparent;
  border-color: rgba(42,38,34,0.35);
  color: var(--brown-text);
}
.btn--outline:hover { border-color: var(--brown-text); }

.btn--whatsapp {
  background: var(--whatsapp);
  color: var(--white);
}
.btn--whatsapp:hover { background: #1fb958; }

.btn--light {
  background: var(--white);
  color: var(--brown-text);
}

.btn--block { width: 100%; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: var(--notice-h); left: 0; right: 0;
  height: var(--header-h);
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid rgba(42,38,34,0.06);
  z-index: 100;
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo img { height: 30px; width: auto; }

.header__nav-desktop {
  display: none;
}

.header__cta-desktop { display: none; }

.header__burger {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(42,38,34,0.15);
  background: var(--cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.header__burger span,
.header__burger span::before,
.header__burger span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--brown-text);
  position: relative;
  transition: 0.2s;
}
.header__burger span::before { position: absolute; top: -6px; }
.header__burger span::after { position: absolute; top: 6px; }

/* Menú móvil a pantalla completa */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--cream-soft);
  z-index: 99;
  padding: calc(var(--header-h) + var(--notice-h) + 20px) 24px 24px;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(42,38,34,0.08);
  font-family: var(--font-serif);
  font-size: 19px;
}
.mobile-menu__badge {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--sand-dark);
  background: var(--sand-light);
  padding: 3px 8px;
  border-radius: 999px;
}
.mobile-menu__disabled { opacity: 0.55; }
.mobile-menu__actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hero {
  margin-top: calc(var(--header-h) + var(--notice-h));
  position: relative;
  background: var(--sand-light);
}

/* Carrusel a todo el ancho de pantalla. La altura se define con
   aspect-ratio (no vh) a propósito: así nunca "salta" al aparecer o
   esconderse la barra del navegador en celular. */
.hero__carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.1s ease;
}
.hero__slide.is-active { opacity: 1; z-index: 2; }
/* <picture> necesita tamaño explícito: sin esto, el <img> de adentro
   no sabe respecto a qué medirse. */
.hero__slide picture { position: absolute; inset: 0; display: block; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Encuadre por slide en celular. Las fotos banner-0X-mobile.webp ya vienen
   recortadas SOLO de la zona limpia de cada foto (sin nada del texto de la
   imagen original), igual que su versión de escritorio. */
.hero__slide:nth-child(1) img { object-position: 50% 20%; }
.hero__slide:nth-child(2) img { object-position: 50% 50%; }
.hero__slide:nth-child(3) img { object-position: 32% 50%; }

/* Degradado inferior + izquierdo para que el texto blanco siempre sea
   legible y para tapar cualquier texto de la foto original que quede
   dentro del recorte, sin importar el ancho de pantalla. */
.hero__scrim {
  position: absolute; inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(42,38,34,0) 40%, rgba(42,38,34,0.55) 78%, rgba(42,38,34,0.78) 100%),
    linear-gradient(90deg, rgba(35,31,27,0.72) 0%, rgba(35,31,27,0.4) 34%, rgba(35,31,27,0) 58%);
}
.hero__overlay {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px var(--container-pad) 56px;
}
.hero__caption { max-width: 560px; color: var(--white); }
.hero__eyebrow { color: var(--sand-light) !important; }
.hero__caption h2 {
  color: var(--white);
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.15;
  margin: 10px 0 18px;
  text-wrap: balance;
}

.hero__dots {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 9px;
}
.hero__dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 0; padding: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero__dots button.is-active {
  background: var(--white);
  transform: scale(1.35);
}

/* ---------- Propuesta de valor ---------- */
.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.value-card {
  background: var(--cream-soft);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.value-card__icon {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  color: var(--sand-dark);
}
.value-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.value-card p {
  font-size: 14px;
  color: var(--brown-soft);
}

/* ---------- Tratamientos destacados ---------- */
.treatments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.treatment-card {
  background: var(--cream-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.treatment-card__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--sand-light);
}
.treatment-card__media img {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.4s ease;
}
.treatment-card__media img.is-loaded { opacity: 1; }
.treatment-card:hover .treatment-card__media img.is-loaded { transform: scale(1.05); }
/* Lipopapada: la foto es más ancha que las demás (recorte 4:3 la deja
   corta el sobrante a los lados); este encuadre centra las cajas y el
   frasco del producto en vez de cortarlos por la mitad. */
.treatment-card__media img[src*="lipopapada"] { object-position: 38% 50%; }
/* Reemplazo elegante mientras no exista una foto real con ese nombre de
   archivo. En cuanto se agregue la foto (mismo nombre, en
   assets/img/tratamientos/), la imagen la reemplaza automáticamente. */
.treatment-card__placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--sand-dark);
  background: repeating-linear-gradient(135deg, var(--sand-light), var(--sand-light) 10px, #eae5de 10px, #eae5de 20px);
}
.treatment-card__placeholder svg { width: 40px; height: 40px; opacity: 0.75; }
.treatment-card__placeholder span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--cream-soft);
  padding: 3px 9px;
  border-radius: 999px;
}
.treatment-card__body { padding: 20px 22px 24px; }
.treatment-card__cat {
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sand-dark);
  font-weight: 700;
}
.treatment-card h3 {
  font-size: 20px;
  margin: 8px 0 10px;
}
.treatment-card p.desc {
  font-size: 14px;
  color: var(--brown-soft);
  margin-bottom: 16px;
}
.treatment-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed rgba(42,38,34,0.15);
  padding-top: 14px;
}
.treatment-card__price {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.3;
}
.treatment-card__price small {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--brown-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.treatment-card__price small span { font-family: var(--font-sans); }
.treatments-cta { text-align: center; margin-top: 34px; }
.treatments-note {
  margin-top: 30px;
  font-size: 12.5px;
  color: var(--brown-soft);
  text-align: center;
}
.booking-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--brown-soft);
  text-align: center;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.booking-note strong { color: var(--brown-text); }
.booking-note a { text-decoration: underline; }

/* ---------- Catálogo completo (acordeón) ---------- */
.catalog {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.catalog__item {
  background: var(--cream-soft);
  border: 1px solid rgba(42,38,34,0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.catalog__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 17px;
}
.catalog__item summary::-webkit-details-marker { display: none; }
.catalog__item summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 20px;
  color: var(--sand-dark);
  flex: none;
  transition: transform 0.2s ease;
}
.catalog__item[open] summary::after { transform: rotate(45deg); }
.catalog__cat-name { flex: 1; }
.catalog__count {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brown-soft);
  white-space: nowrap;
}
.catalog__list {
  border-top: 1px solid rgba(42,38,34,0.08);
  padding: 6px 20px 10px;
}
.catalog__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(42,38,34,0.12);
}
.catalog__row:last-child { border-bottom: none; }
.catalog__row-main h4 { font-family: var(--font-sans); font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.catalog__row-main p { font-size: 13px; color: var(--brown-soft); }
.catalog__row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.catalog__price { font-family: var(--font-serif); font-size: 16.5px; }
.catalog__duration {
  font-size: 11.5px;
  color: var(--brown-soft);
  background: var(--sand-light);
  padding: 3px 9px;
  border-radius: 999px;
}
.btn--sm { padding: 9px 16px; font-size: 12.5px; margin-left: auto; }

/* ---------- Sobre la clínica ---------- */
.about {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.about h2 { font-size: clamp(26px, 5vw, 34px); margin-bottom: 20px; }
.about p {
  color: var(--brown-soft);
  font-size: 15.5px;
  margin-bottom: 16px;
}
.about p:last-child { margin-bottom: 0; color: var(--brown-text); font-style: italic; }

/* ---------- ¿Qué estás buscando? ---------- */
.finder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.finder-card {
  background: var(--white);
  border: 1px solid rgba(42,38,34,0.08);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.finder-card:hover {
  border-color: var(--sand-dark);
  transform: translateY(-3px);
}
.finder-card__icon {
  width: 30px; height: 30px;
  margin: 0 auto 12px;
  color: var(--brown-text);
}
.finder-card span {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}
.finder-card small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--brown-soft);
  font-weight: 400;
}

/* ---------- Profesionales ---------- */
.pros-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.pro-card {
  background: var(--cream-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.pro-card__photo {
  aspect-ratio: 3/4;
  background: var(--sand-light);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.pro-card__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.pro-card__placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--sand-dark);
  background: repeating-linear-gradient(135deg, var(--sand-light), var(--sand-light) 10px, #eae5de 10px, #eae5de 20px);
}
.pro-card__placeholder svg { width: 54px; height: 54px; opacity: 0.7; }
.pro-card__placeholder span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--cream-soft);
  padding: 4px 10px;
  border-radius: 999px;
}
.pro-card__body { padding: 22px 20px 26px; }
.pro-card h3 { font-size: 20px; margin-bottom: 4px; }
.pro-card__role {
  font-size: 12.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sand-dark);
  font-weight: 700;
  margin-bottom: 14px;
  display: block;
}
.pro-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.pro-card__tags span {
  font-size: 11.5px;
  background: var(--sand-light);
  color: var(--brown-text);
  padding: 5px 10px;
  border-radius: 999px;
}
.pro-card__pending {
  font-size: 13px;
  color: var(--brown-soft);
  font-style: italic;
}
.pro-card__cta {
  margin-top: 18px;
  width: 100%;
}

/* ---------- Resultados ---------- */
.results-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px var(--container-pad) 18px;
  margin: 0 calc(var(--container-pad) * -1);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-pad);
  -webkit-overflow-scrolling: touch;
}
.results-scroll::-webkit-scrollbar { display: none; }
.result-card {
  scroll-snap-align: start;
  flex: 0 0 78%;
  background: var(--cream-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.result-card__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.result-card__images figure { margin: 0; position: relative; aspect-ratio: 3/4; overflow: hidden; }
.result-card__images img { width: 100%; height: 100%; object-fit: cover; }
.result-card__images figcaption {
  position: absolute;
  bottom: 8px; left: 8px;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(255,255,255,0.85);
  padding: 3px 8px;
  border-radius: 999px;
}
.result-card__label { padding: 14px 16px 18px; font-size: 14.5px; font-weight: 600; }
.results-disclaimer {
  text-align: center;
  font-size: 12.5px;
  color: var(--brown-soft);
  margin-top: 8px;
  padding: 0 20px;
}

/* ---------- CTA Reservar / AgendaPro ---------- */
.cta-reserve { text-align: center; max-width: 620px; margin: 0 auto; }
.cta-reserve h2 { font-size: clamp(24px, 5vw, 32px); margin-bottom: 12px; }
.cta-reserve p { color: var(--brown-soft); }

.booking-widget {
  margin: 32px auto 0;
  max-width: 720px;
}
.booking-widget__frame-wrap {
  display: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--white);
}
.booking-widget__frame-wrap iframe {
  width: 100%;
  height: 760px;
  border: 0;
  display: block;
}
.booking-widget__mobile {
  background: var(--cream-soft);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.booking-widget__mobile svg { margin: 0 auto 14px; color: var(--sand-dark); }
.booking-widget__mobile h3 { font-size: 19px; margin-bottom: 8px; }
.booking-widget__mobile p { color: var(--brown-soft); font-size: 14px; margin-bottom: 20px; }
.booking-widget__fallback {
  text-align: center;
  font-size: 12.5px;
  color: var(--brown-soft);
  margin-top: 14px;
}
.booking-widget__fallback a { text-decoration: underline; font-weight: 600; color: var(--brown-text); }

.cta-reserve__whatsapp { text-align: center; margin-top: 20px; }

.booking-placeholder {
  margin: 28px auto 0;
  max-width: 720px;
  border: 1.5px dashed var(--sand-dark);
  border-radius: var(--radius-md);
  padding: 22px 18px;
  background: var(--cream-soft);
  font-size: 13px;
  color: var(--brown-soft);
  text-align: left;
}
.booking-placeholder strong { color: var(--brown-text); display: block; margin-bottom: 6px; font-size: 14px; }

@media (min-width: 640px) {
  .booking-widget__frame-wrap { display: block; }
  .booking-widget__mobile { display: none; }
  .treatments-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Contacto ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.contact-card {
  background: var(--cream-soft);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-card);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-card__icon {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--sand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brown-text);
}
.contact-card h3 { font-size: 15.5px; font-family: var(--font-sans); font-weight: 700; margin-bottom: 4px; }
.contact-card p { font-size: 14px; color: var(--brown-soft); }
.contact-card .pending { color: var(--sand-dark); font-style: italic; }
.contact-card__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brown-text);
  text-decoration: underline;
}
.schedule-table { margin-top: 4px; border-collapse: collapse; }
.schedule-table td {
  font-size: 13px;
  color: var(--brown-soft);
  padding: 2px 0;
}
.schedule-table td:first-child { padding-right: 16px; color: var(--brown-text); font-weight: 600; }
.map-embed {
  margin-top: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--sand-light);
  box-shadow: var(--shadow-card);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Footer ---------- */
.footer {
  background: var(--brown-text);
  color: #D9D2C8;
  padding: 48px 0 28px;
}
.footer__top {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 32px;
}
.footer__logo img { height: 26px; margin-bottom: 12px; filter: brightness(0) invert(1); }
.footer__tag { font-size: 13.5px; color: #B7AC9D; max-width: 320px; }
.footer__col h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 14px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 14px; opacity: 0.9; }
.footer__col a:hover { opacity: 1; text-decoration: underline; }
.footer__social { display: flex; gap: 10px; margin-top: 6px; }
.footer__social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  font-size: 12px;
  color: #A99F92;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- WhatsApp flotante (siempre visible) ---------- */
.fab-whatsapp {
  position: fixed;
  right: 18px;
  /* En móvil queda por encima de la barra inferior fija para no taparla */
  bottom: calc(var(--bottombar-h) + 16px);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(37,211,102,0.45);
  z-index: 95;
}

/* ---------- Barra inferior fija (móvil) ---------- */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--bottombar-h);
  display: grid;
  grid-template-columns: 1fr;
  z-index: 90;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
}
.bottom-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.bottom-bar__reserve { background: var(--brown-text); color: white; }

/* Marcador visual de contenido pendiente */
.pending-flag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #8A5A2B;
  background: #F5E3CC;
  border: 1px solid #E4C79A;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

/* =========================================================
   Tablet / Desktop (768px+)
   ========================================================= */
@media (min-width: 768px) {
  :root { --container-pad: 32px; }
  .section { padding: 90px 0; }

  .header__nav-desktop {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    font-weight: 600;
  }
  .header__nav-desktop a { position: relative; padding: 6px 0; }
  .header__nav-desktop a.is-disabled { opacity: 0.45; pointer-events: none; }
  .header__cta-desktop { display: inline-flex; }
  .header__burger, .mobile-menu { display: none; }

  .bottom-bar { display: none; }
  .fab-whatsapp { bottom: 24px; right: 24px; }
  body { padding-bottom: 0; }

  .hero__carousel { aspect-ratio: 16 / 8; }
  .hero__overlay { padding: 28px 32px 64px; }
  /* Encuadre para las fotos de escritorio (banner-0X-desktop.webp): estas
     versiones ya vienen recortadas SOLO de la zona limpia de cada foto
     (sin nada del texto de la imagen original), por lo que el recorte
     horizontal ya no puede "descubrir" texto — solo ajustamos qué parte
     vertical de la foto se ve. */
  .hero__slide:nth-child(1) img { object-position: 50% 35%; }
  .hero__slide:nth-child(2) img { object-position: 50% 50%; }
  .hero__slide:nth-child(3) img { object-position: 50% 42%; }
  .hero__caption h2 { margin-bottom: 22px; }

  .values { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .finder-grid { grid-template-columns: repeat(4, 1fr); }
  .pros-grid { grid-template-columns: repeat(3, 1fr); }

  .result-card { flex: 0 0 380px; }

  .contact-grid { grid-template-columns: repeat(2, 1fr); }

  .footer__top { flex-direction: row; justify-content: space-between; }
  .footer__cols { display: flex; gap: 64px; }
  .footer__bottom { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
  .hero__carousel { aspect-ratio: 21 / 8; }
  .treatments-grid { grid-template-columns: repeat(4, 1fr); }
  .contact-grid { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   Páginas legales (Política de Privacidad / Términos)
   ========================================================= */
.draft-banner {
  background: #F5E3CC;
  color: #6B4A1E;
  border-bottom: 1px solid #E4C79A;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 12px 20px;
  line-height: 1.5;
}
.header--static {
  position: static;
  backdrop-filter: none;
  background: var(--cream-soft);
}
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0 80px;
}
.legal-page .container { padding: 0 var(--container-pad); }
.legal-page h1 {
  font-size: clamp(28px, 6vw, 38px);
  margin: 10px 0 6px;
}
.legal-updated {
  font-size: 12.5px;
  color: var(--brown-soft);
  margin-bottom: 28px;
}
.legal-page h2 {
  font-size: 19px;
  margin: 34px 0 10px;
}
.legal-page p {
  font-size: 14.5px;
  color: var(--brown-soft);
  margin-bottom: 12px;
}
.legal-page ul {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--brown-soft);
  font-size: 14.5px;
}
.legal-page li { margin-bottom: 8px; }
.legal-page strong { color: var(--brown-text); }
.legal-footer-note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(42,38,34,0.12);
  font-size: 12.5px;
  font-style: italic;
  color: var(--sand-dark);
}