/* ==========================================================================
   FisioXperience — hoja de estilos base
   Autor: rediseño 2026 · Paleta verde/negro sobre fondo verde niebla
   Uso en WordPress: encolar desde el child theme (ver estructura-wordpress.md)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Verdes — más profundos y ligeramente girados hacia esmeralda
     para alejarse del verde WhatsApp (#25D366) */
  --fx-verde:        #1C7A57;   /* principal */
  --fx-verde-osc:    #0E3A2B;   /* fondos de sección, "tinta verde" */
  --fx-verde-noche:  #082019;   /* casi negro verdoso */
  --fx-verde-vivo:   #45B187;   /* hover, subrayados, micro-acentos */

  /* Negro de realce (no es fondo, es énfasis) */
  --fx-negro:        #111413;
  --fx-negro-soft:   #1D2321;

  /* Fondos — ni blanco ni negro */
  --fx-fondo:        #EEF0EA;   /* verde niebla muy claro */
  --fx-fondo-2:      #E1E7DE;   /* secciones alternas */
  --fx-carta:        #F8F9F5;   /* tarjetas sobre el fondo */

  /* Acento cálido, sólo para urgencias y avisos */
  --fx-ambar:        #D9A441;

  --fx-texto:        #1A211E;
  --fx-texto-suave:  #4C5A54;
  --fx-linea:        rgba(14,58,43,.14);

  /* Tipografía */
  --fx-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --fx-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --fx-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --fx-radio:   14px;
  --fx-radio-l: 26px;
  --fx-ancho:   1180px;
  --fx-sombra:  0 18px 44px -24px rgba(8,32,25,.45);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--fx-fondo);
  color:var(--fx-texto);
  font-family:var(--fx-body);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--fx-display);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.028em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.4rem,6vw,4.4rem); }
h2{ font-size:clamp(1.85rem,3.9vw,3rem); }
h3{ font-size:clamp(1.15rem,1.9vw,1.5rem); letter-spacing:-.018em; }
p{ margin:0 0 1em; max-width:62ch; }
strong{ font-weight:700; color:var(--fx-negro); }

.fx-wrap{ width:min(100% - 2.4rem, var(--fx-ancho)); margin-inline:auto; }
.fx-wrap--ancho{ width:min(100% - 2.4rem, 1400px); }
.fx-section{ padding:clamp(60px,8.5vw,116px) 0; }
.fx-section--corta{ padding:clamp(40px,5vw,68px) 0; }
.fx-center{ text-align:center; }
.fx-center p{ margin-inline:auto; }

/* Eyebrow: no es decoración, indica SIEMPRE la unidad de negocio */
.fx-eyebrow{
  font-family:var(--fx-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fx-verde);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin:0 0 1.1rem;
}
.fx-eyebrow::before{
  content:""; width:26px; height:2px; background:currentColor; display:block;
}
.fx-eyebrow--claro{ color:var(--fx-verde-vivo); }

.fx-lead{ font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--fx-texto-suave); }
.fx-mark{
  background:linear-gradient(to top, rgba(69,177,135,.35) 0 .42em, transparent .42em);
  padding-inline:.06em;
}

/* --------------------------------------------------------------------------
   3. BOTONES
   -------------------------------------------------------------------------- */
.fx-btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--fx-body); font-weight:600; font-size:.98rem;
  padding:.92em 1.5em; border-radius:100px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; line-height:1;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.fx-btn:hover{ transform:translateY(-2px); }
