/* =========================================================================
   MB Estética — Criolipólisis (home)
   Reconstrucción estática de la landing original de Instapage.

   El original está maquetado sobre una grilla de rem: 25rem de ancho útil en
   mobile y 60rem en desktop, con el tamaño de raíz variable. Se conserva esa
   escala para que las proporciones sean idénticas a las del original.
   ========================================================================= */

/* ---------- Escala tipográfica base (igual que el original) --------------- */

:root                                              { font-size: 4vw;    }  /* < 400px  */
@media (min-width: 401px)                          { :root { font-size: 16px;   } }
@media (min-width: 768px) and (max-width: 1200px)  { :root { font-size: 1.33vw; } }
@media (min-width: 1201px)                         { :root { font-size: 16px;   } }

/* ---------- Reset mínimo -------------------------------------------------- */

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

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

h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: inherit; }
ul            { margin: 0; padding: 0; list-style: none; }
img           { display: block; max-width: 100%; height: auto; }
a             { color: inherit; text-decoration: none; }
strong        { font-weight: 700; }

/* La ficha del formulario del hero desborda hacia la sección siguiente:
   el recorte horizontal evita que aparezca scroll lateral. */
main { overflow: hidden; }

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

/* ---------- Barra superior e inferior ------------------------------------ */

.bar        { background: #ffb4ca; }
.bar__inner { display: flex; align-items: flex-start; justify-content: center;
              min-height: 8.4375rem; padding-top: 1rem; }
.bar__logo  { width: 8.5625rem; }
.bar__phone { display: none; }

.bar--footer .bar__inner { min-height: 9.125rem; }

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  position: relative;
  background: url(../img/fondo-hero.jpg) no-repeat 62% 94% / cover;
}
.hero::before {                     /* velo blanco del original */
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: .26;
}

