/*
Theme Name: Be Fitness Mallorca Elementor Exact
Theme URI: https://befitnessmallorca.com/
Author: Be Fitness Mallorca
Author URI: https://befitnessmallorca.com/
Description: Tema premium para centro de entrenamiento personal y grupos reducidos en Mallorca. Diseño con espacio amplio, bordes redondeados y animaciones elegantes. Paleta turquesa #01C2B0 y coral #EB4961.
Version: 4.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: befitness-mallorca
Tags: fitness, business, one-column, custom-colors, custom-menu, featured-images, responsive, translation-ready
*/

/* =========================================================
   1. Tokens de marca
   ========================================================= */
:root {
  --bf-turquesa: #01c2b0;
  --bf-coral: #eb4961;
  --bf-blanco: #ffffff;
  --bf-gris-claro: #f5f6f7;
  --bf-gris-medio: #e5e7e9;
  --bf-gris-oscuro: #3a3f45;
  --bf-negro: #111315;

  --bf-background: var(--bf-blanco);
  --bf-foreground: #1f2328;
  --bf-surface: var(--bf-gris-claro);
  --bf-border: #e4e6e9;
  --bf-muted: #6b7280;

  --bf-radius: 1rem;
  --bf-radius-lg: 1.5rem;
  --bf-radius-xl: 2rem;
  --bf-radius-full: 999px;

  --bf-container: 80rem;
  --bf-space: 1.25rem;

  --bf-font-display: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bf-font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --bf-gradient-brand: linear-gradient(115deg, var(--bf-turquesa), #3fb8c9 45%, var(--bf-coral));
  --bf-gradient-ink: linear-gradient(160deg, #1b1f25, #0e1114);
  --bf-shadow-soft: 0 1px 2px rgba(17, 19, 21, 0.04), 0 12px 32px -18px rgba(17, 19, 21, 0.22);
  --bf-shadow-lift: 0 2px 4px rgba(17, 19, 21, 0.05), 0 28px 60px -28px rgba(17, 19, 21, 0.3);
  --bf-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   2. Reset y base
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bf-background);
  color: var(--bf-foreground);
  font-family: var(--bf-font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bf-font-display);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; }

p { margin: 0 0 1em; }

a {
  color: var(--bf-turquesa);
  text-decoration: none;
  transition: color 0.3s var(--bf-ease);
}
a:hover { color: var(--bf-coral); }

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--bf-turquesa);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(1, 194, 176, 0.3);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  background: var(--bf-turquesa);
  color: #0b1f1d;
  padding: 0.75rem 1.25rem;
  border-radius: var(--bf-radius-full);
  clip: auto;
  width: auto;
  height: auto;
}

/* =========================================================
   3. Layout
   ========================================================= */
.container-page {
  width: 100%;
  max-width: var(--bf-container);
  margin-inline: auto;
  padding-inline: var(--bf-space);
}

@media (min-width: 768px) {
  .container-page { padding-inline: 2rem; }
}

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.section--surface { background: var(--bf-surface); }
.section--ink { background: var(--bf-gradient-ink); color: var(--bf-blanco); }

.grid {
  display: grid;
  gap: 1.5rem;
}
.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================
   4. Cabecera y navegación
   ========================================================= */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: background 0.5s var(--bf-ease), box-shadow 0.5s var(--bf-ease);
  background: transparent;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 0 var(--bf-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.5rem;
}

.site-logo img {
  height: 2.75rem;
  width: auto;
  object-fit: contain;
}

@media (min-width: 640px) {
  .site-logo img { height: 3.5rem; }
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}

@media (min-width: 1024px) {
  .main-navigation ul { display: flex; align-items: center; }
}

.main-navigation a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border-radius: var(--bf-radius-full);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bf-muted);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--bf-foreground);
}

