/* ==========================================================================
   Fimedical — EMTONE (celulitis)
   Reconstrucción de la landing de Instapage. HTML/CSS propio, sin dependencias.

   El original no traía layout de mobile: era un único diseño de 60rem (960px)
   que se achicaba proporcionalmente hasta quedar ilegible en un teléfono.
   Se conserva ese diseño tal cual de 768px para arriba y se agrega abajo un
   layout de mobile propio, con el mismo criterio que las otras cuatro landings
   de Fimedical: corte en 768px, columna de 25rem y tamaños usables.

   Por eso este archivo es desktop-first (al revés que las otras cuatro): las
   reglas base son las del diseño original y el bloque @media (max-width:767px)
   del final es el que arma el mobile.

   Tipografías y paleta del original: Maven Pro para títulos, Arvo para el
   texto, azules #006CA6 / #12587e y botón #08A7E1.
   ========================================================================== */

:root {
  font-size: 16px;

  --azul:        #006CA6;  /* franjas y textos destacados */
  --azul-osc:    #12587e;  /* títulos */
  --azul-caja:   #015F91;  /* caja de la sección "La ciencia" */
  --azul-link:   #1a76a7;  /* teléfono de la cabecera */
  --celeste:     #00ACEE;  /* "TONE" en los bullets */
  --celeste-btn: #08A7E1;  /* botón del formulario */
  --borde:       #A3BAC6;  /* borde de los campos */
  --texto:       #37465A;  /* texto corriente */
  --gris:        #2F2F2F;  /* rótulos de las zonas */

  --titulos: "Maven Pro", Helvetica, Arial, sans-serif;
  --texto-ff: Arvo, Georgia, serif;
}

/* De 768 a 1200 el diseño de 60rem se achica con el viewport, igual que el
   original. Por debajo de 768 manda el layout de mobile del final. */
@media (min-width: 768px) and (max-width: 1200px) { :root { font-size: 1.33vw; } }
@media (max-width: 400px) { :root { font-size: 4vw; } }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: #fff;
  color: var(--texto);
  font-family: var(--texto-ff);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
strong { font-weight: 700; }

.azul    { color: var(--azul); }
.celeste { color: var(--celeste); }

/* Columna de la página: el diseño es de 60rem y escala con la raíz */
.container {
  position: relative;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
}

/* Títulos (Maven Pro) */
.titulo {
  font-family: var(--titulos);
  font-weight: 500;
  font-size: 2.5387rem;
  line-height: 3.0625rem;
  color: var(--azul-osc);
}

