/* ==========================================================================
   Fimedical — Ultherapy
   Base = mobile (ancho de diseño 25rem / 400px).
   Desktop a partir de 768px (ancho de diseño 60rem / 960px).
   El tipo de letra raíz escala con el viewport, igual que el original.
   ========================================================================== */

:root {
  font-size: 16px;

  --azul:        #2480B1;   /* azul de marca */
  --azul-osc:    #175EA9;   /* script "Ultherapy" sobre la tarjeta */
  --gris-azul:   #C2CFD4;   /* fondos y marcos */
  --borde-input: #A3BAC6;
  --texto:       #424242;
}

@media screen and (max-width: 400px)  { :root { font-size: 4vw; } }
@media screen and (min-width: 768px) and (max-width: 1200px) { :root { font-size: 1.33vw; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--texto);
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { overflow-x: hidden; }

h1, h2, p { margin: 0; font-size: inherit; font-weight: inherit; }
img { max-width: 100%; height: auto; }

.script     { font-family: Sacramento, cursive; font-weight: 400; }
.is-blue    { color: var(--azul); }

.wrap {
  position: relative;
  max-width: 25rem;
  margin: 0 auto;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  background: url(../img/hero-ultherapy.jpg) no-repeat 0 65% / cover;
}

.hero::before {                       /* velo gris azulado del original */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gris-azul);
  opacity: .19;
}

.hero__inner {
  z-index: 1;
  min-height: 69.125rem;
  padding-top: 2.5rem;
}

.hero__logo {
  display: block;
  width: 9.25rem;
  height: auto;
  margin: 0 auto;
}

.hero__copy { margin-top: 2.7244rem; }

.hero__title {
  color: var(--azul);
  font-size: 5.5728rem;
  line-height: 9rem;
  text-align: center;
}

.hero__claim {
  width: 22.5rem;
  min-height: 9.875rem;
  margin: -.5625rem auto 0;
  padding: 1.1875rem .625rem .5rem 1.25rem;
  border: 1px solid var(--azul);
  background: rgba(36, 128, 177, .24);
  color: #fff;
  font-size: .9907rem;
  line-height: 1.375rem;
}

.hero__approval {
  width: 22.0625rem;
  margin: 1rem 0 0 1.8125rem;
  font-size: 1.1355rem;
  line-height: 1.5625rem;
}

.hero__seals {
  display: flex;
  align-items: center;
  gap: .3125rem;
  margin: .8125rem 0 0 1.4375rem;
  font-size: .907rem;
}

.hero__seal { opacity: .63; }
.hero__seal--fda   { width: 4.75rem;   height: 1.8125rem; }
.hero__seal--anmat { width: 6.5625rem; height: 2.1875rem; }

.hero__card { margin: 1.9375rem auto 0; width: 21.125rem; }


/* ==========================================================================
   TARJETA DE CONTACTO (hero y pie) + FORMULARIO
   ========================================================================== */

.card {
  background: rgba(194, 207, 212, .73);
  padding: 1.5625rem 1.1875rem 1.6875rem;
}

.card__title {
  color: #fff;
  font-size: 1.2384rem;
  line-height: 1.5rem;
}

.card__title .script {
  color: var(--azul-osc);
  font-size: 1.9814rem;
  line-height: inherit;
  vertical-align: -.35rem;
}

.card__subtitle {
  margin-top: .375rem;
  color: #fff;
  font-size: 1.2384rem;
  line-height: 1.5rem;
  text-align: center;
}

.lead-form { padding-top: .5rem; margin-top: .6875rem; }

.lead-form__input {
  display: block;
  width: 100%;
  height: 3.5rem;
  margin: 0 0 1rem;
  padding: .5rem .625rem .5625rem;
  border: 1px solid var(--borde-input);
  border-radius: 3px;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 1.25rem;
}