.menu-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--bf-radius-full);
  border: 1px solid var(--bf-border);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--bf-border);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
  display: block;
  padding: 0.875rem 1rem;
  border-radius: var(--bf-radius-lg);
  font-family: var(--bf-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bf-foreground);
}

/* =========================================================
   5. Botones
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--bf-radius-full);
  padding: 1rem 1.6rem;
  font-family: var(--bf-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.35s var(--bf-ease), background-color 0.35s var(--bf-ease),
    color 0.35s var(--bf-ease), box-shadow 0.35s var(--bf-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--bf-turquesa);
  color: #08201e;
  box-shadow: 0 14px 30px -16px rgba(1, 194, 176, 0.9);
}
.btn--primary:hover { background: #00a698; color: #08201e; }

.btn--coral {
  background: var(--bf-coral);
  color: var(--bf-blanco);
  box-shadow: 0 14px 30px -16px rgba(235, 73, 97, 0.9);
}
.btn--coral:hover { background: #d43c53; color: var(--bf-blanco); }

.btn--outline {
  background: transparent;
  color: var(--bf-gris-oscuro);
  border: 1px solid var(--bf-gris-medio);
}
.btn--outline:hover { border-color: var(--bf-turquesa); color: var(--bf-turquesa); }

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.12);
  color: var(--bf-blanco);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.22); color: var(--bf-blanco); }

/* =========================================================
   6. Componentes
   ========================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bf-turquesa);
}

.text-gradient-brand {
  background: var(--bf-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card {
  background: var(--bf-blanco);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-xl);
  box-shadow: var(--bf-shadow-soft);
  padding: 1.75rem;
  transition: transform 0.5s var(--bf-ease), box-shadow 0.5s var(--bf-ease),
    border-color 0.5s var(--bf-ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bf-shadow-lift);
  border-color: rgba(1, 194, 176, 0.45);
}

.hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  align-items: center;
  color: var(--bf-blanco);
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 19, 21, 0.1), rgba(17, 19, 21, 0.82));
}
.hero__content { position: relative; z-index: 1; padding-block: 6rem; }

.faq-item {
  border-bottom: 1px solid var(--bf-border);
  padding-block: 1.25rem;
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--bf-font-display);
  font-weight: 600;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--bf-radius-xl);
  overflow: hidden;
  border: 1px solid var(--bf-border);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--bf-radius-full);
  background: var(--bf-turquesa);
  color: #08201e;
  box-shadow: var(--bf-shadow-lift);
}

/* =========================================================
   7. Formularios
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bf-gris-medio);
  border-radius: var(--bf-radius);
  background: var(--bf-blanco);
  font: inherit;
  color: inherit;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--bf-turquesa);
  outline: none;
  box-shadow: 0 0 0 3px rgba(1, 194, 176, 0.2);
}

label {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
}

/* =========================================================
   8. Pie de página
   ========================================================= */
.site-footer {
  margin-top: 6rem;
  border-top: 1px solid var(--bf-border);
  background: var(--bf-surface);
}
.site-footer__grid {
  display: grid;
  gap: 3rem;
  padding-block: 4rem;
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.site-footer h2 {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.625rem; }
.site-footer a { color: var(--bf-muted); }
.site-footer a:hover { color: var(--bf-turquesa); }

.site-footer__legal {
  border-top: 1px solid var(--bf-border);
  font-size: 0.75rem;
  color: var(--bf-muted);
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .site-footer__legal { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* =========================================================
   9. Clases estándar de WordPress
   ========================================================= */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide { max-width: 90rem; margin-inline: auto; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
  font-size: 0.875rem;
  color: var(--bf-muted);
  text-align: center;
  margin-top: 0.5rem;
}

blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--bf-turquesa);
  background: var(--bf-surface);
  border-radius: var(--bf-radius);
  font-style: italic;
}

.sticky { box-shadow: var(--bf-shadow-lift); }

.pagination,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
.page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.5rem;
  border-radius: var(--bf-radius-full);
  border: 1px solid var(--bf-border);
  color: var(--bf-foreground);
}
.page-numbers.current,
.page-numbers:hover {
  background: var(--bf-turquesa);
  border-color: var(--bf-turquesa);
  color: #08201e;
}