.titulo--centrado { text-align: center; }
.titulo--claro    { color: #fff; }

/* Teléfono / WhatsApp de cabecera y pie */
.tel {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .5625rem;
  text-decoration: none;
}

.tel__icono  { width: 2.625rem; height: 2.625rem; }

.tel__numero {
  color: var(--azul-link);
  font-size: 1.7933rem;
  line-height: 2.5625rem;
  font-weight: 700;
}

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

.hero {
  position: relative;
  min-height: 46.125rem;
  background: url(../img/hero.jpg) no-repeat 50% 50% / cover #fff;
}

.barra {                              /* franja blanca translúcida superior */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8.125rem;
  background: rgba(255, 255, 255, .56);
}

.barra__inner { height: 100%; }

.barra__logo {
  position: absolute;
  top: .5625rem;
  left: 0;
  width: 11.1875rem;
  height: 6.625rem;
}

.barra .tel { top: 2.6875rem; left: 44.375rem; }

.hero__foto { display: none; }        /* sólo se usa en mobile */

.hero__inner { min-height: 46.125rem; padding-top: 20.375rem; }

.hero__marca { width: 27.625rem; height: 4.9375rem; }

.hero__titulo {
  width: 28.75rem;
  margin: 1.25rem 0 0 .3125rem;
  font-family: var(--titulos);
  font-weight: 500;
  font-size: 3.0318rem;
  line-height: 3.6875rem;
  color: var(--azul-osc);
}

.hero__claim {
  margin: 2.3125rem 0 0 .0625rem;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 2.8483rem;
  line-height: 3.4375rem;
  color: var(--azul-osc);
}

/* --------------------------------------------------------------------------
   Tarjeta con el formulario
   -------------------------------------------------------------------------- */

.cita {
  position: absolute;
  top: 20.25rem;
  left: 37.125rem;
  width: 20.625rem;
  min-height: 29.375rem;
  padding: 1.25rem 0 1.875rem;
  background: #fff;
  box-shadow: 5px 5px 4px rgba(93, 93, 93, .25);
}

.cita__titulo {
  font-family: var(--titulos);
  font-size: 1.7337rem;
  line-height: 2.8125rem;
  color: var(--azul-osc);
  text-align: center;
}

/* Formulario */

.form { margin-top: .9375rem; padding: .5rem .875rem 0 1rem; }

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

.form textarea { height: 6.25rem; resize: none; vertical-align: top; }
.form ::placeholder { color: #5E6C7B; opacity: 1; }

.btn {
  display: block;
  width: 8.8125rem;
  height: 2.6875rem;
  margin: 2rem auto 0;
  padding: 0;
  background: var(--celeste-btn);
  border: 0;
  border-radius: 3px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2384rem;
  font-weight: 700;
  cursor: pointer;
}

.btn:hover { background: #006AA3; }
.btn:disabled { opacity: .7; cursor: default; }

.form__msg {
  margin-top: .75rem;
  color: var(--azul);
  font-size: .875rem;
  line-height: 1.2rem;
  text-align: center;
}

.form__msg:empty { margin: 0; }

/* --------------------------------------------------------------------------
   Franja de bullets
   -------------------------------------------------------------------------- */

.bullets { min-height: 10.4375rem; background: var(--azul); color: #fff; }

.bullets ul { margin: 0; padding: 1.4375rem 0 0 1.4rem; }

.bullets li { font-size: 1.7337rem; line-height: 2.4375rem; }
.bullets li + li { margin-top: 1.3125rem; }

/* --------------------------------------------------------------------------
   Zonas de tratamiento
   -------------------------------------------------------------------------- */

.zonas__inner { min-height: 25.1875rem; padding-top: 1.625rem; }

.zonas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2.25rem;
}

.zona { display: flex; flex-direction: column; margin: 0; }

/* alto fijo y alineado al fondo para que los cuatro rótulos queden a la misma
   altura, como en el original */
.zona img { height: 10.8125rem; width: auto; margin: auto auto 0; }

.zona figcaption {
  margin-top: .25rem;
  font-size: 1.2384rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--gris);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Antes y después
   -------------------------------------------------------------------------- */

.resultados__grid {
  display: grid;
  grid-template-columns: repeat(2, 29.375rem);
  gap: 1rem 1.1875rem;
  min-height: 27.5rem;
  padding-top: 1.75rem;
}

.resultados__grid img { width: 29.375rem; height: 11.125rem; object-fit: cover; }

/* --------------------------------------------------------------------------
   Bandas fotográficas a todo el ancho
   -------------------------------------------------------------------------- */

.banda--equipo {
  height: 17.5rem;
  background: url(../img/banda-equipo.jpg) no-repeat 50% 50% / cover #fff;
}

.banda--azul {
  height: 15rem;
  background: url(../img/banda-azul.jpg) no-repeat 50% 50% / cover #fff;
}

/* --------------------------------------------------------------------------
   Qué es EMTONE
   -------------------------------------------------------------------------- */

.quees__inner { min-height: 20.625rem; padding-top: 2.375rem; }

.quees__texto { max-width: 29.375rem; padding-left: .3125rem; }

.quees__texto p {
  margin-top: 1.5rem;
  font-size: 1.3622rem;
  line-height: 2.1875rem;
}

.quees__foto {
  position: absolute;
  top: .75rem;
  left: 30rem;
  width: 29.9375rem;
  height: 19.875rem;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   La ciencia
   -------------------------------------------------------------------------- */

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

.ciencia__inner { min-height: 30.6875rem; padding-top: 1.75rem; }

.ciencia__destacado {
  width: 58.0625rem;
  min-height: 5.5625rem;
  margin: 1.5625rem 0 0 .9375rem;
  padding: .6875rem 2.4375rem .6875rem 1.875rem;
  background: var(--azul-caja);
  box-shadow: 4px 4px 4px rgba(93, 93, 93, .25);
  font-size: 1.6099rem;
  line-height: 1.9375rem;
  text-align: center;
}

.ciencia__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: .9375rem;
}

.dato__numero {
  font-family: var(--titulos);
  font-size: 5.8939rem;
  line-height: 9.5rem;
  font-weight: 700;
  text-align: center;
}

.dato__pie {
  margin-top: -1.5rem;
  font-size: 1.4861rem;
  line-height: 1.8125rem;
  font-style: italic;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Qué tan rápido veré los resultados
   -------------------------------------------------------------------------- */

.rapidez__inner { min-height: 27.5rem; padding-top: 2.5rem; }

.rapidez__texto { max-width: 30.625rem; padding-left: .25rem; }

.rapidez__texto .titulo { line-height: 3.125rem; }

.rapidez__texto p {
  margin-top: .625rem;
  font-size: 1.3622rem;
  line-height: 2.1875rem;
}

.rapidez__texto p + p { margin-top: 0; }

.rapidez__foto {
  position: absolute;
  top: 0;
  left: 32.8125rem;
  width: 27.4375rem;
  height: 27.5rem;
  background: url(../img/resultados-gluteos.png) no-repeat 50% 50% / cover #F0F3F5;
}

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

.cierre__inner { min-height: 14.5625rem; padding-top: 2.75rem; }

.cierre__marca { width: 27.5rem; height: 5rem; margin: 0 auto; }

.cierre__claim {
  font-family: var(--titulos);
  font-weight: 500;
  font-size: 3.096rem;
  line-height: 3.75rem;
  color: var(--azul-osc);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pie { background: var(--azul); }

.pie__inner { min-height: 13.8125rem; }

.pie__logo {
  position: absolute;
  top: .9375rem;
  left: .3125rem;
  width: 9.875rem;
  height: 5.75rem;
}

.tel--claro { top: 2.4375rem; left: 43.75rem; gap: .625rem; }
.tel--claro .tel__icono  { width: 2.875rem; height: 2.9375rem; }
.tel--claro .tel__numero { color: #fff; font-size: 1.8004rem; font-weight: 400; }

/* ==========================================================================
   Mobile (< 768px)
   Columna de 25rem, todo en una sola columna y tamaños usables con el dedo.
   La identidad visual (Maven Pro / Arvo, azules y botón celeste) no cambia.
   ========================================================================== */

@media (max-width: 767px) {

  .container { max-width: 25rem; padding: 0 1.4375rem; }

  .titulo { font-size: 1.5rem; line-height: 2rem; }

  /* Cabecera ------------------------------------------------------------- */

  .hero { min-height: 0; background: #fff; }

  .barra {
    position: static;
    height: auto;
    background: #fff;
  }

  .barra__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .barra__logo { position: static; width: 9.3125rem; height: 5.5rem; }

  /* El original deja sólo el ícono en la cabecera; el número va en el pie */
  .barra .tel { position: static; padding: .25rem; }
  .barra .tel__numero { display: none; }
  .tel__icono { width: 2.5rem; height: 2.5rem; }

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

  .hero__foto {
    display: block;
    height: 15rem;
    background: url(../img/hero.jpg) no-repeat 50% 26% / cover;
  }

  .hero__inner {
    min-height: 0;
    padding-top: 2.25rem;
    padding-bottom: 2.5rem;
  }

  .hero__marca { width: 100%; max-width: 19rem; height: auto; }

  .hero__titulo {
    width: auto;
    margin: 1.375rem 0 0;
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .hero__claim {
    margin: 1.25rem 0 0;
    font-size: 1.75rem;
    line-height: 2.125rem;
  }

  /* Tarjeta con el formulario -------------------------------------------- */

  /* En desktop la tarjeta es blanca porque va sobre la foto; en mobile queda
     sobre fondo blanco, así que se apoya en el gris claro de la paleta. */
  .cita {
    position: static;
    width: auto;
    min-height: 0;
    margin-top: 2.25rem;
    padding: 1.5rem 1.25rem 1.75rem;
    background: #F0F3F5;
    box-shadow: none;
  }

  .cita__titulo { font-size: 1.5rem; line-height: 2rem; }

  .form { margin-top: .75rem; padding: .5rem 0 0; }

  .form input,
  .form textarea {
    height: 3.5rem;
    margin: 0 0 .875rem;
    font-size: 1.125rem;
  }

  .form textarea { height: 7rem; }

  .btn { width: 100%; margin-top: 1rem; height: 3.25rem; font-size: 1.1146rem; }

  /* Bullets --------------------------------------------------------------- */

  .bullets { min-height: 0; }
  .bullets ul { padding: 1.75rem 0 1.75rem 1.25rem; }
  .bullets li { font-size: 1.125rem; line-height: 1.6rem; }
  .bullets li + li { margin-top: 1rem; }

  /* Zonas ----------------------------------------------------------------- */

  .zonas__inner { min-height: 0; padding-top: 2.25rem; padding-bottom: 2.5rem; }

  .zonas__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem .75rem;
    margin-top: 2rem;
  }

  .zona img { height: 8rem; }

  .zona figcaption {
    margin-top: .5rem;
    font-size: 1.0625rem;
    line-height: 1.5rem;
  }

  /* Antes y después ------------------------------------------------------- */

  .resultados__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 2.5rem;
  }

  .resultados__grid img { width: 100%; height: auto; }

  /* Bandas ---------------------------------------------------------------- */

  .banda--equipo { height: 11rem; }
  .banda--azul   { height: 10rem; }

  /* Qué es EMTONE --------------------------------------------------------- */

  .quees__inner { min-height: 0; padding-top: 2.5rem; padding-bottom: 2.5rem; }

  .quees__texto { max-width: none; padding-left: 0; }

  .quees__texto p {
    margin-top: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.75rem;
  }

  .quees__foto {
    position: static;
    width: 100%;
    height: 16rem;
    margin-top: 2rem;
  }

  /* La ciencia ------------------------------------------------------------ */

  .ciencia__inner { min-height: 0; padding-top: 2.5rem; padding-bottom: 2.75rem; }

  .ciencia__destacado {
    width: auto;
    min-height: 0;
    margin: 1.5rem 0 0;
    padding: 1.125rem 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.65rem;
  }

  .ciencia__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 2.25rem;
  }

  .dato__numero { font-size: 3.75rem; line-height: 4.25rem; }

  .dato__pie {
    margin-top: .25rem;
    font-size: 1.125rem;
    line-height: 1.6rem;
  }

  /* Qué tan rápido veré los resultados ------------------------------------ */

  .rapidez__inner { min-height: 0; padding-top: 2.5rem; padding-bottom: 2.5rem; }

  .rapidez__texto { max-width: none; padding-left: 0; }
  .rapidez__texto .titulo { line-height: 2rem; }

  .rapidez__texto p {
    margin-top: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.75rem;
  }

  .rapidez__texto p + p { margin-top: 1.25rem; }

  .rapidez__foto {
    position: static;
    width: 100%;
    height: 20rem;
    margin-top: 2rem;
  }

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

  .cierre__inner { min-height: 0; padding-top: 2.5rem; padding-bottom: 2.5rem; }

  .cierre__marca { width: 100%; max-width: 19rem; height: auto; }

  .cierre__claim {
    margin-top: .875rem;
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  /* Pie ------------------------------------------------------------------- */

  .pie__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    min-height: 0;
    padding: 2.25rem 0;
  }

  .pie__logo { position: static; width: 9.875rem; height: 5.75rem; }

  .tel--claro { position: static; padding: .25rem; }
  .tel--claro .tel__icono  { width: 2.5rem; height: 2.5rem; }
  .tel--claro .tel__numero { font-size: 1.375rem; line-height: 1.9rem; }
}

/* --------------------------------------------------------------------------
   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; } }