/* =========================================================
   Studioapp — landing
   Estructura: 1) Fuentes  2) Tokens  3) Base  4) Componentes
               5) Secciones  6) Widgets  7) Animaciones  8) Responsive
   ========================================================= */

/* ---------- 1) FUENTES (autoalojadas en assets/fonts) ---------- */
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nohemi"; src: url("../fonts/nohemi-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("../fonts/nohemi-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nohemi"; src: url("../fonts/nohemi-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../fonts/inter-display-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- 2) TOKENS ---------- */
:root {
  --ink: #1e1e1e;
  --ink-2: #111111;
  --text-soft: #4c4c4c;
  --muted: #9e9e9e;
  --muted-2: #87868a;
  --line: #e3e3e3;
  --lime: #d3fe50;
  --green: #00cf94;
  --check-dark: #131f15;
  --beige: #e8e4e2;
  --beige-2: #ded8d3;
  --star: #ffcc00;
  --field: rgba(187, 187, 187, 0.15);

  --grad-brand: linear-gradient(90deg, #ff2f2f 0%, #ef7b16 35.88%, #8a43e1 69.92%, #d511fd 100%);
  --grad-btn: linear-gradient(125deg, #fff -123%, var(--ink) 74%);
  --glass: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.4) 0%, #fff 100%);

  --f-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Nohemi", "Onest", system-ui, sans-serif;
  --f-ui: "Inter Display", "Inter", system-ui, sans-serif;

  --container: 1200px;
  --gutter: 60px;
  --section-pad: 110px var(--gutter) 96px;
}

/* ---------- 3) BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.5; letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
b, strong { font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.ic { width: 22px; height: 22px; flex: none; }
.ic--20 { width: 20px; height: 20px; }
.ic--24 { width: 24px; height: 24px; }
.muted { color: var(--muted); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; }
.section { padding: var(--section-pad); }
.section--bordered { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- 4) COMPONENTES ---------- */

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 12px 24px; border-radius: 8px;
  font-size: 16px; line-height: 24px; letter-spacing: -0.02em; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--dark { background: var(--grad-btn); color: #fff; border: 1px solid rgba(29, 31, 19, 0.02); }
.btn--dark:hover { filter: brightness(1.25); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.btn--light { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn--light:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .06); }
.btn--block { width: 100%; }

/* Etiqueta de sección (icono + texto en mayúsculas) */
.label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 14px; font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase;
}
.heading { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.heading__sub { max-width: 640px; font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0; }

/* Titulares */
.h-display, .h-section { font-family: var(--f-display); font-weight: 500; letter-spacing: 0; font-size: 44px; line-height: 1.2; max-width: 720px; }
.h-display b, .h-section b { font-weight: 700; }

/* Listas con check */
.checks { display: flex; flex-direction: column; }
.checks li { display: flex; align-items: flex-start; gap: 12px; }
.checks--dark { gap: 15px; font-size: 14px; line-height: 21px; letter-spacing: 0; }
.checks--dark .ic { color: var(--check-dark); margin-top: -1px; }
.checks--green { gap: 13px; }
.checks--green .ic { color: var(--green); margin-top: 1px; }

/* Marca */
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0; color: #000; }
.brand img { width: 34px; height: 34px; }
.brand--sm { gap: 10px; font-size: 19px; font-weight: 400; }
.brand--sm img { width: 30px; height: 30px; }

/* ---------- 5) SECCIONES ---------- */

/* NAV */
.nav { position: fixed; top: 20px; left: 0; right: 0; z-index: 100; padding: 0 var(--gutter); pointer-events: none; }
.nav__bar {
  pointer-events: auto;
  max-width: 1140px; height: 72px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--glass); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--line); border-radius: 15px;
}
.nav__links, .nav__actions { display: flex; align-items: center; }
.nav__links a, .nav__login {
  padding: 8px 20px; border-radius: 30px; font-size: 16px; line-height: 24px; color: var(--ink);
  transition: background-color .2s ease;
}
.nav__links a:hover, .nav__login:hover { background: rgba(0, 0, 0, .05); }
.nav__actions { gap: 10px; }
.nav__burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.nav__mobile {
  pointer-events: auto; max-width: 1140px; margin: 8px auto 0; padding: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
  display: flex; flex-direction: column; gap: 2px;
}
.nav__mobile a:not(.btn) { padding: 12px 14px; border-radius: 10px; }
.nav__mobile a:not(.btn):hover { background: rgba(0, 0, 0, .04); }
.nav__mobile .btn { margin-top: 8px; }

/* HERO */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 157px var(--gutter) 93px; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1146px; }
.badge { display: inline-block; background: var(--lime); color: var(--ink); border-radius: 18px; padding: 6px 20px; font-size: 14px; line-height: 14px; font-weight: 500; letter-spacing: -0.01em; }
.hero__title { margin-top: 16px; font-family: var(--f-display); font-weight: 600; font-size: 72px; line-height: 1.2; letter-spacing: 0; }
.rotator { display: inline-block; vertical-align: top; height: 1.2em; overflow: hidden; text-align: left; font-size: 64px; letter-spacing: -1.5px; min-width: 3.5em; margin-top: 0.06em; }
.rotator__track { display: flex; flex-direction: column; animation: rotate-words 8s cubic-bezier(.7, 0, .3, 1) infinite; }
.rotator__word { display: block; height: 1.2em; line-height: 1.2; -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-tattoo { background-image: linear-gradient(105deg, #4a0ffc 0%, #fc00fc 25.55%, #ff7383 56.99%, #ff9203 77.36%, #ffa6a6 100%); }
.g-piercing { background-image: linear-gradient(105deg, #ca61ff 9.76%, #30a9ff 79.16%); }
.g-laser { background-image: linear-gradient(105deg, #00a3a3 26.28%, #ffa6ff 71.74%, #ff00d4 100%); }
@keyframes rotate-words {
  0%, 26% { transform: translateY(0); }
  33%, 59% { transform: translateY(-1.2em); }
  66%, 92% { transform: translateY(-2.4em); }
  100% { transform: translateY(-3.6em); }
}
.hero__lead { margin-top: 16px; max-width: 640px; font-size: 20px; line-height: 28px; letter-spacing: 0; }
.hero__ctas { margin-top: 42px; display: flex; gap: 16px; }
.hero__note { margin-top: 42px; font-size: 16px; line-height: 24px; }
.hero__arrow {
  position: absolute; left: 50%; bottom: 93px; transform: translateX(-50%);
  width: 35px; height: 35px; border-radius: 50%; background: var(--lime); color: var(--ink);
  display: grid; place-items: center; animation: bounce 2s ease-in-out infinite;
}
.hero__arrow .ic { width: 25px; height: 25px; }
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ¿PARA QUIÉN? */
.audience {
  margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 36px; border: 1px solid var(--line); border-radius: 15px; background: var(--glass);
}
.audience__col { padding: 60px 36px 24px; }
.audience__col + .audience__col { border-left: 2px solid var(--line); }
.audience__col img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.audience__col h3 { margin: 24px 0 15px; font-size: 32px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; }

.studios { margin-top: 80px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee { display: flex; overflow: hidden; }
.marquee__track { display: flex; gap: 32px; padding-right: 32px; flex: none; animation: marquee 40s linear infinite; }
.marquee[data-direction="right"] .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 74px; padding: 16px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 228px;
  font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0; white-space: nowrap;
}
.pill img { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; }

/* FUNCIONALIDADES */
#product .heading { margin-bottom: 12px; }
.feature { display: flex; align-items: center; padding-top: 120px; }
.feature--first { padding-top: 36px; }
.feature__text { flex: 1 1 50%; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-right: 100px; }
.feature__text p { letter-spacing: -0.02em; }
.feature__pic { flex: 0 0 523px; height: 411px; border-radius: 16px; overflow: hidden; background: var(--glass); box-shadow: 0 -37px 40px rgba(29, 31, 19, .02); }
.feature__pic img { width: 100%; height: 100%; object-fit: cover; }
.feature--reverse { flex-direction: row-reverse; }
.feature--reverse .feature__text { padding-right: 0; padding-left: 100px; }
.feature .h-section { max-width: 523px; }

.verifactu {
  margin: 48px auto 0; max-width: 876px; padding: 48px; border-radius: 12px;
  background: rgba(29, 31, 19, 0.02); display: flex; align-items: center; gap: 32px;
}
.verifactu__icon { width: 81px; height: 81px; flex: none; color: var(--green); }
.verifactu h3 { flex: 1; font-size: 32px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; }
.verifactu + .feature { padding-top: 48px; }

/* OPINIONES */
.reviews { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.reviews__col { display: flex; flex-direction: column; gap: 32px; }
.review { padding: 36px; border-radius: 24px; border: 1px solid var(--line); background: var(--glass); display: flex; flex-direction: column; gap: 20px; }
.review__who { display: flex; align-items: center; gap: 14px; }
.review__who img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .3); flex: none; }
.review__who div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.review__who strong { font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: 0; }
.review__who span { line-height: 24px; }
.review p { line-height: 1.8; }
.stars { display: flex; gap: 8px; color: var(--star); margin-top: -10px; }
.stars svg { width: 17px; height: 17px; }

/* PRECIOS */
#pricing .heading .h-section { max-width: none; }
.billing { margin-top: 44px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.billing__opt { font-size: 16px; line-height: 24px; color: var(--muted-2); font-weight: 400; transition: color .2s ease; }
.billing__opt.is-active { color: var(--ink); font-weight: 700; }
.toggle { position: relative; width: 46px; height: 28px; padding: 2px; border-radius: 100px; background: var(--grad-brand); }
.toggle::before { content: ""; position: absolute; inset: 2px; border-radius: 100px; background: var(--ink-2); }
.toggle__knob { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, .3); transition: transform .25s ease; }
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(18px); }

.plans { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 20px; }
.plan { position: relative; width: 360px; padding: 2px; isolation: isolate; }
/* Borde inferior de color: capa de fondo que asoma 2px alrededor del panel beige */
.plan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 260px; border-radius: 0 0 22px 22px; background: var(--beige-2); z-index: -2; }
.plan--pro::before { background: var(--grad-brand); }
/* Panel beige que empieza por detrás de la tarjeta blanca */
.plan::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; top: 88px; border-radius: 0 0 20px 20px; background: var(--beige); z-index: -1; }
.plan__top {
  position: relative; background: #fff; border-radius: 16px; padding: 30px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 3px 8px rgba(0, 0, 0, .05);
}
.plan__top h3 { font-size: 32px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; }
.plan__top > p { margin-top: 2px; }
.plan__price { margin: 30px 0; display: flex; align-items: center; gap: 8px; }
.plan__amount { font-family: var(--f-display); font-weight: 500; font-size: 44px; line-height: 1.2; letter-spacing: 0; }
.plan__features { padding: 30px 32px 32px; display: flex; flex-direction: column; gap: 12px; font-family: var(--f-ui); font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: 0; }
.plan__features li { display: flex; align-items: center; gap: 8px; }
.plan__features li.is-intro { color: var(--text-soft); }
.tick { flex: none; width: 27px; height: 27px; display: grid; place-items: center; color: var(--ink-2); }
.tick svg { width: 13px; height: 13px; }
.tick--grad { position: relative; border-radius: 9px; background: var(--grad-brand); padding: 1px; color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .12), 0 2px 5px rgba(0, 0, 0, .1), 0 6px 11px rgba(0, 0, 0, .05); }
.tick--grad::before { content: ""; position: absolute; inset: 1px; border-radius: 8px; background: linear-gradient(#4c4c4c, #111); }
.tick--grad svg { position: relative; }

.perks { margin-top: 41px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 21px; }
.perks li { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1.2; font-weight: 600; letter-spacing: 0; }
.perks .ic { color: var(--ink-2); }
.perks__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--beige-2); }

/* FAQ */
.faqs { margin: 60px auto 0; max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
.faq { border: 1px solid var(--line); border-radius: 12px; background: var(--glass); padding: 30px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq h3 { font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
.faq__icon { position: relative; flex: none; width: 24px; height: 24px; transform: rotate(45deg) scale(1.2); transition: transform .3s ease; }
.faq[open] .faq__icon { transform: rotate(0) scale(1); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: #1d1f13; }
.faq__icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
.faq p { margin-top: 14px; max-width: 600px; }
.faq p a { text-decoration: underline; }

/* FOOTER */
.footer__cta { padding: 80px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.footer__logo img { width: 50px; height: 50px; }
.footer__cta > p { max-width: 640px; }
.footer__ctas { margin-top: 0; display: flex; gap: 25px; }
.footer__bottom { padding: 60px; }
.footer__top, .footer__legal { max-width: var(--container); margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; }
.footer__nav { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 32px; }
.footer__nav a, .footer__legal { font-size: 14px; line-height: 14px; font-weight: 500; letter-spacing: -0.01em; }
.footer__nav a:hover, .footer__legal a:hover { text-decoration: underline; }
.footer__social { display: flex; gap: 16px; }
.footer__social a { padding: 4px; opacity: .6; transition: opacity .2s ease; }
.footer__social a:hover { opacity: 1; }
.footer__legal { margin-top: 65px; align-items: center; }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 32px; }

/* ---------- 6) WIDGETS ---------- */

/* Modal vídeo */
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
.modal__box { position: relative; width: min(380px, 100%); aspect-ratio: 9 / 16; max-height: 85vh; }
.modal__video, .modal__video iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; background: #000; }
.modal__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; }

/* WhatsApp */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 900; transition: opacity .2s ease; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; }
.wa__fab { width: 80px; height: 80px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(37, 211, 102, .4); transition: transform .2s ease; }
.wa__fab:hover { transform: scale(1.05); }
.wa__fab svg { grid-area: 1 / 1; width: 44px; height: 44px; transition: opacity .2s ease, transform .2s ease; }
.wa__ico-close { opacity: 0; transform: rotate(-90deg); width: 37px !important; height: 37px !important; }
.wa.is-open .wa__ico-open { opacity: 0; transform: rotate(90deg); }
.wa.is-open .wa__ico-close { opacity: 1; transform: none; }
.wa__panel { position: absolute; right: 0; bottom: 94px; width: 320px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .15), 0 4px 12px rgba(0, 0, 0, .1); animation: pop .25s ease; transform-origin: bottom right; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.wa__head { background: var(--ink); padding: 16px 20px; display: flex; align-items: center; gap: 12px; color: #fff; }
.wa__head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.wa__head div { flex: 1; display: flex; flex-direction: column; }
.wa__head strong { font-size: 15px; font-weight: 600; }
.wa__head span { font-size: 12px; margin-top: 2px; color: rgba(255, 255, 255, .85); line-height: 1.3; }
.wa__x { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; color: #fff; }
.wa__x svg { width: 16px; height: 16px; }
.wa__body { min-height: 120px; padding: 16px; display: flex; gap: 8px; align-items: flex-start;
  background: #e5ddd5 url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4ccc4' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.wa__body > img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin-top: 2px; }
.wa__bubble { background: #fff; padding: 10px 14px; border-radius: 0 12px 12px; max-width: calc(100% - 40px); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.wa__msg { font-size: 14px; color: #303030; line-height: 1.4; min-height: 20px; }
.wa__msg.is-typing::after { content: "|"; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wa__time { display: block; font-size: 11px; color: #8c8c8c; text-align: right; margin-top: 4px; }
.wa__foot { background: #f0f0f0; padding: 12px; }
.wa__start { width: 100%; background: var(--ink); color: #fff; border-radius: 24px; padding: 12px 20px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .1s ease; }
.wa__start:active { transform: scale(.98); }
.wa__start svg { width: 20px; height: 20px; }

/* Invitación a demo */
.demo {
  position: fixed; left: 24px; bottom: 24px; z-index: 950; width: 360px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px;
  box-shadow: 0 24px 60px rgba(30, 20, 60, .18), 0 2px 6px rgba(0, 0, 0, .06);
  letter-spacing: 0; overflow: hidden; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.demo.is-in { opacity: 1; transform: none; }
.demo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 20px 20px 0 0; background: var(--grad-brand); }
.demo__x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #777; transition: background .2s ease; }
.demo__x:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.demo__x svg { width: 16px; height: 16px; }
.demo__who { display: flex; align-items: center; gap: 12px; }
.demo__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.demo__who strong { display: block; font-size: 15px; font-weight: 600; }
.demo__who span { display: block; font-size: 13px; color: #666; }
.demo__title { margin-top: 16px; font-family: var(--f-display); font-weight: 600; font-size: 24px; line-height: 1.2; }
.demo__list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.4; color: #333; }
.demo__list li { display: flex; gap: 10px; align-items: flex-start; }
.demo__list svg { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--green); }
.demo__actions { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.demo__cta { flex: 1; }
.demo__later { font-size: 14px; color: #666; padding: 10px 6px; }
.demo__later:hover { color: var(--ink); text-decoration: underline; }

/* Modal de reserva (cal.com) */
.modal--cal { padding: 24px; }
.cal-box { position: relative; width: min(1000px, 100%); height: min(760px, calc(100vh - 48px)); background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); letter-spacing: 0; }
.cal-box__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); }
.cal-box__head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.cal-box__head div { flex: 1; min-width: 0; }
.cal-box__head strong { display: block; font-size: 16px; font-weight: 600; }
.cal-box__head span { display: block; font-size: 13px; color: #666; }
.cal-box__x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #555; }
.cal-box__x:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.cal-box__x svg { width: 20px; height: 20px; }
.cal-box__body { position: relative; flex: 1; background: #fafafa; }
.cal-box__body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s ease; }
.modal--cal.is-loaded iframe { opacity: 1; }
.cal-box__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #666; font-size: 14px; }
.cal-box__loading span { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal--cal.is-loaded .cal-box__loading { display: none; }
.cal-box__foot { padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; color: #666; text-align: center; }
.cal-box__foot a { text-decoration: underline; color: var(--ink); }
.modal--cal.is-slow:not(.is-loaded) .cal-box__foot { background: #fff8e1; color: #333; font-weight: 500; }

/* ---------- 7) ANIMACIONES DE ENTRADA ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 8) RESPONSIVE ---------- */

/* Tablet (810–1199px) */
@media (max-width: 1199px) {
  :root { --gutter: 40px; }
  .nav__links a, .nav__login { padding: 8px 12px; }
  .nav__bar { padding: 0 24px; }
  .feature__text { padding-right: 48px; }
  .feature--reverse .feature__text { padding-left: 48px; }
  .feature__pic { flex-basis: 46%; height: auto; aspect-ratio: 523 / 411; }
  .audience__col { padding: 40px 20px 16px; }
  .reviews { gap: 20px; }
  .reviews__col { gap: 20px; }
}

@media (max-width: 1023px) {
  .nav__links, .nav__actions { display: none; }
  .nav__burger { display: flex; }
}

/* Móvil (<810px) */
@media (max-width: 809px) {
  :root { --gutter: 20px; --section-pad: 100px var(--gutter) 80px; }
  html { scroll-padding-top: 90px; }

  .nav__bar { height: 64px; padding: 0 12px 0 20px; }

  .hero { padding: 150px var(--gutter) 120px; align-items: flex-start; }
  .badge { font-size: 13px; line-height: 13px; }
  .hero__title { font-size: 40px; }
  .rotator { display: block; margin: 16px auto 0; min-width: 0; width: max-content; text-align: center; }
  .rotator__word { text-align: center; }
  .hero__lead { font-size: 16px; line-height: 26px; }
  .hero__ctas { flex-direction: column-reverse; align-items: center; margin-top: 32px; }
  .hero__ctas .btn { width: 200px; }
  .hero__note { margin-top: 32px; font-size: 13px; line-height: 19px; color: #555; }
  .hero__arrow { display: none; }

  .heading { align-items: flex-start; text-align: left; }
  #why-us .heading { gap: 20px; }
  .h-display { font-size: 40px; font-weight: 600; }
  .h-section { font-size: 28px; }
  #product > .container > .heading, #reviews .heading, #pricing .heading, #faqs .heading { align-items: center; text-align: center; }
  .heading__sub { font-size: 18px; line-height: 1.2; }
  .h-section br { display: none; }

  .audience { grid-template-columns: 1fr; padding: 36px; margin-top: 40px; }
  .audience__col { padding: 0 0 30px; }
  .audience__col + .audience__col { border-left: 0; border-top: 2px solid var(--line); padding-top: 30px; }
  .audience__col:last-child { padding-bottom: 0; }
  .audience__col h3 { font-size: 28px; }
  .studios { margin-top: 60px; }
  .pill { height: 60px; padding: 10px 18px; font-size: 16px; }
  .pill img { width: 36px; height: 36px; }

  .feature, .feature--reverse { flex-direction: column-reverse; align-items: stretch; gap: 32px; padding-top: 80px; }
  .feature--first { padding-top: 36px; }
  .feature__text, .feature--reverse .feature__text { padding: 0; }
  .feature__pic { flex: none; width: 100%; height: auto; aspect-ratio: 350 / 275; }
  .verifactu { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 20px; }
  .verifactu__icon { width: 56px; height: 56px; }
  .verifactu h3 { font-size: 24px; }
  .verifactu + .feature { padding-top: 64px; }

  .reviews { grid-template-columns: 1fr; margin-top: 40px; }
  .review { padding: 28px; }

  .plans { flex-direction: column; align-items: stretch; }
  .plan { width: 100%; max-width: 400px; margin: 0 auto; }
  .plan__features { font-size: 16px; line-height: 24px; padding: 24px 22px 26px; }
  .perks { flex-direction: column; gap: 12px; }
  .perks__dot { display: none; }

  .faq { padding: 22px; }
  .faq h3 { font-size: 17px; line-height: 1.3; }

  .footer__cta { padding: 64px var(--gutter); }
  .footer__ctas { flex-direction: column; width: 100%; max-width: 280px; gap: 12px; }
  .footer__bottom { padding: 40px var(--gutter); }
  .footer__top { flex-direction: column; gap: 32px; }
  .footer__nav { margin-top: 28px; gap: 20px; }
  .footer__legal { flex-direction: column; align-items: flex-start; margin-top: 40px; gap: 20px; }
  .footer__legal nav { gap: 16px 24px; }

  .wa { right: 16px; bottom: 16px; }
  .wa__fab { width: 64px; height: 64px; }
  .wa__fab svg { width: 34px; height: 34px; }
  .wa__panel { bottom: 78px; width: min(320px, calc(100vw - 32px)); }
  .demo { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; }
  .demo__title { font-size: 21px; }
  body.demo-visible .wa { opacity: 0; pointer-events: none; }
  .modal--cal { padding: 0; }
  .cal-box { width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
}

/* ---------- 9) PÁGINAS INTERIORES (legal, blog, 404) ---------- */
.page { padding: 160px var(--gutter) 96px; }
.page__head { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.page__title { font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1.2; letter-spacing: 0; }
.page__title--xl { font-weight: 600; font-size: 72px; }
.page__lead { font-size: 20px; line-height: 28px; letter-spacing: 0; }
.page__back { font-size: 14px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.page__back:hover { color: var(--ink); }
.page--404 { min-height: 80vh; display: grid; place-items: center; }
.page--404 .hero__ctas { margin-top: 16px; }

.post__cat { font-weight: 600; letter-spacing: 0; }
.post__date { margin-top: -8px; font-size: 14px; line-height: 14px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.post__cover { max-width: 960px; margin: 48px auto 0; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--beige); }
.post__cover img { width: 100%; height: 100%; object-fit: cover; }

/* Texto largo (artículos y legales) */
.prose { max-width: 760px; margin: 48px auto 0; font-size: 17px; line-height: 1.7; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 20px; }
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { letter-spacing: -0.02em; line-height: 1.3; font-weight: 600; }
.prose h2 { font-size: 30px; margin-top: 48px; }
.prose h3 { font-size: 24px; margin-top: 40px; }
.prose h4 { font-size: 20px; margin-top: 32px; }
.prose h5, .prose h6 { font-size: 18px; margin-top: 28px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--muted-2); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(30, 30, 30, .35); }
.prose a:hover { text-decoration-color: currentColor; }
.prose img { border-radius: 16px; margin-inline: auto; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 10px 12px; vertical-align: top; text-align: left; }
.page--legal .prose h2 { font-size: 22px; }
.page--legal .prose { font-size: 16px; }

.post__nav { max-width: 760px; margin: 64px auto 0; padding-top: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.post__nav-link { display: flex; flex-direction: column; gap: 6px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.post__nav-link span { font-size: 13px; font-weight: 500; color: var(--muted-2); }
.post__nav-link--next { text-align: right; }
.post__nav-link:hover { text-decoration: underline; }

/* Tarjetas del blog */
.post-grid { max-width: var(--container); margin: 48px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; row-gap: 12px; }
.post-card { display: flex; flex-direction: column; padding-bottom: 40px; }
.post-card__thumb { aspect-ratio: 374 / 245; border-radius: 24px; overflow: hidden; background: var(--beige); }
.post-card__thumb > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card__thumb > img { transform: scale(1.04); }
.post-card__ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #f1edea, #e2dcf5); }
.post-card__ph img { width: 64px; height: 64px; opacity: .9; }
.post-card time { margin-top: 20px; font-size: 12px; line-height: 16.8px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.post-card h2 { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: 0; }
.post-card:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.related { padding-top: 0; }
.related__title { text-align: center; margin: 0 auto; }

@media (max-width: 1199px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 809px) {
  .page { padding: 130px var(--gutter) 64px; }
  .page__title { font-size: 30px; }
  .page__title--xl { font-size: 44px; }
  .page__lead { font-size: 17px; line-height: 26px; }
  .post__cover { margin-top: 32px; border-radius: 16px; }
  .prose { margin-top: 32px; font-size: 16px; }
  .prose h2 { font-size: 24px; margin-top: 40px; }
  .prose h3 { font-size: 20px; }
  .prose h4 { font-size: 18px; }
  .post__nav { grid-template-columns: 1fr; }
  .post__nav-link--next { text-align: left; }
  .post-grid { grid-template-columns: 1fr; margin-top: 32px; }
}

/* ---------- 10) SEO: enlaces internos, últimos artículos, CTA en artículos ---------- */
.more-link { font-size: 15px; font-weight: 600; letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(30, 30, 30, .3); margin-top: -8px; }
.more-link:hover { text-decoration-color: currentColor; }
.verifactu__text { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.verifactu__text .more-link { margin-top: 0; }
.latest .post-grid { margin-top: 48px; }
.latest__all { display: flex; justify-content: center; margin-top: 8px; }
.post-cta { max-width: 760px; margin: 56px auto 0; padding: 32px; border-radius: 20px; background: var(--beige); display: flex; align-items: center; gap: 24px; }
.post-cta img { width: 56px; height: 56px; flex: none; }
.post-cta div { flex: 1; }
.post-cta strong { display: block; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.post-cta p { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.post__meta { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 14px; font-weight: 500; color: var(--muted-2); letter-spacing: 0; margin-top: -8px; }
.notice { border-left: 4px solid var(--lime); background: #f7fbe6; padding: 16px 20px; border-radius: 0 12px 12px 0; font-size: 16px; }
.breadcrumbs { font-size: 13px; color: var(--muted-2); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; letter-spacing: 0; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 809px) {
  .post-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
}

/* ---------- 11) FUNCIONALIDADES ---------- */
.ic--16 { width: 16px; height: 16px; }
.feature__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
#product .heading .more-link { margin-top: 0; }

/* Menú desplegable */
.nav__dd { position: relative; }
.nav__dd-trigger { display: inline-flex !important; align-items: center; gap: 6px; }
.nav__dd-trigger .ic { transition: transform .2s ease; }
.nav__dd-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px); width: 560px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
  padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav__dd:hover .nav__dd-panel, .nav__dd:focus-within .nav__dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__dd:hover .nav__dd-trigger .ic, .nav__dd:focus-within .nav__dd-trigger .ic { transform: rotate(180deg); }
.nav__dd-item { display: flex; gap: 12px; padding: 12px !important; border-radius: 12px !important; align-items: flex-start; }
.nav__dd-item:hover { background: rgba(0, 0, 0, .04); }
.nav__dd-emoji { font-size: 22px; line-height: 1; }
.nav__dd-item strong { display: block; font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: 0; }
.nav__dd-item small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: #666; letter-spacing: 0; }
.nav__dd-all { grid-column: 1 / -1; text-align: center; font-size: 14px !important; font-weight: 600; padding: 10px !important; border-top: 1px solid var(--line); border-radius: 0 !important; margin-top: 4px; }
.nav__mobile-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; padding: 0 0 6px 10px; }
.nav__mobile-sub a { font-size: 14px; padding: 8px 10px !important; color: #555; }

.footer__nav--features { margin-top: 20px; gap: 12px 24px; }
.footer__nav--features a { font-weight: 400; color: #555; }

/* Página de funcionalidad */
.fx-hero { padding: 150px var(--gutter) 80px; background: linear-gradient(180deg, #f6f3fd 0%, #fff 100%); }
.fx-hero__grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.fx-hero .breadcrumbs { justify-content: flex-start; margin-bottom: 20px; }
.fx-hero h1 { font-family: var(--f-display); font-weight: 500; font-size: 52px; line-height: 1.12; letter-spacing: 0; margin-top: 16px; }
.fx-hero h1 b { font-weight: 700; }
.fx-hero__lead { margin-top: 20px; font-size: 19px; line-height: 1.6; letter-spacing: -0.01em; }
.fx-hero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.fx-hero__note { margin-top: 16px; font-size: 14px; color: #666; letter-spacing: 0; }
.fx-hero__pic { border-radius: 24px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--glass); box-shadow: 0 30px 60px rgba(60, 40, 120, .12); }
.fx-hero__pic img { width: 100%; height: 100%; object-fit: cover; }

.fx-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fx-card { padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); }
.fx-card .ic { color: var(--green); width: 26px; height: 26px; }
.fx-card h3 { margin-top: 16px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.fx-card p { margin-top: 8px; color: #444; line-height: 1.6; }
.fx-card a, .fx-why a, .fx-faq a { text-decoration: underline; text-underline-offset: 3px; }

.fx-steps { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.fx-step { position: relative; padding: 28px; border-radius: 20px; background: var(--beige); }
.fx-step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--f-display); font-weight: 600; font-size: 18px; }
.fx-step h3 { margin-top: 16px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.fx-step p { margin-top: 8px; line-height: 1.6; }

.fx-why { max-width: 820px; margin: 0 auto; }
.fx-why h2 { text-align: center; margin: 0 auto; }
.fx-why__text { margin-top: 28px; font-size: 18px; line-height: 1.75; letter-spacing: -0.01em; }
.fx-why__text p + p { margin-top: 18px; }

.fx-quote { max-width: 820px; margin: 56px auto 0; padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: var(--glass); }
.fx-quote blockquote { margin: 0; font-size: 20px; line-height: 1.6; letter-spacing: -0.01em; }
.fx-quote figcaption { margin-top: 20px; display: flex; align-items: center; gap: 14px; }
.fx-quote figcaption img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.fx-quote figcaption strong { display: block; font-weight: 600; }

.fx-plans { max-width: 820px; margin: 40px auto 0; padding: 20px 24px; border-radius: 16px; background: #f7fbe6; border-left: 4px solid var(--lime); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.fx-plans p { font-weight: 500; }
.fx-plans a { font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

.fx-faq { max-width: 900px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 16px; }
.fx-faq .faq p { max-width: none; }

.fx-more { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fx-more a { display: flex; gap: 14px; align-items: flex-start; padding: 22px; border: 1px solid var(--line); border-radius: 18px; transition: box-shadow .2s ease, transform .2s ease; }
.fx-more a:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.fx-more .nav__dd-emoji { font-size: 26px; }
.fx-more strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.fx-more small { display: block; margin-top: 4px; color: #555; font-size: 14px; line-height: 1.45; letter-spacing: 0; }
.fx-section-title { text-align: center; margin: 0 auto; }

@media (max-width: 1199px) {
  .fx-grid, .fx-more { grid-template-columns: repeat(2, 1fr); }
  .fx-hero h1 { font-size: 44px; }
}
@media (max-width: 809px) {
  .fx-hero { padding: 120px var(--gutter) 56px; }
  .fx-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .fx-hero h1 { font-size: 34px; }
  .fx-hero__lead { font-size: 17px; }
  .fx-grid, .fx-steps, .fx-more { grid-template-columns: 1fr; }
  .fx-why__text { font-size: 16px; }
  .fx-quote { padding: 24px; }
  .fx-quote blockquote { font-size: 17px; }
  .fx-plans { flex-direction: column; align-items: flex-start; }
}
.fx-hero__pic--contain { background: linear-gradient(135deg, #efeaf9, #f6f3ef); padding: 28px; }
.fx-hero__pic--contain img { object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .12)); }
.inline-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(30, 30, 30, .35); }
.inline-link:hover { text-decoration-color: currentColor; }

/* ---------- 12) CONTACTO POR WHATSAPP ---------- */
.wa-cta { max-width: 900px; margin: 32px auto 0; padding: 28px 32px; border-radius: 20px; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 22px; }
.wa-cta__icon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: grid; place-items: center; }
.wa-cta__icon svg { width: 30px; height: 30px; color: #fff; }
.wa-cta__text { flex: 1; }
.wa-cta h3 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.wa-cta p { margin-top: 4px; color: rgba(255, 255, 255, .75); letter-spacing: 0; }
.wa-cta__btn { background: #fff; color: var(--ink); flex: none; }
.wa-cta__btn:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.wa-cta__btn .ic { color: #1faa53; }
@media (max-width: 809px) {
  .wa-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
  .wa-cta__btn { width: 100%; }
}