.hero__inner  { min-height: 47.5rem; padding: 2rem 0 0 .9375rem; }
.hero__kicker { font-size: 2rem; line-height: 2rem; font-weight: 700; color: #fff; }
.hero__title  { margin-top: .6875rem; max-width: 24.0625rem;
                font-size: 3.0714rem; line-height: 3.0625rem; color: #292929; }

.hero__list    { margin-top: .5625rem; }
.hero__list li { padding-left: 2.4375rem;
                 font-size: 1.7857rem; line-height: 2.125rem; color: #fff;
                 background: url(../img/check.png) no-repeat .5625rem center / 1.5rem 1.4444rem; }

/* Ficha del formulario */
.card        { position: absolute; top: 18rem; left: 2.625rem; width: 18.1875rem; }
.card__title { display: flex; align-items: center; justify-content: center;
               min-height: 3.25rem; border-radius: 1.25rem 1.25rem 0 0;
               background: #ffb4ca; color: #fff; font-weight: 700;
               font-size: 1.3622rem; line-height: 1.9375rem; text-align: center; }
.card__body  { min-height: 23.5625rem; padding: 1.25rem 1.0625rem;
               border-radius: 0 0 .5rem .5rem; background: rgba(255, 255, 255, .77); }

/* ---------- Formulario ---------------------------------------------------- */

.form                       { font-size: 1.25rem; }
.form input, .form textarea { display: block; width: 100%; height: 3.5rem;
                              margin: .5rem 0; padding: .5rem .625rem .5625rem;
                              font-family: inherit; font-size: inherit;
                              color: #405364; background: #fff;
                              border: 1px solid #c6d2dd; border-radius: 3px; }
.form textarea              { resize: none; }
.form ::placeholder         { color: #405364; opacity: 1; }
.form input:focus,
.form textarea:focus        { outline: 2px solid #e17b99; outline-offset: 1px; }

.form__btn {
  display: block;
  width: 7.1875rem;
  height: 2.375rem;
  margin: .75rem auto 0;
  border: 0;
  border-radius: 5px;
  background: #ffb4ca;
  color: #fff;
  font-family: Montserrat, "Open Sans", Arial, sans-serif;
  font-weight: 600;
  font-size: .9907rem;
  cursor: pointer;
  transition: background .3s;
}
.form__btn:hover           { background: #000; }
.form__btn[disabled]       { opacity: .6; cursor: default; }
.form__msg:not(:empty)     { margin-top: .5rem; font-size: .875rem; line-height: 1.3;
                             color: #37465a; text-align: center; }

/* ---------- Claim gris ---------------------------------------------------- */

.claim        { background: #a1a1a1; color: #fff; }
.claim__inner { min-height: 8.4375rem; padding-top: 1.6875rem; }
.claim__text  { font-size: 1.7337rem; line-height: 1.75rem; text-align: center; }

/* ---------- ¿Qué es la criolipólisis? ------------------------------------- */

.intro__inner { min-height: 20.125rem; }
.intro__img   { display: none; }                       /* oculta en mobile, igual que el original */
.intro__text  { padding: 1.625rem 0 0 1.25rem; }
.intro__title { max-width: 22.5rem; font-weight: 700; color: #e17b99;
                font-size: 1.3622rem; line-height: 1.625rem; }
.intro__body  { margin-top: 1.1875rem; max-width: 22.5rem;
                font-size: 1.2384rem; line-height: 1.75rem; }

/* ---------- Zonas del cuerpo ---------------------------------------------- */

.zonas {
  position: relative;
  background: #656262 url(../img/fondo-zonas.jpg) no-repeat 32% 59% / cover;
}
.zonas::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #4d3f3f;
  opacity: .56;
}

.zonas__inner { min-height: 26.5625rem; padding-top: 1.4375rem; color: #fff; }
.zonas__title { max-width: 22.5rem; margin: 0 auto; font-weight: 700; text-align: center;
                font-size: 2.1672rem; line-height: 2.625rem; }

.zonas__list    { margin-top: 2rem; padding-left: 5.75rem; }
.zonas__list li { padding-left: 2.75rem;
                  font-size: 2.0055rem; line-height: 3.3125rem;
                  background: url(../img/check.png) no-repeat 0 center / 2rem 1.875rem; }

/* ---------- Beneficios ---------------------------------------------------- */

.beneficios        { background: #ffd7e2; }
.beneficios__inner { min-height: 28.25rem; padding: 1.375rem 0 0 .9375rem; }
.beneficios__img   { display: none; }                  /* oculta en mobile, igual que el original */
.beneficios__title { max-width: 23.4375rem; font-weight: 700; color: #000;
                     font-size: 1.3622rem; line-height: 1.625rem; }
.beneficios__body  { margin-top: 1.375rem; max-width: 22.5rem; color: #000;
                     font-size: 1.1765rem; line-height: 1.6875rem; }

/* ---------- Dos ventajas -------------------------------------------------- */

.ventajas__inner { display: grid; row-gap: 1.75rem;
                   min-height: 34.25rem; padding: 1.875rem 1.375rem 0 1.125rem; }

.ventaja__title { display: flex; align-items: center;
                  min-height: 2.1875rem; padding-left: .625rem;
                  border-radius: .5625rem; background: #ffadc6;
                  color: #fff; font-weight: 700;
                  font-size: 1.1765rem; line-height: 1.4375rem; }
.ventaja__body  { margin-top: .6875rem; font-size: 1.1765rem; line-height: 1.4375rem; }

/* ---------- Método no invasivo -------------------------------------------- */

.metodo {
  position: relative;
  background: #7e7e7e url(../img/fondo-metodo.jpg) no-repeat 53% 77% / cover;
}
.metodo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: .5;
}

.metodo__inner { min-height: 17.1875rem; padding-top: 5.5rem; }
.metodo__title { font-weight: 600; text-align: center; color: #525252;
                 font-size: 2.4768rem; line-height: 3rem; }

/* ---------- Cierre -------------------------------------------------------- */

.cierre__inner { min-height: 20.125rem; }
.cierre__img   { display: none; }                      /* oculta en mobile, igual que el original */
.cierre__text  { max-width: 22.5rem; padding: 1.5625rem 0 0 .875rem;
                 font-size: 1.1765rem; line-height: 1.6875rem; }

/* =========================================================================
   Desktop
   ========================================================================= */

@media (min-width: 768px) {

  .container { max-width: 60rem; }

  /* ---- Barras ---- */
  .bar__inner,
  .bar--footer .bar__inner { align-items: center; justify-content: space-between;
                             min-height: 8.0625rem; padding: 0 1.375rem 0 1.8125rem; }
  .bar__logo               { width: 7.5625rem; }
  .bar__phone              { display: flex; align-items: center; gap: .4375rem;
                             color: #fff; font-weight: 600;
                             font-size: 1.7337rem; line-height: 2.4375rem; }
  .bar__phone img          { width: 2.8125rem; }
  .bar__phone:hover span   { text-decoration: underline; }

  /* ---- Hero ---- */
  .hero          { background-position: 50% 50%; }
  .hero::before  { display: none; }                    /* el velo es opacity:0 en desktop */

  .hero__inner   { min-height: 33.3125rem; padding: 15.0625rem 0 0 1.8125rem; }
  .hero__kicker  { font-size: 2.5387rem; line-height: 2.5625rem; }
  .hero__title   { margin-top: 1.125rem; max-width: 31.375rem;
                   font-size: 3.5294rem; line-height: 3.5625rem; }

  .hero__list    { margin-top: .1875rem; }
  .hero__list li { padding-left: 2.5rem;
                   font-size: 2.0433rem; line-height: 2.5rem;
                   background-position: .125rem center;
                   background-size: 1.6875rem 1.625rem; }

  .card          { top: 15.5rem; left: 38.5rem; }
  .card__title   { font-size: 1.2384rem; line-height: 1.75rem; }

  /* ---- Formulario ---- */
  .form                       { font-size: .8125rem; }
  .form input, .form textarea { height: 2.6875rem; font-size: .9375rem; }
  .form textarea              { height: 6.25rem; }
  .form__btn                  { margin-top: .4375rem; }

  /* ---- Claim gris ---- */
  .claim__inner { min-height: 10.6875rem; padding: 1.4375rem 0 0 1.875rem; }
  .claim__text  { max-width: 26.625rem; text-align: left;
                  font-size: 2.1672rem; line-height: 2.625rem; }

  /* ---- ¿Qué es la criolipólisis? ---- */
  .intro__inner { display: flex; min-height: 19.6875rem; }
  .intro__img   { display: block; flex: none; width: 22.25rem; margin-left: 1.875rem; }
  .intro__text  { padding: 2.125rem 0 0; margin-left: 4.625rem; }
  .intro__title { max-width: 27.625rem; line-height: 1.9375rem; }
  .intro__body  { margin-top: 1.25rem; max-width: 26.75rem;
                  font-size: 1.2384rem; line-height: 2rem; }

  /* ---- Zonas del cuerpo ---- */
  .zonas          { background-attachment: fixed; }
  .zonas__inner   { min-height: 16.3125rem; padding-top: 2.1875rem; }
  .zonas__title   { max-width: none; font-size: 2.3529rem; line-height: 3.8125rem; }

  .zonas__list    { display: grid; grid-template-columns: 24.0625rem auto;
                    grid-template-rows: auto auto; grid-auto-flow: column;
                    margin-top: 1.75rem; padding-left: 9.625rem; }
  .zonas__list li { padding-left: 2.375rem;
                    font-size: 1.7337rem; line-height: 2.8125rem;
                    background-size: 1.6875rem 1.5625rem; }

  /* ---- Beneficios ---- */
  .beneficios__inner { display: flex; justify-content: space-between;
                       min-height: 31.25rem; padding: 0 2.375rem 0 0; }
  .beneficios__text  { padding: 2.125rem 0 0 1.3125rem; }
  .beneficios__img   { display: block; flex: none; width: 28.9375rem; height: 31.25rem;
                       object-fit: cover; }
  .beneficios__title { max-width: 26.5625rem; line-height: 1.9375rem; }
  .beneficios__body  { margin-top: 1.125rem; max-width: 27.5rem;
                       font-size: 1.2384rem; line-height: 2rem; }

  /* ---- Dos ventajas ---- */
  .ventajas__inner { grid-template-columns: 1fr 1fr; column-gap: 2.375rem; row-gap: 0;
                     min-height: 20.3125rem; padding: 2.25rem 2.5rem 0 .75rem; }
  .ventaja__title  { font-size: 1.3622rem; line-height: 1.9375rem; }
  .ventaja__body   { margin-top: 1.3125rem; font-size: 1.2384rem; line-height: 1.75rem; }

  /* ---- Método no invasivo ---- */
  .metodo        { background-attachment: fixed; }
  .metodo__inner { min-height: 15.3125rem; padding: 5.6875rem 0 0 9.6875rem; }
  .metodo__title { text-align: left; font-size: 2.7864rem; line-height: 3.9375rem; }

  /* ---- Cierre ---- */
  .cierre__inner { display: flex; min-height: 22.8125rem; }
  .cierre__img   { display: block; flex: none; width: 26.5rem; margin-left: -.125rem; }
  .cierre__text  { max-width: 29.0625rem; padding: 3.5625rem 0 0 3.3125rem;
                   font-size: 1.2384rem; line-height: 2rem; }
}

/* =========================================================================
   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-family: "Open Sans", Arial, sans-serif; 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; } }