.lead-form__input::placeholder { color: var(--azul); opacity: 1; }
.lead-form__input:focus        { outline: 2px solid var(--azul); outline-offset: -2px; }
.lead-form__input:user-invalid { border-color: #E12627; }

.lead-form__input--area {
  margin-bottom: .1875rem;
  resize: none;
  vertical-align: top;
}

.lead-form__btn {
  display: block;
  width: 100%;
  height: 3.25rem;
  border: 0;
  background: var(--azul);
  color: #fff;
  font-family: inherit;
  font-size: 1.1146rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background .3s;
}

.lead-form__btn:hover     { background: #000; }
.lead-form__btn[disabled] { opacity: .7; cursor: default; }

.lead-form__msg {
  margin-top: .75rem;
  color: #fff;
  font-size: .875rem;
  line-height: 1.3;
}

.lead-form__msg:empty { display: none; }


/* ==========================================================================
   BANDAS AZULES
   ========================================================================== */

.band { background: var(--azul); color: #fff; }

.band--results .wrap { min-height: 7.0625rem; }

.band__box  { padding-top: 1.75rem; text-align: center; }

.band__line { font-size: 1.1146rem; line-height: 1.8125rem; }
.band__line + .band__line { margin-top: .625rem; }

.band__script {
  margin: 0 .5rem;
  font-size: 3.096rem;
  line-height: inherit;
  vertical-align: middle;
}

.band--now .wrap { min-height: 8.75rem; padding-top: 1.4375rem; }

.band__line--wide {
  width: 22.5rem;
  margin: 0 auto;
  font-size: 1.1765rem;
  line-height: 1.875rem;
  text-align: center;
}


/* ==========================================================================
   EL TRATAMIENTO
   ========================================================================== */

.treatment__head { min-height: 5.8125rem; padding-top: 1.375rem; }

.treatment__title {
  color: var(--texto);
  font-size: 2.3529rem;
  line-height: 3.8125rem;
  text-align: center;
}

.treatment__body { min-height: 55.75rem; padding-top: 1.6875rem; }

.treatment__text {
  width: 22rem;
  margin-left: 1.5rem;
  font-size: .9288rem;
  line-height: 1.5rem;
}

.treatment__text p + p { margin-top: 1.5rem; }

.treatment__img {
  display: block;
  width: 24.9375rem;
  height: 21.75rem;
  margin-top: .75rem;
  object-fit: cover;
  object-position: 54% 55%;
  background: var(--gris-azul);
}


/* ==========================================================================
   ANTES & DESPUÉS
   ========================================================================== */

.ba {
  background: linear-gradient(var(--gris-azul) 18.5rem, #fff 18.5rem);
  padding-bottom: 2rem;
}

.ba__head { padding-top: 2.5rem; text-align: center; color: #fff; }

.ba__title {
  font-size: 1.7337rem;
  line-height: 2.125rem;
  font-weight: 400;
}

.ba__subtitle {
  width: 22.5rem;
  margin: 1.1875rem auto 0;
  font-size: 1.0681rem;
  line-height: 1.5rem;
}

.ba__grid {
  display: grid;
  gap: .75rem;
  margin: 2.6875rem .1875rem 0 2.375rem;
}

.ba__pair {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .4375rem;
}

.ba__item { margin: 0; }

.ba__photo {
  display: block;
  width: 100%;
  aspect-ratio: 17.25 / 14.75;
  object-fit: cover;
  border: .1875rem solid var(--gris-azul);
}

.ba__pair--1 .ba__photo,
.ba__pair--2 .ba__photo { border-color: #fff; }

/* recortes exactos del original */
.ba__photo--p1a { object-position: 53% 100%; }
.ba__photo--p1d { object-position: 61%  67%; }
.ba__photo--p2a { object-position: 61% 100%; }
.ba__photo--p2d { object-position: 63% 100%; }
.ba__photo--p5a { object-position: 57% 100%; }
.ba__photo--p6a { object-position: 51%  57%; }
.ba__photo--p6d { object-position: 65% 100%; }

.ba__caption {
  height: 1.875rem;
  border: 1px solid var(--gris-azul);
  background: var(--gris-azul);
  color: #fff;
  font-size: .9452rem;
  line-height: 1.75rem;
  text-align: center;
}

.ba__tag {
  position: absolute;
  left: -2.375rem;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
}

.ba__tag--rostro { height: 5.13rem;   }
.ba__tag--papada { height: 7.0675rem; }
.ba__tag--cuello { height: 5.265rem;  }
.ba__tag--frente { height: 5.1107rem; }
.ba__tag--escote { height: 4.8682rem; }


/* ==========================================================================
   FIMEDICAL (bloque institucional + segundo formulario)
   ========================================================================== */

.about__inner { min-height: 20.8125rem; padding-top: 1.6875rem; }

.about__title {
  color: var(--azul);
  font-size: 3.0341rem;
  line-height: 4.875rem;
  text-align: center;
}

.about__rule { display: none; }

.about__text p {
  width: 22.25rem;
  margin: 1.125rem 0 0 1.5625rem;
  color: var(--azul);
  font-size: 1.1146rem;
  line-height: 1.8125rem;
}

.about__card { display: none; }


/* ==========================================================================
   DISCLAIMER + PIE
   ========================================================================== */

.disclaimer .wrap { padding: 1rem 0 1.5rem; }

.disclaimer p {
  width: 21.6875rem;
  margin: 0 auto;
  color: var(--azul);
  font-size: .805rem;
  line-height: 1.125rem;
  text-align: center;
}

.footer .wrap { min-height: 7.75rem; padding-top: 1.3125rem; }

.footer__logo {
  display: block;
  width: 7.75rem;
  height: auto;
  margin: 0 auto;
}


/* ==========================================================================
   ORDEN EN MOBILE
   El disclaimer va justo debajo de la grilla de antes/después.
   ========================================================================== */

@media screen and (max-width: 767px) {
  main { display: flex; flex-direction: column; }

  .hero           { order: 1; }
  .band--results  { order: 2; }
  .treatment      { order: 3; }
  .ba             { order: 4; }
  .disclaimer     { order: 5; }
  .band--now      { order: 6; }
  .about          { order: 7; }
  .footer         { order: 8; }

  .ba__pair--2 { display: none; }
  .ba__pair--1 { order: 1; }
  .ba__pair--4 { order: 2; }
  .ba__pair--3 { order: 3; }
  .ba__pair--5 { order: 4; }
  .ba__pair--6 { order: 5; }
}


/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media screen and (min-width: 768px) {

  .wrap { max-width: 60rem; }

  /* ---------- hero ---------- */

  .hero { background-position: 100% 55%; }

  .hero__inner { min-height: 48.9375rem; padding-top: 0; }

  .hero__logo {
    position: absolute;
    top: 2.0625rem;
    left: -4.5rem;
    width: 9.3125rem;
    margin: 0;
  }

  .hero__copy {
    position: absolute;
    top: 14.625rem;
    left: -4.625rem;
    width: 33.125rem;
    margin: 0;
  }

  .hero__title { text-align: left; }

  .hero__claim {
    width: 33.125rem;
    margin: -.9375rem 0 0;
    padding: 1.4375rem 1.25rem .5rem 1.125rem;
    font-size: 1.3622rem;
    line-height: 1.625rem;
  }

  .hero__approval {
    width: 22.875rem;
    margin: 1.5625rem 0 0 .5625rem;
    font-size: 1.1905rem;
    line-height: 1.6875rem;
  }

  .hero__seals {
    gap: .35rem;
    margin: .75rem 0 0 .125rem;
    font-size: .9397rem;
  }

  .hero__seal--fda   { width: 4.9375rem; height: 1.75rem;   }
  .hero__seal--anmat { width: 6.8125rem; height: 2.3125rem; }

  .hero__card {
    position: absolute;
    top: 11.625rem;
    left: 47.125rem;
    width: 21.25rem;
    margin: 0;
  }

  /* ---------- tarjeta / formulario ---------- */

  .card { padding: 1.5625rem 1.375rem 1.6875rem 1.125rem; }

  .card__title        { font-size: 1.2454rem; }
  .card__title .script { font-size: 1.9927rem; }

  .lead-form__input {
    height: 2.6875rem;
    font-size: .9375rem;
    margin-bottom: 1rem;
  }

  .lead-form__input--area { height: 6.25rem; margin-bottom: .875rem; }

  /* ---------- bandas ---------- */

  .band--results .wrap { min-height: 9.4375rem; }

  .band__box {
    width: 31.25rem;
    margin-left: 11.6875rem;
    padding-top: 2.9375rem;
  }

  .band__line   { font-size: 1.3622rem; line-height: 2.1875rem; }
  .band__line + .band__line { margin-top: 0; }
  .band__script { font-size: 3.7771rem; }

  .band--now .wrap { min-height: 9.75rem; padding-top: 2.6875rem; }

  .band__line--wide {
    width: 40.25rem;
    margin: 0 0 0 9.8125rem;
    font-size: 1.3622rem;
    line-height: 2.1875rem;
  }

  /* ---------- tratamiento ---------- */

  .treatment__head  { min-height: 8rem; padding-top: 1.625rem; }
  .treatment__title { font-size: 2.8514rem; line-height: 4.625rem; }

  .treatment__body  { min-height: 33.4375rem; padding-top: 0; }

  .treatment__text {
    position: absolute;
    top: 5rem;
    left: -1.6875rem;
    width: 28.25rem;
    margin: 0;
    font-size: .8669rem;
    line-height: 1.5625rem;
  }

  .treatment__text p + p { margin-top: 1.5625rem; }

  .treatment__img {
    position: absolute;
    top: 0;
    left: 34.125rem;
    width: 38.4375rem;
    height: 33.4375rem;
    max-width: none;
    margin: 0;
  }

  /* ---------- antes & después ---------- */

  .ba {
    background: linear-gradient(var(--gris-azul) 22.0625rem, #fff 22.0625rem);
    padding-bottom: 2.9375rem;
  }

  .ba__head     { padding-top: 3.0625rem; }

  .ba__subtitle {
    width: 32.3125rem;
    margin: 1.1875rem 0 0;
    line-height: 1.75rem;
  }

  .ba__grid {
    width: 76.3125rem;
    margin: 2.0625rem 0 0 -6.75rem;
    grid-template-columns: repeat(2, 35.375rem);
    column-gap: 5.5625rem;
    row-gap: 2.5rem;
  }

  .ba__pair  { grid-template-columns: repeat(2, 17.375rem); gap: .625rem; }
  .ba__photo { border-width: .25rem; }

  .ba__caption {
    height: 2.75rem;
    font-size: 1.4578rem;
    line-height: 2.625rem;
  }

  .ba__tag--rostro,
  .ba__tag--cuello { left: -4.125rem;  }
  .ba__tag--papada,
  .ba__tag--escote { left: -4.0625rem; }
  .ba__tag--frente { left: -4.8125rem; }

  .ba__tag--rostro { height: 6.75rem;   }
  .ba__tag--papada { height: 8.5625rem; }
  .ba__tag--cuello { height: 6.75rem;   }
  .ba__tag--frente { height: 6.75rem;   }
  .ba__tag--escote { height: 7.25rem;   }

  /* ---------- fimedical ---------- */

  .about__inner { min-height: 35.25rem; padding-top: 0; }

  .about__text {
    position: absolute;
    top: 8.125rem;
    left: 5.4375rem;
    width: 23.125rem;
  }

  .about__title { font-size: 3.096rem; line-height: 5rem; text-align: left; }

  .about__rule {
    display: block;
    width: 3.625rem;
    height: .625rem;
    border-bottom: 2px solid var(--azul);
  }

  .about__text p {
    width: 22.8125rem;
    margin: 1.5625rem 0 0;
  }

  .about__card {
    display: block;
    position: absolute;
    top: 2.5rem;
    left: 33.375rem;
    width: 21.125rem;
  }

  /* ---------- disclaimer / pie ---------- */

  .disclaimer .wrap { min-height: 5.5625rem; padding: 2.1875rem 0 0; }

  .disclaimer p {
    width: 52.8125rem;
    font-size: .8669rem;
    line-height: 1.375rem;
  }

  .footer .wrap  { min-height: 8.3125rem; padding-top: 2.25rem; }
  .footer__logo  { width: 7.75rem; }
}


/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

#wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 1000; }

#wa-btn { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }

#wa-popup {
  position: absolute;
  right: 0;
  bottom: 75px;
  width: 260px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
  font-size: 14px;
}

#wa-popup-header { background: #128C7E; color: #fff; padding: 12px 15px; font-weight: 600; }
#wa-popup-body   { padding: 15px; }
#wa-popup-msg    { margin: 0 0 12px; color: #333; }

#wa-send {
  width: 100%;
  background: #25D366;
  color: #fff;
  border: 0;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

@media (max-width: 480px) { #wa-float { right: 15px; bottom: 15px; } }