/* =========================================================
   10. Animaciones
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--bf-ease), transform 0.8s var(--bf-ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes bf-reveal-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   11. Impresión
   ========================================================= */
@media print {
  .site-header,
  .whatsapp-fab,
  .site-footer { display: none !important; }
  body { color: #000; background: #fff; }
}


/* =========================================================
   Elementor bridge: keep the original Lovable layout while making
   every visible piece a native Elementor element.
   ========================================================= */
.elementor, .elementor-page { --e-global-color-primary: #01c2b0; --e-global-color-accent: #eb4961; }
.elementor-page .e-con { box-sizing:border-box; }
.elementor-page .e-con > .e-con-inner { width:100%; max-width:none; padding:0; margin:0; }
.bf-el-section { width:100%!important; max-width:none!important; padding:0!important; margin:0!important; }
.bf-el-section > .e-con-inner { width:100%!important; max-width:none!important; padding:0!important; margin:0!important; }
.bf-el-inner { width:100%!important; max-width:80rem!important; margin-inline:auto!important; padding-inline:1.25rem!important; }
@media(min-width:768px){.bf-el-inner{padding-inline:2rem!important}}
.bf-el-row { width:100%!important; }
.bf-el-row > .e-con-inner { width:100%!important; max-width:none!important; padding:0!important; margin:0!important; }
.bf-el-widget { margin:0!important; }
.bf-el-widget .elementor-widget-container { margin:0!important; padding:0!important; }
/* Exact native Elementor equivalents of the Lovable classes */
.bf-el-header { position:fixed!important; inset:0 0 auto 0!important; z-index:9999!important; background:rgba(255,255,255,.86)!important; backdrop-filter:blur(18px) saturate(150%)!important; box-shadow:0 1px 0 0 var(--bf-border)!important; transition:background .5s var(--bf-ease),box-shadow .5s var(--bf-ease)!important; }
.bf-el-header.is-scrolled { background:rgba(255,255,255,.96)!important; box-shadow:0 2px 18px -8px rgba(17,19,21,.18)!important; }
/* On the homepage only (WordPress adds .home to the configured front page), the header
   sits over the dark hero image, so it starts transparent and picks up the frosted
   background once the page scrolls past the hero. Every other page keeps the frosted
   background from the very first paint, since there is no dark image behind it. */
body.home .bf-el-header { background:transparent!important; backdrop-filter:none!important; box-shadow:none!important; }
body.home .bf-el-header.is-scrolled { background:rgba(255,255,255,.86)!important; backdrop-filter:blur(18px) saturate(150%)!important; box-shadow:0 1px 0 0 var(--bf-border)!important; }
body.home .bf-el-header .bf-nav-link .elementor-button { color:rgba(255,255,255,.85)!important; }
body.home .bf-el-header.is-scrolled .bf-nav-link .elementor-button { color:var(--bf-muted)!important; }
.bf-el-header .bf-el-inner { height:4.5rem!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:1.5rem!important; }
.bf-el-logo { flex:0 0 auto!important; width:auto!important; }
.bf-el-logo img { height:2.75rem!important; width:auto!important; object-fit:contain!important; }
@media(min-width:640px){.bf-el-logo img{height:3.5rem!important}}
.bf-el-nav { display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:center!important; gap:.25rem!important; flex:1 1 auto!important; width:auto!important; }
.bf-el-nav .elementor-widget { width:auto!important; }
.bf-nav-link .elementor-button { display:inline-block!important; padding:.5rem .875rem!important; border-radius:999px!important; background:transparent!important; color:var(--bf-muted)!important; border:0!important; font-size:.9rem!important; font-weight:500!important; font-family:var(--bf-font-sans)!important; box-shadow:none!important; }
.bf-nav-link .elementor-button:hover{color:var(--bf-foreground)!important; transform:none!important;}
.bf-header-cta .elementor-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;padding:.75rem 1.25rem!important;background:var(--bf-turquesa)!important;color:#08201e!important;font-size:.9rem!important;font-weight:600!important;box-shadow:0 14px 30px -16px rgba(1,194,176,.9)!important;border:0!important;}
.bf-header-cta .elementor-button:hover{background:#00a698!important;color:#08201e!important;transform:translateY(-2px)!important}
@media(max-width:1023px){.bf-el-nav,.bf-header-cta{display:none!important}.bf-mobile-toggle{display:block!important}.bf-el-header .bf-el-inner{height:4.5rem!important}}
.bf-mobile-toggle{display:none!important;width:auto!important}.bf-mobile-toggle .elementor-button{width:44px!important;height:44px!important;padding:0!important;border-radius:999px!important;border:1px solid var(--bf-border)!important;background:rgba(255,255,255,.7)!important;color:var(--bf-foreground)!important;box-shadow:none!important}
@media(max-width:1023px){.bf-mobile-toggle{display:block!important}}
.bf-mobile-menu{display:none!important;background:rgba(255,255,255,.92)!important;backdrop-filter:blur(18px)!important;border-top:1px solid var(--bf-border)!important;padding:1.5rem 1.25rem!important}
.bf-mobile-menu.is-open{display:flex!important}
.bf-mobile-menu .elementor-widget{width:100%!important}
.bf-mobile-menu .bf-nav-link .elementor-button{display:block!important;width:100%!important;text-align:left!important;padding:.875rem 1rem!important;font-family:var(--bf-font-display)!important;font-size:1.125rem!important;font-weight:600!important;border-radius:1.5rem!important;color:var(--bf-foreground)!important}
/* Exact hero */
.bf-el-hero { position:relative!important; min-height:92vh!important; overflow:hidden!important; color:#fff!important; display:flex!important; }
.bf-el-hero > .e-con-inner { min-height:92vh!important; width:100%!important; padding:0!important; margin:0!important; max-width:none!important; }
.bf-el-hero-media { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; z-index:0!important; }
.bf-el-hero-media img { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; object-fit:cover!important; }
.bf-el-hero-veil { position:absolute!important; inset:0!important; z-index:1!important; background:linear-gradient(180deg,rgba(17,19,21,.1),rgba(17,19,21,.82))!important; pointer-events:none!important; }
.bf-el-hero-content { position:relative!important; z-index:2!important; width:100%!important; min-height:92vh!important; max-width:80rem!important; margin-inline:auto!important; padding:9rem 1.25rem 4rem!important; display:flex!important; flex-direction:column!important; justify-content:flex-end!important; align-items:flex-start!important; }
@media(min-width:768px){.bf-el-hero-content{padding:9rem 2rem 6rem!important}}
.bf-hero-copy{max-width:48rem!important;width:100%!important;}
.bf-hero-badge .elementor-heading-title{display:inline-flex!important;align-items:center!important;border:1px solid rgba(255,255,255,.25)!important;background:rgba(255,255,255,.1)!important;padding:.5rem 1rem!important;border-radius:999px!important;color:#fff!important;font-size:.75rem!important;font-weight:600!important;letter-spacing:.16em!important;text-transform:uppercase!important;backdrop-filter:blur(12px)!important;}
.bf-hero-title .elementor-heading-title{font-family:var(--bf-font-display)!important;font-size:clamp(3rem,7vw,6.5rem)!important;line-height:.98!important;font-weight:800!important;letter-spacing:-.045em!important;color:#fff!important;margin:1.5rem 0 0!important;}
.bf-hero-gradient .elementor-heading-title{margin-top:0!important;background:var(--bf-gradient-brand)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;}
.bf-hero-lead{max-width:38rem!important;color:rgba(255,255,255,.8)!important;font-size:1.125rem!important;line-height:1.65!important;margin-top:1.5rem!important;}
@media(min-width:768px){.bf-hero-lead{font-size:1.25rem!important}}
.bf-hero-actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:.75rem!important;margin-top:2.25rem!important;width:auto!important;}
.bf-hero-actions>.e-con-inner{display:flex!important;flex-direction:row!important;gap:.75rem!important;flex-wrap:wrap!important;padding:0!important}
.bf-btn .elementor-button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.5rem!important;border:0!important;border-radius:999px!important;padding:1rem 1.6rem!important;font-family:var(--bf-font-sans)!important;font-size:.95rem!important;font-weight:600!important;line-height:1!important;transition:transform .35s var(--bf-ease),background-color .35s var(--bf-ease),color .35s var(--bf-ease),box-shadow .35s var(--bf-ease)!important;}
.bf-btn .elementor-button:hover{transform:translateY(-2px)!important}
.bf-btn-primary .elementor-button{background:var(--bf-turquesa)!important;color:#08201e!important;box-shadow:0 14px 30px -16px rgba(1,194,176,.9)!important}
.bf-btn-primary .elementor-button:hover{background:#00a698!important;color:#08201e!important}
.bf-btn-coral .elementor-button{background:var(--bf-coral)!important;color:#fff!important;box-shadow:0 14px 30px -16px rgba(235,73,97,.9)!important}
.bf-btn-outline .elementor-button{background:transparent!important;color:var(--bf-gris-oscuro)!important;border:1px solid var(--bf-gris-medio)!important;box-shadow:none!important}
.bf-btn-ghost-light .elementor-button{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.4)!important;backdrop-filter:blur(12px)!important}
.bf-stat-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1.5rem!important;max-width:32rem!important;width:100%!important;margin-top:3rem!important;padding-top:1.5rem!important;border-top:1px solid rgba(255,255,255,.2)!important}
.bf-stat-grid>.e-con{width:auto!important;min-width:0!important;padding:0!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.bf-stat-label .elementor-heading-title{font-size:.75rem!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:rgba(255,255,255,.6)!important;margin:0!important}
.bf-stat-value .elementor-heading-title{margin:.25rem 0 0!important;font-family:var(--bf-font-display)!important;font-size:1.5rem!important;font-weight:700!important;color:#fff!important}
/* Generic exact sections */
.bf-section { padding-block:clamp(5rem,8vw,7rem)!important; }
.bf-section-surface { background:var(--bf-surface)!important; }
.bf-section-ink { background:var(--bf-gradient-ink)!important;color:#fff!important; }
.bf-section-head { max-width:40rem!important; }
.bf-section-head .bf-eyebrow { margin-bottom:1rem!important; }
.bf-eyebrow .elementor-heading-title{font-size:.75rem!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--bf-turquesa);margin:0!important}
.bf-h2 .elementor-heading-title{font-family:var(--bf-font-display)!important;font-size:clamp(2.25rem,4.2vw,3rem)!important;line-height:1.05!important;font-weight:800!important;letter-spacing:-.03em!important;margin:0!important}
.bf-lead .elementor-widget-container{color:var(--bf-muted);line-height:1.65!important}
.bf-grid{display:grid!important;width:100%!important;gap:1.5rem!important}
.bf-grid-2{grid-template-columns:repeat(1,minmax(0,1fr))!important}.bf-grid-3{grid-template-columns:repeat(1,minmax(0,1fr))!important}.bf-grid-5{grid-template-columns:repeat(1,minmax(0,1fr))!important}
@media(min-width:640px){.bf-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.bf-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(min-width:900px){.bf-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:960px){.bf-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
.bf-grid>.e-con{width:auto!important;min-width:0!important;max-width:none!important;margin:0!important}
.bf-card{background:#fff!important;border:1px solid var(--bf-border)!important;border-radius:2rem!important;box-shadow:var(--bf-shadow-soft)!important;padding:1.75rem!important;transition:transform .5s var(--bf-ease),box-shadow .5s var(--bf-ease),border-color .5s var(--bf-ease)!important}
.bf-card:hover{transform:translateY(-4px)!important;box-shadow:var(--bf-shadow-lift)!important;border-color:rgba(1,194,176,.45)!important}
.bf-card .elementor-widget{margin:0!important}
.bf-icon-badge{width:3rem!important;height:3rem!important;min-height:3rem!important;border-radius:1rem!important;background:rgba(1,194,176,.1)!important;color:var(--bf-turquesa)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.bf-card-title .elementor-heading-title{font-family:var(--bf-font-display)!important;font-size:1.25rem!important;font-weight:700!important;margin:1.5rem 0 .75rem!important}
.bf-card-text{color:var(--bf-muted);line-height:1.65!important}
.bf-service-card{overflow:hidden!important;padding:0!important}
.bf-service-image{width:100%!important;height:auto!important;overflow:hidden!important}
.bf-service-image img{width:100%!important;aspect-ratio:16/10!important;object-fit:cover!important;transition:transform .7s var(--bf-ease)!important}
.bf-service-card:hover .bf-service-image img{transform:scale(1.05)!important}
.bf-service-copy{padding:1.75rem!important}
.bf-service-copy .elementor-widget{margin:0!important}
.bf-service-link .elementor-button{padding:0!important;background:transparent!important;color:var(--bf-turquesa);border:0!important;box-shadow:none!important;font-size:.875rem!important;justify-content:flex-start!important}
.bf-method-grid{display:grid!important;grid-template-columns:1fr!important;gap:1px!important;overflow:hidden!important;border-radius:1.5rem!important;border:1px solid var(--bf-border)!important;background:var(--bf-border)!important}
@media(min-width:768px){.bf-method-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
.bf-method-card{background:#fff!important;padding:2rem!important;min-width:0!important}
.bf-method-number .elementor-heading-title{font-family:var(--bf-font-display)!important;font-size:2.25rem!important;font-weight:800!important;color:rgba(1,194,176,.25);margin:0!important}
.bf-method-title .elementor-heading-title{font-family:var(--bf-font-display)!important;font-size:1.125rem!important;font-weight:700!important;margin:1rem 0 .6rem!important}
.bf-method-text{font-size:.875rem!important;color:var(--bf-muted);line-height:1.65!important}
.bf-audience-layout{display:grid!important;grid-template-columns:1fr!important;gap:3.5rem!important}
@media(min-width:1024px){.bf-audience-layout{grid-template-columns:.85fr 1.15fr!important}}
.bf-audience-grid{display:grid!important;grid-template-columns:1fr!important;gap:1rem!important}
@media(min-width:640px){.bf-audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.bf-audience-card{background:#fff!important;border:1px solid var(--bf-border)!important;border-radius:1rem!important;padding:1.5rem!important}
.bf-audience-title .elementor-heading-title{font-family:var(--bf-font-display)!important;font-size:1rem!important;font-weight:700!important;margin:0 0 .5rem!important}
.bf-audience-text{font-size:.875rem!important;color:var(--bf-muted);line-height:1.65!important}
.bf-gallery-grid{display:grid!important;grid-template-columns:1fr!important;gap:1rem!important}
@media(min-width:640px){.bf-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(min-width:1024px){.bf-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.bf-gallery-item{overflow:hidden!important;border-radius:1.5rem!important}
.bf-gallery-item img{width:100%!important;aspect-ratio:4/3!important;object-fit:cover!important;transition:transform .7s var(--bf-ease)!important}
.bf-gallery-item:hover img{transform:scale(1.05)!important}
.bf-faq-layout{display:grid!important;grid-template-columns:1fr!important;gap:3rem!important}
@media(min-width:1024px){.bf-faq-layout{grid-template-columns:.8fr 1.2fr!important}}
.bf-faq-widget .elementor-accordion .elementor-tab-title{font-family:var(--bf-font-display)!important;font-size:1.125rem!important;font-weight:600!important;padding:1.25rem 0!important;border-top:1px solid var(--bf-border)!important;border-bottom:0!important}
.bf-faq-widget .elementor-accordion .elementor-tab-content{padding:0 3rem 1.5rem 0!important;color:var(--bf-muted)!important;line-height:1.65!important;border:0!important}
.bf-faq-widget .elementor-accordion .elementor-tab-title:last-child{border-bottom:1px solid var(--bf-border)!important}
.bf-cta{position:relative!important;overflow:hidden!important;border-radius:2.5rem!important;padding:4rem 1.5rem!important;text-align:center!important;background:var(--bf-gradient-ink)!important;color:#fff!important}
@media(min-width:640px){.bf-cta{padding:6rem 3rem!important}}
.bf-cta:after{content:"";position:absolute;right:-4rem;top:-6rem;width:24rem;height:24rem;border-radius:999px;background:var(--bf-gradient-brand);opacity:.4;filter:blur(48px);pointer-events:none}
.bf-cta>*{position:relative!important;z-index:1!important}
.bf-cta-title .elementor-heading-title{font-family:var(--bf-font-display)!important;font-size:clamp(2.25rem,4vw,3rem)!important;font-weight:800!important;color:#fff!important;margin:1rem auto 0!important;max-width:42rem!important}
.bf-cta-text{max-width:36rem!important;margin:.75rem auto 0!important;color:rgba(255,255,255,.7)!important}
.bf-cta-actions{display:flex!important;justify-content:center!important;align-items:center!important;gap:.75rem!important;flex-wrap:wrap!important;margin-top:2.25rem!important}
.bf-footer{margin-top:6rem!important;border-top:1px solid var(--bf-border)!important;background:var(--bf-surface)!important}
.bf-footer-grid{display:grid!important;grid-template-columns:1fr!important;gap:3rem!important;padding-block:4rem!important}
@media(min-width:768px){.bf-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(min-width:1024px){.bf-footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.bf-footer-heading .elementor-heading-title{font-size:.875rem!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;margin:0 0 1rem!important}
.bf-footer-logo img{height:2.75rem!important;width:auto!important;object-fit:contain!important}
.bf-footer-text{color:var(--bf-muted)}
.bf-footer-link .elementor-button{display:block!important;width:auto!important;padding:0!important;background:transparent!important;color:var(--bf-muted);border:0!important;box-shadow:none!important;text-align:left!important;font-size:1rem!important;font-weight:400!important;justify-content:flex-start!important}
.bf-footer-link .elementor-button:hover{color:var(--bf-turquesa)!important;transform:none!important}
.bf-footer-legal{border-top:1px solid var(--bf-border)!important;padding-block:1.5rem!important;display:flex!important;flex-direction:column!important;gap:1rem!important;font-size:.75rem!important;color:var(--bf-muted)!important}
@media(min-width:640px){.bf-footer-legal{flex-direction:row!important;align-items:center!important;justify-content:space-between!important}}
/* Ensure Elementor doesn't impose its default content width/padding on our clone. */
.elementor-section-wrap,.elementor .elementor-element{--container-max-width:80rem;}
.elementor-widget-button .elementor-button:focus,.elementor-widget-button .elementor-button:visited{outline:none;}
body.elementor-page{overflow-x:hidden!important;}


/* =========================================================
   Elementor editor / preview hardening
   The Lovable clone uses CSS Grid for the visual card layouts.
   Elementor's container defaults must not turn those grid parents
   back into vertical flex columns.
   ========================================================= */
.elementor-editor-active .bf-grid,
.elementor-preview .bf-grid,
.elementor-editor-preview .bf-grid,
.bf-grid {
  display: grid !important;
  flex-direction: initial !important;
  flex-wrap: initial !important;
  align-items: stretch !important;
  align-content: stretch !important;
  justify-content: initial !important;
  width: 100% !important;
  min-width: 0 !important;
}

.elementor-editor-active .bf-grid-3,
.elementor-preview .bf-grid-3,
.elementor-editor-preview .bf-grid-3,
.bf-grid-3 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media (min-width: 900px) {
  .elementor-editor-active .bf-grid-3,
  .elementor-preview .bf-grid-3,
  .elementor-editor-preview .bf-grid-3,
  .bf-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.elementor-editor-active .bf-grid-2,
.elementor-preview .bf-grid-2,
.elementor-editor-preview .bf-grid-2,
.bf-grid-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media (min-width: 640px) {
  .elementor-editor-active .bf-grid-2,
  .elementor-preview .bf-grid-2,
  .elementor-editor-preview .bf-grid-2,
  .bf-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.elementor-editor-active .bf-grid-5,
.elementor-preview .bf-grid-5,
.elementor-editor-preview .bf-grid-5,
.bf-grid-5 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
@media (min-width: 768px) {
  .elementor-editor-active .bf-grid-5,
  .elementor-preview .bf-grid-5,
  .elementor-editor-preview .bf-grid-5,
  .bf-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

.bf-grid > .e-con {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
}

/* The editor must display the same cards as the public page. */
.elementor-editor-active .bf-card,
.elementor-preview .bf-card,
.bf-card {
  background: #fff !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: 2rem !important;
  box-shadow: var(--bf-shadow-soft) !important;
  padding: 1.75rem !important;
  min-width: 0 !important;
}

.elementor-editor-active .bf-service-card,
.elementor-preview .bf-service-card,
.bf-service-card {
  overflow: hidden !important;
  padding: 0 !important;
}

/* Header: never expose the mobile menu on desktop. */
.bf-mobile-menu { display: none !important; }
@media (max-width: 1023px) {
  .bf-mobile-menu.is-open { display: flex !important; }
}

/* Prevent Elementor's default page title from appearing in the clone. */
.elementor-page .entry-title,
.elementor-page .page-title {
  display: none !important;
}

/* =========================================================
   12. Página de Contacto (formulario y mapa)
   ========================================================= */
.bf-contact-form { background:#fff!important; border:1px solid var(--bf-border)!important; border-radius:2rem!important; box-shadow:var(--bf-shadow-soft)!important; padding:2rem!important; }
.bf-contact-form .elementor-field-group { margin-bottom:1.25rem!important; }
.bf-contact-form .elementor-field-label { font-family:var(--bf-font-sans)!important; font-weight:600!important; font-size:.875rem!important; margin-bottom:.4rem!important; }
.bf-contact-form .elementor-field { border:1px solid var(--bf-gris-medio)!important; border-radius:var(--bf-radius)!important; padding:.9rem 1rem!important; font-family:var(--bf-font-sans)!important; }
.bf-contact-form .elementor-field:focus { border-color:var(--bf-turquesa)!important; box-shadow:0 0 0 3px rgba(1,194,176,.2)!important; outline:none!important; }
.bf-contact-form .elementor-button { display:inline-flex!important; align-items:center!important; justify-content:center!important; width:100%!important; border:0!important; border-radius:999px!important; padding:1rem 1.6rem!important; background:var(--bf-turquesa)!important; color:#08201e!important; font-family:var(--bf-font-sans)!important; font-weight:600!important; box-shadow:0 14px 30px -16px rgba(1,194,176,.9)!important; }
.bf-contact-form .elementor-button:hover { background:#00a698!important; transform:translateY(-2px)!important; }
.bf-contact-map { border-radius:2rem!important; overflow:hidden!important; border:1px solid var(--bf-border)!important; }
.bf-contact-map iframe { width:100%!important; }