.fx-btn--verde{ background:var(--fx-verde); color:#fff; }
.fx-btn--verde:hover{ background:var(--fx-verde-osc); }
.fx-btn--negro{ background:var(--fx-negro); color:#fff; }
.fx-btn--negro:hover{ background:var(--fx-verde-osc); }
.fx-btn--linea{ border-color:currentColor; color:var(--fx-verde-osc); }
.fx-btn--linea:hover{ background:var(--fx-verde-osc); color:#fff; border-color:var(--fx-verde-osc); }
.fx-btn--claro{ background:#fff; color:var(--fx-verde-osc); }
.fx-btn--claro:hover{ background:var(--fx-verde-vivo); color:var(--fx-verde-noche); }
.fx-btn--fantasma{ border-color:rgba(255,255,255,.45); color:#fff; }
.fx-btn--fantasma:hover{ background:#fff; color:var(--fx-verde-osc); border-color:#fff; }

.fx-btns{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Enlace con flecha */
.fx-link{
  font-family:var(--fx-mono); font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--fx-verde);
  display:inline-flex; align-items:center; gap:.5em; font-weight:500;
}
.fx-link span{ transition:transform .2s ease; }
.fx-link:hover span{ transform:translateX(5px); }

/* --------------------------------------------------------------------------
   4. CABECERA
   -------------------------------------------------------------------------- */
.fx-topbar{
  background:var(--fx-verde-noche); color:rgba(255,255,255,.78);
  font-family:var(--fx-mono); font-size:.73rem; letter-spacing:.05em;
}
.fx-topbar .fx-wrap{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  justify-content:center; padding:.55rem 0;
}
.fx-topbar a{ color:#fff; text-decoration:none; }
.fx-topbar a:hover{ color:var(--fx-verde-vivo); }

.fx-header{
  position:sticky; top:0; z-index:60;
  background:rgba(238,240,234,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--fx-linea);
  transition:box-shadow .25s ease;
}
.fx-header.is-stuck{ box-shadow:0 10px 30px -22px rgba(8,32,25,.6); }
.fx-header .fx-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 0;
}
.fx-logo{
  font-family:var(--fx-display); font-weight:800; font-size:1.32rem;
  letter-spacing:-.03em; text-decoration:none; color:var(--fx-verde-osc);
  display:flex; align-items:center; gap:.55rem;
}
.fx-logo em{ font-style:normal; color:var(--fx-verde); }

.fx-nav{ display:flex; align-items:center; gap:.35rem; }
.fx-nav > li{ position:relative; list-style:none; }
.fx-nav ul{ list-style:none; margin:0; padding:0; }
.fx-nav > li > a{
  display:block; padding:.7rem .85rem; text-decoration:none;
  font-weight:600; font-size:.94rem; color:var(--fx-verde-osc); border-radius:8px;
}
.fx-nav > li > a:hover{ background:rgba(28,122,87,.1); color:var(--fx-verde); }
.fx-sub{
  position:absolute; top:100%; left:0; min-width:290px;
  background:var(--fx-carta); border:1px solid var(--fx-linea);
  border-radius:var(--fx-radio); padding:.5rem; box-shadow:var(--fx-sombra);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.2s ease;
}
.fx-nav > li:hover .fx-sub,
.fx-nav > li:focus-within .fx-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.fx-sub a{
  display:block; padding:.6rem .8rem; text-decoration:none; border-radius:9px;
  font-size:.9rem; color:var(--fx-texto);
}
.fx-sub a:hover{ background:var(--fx-verde-osc); color:#fff; }
.fx-sub .fx-sub__tag{
  font-family:var(--fx-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fx-verde); padding:.4rem .8rem .2rem; display:block;
}
.fx-burger{
  display:none; background:none; border:0; padding:.5rem; cursor:pointer;
  color:var(--fx-verde-osc);
}
.fx-burger svg{ width:26px; height:26px; }

/* --------------------------------------------------------------------------
   5. SIGNATURE — "Las dos puertas"
   -------------------------------------------------------------------------- */
.fx-hero{
  background:var(--fx-verde-noche); color:#fff; position:relative; overflow:hidden;
}
.fx-hero__intro{ padding:clamp(48px,6vw,86px) 0 clamp(28px,3vw,42px); position:relative; z-index:2; }
.fx-hero h1{ color:#fff; max-width:16ch; }
.fx-hero h1 em{ font-style:normal; color:var(--fx-verde-vivo); }
.fx-hero__intro p{ color:rgba(255,255,255,.76); font-size:clamp(1.05rem,1.6vw,1.3rem); max-width:52ch; }

.fx-puertas{
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  background:rgba(255,255,255,.12); position:relative; z-index:2;
}
.fx-puerta{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(28px,3.4vw,46px) clamp(22px,3vw,44px) clamp(32px,4vw,54px);
  min-height:clamp(300px,34vw,420px);
  display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; color:#fff;
  transition:flex-grow .4s ease;
}
/* Hueco de imagen de fondo: sustituir background-image por la foto real */
.fx-puerta::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--fx-puerta-img, linear-gradient(150deg,#123c2d,#0b2a20));
  background-size:cover; background-position:center;
  transform:scale(1.02); transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.fx-puerta::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(8,32,25,.93) 12%, rgba(8,32,25,.45) 60%, rgba(8,32,25,.25));
  transition:background .4s ease;
}
.fx-puerta:hover::before{ transform:scale(1.09); }
.fx-puerta:hover::after{
  background:linear-gradient(to top, rgba(28,122,87,.94) 12%, rgba(8,32,25,.5) 65%, rgba(8,32,25,.3));
}
.fx-puerta h2{ font-size:clamp(1.5rem,2.6vw,2.15rem); color:#fff; margin-bottom:.3em; }
.fx-puerta p{ color:rgba(255,255,255,.8); font-size:.98rem; max-width:34ch; margin-bottom:1.2em; }
.fx-puerta__num{
  font-family:var(--fx-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fx-verde-vivo); margin-bottom:auto;
}
.fx-puerta__cta{
  font-family:var(--fx-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6em; font-weight:500;
}
.fx-puerta__cta span{ transition:transform .25s ease; }
.fx-puerta:hover .fx-puerta__cta span{ transform:translateX(6px); }

/* Cinta de datos bajo el hero */
.fx-cinta{
  background:var(--fx-negro); color:rgba(255,255,255,.85);
  font-family:var(--fx-mono); font-size:.78rem; letter-spacing:.06em;
  position:relative; z-index:2;
}
.fx-cinta .fx-wrap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem; padding:.9rem 0;
}
.fx-cinta b{ color:var(--fx-verde-vivo); font-weight:500; }

/* --------------------------------------------------------------------------
   6. HERO SECUNDARIO (páginas internas)
   -------------------------------------------------------------------------- */
.fx-hero2{
  background:var(--fx-verde-osc); color:#fff; position:relative; overflow:hidden;
  padding:clamp(56px,7vw,104px) 0 clamp(52px,6vw,92px);
}
.fx-hero2::before{
  content:""; position:absolute; inset:0;
  background:var(--fx-hero-img, none) center/cover no-repeat;
  opacity:.34;
}
.fx-hero2::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--fx-verde-noche) 32%, rgba(8,32,25,.55) 100%);
}
.fx-hero2 .fx-wrap{ position:relative; z-index:2; }
.fx-hero2 h1{ color:#fff; max-width:17ch; }
.fx-hero2 p{ color:rgba(255,255,255,.8); font-size:clamp(1.02rem,1.4vw,1.2rem); }

/* --------------------------------------------------------------------------
   7. HUECOS DE IMAGEN
   Sustituir por <img> real. El texto del data-ph indica medida y alt sugerido.
   -------------------------------------------------------------------------- */
.fx-ph{
  position:relative; margin:0; border-radius:var(--fx-radio-l); overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(28,122,87,.09) 0 12px, rgba(28,122,87,.04) 12px 24px),
    var(--fx-fondo-2);
  border:1px dashed rgba(28,122,87,.4);
  display:grid; place-items:center; min-height:180px;
}
.fx-ph::after{
  content:attr(data-ph);
  font-family:var(--fx-mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--fx-verde-osc); text-align:center; padding:1rem; max-width:34ch; opacity:.75;
}
.fx-ph--16x9{ aspect-ratio:16/9; }
.fx-ph--4x3{ aspect-ratio:4/3; }
.fx-ph--1x1{ aspect-ratio:1/1; }
.fx-ph--3x4{ aspect-ratio:3/4; }
.fx-ph--alto{ aspect-ratio:9/13; }
.fx-ph img{ width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------------------------------
   8. TARJETAS Y REJILLAS
   -------------------------------------------------------------------------- */
.fx-grid{ display:grid; gap:1.4rem; }
.fx-grid--2{ grid-template-columns:repeat(2,1fr); }
.fx-grid--3{ grid-template-columns:repeat(3,1fr); }
.fx-grid--4{ grid-template-columns:repeat(4,1fr); }

.fx-card{
  background:var(--fx-carta); border:1px solid var(--fx-linea);
  border-radius:var(--fx-radio-l); padding:1.7rem 1.6rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fx-card:hover{ transform:translateY(-5px); box-shadow:var(--fx-sombra); border-color:rgba(28,122,87,.35); }
.fx-card h3{ margin-bottom:.45em; }
.fx-card p{ color:var(--fx-texto-suave); font-size:.95rem; margin-bottom:0; }
.fx-card__icono{
  width:44px; height:44px; border-radius:12px; background:rgba(28,122,87,.12);
  display:grid; place-items:center; color:var(--fx-verde); margin-bottom:1rem;
  font-family:var(--fx-mono); font-weight:600; font-size:.95rem;
}
.fx-card--servicio{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.fx-card--servicio .fx-card__body{ padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.8rem; flex:1; }
.fx-card--servicio .fx-ph{ border-radius:0; border:0; border-bottom:1px solid var(--fx-linea); }
.fx-card--servicio .fx-link{ margin-top:auto; }

.fx-badge{
  display:inline-block; font-family:var(--fx-mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:.35em .7em; border-radius:100px;
  background:var(--fx-verde-osc); color:#fff;
}
.fx-badge--nuevo{ background:var(--fx-ambar); color:var(--fx-negro); }
.fx-badge--urgencia{ background:var(--fx-negro); color:var(--fx-ambar); }

/* Lista de argumentos con check */
.fx-checks{ list-style:none; padding:0; margin:0; display:grid; gap:.85rem; }
.fx-checks li{ position:relative; padding-left:2rem; color:var(--fx-texto-suave); }
.fx-checks li::before{
  content:""; position:absolute; left:0; top:.42em; width:15px; height:15px;
  border-radius:50%; background:var(--fx-verde);
  box-shadow:inset 0 0 0 2px var(--fx-fondo), 0 0 0 3px rgba(28,122,87,.2);
}
.fx-checks strong{ display:block; color:var(--fx-texto); font-weight:700; }
.fx-checks--claro li{ color:rgba(255,255,255,.78); }
.fx-checks--claro li::before{ background:var(--fx-verde-vivo); box-shadow:inset 0 0 0 2px var(--fx-verde-noche), 0 0 0 3px rgba(69,177,135,.25); }
.fx-checks--claro strong{ color:#fff; }

/* --------------------------------------------------------------------------
   9. BLOQUE ALTERNO TEXTO / IMAGEN
   -------------------------------------------------------------------------- */
.fx-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.6rem); align-items:center; }
.fx-split--invertido .fx-split__media{ order:-1; }
.fx-split__texto p:last-child{ margin-bottom:1.4em; }

/* Franja oscura a sangre con imagen de fondo */
.fx-banda{
  position:relative; color:#fff; overflow:hidden;
  padding:clamp(64px,8vw,120px) 0;
  background:var(--fx-verde-osc);
}
.fx-banda::before{
  content:""; position:absolute; inset:0;
  background:var(--fx-banda-img, none) center/cover no-repeat fixed;
  opacity:.3;
}
.fx-banda::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--fx-verde-noche) 28%, rgba(14,58,43,.72) 100%);
}
.fx-banda .fx-wrap{ position:relative; z-index:2; }
.fx-banda h2{ color:#fff; }
.fx-banda p{ color:rgba(255,255,255,.78); }

.fx-banda--negra{ background:var(--fx-negro); }
.fx-banda--negra::after{ background:linear-gradient(100deg, var(--fx-negro) 30%, rgba(17,20,19,.7) 100%); }

/* --------------------------------------------------------------------------
   10. CARRUSEL (scroll-snap, sin dependencias)
   -------------------------------------------------------------------------- */
.fx-carrusel{ position:relative; }
.fx-carrusel__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:1.6rem; flex-wrap:wrap;
}
.fx-carrusel__head h2, .fx-carrusel__head h3{ margin-bottom:0; }
.fx-rail{
  display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1.2rem; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--fx-verde) transparent;
  cursor:grab;
}
.fx-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.fx-rail::-webkit-scrollbar{ height:5px; }
.fx-rail::-webkit-scrollbar-thumb{ background:var(--fx-verde); border-radius:4px; }
.fx-rail::-webkit-scrollbar-track{ background:rgba(14,58,43,.1); border-radius:4px; }
.fx-rail > *{
  scroll-snap-align:start; flex:0 0 clamp(255px,29vw,360px); user-select:none;
}
.fx-rail--ancho > *{ flex:0 0 clamp(280px,42vw,520px); }
.fx-flechas{ display:flex; gap:.5rem; }
.fx-flecha{
  width:46px; height:46px; border-radius:50%; border:2px solid var(--fx-verde-osc);
  background:transparent; color:var(--fx-verde-osc); cursor:pointer;
  display:grid; place-items:center; transition:.2s ease;
}
.fx-flecha:hover{ background:var(--fx-verde-osc); color:#fff; }
.fx-flecha svg{ width:18px; height:18px; }
.fx-banda .fx-flecha{ border-color:rgba(255,255,255,.5); color:#fff; }
.fx-banda .fx-flecha:hover{ background:#fff; color:var(--fx-verde-osc); }

/* --------------------------------------------------------------------------
   11. HISTORIA / TIMELINE
   -------------------------------------------------------------------------- */
.fx-timeline{ display:grid; gap:0; counter-reset:paso; }
.fx-paso{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.5rem 0; border-bottom:1px solid var(--fx-linea);
}
.fx-paso:last-child{ border-bottom:0; }
.fx-paso__marca{
  font-family:var(--fx-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fx-verde); padding-top:.35rem; min-width:96px;
}
.fx-paso h3{ margin-bottom:.3em; }
.fx-paso p{ margin-bottom:0; color:var(--fx-texto-suave); }
.fx-banda .fx-paso{ border-color:rgba(255,255,255,.16); }
.fx-banda .fx-paso__marca{ color:var(--fx-verde-vivo); }

.fx-cita{
  font-family:var(--fx-display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.18; max-width:22ch;
}
.fx-cita span{ color:var(--fx-verde-vivo); }

/* --------------------------------------------------------------------------
   12. PRECIOS
   -------------------------------------------------------------------------- */
.fx-precio{
  background:var(--fx-carta); border:1px solid var(--fx-linea);
  border-radius:var(--fx-radio-l); padding:1.9rem 1.7rem;
  display:flex; flex-direction:column; gap:.9rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.fx-precio:hover{ transform:translateY(-6px); box-shadow:var(--fx-sombra); }
.fx-precio--destacado{ background:var(--fx-verde-osc); color:#fff; border-color:transparent; }
.fx-precio--destacado .fx-precio__nota,
.fx-precio--destacado .fx-precio__sub{ color:rgba(255,255,255,.72); }
.fx-precio__titulo{
  font-family:var(--fx-mono); font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fx-verde); font-weight:600;
}
.fx-precio--destacado .fx-precio__titulo{ color:var(--fx-verde-vivo); }
.fx-precio__cifra{
  font-family:var(--fx-display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(2.4rem,4.6vw,3.4rem); line-height:1;
}
.fx-precio__sub{ font-size:.92rem; color:var(--fx-texto-suave); }
.fx-precio__nota{ font-size:.85rem; color:var(--fx-texto-suave); margin-top:auto; }
.fx-precio .fx-btn{ justify-content:center; }
.fx-ahorro{
  align-self:flex-start; font-family:var(--fx-mono); font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:.35em .7em; border-radius:100px;
  background:var(--fx-ambar); color:var(--fx-negro);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.fx-faq{ display:grid; gap:.7rem; max-width:900px; }
.fx-faq details{
  background:var(--fx-carta); border:1px solid var(--fx-linea);
  border-radius:var(--fx-radio); overflow:hidden; transition:border-color .2s ease;
}
.fx-faq details[open]{ border-color:rgba(28,122,87,.42); }
.fx-faq summary{
  cursor:pointer; list-style:none; padding:1.05rem 3.2rem 1.05rem 1.3rem;
  font-weight:700; font-size:1.02rem; position:relative;
}
.fx-faq summary::-webkit-details-marker{ display:none; }
.fx-faq summary::after{
  content:"+"; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  font-family:var(--fx-mono); font-size:1.4rem; color:var(--fx-verde); line-height:1;
  transition:transform .2s ease;
}
.fx-faq details[open] summary::after{ content:"–"; }
.fx-faq summary:hover{ color:var(--fx-verde); }
.fx-faq__body{ padding:0 1.3rem 1.3rem; color:var(--fx-texto-suave); }
.fx-faq__body p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   14. CTA FINAL + FOOTER
   -------------------------------------------------------------------------- */
.fx-cta{
  background:var(--fx-verde); color:#fff; border-radius:var(--fx-radio-l);
  padding:clamp(2.2rem,5vw,3.6rem); text-align:center; position:relative; overflow:hidden;
}
.fx-cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 0%, rgba(69,177,135,.55), transparent 55%);
}
.fx-cta > *{ position:relative; z-index:2; }
.fx-cta h2{ color:#fff; }
.fx-cta p{ color:rgba(255,255,255,.85); margin-inline:auto; }
.fx-cta .fx-btns{ justify-content:center; }

.fx-footer{ background:var(--fx-verde-noche); color:rgba(255,255,255,.72); padding:clamp(48px,6vw,80px) 0 1.5rem; }
.fx-footer h4{
  font-family:var(--fx-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fx-verde-vivo); font-weight:500; margin-bottom:1rem;
}
.fx-footer a{ color:rgba(255,255,255,.82); text-decoration:none; }
.fx-footer a:hover{ color:var(--fx-verde-vivo); }
.fx-footer p, .fx-footer li{ font-size:.92rem; }
.fx-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.fx-footer__grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2.4rem; }
.fx-footer__legal{
  margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between;
  font-size:.82rem; font-family:var(--fx-mono); letter-spacing:.04em;
}

/* Barra fija móvil */
.fx-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:var(--fx-verde-noche); border-top:1px solid rgba(255,255,255,.12);
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  gap:.6rem;
}
.fx-movil .fx-btn{ flex:1; justify-content:center; font-size:.9rem; padding:.85em 1em; }

/* --------------------------------------------------------------------------
   15. MOVIMIENTO
   -------------------------------------------------------------------------- */
.fx-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.fx-reveal.is-in{ opacity:1; transform:none; }
.fx-reveal[data-delay="1"]{ transition-delay:.09s; }
.fx-reveal[data-delay="2"]{ transition-delay:.18s; }
.fx-reveal[data-delay="3"]{ transition-delay:.27s; }

:focus-visible{ outline:3px solid var(--fx-verde-vivo); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .fx-reveal{ opacity:1; transform:none; }
  .fx-banda::before{ background-attachment:scroll; }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .fx-grid--4{ grid-template-columns:repeat(2,1fr); }
  .fx-footer__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .fx-nav{
    position:fixed; inset:0 0 0 auto; width:min(88%,360px);
    background:var(--fx-carta); flex-direction:column; align-items:stretch;
    padding:5rem 1.2rem 2rem; gap:.2rem; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s ease; box-shadow:var(--fx-sombra);
  }
  .fx-nav.is-open{ transform:none; }
  .fx-sub{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:transparent; padding:0 0 .6rem .8rem;
  }
  .fx-burger{ display:block; position:relative; z-index:80; }
  .fx-puertas{ grid-template-columns:1fr; }
  .fx-split{ grid-template-columns:1fr; }
  .fx-split--invertido .fx-split__media{ order:0; }
  .fx-grid--3{ grid-template-columns:1fr; }
  .fx-grid--2{ grid-template-columns:1fr; }
  .fx-movil{ display:flex; }
  body{ padding-bottom:72px; }
  .fx-banda::before{ background-attachment:scroll; }
}
@media (max-width:620px){
  .fx-grid--4{ grid-template-columns:1fr; }
  .fx-footer__grid{ grid-template-columns:1fr; }
  .fx-paso{ grid-template-columns:1fr; gap:.4rem; }
  .fx-topbar .fx-wrap{ font-size:.68rem; }
  .fx-cinta .fx-wrap{ justify-content:flex-start; }
}