/* Start custom CSS for html, class: .elementor-element-042df3e *//* ==========================================================
   KUNRATHAI · CSS de la FICHA 60 MINUTOS
   Dónde va: editando la plantilla "Ficha 60" en Elementor,
   icono de engranaje (abajo a la izquierda) → Avanzado →
   CSS personalizado. Pegar todo esto ahí.
   Si lo usas, borra el bloque <style> del final del HTML
   para no tener las reglas duplicadas.
   ========================================================== */

/* --- Base --- */
.kt-ficha{
  font-family:'DM Sans','Segoe UI',Arial,sans-serif;
  color:#35251f;
  max-width:1120px;
  margin:0 auto;
  padding:clamp(20px,3vw,40px) 0 clamp(48px,6vw,80px);
}
.kt-ficha a{text-decoration:none}
.kt-ficha *{box-sizing:border-box}

/* --- Blindaje contra el tema Astra ---
   Astra pone todos los títulos en Montserrat y MAYÚSCULAS. */
.kt-ficha h1,
.kt-ficha h2{
  text-transform:none!important;
  font-family:Georgia,'Times New Roman',serif!important;
  font-weight:400!important;
  color:#35251f!important;
}
.kt-ficha h1{font-size:clamp(34px,4.6vw,56px)!important;line-height:1.08!important;letter-spacing:-.035em!important}
.kt-ficha h2{font-size:21px!important;line-height:1.2!important;letter-spacing:0!important}
.kt-ficha p,.kt-ficha li,.kt-ficha dt,.kt-ficha dd{font-family:'DM Sans','Segoe UI',Arial,sans-serif}
.kt-ficha ul,.kt-ficha ol{margin:0}

/* --- Hover (en el archivo original iban como style-hover
       y ese atributo no existe en HTML real) --- */
.kt-ficha .kt-crumb:hover{color:#783e4a}
.kt-ficha .kt-outline:hover{background:#783e4a;color:#faf6ef}
.kt-ficha .kt-cta{transition:background .2s ease}
.kt-ficha .kt-cta:hover{background:#dab776;color:#331520}

/* --- Accesibilidad: foco visible al navegar con teclado --- */
.kt-ficha a:focus-visible{outline:2px solid #a88648;outline-offset:4px;border-radius:4px}


/* --- Banner de la foto (encuadre y rótulo) ---
   La imagen es cuadrada y el "60 MINUTOS" ocupa la mitad de arriba.
   El 78% baja el recorte hasta la zona del masaje. Si algún día
   subes una foto apaisada, cambia el 78% por 50%. */
.kt-ficha figure > div{position:relative;border-radius:18px;overflow:hidden}
.kt-ficha figure > div > img{
  width:100%;
  height:clamp(260px,34vw,400px);
  object-fit:cover;
  object-position:center 78%;
  display:block;
}
.kt-ficha figure > div > span{
  position:absolute;left:0;right:0;bottom:0;
  padding:70px 28px 24px;
  background:linear-gradient(transparent,rgba(53,37,31,.62));
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em;
  color:#f7ecdc;
}
/* Los frascos de aceite que sobresalen de la esquina */
.kt-ficha figure > img{
  position:absolute;right:-10px;bottom:-26px;
  width:clamp(110px,14vw,168px);pointer-events:none;
  filter:drop-shadow(0 14px 26px rgba(53,37,31,.28));
}

/* --- Responsive --- */
@media(max-width:800px){
  .kt-ficha aside{position:static!important;width:100%}
  .kt-ficha figure img:last-child{right:0;bottom:-18px;width:96px}
}
@media(max-width:540px){
  .kt-ficha figure > div > span{padding:56px 18px 18px;font-size:24px}
  .kt-ficha figure > img{right:0;bottom:-18px;width:96px}
  .kt-ficha nav{font-size:11.5px}
  .kt-ficha aside{padding:22px 20px 20px!important}
  .kt-ficha aside strong{font-size:34px!important}
}
@media(prefers-reduced-motion:reduce){
  .kt-ficha .kt-cta{transition:none}
}/* End custom CSS */